網(wǎng)頁制作案例教程-清華大學(xué)出版社-第4章-網(wǎng)頁基本元素設(shè)計(jì)

1、 網(wǎng)頁制作案例教程 毋建軍 鄭寶昆 郭銳 編著 清華大學(xué)出版社第4章 網(wǎng)頁基本元素設(shè)計(jì)本章學(xué)習(xí)目標(biāo)（知識(shí)要點(diǎn)）n網(wǎng)頁設(shè)計(jì)的基本原則n網(wǎng)頁設(shè)計(jì)的基本流程n網(wǎng)頁版式及色彩設(shè)計(jì)n插入網(wǎng)頁頭部信息n添加文本n添加圖像n添加超鏈接n插入多媒體元素 本章學(xué)習(xí)導(dǎo)航n網(wǎng)頁設(shè)計(jì)的基本原則和流程是讀者創(chuàng)建突出主題、美觀實(shí)用網(wǎng)頁的關(guān)鍵，本章主要網(wǎng)頁設(shè)計(jì)的基本原則和流程，以及添加網(wǎng)頁元素。n本章內(nèi)容在全書知識(shí)結(jié)構(gòu)中所處位置如圖所示 基礎(chǔ)篇HTML篇CSS篇JavaScript篇提高篇網(wǎng) 頁 設(shè) 計(jì) 與 開 發(fā) 流 程（AscentSys醫(yī)藥商務(wù)系統(tǒng)）網(wǎng)頁制作基礎(chǔ)HTML基礎(chǔ)網(wǎng)頁基本元素設(shè)計(jì)網(wǎng)頁布局規(guī)劃設(shè)計(jì)交互式網(wǎng)頁表

2、單的設(shè)計(jì)與使用利用模板和庫創(chuàng)建網(wǎng)頁CSS樣式表使用CSS布局規(guī)劃網(wǎng)頁JavaScript網(wǎng)頁應(yīng)用Javascript概述網(wǎng)頁中常見Flash制作Web服務(wù)器創(chuàng)建網(wǎng)站發(fā)布、測試和維護(hù)4.1網(wǎng)頁設(shè)計(jì)的基本原則1 1）一致性）一致性2）反差效果3）重復(fù)原則4）排列原則5）分類原則6）分離性原則4.2網(wǎng)頁設(shè)計(jì)的基本流程網(wǎng)頁設(shè)計(jì)的基本流程4.2.1 設(shè)計(jì)主題1）主題不能過于分散，主題要小而精。因?yàn)榫W(wǎng)頁主題越集中，一般情況下網(wǎng)頁所有者在這方面投入的精力會(huì)更多，因此所提供信息的質(zhì)量也會(huì)越高。2）主題要明確、突出，實(shí)現(xiàn)功能確定3）主題應(yīng)涵蓋網(wǎng)頁的核心內(nèi)容4）主題的設(shè)計(jì)要兼顧用戶的注意力及搜索引擎檢索的需要n4

3、.2.2 總體結(jié)構(gòu)設(shè)計(jì)n1）頁面設(shè)計(jì)中，既可以由外到內(nèi)進(jìn)行設(shè)計(jì)（用戶瀏覽通常是由外到內(nèi)的順序），也可以由內(nèi)到外進(jìn)行設(shè)計(jì)，但設(shè)計(jì)中最好不要沿用先設(shè)計(jì)首頁，再設(shè)計(jì)二級(jí)及三級(jí)頁面的順序，可以采用由二級(jí)頁面開始，向外（二級(jí)頁面到首頁）向內(nèi)（二級(jí)頁面到三級(jí)子頁）的順序方式進(jìn)行設(shè)計(jì)，向外是因?yàn)槭醉搩?nèi)容通常是所有二級(jí)頁面內(nèi)容的濃縮提煉和網(wǎng)站的目標(biāo)所決定。向內(nèi)是因?yàn)橄惹暗牟襟E已經(jīng)明確了網(wǎng)站的結(jié)構(gòu)，這時(shí)，由外向內(nèi)的設(shè)計(jì)符合思維方式。n2）盡量按照功能結(jié)構(gòu)設(shè)計(jì)每個(gè)頁面的結(jié)構(gòu)。n3）頁面的設(shè)計(jì)是一個(gè)迭代的過程，先粗略框架設(shè)計(jì)后，再逐步細(xì)化、逐步展現(xiàn)，是以用戶的目標(biāo)為中心的流動(dòng)的過程。n4.2.3 網(wǎng)頁布局設(shè)計(jì)n網(wǎng)頁

