網(wǎng)頁設(shè)計與制作-(6)

1、模塊六 高效制作更為精致的網(wǎng)頁任務(wù)引領(lǐng) 產(chǎn)品說明書 散文集項目漸近 網(wǎng)站項目“我心飛揚”之 第六階段“美化并高效制作各頁面”拓展訓(xùn)練 “流行文學(xué)作品薈萃” 任務(wù)引領(lǐng) “產(chǎn)品說明書” 網(wǎng)頁打開后，將顯示“產(chǎn)品說明書”界面。 制作演示相關(guān)知識 1.理解樣式表在當(dāng)今的網(wǎng)頁中，幾乎很多網(wǎng)頁都使用了CSS樣式表，有了CSS的控制，網(wǎng)頁便會給人一種賞心悅目的感覺，字體的色彩變化也使主頁變得更加生動活潑。相關(guān)知識（1）樣式表的概念 CSS英文全稱“Cascading Style Sheets”，中文全稱為“層疊樣式表”，更多的人則把它簡稱為“樣式表”，以下簡稱為“CSS樣式”。它是一組格式設(shè)置規(guī)則，用于控制

2、Web頁面內(nèi)容的外觀，通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表示形式分離開。相關(guān)知識（2）理解樣式表的標記 通常情況下，CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。 基本語法 選擇器 屬性: 屬性值; “選擇器”相當(dāng)于調(diào)用的標識，“屬性”和“屬性值”則是說明想要描述的是哪一個屬性，該屬性的值為多少。相關(guān)知識（3）樣式表的種類 按照選擇器分，CSS最常用的種類有四種：HTML標簽選擇器、CLASS類選擇器、ID類選擇器和偽元素選擇器。相關(guān)知識 HTML標簽選擇器 顧名思議，HTML標簽選擇器是直接將HTML標簽作為選擇器，可以是p、h1、dl、strong等HTML

3、標簽。示例代碼如下：h2 color: orange; h4 color: green; p font-weight:bold; 相關(guān)知識 CLASS類選擇器 使用HTML標簽的CLASS屬性引入CSS中定義的樣式規(guī)則的名字，稱為CLASS類選擇器，CLASS屬性指定的樣式名字必須是以“.”開頭。示例代碼如下：相關(guān)知識 在頁面中使用類選擇器：/在兩列上使用類選擇器方式來設(shè)置樣式相關(guān)知識 ID類選擇器 ID選擇器的使用方法跟class選擇器基本相同，不同之處在于ID選擇器只能在HTML頁面中使用一次，因此其針對性更強（僅將該樣式應(yīng)用到具有相同ID的HTML元素）。示例代碼如下：相關(guān)知識ID選擇器

4、1ID選擇器2相關(guān)知識 偽類選擇器 偽類和偽元素是兩種有意思的選擇器，之所以稱“偽”，因為它們實際上并不存在于源文檔或者文檔樹中，但是它們又確實可以顯示出效果。CSS中最常用的四個偽類選擇器，分別是：鏈接 a:link 已訪問過的鏈接 a:visited鼠標停在上方時 a:hover單擊鼠標時 a : active。 相關(guān)知識（4）在哪兒建立樣式表 通常情況下，CSS樣式表在HTML中有三個位置，對應(yīng)的名稱分別是內(nèi)聯(lián)樣式表（Inline Style Sheet）、嵌入樣式表（Internal Style Sheet）和外部樣式表（External Style Sheet）。相關(guān)知識 內(nèi)聯(lián)樣式表

5、（Inline Style Sheet） HTML標簽直接使用style屬性，稱為內(nèi)聯(lián)樣式（Inline Style Sheet）。它適用于只需要簡單地將一些樣式應(yīng)用于某個獨立的元素的情況，不需要另設(shè)CSS樣式段。 基本語法 內(nèi)容 示例代碼如下： 內(nèi)聯(lián)樣式表(Inline Style) 相關(guān)知識 嵌入樣式表（Internal Style Sheet） 嵌入樣式是在標簽內(nèi)添加標簽對兒，在標簽對內(nèi)定義需要的樣式，作用于整個頁面。 基本語法 .相關(guān)知識 外部樣式表 (External Style Sheet) 顧名思義，外部樣式表是個獨立文件，一般后綴為.css，當(dāng)某文檔需要引用外部樣式表時，將外部

