Dreamweaver CS5網(wǎng)頁制作項目三

1、項目三 設(shè)置網(wǎng)頁內(nèi)容任務(wù)一任務(wù)一 網(wǎng)頁基本設(shè)置網(wǎng)頁基本設(shè)置任務(wù)二任務(wù)二 文本輸入與編輯文本輸入與編輯任務(wù)三任務(wù)三 應(yīng)用圖像應(yīng)用圖像任務(wù)四任務(wù)四 應(yīng)用動畫和多媒體應(yīng)用動畫和多媒體任務(wù)一 網(wǎng)頁基本設(shè)置任務(wù)說明任務(wù)說明新建網(wǎng)頁后，一般需要對頁面進行一些簡單的新建網(wǎng)頁后，一般需要對頁面進行一些簡單的設(shè)置，主要包括頭信息和頁面屬性，下面就來設(shè)置，主要包括頭信息和頁面屬性，下面就來學(xué)習(xí)這些知識。學(xué)習(xí)這些知識。預(yù)備知識一、設(shè)置文檔頭信息一、設(shè)置文檔頭信息頭信息包括網(wǎng)頁關(guān)鍵字、網(wǎng)頁說明等。在使用頭信息包括網(wǎng)頁關(guān)鍵字、網(wǎng)頁說明等。在使用Google、Baidu、Yahoo等搜索引擎搜索網(wǎng)頁等搜索引擎搜索網(wǎng)頁時，

2、不是檢索網(wǎng)頁的所有內(nèi)容，而是只檢索網(wǎng)時，不是檢索網(wǎng)頁的所有內(nèi)容，而是只檢索網(wǎng)頁的關(guān)鍵字。如果希望自己的網(wǎng)頁能夠被搜索頁的關(guān)鍵字。如果希望自己的網(wǎng)頁能夠被搜索引擎檢索到，最好把關(guān)鍵字設(shè)置為人們經(jīng)常使引擎檢索到，最好把關(guān)鍵字設(shè)置為人們經(jīng)常使用的詞語。用的詞語。二、設(shè)置文檔頁面屬性通過設(shè)置頁面屬性，可以對網(wǎng)頁的外觀、標(biāo)題及通過設(shè)置頁面屬性，可以對網(wǎng)頁的外觀、標(biāo)題及超鏈接等屬性進行設(shè)置。超鏈接等屬性進行設(shè)置。要設(shè)置頁面屬性，可在不選擇網(wǎng)頁文檔中任何對要設(shè)置頁面屬性，可在不選擇網(wǎng)頁文檔中任何對象的前提下，單擊象的前提下，單擊“屬性檢查器屬性檢查器”上的上的“頁面屬頁面屬性性”按鈕，或者選擇按鈕，或者選擇

3、“修改修改”菜單下的菜單下的“頁面屬頁面屬性性”命令，或按命令，或按【Ctrl+J】組合鍵，打開組合鍵，打開“頁面頁面屬性屬性”對話框。對話框。任務(wù)實施為“歐妮雅”網(wǎng)站主頁設(shè)置基本信息在學(xué)習(xí)了頭信息和頁面屬性的設(shè)置方法后，下面在學(xué)習(xí)了頭信息和頁面屬性的設(shè)置方法后，下面通過為通過為“歐妮雅歐妮雅”網(wǎng)站主頁設(shè)置基本信息，來進網(wǎng)站主頁設(shè)置基本信息，來進一步鞏固前面所學(xué)（具體操作見視頻一步鞏固前面所學(xué)（具體操作見視頻3-1）。）。任務(wù)二 文本輸入與編輯任務(wù)說明任務(wù)說明文本是網(wǎng)頁最基本的組成元素，它能將各種信息文本是網(wǎng)頁最基本的組成元素，它能將各種信息有效地傳達給瀏覽者，通常內(nèi)容豐富的網(wǎng)頁都有有效地傳達

4、給瀏覽者，通常內(nèi)容豐富的網(wǎng)頁都有大量的文本。在大量的文本。在Dreamweaver中可以直接輸入文本，中可以直接輸入文本，也可以從其他文檔中復(fù)制文本，還可以插入水平也可以從其他文檔中復(fù)制文本，還可以插入水平線和特殊字符等。下面就來學(xué)習(xí)在網(wǎng)頁中輸入與線和特殊字符等。下面就來學(xué)習(xí)在網(wǎng)頁中輸入與編輯文本的相關(guān)知識。編輯文本的相關(guān)知識。預(yù)備知識一、輸入文本一、輸入文本在在Dreamweaver中輸入文本的方法非常簡單，只中輸入文本的方法非常簡單，只要將插入點定位在網(wǎng)頁的某個位置（如某個表格要將插入點定位在網(wǎng)頁的某個位置（如某個表格單元格內(nèi)），然后選擇輸入法輸入文本就可以了。單元格內(nèi)），然后選擇輸入法輸

