投影片 1

Size: px

Start display at page:

Download "投影片 1"

入壤胡
5 years ago
Views:

1 Web Layout

2 本章摘要頁框 (frame) 應用規劃網頁區塊 (div) 架構表格版面模式與 AP 的差別與應用時機 )

3 頁框的應用 3

4 什麼是頁框 4

5 頁框與頁框組由好幾個頁框組成的網頁, 稱為頁框組 (frameset) 頁框組也是一個獨立的網頁, 只是一般網頁的內容是文字圖片或影音, 而頁框組網頁的內容則是紀錄這個網頁分割成哪些頁框, 以及這些頁框的屬性 5

6 頁框與頁框組 6

7 規劃網頁區塊架構 7

8 規劃網頁區塊架構劃分出大區塊後, 接下來要替各區塊定義名稱 ( 整份網頁的名稱不能重複 ), 做為之後 CSS ID 選取器選取的依據命名時第 1 個字元請務必使用英文字第 2 個字元開始要用英文或數字皆可但不可包含空格與特殊符號當然也不可使用中文命名 8

9 在網頁中建立區塊建立區塊的方式大致可分為兩種 : 1. 一種是直接套用內建的範本, 省去規劃版面的麻煩 2. 一種則是自行建立區塊, 在版面安排上較有自主性 3. 當然也可將兩種方法混合應用, 端看設計上的需求套用現成的版面範本自行建立區塊來規劃版面插入 Div 標籤交談窗中插入選項的差異 9

10 套用現成的版面範本 10

11 自行建立區塊來規劃版面套用內建的版面可以快速建立區塊, 但是若想要的版面規劃在範本中找不到, 或是自動產生的區塊樣式有可能不容易修改, 此時可利用常用頁次的插入 Div 標籤鈕自行建立區塊 1. 請開啟一個空白的 HTML 檔, 在已經事先規劃好網頁區塊架構, 現在要在 Dreamweaver 中定義網頁區塊 2. 首先定義 #header #container #footer 這 3 個區塊, 請按下常用頁次的插入 Div 標籤鈕, 插入 #header #container #footer 區塊 : 11

12 自行建立區塊來規劃版面 12

13 自行建立區塊來規劃版面 13

14 為網頁區塊命名 step1 14

15 認識 Div 標籤 15

16 插入 Div 標籤交談窗中插入選項的差異當開啟插入 Div 標籤交談窗時, 可能會對插入選單下的 4 個選項感到困惑以下將透過圖解辨識其中的差異, 假設要插入一個 #test 區塊, 對象區塊以 #container 區塊為例 16

17 使用 CSS 控制網頁版面設定控制整體頁面屬性的 body 標籤修改區塊相對應的 CSS 樣式設定 #header 區塊設定 #container 區塊設定 #containertop 與 #containerbottom 區塊設定 #siderbar1 與 #maincontent 區塊設定 #footer 區塊配置各個區塊的內容 17

18 設定控制整體頁面屬性的 body 標籤 body 標籤是控制整體頁面屬性的 HTML 標籤替 body 設定 CSS 樣式請開啟檔案, 雙按 CSS 樣式面板的鈕, 開啟新增 CSS 規則交談窗 18

19 設定控制整體頁面屬性的 body 標籤接著切換到背景頁次, 設定使背景圖 bg.jpg 做為整體背景圖 19

20 設定控制整體頁面屬性的 body 標籤網頁內容與瀏覽器視窗不要有間距請切換到方框頁次, 將邊界都設為 "0" 20

21 設定控制整體頁面屬性的 body 標籤開啟 CSS 規則定義交談窗, 直接修改, 如字型的設定 21

22 設定控制整體頁面屬性的 body 標籤設定完成後的效果 22

23 設定 #header 區塊首先設定最上方的 #header 請開啟檔案, 雙按 CSS 樣式面板的 #header 樣式, 在開啟的 CSS 規則定義交談窗 1. 根據先前的版面規劃,#header 的大小為寬 980 像素 x 高 205 像素的置中區塊設定寬高, 請切換到方框頁次 23

