[推薦]第四章,層與行為的運(yùn)用

1、網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)第四章層與行為的運(yùn)用網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/層與行為的運(yùn)用 層的基本操作層的基本操作 層和行為的綜合運(yùn)用層和行為的綜合運(yùn)用 應(yīng)用層布局網(wǎng)頁(yè)應(yīng)用層布局網(wǎng)頁(yè) Spry構(gòu)件的運(yùn)用構(gòu)件的運(yùn)用網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/層 AP Div又稱又稱“層層”是動(dòng)態(tài)是動(dòng)態(tài)HTML的范疇，的范疇，是是CSS中的定位技術(shù)。是指具有相對(duì)位置中的定位技術(shù)。是指具有相對(duì)位置或絕對(duì)位置的或絕對(duì)位置的DIV標(biāo)簽。標(biāo)簽。 相對(duì)于表格來(lái)說(shuō)層更具靈活性，可以彌補(bǔ)相對(duì)于表格來(lái)說(shuō)層更具靈活性，可以彌補(bǔ)表格布局中煩瑣的定位操作。表格布局中煩瑣的定位操作?；夭藛尉W(wǎng)頁(yè)設(shè)計(jì)與制

2、作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/在在Dreamweaver中創(chuàng)建層中創(chuàng)建層 單擊【布局】插入欄中的單擊【布局】插入欄中的“繪制層繪制層”按鈕按鈕當(dāng)鼠標(biāo)變成十字狀后可以自由繪制層當(dāng)鼠標(biāo)變成十字狀后可以自由繪制層 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/在層中添加內(nèi)容 創(chuàng)建好的層就相當(dāng)于創(chuàng)建好的層就相當(dāng)于是一個(gè)空白網(wǎng)頁(yè)，在是一個(gè)空白網(wǎng)頁(yè)，在層中可放入所文字、層中可放入所文字、圖片、表格和層、媒圖片、表格和層、媒體對(duì)象等體對(duì)象等HTML元素。元素。 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/設(shè)置層屬性 在在CSS-P元素【屬性】面板可以指定層的元素【屬性】面板可以

3、指定層的名稱、大小和位置名稱、大小和位置,同時(shí)設(shè)置層的其它參數(shù)同時(shí)設(shè)置層的其它參數(shù) 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/層重疊屬性制作陰影字層重疊屬性制作陰影字 當(dāng)網(wǎng)頁(yè)上有多個(gè)層，且相互重疊時(shí)當(dāng)網(wǎng)頁(yè)上有多個(gè)層，且相互重疊時(shí) 【屬性】【屬性】面板中的面板中的“Z軸軸”值決定了層的堆疊順序值決定了層的堆疊順序 在兩個(gè)層中輸入不同顏色的文字，將兩個(gè)層在兩個(gè)層中輸入不同顏色的文字，將兩個(gè)層重疊后稍做錯(cuò)位移動(dòng)便可產(chǎn)生陰影文字效果重疊后稍做錯(cuò)位移動(dòng)便可產(chǎn)生陰影文字效果 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/使用行為 行為是網(wǎng)頁(yè)上常用的行為是網(wǎng)頁(yè)上常用的一些小技巧，它能

4、較一些小技巧，它能較好地響應(yīng)鼠標(biāo)或鍵盤好地響應(yīng)鼠標(biāo)或鍵盤的操作，實(shí)現(xiàn)頁(yè)面的的操作，實(shí)現(xiàn)頁(yè)面的特殊效果。使用行為特殊效果。使用行為可以給網(wǎng)頁(yè)添加動(dòng)態(tài)可以給網(wǎng)頁(yè)添加動(dòng)態(tài)效果，增強(qiáng)頁(yè)面的感效果，增強(qiáng)頁(yè)面的感染力。染力。 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/“顯示隱藏層顯示隱藏層”行為的應(yīng)用行為的應(yīng)用 使用使用“顯示隱藏層顯示隱藏層”行為行為可以制作很多特效。這個(gè)行可以制作很多特效。這個(gè)行為動(dòng)作用于瀏覽者與網(wǎng)頁(yè)進(jìn)為動(dòng)作用于瀏覽者與網(wǎng)頁(yè)進(jìn)行交互時(shí)顯示不同的信息。行交互時(shí)顯示不同的信息。例如，當(dāng)用戶將鼠標(biāo)指針滑例如，當(dāng)用戶將鼠標(biāo)指針滑過(guò)文字、圖片等網(wǎng)頁(yè)元素時(shí)，過(guò)文字、圖片等網(wǎng)頁(yè)元素時(shí)，

