CSS樣式表與模板

●認(rèn)識CSS●使用CSS編輯器●背景樣式的定義●濾鏡的使用本章學(xué)習(xí)知識點(diǎn)2.1文字和圖像的處理：生日賀卡本章內(nèi)容目錄2.2CSS樣式：獨(dú)具風(fēng)格的主頁2.3對文字運(yùn)用CSS濾鏡：藍(lán)色生死戀2.4對圖像運(yùn)用CSS濾鏡：圖片濾鏡2.5層模板：海底世界2.6庫項(xiàng)目的應(yīng)用：公司主頁2.7總結(jié)提高2.8本章習(xí)題2.1.1基本概念

2.1文字和圖像的處理：生日賀卡CSS(CascadingSytleSheet，層疊樣式表)是用于增強(qiáng)和控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS樣式表也為他們提供的展示效果的項(xiàng)目給予更多的靈活性。屬性，例如顏色、背景、邊界、邊框和許多的更多都能被所有的元素所應(yīng)用。

?定義CSS樣式

?使用CSS樣式對文本樣式進(jìn)行修改打開已經(jīng)準(zhǔn)備好的網(wǎng)頁素材2.1.2上機(jī)操作打開【CSS樣式】面板

打開【新建CSS樣式】對話框，了解各個(gè)部分的功能

運(yùn)用CSS樣式表制作一張生日賀卡的文本樣式和背景樣式。使得頁面上的字體為“幼圓”，大小為“中”,顏色為淺藍(lán)，粗細(xì)為“細(xì)體”，并且有閃爍的效果。文本樣式的定義。

修改前的效果修改后的效果2.2CSS樣式：獨(dú)具風(fēng)格的主頁2.2.1基本概念層疊樣式表比較簡單、靈活、易學(xué)，能支持任何瀏覽器?？梢允褂肏TML標(biāo)簽或命名的方式定義，除可控制一些傳統(tǒng)的文本屬性外，例如字體、字號、顏色等，還可以控制一些比較特別的HTML屬性，例如對象位置、圖片效果、鼠標(biāo)指針等。使用CSS面板靈活應(yīng)用CSS樣式對網(wǎng)頁內(nèi)容進(jìn)行修改

2.2.2上機(jī)操作執(zhí)行【窗口】|【CSS樣式】選項(xiàng)，打開【CSS樣式】面板，單擊按鈕，彈出【鏈接外部樣式表】對話框

執(zhí)行【窗口】|【CSS樣式】選項(xiàng)，打開【CSS樣式】面板，單擊按鈕，彈出【鏈接外部樣式表】對話框，如圖2.10所示，從外部已有的CSS樣式表中選擇一個(gè)分配給當(dāng)前的頁面。點(diǎn)擊【瀏覽】后，在彈出的【選擇樣式表文件】對話框中選擇CSS文件。如圖2.13所示。

對比添加CSS樣式前后，網(wǎng)頁的差別添加CSS樣式前添加CSS樣式后2.3對文字運(yùn)用CSS濾鏡：藍(lán)色生死戀2.3.1基本概念CSS濾鏡實(shí)際上是CSS一個(gè)新的擴(kuò)展部分，使用這種技術(shù)簡單的語法就可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，例如圖片、文本、以及其他一些對象，為頁面添加一些豐富的變化。右側(cè)為一些常用的濾鏡，以及其功能說明。Alpha設(shè)置透明效果BlendTrans設(shè)置混合過渡效果Blur設(shè)置模糊效果Chroma將指定顏色設(shè)為透明DropShadow設(shè)置投影陰影FlipH設(shè)置水平翻轉(zhuǎn)FlipV設(shè)置垂直翻轉(zhuǎn)Glow設(shè)置發(fā)光效果Gray產(chǎn)生灰階Invert設(shè)置反轉(zhuǎn)底片效果Light設(shè)置燈光投影效果Mask設(shè)置蔗遮罩效果RevealTrans設(shè)置顯示過渡效果Shadow設(shè)置陰影效果Wave設(shè)置水平與垂直波動(dòng)效果Xray設(shè)置X光照效果CSS濾鏡－常用的Alpha濾鏡Blur濾鏡FlipV濾鏡FlipH濾鏡2.3.2上機(jī)操作輸入“藍(lán)色生死戀”文本在【類型】下將文字顏色選為白色，便于查看效果。在【擴(kuò)展】下的【過濾器】中列出的就是所有的CSS濾鏡，選擇Glow濾鏡，它可以使文字產(chǎn)生邊緣發(fā)光的效果。本例中我們設(shè)置Glow(Color=red,Strength=8)，即顏色為紅色（Red），發(fā)光強(qiáng)度為8，然后單擊【確定】。