24 設定 #header 區塊 24

25 設定 #header 區塊 25

26 設定 #header 區塊最後按下確定鈕後, 按下 F12 鍵預覽網頁, 即可看到 #header 樣式的設定效果 26

27 設定 #container 區塊 27

28 設定 #containertop 與 #containerbottom 區塊 28

29 設定 #siderbar1 與 #maincontent 區塊 29

30 設定 #footer 區塊 30

31 配置各個區塊的內容版面規劃完成後, 就可以運用前面章節所提到的編輯技巧, 開始加入各項網頁元件 31

32 表格版面模式與 AP 的差別與應用時機

33 應用比較說明 AP 表格面版模式綜合巢狀 AP 及巢狀表格的應用需要將網頁元件 ( 例如 : 文字圖片表格 ) 任意擺放時可使用 AP 需要做對照的資料, 或是需要將資料排列整齊時, 可使用表格要繪製複雜的表格, 或是將表格定位, 則可切換到版面模式來編排可以讓資料排列整齊, 又可隨意地自行調整位置 33

34 表格版面模式與 AP 的差別與應用時機學會了表格版面模式與 AP 的使用後, 在什麼時候該用什麼方法來提升網頁製作的效率嗎? 需要將網頁元件 ( 例如 : 文字圖片表格 ) 任意擺放時可使用 AP 34

35 表格版面模式與 AP 的差別與應用時機 35

36 表格版面模式與 AP 的差別與應用時機需要做對照的資料, 或是需要將資料排列整齊時, 可使用表格 36

37 表格版面模式與 AP 的差別與應用時機要繪製複雜的表格, 或是將表格定位, 則可切換到版面模式來編排 37

38 表格版面模式與 AP 的差別與應用時機綜合巢狀 AP 及巢狀表格的應用可以讓資料排列整齊, 又可隨意地自行調整位置表格版面模式與 AP 綜合應用範例在 Layer2 加入巢狀表格以對齊 Layer 1, 並將 Layer 2 設定為 Layer 1 的子 AP, 方便同步調整位置 38

39 表格版面模式與 AP 綜合應用範例 39

40 加入表格

41 本章提要 1 認識與加入表格 2 表格的屬性設定 3 選取及設定儲存格的屬性 4 增減欄列與調整欄列寬高 5 表格的應用 6 在版面模式中繪製表格 41

42 操作方式插入 > 表格 / 表格物件插入列 > 常用 > 表格插入列 > 常用 > 面版 > 網頁表格模式設定表格的屬性 3 設定儲存格的屬性 4 增減欄列與調整欄列寬高 5 活用表格來編排版面匯入外部的表格資料插入 > 表格物件 > 匯入表格式資料檔案 > 匯入 >excel/ 表格式資料表格資料排序命令 > 表格排序 42

43 認識網頁表格在插入列 > 版面面板中, 可以切換不同的表格設計模式標準展開與版面模式 43

44 認識表格的結構表格各部份的名稱, 以 2 列 2 欄內距間距與邊框皆為 10 像素的表格為例 44

45 在網頁中加入表格 45

46 在網頁中加入表格在表格交談窗中只要輸入欄列數寬度的值, 就能建立出基本的表格假如想在建立表格時就設定好表格邊框的粗細儲存格的間距等細部內容, 也可透過交談窗中的其他選項來設定邊框粗細 : 表格邊框的粗細, 預設為 "0", 不顯示邊框儲存格內距 : 儲存格內容與邊框的距離儲存格間距 : 儲存格與儲存格的距離, 若希望儲存格之間沒有間隔, 可設定 "0" 46

47 在網頁中加入表格頁首 : 選擇要當做表格標題的欄或列設定為頁首的欄或列, 文字會加粗, 並置中對齊註解 : 在表格外加上表格的說明文字摘要 : 表格的說明文字, 這段文字會寫入表格的程式碼內, 不會顯示在瀏覽器畫面上 47