6、樣式表的鏈接在中說明即可。 基本語法 相關(guān)知識（5）在Dreamweaver 中制作樣式表的方法 打開CSS樣式面板添加CSS樣式。選擇“窗口”菜單下“CSS樣式”命令即可，如圖所示。相關(guān)知識CSS樣式面板 添加CSS樣式選擇器類型相關(guān)知識 2.利用用戶自定義樣式表改變文字屬性（1）用戶自定義文本屬性的type選項組 打開網(wǎng)頁，在“樣式表”面板中單擊新建圖標，彈出“新建CSS規(guī)則”對話框，設(shè)置樣式的名稱為“ziti”，在“選擇器類型”中選擇“類（可應(yīng)用與任何HTML元素）”，在“規(guī)則定義”中選擇“僅限該文檔”如圖所示。相關(guān)知識新建CSS樣式 設(shè)置type選項 相關(guān)知識選中網(wǎng)頁中的文字，在“屬性

7、”面板“目標規(guī)則”中選擇“ziti”樣式，如圖。相關(guān)知識（2）根據(jù)自定義的文字屬性一并修改文章段落 打開網(wǎng)頁，在“樣式表”面板中單擊新建圖標，彈出“新建CSS規(guī)則”對話框，設(shè)置樣式的名稱為“wz”，在“選擇器類型”中選擇“類（可應(yīng)用與任何HTML元素）”，在“規(guī)則定義”中選擇“僅限該文檔”。 在選項“類型”中設(shè)置“Font-size”字體大小為“12px”，“Line-height”行高為“20px”，在“區(qū)塊”中設(shè)置“Text-indent”文字縮進為“2ems”，如圖所示。相關(guān)知識設(shè)置“類型” 設(shè)置區(qū)塊 相關(guān)知識 3.利用用戶自定義樣式表修改行間距打開網(wǎng)頁，在“樣式表”面板中單擊新建圖標，

8、彈出“新建CSS規(guī)則”對話框，設(shè)置樣式的名稱為“hg”，在“選擇器類型”中選擇“類（可應(yīng)用與任何HTML元素）”，在“規(guī)則定義”中選擇“僅限該文檔”。 在選項“類型”中設(shè)置“Font-size”字體大小為“12px”，“Line-height”行高為“25px”，如圖所示。相關(guān)知識設(shè)置樣式 相關(guān)知識 4.利用有關(guān)鏈接的樣式表修改鏈接的格式（1）取消建立鏈接的文本下劃線打開帶有超級鏈接的網(wǎng)頁，在“樣式表”面板中單擊新建圖標，彈出“新建CSS規(guī)則”對話框，在“選擇器類型”中選擇“標簽（重新定義HTML元素）”，在“選擇器名稱”中選擇“a”，在“規(guī)則定義”中選擇“僅限該文檔”如圖所示。相關(guān)知識新建樣

9、式設(shè)置樣式 相關(guān)知識（2）在鼠標懸放超鏈接時改變鏈接顏色接著上面的操作繼續(xù)，新建CSS樣式，在“選擇器類型”中選擇“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”，在“選擇器名稱”中選擇“a：hover”，在“規(guī)則定義”中選擇“僅限該文檔”如圖所示。相關(guān)知識新建樣式 設(shè)置樣式 相關(guān)知識 5.利用用戶自定義樣式表制作圖標（1）設(shè)置列表項目格式的list選項組 打開一個帶有列表的網(wǎng)頁，在“樣式表”面板中單擊新建圖標，彈出“新建CSS規(guī)則”對話框，在“選擇器類型”中選擇“類（可應(yīng)用于任何HTML元素）”，在“選擇器名稱”中輸入“l(fā)ist”，在“規(guī)則定義”中選擇“僅限該文檔”。 單擊“確定”按鈕后，彈出“.list的C

10、SS規(guī)則定義”對話框，在選項“列表”中設(shè)置List-style-type為“upper-roman”，如圖所示。相關(guān)知識設(shè)置list選項組 相關(guān)知識（2）利用漂亮圖標編排列表項目 重新編輯.list的CSS規(guī)則。在“CSS樣式”面板中，選擇.list規(guī)則，單擊“編輯樣式”按鈕，彈出“.list的CSS規(guī)則定義”對話框，在“列表”項中，設(shè)置“List-style-type”為“none”，設(shè)置“List-style-image”為設(shè)置的圖片，如圖所示。 單擊“確定”按鈕后，網(wǎng)頁文檔就發(fā)生了編號，效果如圖所示。相關(guān)知識設(shè)置列表項目圖標 自定義項目圖標效果 相關(guān)知識 6.利用用戶自定義樣式表固定背景

11、圖像的位置（1）利用樣式表設(shè)置背景圖像打開一個網(wǎng)頁，新建CSS樣式，在“選擇器類型”中選擇“標簽（重新定義HTML元素）”，在“選擇器名稱”中選擇“body：hover”，在“規(guī)則定義”中選擇“僅限該文檔”，選擇“背景”選項，設(shè)置“Background-image”為需要的圖片即可。相關(guān)知識（2）在指定位置只顯示一張背景圖像 接著前面的操作，在“CSS樣式”面板中，選擇body規(guī)則，單擊“編輯樣式”按鈕，設(shè)置“Background-repeat”為“no-repeat”，設(shè)置“Background-position（X）”為“center”，設(shè)置“Background-position（Y）”

