全書課件：網(wǎng)頁美工設計

第1章初識網(wǎng)頁設計與配色教學內容：為了能夠使網(wǎng)頁初學者對網(wǎng)頁設計有個總體的認識，在設計制作網(wǎng)頁前，首先介紹網(wǎng)頁設計的基礎知識。本章首先將介紹網(wǎng)頁的相關術語，接著介紹簡單介紹網(wǎng)頁設計常用工具Dreamweaver、Flash和Photoshop，最后介紹網(wǎng)頁的布局與配送。通過本章的學習可以為后面設計制作更復雜的網(wǎng)頁打下良好的基礎。

教學重點網(wǎng)頁設計的相關術語網(wǎng)頁美工常用工具網(wǎng)頁版面布局設計常見的版面布局形式文字與圖像版式設計網(wǎng)頁配色安全不同色彩的網(wǎng)頁網(wǎng)頁配色技巧1.1網(wǎng)頁設計的相關術語在學習網(wǎng)頁設計之前，先來了解一下網(wǎng)頁中靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的基本概念。1.1.1什么靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是網(wǎng)站建設初期經(jīng)常采用的一種形式。網(wǎng)站建設者把內容設計成靜態(tài)網(wǎng)頁，訪問者只能被動地瀏覽網(wǎng)站建設者提供的網(wǎng)頁內容。1.1.2什么動態(tài)網(wǎng)頁所謂動態(tài)網(wǎng)頁是指網(wǎng)頁文件里包含了程序代碼，通過后臺數(shù)據(jù)庫與Web服務器的信息交互，由后臺數(shù)據(jù)庫提供實時數(shù)據(jù)更新和數(shù)據(jù)查詢服務。這種網(wǎng)頁的后綴名稱一般根據(jù)不同的程序設計語言而不同，如常見的有.asp、.jsp、.php、.perl、.cgi等形式。動態(tài)網(wǎng)頁能夠根據(jù)不同時間和不同訪問者而顯示不同內容。如常見的BBS、留言板和購物系統(tǒng)通常是用動態(tài)網(wǎng)頁實現(xiàn)。1.2網(wǎng)頁美工常用工具網(wǎng)頁設計是一個感性思考與理性分析相結合的復雜的過程，它的方向取決于設計的任務，它的實現(xiàn)依賴于網(wǎng)頁的制作。網(wǎng)頁設計中最重要的東西，并非在軟件的應用上，而是在對網(wǎng)頁設計的理解以及設計制作的水平上，在于自身的美感以及對頁面的把握上。

1.2.1掌握網(wǎng)頁編輯排版軟件DreamweaverDreamweaver是網(wǎng)頁設計與制作領域中用戶最多、應用最廣、功能最強的軟件，隨著DreamweaverCC的發(fā)布，更堅定了Dreamweaver在網(wǎng)頁設計與制作領域中的地位。1.2.2掌握網(wǎng)頁圖像制作軟件PhotoshopPhotoshop是Adobe公司推出的圖像處理軟件，目前已被廣泛應用于平面設計、網(wǎng)頁設計和照片處理等領域。隨著計算機技術的發(fā)展，Photoshop已歷經(jīng)數(shù)次版本更新。1.2.3掌握網(wǎng)頁動畫制作軟件FlashFlash是一款功能非常強大的交互式矢量多媒體網(wǎng)頁制作工具，能夠輕松輸出各種各樣的動畫網(wǎng)頁。它不需要特別繁雜的操作，也比Java小巧精悍，但它的動畫效果、互動效果、多媒體效果十分出色。由于Flash編制的網(wǎng)頁文件比普通網(wǎng)頁文件要小得多，所以大大加快了瀏覽速度。1.3網(wǎng)頁版面布局設計網(wǎng)頁設計要講究編排和布局，雖然網(wǎng)頁設計不同于平面設計，但它們有許多相近之處，應加以利用和借鑒。為了達到最佳的視覺表現(xiàn)效果，應講究整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。1.3.1網(wǎng)頁版面布局原則網(wǎng)頁在設計上有許多共同之處，如報紙等，也要遵循一些設計的基本原則。熟悉一些設計原則，再對網(wǎng)頁的特殊性做一些考慮，便不難設計出美觀大方的頁面來。網(wǎng)頁頁面設計有以下基本原則，熟悉這些原則將對頁面的設計有所幫助。1.3.2點、線、面的構成在網(wǎng)頁的視覺構成中，點、線、面既是最基本的造型元素，又是最重要的表現(xiàn)手段。在布局網(wǎng)頁時，點、線、面是需要最先考慮的因素。只有合理的安排好點、線、面的關系，才能設計出具有最佳視覺效果的頁面，充分地表達出網(wǎng)頁最終目的。網(wǎng)頁設計實際上就是如何處理好3者的關系，因為不管是任何視覺形象或者版式構成，歸結到底，都可以歸納為點、線和面。1.4常見的版面布局形式常見的網(wǎng)頁布局形式大致有“國”字型、拐角型、框架型、封面型和Flash型布局等。1.5文字與圖像版式設計文本是人類重要的信息載體和交流工具，網(wǎng)頁中的信息也是以文本為主。雖然文字不如圖像直觀形象，但是卻能準確地表達信息的內容和含義。在確定網(wǎng)頁的版面布局后，還需要確定文本的樣式，如字體、字號和顏色等，還可以將文字圖形化。1.5.1文字的字體、字號、行距網(wǎng)頁中中文默認的標準字體是“宋體”，英文是TheNewRoman。如果在網(wǎng)頁中沒有設置任何字體，在瀏覽器中將以這兩種字體顯示。1.5.2文字的圖形化所謂文字的圖形化，即把文字作為圖形元素來表現(xiàn)，同時又強化了原有的功能。作為網(wǎng)頁設計者，既可以按照常規(guī)的方式來設置字體，也可以對字體進行藝術化的設計。無論怎樣，一切都應該圍繞如何更出色地實現(xiàn)自己的設計目標。1.6網(wǎng)頁配色安全有時雖然使用了合理且美觀的網(wǎng)頁配色方案，即使是一樣的顏色，也會由于瀏覽者電腦顯示設備、操作系統(tǒng)、顯示卡以及瀏覽器的不同有不盡相同的顯示效果。為此，對于一個網(wǎng)頁設計來說，了解并且利用網(wǎng)頁安全色可以擬定出更安全、更出色的網(wǎng)頁配色方案，通過使用216網(wǎng)頁安全色彩進行網(wǎng)頁配色，不僅可以避免色彩失真，而且可以使配色方案很好的為網(wǎng)站服務。1.6.1216網(wǎng)頁安全色216網(wǎng)頁安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合（調色板）。也就是說這些顏色在任何終端瀏覽用戶顯示設備上的顯示效果都是相同的。所以使用216網(wǎng)頁安全色進行網(wǎng)頁配色可以避免原有的顏色失真問題。1.6.2網(wǎng)頁安全色配色辭典

216網(wǎng)頁安全色對于一個網(wǎng)頁設計師來說是必備的常識，且利用它可以擬定出更安全、更出色的網(wǎng)頁配色方案。只要在網(wǎng)頁中使用216網(wǎng)頁安全顏色，就可以控制網(wǎng)頁的色彩顯示效果。1.7不同色彩的網(wǎng)頁千萬年來的生活實踐，人類由鮮血的紅色、植物的綠色、稻麥的黃色、海洋的藍色等各種自然色彩中形成了一系列共同的印象，使人們對色彩賦予了特別的象征意義。第2章使用PhotoshopCC入門基礎教學內容：Photoshop的專長在于圖像處理，圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工。本章主要介紹Photoshop的基本操作，包括PhotoshopCC的工作界面、前景色和背景色的設置、圖像區(qū)域的選擇、基本繪圖工具的使用、創(chuàng)建文字和應用濾鏡基本知識。

教學重點PhotoshopCC工作界面設置前景色和背景色創(chuàng)建選擇區(qū)域基本繪圖工具創(chuàng)建文字圖層與圖層樣式應用濾鏡2.1PhotoshopCC工作界面PhotoshopCC的工作界面包括【菜單欄】、【選項欄】、【工具箱】、【文檔窗口】、【面板】，下面將分別進行介紹。2.1.1菜單命令PhotoshopCC包括【文件】、【編輯】、【圖像】、【圖層】、【類型】、【選擇】、【濾鏡】、【3D】、【視圖】、【窗口】和【幫助】11個菜單。2.1.2工具箱Photoshop的工具箱包含了多種工具。要選擇使用這些工具，只要單擊工具箱中的工具按鈕即可。2.1.3工具選項欄Photoshop的工具箱包含了多種工具。要選擇使用這些工具，只要單擊工具箱中的工具按鈕即可。2.1.4浮動面板在默認情況下，面板位于文檔窗口的右側，其主要功能是查看和修改圖像。一些面板中的菜單提供其他命令和選項?？墒褂枚喾N不同方式組織工作區(qū)中的面板。可以將面板存儲在面板箱中，以使它們不干擾工作且易于訪問，或者可以讓常用面板在工作區(qū)中保持打開。另一個選項是將面板編組，或將一個面板停放在另一個面板的底部。2.1.5文檔窗口圖像文件窗口就是顯示圖像的區(qū)域，也是編輯和處理圖像的區(qū)域。在圖像窗口中可以實現(xiàn)Photoshop中所有的功能，也可以對圖像窗口進行多種操作。如改變窗口大小和位置，對窗口進行縮放等。2.2設置前景色和背景色在PhotoshopCC中，默認的前景色為黑色、背景色為白色、當設置了其他顏色后要恢復默認的顏色時，只需單擊工具箱中的默認前景色和背景色按鈕。