5、入文本就可以了。對于大量的外部文本，可利用剪貼板將其拷貝至對于大量的外部文本，可利用剪貼板將其拷貝至網(wǎng)頁文檔中。網(wǎng)頁文檔中。二、設(shè)置文本格式文本屬性檢查器包括文本屬性檢查器包括“HTML”和和“CSS”兩種類型，兩種類型，用戶可使用這兩種類型中的任一種來設(shè)置文本格用戶可使用這兩種類型中的任一種來設(shè)置文本格式。應(yīng)用式。應(yīng)用HTML類型時，類型時，Dreamweaver會將文本會將文本格式屬性添加到頁面正文的格式屬性添加到頁面正文的HTML代碼中。應(yīng)用代碼中。應(yīng)用CSS類型時，類型時，Dreamweaver會將屬性寫入文檔頭或會將屬性寫入文檔頭或單獨的樣式表中。單獨的樣式表中。1應(yīng)用HTML類型如

6、果屬性檢查器沒有打開，請選擇如果屬性檢查器沒有打開，請選擇“窗口窗口”“屬性屬性”菜單將其打開。選擇要設(shè)置格式的文本或?qū)⒉迦氩藛螌⑵浯蜷_。選擇要設(shè)置格式的文本或?qū)⒉迦朦c置于要設(shè)置屬性的段落中，屬性檢查器中默認(rèn)點置于要設(shè)置屬性的段落中，屬性檢查器中默認(rèn)將顯示文本的將顯示文本的HTML類型屬性。類型屬性。2應(yīng)用CSS類型單擊屬性檢查器左側(cè)的單擊屬性檢查器左側(cè)的CSS按鈕按鈕 ，可顯示文，可顯示文本的本的CSS類型屬性。類型屬性。三、插入水平線和特殊字符1插入水平線插入水平線定位插入點后，選擇定位插入點后，選擇“插入插入”“HTML”“水水平線平線”菜單，即可插入水平線。此外，單擊菜單，即可插入水平

7、線。此外，單擊“插插入入”面板面板“常用常用”類別中的類別中的“水平線水平線”按鈕按鈕 ，同樣可插入水平線。同樣可插入水平線。2 2插入特殊字符插入特殊字符如要插入版權(quán)符號，可在定位插入點后，選擇如要插入版權(quán)符號，可在定位插入點后，選擇“插入插入”“HTML”“特殊字符特殊字符”“版權(quán)版權(quán)”菜單，插入版權(quán)符號。菜單，插入版權(quán)符號。如果在如果在“特殊字符特殊字符”下級菜單中沒有找到需要的下級菜單中沒有找到需要的字符，可以通過選擇該菜單中最下面的字符，可以通過選擇該菜單中最下面的“其他字其他字符符”命令，打開命令，打開“插入其他字符插入其他字符”對話框。對話框。任務(wù)實施一、為一、為“歐妮雅歐妮雅”

8、網(wǎng)站主頁設(shè)置文本內(nèi)容網(wǎng)站主頁設(shè)置文本內(nèi)容下面通過為下面通過為“歐妮雅歐妮雅”網(wǎng)站主頁設(shè)置文本內(nèi)容，網(wǎng)站主頁設(shè)置文本內(nèi)容，來進一步鞏固和練習(xí)在網(wǎng)頁中輸入和設(shè)置文本的來進一步鞏固和練習(xí)在網(wǎng)頁中輸入和設(shè)置文本的方法方法（具體操作見視頻（具體操作見視頻3-2-1）。二、為二、為“歐妮雅歐妮雅”網(wǎng)站子頁設(shè)置文本內(nèi)容網(wǎng)站子頁設(shè)置文本內(nèi)容下面通過為下面通過為“歐妮雅歐妮雅”網(wǎng)站子頁（網(wǎng)站子頁（sub1.html）設(shè)）設(shè)置文本內(nèi)容，來進一步鞏固在網(wǎng)頁中輸入和設(shè)置置文本內(nèi)容，來進一步鞏固在網(wǎng)頁中輸入和設(shè)置文本的方法文本的方法（具體操作見視頻（具體操作見視頻3-2-2）。任務(wù)三 應(yīng)用圖像任務(wù)說明任務(wù)說明只有文字的

