網頁設計與制作-(6)

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

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

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

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

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

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

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

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

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

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

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

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

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

14、庫項目 相關知識對庫項目進行編輯，把logo圖片換成另外一張圖片，保存庫項目時會彈出“更新庫項目”對話框，如圖所示。“更新庫項目”對話框中列出了使用該庫項目的所有文件，可以單擊“更新”按鈕更新使用該項目的所有文檔。更新完成后彈出“更新頁面”對話框，如圖所示。相關知識“更新庫項目”對話框 “更新頁對話框面” 相關知識 3.利用模板功能批量制作網頁 （1）制作模板文檔，設置可編輯區(qū)域 選擇“文件”“新建”菜單，選擇“空模板”類別下的“HTML模板”，如圖所示。相關知識新建一個空模板 相關知識選擇“文件”“保存菜單，保存模板，此時會彈出一個對話框，如圖所示。選好對應的站點，最后命名，如圖所示。模板保

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