《網(wǎng)頁設(shè)計與制作》 課件 項目2 制作包含圖片與超鏈接的網(wǎng)頁

項目2制作包含圖片與超鏈接的網(wǎng)頁由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網(wǎng)頁制作項目實訓(xùn)教程》重慶大學(xué)出版社CONTENTS任務(wù)1制作圖文混排網(wǎng)頁任務(wù)2制作多媒體網(wǎng)頁任務(wù)3制作包含超鏈接的網(wǎng)頁任務(wù)1制作圖文混排網(wǎng)頁本任務(wù)可以分解為2個活動：在網(wǎng)頁中使用圖片；制作圖書介紹頁?；顒?在網(wǎng)頁中使用圖片1-11、創(chuàng)建一個名稱為“項目2-1”的本地站點，本地站點文件夾為D盤下的“Task2-1”文件夾，默認圖像文件夾路徑設(shè)置為D:\Task2-1\images。2、如下圖所示，新建一個網(wǎng)頁文件，輸入文字、添加圖片和各種圖像對象并設(shè)置網(wǎng)頁的背景，最后將網(wǎng)頁文件以“task2-1-1.html”為文件名保存到“項目2-1”站點根目錄下?；顒右蠡顒?在網(wǎng)頁中使用圖片1-11、直接添加圖片圖片在網(wǎng)頁中的第1種使用方法是直接添加，網(wǎng)頁中能添加的圖片文件格式比較多，常見的格式有以下3種：JPG（全稱是JointPhotographicExpertsGroup，聯(lián)合圖像專家組）是一種高效壓縮的圖片格式，其優(yōu)點是顏色豐富，文件容量小，下載速度快，缺點是不具透明效果。GIF（全稱是GraphicsInterchangeFormat，可交換的圖像格式）是目前大量使用的網(wǎng)頁圖片格式之一，其優(yōu)點是文件容量小，可以透明顯示，還可以支持動畫，缺點是表現(xiàn)的顏色比JPG格式少得多。PNG（全稱是PortableNetworkGraphics，便攜網(wǎng)絡(luò)圖像）結(jié)合了JPG和GIF的優(yōu)點，不僅具有JPG處理精美圖片的優(yōu)勢，而且具有GIF能透明顯示的特點，因此應(yīng)用較廣泛，逐漸成為網(wǎng)頁圖片的主要格式。如下圖所示：知識窗

JPG格式

GIF格式

PNG格活動1在網(wǎng)頁中使用圖片1-12、插入圖像占位符圖片在網(wǎng)頁中的第2種使用方法是插入圖像占位符，在網(wǎng)頁文檔中添加圖片時，如果圖片不確定或者還沒設(shè)計出來，但可以確定圖片的位置、尺寸時，可以先在該位置上插入臨時的“圖像占位符”進行占位；然后等圖片確定后再進行替換，如下圖所示：活動1在網(wǎng)頁中使用圖片1-13、創(chuàng)建鼠標經(jīng)過圖像圖片在網(wǎng)頁中的第3種使用方法是創(chuàng)建鼠標經(jīng)過圖像，鼠標經(jīng)過圖像由原始圖像和鼠標經(jīng)過圖像兩部分組成，當(dāng)鼠標光標在圖片范圍之外時顯示原始圖像，當(dāng)鼠標光標經(jīng)過圖片時顯示鼠標經(jīng)過圖像。如下圖所示：活動1在網(wǎng)頁中使用圖片1-14、將圖片設(shè)置為網(wǎng)頁的背景圖片在網(wǎng)頁中的第4種使用方法是將圖片設(shè)置為網(wǎng)頁的背景，依次單擊“修改”->“頁面屬性”菜單命令（或按Ctrl+J鍵），選擇一張圖片作為網(wǎng)頁的背景，如下圖所示，其中“重復(fù)”選項分為以下4種：no-repeat：圖片作為網(wǎng)頁背景不重復(fù)只顯示1次；repeat：圖片作為網(wǎng)頁背景在x軸、y軸即水平、垂直方向重復(fù)顯示，為默認選項；repeat-x：圖片作為網(wǎng)頁背景在x軸即水平方向重復(fù)顯示；repeat-y：圖片作為網(wǎng)頁背景在y軸即垂直方向重復(fù)顯示?；顒?在網(wǎng)頁中使用圖片1-1詳細操作步驟請參閱教材?；顒訉嵤┰谥谱骶W(wǎng)頁過程中，要注意選取具有代表性、較清晰、大小適宜的圖片，如果圖片素材還沒確定可以采用圖像占位符預(yù)留出位置，鼠標經(jīng)過圖像盡量選取兩張大小基本一致的圖片，將圖片設(shè)置為網(wǎng)頁的背景時可以選取一張較小、可重復(fù)的圖片加快網(wǎng)頁打開速度?；顒釉u價活動2制作圖書介紹頁1-2如下圖所示，完成圖書介紹網(wǎng)頁的制作，完成后以“task2-1-2.html”為文件名保存到“項目2-1”站點根目錄下。活動要求活動2制作圖書介紹頁1-21、圖片的HTML標簽，如下圖所示。