2.3創(chuàng)建選擇區(qū)域從圖像中選取所需內容是圖像處理的基礎操作，各種圖像的處理往往是基于圖像選取，并在所選區(qū)域上進行的。如何快速，精確地選取圖像十分重要，這就要求掌握好各種選擇工具的使用方法，使圖像選取盡可能精確、合適，為以后的各種操作提供方便。2.3.1選框工具在PhotoshopCC中可以使用工具箱中的【矩形選框】工具和【橢圓選框】工具，在圖像上選擇選區(qū)。2.3.2套索工具在PhotoshopCC中可以使用工具箱中的【矩形選框】工具和【橢圓選框】工具，在圖像上選擇選區(qū)。2.3.3魔棒工具Photoshop的魔棒工具，是一個選區(qū)工具，其選擇范圍的多少取決于其工具選項欄中容差值的高低。容差值高，選擇的范圍就大，容差值低，選擇的范圍就小。魔棒工具的快捷鍵是字母W。2.4基本繪圖工具在處理網(wǎng)頁圖像過程中，繪圖是最基本的操作。PhotoshopCC提供了非常簡捷的繪圖功能。下面就來講述在Photoshop中，畫筆、鉛筆、加深和減淡工具的應用。2.4.1筆畫工具

【畫筆】工具是工具箱中經(jīng)常用到的工具，下面將講述【畫筆】工具的具體應用。2.4.2鉛筆工具

【鉛筆】工具用于隨意性的創(chuàng)作，可以隨意地畫出各種線條和形狀。下面講述【鉛筆】工具的具體使用方法。2.4.3加深和減淡工具的應用

【減淡】工具的主要作用是改變圖像的曝光度，對圖像中局部曝光不足的區(qū)域，使用減淡工具后，可對該局部區(qū)域的圖像增加明亮度（稍微變白），使很多圖像的細節(jié)可顯現(xiàn)出來。2.5創(chuàng)建文字在PhotoshopCC中，使用【文字】工具不僅可以把文字添加到文檔中，同時也可以產(chǎn)生各種特殊的文字效果。2.5.1輸入文字在Photoshop中，【文字】工具包括【橫排文字】、【直排文字】、【橫排文字蒙版】和【直排文字蒙版】工具。要選取該工具，可以單擊相應的工具按鈕，可以對文本進行更多的控制，如可以實現(xiàn)在輸入文本時自動換行，可以將文本轉換為路徑等。2.5.2設置文字屬性輸入文字后，當對文字的字體或顏色不滿意的時候，可以在工具選項欄或【字符】面板中修改文本屬性。2.5.3文字的變形使用【變形文字】命令可以對文字進行多種變形，在【變形文字】對話框中的各參數(shù)如下。2.6圖層與圖層樣式圖層是處理圖像的關鍵，在處理和編輯圖像的過程中，幾乎每幅圖像都會用到圖層。2.6.1圖層基本操作添加圖層是編輯圖層中首先應學會的操作，新建圖層一般可以通過【圖層】面板或圖層菜單命令來添加，新添加的圖層將位于【圖層】面板中所選圖層的上方。2.6.2設置圖層樣式圖層樣式是Photoshop最具有魅力的功能之一。它能夠產(chǎn)生許多驚人的圖層特效。對圖層樣式所做的修改，均會實時地顯示在圖像窗口中。靈活使用圖層樣式，可為藝術創(chuàng)作提供一個極好的實現(xiàn)工具。2.7應用濾鏡濾鏡主要是用來實現(xiàn)圖像的各種特殊效果。它在Photoshop中具有非常神奇的作用。2.7.1渲染渲染濾鏡可以在圖像中創(chuàng)建云彩圖案、折射圖案和模擬的光反射。也可在3D空間中操縱對象，并從灰度文件創(chuàng)建紋理填充以產(chǎn)生類似3D的光照效果。2.7.2風格化

Photoshop中【風格化】濾鏡是通過置換像素和通過查找并增加圖像的對比度，在選區(qū)中生成繪畫或印象派的效果。它是完全模擬真實藝術手法進行創(chuàng)作的。在使用【查找邊緣】和【等高線】等突出顯示邊緣的濾鏡后，可應用【反相】命令用彩色線條勾勒彩色圖像的邊緣或用白色線條勾勒灰度圖像的邊緣。2.7.3模糊模糊濾鏡在Photoshop中模糊濾鏡效果共包括6種濾鏡，模糊濾鏡可以使圖像中過于清晰或對比度過于強烈的區(qū)域，產(chǎn)生模糊效果。它通過平衡圖像中已定義的線條和遮蔽區(qū)域的清晰邊緣旁邊的像素，使變化顯得柔和。2.8實戰(zhàn)——濾鏡制作藍色光束本章主要講述了PhotoshopCC入門的基礎知識，下面通過以上所學到的知識來具體講述。制作放射光束重點是徑向模糊濾鏡的應用，可以直接對背景素材或自制一些紋理模糊處理得到初步的放射光束，然后再用其它濾鏡加強及銳化光束，后期再渲染顏色即可。第3章處理設計網(wǎng)頁圖片教學內容：Photoshop是一個功能強大的圖像處理軟件，可以對各種格式的圖片文件進行非常精細與獨特的處理，不僅適用于廣告用圖、產(chǎn)品圖片的處理，也廣泛用于網(wǎng)頁圖片元素的處理。正確使用Photoshop處理圖片可以增加網(wǎng)頁的美觀，提高網(wǎng)頁的下載速度。

教學重點幾種常見的摳圖工具及方法制作商品倒影的方法制作格子效果圖片更換圖片背景制作木紋背景圖片3.1幾種常見的摳圖工具及方法本節(jié)將介紹如何在Photoshop摳圖，以及怎么快速的得到我們想要的選區(qū)的幾種方法。3.1.1通道摳圖通道摳圖，就是在顏色通道里觀察，要摳取的圖像與周圍圖像的對比度是否清晰，越清晰說明越容易摳出。通過通道摳圖的方法簡單快速完成細節(jié)復雜的圖像，省時又省力。3.1.2魔術棒摳圖磨術棒摳圖針對產(chǎn)品和背景有北常明顯的色彩或者明度的區(qū)別，并常與套索工具結合使用。優(yōu)點是快速，缺點是不適合復雜的背景對象摳圖。3.1.3蒙版摳圖使用快速蒙版和橡皮擦工具，是十分容易理解、且操作簡單的扣圖方法，即使是細小的頭發(fā)絲也可以輕松完成摳取，只要在快速蒙版狀態(tài)下選擇與之直徑相適應的畫筆涂抹即可。3.2制作商品倒影的方法在淘寶上開店少不了商品圖片,一幅好的寶貝圖片勝過千言萬語,在銷售當中很重要,每個店主都需要有清晰、漂亮的圖片來宣傳自己的商品。3.3制作格子效果圖片在做設計的過程中，用到格子的情況也非常多，本節(jié)就讓來學習使用簡單的格子為照片添加特殊的效果。3.4更換圖片背景下面通過魔棒工具講述快速更換圖像背景，具體操作步驟如下。3.5制作木紋背景圖片下面通過實例講創(chuàng)建木紋背景的方法，具體操作步驟如下。第4章設計網(wǎng)頁特效文字教學內容：文字在網(wǎng)頁圖像處理中起著非常重要的作用。利用Photoshop可以使文字發(fā)生各種各樣的變化，并利用這些藝術化處理后的文字為圖像增加效果。本章主要介紹常用特效文字的制作方法。漂亮的特效文字已經(jīng)被廣泛的應用到網(wǎng)頁按鈕、網(wǎng)頁廣告中，掌握好特效文字的制作方法才能夠更好地完善圖像處理的效果。

教學重點設計火焰字設計發(fā)光字設計綠色清新風格文字設計藍色熒光字金色質感文字設計黃金立體字4.1設計火焰字本節(jié)介紹一種火焰字的最簡單制作方法，用圖層樣式來制作，只需要設置簡單的一些參數(shù)就可以做出效果不錯的火焰字。具體操作步驟如下。4.2設計多彩發(fā)光字下面通過【文字】工具和圖層樣式制作發(fā)光文字效果，具體操作步驟如下。