4、的布局是指網(wǎng)頁首頁的結(jié)構(gòu)形式和其他網(wǎng)頁的結(jié)構(gòu)形式，網(wǎng)頁布局是網(wǎng)頁設(shè)計(jì)和制作的基礎(chǔ)，只有合理的進(jìn)行網(wǎng)頁布局，才能制作出完美的網(wǎng)頁。為了達(dá)到統(tǒng)一、漂亮的視覺效果，網(wǎng)站中的所有網(wǎng)頁都要圍繞首頁布局進(jìn)行設(shè)計(jì)的。n1）頁面尺寸n由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁面范圍 變得越來越小。一般分辨率在800 x600的情況下，頁面的顯示尺寸為：780 x428個(gè)象素；分辨率在640 x480的情況下，頁面的顯示尺寸 為:620 x 311個(gè)象素；分辨率在1024 x 768的情況下，頁面的顯示尺寸為：1007x600。

5、從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。n2）整體造型n你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔 和，團(tuán)結(jié)，溫暖，安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形 為頁面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁制作多數(shù)是接合多個(gè)圖 形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可

6、能占的多一些。n3）頁頭n頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁頭是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。n4）文本n文本在頁面中出現(xiàn)都數(shù)以行或者塊（段落）出現(xiàn)，它們的擺放位置決定者整個(gè)頁面布局的可視性。在過去因?yàn)轫撁嬷谱骷夹g(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。n5）頁腳：n頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。你

7、能看到，許多制作信息都是放置在頁腳的。n6）圖片 n圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。n7）多媒體n除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也將變得更重要。n（2）網(wǎng)頁布局的方法 n1）紙上布局法 n許多網(wǎng)頁制作者不喜歡先畫出頁面布局的草圖，而是直接在網(wǎng)頁設(shè)計(jì)器里邊設(shè)計(jì)布局邊加內(nèi)容。這種不打草稿的方法不能讓你設(shè)計(jì)出優(yōu)秀的網(wǎng)頁來。所以在開始制作網(wǎng)頁時(shí)，要先在紙上畫出你頁面的布局草圖來。n2）軟件布局法 n如果你不喜歡用紙來畫出你的布局

8、意圖，那么你還可以利用軟件來完成這些工作。這個(gè)軟件就是Photoshop。Photoshop所具有的對 圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁布局上更顯得心應(yīng)手。不像用紙來設(shè)計(jì)布局，利用Photoshop可以方便的使用顏色，使用圖形，并且可以利用層的功能設(shè)計(jì)出 用紙張無法實(shí)現(xiàn)的布局意念。n（3）網(wǎng)頁布局的技術(shù)n1）層疊樣式表的應(yīng)用 n在新的HTML4.0標(biāo)準(zhǔn)中，CSS（層疊樣式表）被提出來，它能完全精確的定位文本和圖片。CSS對于初學(xué)者來說顯得有點(diǎn)復(fù)雜，但它的確是 一個(gè)好的布局方法。你曾經(jīng)無法實(shí)現(xiàn)的想法利用CSS都能實(shí)現(xiàn)。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。你可以在網(wǎng)上找到許多關(guān)于CS

9、S 的介紹和使用方法。n2）表格布局n表格布局好像已經(jīng)成為一個(gè)標(biāo)準(zhǔn)，隨便瀏覽一個(gè)站點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔(dān)心不同對 象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點(diǎn)是，當(dāng)你用了過多表格時(shí)，頁面下載速度受到影響。對于表格布局，你可以隨便找一個(gè)站點(diǎn)的首頁，然后保存為HTML文件，利用網(wǎng)頁編輯工具打開它（要所見即所得的軟件），你會(huì)看到這個(gè)頁面是如何利用表格的。n3）框架布局n不知道什么原故，框架結(jié)構(gòu)的頁面開始被許多人不喜歡，可能是因?yàn)樗募嫒菪浴５珡牟季稚峡紤]，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。它如同表格布局一樣，

10、把不同對象放置到不同頁面加以處理，因?yàn)榭蚣芸梢匀∠吙颍砸话銇碚f不影響整體美觀。n4.2.4網(wǎng)頁素材收集n4.2.5創(chuàng)建網(wǎng)頁n選擇“文件”|“新建”菜單命令，打開“新建文檔”對話框，在“分類”欄中選擇“空白頁”選項(xiàng)，在“頁面類型”欄中選擇“HTML”選項(xiàng)，單擊“創(chuàng)建”按鈕，如圖4-2-2所示，就可以設(shè)計(jì)網(wǎng)頁了。 圖4-2-2 新建文檔對話框圖 4.3 網(wǎng)頁版式及色彩設(shè)計(jì)n4.3.1 網(wǎng)頁風(fēng)格定位n（1）顏色風(fēng)格n顏色是沖擊人的視覺第一要素，是影響一個(gè)網(wǎng)站給人風(fēng)格感受的重要因素。所以在配色選擇上要注意網(wǎng)站所想表現(xiàn)的風(fēng)格概念，想給予人們什么樣的心情，選擇適合的顏色。n（2）版式風(fēng)格n 版式通常

11、有左右、上下、居中等幾個(gè)主要形式，各適合不同類型、不同用戶群的網(wǎng)站。n（3）內(nèi)容結(jié)構(gòu)風(fēng)格n 一個(gè)網(wǎng)站的風(fēng)格定位，主要依據(jù)就是這個(gè)網(wǎng)站的內(nèi)容，所以內(nèi)容結(jié)構(gòu)是控制網(wǎng)站風(fēng)格方向的根基，是風(fēng)格個(gè)性化的主導(dǎo)因素。n（4）語言風(fēng)格n 世上的語言種類繁多，不同國家的網(wǎng)站有不同的主體語言，但在同一個(gè)網(wǎng)站上，不同的語言字符對網(wǎng)站的影響亦不盡相同。如一個(gè)網(wǎng)站的中英文版本，網(wǎng)站風(fēng)格適宜英文版但就不一定適宜中文版。英文版字符較為精簡，適宜做小巧精致類型的網(wǎng)站，中文字符雅致繁復(fù)，較適宜做端莊嚴(yán)肅類型的網(wǎng)站。n4.3.2 網(wǎng)頁版式選擇n1.“國”字形布局圖4-3-1“國”字形布局n2.“匡”字形布局圖4-3-2 “匡”字

12、形布局 n3.“三”字形布局圖4-3-3“三”字形布局n4.“川”字形布局圖4-3-4 “川”字形布局n5.海報(bào)型布局圖4-3-5海報(bào)型布局n6.Flash布局圖4-3-6 Flash布局n7.標(biāo)題文本型布局圖4-3-7 標(biāo)題文本型布局n8.框架型布局圖4-3-8框架型布局n9.變化型布局圖4-3-9變化型布局n4.3.3網(wǎng)頁色彩搭配n網(wǎng)頁色彩搭配的原理 n1）色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。 n2）色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對你的印象強(qiáng)烈。n3）色彩的合適性。就是說色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。 n4）色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同

13、的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。n網(wǎng)頁配色忌諱： n1）不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。n2）背景和前文的對比盡量要大，(盡量不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。n背景與字體的搭配經(jīng)驗(yàn) nBGCOLOR=“f1fafa”/做正文的背景色好，淡雅 nBGCOLOR=“E8FFE8” /做標(biāo)題的背景色好，與上面的顏色搭配很協(xié)調(diào)n這兩種顏色可以配黑字或FONT COLOR=“800080” nbgcolor=“E8E8FF”/做正文的背景色好，字體配黑色較好 nbgcolor=“8080C0”/上配黃色白色字體較好 n

14、bgcolor=“E8D098” /上搭配淺藍(lán)色或藍(lán)色字體較好nbgcolor=“EFEFDA” /上搭配淺藍(lán)色或紅色字體較好 nbgcolor=“F2F1D7”/配黑字素雅,紅字醒目 nbgcolor=“336699” /配白字做標(biāo)題較好 nbgcolor=“6699CC”和bgcolor=“479AC7”和bgcolor=“66CCCC”和bgcolor=“00B271”和bgcolor=“B45B3E”配白字都較好看/可做標(biāo)題 nbgcolor=“FBF8EA”和bgcolor=“D5F3F4”和bgcolor=“D7FFF0”和bgcolor=“F0DAD2”和bgcolor=“DDF

15、3FF”配黑字都較好看 /一般做正文以上配色方案都比較淡雅。 n淺綠底黑字，或白底藍(lán)字都很醒目，但前者突出背景，后者突出前景。紅底白字醒目，較深底色配黃字有效果。4.4插入網(wǎng)頁頭部信息n如果文檔沒有頭部信息，在HTML中可以用代碼方式直接寫進(jìn)去，在Dreamweaver中不但可以用寫代碼的方式，還可以用可視化方式為文檔插入頭部信息，方法如下：“插入” |“HTML”|“文件頭標(biāo)簽”選一項(xiàng)插入內(nèi)容即可圖4-4-1 插入“文件頭標(biāo)簽”菜單圖n4.4.1 插入META圖4-4-2 插入Meta對話框圖n4.4.2 插入關(guān)鍵字圖4-4-3 網(wǎng)頁頭部“關(guān)鍵字”對話框n4.4.3 插入說明nDescrip

16、tion（頁面內(nèi)容的簡介）用來告訴搜索引擎網(wǎng)站的主要內(nèi)容。在設(shè)置時(shí)盡量要把簡介寫得清晰明白，字?jǐn)?shù)不能太短也不能太長，一般保持在80200之間。圖4-4-4 網(wǎng)頁頭部“說明”對話框n4.4.4定義自動(dòng)刷新n在制作聊天室時(shí)，需要網(wǎng)頁有定時(shí)刷新功能，以便從服務(wù)器上讀取最新聊天信息。這種特性也是利用元數(shù)據(jù)完成的?？梢詫ttp-equiv屬性設(shè)置為“refresh”，在content屬性值中寫入刷新的時(shí)間間隔為幾秒。n例如：n圖4-4-5 網(wǎng)頁頭部“刷新”對話框4.5添加文字n（1）插入普通文本 n在Dreamweaver CS5中，向網(wǎng)頁中添加文本有以下三種方法：n1）直接在文檔窗口中輸入文本。n2

17、）拷貝文本。n3）從其他文檔導(dǎo)入文本。n（2）插入特殊字符n在HTML代碼中通過轉(zhuǎn)義符來定義特殊字符，如“”用“>”來定義，需要記代碼，比較麻煩。在Dreamweaver CS5提供了比較簡單方法，插入特殊字符的操作為：n1）將光標(biāo)定位在要插入特殊字符的位置。n2）在“插入”欄的“文本”類別中，選擇要插入的符號(hào)，圖 4-5-1 “插入”欄的“文本”類別圖n3）在“插入”欄的“文本”類別中，單擊“其他字符”圖 4-5-2 “文本”欄n4）如果沒有找到要插入的字符，還可以單擊最后的“其他字符”選項(xiàng)，打開“插入其他字符”對話框圖 4-5-3 “插入其他字符”對話框圖n（3）設(shè)置文本格式n文本格

18、式包括文本的字體、字號(hào)大小、顏色及及其他和字體相關(guān)的屬性。圖4-5-4 “屬性檢查器”HTML頁面圖圖4-5-5 “屬性檢查器”CSS頁面圖n（4）段落格式的編輯n段落屬性包括設(shè)置段落的對齊方式、應(yīng)用段落樣式、應(yīng)用項(xiàng)目符號(hào)和列表等。n在網(wǎng)頁中輸入文本時(shí)，按下Enter鍵可以產(chǎn)生一個(gè)新段落，段落與段落之間會(huì)自動(dòng)插入一個(gè)空白行。而用Shift + Enter則是換行不分段，中間不會(huì)產(chǎn)生空白行，系統(tǒng)認(rèn)為是一個(gè)段落。圖4-5-9 段落與換行的區(qū)別n（5）設(shè)置列表n列表在網(wǎng)頁制作中可以使包含層次關(guān)系或并列關(guān)系的文本可以更加整齊地展示在瀏覽者的面前。列表包括項(xiàng)目列表和編號(hào)列表兩種。編號(hào)列表適用于需要按序排

19、列的文本；項(xiàng)目列表適用于并列關(guān)系的文本。創(chuàng)建項(xiàng)目列表或編號(hào)列表的操作為：n1）選擇要?jiǎng)?chuàng)建列表的文本。n2）在“屬性檢查器”中單擊 按鈕，可以創(chuàng)建項(xiàng)目列表圖4-5-12 項(xiàng)目列表 圖4-5-13 編號(hào)列表n（6）簡單的CSS樣式應(yīng)用nCSS是Cascading Style Sheets（層疊樣式表單）的簡稱。在這一節(jié)我們介紹利用CSS樣式來設(shè)置行距，從而增加文本的可讀性及美觀性n使用CSS樣式改變行距的操作為：n1）按組合鍵Shift+F11，打開CSS面板如圖4-5-15所示。n2）點(diǎn)擊CSS面板上的 按鈕，打開“新建CSS規(guī)則”對話框如圖4-5-16所示。n3）從“選擇器類型”選項(xiàng)中選擇“類

20、”。在“名稱”后的文本框中輸入新建的樣式名稱“.1”，“規(guī)則定義”選擇“僅對該文檔”。n4）單擊“確定”按鈕，打開“.1的CSS規(guī)則定義”對話框，如圖4-5-17所示。圖4-5-17 “.1的CSS規(guī)則定義”對話框圖 n5）選擇要應(yīng)用樣式的兩段文本或光標(biāo)定位在段落中，在“屬性檢查器”中“樣式”下拉列表中，選擇“1”，則文本的行距發(fā)生了改變，如圖4-5-18所示。4.6添加圖像n4.6.1 網(wǎng)頁常用圖像格式n（1）GIF格式文件n（2）JPEG圖像文件n（3）PNG圖像文件n4.6.2 插入圖像n（1）插入圖像n在文檔中插入圖像的操作步驟如下：n1）將光標(biāo)定位于要插入圖像的位置處。n2）在插入欄

21、的“常用”選項(xiàng)卡中單擊 按鈕，或者單擊菜單欄中的“插入”|“圖像”命令，則彈出“選擇圖像源文件”對話框，如圖4-6-1所示。圖4-6-1 “選擇圖像源文件”對話框圖n（2）設(shè)置圖像屬性n當(dāng)在頁面中插入圖像或選擇已有的圖像時(shí)，在屬性面板中就可查看圖像的所有屬性，并可對其進(jìn)行修改，如圖4-6-2所示。n4.6.3插入鼠標(biāo)經(jīng)過圖像n（1）在“文檔”窗口中，將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過圖像的位置。n（2）在“插入”欄中，選擇“常用”，然后單擊“鼠標(biāo)經(jīng)過圖像”圖標(biāo)，即顯示“插入鼠標(biāo)經(jīng)過圖像”對話框，如圖4-6-3所示。n4.6.4 插入背景圖像插入背景圖像n背景圖像的插入可以通過點(diǎn)擊 進(jìn)行，通過點(diǎn)擊會(huì)彈

22、出頁面屬性對話框，如圖4-6-6所示。4.7添加超鏈接n網(wǎng)頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會(huì)跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁中去。要?jiǎng)?chuàng)建基本超鏈接的操作方法如下：n（1）在網(wǎng)頁中選中要做超級(jí)鏈接的文字或者圖片。執(zhí)行下列操作之一：n（2）指向被鏈接文件n1）在屬性面板中單擊黃色文件夾圖標(biāo)，在彈出的對話框里選中相應(yīng)的網(wǎng)頁文件就完成了。做好超級(jí)鏈接屬性面板出現(xiàn)鏈接文件顯示。選擇鏈接文件顯示鏈接文件圖4-7-1 鏈接屬性對話框圖n2）特殊方法n創(chuàng)建超鏈接的特殊方法是在屬性面板的鏈接域右邊的“指向文件”的圖標(biāo)。使用它可以方便快捷地創(chuàng)建指向站點(diǎn)窗口中一個(gè)文檔或圖像文件，或者指向另一個(gè)打開文檔中命名錨點(diǎn)的

23、鏈接。圖4-7-2 “指向文件”圖標(biāo)指向窗口文檔的鏈接 n4.7.2 圖像熱區(qū)鏈接n熱區(qū)鏈接是指在圖片上的超級(jí)鏈接，這里所說的圖片上的超級(jí)鏈接是指在一張圖片上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同的網(wǎng)頁鏈接。比如一張中國地圖的圖片，單擊了不同的省跳轉(zhuǎn)到不同的網(wǎng)頁?？牲c(diǎn)的區(qū)域就是熱區(qū)。為了演示制作效果下面的中國地圖我加了一些鏈接，你可以用鼠標(biāo)測試。鼠標(biāo)移動(dòng)到省份的熱區(qū)，會(huì)顯示提示，如果有預(yù)先設(shè)置的網(wǎng)站，點(diǎn)擊會(huì)進(jìn)入對方的網(wǎng)站。n創(chuàng)建熱區(qū)鏈接的操作步驟如下：n（1）首先插入圖片。單擊圖片，如圖4-7-3所示，用展開的屬性面板上的繪圖工具在畫面上繪制熱區(qū)，如圖4-7-4所示圖4-7-3 插入的中國地圖圖片圖4-7-

24、4 圖像屬性面板圖n（2）屬性面板改換為熱點(diǎn)面板如圖4-7-5所示：鏈接輸入框：填入相應(yīng)的鏈接。替換框：填入你的提示文字說明。目標(biāo)框：不作選擇則默認(rèn)在新瀏覽器窗口打開。 圖4-7-5 熱點(diǎn)面板圖n4.7.3電子郵件鏈接n1.在編輯狀態(tài)下，先選定要鏈接的圖片或文字（比如：歡迎您為我們的網(wǎng)站提意見），在插入欄點(diǎn) 或點(diǎn)插入菜單選“電子郵件鏈接”彈出如下對話框。n2填入E-Mail地址即可，如圖4-7-6所示。圖4-7-6 “電子郵件鏈接”對話框圖n另外，還可以選中圖片或者文字，直接在屬性面板鏈接框中填寫“mailto：郵件地址”，如圖4-7-7所示。圖4-7-7 超級(jí)鏈接屬性面板圖n4.7.4 腳本

25、鏈接n創(chuàng)建腳本鏈接的操作步驟如下：n（1）在文檔窗口中選擇要?jiǎng)?chuàng)建腳本鏈接的文字或圖像，這里選擇文本“關(guān)閉窗口”。n（2）在“屬性”面板的“鏈接”文本框中輸入“javascript:”，并在其后輸入javascript代碼或函數(shù)調(diào)用，這里輸入的是“javascript:window.close();”，即關(guān)閉窗口，如圖4-7-8所示。圖4-7-8 屬性面板輸入腳本圖n4.7.5錨點(diǎn)鏈接n在Dreamweaver CS5中，可以創(chuàng)建一種指向文檔特定位置的鏈接，這種鏈接被稱為命名錨記鏈接。命名錨記是表示一個(gè)文檔中特定位置的標(biāo)記。創(chuàng)建命名錨記鏈接，首先需要在目標(biāo)文檔中插入命名錨記，然后再創(chuàng)建鏈接。n（

