第五章影像與圖片的應(yīng)用

1、第五章 影像與圖片的應(yīng)用5-1網(wǎng)頁(yè)用圖片格式與特點(diǎn)比較5-2插入影像5-3在dreamweaver中編輯影像圖片5-4影像與圖片屬性第五章 影像與圖片的應(yīng)用在現(xiàn)今的網(wǎng)站當(dāng)中，已經(jīng)很難看到除了文字外，沒有其他任何影像或圖案設(shè)計(jì)的網(wǎng)頁(yè)，反而是有很多令人眼花撩亂的圖片、廣告等內(nèi)容。因此在網(wǎng)頁(yè)中適度的加上影像或是生動(dòng)活潑的多媒體物件，已是吸引網(wǎng)友不可或缺的重要角色，甚至還有凌駕文字而成為網(wǎng)頁(yè)主體的趨勢(shì)。5-1 網(wǎng)頁(yè)用圖片格式與特點(diǎn)比較目前市面上有許多影像處理軟體，要製作一些賞心悅目的影像圖片，已經(jīng)不再是困難的工作。但圖片的格式種類繁多，網(wǎng)頁(yè)中究竟使用哪一種格式比較好呢？jpg格式png格式gif格式p

2、sd轉(zhuǎn)gif格式5-2 插入影像5-2-1 插入網(wǎng)頁(yè)影像圖片格式檔案插入影像的方式可以從選單列的命令，或是從 列 標(biāo)籤的 工具鈕來(lái)執(zhí)行。不過(guò)，還是要提醒您，最好先將所要用到的影像圖片複製到網(wǎng)站的相關(guān)資料夾中(例如：images資料夾)，以免日後在進(jìn)行發(fā)佈作業(yè)時(shí)，影像檔案沒有被一起傳送到網(wǎng)站伺服器。5-2 插入影像5-2-2 使用photoshop(.psd)圖檔如果您已經(jīng)使用photoshop設(shè)計(jì)了許多影像檔案(psd格式)，在dreamweaver中可以將其直接插入到編輯視窗的網(wǎng)頁(yè)中，只是在過(guò)程中需要經(jīng)由dreamweaver將這些影像檔執(zhí)行最佳化轉(zhuǎn)換成網(wǎng)站可用的影像格式(、和)。您也可以將

3、多重圖層或多重分割的photoshop影像全部或部分貼到dreamweaver的網(wǎng)頁(yè)中。5-3 在dreamweaver中編輯影像圖片5-3-1 調(diào)整圖片大小與裁切圖片有時(shí)我們插入到網(wǎng)頁(yè)中的影像，其大小可能不適合網(wǎng)頁(yè)版面，因此藉由調(diào)整大小或裁切動(dòng)作，可讓設(shè)計(jì)者藉由縮小影像範(fàn)圍來(lái)編輯影像。通常我們會(huì)想要裁切影像以強(qiáng)調(diào)影像的主題，並移除四周不需要的部分，而留下您在影像中感興趣的範(fàn)圍。5-3在dreamweaver中編輯影像圖片5-3-2 亮度、對(duì)比與銳利化修正太暗或太亮的影像時(shí)通常會(huì)在 面板按 鈕 以便修改影像的對(duì)比或亮度(以像素為單位)，它會(huì)影響到影像的標(biāo)示、陰影和中間色調(diào)。5-4 影像圖片屬性5-4-1 常用的屬性設(shè)定加上邊框5-4影像圖片屬性5-4-1 常用的屬性設(shè)定設(shè)定替代文字5-4 影像圖片屬性5-4-1 常用的屬性設(shè)定設(shè)定低解析影像圖片5-4 影像圖片屬性5-4-1 常用的屬性設(shè)定變更影像圖片來(lái)源5-4 影像圖片屬性5-4-2 影像圖片與文字的編排在dreamweaver中影像圖片和文字一樣，可以 、，只要利用 面板中的對(duì)齊按鈕，就可控制影像圖片的水平位置。影像圖片和文字預(yù)設(shè)是以 的方式對(duì)齊，想要改變對(duì)齊的方式也十分簡(jiǎn)單。請(qǐng)參考以下的操作說(shuō)明。5-4 影像圖片