“<img>”代表圖片，是單標簽，以/結(jié)束；“src”代表圖片的存放路徑；“alt”代表替換文本，用來設(shè)置當(dāng)前鼠標移到圖片上時所顯示的提示文本；“width”代表圖片的寬度，默認單位是像素；“height”代表圖片的高度，默認單位是像素；“align”代表圖片的對齊方式，常見的值可以設(shè)置為：top（頂端）、bottom（底部）、middle（中間）、left（左對齊）、right（右對齊）；“hspace”代表圖片左側(cè)和右側(cè)的水平邊距，默認單位是像素；“vspace”代表圖片頂部和底部的垂直邊距，默認單位是像素。知識窗活動2制作圖書介紹頁1-22、圖片的簡單編輯網(wǎng)頁中的圖片除了可以通過HTML標簽進行設(shè)置以外，也可以通過屬性欄中各個選項進行處理，同時還有一些內(nèi)置工具可以對圖片進行簡單編輯，如下圖所示：

裁剪：先選中圖像，再單擊該按鈕，在彈出的對話框中選“確定”，圖片上會出現(xiàn)選框，選框以外的區(qū)域是被裁剪掉的，用鼠標拖動選框的控點可以調(diào)整大小。亮度和對比度：點擊后在出現(xiàn)的對話框中拖動滑塊可以調(diào)整圖片的明暗以及對比度。銳化：可使圖片的棱角更加分明，增加圖片的清晰度。裁剪亮度和對比度銳化活動2制作圖書介紹頁1-2詳細操作步驟請參閱教材。活動實施初學(xué)者制作圖文混排的網(wǎng)頁時，要學(xué)會對圖片進行簡單的大小、亮度、銳度等調(diào)整，同時注意調(diào)整圖片和文字的對齊方式，對于文字、圖片較多的復(fù)雜網(wǎng)頁，后面還需要學(xué)習(xí)表格、DIV、CSS等美化排版網(wǎng)頁的知識。活動評價任務(wù)2制作多媒體網(wǎng)頁本任務(wù)可以分解為2個活動：在網(wǎng)頁中添加音頻與視頻、在網(wǎng)頁中添加Flash動畫?；顒?在網(wǎng)頁中添加音頻與視頻2-11、創(chuàng)建一個名稱為“項目2-2”的本地站點，本地站點文件夾為D盤下的“Task2-2”文件夾，默認圖像文件夾路徑設(shè)置為D:\Task2-2\images。2、如下圖所示，完成音樂頁面的制作，完成后以“task2-2-1.html”為文件名保存到“項目2-2”站點根目錄下。活動要求活動1在網(wǎng)頁中添加音頻與視頻2-11、網(wǎng)頁中常用的音頻文件格式MP3格式：是一種壓縮格式，能以較小的比特率、較大的壓縮比達到近科（“近科”改為“近乎”）完美的CD音質(zhì)，網(wǎng)頁中如果需要播放MP3文件，用戶需要安裝必要插件，如QuickTime、WindowsMeadiaPlayer。WAV格式：具有較好的聲音品質(zhì)，大多數(shù)瀏覽器都支持此格式，因此不要求安裝插件。但WAV文件一般容量比較大，在網(wǎng)頁制作中受到一定限制，必要時可以將WAV格式轉(zhuǎn)化為MP3格式進行壓縮。MIDI格式：一般用于樂器類的音頻文件，大多數(shù)瀏覽器都支持此格式，不要求安裝插件。MIDI文件不能錄制并且必須使用特殊的硬件和軟件在計算機上進行合成。知識窗活動1在網(wǎng)頁中添加音頻與視頻2-12、網(wǎng)頁中添加音頻文件的方法在網(wǎng)頁中添加音頻文件的方法有兩種：一是背景音樂，二是插件形式。（1）為網(wǎng)頁添加背景音樂音頻文件可以以背景音樂的形式添加到網(wǎng)頁中，在預(yù)覽網(wǎng)頁時背景音樂會自動播放，其HTML標簽如下圖所示。“<bgsound>”代表背景音樂，是單標簽，以/結(jié)束；“src”代表音頻文件的存放路徑；“l(fā)oop”代表音頻文件循環(huán)播放次數(shù)，可以輸入具體數(shù)值，例如數(shù)值等于“3”代表音頻文件會播放3次隨后停止，如果數(shù)值等于“-1”代表無限循環(huán)播放?；顒?在網(wǎng)頁中添加音頻與視頻2-1（2）通過插件添加音頻在DreamweaverCS6還可以通過插件的方法在網(wǎng)頁文檔中添加音頻，在預(yù)覽頁面中會出現(xiàn)一個播放控件，通過該控件可以進行暫停、播放、停止、調(diào)整音量等操作，其HTML標簽如下圖所示?！?lt;embed>”代表插件，是雙標簽，以<embed>開始，</embed>結(jié)束；“src”代表音頻文件的存放路徑；“width”代表音頻控件的寬度，默認單位是像素；“height”代表音頻控件的高度，默認單位是像素；“autostart”代表瀏覽網(wǎng)頁時音頻文件是否會自動播放，如果值等于“true”那么音頻文件會自動播放；如果值等于“false”那么音頻文件不會自動播放，需要手動播放；如果沒有“autostart”屬性，則默認會自動播放。值得注意的是，該屬性在IE瀏覽器下才起作用?；顒?在網(wǎng)頁中添加音頻與視頻2-13、網(wǎng)頁中添加視頻文件的方法瀏覽器可以播放的視頻格式有MP4、MOV、AVI、FLV等，可以通過插件方式添加視頻，其添加方法、HTML標簽和音頻類似。此外，有FLV是Flash的視頻文件，在網(wǎng)頁中以SWF組件顯示，將光標移至要插入FLV視頻的位置，選擇“插入”菜單中選擇“媒體”中的FLV命令，打開“插入FLV”對話框，分為兩種視頻類型，主要區(qū)別如下：累進式下載視頻：將FLV文件下載到網(wǎng)頁瀏覽者的硬盤上，然后進行播放，如圖1所示：流視頻：對FLV視頻內(nèi)容進行流式處理，緩沖一定時間確保流暢后在網(wǎng)頁上播放該部分內(nèi)容，如圖2所示：圖1圖2活動1在網(wǎng)頁中添加音頻與視頻2-1詳細操作步驟請參閱教材。活動實施通過該活動，同學(xué)們掌握了制作豐富多彩的多媒體網(wǎng)頁技術(shù)，網(wǎng)頁中不僅單純有文字、圖片，而且還有令人賞心悅目的音頻、視頻，但要添加音頻、視頻過程中要注意文件格式、大小、瀏覽器兼容性等問題，保證網(wǎng)頁能正常瀏覽?；顒釉u價活動2在網(wǎng)頁中添加Flash動畫2-2如下圖所示，完成Flash動畫和設(shè)置SWF文件透明背景效果頁面的制作，完成后分別以“task2-2-2.html”、“task2-2-3.html”為文件名保存到站點為“項目2-2”的“Task2-2”根文件夾中?；顒右蠡顒?在網(wǎng)頁中添加Flash動畫2-2在DreamweaverCS6中，F(xiàn)lash動畫將聲音、圖像和動畫等內(nèi)容加入到一個文件中，能制作出炫酷的動畫效果，而且文件容量較小，是網(wǎng)頁制作中上最流行的多媒體插件之一。Flash動畫主要有兩種格式：.fla格式：Flash軟件創(chuàng)建的源文件，只能在Flash軟件中打開和編輯，不能在Dreamweaver或瀏覽器中打開。要在Dreamweave進行添加Flash動畫，需要在Flash軟件中將Flash源文件導(dǎo)出為.swf格式的文件。.swf格式：Flash軟件導(dǎo)出的電影文件，可以在瀏覽器中播放，也可以在Dreamweaver中預(yù)覽，但不能進行編輯。.swf格式文件可以用AdobeFlashPlayer打開，瀏覽器必須安裝AdobeFlashPlayer插件。在DreamweaverCS6中，其主要屬性如下圖所示。FlashID：可以輸入SWF影片文件唯一的名稱；寬和高：默認單位像素，設(shè)置SWF影片文件的尺寸；文件：指定SWF影片文件的路徑；循環(huán)：選中則連續(xù)播放，不選只播放一次停止；自動播放：選中瀏覽網(wǎng)頁時則會自動播放該影片；垂直邊距、水平邊距：設(shè)置影片上下、左右空白區(qū)域的像素數(shù)；品質(zhì)：有低品質(zhì)、自動低品質(zhì)、自動高品質(zhì)、高品質(zhì)4個選項；比例：設(shè)置SWF影片文件顯示的尺寸，有（默認）全部顯示、無邊框、嚴格匹配3種選項；對齊：設(shè)置SWF影片文件在網(wǎng)頁中的對齊方式；Wmode：設(shè)置SWF影片文件是否透明顯示，默認是不透明顯示。知識窗活動2在網(wǎng)頁中添加Flash動畫2-2詳細操作步驟請參閱教材?；顒訉嵤┩ㄟ^該活動，同學(xué)們簡單掌握了在網(wǎng)頁中插入Flash內(nèi)容和設(shè)置Flash文件的方法，F(xiàn)lash在網(wǎng)頁中常用于制作網(wǎng)頁導(dǎo)航條、廣告條、動畫等，可以使網(wǎng)頁更炫酷生動?；顒釉u價任務(wù)3制作包含超鏈接的網(wǎng)頁本任務(wù)可以分解為3個活動：制作文字超鏈接、制作圖片熱點超鏈接、制作錨點鏈接。活動1制作文字超鏈接3-1為網(wǎng)頁素材“task2-3-1.html”中的文本“華南地區(qū)”、“華東地區(qū)”、“華北地區(qū)”分別設(shè)定超鏈接，鏈接的網(wǎng)頁文件分別為“hndq.html”、“hddq.html”、“hbdq.html”，頁面打開目標為新建頁面?；顒右蠡顒?制作文字超鏈接3-1文本超鏈接是分配了目標URL的字或短語，它可以通過“屬性”面板進行設(shè)置，如下圖所示。知識窗點擊左邊的指向圖標或右邊的瀏覽圖標選取被鏈接目標文本格式設(shè)置區(qū)活動1制作文字超鏈接3-1詳細操作步驟請參閱教材?；顒訉嵤┩ㄟ^本次活動，掌握文字超鏈接的創(chuàng)建方法，并能夠根據(jù)實際情況，設(shè)置超鏈接打開方式?；顒釉u價活動2制作圖片熱點超鏈接3-2為網(wǎng)頁素材“task2-3-1.html”中的“中國氣候類型”圖片設(shè)置4個熱點超鏈接，鏈接的網(wǎng)頁文件分別為“hndq.html”、“hddq.html”、“hxdq.html”、“hbdq.html”，頁面打開目標為新建頁面?；顒右蠡顒?制作圖片熱點超鏈接3-2圖片超鏈接是為整個圖片分配默認超鏈接，也可以為圖片分配一個或多個熱點，即在圖片中劃分多個區(qū)域分配超鏈接，它可以通過“屬性”面板進行設(shè)置，如下圖所