層疊樣式、模板與庫課件

1、第第5章章 層疊樣式、模板與庫層疊樣式、模板與庫5.1 層疊樣式表5.2 模板的應(yīng)用5.3 庫的應(yīng)用1CSS的概念nCascading Style Sheets的縮寫，中文譯為“層疊樣式表”。n術(shù)語“層疊”是指對同一個(gè)元素或 Web 頁面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè) CSS 規(guī)則來應(yīng)用顏色，創(chuàng)建另一個(gè)規(guī)則來應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁面中的同一文本。n層疊樣式表 (CSS) 是一系列格式設(shè)置規(guī)則，它們控制 Web 頁面內(nèi)容的外觀。使用 CSS 設(shè)置頁面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容（HTML 代碼）位于自身的 HTML 文件中，而定義代碼表現(xiàn)形式的 CSS 規(guī)則位于

2、另一個(gè)文件（外部樣式表）或 HTML 文檔的另一部分（通常為 部分）中。n優(yōu)點(diǎn)：CSS 能夠同時(shí)控制多個(gè)文檔的格式，當(dāng)CSS 樣式表被修改后，使用該CSS 樣式的網(wǎng)頁文檔格式都將自動(dòng)更新。5.1 層疊樣式表層疊樣式表2 創(chuàng)建CSS樣式1）菜單【窗口】|【CSS樣式】，打開CSS樣式面板。2）單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框。在“選擇器類型”選項(xiàng)中，可以選擇創(chuàng)建CSS樣式的方法包括以下三種：n類：創(chuàng)建自定義樣式，可以應(yīng)用在文檔窗口的任何區(qū)域或文本中。n標(biāo)簽（重新定義特定標(biāo)簽的外觀）：重新定義HTML標(biāo)記的的默認(rèn)格式。即針對某一個(gè)標(biāo)簽來定義層疊樣式

3、表，也就是說定義的層疊樣式表將只應(yīng)用于選擇的標(biāo)簽。例如，我們?yōu)楹蜆?biāo)簽定義了層疊樣式表，那么所有包含在和標(biāo)簽的內(nèi)容將遵循定義的層疊樣式表。n高級（ID、偽類選擇器等）：為特定的組合標(biāo)簽定義層疊樣式表。3）為新建CSS樣式輸入或選擇名稱、標(biāo)記或選擇器其中：n對于類選擇器，其名稱必須以點(diǎn)“.”開始，如果沒有輸入該點(diǎn)，則DW會(huì)自動(dòng)添加上。自定義樣式名可以是字母與數(shù)字的組合，但.之后必須是字母。n對于標(biāo)簽選擇器，可以在“標(biāo)簽”下拉列表中輸入或選擇HTML標(biāo)簽。n對于高級選擇器，可以在“選擇器”下拉列表中輸入或選擇需要的選擇器。4）在“定義在”區(qū)域選擇定義的樣式位置可以是“新建樣式表文件”或“僅對該文檔”

4、。單擊“確定”按鈕，如果選擇了“新建樣式表文件”選項(xiàng)，會(huì)彈出“保存樣式表文件為”對話框，給樣式表命名，保存后，會(huì)彈出“CSS規(guī)則定義”對話框。如果選擇了“僅對該文檔”，則單擊“確定”后，直接彈出“CSS規(guī)則定義”，在其中設(shè)置CSS樣式。“CSS規(guī)則定義”對話框：5）在“CSS規(guī)則定義”對話框中設(shè)置CSS規(guī)則定義主要分為類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展8項(xiàng)。每個(gè)選項(xiàng)都可以對所選標(biāo)簽做不同方面的定義，可以根據(jù)需要設(shè)定。定義完畢后，單擊“確定”按鈕，完成創(chuàng)建CSS樣式。3 設(shè)置CSS樣式1）文本樣式的設(shè)置新建CSS樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對該文檔”

