《網(wǎng)頁設計與制作實例教程》第4章(張青)

清華大學出版社《網(wǎng)頁設計與制作實例教程》第4章高等學校計算機應用規(guī)劃教材

2024/9/18主編方其桂制作網(wǎng)頁內(nèi)容內(nèi)容提要第2章

制作網(wǎng)頁內(nèi)容文本、符號、圖像、聲音、動畫及視頻等是網(wǎng)頁制作中的重要元素，網(wǎng)頁通過各種元素向瀏覽者展示信息，起到宣傳效果。在網(wǎng)頁上插入各種類型的素材是制作網(wǎng)頁的關(guān)鍵，也是難點所在，根據(jù)網(wǎng)站主題、內(nèi)容選擇合適素材，進行適當?shù)募庸?，制作網(wǎng)頁，取得滿意的表達效果。本章包括兩個部分，首先通過實例，介紹在網(wǎng)頁中輸入文本、符號，插入圖像、聲音、動畫及視頻等，掌握網(wǎng)頁制作的基本方法；第二部分通過模板的制作、使用與管理，掌握快速制作、更新統(tǒng)一風格網(wǎng)頁的方法。教學目錄網(wǎng)頁中輸入文本符號網(wǎng)頁中插入圖形圖像網(wǎng)頁中插入多媒體素材010203第4章

制作網(wǎng)頁內(nèi)容04使用模板快速制作網(wǎng)頁4.1網(wǎng)頁中輸入文本符號教學內(nèi)容4.1.1輸入文字內(nèi)容

第2章

制作網(wǎng)頁內(nèi)容在Dreamweaver輸入文字的方式與Word相同，可以直接輸入，也可以使用復制、粘貼的方法，在其他應用程序中選擇文字，復制到網(wǎng)頁中。實例1計算機的發(fā)展計算機的發(fā)展經(jīng)歷了四個階段，制作網(wǎng)頁時，要求標題單獨一行，其余每個階段獨立成段，效果如圖所示。4.1網(wǎng)頁中輸入文本符號教學內(nèi)容4.1.2

編輯網(wǎng)頁內(nèi)容第2章

制作網(wǎng)頁內(nèi)容在網(wǎng)頁中輸入的文本，如果出現(xiàn)錯誤可以進行編輯，只需在Dreamweaver中打開網(wǎng)頁，可以對網(wǎng)頁上的文本進行刪除、修改、插入等操作。實例2游子吟在輸入網(wǎng)頁文本時，因為疏忽可能導致文本錯誤、或者少輸入了文本，效果如圖，網(wǎng)頁在瀏覽器中瀏覽時不能修改，必修使用網(wǎng)頁編輯軟件打開，方能修改。4.1網(wǎng)頁中輸入文本符號教學內(nèi)容4.1.3設置文本格式第2章

制作網(wǎng)頁內(nèi)容文本是網(wǎng)頁頁面信息的主要載體，如何設計字體、字號，字體的顏色等，直接影響網(wǎng)頁文字的呈現(xiàn)效果，在一定程度上能影響瀏覽者對于網(wǎng)頁信息的關(guān)注和閱讀興趣。

實例3朱自清《春》設置網(wǎng)頁文本的字體、字號及字的顏色等格式，可以使用屬性面板，也可以通過HTML語言進行設置，設置效果如圖所示。4.1網(wǎng)頁中輸入文本符號教學內(nèi)容4.1.4設置段落格式第2章

制作網(wǎng)頁內(nèi)容網(wǎng)頁中的文章、段落分明，有層次感，才能方便瀏覽者閱讀。設置段落格式，可以使用菜單命令，也可以采用HTML語言進行設置。實例4打印機的分類在Dreamweaver中段落對齊方式有“左對齊”、“右對齊”、“居中對齊”及“兩段對齊”，如圖所示，標題“打印機的分類”是設置的效果是居中對齊。4.1網(wǎng)頁中輸入文本符號教學內(nèi)容4.1.5插入列表第2章

制作網(wǎng)頁內(nèi)容列表是網(wǎng)頁中的重要組成元素之一，分為有序列表與無序列表，無序列表如項目符號，有序列表如編號，在網(wǎng)頁制作過程中，通過使用列表標記，可以得到段落清晰，層次清楚的網(wǎng)頁。實例5校園新聞

當給定的內(nèi)容，沒有明顯的順序關(guān)系時，可以使用無序列表，如圖所示，每項的前面是項目符號，這里使用的是圓點，也可以使用其他符號。4.1網(wǎng)頁中輸入文本符號教學內(nèi)容4.1.6插入數(shù)據(jù)表格

第2章

制作網(wǎng)頁內(nèi)容表格是網(wǎng)頁中的重要組成元素，在網(wǎng)頁中發(fā)揮著重要作用。掌握與表格相關(guān)的操作，可以方便使用表格，簡潔、清晰地顯示各種數(shù)據(jù)信息。實例62015年部分國產(chǎn)上映電影2015年國產(chǎn)上映影片很多，使用表格可方便閱讀，如圖所示的6部電影名稱、評分、上映時間等一目了然。4.2

網(wǎng)頁中插入圖片教學內(nèi)容4.2.1插入圖片

第2章

制作網(wǎng)頁內(nèi)容插入圖片，首先要將圖片放入網(wǎng)頁所在的文件，所有的圖片文件最好單獨存放于一個文件夾中，一般文件夾命名為images。實例7中國水墨動畫網(wǎng)頁上的文字，配以合適的圖片，可以起到烘托主題的作用，使表達意圖更加明確，如圖所示。4.2

網(wǎng)頁中插入圖片教學內(nèi)容4.2.2設置圖像對齊方式第2章

