第 7 章

Size: px

Start display at page:

Download "第 7 章"

堕堵
5 years ago
Views:

1 本章重點 16-1 頁框的應用 16-2 分割與儲存頁框組 16-3 將網頁置入頁框 16-4 設定頁框網頁的標題 1

2 操作方式插入列 > 常用 > 面版 > 頁框插入 >html> 頁框

3 16-1 頁框的應用有些網頁會分割成好幾個區域, 在其中一區置入選單按鈕, 另一區放進其他網頁的內容, 當點選按鈕, 選單區的內容會保持不動, 而只有內容區會切換成其他網頁, 大大縮短了下載新頁面的時間可以在 IE 中開啟範例網站的日本寫真館網頁 (japanphotos.html) 來看看這種效果 : 3

4 頁框的應用 4

5 頁框的應用 5

6 頁框的應用什麼是頁框頁框與頁框組 6

7 什麼是頁框若把網頁分割成數個區塊, 每個小區塊就是一個頁框 (Frame), 每個頁框中都是一個網頁, 可以直接編輯它, 或將其他網頁放進這個頁框中例如範例網站中的日本寫真館網頁 (japanphotos.html), 其實是由四個頁框組成的 : 7

8 什麼是頁框 8

9 頁框與頁框組像上面這種由好幾個頁框組成的網頁, 就稱為頁框組 (frameset) 頁框組也是一個獨立的網頁, 只是一般網頁的內容是文字圖片或影音, 而頁框組網頁的內容則是紀錄這個網頁分割成哪些頁框, 以及這些頁框的屬性例如舉例的日本寫真館網頁 (japanphotos.html), 其實是如下的一個頁框組 : 9

10 頁框與頁框組 10

11 16-2 分割與儲存頁框組了解頁框的概念以後, 以下將以範例網站的日本寫真館 (japanphotos.html) 為例來說明用頁框切割網頁的方法 11

12 分割與儲存頁框組分割頁框的方法方法 1: 在開新檔案時分割方法 2: 由版面面板來分割方法 3: 手動分割 F 移除頁框的方法如何選取目標頁框巢狀頁框調整頁框的大小設定單一頁框的屬性儲存頁框組 12

13 方法 1: 在開新檔案時分割 Dreamweaver 可以讓直接選擇含有頁框的樣本來建立網頁請如下操作 : 1. 在執行檔案 / 開新檔案命令建立新網頁時, 會開啟新增文件交談窗請選擇來自樣本的頁面頁次在樣本資料夾選擇頁框組挑選想要的分割方式來建立頁框 13

14 在開新檔案時分割 14

15 在開新檔案時分割 2. Dreamweaver 在加入頁框時, 會自動為頁框加上預設的標題, 在按下建立鈕後, 就會顯示下面的交談窗供修改標題建議使用預設的標題即可 : 15

16 在開新檔案時分割 3. 將網頁分割成 3 個頁框了 16

17 方法 2: 由版面面板來分割除了預設的樣本, 也可以從面板選擇網頁的分割方式請開啟一個網頁, 在插入列的版面頁次中按下頁框鈕, 就會看到各種分割頁框樣式 : 17

18 由版面面板來分割每一個按鈕圖示都代表該頁框的縮圖, 縮圖中藍色的部份, 就是目前的網頁會被放置的位置因此只要先想好要將網頁切割成什麼樣子, 再按下對應的按鈕圖示, 就能得到想要的分割方式例如選擇了, 表示會將目前的網頁放在新頁框組的中央頁框 : 18

19 由版面面板來分割 19

20 由版面面板來分割 20

21 方法 3: 手動分割如果預設的分割方式沒有想要的版面, 可以試試手動分割的方法比如下面要來製作範例網站日本寫真館的版面, 除了分成上中下三個頁框外, 還將中間的頁框再分割成左右兩個, 那就只能以手動分割的方式來調整了 : 21

22 手動分割 1. 請將滑鼠移到頁框組的左邊框, 此時指標會變成形狀, 然後按住滑鼠左鈕往右拉曳, 即可進行手動分割 : 22

23 手動分割 2. 拉曳到適當位置後, 放開滑鼠左鈕, 頁框就會再切割成左右兩邊了 : 23

