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

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

知識儲備

實踐向?qū)?/p>

能力拓展

退出項目小結(jié)

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

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