Transcript DIV 區塊概念
DIV & AP DIV 概念與使用 吳郁瑩 Yu-Ying Wu @ Nanya 內容大綱 • • • • • • 網頁版面的編排方式 運用區塊的概念規劃網頁架構 使用 DIV 標籤建立網頁區塊 使用 Dreamweaver 預設版面範本 自行插入 DIV 標籤來建立區塊 使用 AP DIV 擺放網頁元素 Yu-Ying Wu @ Nanya 2 Web Page Layout • Web page layout 指的是網頁版面的編排方式 • 可分二種 – DIV + CSS Layout – Table Layout – 折衷方式 Yu-Ying Wu @ Nanya 3 Web Page Layout • DIV + CSS Layout – 網頁設計的新標準建議使用 DIV 區塊加上 CSS 設計方式來進行網頁版面編排 – 此為較佳的方式，惟對初學者來說，若尚未將 DIV 區塊概念與 CSS 樣式表摸熟，要上手較 不容易 – 各瀏覽器對 CSS 解讀的不同，也是另外一項 困難點，尤其以萬惡之源 IE6 情況最糟 Yu-Ying Wu @ Nanya 4 Web Page Layout • Table Layout – 使用表格 (Table) 的方式進行網頁編排與設計 – 此為傳統方式，不符合現今的 Web 標準，網 頁傳輸速度較慢 – 對初學者來說較為容易也較容易上手 • 折衷方式 – 使用表格進行版面規劃，搭配 CSS 樣式表設 定表格內文及內容樣式 目前網頁版面設計幾乎沒有純以表格建構的，多數已改為折衷方式 Yu-Ying Wu @ Nanya 5 運用區塊的概念規劃網頁架構 • 編排網頁版面時，應該先分 析網頁版面結構 • 將版面劃分成幾個區塊，例 如「標題區」、「選單區」、 「內容區」等等 • 在網頁編輯區，建立出這些 區塊 • 採用「分區置入」的方式， 分別在每個區塊填入內容 • 設定每個區塊的 CSS 樣式 Yu-Ying Wu @ Nanya 6 為網頁區塊命名 • 網頁區塊劃分好以後，為了 後續 CSS 樣式設定，需為 每個區塊命名 • 因為每個區塊都是獨一的， 此命名需為唯一，即同一個 網頁中區塊名稱都不重覆， 也就是 CSS 樣式的ID 名稱 • 此名稱不要使用中文字、特 殊符號，也不要有空格。第 1 個字元務必使用英文字， 第 2 個字元開始用英文或數 字皆可 Yu-Ying Wu @ Nanya header sidebar content footer 7 為網頁區塊命名 • 比較複雜的版面，區 塊內部可以再包含其 他的區塊 • 例如：content 區塊內 再包含 topTitle & news 區塊 • 通常為了設定網頁整 體大小與位置，習慣 上會將整個網頁視為 一個大區塊 Yu-Ying Wu @ Nanya container header content sidebar topTitle news footer 8 使用 DIV 標籤建立網頁區塊 • DIV 標籤會產生一個區塊，與其他標籤之間會自 動斷行 • 規劃出網頁區塊後，便可以開始使用 DIV 標籤建 立各個區塊 • 透過 CSS 樣式為 DIV 標籤指定寬度、高度、位 置、背景…等各種樣式，DIV 標籤就會呈現各種 不同風貌 Yu-Ying Wu @ Nanya 9 使用 Dreamweaver 預設版面範本 • 檔案 / 開新檔案 / 空白頁面 Yu-Ying Wu @ Nanya 10 使用 Dreamweaver 預設版面範本 • 按下「建立」按鈕，即產生設定好的網頁 Yu-Ying Wu @ Nanya 11 使用 Dreamweaver 預設版面範本 • 使用預設版面範本，可快速建立網頁，只要刪除 區塊中的預設文字，換成自己的網頁內容即可 • 但是預設版面較簡單，若想進一步美化或調整版 面時，需先花時間了解預設樣式的內容與所對應 的區塊，才能進行修改 Yu-Ying Wu @ Nanya 12 自行插入 DIV 標籤來建立區塊 • 執行『插入/版面物件/Div 標籤』命令，或開啟插 入面板，利用常用頁次的「插入DIV標籤」按鈕 來插入 Div 標籤 Yu-Ying Wu @ Nanya 13 自行插入 DIV 標籤來建立區塊 • 插入 DIV 選單下的 4 個選項 • 假設要插入一個 #test 區塊，#container 為已建立區塊 在標籤前：#test區塊插入 #container之前 在標籤開始後：#test區塊 插入#container區塊內的開 始位置 #container 在標籤結尾前：#test區塊 插入#container區塊內的最 後位置 在標籤後：#test區塊 插入#container之後 Yu-Ying Wu @ Nanya 14 自行插入 DIV 標籤來建立區塊 • ID 選取器適用於控制網頁中單一、獨特的元素， 因此在用區塊建構網頁時，就適合使用 ID 選取 器，讓每個區塊保持其獨特性，以便針對每個區 塊設定不同的 CSS 樣式 Yu-Ying Wu @ Nanya 15 使用 AP DIV 擺放網頁元素 Yu-Ying Wu @ Nanya 認識 AP Div • AP DIV 的「AP」是「絕對定位」(Absolutely Positioned) 的簡稱 • 當 DIV 使用絕對的 (absolute) 定位方式時，就稱 為 AP DIV • AP DIV 和 DIV 最大差異在於 – DIV 無法和其他元素重疊，無法任意改變位置 – AP DIV 則是可重疊的浮動區塊，可以隨心所欲 地將 AP DIV「疊」在網頁上的任何地方 Yu-Ying Wu @ Nanya 17 建立 AP Div • 切換到插入面板的版面頁次 • 用滑鼠在建立好的 AP DIV 區域內點一下，即會 顯示插入點，可在其中插入文字、圖片等任何網 頁元素 • 可自行依需求，在 AP DIV 中使用一般編輯網頁 的方式進行網頁元素的配置 Yu-Ying Wu @ Nanya 18 使用AP元素面板管理AP DIV • 開啟 AP 元素面板來管理網頁上的 AP DIV • 執行『視窗/AP 元素』命令 Yu-Ying Wu @ Nanya 19 更改 AP Div 的 Z 軸順序 • 當數個 AP DIV 互相重疊時，可以透過設定 Z 軸 來決定它們的上下順序 • Z 軸順序越大者在越上層 • 如果要將某個 AP DIV 拉抬至最前面 (最上層)， 只要將它的 Z 軸設為所有 AP DIV 中最大的數值 即可 Yu-Ying Wu @ Nanya 20 AP DIV 的屬性面板 • 透過屬性面板可設定各個 AP DIV 的屬性 Yu-Ying Wu @ Nanya 21 AP DIV 的顯示屬性 • 要顯示或隱藏 AP DIV 的功能 – default：依瀏覽器的預設值來顯示 AP Div (預 設為此項) – inherit：沿用上層 AP DIV 的顯示狀態，若沒 有上層 AP DIV，預設會顯示出來 – visible：不管上層 AP DIV 的顯示狀態為何， 強制顯示 AP DIV – hidden：不管上層 AP DIV 的顯示狀態為何， 強制隱藏 AP DIV Yu-Ying Wu @ Nanya 22 AP DIV 的溢位屬性 • 當 AP DIV 裡的元素尺寸超出 AP DIV 的範圍時， 就稱為溢位 (Overflow) Yu-Ying Wu @ Nanya 23 AP DIV 的定位 • AP DIV 的左、上座標代表 AP DIV 左上角與瀏覽 器視窗左邊界及上邊界之間的距離 • 例如：設定「左：200px、上：20px」, AP DIV 就會固定在距離網頁左邊界 200 像素、上邊界20 像素的位置，即使改變瀏覽器視窗的大小，AP DIV 也不會變更位置 Yu-Ying Wu @ Nanya 24 將 AP DIV 變成相對定位 • 讓 AP DIV 跟著瀏覽器移動 – 不必變更 AP DIV 的屬性 – 將 APDIV 放到 DIV 的內部，將上層 DIV 的定 位方式設為 relative (相對的) – 當上層 DIV 隨瀏覽器視窗移動時，內部的 AP DIV 就會跟著移動 Yu-Ying Wu @ Nanya 25