48 表格與儲存格的屬性設定 48

49 換算或刪除表格的寬度表格的高度與寬度值可換算成以像素 (px) 為單位的絕對值, 或以百分比為單位的相對值用百分比做為寬度單位 : 表格會隨著瀏覽器的視窗大小而自動改變寬度 ; 使用像素做為寬度單位 : 但如果配合整個網頁的設計, 需要很精準而不會變動的表格大小將表格寬度高度的值刪除, 則會依儲存格的內容自動變更表格的寬度高度 49

50 換算或刪除表格的寬度 50

51 在版面模式中繪製表格

52 本章提要 6-1 版面模式的特色 6-2 用版面模式繪製表格 6-3 加入文字或圖片及調整儲存格 6-4 繪製與清除巢狀表格 52

53 操作方式插入列 > 常用 > 面版 > 面版表格繪製面版儲存格版面模式的特色在版面模式中, 表格和儲存格都是以拉曳的方式產生可以任意移動儲存格不能用斜線 (html 的限制 ) 繪製表格後 > 須再繪製面版儲存格才能輸入資料可直接繪製面版儲存格 ( 會自動產生表格 ) 面版模式下無法使用 AP( 原存在的 layer 則可以編輯 ) 自己拉曳出的儲存格無法加入巢狀表格 ( 要切回標準模式 ) 用版面模式繪製表格加入文字或圖片及調整儲存格繪製與清除巢狀表格 53

54 用 CSS 設定表格邊框 CSS 規則定義交談窗後 / 邊框頁次, 設定表格的邊框 54

55 CSS 的各種邊框樣式在 CSS 規則定義交談窗的邊框頁次中提供了 none ( 無邊框 ) 與其他 8 種邊框樣式可選用後面 4 種立體的邊框效果可能無法在某些舊版的瀏覽器上顯示出來, 如 IE 6.0 以前的版本 55

56 CSS 的各種邊框樣式在 CSS 規則定義交談窗的邊框頁次中提供了 none ( 無邊框 ) 與其他 8 種邊框樣式可選用後面 4 種立體的邊框效果可能無法在某些舊版的瀏覽器上顯示出來, 例如 IE 6.0 以前的版本 56

57 使用 AP 物件

58 AP 簡介可以放入任何網頁物件, 如輸入文字加入圖片畫個表格而且 AP 是浮在網頁上方的, 可以任意移到每一個位置所有在 AP 裡的物件都會跟著移動, 可以讓編排網頁更自由 58

59 操作技巧操作方式插入 > 版面物件 >AP Div 操作技巧 Z 軸順序 : 愈大愈上層 (0 代表底層 ) 不建議將 AP 重疊使用 ( 若將 AP 轉為表格 ) AP 溢位屬性 (AP 大小 <AP 內容大小時之顯示方式設定 ) 功能排版 (AP 面版 ) 選取 AP 面版 > 避免重疊 ( 防止無法轉成表格 ) 如果 AP 已經重疊, 則須手動調整製作不同特效 59

60 AP 提要 1 加入 AP 區塊來擺放網頁元件插入 > 面版物件 >AP Div 插入列 > 面版 > 繪製 AP Div Div 2 設定 AP 區塊的屬性屬性面版 3 AP 區塊與表格互相轉換修改 > 轉換 >AP Div 到表格關於表格版面區的最小選項 60

61 AP 區塊 vs Div 想要更自由地擺放網頁元件, 可以使用 AP Div 這個功能來達成 AP Div 其實跟上一章介紹過的區塊 (Div) 一樣, 其作用就像是一個容器, 可以在這個容器裡面放入任何網頁元件, 例如輸入文字加入圖片畫個表格等不過 AP Div 之所以要稱加上 "AP" (Absolutely Positioned), 則是因為其定位方式為絕對的 (absolute) 當 Div 使用絕對的定位方式時 = 等於是 AP Div 它是浮動的區塊, 可以在網頁中任意拉曳, 不受限於其他元件的位置, 可以非常隨心所欲地存在於版面任何地方 ; 而 Div 則不可任意拉曳其所在位置 61