制作網(wǎng)頁內(nèi)容網(wǎng)頁中的圖片，如同文本一樣可以設置對齊方式，而使用表格放置圖片，可以多幅圖像看起來更整齊。實例8歷屆奧運會會標欣賞每屆奧運會都有會標，將會標的圖片設置為相同大小，使用表格存放，可以使圖片更整齊、美觀，效果如圖所示。4.2

網(wǎng)頁中插入圖片教學內(nèi)容4.2.3設置圖像屬性第2章

制作網(wǎng)頁內(nèi)容有時在網(wǎng)頁中瀏覽圖像時，當鼠標經(jīng)過該圖像時，該圖像就變成了另一幅圖像，表現(xiàn)為類擬于Flash動畫的效果，借動感增加網(wǎng)頁的吸引力。實例9地震知識在介紹地震知識時，配上圖片，可使宣傳效果更好，原先網(wǎng)頁中是地震前的照片，鼠標移上去后即變成地震后的照片，效果如圖所示。

4.2

網(wǎng)頁中插入圖片教學內(nèi)容4.2.4添加背景圖像第2章

制作網(wǎng)頁內(nèi)容給網(wǎng)頁添加背景可以用來烘托氣氛，網(wǎng)頁的背景可以是單種顏色，也可以是圖案或都是圖片。實例10

再別康橋徐志摩先生的《再別康橋》，配上優(yōu)美的風景圖片，更加賞心閱目，如圖所示，背景圖片的選擇要注意，不能影響文字的閱讀。4.3網(wǎng)頁中插入多媒體教學內(nèi)容4.3.1插入動畫第2章

制作網(wǎng)頁內(nèi)容在網(wǎng)頁中插入的Flash動畫，包括Flash影片、按鈕、導航、以及透明的Flash動畫等等。實例11校園風景使用Flash制作的電子相冊，比圖片更具感染力，如圖所示，將學校的圖片制作成連續(xù)播放的相冊。

4.3網(wǎng)頁中插入多媒體教學內(nèi)容4.3.2插入視頻

第2章

制作網(wǎng)頁內(nèi)容FLV是當前視頻文件的主流格式，其文件擴展名是“.flv”，F(xiàn)LV視頻極小，加載的速度非?？?，目前網(wǎng)站提供的視頻文件大多使用了FLV格式，用戶只要能在網(wǎng)頁上看到Flash就能看到FLV視頻，無需安裝其他插件。

實例12視頻暫留現(xiàn)象通過鳥籠實驗，驗證視覺暫留現(xiàn)象，在網(wǎng)頁上配以實驗器材與實驗過程的視頻，可使網(wǎng)頁的宣傳效果更好，如圖所示。

4.3網(wǎng)頁中插入多媒體教學內(nèi)容4.3.3插入音樂第2章

制作網(wǎng)頁內(nèi)容

在瀏覽網(wǎng)頁時，有時可以聽到音樂，給人以美的享受，網(wǎng)上的音樂文件主要有以下幾種格式有mid、wav、mp3等幾種，其中MP3格式的聲音文件格式的品質(zhì)最好。實例13醉花陰李清照的“詩中有畫，畫中有詩”，往往一句詩就是一個鏡頭，就蘊含一片深情，只有反復聽、聯(lián)想、品味，才能領略此中畫意詩情，感受其意境美，如圖所示

4.3網(wǎng)頁中插入多媒體教學內(nèi)容4.3.3插入音樂第2章

制作網(wǎng)頁內(nèi)容

在瀏覽網(wǎng)頁時，有時可以聽到音樂，給人以美的享受，網(wǎng)上的音樂文件主要有以下幾種格式有mid、wav、mp3等幾種，其中MP3格式的聲音文件格式的品質(zhì)最好。實例14大自然的語言大自然語言是初中的一篇說明文，打開網(wǎng)頁，除閱讀文章外，還配有原文朗讀，可使效果更好，如圖所示。4.4使用模板快速制作網(wǎng)頁

教學內(nèi)容4.4.1創(chuàng)建模版文件第2章

制作網(wǎng)頁內(nèi)容創(chuàng)建模板文件，可以新建文件的方式，也可以對已有的文件修改另存為模板。實例15

八（1）班任課教師

八（1）班的網(wǎng)站，如圖所示，分成五個方面，可以使用模板統(tǒng)一格式。4.4使用模板快速制作網(wǎng)頁

教學內(nèi)容4.4.1創(chuàng)建模版文件第2章

制作網(wǎng)頁內(nèi)容創(chuàng)建模板文件，可以新建文件的方式，也可以對已有的文件修改另存為模板。實例16青年志愿者信息卡青年志愿者信息，如圖所示為制作所有志愿者信息卡，可以使用模板統(tǒng)一格式。4.4使用模板快速制作網(wǎng)頁

教學內(nèi)容4.4.2使用模版制作網(wǎng)頁第2章

制作網(wǎng)頁內(nèi)容可以使用模板建立網(wǎng)頁，建立好的網(wǎng)頁，可以選擇仍與模板保持聯(lián)系，或從模板中分離，如果分離，則網(wǎng)頁成為普通網(wǎng)頁，不能再通過模板文件更新。實例17班級介紹使用模版文件，制作班級介紹網(wǎng)頁，如圖4-72所示，只需要標題處輸入文本“班級介紹”，以及在正文處輸入班級介紹的文字內(nèi)容即可。4.4使用模板快速制作網(wǎng)頁

教學內(nèi)容4.4.3管理模版文件第2章

制作網(wǎng)頁內(nèi)容對建立好的模版文件，可以進行