5、可以顯示另一個(gè)層中的圖像、可以顯示另一個(gè)層中的圖像、文字內(nèi)容。文字內(nèi)容。 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/下拉菜單的制作下拉菜單的制作 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/浮動(dòng)廣告的制作浮動(dòng)廣告的制作 時(shí)間軸動(dòng)畫是建立在時(shí)間軸動(dòng)畫是建立在層的基礎(chǔ)上的，通過(guò)改層的基礎(chǔ)上的，通過(guò)改變層的位置來(lái)創(chuàng)建動(dòng)畫變層的位置來(lái)創(chuàng)建動(dòng)畫 要移動(dòng)圖像或文本等要移動(dòng)圖像或文本等對(duì)象，首先必須將這些對(duì)象，首先必須將這些對(duì)象放置在層中。對(duì)象放置在層中?；夭藛尉W(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/應(yīng)用層布局網(wǎng)頁(yè)應(yīng)用層布局網(wǎng)頁(yè) 如同表格一樣，層是頁(yè)如同表格一樣，層是頁(yè)面

6、的布局定位工具，放面的布局定位工具，放置在層內(nèi)的置在層內(nèi)的HTML對(duì)象對(duì)象可以隨層被拖拽至頁(yè)面可以隨層被拖拽至頁(yè)面所需的任意位置，用戶所需的任意位置，用戶在設(shè)計(jì)的時(shí)候就不必畫在設(shè)計(jì)的時(shí)候就不必畫表格了表格了 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/Spry框架布局框架布局 Dreamweaver CS3中單擊相關(guān)按鈕就可以輕松中單擊相關(guān)按鈕就可以輕松地創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜單欄），以及向各地創(chuàng)建構(gòu)件（如折疊構(gòu)件和菜單欄），以及向各種頁(yè)面元素中添加不同種類的效果種頁(yè)面元素中添加不同種類的效果 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/Spry選項(xiàng)卡式面板選項(xiàng)卡式面

7、板 選項(xiàng)卡式面板是用來(lái)將網(wǎng)頁(yè)內(nèi)容存選項(xiàng)卡式面板是用來(lái)將網(wǎng)頁(yè)內(nèi)容存儲(chǔ)到緊湊的空間，瀏覽者單擊要訪儲(chǔ)到緊湊的空間，瀏覽者單擊要訪問(wèn)的選項(xiàng)卡時(shí)，相應(yīng)的內(nèi)容面板就問(wèn)的選項(xiàng)卡時(shí)，相應(yīng)的內(nèi)容面板就會(huì)打開會(huì)打開 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/自定義自定義CSS樣式的選項(xiàng)卡式面板樣式的選項(xiàng)卡式面板 在在CSS面板中重新自定義設(shè)置面板中重新自定義設(shè)置Spry選項(xiàng)卡選項(xiàng)卡面板的顏色與外觀面板的顏色與外觀 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/Spry折疊構(gòu)件 Spry折疊構(gòu)件是可折疊的面板折疊構(gòu)件是可折疊的面板,將大量的內(nèi)將大量的內(nèi)容存儲(chǔ)在一個(gè)緊湊的空間中容存儲(chǔ)在一個(gè)緊湊的空間中,當(dāng)單擊不同的選當(dāng)單擊不同的選項(xiàng)卡時(shí)項(xiàng)卡時(shí),折疊構(gòu)件的面板會(huì)展開或收縮折疊構(gòu)件的面板會(huì)展開或收縮,每次每次只能有一個(gè)內(nèi)容面板處于打開且可見狀態(tài)。只能有一個(gè)內(nèi)容面板處于打開且可見狀態(tài)。 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/Spry折疊構(gòu)件的運(yùn)用 左側(cè)導(dǎo)航欄目是利左側(cè)導(dǎo)航欄目是利用用Spry折疊構(gòu)件折疊構(gòu)件安排了友情鏈接、安排了友情鏈接、個(gè)人信息、推薦博個(gè)人信息、推薦博文等欄。文等欄。 回菜單網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù) http:/課后練習(xí)課后練習(xí) 使用使用