1 項目六框架與APDiv 教學任務要點 學會框架的創建和屬性設置 能夠用框架規劃網頁 掌握框架的基本操作 掌握APDiv的創建與屬性設置 能夠用APDiv編排網頁 教學重點與難點 用框架規劃網頁 用APDiv編排網頁 2 框架與APDiv是網頁制作時用來給網頁布局的兩個不同的Dreamweaver工具 使用框架規劃網頁可以統一網頁風格 加快網頁的下載效率 增加網站內容的可讀性 使用APDiv編排網頁靈活性強 提供彈性的畫面設計功能 在其中可以放入任何的網頁元素 且可以任意的移動位置與相互重疊 3 6 1任務1框架的使用 框架主要由兩大部分組成 框架集與框架 框架是指瀏覽器窗口中的一個區域 它可以顯示與瀏覽器窗口的其余框架頁中所顯示內容無關的頁面 只是針對自身文檔 框架集是由若干框架組成的 通過設置這些框架的布局和屬性 包括框架的數目 大小和位置以及在每個框架中初始顯示的頁面的文檔路徑 讓框架集在外觀上形成一個整體的頁面 使用框架可以讓網頁的風格統一 加快瀏覽速度 在瀏覽頁面時 不需要將頁面中含框架的窗口都重新加載 對于導航或不動的窗口在瀏覽網站時只需加載一次 這樣就大大加快了瀏覽的速度 在網頁中使用框架具有以下兩個優點 訪問者的瀏覽器不需要為每個頁面重新加載與導航相關的圖形 這樣毫無疑問使網頁的下載速度加快了 每個框架都具有自己的滾動條 如果內容太大 在窗口中顯示不下 因此訪問者可以獨立滾動這些框架 4 例如 當框架中的內容頁面較長時 如果導航條位于不同的框架中 那么向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導航條 5 6 1 1情境1框架的創建 學習使用框架首先要從創建框架開始 根據DreamweaverCS4自帶的框架布局可以創建多種框架 使用創建框架的功能為網頁設計框架 可以方便實現網頁的整體布局 下面來介紹如何創建如圖所示的框架頁 這是比較簡單而且最為常用的網頁布局結構 6 上述框架頁創建框架的方法如下 在DreamweaverCS4中創建框架有4中方法 方法一 在菜單欄中選擇 文件 新建 命令 彈出 新建文檔 對話框 在對話框中選擇 示例中的頁 框架頁 垂直拆分 命令 單擊 創建 按鈕 可創建框架 如圖所示 7 方法二 在菜單欄中選擇 查看 可視化助理 框架邊框 命令 在網頁中按 Alt 鍵后 用鼠標拖動框架邊框 也可創建框架 方法三 在菜單欄中選擇 插入 HTML 框架 次級菜單中框架類別 命令 在文檔中創建框架 方法四 切換 插入 面板的模式為 布局 單擊 框架 圖標按鈕右側的三角形展開式按鈕 在下拉列表中選擇相應的框架類別 創建框架 在彈出的 框架標簽輔助功能屬性 對話框中設置每個框架的標題 如下圖所示 8 9 單擊 確定 按鈕 在文檔中創建了左右形式的框架 提示 在命名框架的標題時盡量用位置和相應的英文來命名 這樣便于對整個框架集的控制理解 10 6 1 2情境2設置框架集屬性 創建完框架以后 需要為生成的框架集設置屬性 框架和框架集的屬性都可以在 屬性 面板進行設置 設置框架集屬性 具體操作步驟如下 1 按快捷鍵Shift F2或在菜單欄中選擇 窗口 框架 命令 調出 框架 面板 如圖所示 11 2 在 框架 面板中單擊最外一層邊框 在 屬性 面板中設置框架集的屬性 如圖所示 12 在 屬性 面板中各項參數詳細設置如下 邊框 設置框架集是否顯示邊框 選項包括 是 否 默認值 默認顯示邊框 邊框寬度 如果選擇顯示邊框 在此可以設置邊框的寬度 邊框顏色 如果選擇顯示邊框 在此可以設置邊框的顏色 列 單擊 屬性 面板右側框架集的縮圖 可以設置框架集的比例 一般設置一列框架的值為固定的像素或百分比 另一列的值為 1 單位選擇 相對 這樣可以保證讓框架集未固定設置寬度的一列隨瀏覽器而自動適應寬度 13 6 1 3情境3設置框架屬性 框架集由若干個框架頁組成 這些框架頁需要設置相應的屬性才能完成設定的頁面效果 每一框架都會根據不同的位置設置不同的屬性 不同的框架組合在一起成為了一個完整的網頁框架 設置框架屬性 具體操作步驟如下 1 在 框架 面板中單擊框架的名稱 可以在相應的 屬性 面板中設置框架的相關屬性 如下圖所示 14 15 2 在 屬性 面板中可以進行下面的設置 框架名稱 在框架名稱下方的文本框中可設置框架的名稱 方便區別不同的框架 源文件 在文本框中設置當前框架頁內的文檔名稱 也可通過單擊圖標查找本地文件路徑 邊框 設置當前框架是否有邊框 默認為有 邊框顏色 如果設置有邊框 可在此設置邊框顏色 滾動 設置當前框架是否顯示滾動條 有4個選項 是 否 自動 默認 當選擇 自動 時 當網頁內容超出框架范圍時自動顯示滾動條 不能調整大小 選中該復選框 框架將不能調整大小 邊界寬度 設置框架中的內容與左右邊框之間的距離 單位是像素 邊界高度 設置框架中的內容與上下邊框之間的距離 單位是像素 16 6 1 4情境4框架的基本操作 對于框架可以進行如下的操作 選擇框架 拆分框架 刪除框架 和 打開框架中的一個網頁 下面結合圖例來講述這幾種基本操作 1 選擇框架 1 要選擇框架 只要單擊一個框架內的任意地方 該框架就成為當前活動的框架 該框架中的網頁就成為當前活動的網頁 2 要選擇所有的框架 把光標移動框架與框架之間的分隔線上 等光標改變形狀為后單擊 17 3 要改變框架的尺寸 把光標移到框架的邊框上 等光標改變形狀為后拖動邊框 如圖所示 18 2 拆分框架 1 要把框架一分為二 按住 Ctrl 鍵不放然后拖動框架的邊框 2 也可以在菜單欄中選擇 修改 框架集 的下級菜單選項命令來拆分框架 3 這里選擇 拆分右框架 則右側的框架被拆分成了左右兩個框架 如圖所示 19 菜單命令 修改 框架集 的次級菜單的各項功能如下 編輯無框架內容 編輯代碼之間的內容 即當瀏覽器不支持框架時網頁所顯示的內容 拆分左框架 拆分后原框架在新生成的框架左側 拆分右框架 拆分后原框架在新生成的框架右側 拆分上框架 拆分后原框架在新生成的框架上面 拆分下框架 拆分后原框架在新生成的框架下面 提示 注意編輯無框架內容的使用 當瀏覽器不支持框架頁時網頁可以顯示說明文本 20 3 刪除一個框架框架創建后如需要刪除 具體操作步驟如下 1 在菜單欄中選擇 查看 可視化助理 框架邊框 命令 將框架邊框設為顯示 2 將框架邊框拖離頁面或拖到父框架的邊框上 3 經過以上操作 框架成功刪除 余下的框架將自動撐滿文檔窗口 如下圖所示 21 22 提示 如果框架的邊框設為隱藏 是無法進行拖動并刪除的 在刪除時 要按住鼠標不放一直將要刪除的框架邊框拖離頁面或拖到父框架的邊框才可以 查看 框架 面板可以確認框架是否刪除成功 23 4 在框架中打開網頁要在框架中打開一個網頁 操作步驟如下 1 打開 框架 面板 單擊框架 2 在相應的 屬性 面板中設置框架中的頁面 3 在 屬性 面板的 源文件 中直接輸入框架中的頁面的路徑和名稱 或單擊圖標 查找文件的本地路徑 24 6 1 5情境5框架的保存 在預覽或關閉當前文檔中的框架時 必須對框架集和其中的每個框架頁文件都是進行保存 在創建一個新的框架時 系統自動為框架集命名為 UntitleFrame 1 UntitleFrame 2 這樣的文件名一來不好記 二來也沒有意義 在設計時也容易混淆 在保存時 要對其進行相應的重命名 一般用其所在框架集中的位置來進行命名 如admin left htm admin right htm admin top htm admin bottom htm 這樣讓人一看就知道哪個文件在哪個框架中 與保存框架集有關的命令包括 保存框架頁 框架集另存 和 保存全部 與保存框架有關的命令包括 保存框架 框架另存 保存全部 保存全部 命令是將框架集和框架集中所有的框架頁文件同時進行保存 如果要保存單個框架頁中的文件 只需在菜單欄中選擇 文件 保存框架 命令即可 框架另存 命令是將框架在保存時重新命名為一個新的文件 25 6 1 6情境6設置無框架內容 并不是所有的瀏覽器都支持框架文件 因此需要設置無框架內容進行說明 以保證當用戶的瀏覽器不能顯示框架時 有一個可以顯示的內容 無框架內容應用來完成 設置無框架內容 具體操作步驟如下 1 打開文檔index manager htm 在菜單欄中選擇 修改 框架集 編輯無框架內容 命令 2 文檔將顯示無框架內容的編輯窗口 在這個工作區中可以進行無框架頁的設計 26 切換到框架集的源代碼 可以看到下面的一段代碼 對不起 您的瀏覽器不支持框架 本頁內容無法正常瀏覽 3 完成無框架的編輯后 再次在菜單欄中選擇 修改 框架集 編輯無框架內容 命令 此時將退出無框架內容的編輯 返回文檔視圖 提示 無框架內容的編輯不必做過多修飾 此處的內容只是為了提示用戶的瀏覽器不支持框架 現在大多數的瀏覽器均可以支持框架 因此沒必要在此處下太多功夫 27 6 1 7情境7為框架頁設置鏈接 在網頁制作中之所以使用框架 最主要還是因為框架頁獨特的鏈接方式 因為應用框架 可以在不同的框架中顯示不同的頁面 所以在設置框架頁中某處文字或圖像等元素進行連接時 會發現在 屬性 面板中 鏈接的目標下拉列表中多了幾個選項 如下圖所示 28 多出來的幾項名稱是當前框架集所組成的框架的名稱 進行正確的鏈接目標設置 才能保證整個頁面的導航無誤 讓頁面顯示正確的鏈接 創建框架鏈接的步驟如下 1 打開文檔 d haoke ch06 6 1 index manager htm 在左側框架頁中選擇要鏈接的對象 在此選擇文本 添加新聞內容 2 設置文件的鏈接路徑 3 在 目標 下拉列表中選擇 main main為右側框架的名稱 讓鏈接的內容在文檔右側框架中顯示 29 4 保存全部文件 在瀏覽器中進行瀏覽 單擊連接時 在右側顯示相應的頁面 blank 鏈接的頁面在新的窗口打開 parent 鏈接的頁面在父框架中打開 self 鏈接的頁面在自身窗口打開 top 鏈接的頁面在最外層框架中打開 main 鏈接的頁面在所命名的框架中打開 這里main為框架的名稱 30 6 1 8情境8框架的嵌套 上面談到父框架 因為有時根據實際需要 會在框架集中創建多個框架 框架之間形成上下級關聯 如下圖所示為一個三層框架嵌套在 框架 面板的顯示效果 按照Dreamweaver自帶的框架布局創建的框架頁以后 還可以在框架內繼續創建框架 形成嵌套 31 框架的嵌套 其中框架main與框架bottom同級 框架main和框架bottom組成的框架集與框架left同級 框架top與下面的3個框架left main bottom組成的框架集同級 32 6 2任務2APDiv的使用 APDiv 絕對定位元素 是分配有絕對位置的一種頁面元素 在網頁制作過程中 APDiv讓頁面元素向三維空間擴展 層與層之間可相互疊加 可放在網頁的任一位置 在層內可放置各種網頁元素 APDiv對于初學者來說可能有些陌生 其實它在DreamweaverCS4中等同于早期版本的層 仍然是用div來做標識符 APDiv又稱為AP元素 以下簡稱AP層 在DreamweaverCS4中 AP層可以用來設計網頁的布局 可以進行隱藏和顯示的控制 也可以在文檔設計視圖中移動AP層 也可以在利用兩個AP層中設置層的背景圖像 利用AP層可以讓位置更加靈活和機動 同時AP層也可以實現和表格的相互轉換 33 6 2 1情境1創建APDiv和創建嵌套AP層 APDiv可以手工繪制 根據需要創建AP層 位置更加靈活 1 創建APDiv用此功能可以在網頁的任意位置繪制APDiv層 在代碼中也是以開始 結束 具體步驟如下 1 打開 文件 面板 雙擊文件名 打開文件6 21 2 htm 2 打開 插入 面板 選擇 布局 模式 并切換至 標準 類別 單擊 繪制APDiv 圖標按鈕 此時鼠標變成十字形 在文檔中按住鼠標并拖動 即可以繪制出一個透明的矩形區 或者在菜單欄中選擇 插入 布局對象 APDiv 命令 即可插入AP層 34 3 松開鼠標 AP層即創建完成 提示 在菜單欄中選擇 編輯 首選參數 命令 打開 首選參數 對話框 切換到 不可見元素 面板 選中 AP元素的錨點 復選框 即能在頁面編輯狀態顯示AP錨點 35 AP層可以像表格一樣嵌套 并且根據嵌套關系互為影響 嵌套AP層是指創建在已有AP層之內的AP層 嵌套的子AP層可以與父AP層一起移動 隱藏 可見 即可完全繼承父AP的可見性 2 創建嵌套AP層 1 打開 文件 面板 雙擊文件名 打開文件6 21 3 htm 2 將光標定位于要插入AP層的位置 單擊 插入 面板的 常用 模式中的 插入Div標簽 按鈕 3 彈出 插入Div標簽 對話框 在 插入 下拉列表中選擇 在開始標簽之后 選項 默認選擇 如下圖所示 36 37 4 單擊 確定 按鈕 將光標定位于這個新建AP層的左上角 5 在菜單欄中選擇 插入 布局 APDiv 命令 插入一個默認大小的AP層 如下圖所示 38 39 用同樣的方法 在id AP2的AP層再創建一個AP層切換到代碼視圖 可以看到嵌套AP層的源碼如下 此處顯示id AP1 的內容此處顯示id AP2 的內容此處顯示id AP3 的內容 40 6 2 2情境2AP層的屬性 AP層除了可以用 AP元素 面板來進行一些設置 更多的屬性仍然要借助于 屬性 面板 選中層 單擊層的外邊框 即可選中層 可以在層的 屬性 面板中設置層的屬性 如圖所示 41 屬性 面板中各項參數詳細設置如下 層編號 設置層的名稱 在一個頁面可以插入多個層 因此要為每一個層命名一個不同的名字 以便進行標識識別 在此命名為 AP2 左 上 用以設置層距離頁面左上角的距離 在層中位置的控制均為絕對位置 會隨瀏覽器顯示分辨率的不同而位置有所變化 在此設置左 545px 設置上 59px 寬 高 寬和高指定層的寬度和高度 默認插入層的寬和高為 200px 115px 在此可以先不用設置具體的數值 在插入別的網頁元素后根據插入元素的寬和高再來重新定義 Z軸 用來設置層的Z軸 可以為負值 此設置在一個頁面有多個層時 并重疊時 根據Z軸值的大小來決定層的顯示順序 Z軸值最大的最前面顯示 將覆蓋Z軸值小的層 可見性 在下拉列表中設置層的可視屬性 層的可視屬性如下表所示 42 層的可視屬性 43 背景圖像 用來設置層的背景圖像 背景顏色 用來設置層的背景顏色 溢出 當層中插入元素的內容超過層的設置大小時 顯示層中的內容的顯示方式如下表所示 剪輯 用來設置層的可見區域 經過剪輯的層 只有指定的區域才可見 左 右 上 下后面的文本框用來設置可見區域的左邊界距離層左 右 上 下的距離 44 6 2 3情境3AP元素面板 通過 AP元素 面板可以設置AP層的顯示 隱藏屬性或是設置層的防重疊性 如圖所示 45 1 層的可見性層的可見屬性默認是可見的 按 F2 鍵 或在菜單欄中選擇 窗口 AP元素 命令 調出 AP元素 面板組 可以單擊所在層左側的眼睛圖標來設置層的可見性 打開 AP元素 面板 單擊層前面的眼睛圖標 眼睛圖標顯示為睜開狀態時為可見 眼睛圖標顯示為閉合狀態時為隱藏 無眼睛圖標是默認狀態 為可見可繼承父AP層可見屬性 單擊眼睛圖標 可以同時改變所有AP層的可見性 眼睛睜開 AP層可見 眼睛閉上 AP層隱藏 46 2 防止層重疊要防止層重疊 有兩種方法 在菜單欄中選擇 修改 排列順序 防止AP元素重疊 命令 打開 AP元素 面板 選中 防止重疊 復選框 在文檔中創建多個層時設置了防止層重疊 則在層拖動時也只能沿已有層的邊界 如果是在建立了重疊層之后曾選擇此選項 則以前發生的層重疊是不能改變的 此時 需要通過選中層來進行移動的方法把重疊的層分開 47 6 2