試驗四層疊樣式

實驗四層疊樣式、模板和庫一、實驗?zāi)康暮鸵螅赫莆崭郊雍途庉嬐獠繕邮奖淼姆椒ㄕ莆誄SS樣式的各種特殊效果的方法掌握創(chuàng)建和應(yīng)用CSS樣式及CSS樣式表的方法掌握模板的創(chuàng)建、編輯和應(yīng)用的方法掌握對象的創(chuàng)建、編輯和應(yīng)用的方法二、實驗內(nèi)容：CSS樣式表的創(chuàng)建、編輯和應(yīng)用在網(wǎng)頁編輯窗口中，打開本地站點Mysite\html文件夾中的art.htm文件。修改文檔的標(biāo)題為“生活和藝術(shù)”，文檔每段文符改成首行縮進(jìn)兩個字樣。在本地根文件夾Mysite中，成績名為docformat.css的層疊樣式表文件，以及背景色為＃９９ＦＦＣＣ的層疊樣式docformat。創(chuàng)建名為.char1的層疊樣式，并將這個樣式定義在docformat.css的層疊樣式表文件中。將其【類型】的參數(shù)設(shè)置：【字體】為方正舒體、【大小】為３６像素、【樣式】為謝體、【顏色】＃方法FF0000。樣式作用于標(biāo)題文字“生活和藝術(shù)”。將名為.char1的樣式復(fù)制成名為.char2的層疊樣式，并將其【類型】的參數(shù)設(shè)置：【字體】為楷體、【大小】為１８像素、【樣式】為正常、【顏色】為＃００００００。樣式作用第１段文字。新建名為.char3的層疊樣式，并將其【類型】的參數(shù)設(shè)置：【字體】為仿宋體、【大小】為１８像素、【樣式】為正常、【顏色】為＃333333。樣式作用于第２段文字，瀏覽網(wǎng)頁觀察效果。將名為.char3的樣式修改：【字體】為方正舒體、【大小】為１６像素、【樣式】為偏斜體、【顏色】為＃000099。創(chuàng)建名為border1的樣式，選擇【邊框】類型，并將其參數(shù)設(shè)置：【樣式】為雙線、【寬度】的【上】、【右】、【下】、【左】的值為４個像素、【顏色】為＃99CC33。在新建網(wǎng)頁exe16-1.htm上的創(chuàng)建８個１行１列的表格，表格的寬度和高度是100*３０像素。分別用border1、border2………border8為名新建層疊樣式，選擇【邊框】類型，并分別定義他們的【樣式】為：【虛線】、【點劃線】、【實線】、【雙線】、【槽狀】、【脊?fàn)睢俊ⅰ景枷荨?、【凸出】８種風(fēng)格，并設(shè)置合適的邊框高度和顏色，作用于８個表格，預(yù)覽網(wǎng)頁觀察其效果。然后保存樣式表文件docformat.css和網(wǎng)頁文檔exe16-1.htm。在網(wǎng)頁編輯器窗口中，打開literature.htm文件，并鏈接外部樣式表文件docformat.css。修改名為.char1的樣式，將【顏色】值＃FF0000該為＃0000CC，并作用約標(biāo)題文字“中國文學(xué)”。瀏覽網(wǎng)頁文檔art.htm和literature.htm，觀察標(biāo)題文字的顏色變化。２.ＣＳＳ樣式特殊效果的應(yīng)用（１）創(chuàng)建名exe16-2.htm的網(wǎng)頁，在網(wǎng)頁合時的位置上插入３８０＊２８５像素的層，并將Mysite\img文件夾中的圖像文件campus3.jpg插入層中，用ＣＳＳ的Ａlpha濾鏡制作如圖１６－５所示的效果。圖16-5Alpha濾鏡效果（2）創(chuàng)建名為exe16-3.htm的網(wǎng)頁，在網(wǎng)頁的合適位置上插入2行2列4個布局單元格，每個單元格為120*100像素，并在每個單元格中插入Mysite\img文件夾中的圖像文件f01.jpg，如圖16-6所示。然后用CSS的翻轉(zhuǎn)濾鏡制作出如圖16-7所示的效果。創(chuàng)建新的網(wǎng)頁文件exe16-6.htm，在其中分別輸入“藝術(shù)”和“中國文學(xué)”，并建立art.htm與literature.htm文件的超鏈接，再將網(wǎng)頁保存在本地站點根文件夾中。預(yù)覽網(wǎng)頁，觀察切換效果。（6）利用模糊濾鏡（Blur）設(shè)置網(wǎng)頁edu.htm的標(biāo)題為立體效果，作用在標(biāo)題上的模糊濾鏡效果參數(shù)為Blur(Add=True，Direction=135，Strength=20)。預(yù)覽網(wǎng)頁后，用exe16-7.htm名將網(wǎng)頁保存在本地站點根文件夾中。3.模板的應(yīng)用（1）將Mysite文件中flower.htm文檔改變成模板，將其中7幅圖像所處的區(qū)域設(shè)置為可編輯區(qū)，可編輯區(qū)的名字為img1、img2…………img7，如圖16-10所示，模板文件名為flower.htm，將模板文件保存在本地網(wǎng)站的Template文件中。圖16-10模板創(chuàng)建示意（2）利用模板文件flower.dwt，創(chuàng)建網(wǎng)頁文檔exe16-8.htm。其中可編輯區(qū)域插入的圖像分別是Mysite\img文件夾中tu1.img、tu2.img……..tu6.img、tu7.img，預(yù)覽網(wǎng)頁后，用exe16-8.htm保存文件。（3）將模板文件flower.dwt改名為grid.dwt，保存后更新站點中所有基于該模板的網(wǎng)頁文件。（４）修改模板文件grid.dwt，將其背景圖象改為bg0021.gif,保存修改后的模板文件。用這個模板文件更新站點中所有基于該模板的網(wǎng)頁文檔，觀察網(wǎng)頁文件flower.htm和exe16-8.htm背景圖像格變化情況。（５）利用【資源】面板創(chuàng)建一個名為test.dwt的模板，模板的可編輯區(qū)有文字區(qū)和圖像區(qū)，版面構(gòu)圖自定。在模板的底部插入一個層，并將該層定義為可編輯區(qū)域。（６）利用test.dwt模板創(chuàng)建網(wǎng)頁文件exe16-9.htm，并在可編輯區(qū)域插入文字和圖像，在層中插入closel.gif文件，預(yù)覽網(wǎng)頁后，保存網(wǎng)頁文件。４.創(chuàng)建、編輯與使用庫對象（１）打開網(wǎng)頁文件flower.htm，將網(wǎng)頁中的第７幅圖像用菜單命令方式或用鼠標(biāo)拖曳方式添加到庫中，分別用img1、img2………img7給庫項目命名。在網(wǎng)頁底部插入Mysite\img文件夾中圖像文件close1.gif，并把圖像用close1為名設(shè)為庫項目。（２）打開網(wǎng)頁文件art.htm，將網(wǎng)頁中的標(biāo)題