12、為“center”，如圖所示。在瀏覽器中預(yù)覽網(wǎng)頁效果，可以發(fā)現(xiàn)，背景圖像在指定位置只顯示一張不重復(fù)的圖像。相關(guān)知識Body的規(guī)則定義 相關(guān)知識（3）固定背景圖像，不讓它滾動 繼續(xù)前面的操作，在“CSS樣式”面板中，選擇body規(guī)則，單擊“編輯樣式”）按鈕，設(shè)置“Background-attachment”為“fixed”，在瀏覽器中預(yù)覽網(wǎng)頁效果，就會發(fā)現(xiàn)背景圖像不滾動了。任務(wù)引領(lǐng) “散文集” 網(wǎng)頁打開后，將顯示“散文集”界面。制作演示相關(guān)知識 1.運用保存素材的庫庫是一種用來存儲想要在整個網(wǎng)站上經(jīng)常重復(fù)使用或更新的頁面元素的方法，這些元素稱為庫項目，可以在庫中存儲各種各樣的頁面元素，如圖像、表

13、格、聲音和flash文件等。 使用庫，就不必頻繁地改動網(wǎng)站，可以通過改動庫更新所有采用庫的網(wǎng)頁，不用一個一個的修改網(wǎng)頁元素或者重新制作網(wǎng)頁。相關(guān)知識 2.運用保存在庫中的項目（1）利用保存在庫中的項目編輯網(wǎng)頁文檔 前面任務(wù)二中已經(jīng)詳細講述了庫項目的建立過程，這里就不詳細說明了。相關(guān)知識（2）修改登錄到庫中的項目 首先，選擇“窗口”“資源”菜單，打開“資源”面板，選擇面板左側(cè)的“庫”類別。單擊庫項目面板中的“l(fā)ogo”，這時庫項目的預(yù)覽出現(xiàn)在“資源”面板的頂部。雙擊庫項目或者單擊“資源”面板底部的“編輯”按鈕，這時就會打開一個標題為“l(fā)ogo.lbi”的編輯庫項目的窗口，如圖所示。相關(guān)知識 編輯

14、庫項目 相關(guān)知識對庫項目進行編輯，把logo圖片換成另外一張圖片，保存庫項目時會彈出“更新庫項目”對話框，如圖所示?！案聨祉椖俊睂υ捒蛑辛谐隽耸褂迷搸祉椖康乃形募梢詥螕簟案隆卑粹o更新使用該項目的所有文檔。更新完成后彈出“更新頁面”對話框，如圖所示。相關(guān)知識“更新庫項目”對話框 “更新頁對話框面” 相關(guān)知識 3.利用模板功能批量制作網(wǎng)頁 （1）制作模板文檔，設(shè)置可編輯區(qū)域 選擇“文件”“新建”菜單，選擇“空模板”類別下的“HTML模板”，如圖所示。相關(guān)知識新建一個空模板 相關(guān)知識選擇“文件”“保存菜單，保存模板，此時會彈出一個對話框，如圖所示。選好對應(yīng)的站點，最后命名，如圖所示。模板保

15、存后可以在站點文件夾的“Templates”子文件夾下找到剛才做好的模板，擴展名為.dwt。相關(guān)知識保存模板時彈出的對話框 保存模板 相關(guān)知識 在模板上插入一個3行1列的表格，表格的寬度設(shè)為860像素，并且居中。在第一行插入一個2行1列的嵌套表格，插入對應(yīng)的圖片“l(fā)ogo.jpg”和“menu.jpg”；在最后一行插入“bottom.jpg”。 相關(guān)知識編輯模板 相關(guān)知識最后，選中要插入可編輯區(qū)域的單元格，單擊“常用”快捷欄的“模板”按鈕，在彈出的菜單中選擇“可編輯區(qū)域”命令，如圖所示。相關(guān)知識 彈出“新建可編輯區(qū)域”對話框，在“名稱”文本框中輸入“content”，單擊“確定”按鈕即可，如圖所示。相關(guān)知識（2）利用已制作好的模板文檔新建網(wǎng)頁文檔 選擇“文件”“新建”菜單，彈出“新建文檔”對話框，如圖所示，單擊“創(chuàng)建”按鈕就可以了。相關(guān)知識“新建文檔”對話框 相關(guān)知識（3）修改模板文檔 打開“資源”面板，單擊“模板”按鈕，選中“index”模板，雙擊就可以修改模板頁面了，如圖所示。修改保存后，會彈出一個“更