4.3設計綠色清新風格文字本節(jié)講述制作一款清新炫麗的文字效果，具體操作步驟如下。4.4設計藍色熒光字本節(jié)講述藍色熒光字的制作，具體操作步驟如下。在處理網(wǎng)頁圖像過程中，繪圖是最基本的操作。4.5金色質感立體文字下面講述金色質感立體文字效果，具體操作步驟如下。4.6設計黃金立體字下面通過實例講創(chuàng)建木紋背景的方法，具體操作步驟如下。第5章設計網(wǎng)頁Logo與按鈕教學內容：按鈕是網(wǎng)頁中最常見的元素之一，從簡單的個人網(wǎng)站到復雜的商業(yè)網(wǎng)站，到處都能看到各種各樣的網(wǎng)頁按鈕。這些按鈕一般設計精巧、立體感強，將其應用到網(wǎng)頁中，既能吸引瀏覽者的注意，又增加了網(wǎng)頁的美觀效果。本章就來講述各種網(wǎng)頁按鈕和導航欄的制作。Logo是網(wǎng)站形象的重要體現(xiàn)，是互聯(lián)網(wǎng)上各個網(wǎng)站用來與其他網(wǎng)站鏈接的圖形標志。Logo設計是網(wǎng)站形象設計的核心因素，擁有一款優(yōu)秀的Logo，可以使品牌視覺形象如虎添翼。

教學重點網(wǎng)站Logo的制作靜態(tài)標識Logo的制作網(wǎng)站動態(tài)Logo的制作制作綠色環(huán)保Logo網(wǎng)頁按鈕設計技巧制作按鈕制作透明按鈕5.1網(wǎng)站Logo的制作Logo具有舉足輕重的作用，它是網(wǎng)站或企業(yè)形象的集中體現(xiàn)，一般要反映出網(wǎng)站的類型和內容，這樣才能在第一時間吸引瀏覽者，提供網(wǎng)站的點擊率。5.1.1網(wǎng)站Logo設計的標準Logo是標志、徽標的意思。網(wǎng)站Logo即網(wǎng)站標志，它出現(xiàn)在站點的每一個頁面上，是網(wǎng)站給人的第一印象。一個極具視覺沖擊力的Logo設計，會吸引更多的訪問者。5.1.2網(wǎng)站Logo的規(guī)范設計Logo時，面向應用的各種條件作出相應規(guī)范，對指導網(wǎng)站的整體建設有著極現(xiàn)實的意義。具體須規(guī)范Logo的標準色、設計可能被應用的恰當?shù)谋尘芭渖w系、反白、在清晰表現(xiàn)Logo的前提下制訂Logo最小的顯示尺寸，為Logo制訂一些特定條件下的配色，輔助色帶等方便制作。5.2制作綠色環(huán)保Logo本教程學習如何用Photoshop制作一個綠色環(huán)保圖標，主要用到了圖層樣式，具體操作步驟如下。5.3網(wǎng)站動態(tài)Logo的制作下面動態(tài)網(wǎng)站Logo的制作，具體操作步驟如下。5.4網(wǎng)頁按鈕設計技巧漂亮的按鈕可以修飾網(wǎng)頁，使用網(wǎng)頁按鈕能夠使得網(wǎng)頁圖像更加美觀、更富立體感。最常用的按鈕設計工具是Photoshop，利用圖層樣式和文字工具，可以很方便地制作出美觀的按鈕。5.4.1按鈕的視覺表現(xiàn)覺表現(xiàn)手法主要有以下幾種元素，實際設計中為了讓效果拉開主次，可能會同時使用多種方法以達到更好的效果。5.4.2網(wǎng)頁按鈕制作技巧在眾多的游戲官網(wǎng)中，可以看到各式各樣的游戲按鈕，相對于一般商務型按鈕來講，游戲性按鈕更加在意的是質感上面的表現(xiàn)，比如金屬、石頭、玻璃、木頭、塑膠等等，通過質感的選擇表現(xiàn)來表達游戲本身的特質。5.5制作透明按鈕本節(jié)透明按鈕的制作，具體操作步驟如下。5.6制作高光質感水晶按鈕下面講述高光質感水晶按鈕的制作，具體操作步驟如下。5.7制作放射燈光按鈕Photoshop制作放射燈光按鈕，效果非常漂亮，下面通過實例講創(chuàng)具體操作步驟如下。第6章設計網(wǎng)絡廣告和海報教學內容：簡單地說，網(wǎng)絡廣告就是在網(wǎng)絡平臺上投放的廣告。網(wǎng)絡廣告利用網(wǎng)站上的廣告橫幅、文本鏈接、多媒體的方法，在互聯(lián)網(wǎng)刊登或發(fā)布廣告，通過網(wǎng)絡傳遞到互聯(lián)網(wǎng)用戶的一種高科技廣告運作方式。利用Photoshop還可以設計出精彩的海報和賀卡。

教學重點網(wǎng)絡廣告的制作促銷廣告設計圣誕賀卡時尚產(chǎn)品海報6.1網(wǎng)絡廣告的制作網(wǎng)頁廣告是通過主頁到下層頁的樹狀鏈接結構，通過返航按鈕的設計，用戶可以自由地穿梭其間。一個企業(yè)站點上許多不同的網(wǎng)頁可能表達不同的廣告內容，但必須體現(xiàn)一個企業(yè)整體的形象，所以，必須設計統(tǒng)一的網(wǎng)頁形式以體現(xiàn)統(tǒng)一的企業(yè)風格，加強廣告?zhèn)鞑サ耐恍浴⒀永m(xù)性和律動性以增進廣告?zhèn)鞑サ牧Χ群托Ч?.2促銷廣告下面就通過實例講述一下banner促銷廣告的設計，具體操作步驟如下。6.3設計圣誕賀卡本節(jié)主要來學習如何運用素材合成制作漂亮的圣誕節(jié)賀卡，主要學習文字的輸入、圖層樣式的運用和簡單的動畫制作，具體操作步驟如下。6.4時尚產(chǎn)品海報本節(jié)主要使用Photoshop設計時尚的水花裝飾化妝品海報，主要是把一張圖片的化妝品效果圖合成到海報中具體操作步驟如下。第7章創(chuàng)建切片與設計網(wǎng)頁動畫教學內容：切片的使用，使得整個圖片可以分為多個不同的小圖片分開下載，這樣下載的時間就大大縮短了。在目前互聯(lián)網(wǎng)帶寬還受到條件限制的情況下，運用切片來減少網(wǎng)頁下載時間而又不影響圖片的效果。使用Photoshop還可以輕松制作出GIF動畫。

教學重點快速制作Web文件創(chuàng)建與編輯切片優(yōu)化與導出切片圖像動畫面板橫幅動態(tài)Banner7.1快速切割網(wǎng)頁文件切片是網(wǎng)頁制作過程中非常重要的一個步驟，往往切片的正確與否會影響著網(wǎng)頁的后期制作。一般是用Photoshop對網(wǎng)頁的效果圖或者大幅的圖片進行切割。7.2創(chuàng)建與編輯切片切片就是將一幅大圖分割為一些小的圖像，然后在網(wǎng)頁中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙地拼接起來，成為一幅完整的圖像。這樣做可以縮小圖像的大小，減少網(wǎng)頁的下載時間，還能將圖像的一些區(qū)域用HTML來代替。7.2.1創(chuàng)建切片切片工具是Photoshop軟件自帶的一個平面圖片切割工具。使用切片工具可以將一個完整的網(wǎng)頁切割許多小圖片，以便于網(wǎng)絡上的下載。創(chuàng)建切片的具體操作步驟如下。7.2.2編輯切片如果切片大小不合適，還可以調整和編輯切片，具體操作步驟如下。7.3優(yōu)化與導出切片圖像網(wǎng)頁優(yōu)化涉及方方面面，圖片優(yōu)化則是其中重要手段之一本文中，本節(jié)就講述網(wǎng)頁圖像的優(yōu)化。下面講述網(wǎng)站優(yōu)化與導出的具體操作步驟。7.4動畫面板動畫是在一段時間內顯示的一系列圖像或幀，當每一幀較前一幀都有輕微的變化時，連續(xù)快速地顯示幀，就會產(chǎn)生運動或其它變化的視覺效果。GIF動畫制作相對較為簡單，我們打開“時間軸”面板后，會發(fā)現(xiàn)有幀動畫模式和時間軸動畫兩種模式可以選擇。7.4.1時間軸動畫面板時間軸動畫相對來說要專業(yè)很多，有點類似Flash及一些專業(yè)影視制作軟件。同樣，在制作之前，需要設定好動畫的展示方式，再做出分層圖層。然后在時間軸設置各層的展示位置及動畫時間設定等。7.4.2幀動畫面板幀動畫相對來說直觀很多，在動畫面板會看到每一幀的縮略圖。制作之前需要先設定好動畫的展示方式，然后用Photoshop做出分層圖。然后在動畫面板新建幀，把展示的動畫分幀設置好，再設定好時間和過渡等即可播放預覽。7.5橫幅動態(tài)Banner本節(jié)主要來學習如何運用素材合成制作漂亮的圣誕節(jié)賀卡，主要學習文字的輸入、圖層樣式的運用和簡單的動畫制作，具體操作步驟如下。第8章FlashCC繪圖基礎教學內容：FlashCC是一款非常優(yōu)秀的矢量動畫制作軟件，它是當今功能最豐富、最優(yōu)秀的動畫制作軟件之一。熟練掌握繪圖工具的使用是Flash學習的關鍵。在學習和使用過程中，應當清楚各種工具的用途，靈活運用這些工具，可以繪制出栩栩如生的矢量圖，為后面的動畫制作做好準備工作。