5、。彈出“CSS規(guī)則定義”對話框，默認(rèn)顯示的就是對文本進(jìn)行設(shè)置的“類型”項(xiàng)。n“字體”n“大小”：大小就是字號，可以直接填入數(shù)字，然后選擇單位。n“樣式”：設(shè)置文字的外觀，包括正常、斜體、偏斜體。n“行高”：這項(xiàng)設(shè)置在網(wǎng)頁制作中很常用。設(shè)置行高，可以選擇“正常”，讓計(jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。n“顏色”。2）背景樣式的設(shè)置n背景顏色n背景圖像n重復(fù)：在使用圖像作為背景的時(shí)，可以使用此項(xiàng)設(shè)置背景圖像的重復(fù)方式，包括“不重復(fù)”、“重復(fù)”、“橫向重復(fù)”、和“縱向重復(fù)“。n附件：選擇圖像做背景的時(shí)候，可以設(shè)置圖像是否跟隨網(wǎng)頁一同滾動(dòng)。n水平位置：可以“左對齊“右對齊”、“

6、居中”。n垂直位置：可以選擇“頂部”、“底部”、“居中”。3）區(qū)塊樣式設(shè)置單詞間距：英文單詞之間的距離。字母間距：設(shè)置英文字母間距。垂直對齊：設(shè)置對象的垂直對齊方式。文本對齊：設(shè)置文本的水平對齊方式。文字縮進(jìn)：中文文字的首行縮進(jìn)就是由它來實(shí)現(xiàn)的?？崭瘢簩υ创a文字空格的控制。選擇“正常”，忽略源代碼文字之間的所有空格。選擇“保留”，將保留源代碼中所有的空格形式，包括由空格鍵、Tab鍵、Enter鍵創(chuàng)建的空格。顯示：指定是否以及如何顯示元素。選擇“無”則關(guān)閉它被指定給的元素的顯示。4）方框樣式的設(shè)置n寬：通過數(shù)值和單位設(shè)置對象的寬度。n高：通過數(shù)值和單位設(shè)置對象的高度。n浮動(dòng)：實(shí)際就是文字等對象

7、的環(huán)繞效果。選擇“右對齊”、對象居右，文字等內(nèi)容從另外一側(cè)環(huán)繞對象。選擇“左對齊”。對象居左，文字等內(nèi)容從另一側(cè)環(huán)繞?！盁o”取消環(huán)繞效果。n清除：規(guī)定對象的一側(cè)不許有層?？梢酝ㄟ^選擇“左對齊”、“右對齊”，選擇不允許出現(xiàn)層的一側(cè)。如果在清除層的一側(cè)有層，對象將自動(dòng)移到層的下面?！皟烧摺笔侵缸笥叶疾辉试S出現(xiàn)層。“無”是不限制層的出現(xiàn)。n“填充”和“邊界”：如果對象設(shè)置了邊框，“填充”是指邊框和其中內(nèi)容之間的空白區(qū)域；“邊界”是指邊框外側(cè)的空白區(qū)域。CSS盒子模式5）邊框樣式設(shè)置邊框樣式設(shè)置可以給對象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。n樣式：設(shè)置邊框的樣式，如果選中“全部相同”復(fù)選框，則只需要

8、設(shè)置“上”樣式，其它方向的樣式與“上”相同。n寬度：設(shè)置4個(gè)方向邊框的寬度。n顏色：設(shè)置邊框?qū)?yīng)的顏色，如果選中“全部相同”復(fù)選框，則其他方向的設(shè)置都與“上”相同。6）列表樣式設(shè)置n類型：設(shè)置引導(dǎo)列表項(xiàng)目的符號類型?？梢赃x擇圓點(diǎn)、圓圈、方塊、數(shù)字、小寫羅馬數(shù)字、大寫羅馬數(shù)字、小寫字母、大寫字母、無列表符號等。n項(xiàng)目符號圖像：可以選擇圖像作為項(xiàng)目的引導(dǎo)符號，單擊右側(cè)的“瀏覽”按鈕，找到圖像文件即可。選擇ul標(biāo)簽可以對整個(gè)列表應(yīng)用設(shè)置，選中l(wèi)i標(biāo)簽可對單獨(dú)的項(xiàng)目應(yīng)用。n位置：決定列表項(xiàng)目縮進(jìn)的程度。選擇“外”，列表貼近左側(cè)邊框，選擇“內(nèi)”，列表縮進(jìn)。7）定位樣式設(shè)置“定位”項(xiàng)實(shí)際上是對層的設(shè)置。但

9、是因?yàn)镈W提供了可視化的層制作功能，所以此項(xiàng)設(shè)置在實(shí)際操作中幾乎不會(huì)使用。8）擴(kuò)展樣式的設(shè)置CSS樣式還可以實(shí)現(xiàn)一些擴(kuò)展功能，主要包括3種效果：分頁、光標(biāo)和過濾器。n分頁：通過樣式來為網(wǎng)頁添加分頁符號，允許用戶打印網(wǎng)頁時(shí)指定在某元素前或后進(jìn)行分頁。n光標(biāo)：通過樣式改變鼠標(biāo)形狀，鼠標(biāo)放置于被此項(xiàng)設(shè)置修飾的區(qū)域上的時(shí)，形狀會(huì)發(fā)生改變。具體的形狀包括：Hand（手）、crosshair（交叉十字）、text（文本選擇符號）、wait（Windows的沙漏形狀）、default（默認(rèn)的鼠標(biāo)形狀）、help（帶問號的鼠標(biāo)）、e-resize（向東的箭頭）、ne-resize（指向東北方的箭頭）、n-re