62 建立 AP 區塊來擺放網頁元件 62

63 設定 AP 區塊的屬性 AP 區塊的屬性面板中除了可以設定 Z 軸順序顯示隱藏狀態名稱屬性外, 包括了背景位置大小等屬性設定 63

64 AP 區塊的顯示屬性 AP 區塊的顯示設定, 其實就是在 AP 元素面板中使用的顯示或隱藏功能, 這裡說明 4 種顯示狀態的意義 : default: 表示依瀏覽器所設定的顯示方式來顯示 AP 區塊 ( 預設為此項 ) inherit: 表示顯示方式會以父 AP 區塊為依據, 若沒有父 AP 區塊, 預設會顯示 visible: 不管父 AP 區塊的顯示狀態如何, 設為此屬性的 AP 區塊內容一定會顯示 hidden: 設為此屬性的 AP 區塊會隱藏內容 64

65 AP 區塊的顯示屬性 65

66 關於表格版面區的最小選項好處是可以減少許多空的儲存格, 但會使得轉換後的格式與原先的略有差異 66

67 AP 區塊與表格互相轉換 AP 區塊的特性是可擺放在網頁中的任意位置, 而表格的特性則在於其工整規矩的排列方式防止 AP 區塊重疊 AP 區塊轉換成表格表格轉換成 AP 區塊 67

68 防止 AP 區塊重疊如果想讓 AP 區塊可以順利轉換成表格, 請勾選 AP 元素面板的防止重疊選項, 讓不同的 AP 區塊不可重疊配置 68

69 AP 區塊轉換成表格如何將網頁中的 AP 區塊轉換成表格請開啟 Ex14-05.html 69

70 AP 區塊轉換成表格 1. 在網頁中執行修改 / 轉換 /AP Div 到表格命令 70

71 AP 區塊轉換成表格 2. 設定轉換表格的選項, 將表格版面設為最精確的, 其他則建議維持預設值即可 71

72 AP 區塊轉換成表格 72

73 表格轉換成 AP 區塊表格轉換成 AP 區塊也可以當做一項排版技巧, 如果需要排列整齊的 AP 區塊時, 可以先使用表格來進行配置, 再轉換成 AP 區塊, 以節省對齊 AP 區塊的時間 73

74 表格轉換成 AP 區塊請開啟練習檔 Ex14-06.html 然後執行修改 / 轉換 / 表格到 AP Div 命令在開啟的轉換表格到 AP Div 交談窗中保留預設值即可 74

75 表格轉換成 AP 區塊 75

76 表格轉換成 AP 區塊 AP 區塊是非常具有彈性的元素若將 AP 區塊搭配時間軸及行為面板的功能, 還可製作出動態效果或互動遊戲例如 : 拼圖浮水印等, 善加利用 AP 區塊可讓網頁充滿變化 76

77 <DIV> 或 <SPAN> 標籤

78 <P> 與 <DIV> HTML 裡的 <P> 與 <DIV> 標籤原本都是拿來做段落用的, 只要撰寫在此標籤內的文章, 會自動變成一個段落 <P> 標籤會設定邊界 (margin), 在段落的上下會置入一列空白,<DIV> 標籤則不會設置空白, 為何用 <DIV> 來替代 <TABLE> 的標籤的原因就在於此加上 FrontPage 對 <DIV> 標籤有較便利的調整方式與較高的調整自由度 ( 像框線圖層工具列 ), 配合豐富的 Style Sheet 加上 <DIV> 幾乎承接所有的 CSS 屬性, 足以模擬 <TABLE> 標籤 78