教學重點FlashCC簡介FlashCC的工作界面繪制圖形工具選擇對象工具編輯圖形工具文本工具的基本使用8.1FlashCC簡介Flash電影是專為網(wǎng)頁服務的畫像或動畫。主要含有矢量圖形，但是也可以包含導入的位圖和音效，還可以把瀏覽者輸入的信息同交互性聯(lián)系起來，從而產(chǎn)生交互效果，也可以生成非線性電影動畫。該動畫可以同其它的Web程序產(chǎn)生交互作用。網(wǎng)頁設計師可以利用Flash來創(chuàng)建導航控制器、動態(tài)Logo、含有同步音效的長篇動畫、甚至可以產(chǎn)生完整的、富于敏感性的網(wǎng)頁。8.2FlashCC的工作界面AdobeFlashProfessionalCC軟件內含強大的工具集，具有排版精確、版面保真和豐富的動畫編輯功能，能清晰地傳達創(chuàng)作構思。FlashCC的工作界面由菜單欄、工具箱、時間軸、舞臺和面板等組成。8.2.1菜單欄菜單欄是最常見的界面要素，它包括【文件】、【編輯】、【視圖】、【插入】、【修改】、【文本】、【命令】、【控制】、【調試】、【窗口】和【幫助】菜單，根據(jù)不同的功能類型，可以快速地找到所要使用的各項功能選項。8.2.2舞臺舞臺是放置動畫內容的區(qū)域，可以在整個場景中繪制或編輯圖形，但是最終動畫僅顯示場景白色區(qū)域中的內容，而這個區(qū)域就是舞臺。舞臺之外的灰色稱為工作區(qū)，在播放動畫時不顯示此區(qū)域。8.2.3工具箱工具箱中包含一套完整的繪圖工具，位于工作界面的左側，如果想將工具箱變成浮動工具箱，可以拖動工具箱最上方的位置，這時屏幕上會出現(xiàn)一個工具箱的虛框，釋放鼠標即可將工具箱變成浮動工具箱。8.2.4時間軸

【時間軸】面板是Flash界面中重要的部分，用于組織和控制文檔內容在一定時間內播放的圖層數(shù)和幀數(shù)。8.2.5屬性面板在默認情況下，屬性面板處于展開狀態(tài)，在FlashCC中，屬性面板、濾鏡板和參數(shù)面板整合到了一個面板中。【屬性】面板的內容取決于當前選定的內容，可以顯示當前文檔、文本、元件、形狀、位圖、視頻、幀或工具的信息和設置。如當選擇工具箱中的【文本】工具時，在【屬性】面板中將顯示有關文本的一些屬性設置。8.3繪制圖形工具FlashCC的繪圖工具都集中在舞臺左側的工具箱中，可以通過在工具按鈕上單擊鼠標左鍵的方式選擇相應的工具。工具箱中的工具可以繪制、涂色、選擇和修改圖形，并且可以更改舞臺的視圖。8.3.1線條工具

【線條】工具是FlashCC中最基本、最簡單的工具。使用【線條】工具可以繪制不同的顏色、寬度和形狀。8.3.2橢圓工具與矩形工具

【橢圓】工具可用來繪制橢圓和正圓，不僅可以任意選擇輪廓線的顏色、線寬和線型，還可以任意選擇輪廓線的顏色和圓的填充色。但是邊界線只能使用單色，而填充區(qū)域則可以使用單色或漸變色?！揪匦巍抗ぞ哂糜趧?chuàng)建各種比例的矩形，也可以繪制正方形，其操作步驟和【橢圓】工具相似。所不同的是，在矩形面板中可以設置矩形的邊角半徑。8.3.3多角星形工具

【多角星形】工具的用法與【矩形】工具基本一樣，所不同的是在【屬性】面板中多了一個【選項】按鈕。8.3.4鉛筆工具使用【鉛筆】工具可以繪制任意形狀的線條，選擇工具箱中的【鉛筆】工具會出現(xiàn)【鉛筆模式】附屬工具選項，有3種模式可供選擇，通過它可以選擇Flash修改所繪筆觸的模式。8.3.5刷子工具使用工具箱中的【刷子】工具可以隨意地畫出色塊，在其選項中可以設置刷子的大小和樣式，單擊【選項】區(qū)中的按鈕，在彈出的菜單中有5種填充模式。8.3.6鋼筆工具

【鋼筆】工具用于繪制路徑，可以創(chuàng)建直線或曲線段，然后調整直線段的角度和長度以及曲線段的斜率。8.4選擇對象工具可以通過在舞臺中拖動對象來移動它們，或者剪切后粘貼它們，按方向鍵移動它們，或使用屬性面板為它們指定確切的位置。8.4.1選擇工具

【選擇】工具用于選擇或移動直線、圖形、元件等一個或多個對象，也可以拖動一些未選定的直線、圖形、端點或曲線來改變直線或圖形的形狀?！具x擇】工具用于選擇或移動直線、圖形、元件等一個或多個對象，也可以拖動一些未選定的直線、圖形、端點或曲線來改變直線或圖形的形狀。8.4.2部分選取工具

【部分選取】工具可以選取并移動對象，除此之外，它還可以對圖形進行變形等處理。當某一對象被“部分選取”工具選中后，它的圖像輪廓線上將出現(xiàn)很多控制點，表示該對象已被選中。8.5編輯圖形工具添色工具主要包括【顏料桶】工具、【墨水瓶】工具、【滴管】工具，本節(jié)就來講述它們的使用方法。8.5.1選擇工具

【顏料桶】工具

可以為封閉區(qū)域填充顏色，還可以更改已涂色區(qū)域的顏色?？梢允褂谩绢伭贤啊抗ぞ?/p>

填充未完全封閉的區(qū)域。

選擇工具箱中的【顏料桶】工具

后，在工具箱的下部會出現(xiàn)【空隙大小】附屬工具選項。8.5.2墨水瓶工具使用【墨水瓶】工具的具體操作步驟如下。8.5.3墨水瓶工具選擇工具箱中的【滴管】工具后，光標就會變成一個滴管狀，表明此時已經(jīng)激活了【滴管】工具，可以拾取某種顏色了。然后移動到目標對象上，再單擊左鍵，這樣采集的顏色就被填充到目標區(qū)域了。8.6創(chuàng)建文字Flash提供了多種文本功能和選項?？梢詣?chuàng)建3種類型的文本，分別為：靜態(tài)文本、動態(tài)文本和輸入文本。8.7實戰(zhàn)——制作立體投影文字本章主要講述了FlashCC入門的基礎知識，下面通過以上所學到的知識講述立體投影文字的制作。第9章使用元件與庫管理好動畫素材教學內容：使用元件可以使編輯動畫變得更簡單，使創(chuàng)建交互動畫變得更加容易。將元件從庫中取出并且拖放到舞臺上，就生成了該元件的一個實例。真正在舞臺上表演的是它的實例，而元件本身仍在庫中。

教學重點元件和實例的概念創(chuàng)建元件編輯元件創(chuàng)建與編輯實例創(chuàng)建和管理庫使用公共庫9.1元件和實例的概念元件是對使用繪圖工具創(chuàng)建的可使用圖形所起的名稱，當舞臺或另一個元件中放置一個元件時，實際上是創(chuàng)建了這個元件的一個實例。不管創(chuàng)建多少個實例，只是計算了一個元件的大小，使用元件可使影片文件的大小減少，因為在影片中只存儲一個實例。9.2創(chuàng)建元件下面講述創(chuàng)建元件的具體操作步驟。9.3編輯元件當編輯完一個元件，F(xiàn)lash會更新影片中的這個元件的所有實例。編輯元件必須在元件模式下進行。當編輯元件時，工作區(qū)的其他元素變暗，不能進行編輯。9.3.1復制元件復制元件的具體操作步驟如下。（1）在【庫】面板選中要復制的元件。（2）右鍵單擊在彈出的菜單中選擇【直接復制】命令。（3）打開【直接復制元件】對話框。（4）在對話框中，修改元件的名稱和類型。（5）修改完畢以后，單擊【確定】按鈕，即可復制元件。9.3.2編輯元件當編輯完一個元件，F(xiàn)lash會更新影片中的這個元件的所有實例。編輯元件必須在元件模式下進行。當編輯元件時，工作區(qū)的其他元素變暗，不能進行編輯。9.4創(chuàng)建與編輯實例實例是元件庫中的元件在影片中的應用。創(chuàng)建了元件以后，就可以在影片中的任何地方，包括其他元件中創(chuàng)建它的實例。9.4.1創(chuàng)建實例