我們還可以利用Blur濾鏡制作動(dòng)感字，它的語法格式為Blur(Add=?,Direction=?,Strength=?)。我們定義Blur(Add=1,Direction=90,Strength=150)

通過把過濾器設(shè)置為DropShadow(Color=6699cc,OffX=4,OffY=4,Positive=1)來產(chǎn)生如圖2.20所示的陰影字

CSS不僅可以對文字進(jìn)行樣式的修改，還可以對表格進(jìn)行修改。l

區(qū)塊樣式的修改：精確定義整段文本中文字的字距，對齊方式等屬性l

方框樣式的修改：大表格的外面加一條細(xì)細(xì)的邊框，可以使用邊框樣式邊框樣式的修改：定義特定元素的大小及其與周圍元素的間距等屬性2.4對圖像運(yùn)用CSS濾鏡：圖片濾鏡2.4.1基本概念區(qū)塊定義方框定義邊框定義2.4.2上機(jī)操作初始狀態(tài)執(zhí)行【窗口】|【CSS樣式】選項(xiàng)，打開【CSS樣式】面板，單擊按鈕，在彈出的對話框中作出選擇選擇，然后單擊【確定】按鈕。在【盒子】下的【邊界】選項(xiàng)中，去掉【全部相同】選項(xiàng)前面的勾，將【右】和【下】選為“自動(dòng)”。將【邊框】下的【寬度】選項(xiàng)設(shè)為“細(xì)”，【顏色】的值設(shè)為＃FF0000。將【擴(kuò)展】下的【過濾器】設(shè)為Alpha(Opacity=30)

最終的網(wǎng)頁效果圖層是最早在圖形圖象處理中提出的一個(gè)概念，由于層的運(yùn)用使得平面設(shè)計(jì)師在處理圖像時(shí)可以多層操作、任意組合，從而大大提高了工作效率，也使創(chuàng)作出的效果更加豐富。Dreamweaver中的層概念與圖像處理中層的概念不同，但它們都有一個(gè)共同點(diǎn)，就是層的重疊性。Dreamweaver中的層可以理解為浮動(dòng)在網(wǎng)頁上的一層透明紙，它可以被準(zhǔn)確地定位于網(wǎng)頁的任意位置，并且可以設(shè)置大小。作為一種網(wǎng)頁元素定位技術(shù)，使用層可以以像素為單位精確定位頁面元素。層還可以相互嵌套層，子層會繼承父層的特征，如可見性、移動(dòng)等。層在Dreamweaver中被認(rèn)為是一個(gè)對象，這樣就具有更多的特性，如制作動(dòng)畫、觸發(fā)動(dòng)作。如果要構(gòu)建一個(gè)十分酷的網(wǎng)頁，層的作用不能忽視。而對于層的應(yīng)用。2.5.1基本概念2.5層模板：海底世界2.5.2上機(jī)操作打開要插入層的頁面

插入層，并且在層中插入圖片和文本執(zhí)行【文件】｜【另存為模板】命令