24 手動分割不過現在可有點麻煩, 明明範例網站只有 4 個頁框, 卻將網頁切割成 6 個頁框了, 這該怎麼辦呢? 其實使用手動分割頁框的秘訣, 在於分割前必須先選取要分割的目標頁框這樣在分割時, 才不會將全部的頁框都分割了! 因此請移除剛剛手動加入的頁框框線, 然後依下面的步驟來重新分割網頁 24

25 移除頁框的方法當拉錯頁框或是要改變樣式時, 只要將框線拉曳到畫面外即可 25

26 移除頁框的方法 26

27 手動分割 1. 請執行視窗 / 頁框命令, 開啟頁框面板, 即可在頁框面板中選取目標頁框 : 27

28 手動分割 2. 在選取中間頁框後, 就可以用前面介紹的方式進行再分割的工作 : 28

29 如何選取目標頁框在頁框面板上, 可以看到目前網頁的分割縮圖, 只要用滑鼠在頁框面板點選要設定的頁框, 就能選取該頁框 : 29

30 巢狀頁框分割完成後, 可能會發現在頁框面板中多了一個頁框組這是因為在選取中間的頁框後, 又把它分割為左右 2 個頁框, 也就是在原本的頁框組中, 又分割出新的頁框組, 而這個新頁框組包含的範圍就是原本的中間頁框 (mainframe) 這種在頁框組中包含其他頁框組的情況, 就稱為巢狀頁框 30

31 巢狀頁框 31

32 調整頁框的大小網頁分割完後, 會發現頁框的大小並不一定符合的需求, 因此適度地調整頁框的大小, 也是必要的工作前面已經學過用拉曳框線的方式來改變頁框的大小, 但若要精確指定頁框的尺寸, 可以改由頁框的屬性面板來選擇例如日本寫真館中每個頁框的詳細尺寸如下, 請試著將頁框調整成相同的尺寸 : 32

33 調整頁框的大小 1. 開啟頁框及屬性面板, 在頁框面板中選取整個頁框組 : 33

34 調整頁框的大小 2. 這時屬性面板會自動切換為頁框組專屬的屬性面板, 即可在面板中設定頁框的尺寸大小 : 34

35 調整頁框的大小 3. 再分別設定中頁框和下頁框的高度 : 35

36 調整頁框的大小 4. 請再選取中央的頁框組, 設定左頁框之大小 : 36

37 調整頁框的大小調整頁框大小的 3 種方法中, 除了可以設定頁框所佔的百分比和像素外也可以利用比例的方式來調整 ( 單位都設為相對 ) 例如左邊 1, 右邊 2, 則左邊頁框會佔網頁視窗的 1/3, 右邊頁框就會佔剩下的 2/3 視窗面積了 37

38 設定單一頁框的屬性若在頁框面板上選取的是頁框組中的一個頁框, 則屬性面板上顯示的會是此單一頁框的屬性 : 38

39 設定單一頁框的屬性頁框名稱 : 該頁框的名稱稍後會說明為頁框命名的方法原始檔 : 一開啟頁框時, 預設出現在此頁框中的網頁捲動 : 是否要加上捲軸沒有調整大小 : 若勾選此項, 瀏覽者就不能隨意變動設定的頁框大小邊框邊框顏色 : 設定此頁框是否顯示邊框及其色彩邊界寬度邊界高度 : 設定此頁框中的左右上下留白空間 39

40 儲存頁框組將頁框劃分完成之後, 就可以進行存檔了請選取頁框組, 執行檔案 / 儲存頁框組命令, 即可儲存目前的頁框劃分方式 : 40

41 16-3 將網頁置入頁框頁框設定完成後, 接下來就可以編輯頁框中的內容了可以直接編輯頁框中的空白網頁, 也可以選擇將已經做好的網頁置入頁框中 41

42 將網頁置入頁框直接編輯頁框中的新網頁儲存直接編輯的頁框網頁指定頁框的網頁來源讓超連結目標網頁顯示在頁框中為頁框命名將超連結網頁指定到頁框儲存新的頁框組內容 42

43 直接編輯頁框中的新網頁只要在任一個頁框內按一下滑鼠, 就可以直接編輯在該頁框中的網頁編輯的方式和一般網頁完全相同, 無論是放圖片文字或是表格, 都可以隨個人的喜好或需要而定可以使用在上一節中完成的頁框網頁, 或是開啟範例檔案 Ex16-01.html 來練習 : 43

