ec_12.ppt

Size: px

Start display at page:

Download "ec_12.ppt"

诏艾
5 years ago
Views:

1 第十二章網頁的分割 - 框架 1/77

2 第十二章網頁的分割 - 框架 12-1 認識框架 12-2 框架的使用與編輯 12-3 框頁網頁的儲存與編輯 12-4 設定框架屬性與超連結 2/77

3 12-1 認識框架當您再瀏覽網站時, 會看到不少網站的選單列在上方或是右側, 或者是網站的導覽列版權聲明和 Logo 都放在固定的區域, 這是共用邊框的原始概念而在網頁中也有類似的功能, 也就是框架所謂的框架, 就是將網頁劃分成不同的區域, 每個區域是一個頁面, 可以放置不同的網頁元件, 而每個區域就是一個框架這時您就可以將網站的選單列網站的 Logo 等固定的元件放在框架中, 而網頁的主要內容放在另一個框架中, 而產生所謂共用邊框的效果 3/77

4 有框架的網站 4/77

5 目前最常見的框架分割方式有二水平分割和垂直分割, 水平分割是將網頁分割為上下二個框架, 一般選單列放在上方的框架, 而網頁內容則放在下方的框架上圖就是水平分割的框架設定而垂直分割則是將網頁左右分隔為兩個區域, 一般是將選單列或共用內容放在左側的框架, 而網頁的內容放在右側的框架當然網頁中可以有多個框架, 並不僅單單只分隔為兩個頁面, 只是多數網頁設計師不建議使用過多的框架, 版面過於分散或窄小時, 網頁內容反而受限, 而且框架越多網頁內部超連結的設定就更麻煩, 所以建議不要分割超過三個以上的框架為宜 5/77

6 12-2 框架的使用與編輯認識框架範本建立框架網頁 6/77

7 框架的使用與編輯要在 FrontPage 中使用框架有二種方法 : 一個是利用軟體內建的網頁範例加以套用另一個則是自己手動製作分割框架當然前者較為簡單, 也可以省去一一分割框架的麻煩套用範本後還可以自己動手來調整框架的大小, 刪除或增加框架, 來完成您心目中的框架網頁版面 7/77

8 認識框架範本要在網頁中套用框架範本, 請執行檔案 / 開新檔案來開啟開新檔案工作窗格, 點選工作窗格中的其他網頁範本來看看 FrontPage 內建的網頁範本 8/77

9 使用網頁範本中的框架最方便 9/77

10 範本網頁對話視窗 10/77

11 10 種框架範本介紹 1. 內容 : 將網頁切割為左右兩邊, 一般左側放置超連結的框架, 而右側則是網頁的主頁 2. 水平分割 : 將網頁均分為上框架和下框架, 一般上框架放置選單列, 而下框架放置內容列 3. 由上至下層次 : 將網頁水平分割為三個區塊, 最上方的區塊最小, 用以放置超連結列, 而最下方的區域最大, 也就是網頁的主頁, 或是上下區域各放置選單列和版權列, 而中間放置網頁的主頁, 本章的範例網站就是套用此範本 4. 垂直分割 : 將網頁垂直分割為均分的左右兩個區塊, 常用來製作相簿網頁之 5. 頁尾 : 將網頁分割為上下兩個區域, 下方的區域較小用以放置超連結 6. 頁首 : 將網頁分割為上下兩個區域, 上方的區域較小用以放置超連結 7. 頁首頁尾及內容 : 將網頁分隔為四個區域, 上方下方和左側的網頁區域較小, 用以放置超連結, 而右側則是主頁 8. 巢狀層次 : 將網頁分割為上方左側和右側網頁, 左側的區域高度和網頁高度相同, 一般連結列在左側, 而上方則是放置網站標題, 這也是常見的框架分隔 9. 註腳 : 將網頁分割為上下兩個區域, 主頁的超連結內容會影響下方註腳框架的內容 10. 橫幅與目錄 : 將網頁分割為上方左側和右側網頁, 上方的網頁區域寬度和網頁寬度相同, 用以放置網頁橫幅, 而左側則是放置網站目錄 11/77

12 建立框架網頁清楚框架的意義之後, 您在規劃網站時就應該先想好自已是否要使用框架網頁不少人習慣先製作框架頁, 再透過新增網頁逐一完成框架頁的網頁內容, 筆者比較不建議這種做法, 因為這時網頁設計的內容往往會受限於框架的大小所以比較恰當的做法是先規劃好網頁的內容再將其置入框架中 12/77

13 選擇自己要用的範本 13/77

14 回到 FrontPage 可以看到所選擇的框架頁 14/77