打開【另存為模板】對話框中，在【站點(diǎn)】下拉列表中設(shè)置模板保存的站點(diǎn)，并定義模板名稱后，單擊【保存】按鈕即可把當(dāng)前網(wǎng)頁轉(zhuǎn)換為模板，同時(shí)將模板另存到選擇的站點(diǎn)中

網(wǎng)頁最終的效果2.6庫項(xiàng)目的應(yīng)用：公司主頁2.6.1基本概念在站點(diǎn)中，除了具有相同外觀的許多頁面外，還有一些需要經(jīng)常更新的頁面元素，例如版權(quán)聲明、站點(diǎn)導(dǎo)航欄，這些內(nèi)容與模板不同，它們只是頁面中的一部分，在各個(gè)頁面中的擺放位置可能不同，但內(nèi)容卻是一致的。那么，可以將這種內(nèi)容保存為一個(gè)庫文件，在需要的地方插入，在需要的時(shí)間快速更新。庫與模板的作用一樣，也是一種保證網(wǎng)頁中的部件能夠重復(fù)使用的工具。模板重復(fù)使用的是網(wǎng)頁的一部分結(jié)構(gòu)，而庫則提供了一種重復(fù)使用網(wǎng)頁對象的方法。2.6.2上機(jī)操作使用庫面板，首先執(zhí)行【窗口】|【資源】命令，調(diào)出【資源】面板，單擊左側(cè)的庫按鈕，切換到庫面板。單擊庫面板右下角的【新建庫項(xiàng)目】按鈕

雙擊新建的庫項(xiàng)目，打開庫項(xiàng)目編輯窗口

為一個(gè)鮮花禮品公司的主頁創(chuàng)建并編輯庫項(xiàng)目。公司已經(jīng)設(shè)計(jì)好的主頁，直接將網(wǎng)頁中現(xiàn)有的對象元素轉(zhuǎn)換為庫文件

執(zhí)行【修改】|【庫】|【增加對象到庫】命令，將選中的內(nèi)容轉(zhuǎn)化為庫項(xiàng)目選中內(nèi)容反白，同時(shí)，庫項(xiàng)目內(nèi)容出現(xiàn)在【庫】列表中，提示給新建的庫文件命名

制作一個(gè)網(wǎng)頁，并且選定插入點(diǎn)插入剛才保存的庫項(xiàng)目，立即顯示效果2.7總結(jié)提高本章重點(diǎn)介紹了DreamweaverMX中CSS樣式表的使用，同時(shí)介紹了層和庫的概念和使用。CSS樣式表是網(wǎng)頁設(shè)計(jì)中一種非常重要的技術(shù)，目前獲得了廣泛的使用，其發(fā)展勢頭勢不可擋。CSS樣式表的出現(xiàn)可以說是網(wǎng)頁排版中的一次革命性進(jìn)步。建議用戶在初步掌握了創(chuàng)建和應(yīng)用樣式的方法后，直接學(xué)習(xí)并使用CSS語言編寫樣式表文件。由于層對象與動(dòng)態(tài)效果有著密切的關(guān)系，因此完全掌握層技術(shù)是建立網(wǎng)頁動(dòng)態(tài)效果的關(guān)鍵。雖然層技術(shù)的應(yīng)用并不復(fù)雜，但在頁面中如何使用才是關(guān)鍵。

2.8本章習(xí)題一、填空題1．如果想把一幅圖象水平翻轉(zhuǎn)應(yīng)該用___________，垂直翻轉(zhuǎn)可以用_________，想把整個(gè)圖象制作成底片效果可以用________________。2．層的優(yōu)點(diǎn)有：_________A．精確定位

B.插入自如C．加速瀏覽

D.可疊加性3．可以使用幾種方法創(chuàng)建嵌套層？4．網(wǎng)頁制作中有些需要經(jīng)常更新的頁面元素，在各個(gè)頁面中的擺放位置可能不同，但內(nèi)容是一致的，這時(shí)可以把它