44 直接編輯頁框中的新網頁 44

45 儲存直接編輯的頁框網頁編輯完頁框中的網頁內容後, 即可進行存檔請注意, 由於編輯的網頁只屬於頁框組的其中一個頁框, 因此在儲存時應該執行檔案 / 儲存頁框命令, 才能正確儲存目前編輯的頁面 : 45

46 直接編輯頁框中的新網頁 46

47 直接編輯頁框中的新網頁 47

48 指定頁框的網頁來源雖然可以直接在頁框中編輯網頁, 但通常在設計頁框網頁時, 會先製作好每個頁框中的網頁, 再將它們放進頁框下面就來練習把日本寫真館各頁框所需的網頁置入到製作的頁框裡 1. 請開啟練習檔案 Ex16-01.html, 這是之前製作好的頁框組網頁, 請指定它們的網頁來源 ( 以下以範例網站 FlagJapan_Ex/JapanPhotos 資料夾中的網頁檔案來練習 ): 48

49 指定頁框的網頁來源 49

50 指定頁框的網頁來源 50

51 指定頁框的網頁來源 2. 若有編輯過框架中原本的網頁, 此時會顯示交談窗詢問是否要儲存框架中原有的網頁, 請按下否 : 51

52 指定頁框的網頁來源 52

53 指定頁框的網頁來源也可以先將插入點移到頁框中, 然後執行檔案 / 在頁框中開啟命令來將網頁置入該頁框請自己試試看在左頁框中置入 JapanPhotos 資料夾的 "left.html" 在下頁框中置入 "bottom.html", 並在右頁框中置入 "01.html" 53

54 指定頁框的網頁來源 54

55 讓超連結目標網頁顯示在頁框中前面提過用頁框分割網頁的好處, 就是可以搭配導覽列的設定, 讓超連結網頁開啟在頁框中下面就要用實例說明將超連結指向頁框的方法 55

56 為頁框命名要指定超連結前, 最重要的就是先設定頁框的名稱, 因為在設定超連結或撰寫語法時, 都必須透過頁框名稱來指定目標頁框 Dreamweaver 預設會自動將頁框依位置命名為 topframe ( 上頁框 ) bottomframe ( 下頁框 )... 等名稱, 若以手動方式新增了頁框, 就不會有預設的名稱, 而必須自行命名為了方便辨識, 請如下命名每個頁框 : 56

57 為頁框命名 57

58 將超連結網頁指定到頁框在前面的練習中已經在左頁框 (leftframe) 中置放了一組導覽列, 接著可以如下將其中的超連結分別指定到右頁框 (contentframe) 中 : 58

59 將超連結網頁指定到頁框 59

60 將超連結網頁指定到頁框提供了 4 種預設的頁框選項, 也可以利用這些選項, 把要連結的網頁開啟在新視窗或其他的頁框中 : _blank: 將超連結網頁開啟在另一個新的網頁視窗中 _parent: 將超連結網頁開啟到上一層頁框組, 必須在頁框組中還包含另一個頁框組 ( 也就是巢狀頁框 ) 的情況下, 才能產生效果 _self: 將超連結網頁開啟到本身所在的頁框 _top: 將新網頁開啟到最上層的視窗, 因此會占滿整個視窗 60

61 儲存新的頁框組內容當更新了頁框組, 比如在頁框組中置入了新的網頁, 或是更改了分割方式, 都別忘了要再儲存一次整個頁框組, 才能真正更新這個頁框組網頁的內容! 下面整理幾個儲存頁框的相關選項, 請在存檔時要多多注意! 61

62 16-4 設定頁框網頁的標題每個頁框中都是一個獨立的網頁, 而每個網頁都會有自己的網頁標題, 那麼在瀏覽器上顯示的到底是哪一個網頁的標題呢? 答案是整個頁框組的網頁標題因此若要設定頁框網頁的標題 1. 請在頁框面板中選擇頁框組 ( 點選最外層的框線 ) 2. 再執行修改 / 頁面屬性命令 3. 切換至標題 / 編碼方式頁次後, 輸入標題即可 62

63 設定頁框網頁的標題 63

64 設定頁框網頁的標題或由頁框面板中選取頁框組, 然後直接於網頁編輯區上方的標題欄中修改其標題 : 64

輕鬆學 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