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

1、項目三 設置網(wǎng)頁內(nèi)容任務一任務一 網(wǎng)頁基本設置網(wǎng)頁基本設置任務二任務二 文本輸入與編輯文本輸入與編輯任務三任務三 應用圖像應用圖像任務四任務四 應用動畫和多媒體應用動畫和多媒體任務一 網(wǎng)頁基本設置任務說明任務說明新建網(wǎng)頁后，一般需要對頁面進行一些簡單的新建網(wǎng)頁后，一般需要對頁面進行一些簡單的設置，主要包括頭信息和頁面屬性，下面就來設置，主要包括頭信息和頁面屬性，下面就來學習這些知識。學習這些知識。預備知識一、設置文檔頭信息一、設置文檔頭信息頭信息包括網(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)鍵字設置為人們經(jīng)常使引擎檢索到，最好把關(guān)鍵字設置為人們經(jīng)常使用的詞語。用的詞語。二、設置文檔頁面屬性通過設置頁面屬性，可以對網(wǎng)頁的外觀、標題及通過設置頁面屬性，可以對網(wǎng)頁的外觀、標題及超鏈接等屬性進行設置。超鏈接等屬性進行設置。要設置頁面屬性，可在不選擇網(wǎng)頁文檔中任何對要設置頁面屬性，可在不選擇網(wǎng)頁文檔中任何對象的前提下，單擊象的前提下，單擊“屬性檢查器屬性檢查器”上的上的“頁面屬頁面屬性性”按鈕，或者選擇按鈕，或者選擇

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

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

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

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

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

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

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

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

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