網(wǎng)頁(yè)相關(guān)設(shè)計(jì)講義

1、中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 課堂講解 第8課 在網(wǎng)頁(yè)中應(yīng)用層 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 課堂講解 創(chuàng)建層 認(rèn)識(shí)“層”面板 選擇、移動(dòng)和對(duì)齊層 層大小和屬性設(shè)置 層的顯示和隱藏 層名的變更 層的堆疊和刪除 層與表格的相互轉(zhuǎn)換 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 創(chuàng)建層 層的首選參數(shù)設(shè)置 層的建立 層的嵌套 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層的首選參數(shù)設(shè)置 在新建層之前，通過(guò)“首選參 數(shù)”對(duì)話框中的“層”選項(xiàng)來(lái)設(shè) 置層的默認(rèn)屬性。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層的建立 將插入點(diǎn)放置在“文檔”編輯窗口中，然后 選擇插入布局對(duì)象層菜

2、單命令將自動(dòng) 在插入點(diǎn)插入一個(gè)層。 在“插入欄”的“布局”插入欄中單擊“繪 制層”按鈕，拖動(dòng)鼠標(biāo)繪制一個(gè)層。 在“插入欄”的“布局”插入欄中單擊“繪 制層”按鈕，在文檔編輯窗口中單擊鼠標(biāo)可 繪制一個(gè)層。 在“插入欄”的“布局”插入欄中單擊“繪 制層”按鈕，按住【Ctrl】鍵并拖動(dòng)即可連 續(xù)繪制多個(gè)層。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層的嵌套 層與表格相似，可進(jìn)行嵌套。在某層內(nèi) 新創(chuàng)建的層稱為嵌套層或子層，嵌套層外部 的層稱為父層。子層可浮動(dòng)于文本編輯窗口 的任何位置，子層的大小也可以大于父層， 可根據(jù)實(shí)際需要嵌套多個(gè)層。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 認(rèn)識(shí)“層”面板

3、 “層”面板是對(duì)層進(jìn)行管理的場(chǎng)所，可以 方便地查看層的結(jié)構(gòu)。要顯示或隱藏“層” 面板，可選擇窗口層菜單命令或按【F2 】鍵。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 選擇、移動(dòng)和對(duì)齊層 選擇層 選擇單個(gè)層 選擇多個(gè)層 移動(dòng)層 對(duì)齊層 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 選擇單個(gè)層 在文檔編輯區(qū)中單擊層邊框。 在層中單擊鼠標(biāo)左鍵，再單擊該層的選擇柄。 在“層”面板中單擊要選擇的層的名稱。 按住【Ctrl+Shift】鍵并在層中單擊即可選擇 層。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 選擇多個(gè)層 按住【Shift】鍵，在需要選擇 的多個(gè)層中單擊，同時(shí)“層” 面板中選擇的層以反白顯

4、示。 按住【Shift】鍵，在“層”面 板中單擊要選擇的多個(gè)層的名 稱。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 移動(dòng)層 在網(wǎng)頁(yè)制作中往往需要精確定 位層的位置，這就需要對(duì)創(chuàng)建的層 進(jìn)行移動(dòng)。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 對(duì)齊層 在網(wǎng)頁(yè)制作中常常需要將某些層按照一定的規(guī) 定對(duì)齊。在進(jìn)行層的對(duì)齊操作時(shí)，嵌套層中所有子 層并不參與層的對(duì)齊操作，它們只隨父層的移動(dòng)而 移動(dòng)，并始終與父層保持相對(duì)的固定位置。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層大小和屬性設(shè)置 層大小的設(shè)置 設(shè)置單個(gè)層的大小 設(shè)置多個(gè)層的大小 層屬性的設(shè)置 設(shè)置單個(gè)層的屬性 設(shè)置多個(gè)層的屬性 中文Dream

5、weaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 設(shè)置單個(gè)層的大小 在文檔編輯區(qū)選擇一個(gè)層，在出現(xiàn)的調(diào)整柄上按住鼠 標(biāo)左鍵不放并拖動(dòng)，當(dāng)調(diào)整到適當(dāng)?shù)拇笮r(shí)釋放鼠標(biāo) 即可。 在文檔編輯區(qū)選擇一個(gè)層，按住【Ctrl】鍵的同時(shí)再 按鍵盤上的方向鍵即可按一次1個(gè)像素的步幅來(lái)調(diào)整 層大小。 在文檔編輯區(qū)選擇一個(gè)層，按住【Shift+Ctrl】鍵的同 時(shí)再按鍵盤上的方向鍵即可按一次10個(gè)像素的步幅來(lái) 調(diào)整層大小。 在文檔編輯區(qū)選擇一個(gè)層，以像素為單位在屬性面板 中輸入寬度和高度的值。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 設(shè)置多個(gè)層的大小 在文檔編輯區(qū)選擇兩個(gè)或多個(gè)層，選擇 修改排列順序設(shè)成寬度相同菜單 命令或修改排列