元件創(chuàng)建完成以后，可以在影片中任意地方使用該元件的實例。需要注意的是：影片剪輯實例的創(chuàng)建和包含動畫的圖形實例的創(chuàng)建是不同的，影片剪輯只需要一幀就可播放動畫，但在編輯環(huán)境中不能演示動畫的效果；而包含動畫的圖形實例，必須在與其元件同樣長的幀中放置，才能顯示完整的動畫。9.4.2編輯實例

每個實例在創(chuàng)建時都擁有和其元件相同的屬性，但在動畫中全是一樣的實例，必然讓人感覺呆板。為了讓動畫更加生動，動畫制作者往往需要賦予每個實例不同的屬性，可以在【屬性】面板中進行編輯。9.5創(chuàng)建和管理庫庫用來存儲可重復使用的對象，包括元件、位圖、視頻或聲音等眾多資源。當導入位圖或聲音時，會自動被存儲到庫里面。而元件則需要建立后才會存儲在庫中，每個Flash文檔都擁有一個庫。9.5.1創(chuàng)建庫項目

在【庫】窗口的元素列表中，看見的文件類型是：圖形、按鈕、影片剪輯、媒體聲音、視頻、字體和位圖。前面三種是在Flash中產(chǎn)生的元件，后面兩種是導入素材后產(chǎn)生的。9.5.2刪除庫項目

在【庫】面板中不需要使用的庫項目，可以在【庫】面板中對其進行刪除，刪除庫項目的具體操作步驟如下。9.6實戰(zhàn)元件是一種經(jīng)常引用的元件，一些特定的動畫效果也需要借助于元件才能夠實現(xiàn)，靈活的運用元件可以有效的提高工作效率。本節(jié)通過實例講述其具體的使用。實戰(zhàn)1

——制作按鈕

利用元件制作按鈕效果如下圖所示。具體操作步驟如下。實戰(zhàn)2

——利用元件制作動畫

利用元件制作動畫效果如下圖所示。具體操作步驟如下。第10章創(chuàng)建基本Flash動畫教學內容：FlashCC是一款非常優(yōu)秀的矢量動畫制作軟件，它是當今功能最豐富、最優(yōu)秀的動畫制作軟件之一。在Flash中可以創(chuàng)建出豐富多彩的動畫效果，可以使對象在畫面中運動、改變大小、旋轉和改變顏色等。在一個完整的Flash動畫中，往往會應用到多個圖層，每個圖層分別控制不同的動畫效果，要創(chuàng)建效果較好的Flash動畫就需要為一個動畫創(chuàng)建多個圖層，以便于在不同的圖層中制作不同的動畫，通過多個圖層的組合形成復雜的動畫效果。

教學重點創(chuàng)建逐幀動畫創(chuàng)建補間動畫遮罩動畫的創(chuàng)建運動引導層動畫的創(chuàng)建件和實例的概念創(chuàng)建元件編輯元件創(chuàng)建與編輯實例創(chuàng)建和管理庫使用公共庫10.1創(chuàng)建逐幀動畫逐幀動畫是一種非常簡單的動畫方式，不設置任何補間，直接將連續(xù)的若干幀都設置為關鍵幀，然后在其中分別繪制內容，這樣連續(xù)播放的時候就會產(chǎn)生動畫效果了。10.2創(chuàng)建補間動畫補間動畫所處理的動畫必須是舞臺上的組件實例，多個圖形組合、文字、導入的素材對象。利用這種動畫，可以實現(xiàn)對象的大小、位置、旋轉、顏色以及透明度等變化設置。10.2.1創(chuàng)建動畫補間動畫下面利用動畫補間創(chuàng)建對象的淡出效果，具體操作步驟如下。10.2.2創(chuàng)建形狀補間動畫形狀補間動畫是對象從一個形狀到另一個形狀的漸變，只需要設置起始關鍵幀和結束關鍵幀的實體形狀，中間的漸變過程由Flash自動完成。10.3遮罩動畫的創(chuàng)建遮罩動畫可通過遮罩層創(chuàng)建，利用遮罩層可以決定被遮罩層中對象的顯示情況，在Flash中利用遮罩圖層可以制作出很多變幻莫測的效果。10.3.1創(chuàng)建遮罩層遮罩動畫也是Flash中常用的一種技巧。遮罩動畫就好比在一個板上打了各種形狀的孔，透過這些孔，可以看到下面的圖層。遮罩項目可以是填充的形狀、文字對象、圖形元件的實例或影片剪輯。10.3.2遮罩文本應用實例下面通過實例來講述遮罩文本的制作，具體操作步驟如下。10.4運動引導層動畫的創(chuàng)建在引導層中，可以像其他層一樣制作各種圖形和引入元件，但最終發(fā)布時引導層中的對象不會顯示出來。10.4.1創(chuàng)建運動引導層【運動引導層】以按鈕表示，使用【運動引導層】可以繪制運動路徑，可以將多個圖層鏈接到同一個運動引導層中，使多個對象沿著同一路徑運動，此時鏈接到【運動引導層】的多個圖層就成為【被引導層】?！颈灰龑印课挥凇具\動引導層】的下方。10.4.2運動引導層動畫應用實例創(chuàng)建引導層動畫效果，具體操作步驟如下。第11章使用Dreamweaver輕松創(chuàng)建多彩的文本網(wǎng)頁教學內容：本章主要介紹創(chuàng)建基本網(wǎng)頁文檔的方法，包括DreamweaverCC的工作界面、創(chuàng)建站點和列表，并用實例進一步說明插入文本的具體方法，同時還講解如何為頁面添加鏈接，包括圖片鏈接和熱點鏈接，最后還講述創(chuàng)建基本文本網(wǎng)頁。

教學重點DreamweaverCC的工作界面創(chuàng)建站點使用列表創(chuàng)建超級鏈接創(chuàng)建基本文本網(wǎng)頁11.1DreamweaverCC的工作界面DreamweaverCC是集網(wǎng)頁制作和網(wǎng)站管理于一身的【所見即所得】的網(wǎng)頁編輯軟件，它以強大的功能和友好的操作界面?zhèn)涫軓V大網(wǎng)頁設計者的歡迎，已經(jīng)成為網(wǎng)頁制作的首選軟件。DreamweaverCC的工作界面主要由以下幾部分組成：菜單欄、文檔窗口、屬性面板和面板組等。11.1.1菜單欄

菜單欄包括【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點】、【窗口】和【幫助】10個菜單。11.1.2插入欄

插入欄有兩種顯示方式，一種是以菜單方式顯示，另一種是以制表符方式顯示。插入欄中放置的是制作網(wǎng)頁過程中經(jīng)常用到的對象和工具，通過插入欄可以很方便地插入網(wǎng)頁對象，有【常用】插入欄、【結構】插入欄、【表單】插入欄、【媒體】插入欄、【jQueryMobile】插入欄、【jQueryUI】插入欄、【模板】插入欄、【收藏夾】插入欄和【隱藏標簽】。11.1.3屬性面板

【屬性】面板主要用于查看和更改所選對象的各種屬性，每種對象都具有不同的屬性。在【屬性】面板包括兩種選項，一種是【HTML】選項，將默認顯示文本的格式、樣式和對齊方式等屬性。另一種是【CSS】選項，單擊【屬性】面板中的【CSS】選項，可以在【CSS】選項中設置各種屬性。11.1.4面板租Dreamweaver中的面板可以自由組合而成為面板組。每個面板組都可以展開和折疊，并且可以和其他面板組?？吭谝黄鸹蛉∠？?。面板組還可以?？康郊傻膽贸绦虼翱谥小＿@樣就能夠很容易的訪問所需的面板，而不會使工作區(qū)變得混亂。11.1.5文檔窗口

【文檔】窗口包括了控制文檔窗口視圖的按鈕和一些比較常用的彈出菜單，用戶可以通過【代碼】、【拆分】、【設計】和【實時視圖】4個按鈕使工作區(qū)在不同的視圖模式之間進行切換。11.2創(chuàng)建本地站點建立本地站點就是在本地計算機硬盤上建立一個文件夾并用這個文件夾作為站點的根目錄，然后將網(wǎng)頁及其他相關的文件，如圖片、聲音、Html文件存放在該文件夾中。當準備發(fā)布站點時，將文件夾中的文件上傳到Web服務器上即可。制作網(wǎng)頁之前要首先建立一個本地站點。11.3插入文本在Dreamweaver中可以通過直接輸入、復制和粘貼的方法將文本插入到文檔中，可以在文本的字符與行之間插入額外的空格，還可以插入特殊字符和水平線等。11.3.1插入普通文本文本是基本的信息載體，是網(wǎng)頁中的基本元素，瀏覽網(wǎng)頁時，獲取信息最直接、最直觀的方式就是通過文本。在Dreamweaver中添加文本的方法非常簡單，具體操作步驟如下。11.3.2設置文本屬性