15 框架區域有二個選項設定初始網頁 : 將已經完成的網頁內容套用到此框架中, 也就是建立框架和該網頁的連結新增網頁 : 開一個空白的新網頁, 等待您繼續完成網頁的內容 15/77

16 設定起始的網頁 16/77

17 設定超連結 ( 已事先完成網頁 ) 17/77

18 看所顯示的網頁是否正確 18/77

19 設定中間框架的網頁 19/77

20 最好的方法使直接把檔案直接複製過來 20/77

21 置入完成後大小需要在稍作調整 21/77

22 儲存框架網頁 22/77

23 輸入網頁的名稱 23/77

24 確認名稱及連結後即完成設定 24/77

25 12-3 框頁網頁的儲存與編輯框架的新增與刪除框架的儲存 25/77

26 框頁網頁的儲存與編輯當您使用既有的網頁來設定框架網頁時, 儲存時只會儲存整個框架頁, 除非您的網頁內容有所更動, 才會一併出現儲存網頁視窗所以底下來看看從新增空白網頁來設定框架, 因為它的儲存選項較為複雜, 必須分別儲存個別網頁和框架頁才行 26/77

27 框架的新增與刪除請您依照先前的步驟, 套用由上至下層次的框架範本, 建立一個空白的網頁我們來看看如何進行框架的新增與刪除, 來重新設定網頁的框架, 等到框架設定結束後再來進行儲存的動作和框架有關的功能都在框架功能表中執行, 除了當您要建立框架之外在 FrontPage 建立框架必須使用框架範本, 但是範本中的框架未必合您心意, 這時就利用框架功能表的指令來進行編輯的動作 27/77

28 框架還可再作調整 28/77

29 從功能表中可以選取分割框架 29/77

30 可以選擇水平或是垂直分割 30/77

31 完成新增框架的工作 31/77

32 刪除的步驟與新增的方法類似 32/77

33 開始進行分割 33/77

34 選擇分割方式 34/77

35 分割完成 35/77

36 框架的儲存底下就來看看框架網頁的儲存, 使用既有的網頁問題不大, 但若是您想先建立框架頁, 再一一完成框架的內容當然也可以不過再儲存網頁的時候, 要分別儲存三個框架的網頁內容才行所以這種方式也複雜一點 36/77

37 新增一個空白網頁 37/77

38 輸入文字方便辨識 38/77

39 三個框架都要輸入 39/77

40 儲存框架網頁 40/77

41 設定好路徑及名稱就可以開始儲存 41/77

42 分別的框架頁會分開儲存 42/77

43 三個框架頁都需要儲存 43/77

44 完成儲存工作 44/77

45 儲存後可以再打開來看看 45/77

46 也可以分別編輯個別的網頁 46/77

47 12-4 設定框架屬性與超連結設定框架的屬性設定框架導覽的超連結使用框架網頁的邊界設定 47/77

48 設定框架屬性與超連結您是否會覺得奇怪為甚麼製作出來的框架都有明顯的框架線, 看起來實在不好看, 可是網路上很多網頁都看不到這一條分隔線, 能不能刪除這一條線呢? 而且框架內容和邊線會有距離, 這樣網頁看起來也不太好看, 這些都是本節要一一調整的設定 48/77

49 設定框架的屬性透過 FrontPage 就可以輕鬆的將一個網頁分割為三個網頁組, 看起來跟原本範例網頁差不多吧! 不過就是每個框架都有邊框, 實在不太好看框架可不是設定好就完成的, 還需要編修, 底下就繼續來看看怎麼設定框架的屬性在此先提醒您, 當您要設定框架前, 一定要先選取框架才能設定當您點選特定框架時, 會發現框架旁邊出現藍色色框, 就代表選取的這個框架若是想選取整個框架頁, 則先用滑鼠點選上方的框架 ( 或中間分隔線 ), 再按一下滑鼠左鍵就可以選取整個框架頁 49/77

50 設定框架內容 50/77

51 框架大小可在此變更 51/77

52 設定不顯示捲動軸 52/77

53 設為 0 則框架線都不會顯示出來 53/77

54 無框架線看起來更美觀 54/77