10、size（向北的箭頭）、nw-resize（指向西北的箭頭）、w-resize（向西的箭頭）、sw-resize（向西南的箭頭）、s-resize（向南的箭頭）、se-resize（向東南的箭頭）、auto（正常鼠標(biāo)）。）n過濾器：使用CSS語言實(shí)現(xiàn)過濾器（濾鏡）效果。單擊“過濾器”下拉列表框旁的按鈕，可以看見有多種濾鏡效果可供選擇。 見下表：濾鏡效果濾鏡效果描述描述AlphaAlpha設(shè)置透明效果設(shè)置透明效果BlurBlur設(shè)置模糊效果設(shè)置模糊效果ChromaChroma把指定的顏色設(shè)置為透明把指定的顏色設(shè)置為透明DropShadowDropShadow設(shè)置投射陰影設(shè)置投射陰影FlipHFl

11、ipH水平反轉(zhuǎn)水平反轉(zhuǎn)FlipVFlipV垂直反轉(zhuǎn)垂直反轉(zhuǎn)GlowGlow為對象的外邊界增加光效為對象的外邊界增加光效GrayscaleGrayscale降低圖片的彩色度降低圖片的彩色度InvertInvert將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果LightLight設(shè)置燈光投影效果設(shè)置燈光投影效果MaskMask設(shè)置遮罩效果，設(shè)置遮罩效果，ColorColor指定遮罩的顏色指定遮罩的顏色ShadowShadow設(shè)置陰影效果設(shè)置陰影效果WaveWave設(shè)置水平方向和垂直方向的波動(dòng)效果設(shè)置水平方向和垂直方向的波動(dòng)效果XrayXray設(shè)置設(shè)置X X

12、光照效果光照效果CSS的文字特效的文字特效光暈字光暈字Glow濾鏡的語法格式為：濾鏡的語法格式為：Glow(Color=?, Strength=?)，里，里面有兩個(gè)參數(shù)：面有兩個(gè)參數(shù)：Color決定光暈的決定光暈的顏色，可以用如顏色，可以用如#FFFFFF的十六的十六進(jìn)制代碼，或者用進(jìn)制代碼，或者用Red、Yellow等等單詞表示；單詞表示；Strength表示發(fā)光強(qiáng)表示發(fā)光強(qiáng)度，范圍從度，范圍從0255。在此，設(shè)置。在此，設(shè)置顏色為藍(lán)色（顏色為藍(lán)色（Blue），發(fā)光強(qiáng)度），發(fā)光強(qiáng)度為為10。CSS的文字特效的文字特效陰影字陰影字 Drowshadow濾鏡的語法如濾鏡的語法如下：下： Drop

13、Shadow(Color=?, OffX=?, OffY=?, Positive=?) 。其中，。其中，Color表示投射陰影的顏色；表示投射陰影的顏色；OffX、OffY分別代表陰影偏離文字分別代表陰影偏離文字位置的量；位置的量；Positive為一個(gè)為一個(gè)邏輯值，邏輯值，1代表為所有不透明代表為所有不透明元素建立陰影，元素建立陰影，0代表為透明代表為透明元素建立可見陰影。元素建立可見陰影。CSS的文字特效的文字特效動(dòng)感字動(dòng)感字Blur(Add=?, Direction=?, Strength=?)。Add參數(shù)是參數(shù)是一個(gè)布爾值，一般來說，當(dāng)一個(gè)布爾值，一般來說，當(dāng)濾鏡用于圖片的時(shí)候取濾鏡用

14、于圖片的時(shí)候取0，用，用于文字的時(shí)候取于文字的時(shí)候取1；Direction代表模糊方向，單代表模糊方向，單位是角度；位是角度；Strength代表模代表模糊移動(dòng)值。在此定義糊移動(dòng)值。在此定義Blur(Add=1, Direction=90, Strength=150)，預(yù)覽可以，預(yù)覽可以看到如圖所示的效果?？吹饺鐖D所示的效果。4 編輯與應(yīng)用CSS樣式單擊CSS樣式面板右上方的擴(kuò)展按鈕，彈出下圖所示的菜單。CSS的相關(guān)操作都是通過這個(gè)菜單上的項(xiàng)目來實(shí)現(xiàn)的。 1）編輯CSS樣式在CSS樣式面板中，選中需要編輯的樣式類型，選擇上圖擴(kuò)展菜單中的“編輯”項(xiàng)在彈出的“CSS規(guī)則定義”對話框中修改相應(yīng)的設(shè)置