如果網(wǎng)頁中的文本樣式太單調，會大大降低網(wǎng)頁的外觀效果，通過對文本格式的設置可使文本變得美觀，讓網(wǎng)頁更具魅力。選中需設置格式的文本，然后在【屬性】面板中可以設置文本的具體屬性。11.3.3插入特殊字符

制作網(wǎng)頁時，有時要輸入一些鍵盤上沒有的特殊字符，如日元符號、注冊商標等，這就需要使用Dreamweaver的字符功能。下面通過版權符號的插入講述字符的添加，具體操作步驟如下11.4使用列表在網(wǎng)頁編輯中，有時會使用列表。包含層次關系、并列關系的標題都可以制作成列表形式，這樣有利于訪問者理解網(wǎng)頁內容。列表包括項目列表和編號列表，下面分別進行介紹。11.4.1插入項目列表

如果項目列表之間是并列關系，則需要生成項目符號列表。項目列表又稱無序列表，這種列表的項目之間沒有先后順序。項目列表前面一般用項目符號作為前導字符，具體操作步驟如下。11.4.2插入編號列表

當網(wǎng)頁內的文本需要按序排列時，就應該使用編號列表。編號列表的項目符號可以在阿拉伯數(shù)字、羅馬數(shù)字和英文字母中做出選擇。具體操作步驟如下。11.5創(chuàng)建超級鏈接

鏈接是從一個網(wǎng)頁或文件到另一個網(wǎng)頁或文件的訪問路徑，不但可以指向圖像或多媒體文件，還可以指向電子郵件地址或程序等。當網(wǎng)站訪問者單擊鏈接時，將根據(jù)目標的類型執(zhí)行相應的操作，即在Web瀏覽器中打開或運行。11.5.1創(chuàng)建下載文件鏈接

如果要在網(wǎng)站中提供下載資料，就需要為文件提供下載鏈接，如果超級鏈接指向的不是一個網(wǎng)頁文件，而是其他文件例如zip、mp3、exe文件等，單擊鏈接的時候就會下載文件。具體操作步驟如下。11.5.2創(chuàng)建電子郵件鏈接E-mail鏈接也叫電子郵件鏈接，電子郵件地址作為超鏈接的鏈接目標與其他鏈接目標不同。當用戶在瀏覽器上單擊指向電子郵件地址的超鏈接時，將會打開默認的郵件管理器的新郵件窗口，其中會提示用戶輸入信息并將該信息傳送給指定的E-mail地址。具體操作步驟如下。11.5.3創(chuàng)建圖像的熱點鏈接

同一個圖像的不同部分可以鏈接到不同的文檔，這就是熱點鏈接。要使圖像特定部分成為超級鏈接，就要在圖像中設置熱點，然后再創(chuàng)建鏈接。創(chuàng)建圖像熱點鏈接具體操作如下。11.6實戰(zhàn)——創(chuàng)建基本文本網(wǎng)頁本章主要講述了創(chuàng)建網(wǎng)頁文本的基本知識，下面通過實例講述如何創(chuàng)建基本文本網(wǎng)頁的效果，具體操作步驟如下。第12章巧用絢麗的圖像和多媒體讓網(wǎng)頁動起來教學內容：本本章主要介紹在網(wǎng)頁中插入圖像和多媒體，包括在網(wǎng)頁中插入圖像及設置圖像屬性，并用實例進一步說明插入鼠標經(jīng)過圖像的具體方法，同時還講解如何為頁面添加聲音、視頻文件和Flash動畫，最后通過實例講述了插入圖像和多媒體。

教學重點插入網(wǎng)頁圖像插入鼠標經(jīng)過圖像添加聲音和視頻文件添加Flash動畫創(chuàng)建圖文混排網(wǎng)頁在網(wǎng)頁中插入媒體實例12.1在網(wǎng)頁中插入圖像圖像是網(wǎng)頁中最主要的元素之一，不但能美化網(wǎng)頁，而且與文本相比能夠更直觀地說明問題，使所表達的意思一目了然。這樣圖像就會為網(wǎng)站增添生命力，同時也加深用戶對網(wǎng)站的印象。12.1.1在網(wǎng)頁中插入圖像

前面介紹了網(wǎng)頁中常見的3種圖像格式，下面就來學習如何在網(wǎng)頁中使用圖像。在使用圖像前，一定要有目的地選擇圖像，最好運用圖像處理軟件美化一下圖像，否則插入的圖像可能會不美觀，非常死板。在網(wǎng)頁中使用圖像，具體制作步驟如下。12.1.2設置圖像屬性

將圖像插入文檔后，DreamweaverCC會自動按照圖像的大小顯示，所以還需要對圖像的屬性進行具體地調整，如大小、位置及對齊等。選中圖像，在圖像屬性面板中可以自定義圖像的屬性。12.1.3裁剪圖像DreamweaverCC中提供了直接在文檔中裁剪圖像的功能，不再需要在其他圖像編輯軟件中進行操作。裁剪圖像的具體操作步驟如下。12.1.4調整圖像的亮度和對比度

調整圖像的亮度和對比度的具體操作步驟如下。12.1.5銳化圖像

銳化圖像的具體操作步驟如下。12.2插入鼠標經(jīng)過圖像所謂鼠標經(jīng)過圖像就是在瀏覽網(wǎng)頁時當鼠標指針移到圖像上時它會發(fā)生變化的圖像。使用兩個文件圖像創(chuàng)建鼠標經(jīng)過圖像：原始圖像（當首次載入網(wǎng)頁時顯示的圖像）和鼠標經(jīng)過圖像（當鼠標指針移過原始圖像時顯示的圖像）。創(chuàng)建鼠標經(jīng)過圖像網(wǎng)頁具體操作步驟如下。12.3添加聲音在網(wǎng)頁中可以插入Mid、AIFF、WAV、MP3等類型的聲音文件。聲音文件需要占用大量的磁盤空間和大量的內存。一般情況下，最好使用單聲道聲音，如果使用立體聲的話，那么它的數(shù)據(jù)量將是單聲道聲音的兩倍。在添加聲音文件前，最好能先壓縮聲音文件。隨著寬帶技術的發(fā)展和推廣，互聯(lián)網(wǎng)上出現(xiàn)了許多視頻網(wǎng)站。越來越多的人選擇觀看在線視頻，同時也有很多的網(wǎng)站提供在線視頻服務，視頻文件的格式非常多，常見的有MPEG、AVI、WMV、RM和MOV等。12.3.1添加聲音

通過代碼提示，可以在【代碼】視圖中插入代碼，在輸入某些字符時，將顯示一個列表，列出完成條目所需要的選項，下面通過代碼提示講述插入背景音樂，具體操作步驟如下。12.3.2設置文本屬性

利用視頻技術，在網(wǎng)上可以進行視頻聊天、在線看電影等操作。在網(wǎng)頁中插入視頻主要有兩種方法，一種方法是利用ActiveX插入，另一種方法是利用插件插入。下面通過實例介紹在網(wǎng)頁中插入視頻文件的方法，具體的操作步驟如。12.4添加Flash動畫在網(wǎng)頁文檔中插入Flash動畫、Flash按鈕和Flash文本等，可以增加網(wǎng)頁的動感，使網(wǎng)頁更具吸引力，因此多媒體元素在網(wǎng)頁中應用越來越來廣泛。12.5實戰(zhàn)

本章主要講述了如何在網(wǎng)頁中插入圖像、設置圖像屬性、在網(wǎng)頁中簡單編輯圖像和插入其他圖像元素等，下面通過以上所學到的知識來具體講述。實戰(zhàn)1——創(chuàng)建圖文混排網(wǎng)頁DreamweaverCC提供了強大的圖文混排功能，為網(wǎng)頁設計注入活力。下面通過實例講述圖文混排的方法，具體操作步驟如下。實戰(zhàn)2——在網(wǎng)頁中插入媒體實例

在網(wǎng)頁中插入媒體的具體操作圖像如下。第13章使用表格輕松排列和布局網(wǎng)頁元素教學內容：表格是網(wǎng)頁設計制作時不可缺少的重要元素。無論用于排列數(shù)據(jù)還是在頁面上對文本進行排版，表格都表現(xiàn)出了強大的功能。它以簡潔明了和高效快捷的方式，將數(shù)據(jù)、文本、圖像、表單等元素有序的顯示在頁面上，從而設計出版式漂亮的網(wǎng)頁。表格最基本的作用就是讓復雜的數(shù)據(jù)變得更有條理，讓人容易看懂，在設計頁面時，往往要利用表格來布局定位網(wǎng)頁元素。通過對本章的學習，應掌握插入表格、設置表格屬性、編輯表格的方法；能夠利用表格布局網(wǎng)頁。