55 框架內容交談窗的各種屬性設定名稱 : 設定框架的名稱, 設定名稱後會有助於您設定超連結初始網頁 : 設定框架頁的初始網頁, 也就是網頁名稱, 若網頁放置在資料夾中, 同時會顯示該資料夾的名稱詳細描述 : 在此可以設定框架頁的說明標題 : 設定框架頁的標題文字框架大小 : 可以在此調整框架的欄寬和高度, 框架的寬度和高度可以依網頁比例來設定, 或是設定像素邊界 : 設定框架邊界和網頁內容的距離, 同樣可以設定寬度和高度在瀏覽器中可以調大小 : 讓瀏覽者可以再瀏覽網頁時, 可以透過滑鼠拖曳來調整框架的尺寸, 當然是建議取消此設定顯示捲動軸 : 設定後當網頁內容太長或太寬時, 會顯示框架內的捲動軸, 讓瀏覽者可以透過捲動軸來瀏覽網頁內容一般建議不顯示捲動軸網頁會較為美觀在此有三項設定設定, 分別為 : 如果需要 : 檢查網頁內容, 若無法瀏覽完整的網頁內容則顯示捲軸永遠不檢查 : 永遠不顯示捲動軸要檢查 : 一定要顯示捲動軸 55/77

56 設定框架導覽的超連結框架網頁最容易搞混的部分, 應該就是超連結的設定了在先前介紹超連結時, 並沒有多說明其開啟網頁的設定, 因為預設會在同一個視窗中顯示, 也就是原本的網頁的首頁, 當您按下關於站長的按鈕時, 網頁內容就會切換到關於站長的網頁中但是使用框架來分隔網頁就必須設定, 因為當您按下關於站長的按鈕時, 網頁並不能顯示在原本按下按鈕的網頁, 而必須顯示在中間框架的網頁, 而上下框架頁的內容並不隨之切換這時就必須指定超連結的目標當您設定框架時, 建議先替每個框架命名, 有助於後續超連結的設定 56/77

57 設定超連結 57/77

58 先輸入框架的名稱 58/77

59 設定按鈕的超連結 59/77

60 記得設定要顯示的框架 60/77

61 選擇顯示的位置 61/77

62 網頁預設目標框架這裡會使用網頁預設的目標框架作為網頁開啟的對象, 至於網頁預設的目標框架則會隨著您所設定的框架範本而定, 或者當您曾經設定過其他網頁, FrontPage 也會套用同樣的設定 62/77

63 預設目標網頁 63/77

64 完成後再瀏覽看看 64/77

65 相同框架為目標框架第二個設定為相同框架, 也就是超連結對象所在的框架作為目標框架如以上例而言..超連結按鈕是在第一個框架, 這時目標框架也會是第一個框架 65/77

66 可以把連結目標設在相同框架中 66/77

67 如此設定瀏覽時會不順 67/77

68 整頁為目標框架整頁的設定也是另一個常用的設定, 只要您點選超連結就會在該頁面完整的顯示網頁的內容當然原本網頁的內容就會被新的顯示內容所取代 68/77

69 整頁為目標的框架 69/77

70 開新視窗為目標框架開新視窗在套用了框架網頁中, 也是經常設定的目標框架, 當您設定開新視窗時, 超連結內容會另開一個視窗來顯示其內容這麼做是讓每個網頁都能以新視窗來顯示其內容那這麼做的缺點呢? 主要有二個 : 一個是每個網頁都用新視窗來顯示, 那對網頁觀眾而言其實是件頗麻煩的事情, 想想若點選了三個超連結那螢幕就會總共會有四個瀏覽器的視窗, 反而增加瀏覽的不便不過新視窗中當然不會有原來選單列的存在 70/77

71 開新視窗為目標框架 71/77

72 每按一次連結就會出現一個新視窗 72/77

73 父框架為目標框架父框架為網頁目標, 當按下超連結時, 網頁會顯示上一層頁框所在的視窗, 也就是所謂的父框架這通常是用來設定從其他頁框文件中回到首頁的設定因為首頁為其他頁框的父框架 73/77

74 父框架為目標框架 74/77

75 設定超連結 75/77

76 使用框架網頁的邊界設定有不少網頁初學者開始設計網頁時並沒有打算使用框架, 而是在設計過程中或是網站完成後才打算使用框架網頁這麼做的缺點是網頁的內容必須要經過一番調整, 除了新增的框架網頁內容外, 原本網頁內容因為框架的區隔所以網頁區域變小了, 網頁呈現的效果看起來也會不同所以當您開始設計網站時, 就必須先確定是否要使用框架, 再來動手設計網頁可不要從沒有框架改變成有框架, 那肯定得經過大幅修改才能完成, 增加自己的工作時間另一個常見的問題是網頁的內容無法完整的顯示在框架中, 因為預設框架邊界和網頁內容之間是有段距離了, 為了讓框架可以都用來放置網頁的內容, 一般會在框架中將框架的邊界都設為 0 這樣就多出了一點空間來放置網頁元件了 76/77

77 設定超連結的邊界 77/77

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling