Dreamweaver+FlashCS6第5章---為網(wǎng)頁(yè)添加元素課件

1、第5章 為網(wǎng)頁(yè)添加元素普通高等學(xué)校計(jì)算機(jī)教育“十二五”規(guī)劃教材網(wǎng)頁(yè)設(shè)計(jì)與制作立體化教程（Photoshop+Dreamweaver+Flash CS6雙色微課版）25.1 課堂案例：美化“酒店預(yù)訂”網(wǎng)頁(yè)內(nèi)容導(dǎo)航5.2 課堂案例：鏈接“婚紗禮服”網(wǎng)頁(yè)5.3 項(xiàng)目實(shí)訓(xùn)5.4 課后練習(xí)課堂案例：美化“酒店預(yù)訂”網(wǎng)頁(yè)為了豐富網(wǎng)頁(yè)的內(nèi)容，可為網(wǎng)頁(yè)添加漂亮的圖片或多媒體對(duì)象，并對(duì)這些圖片和多媒體對(duì)象進(jìn)行編輯。本例將對(duì)酒店預(yù)訂網(wǎng)站的首頁(yè)進(jìn)行美化，完成后的參考效果如圖所示。美化網(wǎng)站首頁(yè)效果5.1.1插入與編輯圖像圖像是一個(gè)網(wǎng)站中必不可少的元素，設(shè)計(jì)出圖文并茂的網(wǎng)頁(yè)能提高瀏覽者的視覺效果，增加瀏覽量。下面將介紹

2、在“jdyd.html”網(wǎng)頁(yè)中插入與編輯圖像的方法，其具體操作如下。（1）選擇圖像（2）設(shè)置圖像替換文本5.1.1插入與編輯圖像（3）插入網(wǎng)頁(yè)中的圖像（4）調(diào)整圖像尺寸5.1.2優(yōu)化圖像圖像的效果在網(wǎng)頁(yè)中呈現(xiàn)出來(lái)的感覺比預(yù)期差時(shí)， 可利用Dreamweaver提供的美化和優(yōu)化功能對(duì)圖形做進(jìn)一步處理。插入圖片確認(rèn)設(shè)置5.1.2優(yōu)化圖像調(diào)整亮度和對(duì)比度調(diào)整裁剪范圍裁剪后的圖像效果調(diào)整圖像品質(zhì)優(yōu)化圖像后的效果5.1.2優(yōu)化圖像添加其他圖像后的效果選擇表格并單擊按鈕新建CSS規(guī)則5.1.2優(yōu)化圖像設(shè)置表格背景圖片查看效果5.1.3創(chuàng)建鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像是指在瀏覽網(wǎng)頁(yè)時(shí)，將鼠標(biāo)指針移動(dòng)到圖像上，會(huì)

3、立刻顯示出另一種效果，當(dāng)鼠標(biāo)指針移出后，圖像又恢復(fù)為原始圖像。瀏覽圖像選擇原始圖像5.1.3創(chuàng)建鼠標(biāo)經(jīng)過圖像設(shè)置鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像的效果5.1.4插入Flash動(dòng)畫網(wǎng)頁(yè)上常見的動(dòng)態(tài)閃爍的文字、圖片，以及輪播廣告等對(duì)象基本上都是SWF動(dòng)畫，在Dreamweaver中可以很方便地插入該對(duì)象。（1）選擇SWF動(dòng)畫（2）選擇原始圖像（3）設(shè)置SWF動(dòng)畫5.1.5添加背景音樂通過添加背景音樂的方式在網(wǎng)頁(yè)中添加音樂，可在打開頁(yè)面時(shí)自動(dòng)播放音樂。（1）選擇標(biāo)簽（2）設(shè)置背景音樂145.1 課堂案例：美化“酒店預(yù)訂”網(wǎng)頁(yè)內(nèi)容導(dǎo)航5.2 課堂案例：鏈接“婚紗禮服”網(wǎng)頁(yè)5.3 項(xiàng)目實(shí)訓(xùn)5.4 課后練習(xí)課堂案

4、例：鏈接“婚紗禮服”網(wǎng)頁(yè)老洪告訴米拉，學(xué)會(huì)了制作單個(gè)網(wǎng)頁(yè)后，還需要學(xué)會(huì)使用超鏈接將單個(gè)網(wǎng)頁(yè)鏈接起來(lái)，組成完整的網(wǎng)站，因此老洪讓米拉練習(xí)為婚紗禮服網(wǎng)站設(shè)置超鏈接，使網(wǎng)頁(yè)靈活起來(lái)。完成后的參考效果如圖所示。鏈接“婚紗禮服”網(wǎng)頁(yè)效果5.2.1認(rèn)識(shí)超鏈接1. 超鏈接的組成（1）訪問方案（4）路徑（2）服務(wù)器（3）端口（5）文件（6）錨記5.2.1認(rèn)識(shí)超鏈接2. 超鏈接的種類相對(duì)鏈接絕對(duì)鏈接文件鏈接空鏈接電子郵件鏈接錨點(diǎn)鏈接5.2.2插入文本超鏈接文本超鏈接是網(wǎng)頁(yè)中使用最多的超鏈接。下面在“xqy.html”網(wǎng)頁(yè)中創(chuàng)建文本超鏈接。（1）選擇文本（2）選擇鏈接文件（3）完成超鏈接的創(chuàng)建5.2.2插入文本超

5、鏈接（4）修改超鏈接樣式（5）修改超鏈接文本顏色5.2.3創(chuàng)建空鏈接空鏈接不產(chǎn)生任何跳轉(zhuǎn)的效果，一般為了統(tǒng)一網(wǎng)頁(yè)外觀，會(huì)為當(dāng)前頁(yè)面對(duì)應(yīng)的文本或圖像添加空鏈接。（1）添加空鏈接（2）空鏈接效果5.2.5創(chuàng)建熱點(diǎn)圖片超鏈接熱點(diǎn)圖片超鏈接是一種非常實(shí)用的鏈接工具，它可以將圖像中的指定區(qū)域設(shè)置為超鏈接對(duì)象，從而實(shí)現(xiàn)單擊圖像上的指定區(qū)域，跳轉(zhuǎn)到指定頁(yè)面的功能，其具體操作如下。（1）創(chuàng)建超鏈接（2）選擇網(wǎng)頁(yè)文件5.2.4創(chuàng)建圖像超鏈接圖像超鏈接也是一種常用的鏈接類型，其創(chuàng)建方法與文本超鏈接類似，其具體操作如下。（1）選擇圖像（2）指定鏈接的網(wǎng)頁(yè)5.2.6創(chuàng)建錨點(diǎn)超鏈接利用錨點(diǎn)超鏈接可以實(shí)現(xiàn)在同一網(wǎng)頁(yè)中快速

6、定位的效果，這在網(wǎng)頁(yè)內(nèi)容較多的情況下非常有用。（1）命名錨記（2）命名其他錨記5.2.6創(chuàng)建錨點(diǎn)超鏈接（3）輸入錨點(diǎn)鏈接（4）創(chuàng)建其他錨點(diǎn)鏈接5.2.7創(chuàng)建電子郵件超鏈接在網(wǎng)頁(yè)中創(chuàng)建電子郵件超鏈接，可以方便網(wǎng)頁(yè)瀏覽者利用電子郵件給網(wǎng)站發(fā)送相關(guān)郵件。（1）選擇文本并輸入鏈接地址（2）電子郵件超鏈接效果5.2.8創(chuàng)建外部超鏈接外部超鏈接指鏈接到其他網(wǎng)站網(wǎng)頁(yè)中的鏈接，這類鏈接需要完整的URL地址，因此需要通過輸入的方式來(lái)創(chuàng)建。（1）選擇文本并輸入地址（2）查看效果5.2.9創(chuàng)建腳本鏈接腳本鏈接的設(shè)置較為復(fù)雜，但可以實(shí)現(xiàn)許多功能，讓網(wǎng)頁(yè)產(chǎn)生更強(qiáng)的互動(dòng)效果。285.1 課堂案例：美化“酒店預(yù)訂”網(wǎng)頁(yè)內(nèi)容

7、導(dǎo)航5.2 課堂案例：鏈接“婚紗禮服”網(wǎng)頁(yè)5.3 項(xiàng)目實(shí)訓(xùn)5.4 課后練習(xí)5.3.1制作“科技產(chǎn)品”網(wǎng)頁(yè)本實(shí)訓(xùn)的目標(biāo)是制作“科技產(chǎn)品”網(wǎng)頁(yè)，通過插入Flash文件、圖像、圖像占位符來(lái)直觀地展示網(wǎng)頁(yè)中的內(nèi)容，并對(duì)圖像進(jìn)行編輯，最后輸入文本。1實(shí)訓(xùn)目標(biāo) 插入SWF文件 插入圖片5.3.1制作“科技產(chǎn)品”網(wǎng)頁(yè)在網(wǎng)頁(yè)中添加的圖像格式非常多，但需要注意的是，能在網(wǎng)頁(yè)中使用的格式只有JPGE、GIF、PNG。2. 專業(yè)背景3. 操作思路 插入圖像占位符5.3.2制作“訂單”網(wǎng)頁(yè)本實(shí)訓(xùn)的目標(biāo)是制作“訂單”網(wǎng)頁(yè)，主要包括文本、圖片、電子郵件、空鏈接等操作，并通過頁(yè)面屬性設(shè)置來(lái)設(shè)置超鏈接的屬性。1實(shí)訓(xùn)目標(biāo) 設(shè)置

8、文本和空鏈接5.3.2制作“科技產(chǎn)品”網(wǎng)頁(yè)訂單類的網(wǎng)頁(yè)多用于有購(gòu)物類的網(wǎng)站，需要將用戶選擇的物品添加相關(guān)的超鏈接，便于用戶查看和對(duì)比，這類網(wǎng)頁(yè)添加的超鏈接一般是文字超鏈接和圖片超鏈接，并且最好設(shè)置超鏈接的樣式。2. 專業(yè)背景3. 操作思路5.3.2制作“科技產(chǎn)品”網(wǎng)頁(yè) 設(shè)置電子郵件鏈接 設(shè)置鏈接屬性345.1 課堂案例：美化“酒店預(yù)訂”網(wǎng)頁(yè)內(nèi)容導(dǎo)航5.2 課堂案例：鏈接“婚紗禮服”網(wǎng)頁(yè)5.3 項(xiàng)目實(shí)訓(xùn)5.4 課后練習(xí)練習(xí)1：制作“服裝”網(wǎng)頁(yè)要求操作如下。打開“index.html”網(wǎng)頁(yè)，通過插入標(biāo)簽的方法在其中插入背景音樂“music.mp3”。在導(dǎo)航文本上方選擇【插入】/【圖像】菜單命令插入

9、素材文件“top.jpg”。在下方的位置插入圖像占位符（可只插入一個(gè)圖像占位符，然后通過復(fù)制與粘貼的方法來(lái)設(shè)置其他的圖像，最后在圖像下方輸入并設(shè)置文本的格式）。練習(xí)2：制作“產(chǎn)品介紹”網(wǎng)頁(yè)要求操作如下。打 開“tea.html”素材網(wǎng)頁(yè)，選擇頁(yè)面左側(cè)的圖片文件，在“屬性”面板中的“鏈接”文本框中輸入“pic.html”。然后為右側(cè)的圖片設(shè)置相同的鏈接文件。選擇文本“功效”，在“屬性”面板中的“鏈接”文本框中輸入“effect.html”，然后為下方的“更多”文本設(shè)置相同的鏈接文件。選擇文本“營(yíng)養(yǎng)價(jià)值”，在“屬性”面板中的“鏈接”文本框中輸入“nutrition.html”，完成后保存網(wǎng)頁(yè)并預(yù)覽效果。37Thank you!海量圖書方便查詢免費(fèi)申請(qǐng)樣書下載配套資源優(yōu)惠購(gòu)書成為作者更多樣書