教學重點插入表格和表格元素選擇表格元素表格的基本操作排序及整理表格內容利用表格排列數(shù)據(jù)創(chuàng)建細線表格13.1插入表格和表格元素在Dreamweaver中，表格可以用于制作簡單的圖表，還可以用于安排網(wǎng)頁文檔的整體布局，起著非常重要的作用。利用表格設計頁面布局，可以不受分辨率的限制。13.1.1插入表格

在Dreamweaver中插入表格非常簡單，具體操作步驟如下。13.1.2設置表格屬性

直接插入的表格有時并不能讓人滿意，在Dreamweaver中，通過設置表格或單元格的屬性，可以很方便地修改表格的外觀。13.1.3添加內容到單元格

插入表格后，就可以直接向表格中添加內容了，將光標置于表格的單元格中，分別輸入相應的文字。13.2選擇表格元素要想在文檔中對一個元素進行編輯，那么首先要選中它；同樣，要想對表格進行編輯，首先也要選中它。選擇表格操作可以分為選中整個表格、選中單元格等幾種情況，下面分別進行介紹。13.2.1選取表格選擇整個表格有以下幾種方法。單擊表格線的任意位置。將光標置于表格內的任意位置，選擇菜單中的【修改】|【表格】|【選擇表格】命令。將光標放置到表格的左上角，按住鼠標左鍵不放，拖曳鼠標指針到表格的右下角，將整個表格中的單元格選中，單擊鼠標右鍵，在彈出的菜單中選擇【表格】|【選擇表格】選項。將光標放置在表格的任意位置，單擊文檔窗口左下角的<table>標簽，選中表格后，選項控柄就出現(xiàn)在表格的四周，13.2.2選取行或列選擇表格的行或列有以下兩種方法。當鼠標指針位于要選擇行首或列頂時，鼠標指針形狀變成了

箭頭或

箭頭時，單擊鼠標左鍵即可以選中行或列。將光標置于要選擇的行首或列頂，按住鼠標左鍵不放從左至右拖曳或者從上至下拖曳，即可選中行或者列。13.2.3選取單元格選擇一個單元格有以下幾種方法。選取單個單元格的方法是在要選擇的單元格中單擊鼠標左鍵，并拖曳鼠標至單元格末尾。按住<Ctrl>鍵，然后單擊單元格可以將其選中。將光標放置在單元格中，單擊文檔窗口左下角的<td>標簽。13.3表格的基本操作選擇了表格后，便可以通過剪切、復制和粘貼等一系列的操作實現(xiàn)對表格的編輯操作。表格的行數(shù)、列數(shù)可以通過增加、刪除行和列及拆分、合并單元格來改變。13.3.1調整表格和單元格的大小

調整表格的高度和寬度時，表格中所有單元格將按比例相應改變大小。13.3.2添加或刪除行或列

在已創(chuàng)建的表格內增加行、列，要先將光標放置在要插入行、列的單元格中，然后通過以下方法增加。13.3.3拆分單元格拆分單元格有以下幾種方法。將光標放置在要拆分的單元格中，選擇菜單中的【修改】|【表格】|【拆分單元格】命令，打開【拆分單元格】對話框，在對話框中進行相應的設置，單擊【確定】按鈕，即可拆分單元格。將光標放置在要拆分的單元格中，單擊鼠標右鍵，在彈出的菜單中選擇【表格】|【拆分單元格】選項，打開【拆分單元格】對話框，也可以拆分單元格。將光標放置在需要拆分的單元格中，在【屬性】面板中單擊【拆分單元格為行或列】按鈕，打開【拆分單元格】對話框，也可以拆分單元格。13.3.4合并單元格

合并單元格有以下幾種方法。選中要合并的單元格，選擇菜單中的【修改】|【表格】|【合并單元格】命令，即可將選中的單元格合并。選中合并的單元格，單擊鼠標右鍵，在彈出的菜單中選擇【表格】|【合并單元格】選項，即可合并單元格。選中合并的單元格，在【屬性】面板中單擊【合并所選單元格，使用跨度】按鈕，即可將選中的單元格合并。13.4排序及整理表格內容DreamweaverCC提供了導入表格式數(shù)據(jù)和表格排序功能，使用這兩個功能可以整理表格內的數(shù)據(jù)。13.4.1導入表格式數(shù)據(jù)在Dreamweaver中，可以將其他應用軟件制作完成后的表格數(shù)據(jù)導入到網(wǎng)頁中，導入的數(shù)據(jù)要具有制表符、逗號、分號、引號或者其他定界符。具體操作步驟如下。13.4.2排序表格

如果想要使輸入的表格數(shù)據(jù)有一定的規(guī)律性，在Dreamweaver中可以對其進行排序，具體操作步驟如下。13.5實戰(zhàn)

表格無疑是網(wǎng)頁制作中最為重要的一個對象，因為通常網(wǎng)頁都是依靠表格來排列數(shù)據(jù)的，它直接決定了網(wǎng)頁是否美觀、內容組織是否清晰。合理地利用表格可以方便地美化頁面。實戰(zhàn)1——創(chuàng)建細線表格

本例將講述如何制作細線表格，從而使網(wǎng)頁更加美觀精細。具體操作步驟如下。實戰(zhàn)2——利用表格排列數(shù)據(jù)

本利用表格排列數(shù)據(jù)的具體操作步驟如下。第14章使用CSS樣式表美化網(wǎng)頁教學內容：對于已經(jīng)設計好的頁面及頁面中的元素，都可以通過CSS對其進行修飾和美化，做到頁面內容和顯示效果的相分離。CSS還有一個較強大的濾鏡功能，它可以不使用圖像處理軟件即能實現(xiàn)很多較好的濾鏡效果。本章主要講述CSS樣式表、定義CSS屬性、鏈接或導出外部樣式表，最后通過實例講述CSS在網(wǎng)頁中的使用。

教學重點了解CSS樣式表CSS基本語法設置CSS屬性鏈接到或導出外部CSS樣式表應用CSS樣式定義字體大小應用CSS樣式制作陰影文字14.1了解CSS樣式表CSS（CascadingStyleSheet，層疊樣式表）是一種制作網(wǎng)頁的新技術，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設計必不可少的工具之一。實際上，CSS是一系列格式規(guī)格或樣式的集合，主要用于控制頁面的外觀，是目前網(wǎng)頁設計中的一種常用技術與手段。CSS具有強大的頁面美化功能。通過使用CSS，可以控制許多僅使用HTML標記無法控制的屬性，并能輕而易舉地實現(xiàn)各種特效。14.2CSS基本語法CSS的語法結構僅由3部分組成，分別為選擇符、樣式屬性和值，基本語法如下。14.3設置CSS屬性CSS樣式用來定義字體、顏色、邊距和字間距等屬性，可以使用DreamweaverCC來對所有的CSS屬性進行設置。CSS屬性被分為9大類，分別是類型、背景、區(qū)塊、方框、邊框、列表、定位、擴展和過渡，下面分別進行介紹。14.3.1設置CSS類型屬性在【分類】列表中選擇【類型】選項，【類型】屬性用于設置網(wǎng)頁中文本的字體、顏色及字體風格等。14.3.2設置CSS背景屬性在【分類】列表中選擇【背景】選項，背景屬性的功能主要是在網(wǎng)頁的元素后面添加固定的背景顏色或圖像。14.3.3設置CSS區(qū)塊屬性在【分類】列表中選擇【區(qū)塊】選項，可以定義樣式的間距和對齊設置。14.3.4設置CSS方框屬性在【分類】列表中選擇【方框】選項。14.3.5設置CSS邊框屬性在【分類】列表中選擇【邊框】選項，可以定義邊框的屬性。14.3.6設置CSS列表屬性在【分類】列表中選擇【列表】選項，為列表選項卡定義列表設置。14.3.7設置CSS定位屬性在【分類】列表中選擇【定位】選項。14.3.8設置CSS擴展屬性在【分類】列表中選擇【擴展】選項。14.3.9設置過渡屬性在過去的幾年中，大多數(shù)都是使用JavaScript來實現(xiàn)過渡效果。使用CSS可以實現(xiàn)同樣的過渡效果。過渡效果最明顯的表現(xiàn)就是當用戶把鼠標懸停在某個元素上時高亮它們，如鏈接、表格、表單域、按鈕等。過渡可以給頁面增加一種非常平滑的外觀。14.4鏈接到或導出外部CSS樣式表鏈接外部樣式表可以方便地管理整個網(wǎng)站中的網(wǎng)頁風格，它讓網(wǎng)頁的文字內容與版面設計分開，只要在一個CSS文檔中定義好網(wǎng)頁的外觀風格，所有鏈接到此CSS文檔的網(wǎng)頁，便會按照定義好的風格顯示網(wǎng)頁。14.3.1創(chuàng)建內部樣式表內部樣式表只包含在當前操作的網(wǎng)頁文檔中，并只應用于相應的網(wǎng)頁文檔，因此，在制作背景網(wǎng)頁的過程中，可以隨時創(chuàng)建內部樣式表，創(chuàng)建CSS內部樣式表的具體操作步驟如下。14.4.2創(chuàng)建外部樣式表外部樣式表是一個獨立的樣式表文件，保存在本地站點中，外部樣式表不僅可以應用在當前的文檔中，還可以根據(jù)需要應用在其他的網(wǎng)頁文檔中，甚至在整個站點中應用。14.4.3鏈接外部樣式表編輯外部CSS樣式表時，鏈接到該CSS樣式表的所有文檔都將會全部更新，以反映所做的修改。用戶可以導出文檔中包含的CSS樣式以創(chuàng)建新的CSS樣式表，然后附加或鏈接到外部樣式表以應用那里所包含的樣式。14.5實戰(zhàn)1應用CSS樣式定義字體大小利用CSS可以固定字體大小，使網(wǎng)頁中的文本始終不隨瀏覽器改變而發(fā)生變化，總是保持著原有的大小，具體操作步驟如下。實戰(zhàn)2應用CSS樣式制作陰影文字濾鏡能對樣式所控制的對象應用特殊效果（包括模糊和反轉），使用CSS樣式制作陰影文字的具體的操作步驟如下。第15章用CSS+DIV靈活布局頁面教學內容：CSS＋Div是網(wǎng)站標準中常用的術語之一，CSS和Div的結構被越來越多的人采用，很多人都拋棄了表格而使用CSS來布局頁面，它的好處很多，可以使結構簡潔，定位更靈活，CSS布局的最終目的是搭建完善的頁面架構。通常在XHTML網(wǎng)站設計標準中，不再使用表格定位技術，而是采用CSS+Div的方式實現(xiàn)各種定位。

