dreamweaver 做網(wǎng)站解析6.ppt

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