79 <DIV> 或 <SPAN> 標籤被 <DIV> 或 <SPAN> 標籤包起來的文字圖片... 任何東西, 瀏覽器都會將之視作一個物件就如同我們在打包物品一樣, 可以一個包裹只包一件衣服, 也可以一個包裹包衣服鞋子帽子等 <DIV> 和 <SPAN> 標籤就是這種功能可以用 <SPAN> 標籤包住一段文字, 該段文字就成了一個物件 ( 也可想成是包裹 ) 也可以用 <SPAN> 標籤包住一段文字, 一張圖一個表格, 那麼這三個東西也會被視作一個物件 79

80 <DIV> 或 <SPAN> 標籤這兩個標籤在 DHTML( 動態 HTML) 中, 是相當重要的東西, 因為動態 HTML 顧名思義, 有些東西是動態的, 可能是一張圖一段文字要動來動去要一張圖動來動去還好, 因為一張圖本身就是一個物件但要怎樣讓瀏覽器知道某一句話, 或是某一個字是一個物件? 或是要讓圖片和表格同時動來動去, 那麼此時, 就需要用到 <DIV> <SPAN> 標籤 80

81 DIV vs SPAN 原始碼結果我是一個被 DIV 標籤包住的 <DIV> 物件 </DIV> <br> 第二個 <SPAN> 物件 </SPAN> 則是被 SPAN 包住了! 我是一個被 DIV 標籤包住的物件第二個物件則是被 SPAN 包住了! 被 <DIV> 包住的網頁元件會變成一個區塊物件, 也就是會自成一塊, 旁邊的東西的會被擠到上一行或下一行去, 自己獨立成一行而被 <SPAN> 包住的物件則可以和大夥和樂融融的擺在一起, 不會斷行, 也不會自成一塊可以視不同的狀況, 使用不同的標籤 81

82 Div Div 這個標籤目的是將內容分為不同的區域, 而每一個區域可以根據 CSS 中的宣告而有自己的樣式 Div 是一個區塊級容器 (block-level container), 這代表在 </div> 標籤後會換行 82

83 Span Span 跟 Div 類似的地方是, 這兩個標籤的目的都是將內容分為不同的區域不同的是,Span 可以涵蓋更細層的元素可以用 <span> 來調整單一文字的樣式在 </span> 之後並不會換行.largefont { color: #0066FF; font-family:arial; font-size: 6px; } 83

84 Web 2.0( 社群 ) 網站

85 Web 2.0( 社群 ) 網站政府機關導入 Web 2.0 營運作業參考指引 ( 社會網絡篇 ) Web2.0 各種事項 - 制定有關建置導入版面配置網路社群營運以及風險管理機制等規範

86 開放原始碼 Web 2.0 架站軟體

87 Web2.0 工具類別和應用網站

88 Web2.0 網站量化指標

89 網站識別標誌和名稱排列

90 Web2.0 網站必要的網頁元素

91 範例網站美國白宮中央氣象局澳洲政府 Gov 2.0 Task Force 教育部 U-START 計畫青輔會青年滅飛創意競賽計畫政府部落格

92 政府網站版型與內容管理規範政府網站版型與內容管理規範相關範例網頁原始碼電子檔 (2010/05/27) 政府網站版型與內容管理規範研究報告書 (2010/06/02) 政府網站版型與內容管理規範規範手冊 (2010/06/02) 政府網站版型與內容管理規範說明會講義 (2010/06/02)

93 政府網站版型與內容管理規範目錄一前言二 11 條規範 1. 使用者的呈現裝置 (Compatibility) 2. 網頁組成要素 (Site Required Elements) 3. 導覽 (Navigation) 4. 首頁設計 (Homepage) 5. 文字樣式與連結 (Text Styles and Links) 6. 圖片與多媒體 (Images and Multimedia) 7. 表單 (Forms) 8. 搜尋 (Search) 9. 內容提供 (Content Requirements) 10. 內容撰寫 (Writing for the Web) 11. 內容管理 (Content Management) 三補充說明四附錄

94 參考資料英文網站版型及使用介面參考手冊

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