9、網(wǎng)頁會顯得非常單調(diào)，而且容易引起只有文字的網(wǎng)頁會顯得非常單調(diào)，而且容易引起視覺疲勞。為增加網(wǎng)頁的可看性，我們可以適當(dāng)視覺疲勞。為增加網(wǎng)頁的可看性，我們可以適當(dāng)?shù)卦诰W(wǎng)頁中添加一些圖像。下面就來學(xué)習(xí)圖像在地在網(wǎng)頁中添加一些圖像。下面就來學(xué)習(xí)圖像在網(wǎng)頁中的應(yīng)用。網(wǎng)頁中的應(yīng)用。預(yù)備知識一、插入與編輯圖像一、插入與編輯圖像在網(wǎng)頁中插入圖像時，最好能保證網(wǎng)頁和要插在網(wǎng)頁中插入圖像時，最好能保證網(wǎng)頁和要插入的圖像均位于當(dāng)前站點中，否則很容易出現(xiàn)入的圖像均位于當(dāng)前站點中，否則很容易出現(xiàn)網(wǎng)頁發(fā)布后看不到圖像的情況。網(wǎng)頁發(fā)布后看不到圖像的情況。二、制作鼠標(biāo)經(jīng)過圖像要制作鼠標(biāo)經(jīng)過圖像，需要用到兩張大小相同，而要制作

10、鼠標(biāo)經(jīng)過圖像，需要用到兩張大小相同，而內(nèi)容不同的圖像。其中一張作為原始圖像，在頁面內(nèi)容不同的圖像。其中一張作為原始圖像，在頁面打開的時候就顯示；另一張則作為鼠標(biāo)經(jīng)過圖像，打開的時候就顯示；另一張則作為鼠標(biāo)經(jīng)過圖像，在鼠標(biāo)滑過的時候替換原始圖像顯示出來。下面我在鼠標(biāo)滑過的時候替換原始圖像顯示出來。下面我們來看鼠標(biāo)經(jīng)過圖像的制作方法。們來看鼠標(biāo)經(jīng)過圖像的制作方法。任務(wù)實施一、為一、為“歐妮雅歐妮雅”網(wǎng)站主頁設(shè)置圖像內(nèi)容網(wǎng)站主頁設(shè)置圖像內(nèi)容下面通過為下面通過為“歐妮雅歐妮雅”網(wǎng)站主頁設(shè)置圖像內(nèi)容，網(wǎng)站主頁設(shè)置圖像內(nèi)容，來進一步鞏固和練習(xí)在網(wǎng)頁中插入與編輯圖像的來進一步鞏固和練習(xí)在網(wǎng)頁中插入與編輯圖像

11、的操作操作（具體操作見視頻（具體操作見視頻3-3-1）。二、為“歐妮雅”網(wǎng)站子頁設(shè)置圖像內(nèi)容下面通過為下面通過為“歐妮雅歐妮雅”網(wǎng)站子頁設(shè)置圖像內(nèi)容，來網(wǎng)站子頁設(shè)置圖像內(nèi)容，來進一步鞏固和練習(xí)在網(wǎng)頁中插入與編輯圖像的方法進一步鞏固和練習(xí)在網(wǎng)頁中插入與編輯圖像的方法（具體操作見視頻（具體操作見視頻3-3-2）。）。任務(wù)四 應(yīng)用動畫和多媒體任務(wù)說明任務(wù)說明通過前面的學(xué)習(xí)，相信讀者已經(jīng)能夠制作出簡單通過前面的學(xué)習(xí)，相信讀者已經(jīng)能夠制作出簡單的網(wǎng)頁；不過細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)，前面介的網(wǎng)頁；不過細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)，前面介紹的網(wǎng)頁中只有一些靜止的圖片和文字，顯得過紹的網(wǎng)頁中只有一些靜止的圖片和文字，顯得過于單調(diào)。下面就來學(xué)習(xí)如何為網(wǎng)頁添加動畫和多于單調(diào)。下面就來學(xué)習(xí)如何為網(wǎng)頁添加動畫和多媒體元素，以使網(wǎng)頁更加豐富多彩。媒體元素，以使網(wǎng)頁更加豐富多彩。預(yù)備知識一、插入一、插入Flash動畫動畫學(xué)過了圖像的插入，學(xué)過了圖像的插入，F(xiàn)lash動畫的插入就是小菜一動畫的插入就是小菜一碟了，下面我們來看具體操作。碟了，下面我們來看具體操作。二、插入音頻文件音樂不僅能陶冶人的情操，也能給人美的享受，音樂不僅能陶冶人的情操，也能給人美的享受，