教學重點初識DIVCSS定位與DIV布局CSS+DIV布局的常用方法使用CSS+DIV布局的典型模式15.1初識DIV在CSS布局的網(wǎng)頁中，<Div>與<Span>都是常用的標記，利用這兩個標記，加上CSS對其樣式的控制，可以很方便地實現(xiàn)網(wǎng)頁的布局。15.1.1DIV概述過去最常用的網(wǎng)頁布局工具是<table>標簽，它本是用來創(chuàng)建電子數(shù)據(jù)表的，由于<table>標簽本來不是要用于布局的，因此設計師們不得不經(jīng)常以各種不尋常的方式來使用這個標簽——如把一個表格放在另一個表格的單元里面。這種方法的工作量很大，增加了大量額外的HTML代碼，并使得后面要修改設計很難。15.1.2CSS+DIV布局的優(yōu)勢掌握基于CSS的網(wǎng)頁布局方式，是實現(xiàn)Web標準的基礎。在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變網(wǎng)頁的外觀和格式。15.2CSS定位與DIV布局CSS對元素的定位包括相對定位和絕對定位，同時，還可以把相對定位和絕對定位結合起來，形成混合定位。15.2.1盒子模型如果想熟練掌握Div和CSS的布局方法，首先要對盒模型有足夠的了解。盒子模型是CSS布局網(wǎng)頁時非常重要的概念，只有很好地掌握了盒子模型以及其中每個元素的使用方法，才能真正的布局網(wǎng)頁中各個元素的位置。所有頁面中的元素都可以看作一個裝了東西的盒子，盒子里面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。15.2.2元素的定位float屬性定義元素在哪個方向浮動。以往這個屬性應用于圖像，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。float是相對定位的，會隨著瀏覽器的大小和分辨率的變化而改變。float浮動屬性是元素定位中非常重要的屬性，常常通過對DIV元素應用float浮動來進行定位。15.2.3position定位

position的原意為位置、狀態(tài)、安置。在CSS布局中，position屬性非常重要，很多特殊容器的定位必須用position來完成。position屬性有4個值，分別是static、absolute、fixed、relative，static是默認值，代表無定位。15.3CSS+DIV布局的常用方法無論使用表格還是CSS，網(wǎng)頁布局都把大塊的內容放進網(wǎng)頁的不同區(qū)域里面。有了CSS，最常用來組織內容的元素就是<div>標簽。CSS排版是一種很新的排版理念，首先要將頁面使用<div>整體劃分為幾個板塊，然后對各個板塊進行CSS定位，最后在各個板塊中添加相應的內容。15.3.1使用DIV對頁面整體規(guī)劃在利用CSS布局頁面時，首先要有一個整體的規(guī)劃，包括整個頁面分成哪些模塊，各個模塊之間的父子關系等。以最簡單的框架為例，頁面由Banner、主體內容（content）、菜單導航（links）和腳注（footer）幾個部分組成，各個部分分別用自己的id來標識。15.3.2設計各塊的位置當頁面的內容已經(jīng)確定后，則需要根據(jù)內容本身考慮整體的頁面布局類型，如是單欄、雙欄還是三欄等。15.3.3使用CSS定位整理好頁面的框架后，就可以利用CSS對各個板塊進行定位，實現(xiàn)對頁面的整體規(guī)劃，然后再往各個板塊中添加內容。15.4使用CSS+DIV布局的典型模式現(xiàn)在一些比較知名的網(wǎng)頁設計全部采用的DIV+CSS來排版布局，DIV+CSS的好處可以使HTML代碼更整齊，更容易使人理解，而且在瀏覽時的速度也比傳統(tǒng)的布局方式快，最重要的是它的可控性要比表格強得多。下面介紹常見的布局類型。15.4.1一列固定寬度一列式布局是所有布局的基礎，也是最簡單的布局形式。一列固定寬度中，寬度的屬性值是固定像素。下面舉例說明一列固定寬度的布局方法。15.4.2一列自適應自適應布局是在網(wǎng)頁設計中常見的一種布局形式，自適應的布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度值，是一種非常靈活的布局形式，良好的自適應布局網(wǎng)站對不同分辨率的顯示器都能提供最好的顯示效果。自適應布局需要將寬度由固定值改為百分比。15.4.3兩列固定寬度兩列固定寬度非常簡單，兩列的布局需要用到兩個div，分別為兩個div的id設置為left與right，表示兩個div的名稱。首先為它們制定寬度，然后讓兩個div在水平線中并排顯示，從而形成兩列式布局。15.4.4兩列寬度自適應下面使用兩列寬度自適應性，以實現(xiàn)左右列寬度能夠做到自動適應，設置自適應主要通過寬度的百分比值設置。15.4.5兩列右列寬度自適應在實際應用中，有時候需要右列固定寬度，右列根據(jù)瀏覽器窗口大小自動適應，在CSS中只要設置在左列的寬度即可，如上例中左右列都采用了百分比實現(xiàn)了寬度自適應，這里只要將左列寬度設定為固定值，右列不設置任何寬度值，并且右列不浮動。15.4.6三列浮動中間寬度自適應使用浮動定位方式，從一列到多列的固定寬度及自適應，基本上可以簡單完成，包括三列的固定寬度。而在這里給我們提出了一個新的要求，希望有一個三列式布局，基中左列要求固定寬度，并居左顯示，右列要求固定寬度并居右顯示，而中間列需要在左列和右列的中間，根據(jù)左右列的間距變化自動適應。第16章利用行為輕易實現(xiàn)網(wǎng)頁特效教學內容：行為可以說是DreamweaverCC中最有特色的功能，它可以讓用戶不用編寫一行JavaScript代碼即可實現(xiàn)多種動態(tài)頁面效果。DreamweaverCC中自帶的行為多種多樣、功能強大。在Dreamweaver中，利用行為可以為頁面制作出各種各樣的特殊效果，如打開瀏覽器窗口、設置文本、交換圖像等網(wǎng)頁特殊效果。

教學重點行為概述使用Dreamweaver內置行為使用JavaScript16.1行為概述為了更好地理解行為的概念，下面分別解釋與行為相關的3個重要的概念：【對象】、【事件】和【動作】。16.1.1使用【行為】面板DreamweaverCC才提供了豐富的內置行為，利用這些行為，不需要編寫任何代碼，就可以實現(xiàn)一些強大的交互性功能。另外，用戶也可以從互聯(lián)網(wǎng)上下載一些第三方提供的動作來使用。16.1.2關于動作動作具有設置更換圖片、彈出警告對話框等特殊效果的功能，只有當某個事件發(fā)生時，才能被執(zhí)行。16.1.3關于事件事件就是在特定情況下發(fā)生選定行為動作的功能。例如，如果運用了單擊圖片之后轉移到特定站點上的行為，因為事件被指定了onClick，所以執(zhí)行了在單擊圖片的一瞬間轉移到其他站點的這一動作。16.2使用Dreamweaver內置行為Dreamweaver內