6、順序設(shè)成高度相 同菜單命令。首先選擇的層將自動(dòng)調(diào)整 為最后一個(gè)選擇的層相同的寬度或高度。 在文檔編輯區(qū)選擇兩個(gè)或多個(gè)層，再在 屬性面板中的“多個(gè)層”欄中輸入寬度 和高度值，這些值將應(yīng)用于所有選擇的 層。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 設(shè)置單個(gè)層的屬性 在“屬性”面板中進(jìn)行設(shè)置。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 設(shè)置多個(gè)層的屬性 在“屬性”面板中進(jìn)行設(shè)置。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層的顯示和隱藏 在層中可插入所有的網(wǎng)頁(yè)元素， 若想控制層內(nèi)元素的顯示與隱藏可 通過(guò)改變層的可見(jiàn)性來(lái)實(shí)現(xiàn)。 單個(gè)層的顯示和隱藏 多個(gè)層的顯示和隱藏 中文Dreamweaver

7、 8網(wǎng)頁(yè)設(shè)計(jì)教程 單個(gè)層的顯示和隱藏 在Dreamweaver 8中可通過(guò)“層” 面板和屬性面板對(duì)層的顯示或隱藏進(jìn)行 控制。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 多個(gè)層的顯示和隱藏 更改多個(gè)層的可見(jiàn)性可在“層” 面板中設(shè)置，單擊該列頂部標(biāo)題的 “眼睛”圖標(biāo)，設(shè)置所有的層的顯 示或隱藏。要將子層設(shè)置為“繼承” 父層的屬性則需在屬性面板中設(shè)置。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層名的變更 層的名稱并非固定不便，為了制作網(wǎng)頁(yè)時(shí) 方便工作，可以將層名更改為容易理解和記憶 的名稱，變更層的名稱有以下兩種方法。 在“層”屬性面板的“層編號(hào)”文本框中輸入 層的名稱。 在“層”面板中設(shè)置層

8、的名稱。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層的堆疊和刪除 層的堆疊設(shè)置 用屬性面板設(shè)置層的堆疊 用“層”面板設(shè)置層的堆疊 使用菜單命令設(shè)置層的堆疊 層的刪除 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 用屬性面板設(shè)置層的堆疊 在“層”面板或文檔編輯區(qū)中選 擇一個(gè)層。 在“層”屬性面板的“Z軸”文本 框中輸入一個(gè)較大的數(shù)字將該層 在堆疊順序中上移，輸入一個(gè)較 小的數(shù)字可將該層在堆疊順序中 下移。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 用“層”面板設(shè)置層的堆疊 選擇窗口層菜單命令或按【F2】鍵打開“層” 面板。 選擇要改變堆疊順序的層，將層向上或向下拖 至所需的位置時(shí)釋放鼠標(biāo)即可

9、。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 使用菜單命令設(shè)置層的堆疊 在“層”面板或文檔編輯區(qū) 中選擇一個(gè)層。 選擇修改排列順序子菜單 中的“移到最上層”或“移 到最下層”命令即可。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層的刪除 當(dāng)不需要某層時(shí)，就應(yīng)將該 層刪除。在“層”面板或文檔編 輯區(qū)中選擇需刪除的層，然后按 【Delete】鍵或選擇編輯清除 菜單命令，還可以在層上單擊鼠 標(biāo)右鍵，在彈出的快捷菜單中選 擇“刪除標(biāo)簽”命令，將層刪除。 如果將嵌套層中的父層刪除，則 其下包含的所有子層也將同時(shí)被 刪除。 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 層與表格的相互轉(zhuǎn)換 將層轉(zhuǎn)換為表格 將表格轉(zhuǎn)換為層 中文Dreamweaver 8網(wǎng)頁(yè)設(shè)計(jì)教程 將層轉(zhuǎn)換為表格 層和表格都是對(duì)網(wǎng)頁(yè)進(jìn)行精確定位的工具， 用層定位比表格定位使用起來(lái)更加方便，但層 只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能夠正確顯示。表格對(duì)瀏覽 器的版本高低沒(méi)有要求，如果要使設(shè)計(jì)的網(wǎng)頁(yè) 在更低版本的瀏