15、。編輯完成后單擊“確定”按鈕，CSS樣式就編輯完成了。2）應(yīng)用CSS自定義樣式l選定目標(biāo)元素并在CSS樣式面板中選擇定義好的規(guī)則，然后選擇擴(kuò)展菜單中的“套用”項(xiàng)。l鼠標(biāo)右鍵單擊在網(wǎng)頁中被選中的元素，在彈出的快捷菜單中選擇“CSS樣式”，在其子菜單中選擇需要的自定義樣式。l選定目標(biāo)元素，設(shè)置屬性面板中的“樣式”屬性。3）附加外部樣式表選擇擴(kuò)展菜單中“附加樣式表”項(xiàng)，打開“鏈接外部樣式表”對話框：“文件/URL”：設(shè)置外部樣式表文件的路徑，可以單擊瀏覽按鈕，在瀏覽窗口中找到樣式表文件?！疤砑訛椤保哼x擇“鏈接”，將外部CSS樣式表文件鏈接到當(dāng)前網(wǎng)頁文檔中；選擇“導(dǎo)入”將外部CSS樣式表文件導(dǎo)入到當(dāng)前

16、網(wǎng)頁文檔中。附加外部樣式表后，就可按照2）中方法套用定義好的樣式。設(shè)置完畢后單擊“確定”按鈕，CSS文件即被導(dǎo)入到當(dāng)前頁面。5.2 模板的應(yīng)用l模板是一種事先設(shè)計(jì)好的網(wǎng)頁樣式，在制作風(fēng)格相似的頁面時(shí)，只要套用這種模板便可以設(shè)計(jì)出風(fēng)格一致的網(wǎng)頁。l任何套用了同一模板的網(wǎng)頁與模板本身都建立了一種鏈接關(guān)系，當(dāng)模板改變時(shí)，所有套用該模板的網(wǎng)頁都將隨之改變。l模板設(shè)置了可編輯區(qū)域和鎖定區(qū)域?？梢詭椭O(shè)計(jì)者把網(wǎng)頁的布局和內(nèi)容分離，快速制作大量風(fēng)格布局相似的網(wǎng)頁，提高網(wǎng)頁制作更新的效率和網(wǎng)頁的規(guī)范性。1 創(chuàng)建模板模板的創(chuàng)建有三種方式：1）直接創(chuàng)建模板選擇【窗口】|【資源】命令，打開“資源”面板，切換到模板子

17、面板，如下圖所示。單擊模板面板上的“擴(kuò)展”按鈕，在彈出菜單中選擇“新建模板”這是在瀏覽窗口出現(xiàn)一個(gè)未命名的模板文件，給模板命名。然后單擊“編輯”按鈕，打開模板進(jìn)行編輯。編輯完成后，保存模板，完成模板建立。2）將普通網(wǎng)頁另存為模板打開一個(gè)已經(jīng)制作完成的網(wǎng)頁，刪除網(wǎng)頁中不需要的部分，保留幾個(gè)網(wǎng)頁共同需要的區(qū)域。選擇【文件】|【另存為模板】命令將網(wǎng)頁另存為模板。3）從文件菜單新建模板 選擇【文件】|【新建】命令，打開“新建文檔”對話框，然后再類別中選擇“模板頁”，并選取相關(guān)的模板類型，直接單擊“創(chuàng)建”按鈕即可。見下圖：2 定義模板可編輯區(qū)域模板創(chuàng)建好后，要在模板中建立可編輯區(qū)，只有在可編輯區(qū)里，我們

18、才可以編輯網(wǎng)頁內(nèi)容?？梢詫⒕W(wǎng)頁上任意選中的區(qū)域設(shè)置為可編輯區(qū)域。在文檔窗口中，選中需要設(shè)置為可編輯區(qū)域的部分，單擊常用工具欄的“模板”按鈕，在彈出菜單中選擇“可編輯區(qū)域”項(xiàng)。見下圖：在彈出的“新建可編輯區(qū)域”對話框中給該區(qū)域命名，然后單擊“確定”按鈕。新添加的可編輯區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可編輯區(qū)域的名稱。如果希望刪除可編輯區(qū)域，可以將光標(biāo)置于要?jiǎng)h除的可編輯區(qū)域內(nèi)，選擇【修改】|【模板】|【刪除模板標(biāo)記】命令，光標(biāo)所在區(qū)域的可編輯區(qū)即被刪除。定義可編輯區(qū)域的注意問題：n表格布局的模板：可將整個(gè)表格或表格的某個(gè)單元格定義為可編輯區(qū)域，不能同時(shí)將多個(gè)單元格定義為一個(gè)單獨(dú)的可編輯區(qū)域。 n層布局的模板：層設(shè)置為可編輯區(qū)域，可改變層的位置與層中內(nèi)容；層內(nèi)容為可編輯區(qū)域時(shí)，不能改變層位置。3 創(chuàng)建基于模板的頁面新建一個(gè)網(wǎng)頁文檔，選擇【窗口】|【資源】命令，打開“資源”面板，切換到模板子面板，