26、1）創(chuàng)建命名錨記n創(chuàng)建命名錨記的操作步驟如下：n1）將光標(biāo)定位在要?jiǎng)?chuàng)建命名錨記的位置。n2）在“插入”面板中的“常用”標(biāo)簽中，單擊“命名錨記”按鈕，或者單擊菜單欄中的“插入”|“命名錨記”命令，則彈出“命令錨記對話框，如圖4-7-9和4-7-10所示。圖4-7-9 單擊“命名錨記”按鈕圖圖4-7-10 命名錨記”對話框n（2）創(chuàng)建命名錨記鏈接n在插入命名錨記后，就可以創(chuàng)建命名錨記鏈接了。n1）在文檔窗口中選擇要?jiǎng)?chuàng)建鏈接的文本或圖像。n2）在“屬性”面板中的“鏈接”文本框中輸入“#”和錨記名稱，如“#top”，然后按Enter確認(rèn)，這樣就創(chuàng)建了一個(gè)到當(dāng)前文檔的錨記名稱“anchor1”的位置鏈接

27、。4.8插入Flashn（1）新建并保存網(wǎng)頁，定位光標(biāo)在要插入Flash動(dòng)畫的位置。n（2）執(zhí)行以下操作之一：n1）單擊菜單欄中“插入”|“媒體”|“SWF”命令。n2）在“插入”欄的“常用”類別中，選擇“媒體”，單擊“SWF”，如圖4-8-1所示。 圖4-8-1 插入Flash工具欄圖n3）打開選擇文件對話框，如圖4-8-2所示。n4）選擇要插入的Flash文件。n5）單擊“確定”按鈕，則Flash動(dòng)畫插入了網(wǎng)頁中，如圖4-8-3所示。 圖4-8-3 網(wǎng)頁插入flash的效果圖n6）選中插入的Flash動(dòng)畫，單擊屬性檢查器上的 按鈕，播放動(dòng)畫觀看效果，也可以在瀏覽器中觀看效果。4.9添加背景

28、音樂n（1）打開要加入背景音樂的網(wǎng)頁，定位光標(biāo)在網(wǎng)頁起始位置，如圖4-9-1所示。光標(biāo)定位在頁面起始位置圖4-9-1 光標(biāo)定位示意圖n（2）單擊菜單欄中“插入”|“媒體”|“插件”命令，打開選擇文件對話框。n（3）在“選擇文件”對話框，選擇要插入的音頻文件，單擊“確定”，網(wǎng)頁中插入了音頻插件。n（4）選擇音頻插件，單擊“屬性檢查器”中的 按鈕，打開參數(shù)對話框，如圖4-9-2所示。圖4-9-2 音頻參數(shù)設(shè)置對話框圖4.10插入視頻n適合在網(wǎng)頁中播放的視頻格式有很多，如.rm 、.mpeg、.mov 以及.avi等n（1）鏈接到視頻文件n鏈接到視頻文件與鏈接到音頻文件是一樣的，是一種超鏈接，鏈接的

29、目標(biāo)是一個(gè)視頻文件，即在選擇文件時(shí)，選擇視頻文件就可以了。n（2）在網(wǎng)頁中嵌入視頻文件n嵌入視頻是將視頻直接插入到頁面中，頁面帶有播放器，瀏覽者可以控制播放。但只有在訪問者具有所嵌入視頻文件的播放器時(shí)，才可以播放。嵌入音頻文件的操作與嵌入音頻文件的操作相同，在“選擇文件”對話框，選擇要嵌入的視頻文件就可以了。4.11 項(xiàng)目案例項(xiàng)目案例學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 案例描述案例描述 學(xué)習(xí)和使用網(wǎng)頁基本元素制作網(wǎng)頁。根據(jù)網(wǎng)頁設(shè)計(jì)的基本理念，綜合利用網(wǎng)頁的基本元素，使用Dreamweaver CS5制作醫(yī)藥商務(wù)系統(tǒng)網(wǎng)站。案例要點(diǎn)案例要點(diǎn) 網(wǎng)頁元素添加到網(wǎng)頁中的方法、各種網(wǎng)頁元素配合使用的美觀協(xié)調(diào)設(shè)計(jì)。案例實(shí)施案例實(shí)施 （1）選擇