網(wǎng)頁制作項(xiàng)目5

項(xiàng)目5制作圖文混排網(wǎng)頁項(xiàng)目描述

知識(shí)儲(chǔ)備

實(shí)踐向?qū)?/p>

能力拓展

退出項(xiàng)目小結(jié)

圖像是網(wǎng)頁元素中的另一重要組成部分，在網(wǎng)頁中插入圖像可以使網(wǎng)頁更好地表現(xiàn)網(wǎng)站的主題思想，使版面變得豐富多彩，吸引更多的瀏覽者。圖像文件的格式有很多種，但實(shí)際上在網(wǎng)頁中常使用的圖像文件格式只有GIF、JPG和PNG這三種，因?yàn)檫@三種圖像文件都是經(jīng)過壓縮，因此文件比較小，利于網(wǎng)絡(luò)上傳輸與觀看。在網(wǎng)頁中使用圖像時(shí)，要考慮圖像在頁面中的整體效果。本項(xiàng)目制作“中國廬山”圖文混排網(wǎng)頁。返回項(xiàng)目描述返回5.2.1插入圖像5.2.2設(shè)置圖像屬性5.2.3插入相關(guān)圖像元素返回5.2知識(shí)儲(chǔ)備5.2知識(shí)儲(chǔ)備5.2.1插入圖像在網(wǎng)頁中插入圖像的操作步驟如下：（1）將光標(biāo)定位在文檔中要插入圖像的位置。（2）執(zhí)行下列操作，菜單方式為單擊“插入”菜單，選擇“圖像”選項(xiàng)。面板快捷方式為在“插入”面板的“常用”模式下，單擊“圖像”按鈕。返回（3）彈出“選擇圖像源文件”對(duì)話框，單擊“文件系統(tǒng)”單選按鈕，表示從本地硬盤上選擇圖像文件。在該對(duì)話框中，選擇需要插入的圖像。返回（4）單擊“確定”按鈕后，彈出“圖像標(biāo)簽輔助功能屬性”對(duì)話框，替換文本處可以為空，單擊“確定”即可。（5）切換到“代碼”視圖，可以看到圖像對(duì)應(yīng)的HTML代碼。返回5.2.2設(shè)置圖像屬性如果插入到網(wǎng)頁的圖片大小不符合網(wǎng)頁排版的要求，就需要在DreamweaverCS5中對(duì)圖像進(jìn)行縮放操作。在屬性面板中設(shè)置圖像大小，在HTML文檔中插入圖像后，選擇“設(shè)計(jì)”視圖，選中要調(diào)整大小的圖像，打開圖像“屬性”面板，在圖像“屬性”面板中重新輸入一個(gè)“寬”和“高”的值，就可以改變圖像的大小，使用鼠標(biāo)可以進(jìn)行更為直觀的縮放操作，具體步驟如下：（1）在HTML文檔中插入圖像后，單擊“設(shè)計(jì)”視圖，然后用鼠標(biāo)單擊要進(jìn)行縮放的圖像，在圖像上會(huì)出現(xiàn)3個(gè)控制句柄。（2）將光標(biāo)放在控制句柄上，出現(xiàn)雙箭頭的形狀后，拖動(dòng)控制句柄，即可調(diào)整圖像大小。（3）按住Shift鍵，拖動(dòng)右下方控制句柄可以等比例放大、縮小圖像。返回圖像“屬性”面板常見選項(xiàng)說明如下：“圖像”選項(xiàng)：設(shè)置圖像的名稱或ID，一般情況可以不輸入?！皩挕焙汀案摺边x項(xiàng)：設(shè)置圖像的寬度和高度，默認(rèn)單位是像素?！霸次募边x項(xiàng)：顯示當(dāng)前圖片文件的地址?！版溄印边x項(xiàng)：指定圖像的超鏈接地址。“替換”選項(xiàng)：設(shè)置圖像的注釋文本?！熬庉嫛边x項(xiàng)：?jiǎn)?dòng)圖像編輯器并打開選定的圖像?！暗貓D”選項(xiàng)：包含“地圖”文本框和“熱點(diǎn)工具”，文本框中可以輸入圖像地圖的名稱，熱點(diǎn)工具可以在圖片中插入熱點(diǎn)區(qū)域。“垂直邊距”和“水平邊距”選項(xiàng)：以像素為單位在圖像的四周添加邊距。“目標(biāo)”選項(xiàng)：指定打開鏈接網(wǎng)頁的框架或窗口?！斑吙颉边x項(xiàng)：設(shè)置圖像的邊框?qū)挾??！皩?duì)齊”選項(xiàng)：設(shè)置圖像的對(duì)齊方式。返回5.2.3插入相關(guān)圖像元素1．插入“鼠標(biāo)經(jīng)過圖像”（1）“鼠標(biāo)經(jīng)過圖像”可以實(shí)現(xiàn)圖像輪換特效，給頁面增添動(dòng)態(tài)效果。先準(zhǔn)備好兩幅大小相同的圖片，將光標(biāo)定位到要插入輪換圖像的位置。單擊“插入”菜單，選擇“圖像對(duì)象”選項(xiàng)，在子菜單中單擊“鼠標(biāo)經(jīng)過圖像”命令?；蛘邌螕簟安迦搿泵姘澹x擇“常用”項(xiàng)，單擊“鼠標(biāo)經(jīng)過圖像”按鈕。（2）彈出“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框，可以重新給圖像起一個(gè)名稱。單擊“原始圖像”右側(cè)“瀏覽”按鈕，載入一幅原始圖像。單擊“鼠標(biāo)經(jīng)過圖像”右側(cè)“瀏覽”按鈕，載入一幅要進(jìn)行輪換的圖像。返回如果選中“預(yù)載鼠標(biāo)經(jīng)過圖像”復(fù)選框，在下載頁面時(shí)，輪換的圖像也同時(shí)會(huì)被下載到緩存中。如果輸入“替換文本”，則當(dāng)在輪換圖像上暫停鼠標(biāo)時(shí)，會(huì)出現(xiàn)該文本?！鞍聪聲r(shí)，前往的URL”右側(cè)文本框中，如果輸入網(wǎng)頁的URL地址，單擊圖像時(shí)，會(huì)進(jìn)入到鏈接的頁面。單擊“確定”按鈕，即完成了動(dòng)態(tài)輪換圖像的設(shè)置。返回2．插入圖像占位符圖像占位符是在準(zhǔn)備好將最終圖像添加到Web頁面之前使用的圖形，通過使用圖像占位符，可以在真正創(chuàng)建圖像之前確定圖像在頁面上的位置和大小?！安迦雸D像占位符”對(duì)話框如圖所示。返回任務(wù)5-1制作圖文混排網(wǎng)頁“中國廬山”頁面。具體操作步驟如下：1．啟動(dòng)DreamweaverCS5，單擊菜單“文件”→“新建”命令，彈出“新建文檔”對(duì)話框，設(shè)置網(wǎng)頁標(biāo)題為“廬山”，然后輸入文本，設(shè)置好文本格式，保存為5-1.html。返回5.3實(shí)踐向?qū)?．插入圖片（1）將光標(biāo)放在要插入圖像的位置，選擇菜單欄中“插入”→“圖像”命令。（2）出現(xiàn)“選擇圖像源文件”對(duì)話框后，在“查找范圍”選擇文件所在的位置，在列表中選擇“53.jpg”

文件名，顯示效果。返回3．在頁面中插入鼠標(biāo)經(jīng)過圖像。（1）選中文本下方位置，點(diǎn)擊菜單“插入”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過圖像”。（2）彈出“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框，分別設(shè)置“原始圖像”和“鼠標(biāo)經(jīng)過圖像”。（3）選擇插入圖像，在屬性面板設(shè)置對(duì)齊方式為右對(duì)齊即可。具體效果如圖所示。返回4．設(shè)置背景圖像選擇菜單“修改”→“頁面屬性”，彈出“頁面屬性”對(duì)話框，選中“外觀（CSS）”，設(shè)置背景圖像，如圖所示。5．單擊“確定”按鈕，保存頁面，按【F12】顯示最終效果圖。返回制作“萬里長(zhǎng)城”網(wǎng)頁，通過制作該網(wǎng)頁，可以掌握文本設(shè)置、圖像加載、移動(dòng)、復(fù)制、刪除和屬性設(shè)置等基本操作?！叭f里長(zhǎng)城”網(wǎng)頁的顯示效果如圖所示。返回5.4能力拓展