1、1網頁設計與動態網站開發2模塊01 網頁賞析模塊引導網頁設計作為一種視覺語言，特別講究編排、布局和色彩，雖然主頁的設計不等同于平面設計，但它們有許多相近之處。版式設計通過文字圖形的空間組合，表達出和諧與美。為了達到最佳的視覺表現效果，設計者需要反復推敲整體布局和色彩匹配的合理性，使瀏覽者有一個流暢的視覺體驗。本模塊主要通過對網頁界面布局、網頁界面色彩的賞析，了解網站風格及創意的重要性，以及有關網頁界面布局、網頁界面色彩的基礎知識，為后續學習打下基礎。34學習目標能力目標1. 能夠分析頁面結構圖。2. 能夠繪制網頁布局。知識目標1.了解版面布局的特點。2. 掌握常見的版面布局形式。課時分配1課時

2、（授課0.5課時，實踐0.5課時）。5應知技能欣賞優秀的網頁，學習他人之長，激發學習網頁設計的興趣。分析優秀網頁的布局結構、視覺效果，留下直觀的第一印象，為學習制作網頁奠定基礎。對網頁的組成元素有一個初步印象。學習創建網站、制作網頁之前，我們先瀏覽幾個典型頁面布局，對這些網站的主頁進行分析，了解典型的網頁的布局結構。網頁界面布局6應知技能國字型布局一般最上面是網站標題及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種布局的優點是充分利用版面，信息量大，與其他頁面的鏈接切換方便，缺點是頁面擁擠

3、，四面封閉，廣告占面積大，令人感到憋氣。7應知技能T字型布局頁面頂部為橫條網站標志和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種布局方式。這樣的布局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人“看之無味”。8應知技能三字型布局這是一種簡潔明快的網頁布局，在高校中用得比較多。這種布局的特點是在頁面上由橫向兩條色塊將網頁整體分割為3部分，色塊中大多放置廣告條與大圖片。如圖所示即是一種三字形布局的網頁。9應知技能川字型布局“川”字

4、形布局：整個頁面在垂直方向分為三列，網站的內容按欄目分布在這三列中，最大限度地突出主頁的索引功能，一般適用在欄目較多的網站里。10應知技能封面型布局這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。 11應知技能“國”字型布局“廠”字型布局“框架”型布局“封面”型布局“Flash”型布局為了達到最佳的視覺表現效果，應講究整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。12模擬任務任務背景 從網頁的界面設計

5、布局特色、風格、實用性、與網頁所承載內容的匹配性以及其他方面對典型網站頁面作出詳細評析，總結其優點和不足。任務要求 必須結合具體網站進行，網站自選，要求至少對三個網站進行布局賞析，并且所選擇的三個網站必須包括該網站的主頁，主頁的布局必須是比較常用布局，報告中需寫明所選擇網站主頁的地址，例如，某同學若選擇年代網網站。 對所選擇的網站進行布局賞析，主要從文字、圖像、版式、視覺流程、布局等方面介紹網站設計的基本構成與創意思維。任務1 網頁界面布局13知識拓展網頁布局設計黃金分割使用黃金分割是非常簡單的。例如找到頁面中Main Content主要內容和sidebar列表的寬度900px。使用內容區域總

6、的寬度除以1.618，然后得到556.24px。不需要很精確，就用556px?，F在就能知道主要內容元素是556px的寬度，sidebar是344px。也可以使用黃金分割到其他元素的寬度和高度。14獨立實踐任務背景 阿里巴巴中國站（）被google收錄的中文網頁數量要遠遠高于同類網站的平均水平，更重要的是，阿里巴巴的網頁質量比較高，潛在用戶更容易通過搜索引擎檢索發現發布在阿里巴巴網站的商業信息，阿里巴巴也因此獲得更大的網站訪問量和更多的用戶。任務要求對阿里巴巴的網頁設計布局，從下面5個方面進行分析。從整體結構看從頁面的相互關系看頁面分割的角度看從頁面對比的角度看從頁面和諧的角度看任務2 界面布局

7、分析學習目標15能力目標1. 了解色彩基本理論。2. 了解色彩搭配的技巧。知識目標1.掌握網頁常用的配色。2. 網頁中的色彩設計。課時分配1課時（授課0.5課時，實踐0.5課時）。應知技能161.公司類網站賞析該首頁給人以清新、爽朗的感受，首頁的整體布局為“上、中、下”三個版塊，中間的主體內容又分為“左、中、右”三個版塊。顏色對比較為強烈，重點突出主要采用淺灰和玫瑰紅為主，淺灰色給人柔和、高雅的感受，玫瑰紅給人溫馨、浪漫的感受。首頁題頭的動畫效果體現了海爾集團的理念和品質，讓人既想到家的感覺又能記住該品牌。導航欄的顏色鮮明，文字與背景色對比強烈，引人注目。二級導航采用橫式排列，其優點是不會遮住

8、下面正文的內容。應知技能172.旅游類網站賞析欣賞“鳳凰古城旅游網”，網址是：。該首頁給人的視覺效果是一種古樸的氣息迎面撲來，整體色彩、圖文搭配十分協調，咖啡色的運用和圖片的搭配十分和諧。主頁題頭的鳳凰古城圖片恰到好處，突出了主題，同時也起到了廣告作用。導航欄的文字頗具特色。首頁的模塊劃分采用的是左右兩大模塊，內容劃分清晰。應知技能183.體育類網站賞析欣賞“中國大眾體育網”，網址是：該網站整體視覺感受簡潔、現代感較強。頂部導航和banner用了大塊的紅色，刺激性很強，給人興奮、激動、緊張的感覺。左側的圖片有很強的視覺沖擊效果。左側導航紅黃色漸變與banner色彩過渡協調一致。整體顏色采用紅黃

9、白三色搭配，既統一又有變化，主體突出。應知技能194.教育培訓類網站賞析欣賞新東方教育網站，網址是：其首頁主要列出了導航菜單和網站地圖，簡潔明了、排列整齊。顏色的搭配主要采用黃、綠色調，采用了類似色的搭配，給人以清新、和諧的視覺美感。該網頁給人的視覺感受是和諧美觀，在模塊的劃分上比較明顯，采用“左、中、右”三個板塊每個內容板塊都采用了不同顏色和形式做標題裝飾，在視覺方面也給人以醒目和新穎的感覺。應知技能205.班級網站賞析欣賞海事二班的網站，網址是：該網站首頁給人的感覺是重彩型視覺感受強烈。整個頁面色彩運用大面積的藍色漸變為底色，使文字內容不多的頁面顯得不空洞，整個色彩運用藍色和綠色為主的搭配

10、，類似色的運用給人以和諧統一的視覺效果。題頭采用簡單清晰的圖片，給人以清新、大氣、和諧的簡單之美。模塊劃分也清晰，其中也采用了動畫畫面，從靜態中突出靈動感。整體給人溫馨、和諧夢幻的感覺。應知技能JPEG格式適合于照片圖像，GIF格式適合于包含純色的圖像，例如插圖和線條圖。利用圖像編輯軟件來放大或縮小圖像屏幕顯示圖像的分辨率一般為72dpi。制作圖像時，不必使用比此再高的分辨率。如果建立的圖像中只有黑色和白色，處理時可將它保存為黑白圖像格式，這樣可以減少圖像文件的大小。如果設計的GIF格式圖像包含了漸變和直線，應盡量使得它們水平，因為GIF格式以每條水平線為基礎來壓縮。嘗試各種不同的JPEG壓縮

11、率使用合適的色彩模式。慎用動畫。21網頁上使用圖像要注意的問題網頁制作基本流程應知技能 22規劃網站內容整理素材制作網頁測試站點發布網站23模擬任務任務背景給一個網站選擇配色方案并不容易，很考驗設計師的想象力跟創意。設計人員還是需要去經歷和親眼去發現一些美，只有這樣才能開拓你新的思路和想法。任務要求 必須結合具體網站進行，網站自選，要求至少對三個網站進行色彩賞析，并且所選擇的三個網站必須包括該網站的主頁，報告中需寫明所選擇網站主頁的地址，例如，某同學若選擇搜狐網站。任務1 網頁界面色彩24知識拓展HTML簡介：HTML（Hyper Text Markup Language）又稱超文本標識語言，

12、是一種標識性的語言，是網頁設計的最初語言。文件的擴展名:“html”或“htm”。HTML文檔的基本結構：文件開始 標頭區開始 .標題區 標頭區結束 文件主體內容開始 文件主體內容 文件主體內容結束 文件結束其中之間表示這是個網頁文件，是必有的標記。一個HTML文件總是由文件頭（HEAD）和文件體（BODY）兩部分組成。標記和用來說明本文件是一個HTML文件。25知識拓展簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網站, Yahoo! HTML在瀏覽器中被解釋知識拓展26歡迎光臨無名的主頁歡迎光臨無名的主頁樣 例標記需要放在中標記中有很多是成對出現，一頭一尾（結束標記前要加“/”）所有

13、標記中的字母不區分大小寫通常以“.html”或“htm”為文件后綴標記的書寫格式如下： 文件內容HTML特點 HyperText Markup Language 獨立實踐27任務背景在開始設計我們的第一個網站之前，首先要收集資料，學習、借鑒其他網站的精彩創意。任務要求訪問家教類的網站，了解網站色彩匹配、欄目的設置、網站的風格、頁面布局、設計風格及組成元素。/shanghai/任務2訪問Internet上的家教類網站 28下次再見！29模塊02 網頁動畫應用模塊引導Flash和Fireworks都能做動畫，而且他們現在都同屬Adobe公司，大多數網頁動畫都是用Flash這個軟件做的，因為該軟件做

14、出來的動畫文件很小，下載和打開的速度快。他們兩個各有各的優勢，Flash是專業做動畫的，可以制作一幅幅生動的Flash動畫放置在網頁中，使枯燥的網頁變得生動活潑起來，使網頁更加有吸引力，更增加了與瀏覽者的互動性。Fireworks的動畫是GIF圖片格式的，做出來的動畫文件也很小，Fireworks的切片功能，可以使動畫的交互制作變得更方便，相對于Flash而言，并不需要很高的技術，很容易實現對圖片的動畫展示。本模塊主要介紹網頁設計中動畫的幾種經典表現，圖片動畫展示、GIF動畫設計的基本方法和典型實例的制作。學習者可以根據自己專業的特點，對本模塊的內容進行選擇。3031學習目標能力目標1. 靈活

15、運用遮罩動畫，制作特殊動畫效果。2. 掌握網頁圖片展示中經典表現形式其制作方法。知識目標1. 掌握動作腳本添加的方式。2. 掌握按鈕在交互動畫中的簡單腳本編寫。課時分配4課時（授課2課時，實踐2課時）。應知技能1.Flash具有親和力強、動感互動等多媒體的特性，可以把界面，按鈕等制作得非常動感。2. FLASH本身導出的文件小，但表現的動畫角色非常形象生動，適合網絡傳輸；3. FLASH的AS代碼非常強大，交互性強，并能與其它程序語言靈活讀??；4.不利于搜索引擎識別，不利于搜索引擎對網站的收錄。5.兼容性不好，訪問者的瀏覽器的具體情況不一，導致部分訪問者不能正常瀏覽網頁。6.不利于網站內容的維

16、護和更新。7.網站中的flash動畫會影響網站訪問速度。一個FLASH小有一兩百K，多則幾M。Flash在網頁制作中的特點33應知技能1. Flash動畫基本以圖形和動畫為主，所以比較適合做那些文字內容不太多，以平面、動畫效果為主的應用。如：企業品牌推廣、特定網上廣告、交互動畫、圖片展示、網絡游戲、導航欄等。2.擁有更多聲效、動畫、流媒體剪輯、美術效果及兼顧互動性等特征，非常適合公司作在線產品展示。3.在一個靜態頁面中，添加Flash動畫元素不宜太多、太花，應適當分散放置，不要過于集中，動畫效果的設計也要得體，否則，就會事與愿違。Flash在網頁設計中的應用34模擬任務任務背景 游戲，承載著我

17、們童年時代的快樂和溫馨。很單純，也很燦爛。剪刀、石頭、布，你輸了，讓我刮刮你的鼻梁。剪刀、石頭、布，我贏了，讓我拍拍你的手心。一種規則，百變的花樣，樂此不彼。如今的孩子，玩過許多高檔的玩具，也玩過許多現代的網絡游戲，可誰又能肯定，他們真的比那時的我們開心快樂？下圖是為年代網網站設計兒時游戲場景動畫的效果圖。任務要求 圖片不間斷滾動是Flash動畫常用的效果，也是在網頁中較為常見的動畫效果。當舞臺的膠片環移出舞臺時候，后面的膠片環即時跟進。滾動時要求無縫連接。任務1 勻速滾動膠片動畫35模擬任務任務背景 校園是一處惹人顧盼的好地方，處處洋溢著青春與朝氣，讓人盡收希望之景，也時刻體驗輕盈之感。有綠

18、樹小徑的校園，褪色的未名湖畔，大抵看得清是晚霞下的湖光塔景。 為年代網網站設計校園風光圖片切換動畫，效果下所示。任務要求 圖片切換動畫是網頁中最為常見的效果，一般的廣告牌都是通過圖片切換制作的。本任務可用Flash實現百葉窗的圖片切換效果，遮罩動畫可用來制作美觀的輪顯動畫效果。將圖片素材導入到庫，將圖片分別轉化成為圖形元件。設置補間形狀動畫；利用線形工具和長方形工具制作圖形，進行遮罩動畫的設置。任務2 圖片切換動畫36模擬任務任務背景 網頁上經常出現根據用戶鼠標點擊序號按鈕進行顯示圖片的Flash動畫效果。即當鼠標移動到某一序號上時，顯示這一序號對應的圖片。動畫效果如圖所示。任務要求 在動畫中

19、實現鼠標通過序號按鈕對圖片的顯示進行控制。通過這個任務，學習并掌握按鈕控制圖片展示的基本原理，熟練掌握按鈕的制作與交互控制方法。任務3 輪播顯示動畫37知識拓展1OBJECT標簽2 EMBED標簽網頁中插入Flash的HTML代碼38知識拓展3OBJECT+EMBED標簽若要同時使用兩種標簽，請將Embed 標簽放在Object 結束標簽之前。網頁中插入Flash的HTML代碼39獨立實踐任務背景 我們就去郊游，遠離喧囂的城市，到郊外去，到田野中去，到大自然的懷抱里去。去尋找變作小傘的蒲公英種子、黑黑的牽牛花種子和許許多多不知名的草種。在尋找中真正地了解一點大自然的知識，感受一點大自然的神韻，

20、哪怕只有短短的一天。為年代網網站設計一個旅游風光多圖切換動畫，制作效果如下圖所示。任務要求 利用Flash制作圖片切換效果，在四幅圖片之間切換，利用遮罩動畫等表現形式，圖片切換自然，美觀。任務4 多圖切換動畫40獨立實踐任務背景 我們這一代人的童年時代，沒有四驅車、卡通片、變形金鋼和電腦、電子游戲，但我們有爬樹、打泥仗、射彈弓、玩火柴槍、游泳，簡直數不勝數，再重拾這夕落的朝花，這不僅是撫摸我們的心靈家園，也為將這些彌足珍貴的兒時玩樂畫面，留存于不僅在老一代的記憶之中，下圖是為年代網網站設計兒時游戲場景動畫的效果圖。任務要求 圖片不間斷滾動是Flash動畫常用的效果，也是在網頁中較為常見的動畫效

21、果。當鼠標移動到某一圖片上時，滾動停止，當鼠標移開時，滾動繼續。任務5 變速滾動膠片動畫41獨立實踐任務背景 還記得那些美好的名字如城南舊事、紅高粱、鐵道游擊隊那些黑白的，經典的影片嗎？已經是那些青春歲月里最為動心的回憶了。為年代網網站經典影視欄目設計經典影視回顧Flash動畫，制作效果如圖所示任務要求利用XML和Flash制作圖片之間的輪流顯示。任務6 多圖輪顯動畫學習目標能力目標1. 編輯動畫元件及動畫元件的屬性設置。2. 掌握制作GIF動畫的基本操作及導出動畫的步驟。知識目標1. GIF動畫圖片制作方法。2. GIF動態廣告制作方法。課時分配2課時（授課1課時，實踐1課時）。42應知技能

22、漂亮的閃圖動畫應用范圍非常廣，不僅可以在相冊、動態表情里使用，還可以在QQ空間、論壇簽名、各類回貼和博客中使用。那么這種炫彩字是如可制作出來的呢？其實制作炫彩字并不難，我們在Fireworks中用閃底素材+粘貼于內部的制作方法，可以去相當大的工作量，是一種別出心裁的方法。輸入的文本一般總是位于一個矩形的文本框中，很多情況下我們需要繪出動態的文本。為達到這個效果，我們可以繪制一條路徑，然后將文本附著于路徑之上，文本將隨著路徑的改變而改變。不過此時路徑又失去了筆觸、描邊、填充等路徑屬性。43閃圖動畫應知技能Banner，一般翻譯為旗幟廣告、橫幅廣告等。Banner是網站用來作為盈利或者是發布一些重

23、要的信息的工具。Banner是網站盈利或者發布重要信息的工具。它一般以GIF格式的圖片形式橫向貫穿整個頁面的頂部。Banner在設計上應該要做到制作美觀、方便點擊、與網頁協調和整體構成合理。44Banner廣告模擬任務45任務背景閃爍的文字，最美好的問候在傳遞！靈巧手指在鍵盤上游走，一份祝福就此沿著虛擬的網絡傳遞！為“上海藍天家教”網站設計網站文字，效果如圖所示。任務要求文字效果明顯，文字閃爍，造型簡潔，效果要求與網上流行一種超炫的閃彩文字及簽名相似，在QQ空間，論壇簽名以及各類回帖和博客里都有炫彩閃字的身影。任務1 閃爍文字模擬任務46任務背景Banner指的是網頁中的橫幅廣告，一般翻譯為旗

24、幟廣告、橫幅廣告燈，是網站盈利或者發布重要信息的工具。它一般以GIF格式的圖片形式橫向貫穿整個頁面的頂部。為上海藍天家教網站制作Banner動畫，效果如圖所示。任務要求繪制一個Banner動畫，要求與網頁協調、整體結構合理、動作連貫，起到一個很好的提示和宣傳主題的作用任務2 動態Banner廣告模擬任務47任務背景還記得兒時傾心的電影嗎？還記得孩提時代不知疲倦的弄堂游戲嗎？還記得依偎在媽媽身邊百唱不厭的童謠嗎？年代網給您打開了時光大門，讓你穿越時光的隧道，回到那不能忘懷的年代。也許，歲月的風早已把我們送到了天涯海角；也許，陪伴我們的只是老樹昏鴉。知否，知否，年代網圓夢在天涯。根據這個任務背景為

25、年代網設計一個電影照片連續滾動的動畫效果，如圖所示。任務要求以膠片形式的動態影視，循環播放兒時傾心的老電影照片。任務3 勻速滾動膠片動畫知識拓展雖然我們能夠利用FW制作出很酷炫的動畫效果，但它畢竟不是一個專業制作GIF動畫的軟件，所以純軟件生成的效果非常簡單。大致可以分為以下兩個類別：1、基本運動：直線運動：它包含了垂直、豎直、傾斜這三種運動情況。漸變運動：FW只支持兩種漸變運動，一是大小漸變運動，二是可見性漸變運動，可見性即指透明度的變化，其中還包括運動過程中符號的旋轉。2、特效運動特效運動只有一種，即“遮照類”動畫，遮照類動畫有兩種生成的方法，其一是利用共享文件夾（Share Across

26、 Frames）功能創造遮照的效果。二是真正的利用遮照功能（Paste as mask or Group as mask）通過被遮照物體的運動而生成遮照動畫。FW做的GIF動畫，需要導出為GIF動畫格式，并且要注意到輸出GIF動畫格式時要選取好播放循環次數，在網頁中要插入導出的GIF文件而不是FW制作時的PNG文件，這樣才能夠在網頁中播放動畫。48FW動畫類型畫知識拓展一個漂亮的Logo，或一個有創意的Logo，要能夠充分體現網站的核心理念，并且設計要求動感、活力、簡約、大氣、高品位、色彩搭配合理美觀，給人的印象要深刻。網站Logo設計有以下標準：（1）Logo大要好看 （2）Logo小要好看

27、 （3）Logo黑白要好看 （4）Logo可以有各種顏色 （5）Logo可以輕易的畫出來 （6）Logo在CMYK與RGB都很好看 （7）Logo能夠做成動畫 （8）Logo具有國際畫質感（9）Logo代表的是企業精神 （10）Logo具有廣泛的應用性 （11）讓人想穿在身上（12）不要在設計Logo之前太在意你Logo要包含什么寓意49Logo設計規范：獨立實踐50任務背景Logo是網站特色和內涵的集中表現，是互聯網上各個網站用來與其他網站鏈接的圖形標志。一個好的Logo往往會放映網站某些信息，年代網網站Logo的設計要求能反映出這個網站的類型，或者內容，與網站的顏色、字體相協調。任務要求年

28、代網網站的Logo采用年輪的低溫加上飄逸的彩帶，同時散發著光暈，寓意著人生的舞臺。年代網3個字采用圓弧的轉角形式，象征著同鄉不同年代的時空隧道，整個logo布局飽滿，色彩鮮明，生動而不失沉穩。任務4 Logo動畫獨立實踐51任務背景為上海藍天家教網站制作Banner廣告動畫，效果如圖所示。任務要求Banner動畫尺寸為58050像素，共包含3種狀態。任務5 Banner動畫52下次再見！53模塊03 Fireworks切片應用模塊引導Fireworks在網頁切片制作方面有很強的優勢，Fireworks的切片功能可以制作各種交互效果。例如導航按鈕、導航菜單的制作。網頁中的圖像交換展示，這種狀態其

29、實最后導出的文件實質上就是不同狀態的切片。完整的圖像只能使用一種文件格式，應用一種優化方式，而對于作為切片的各幅小圖片我們可以分別對其優化，并根據各幅切片的情況還可以存為不同的文件格式。這樣既能夠保證圖片質量，有能夠使得圖片變小。切片制作好了之后，就可以對不同的切片制作不同的鏈接了，而不需要在大的圖片上創建熱區了。本模塊主要介紹網頁設計中的導航按鈕和菜單，圖像交換展示的制作。學習者可以根據自己專業的特點，對本模塊的內容進行選擇。5455學習目標能力目標1. 熟悉按鈕元件及其實例。2. 熟悉導航欄和彈出菜單的功能。知識目標1. 掌握按鈕元件的制作。2. 掌握導航欄的制作。3. 掌握彈出菜單的制作

30、。課時分配2課時（授課1課時，實踐1課時）。56應知技能導航條實際上是一組互斥的按鈕，因此，快速制作導航條的方法，就是先創建一個按鈕元件，然后，在文檔中多次應用，并對實例進行簡單編輯。在 Fireworks 中，可以使用按鈕編輯器快速創建一個按鈕元件，從庫面板中，克隆多個按鈕元件，就可以制作成導航欄。創建帶有樣式的按鈕使用“按鈕按鈕編輯器”創建按鈕，為了美化按鈕，可以應用樣式面板中的樣式，還可以應用“屬性面板”上的各種效果。輸入清晰的按鈕文字在網頁圖象中，如果使用較小的中文字體，例如12象素，可以使用“不消除鋸齒”的宋體。使用更大的其它字體時，就需要消除鋸齒了。導航條應知技能彈出菜單通常是在W

31、eb頁中由鼠標來觸發的一種菜單導航效果，當鼠標移動到導航菜單上觸發條件滿足，就會顯示出彈出菜單。當鼠標從導航菜單上移開，彈出菜單自動消失。觸發條件既可以是鼠標通過（OnMouseOver），也可以是鼠標單擊（OnClick），這種結構的菜單使我們能更加靈活地組織我們的菜單結構，而且下載時間又比較迅速。彈出菜單結構非常類似于一個表格，每一個導航菜單條目就好比一個單元格。57彈出菜單模擬任務58任務背景導航是指位于網頁中水平或垂直排列的導航按鈕，它起著鏈接網站各個頁面的作用，設計的年代網導航欄效果圖如圖所示。任務要求不管用戶在網站上的什么位置，都能依靠導航欄到達希望到達的地方。當鼠標單擊按鈕“首頁

32、”，按鈕狀態文字改為“年代首頁”，單擊按鈕“影視”，按鈕狀態文字改為“經典影視”，單擊按鈕“照片”，按鈕狀態文字改為“老照片”，單擊按鈕“童謠”，按鈕狀態文字改為“兒時童謠”，單擊按鈕“游戲”，按鈕狀態文字改為“童年游戲”，按鈕離開時，按鈕狀態恢復初始狀態。任務1 創建導航欄模擬任務59任務背景彈出菜單在網頁制作中是一種非常常用的菜單方式，使用Fireworks制作彈出菜單不但制作簡單，而且效果也很好。年代網的導航欄彈出菜單效果所示。任務要求站點里的導航信息必須非常的簡練和實用，只有那些最重要的信息才出現在導航條中，而更多的導航和內容信息通常都隱藏起來。彈出菜單要求有2級級聯菜單，美觀且具有交

33、互性。任務2 創建彈出菜單知識拓展切片的作用是將一個大圖象切割成許多小圖象，然后導出到DW中，再加工為網頁，瀏覽的時候可以分片下載，提高速度，對于在PS、ILLUSTRATOR中設計網頁的人尤其有用，你可以在FW（PS也有此功能）中將設計的頁面進行合理的切割，然后導出全部頁面到DW中進行再加工，導出的格式最好為JPG，GIF有些不保真。熱區在DW中也有，但后者的熱區準確率不高，因為在DW中不能隨便放大或縮小頁面，而在FW中，你可以用此工具任意地慢慢設置熱區，也可以在FW中直接添加鏈接，再導出圖片和相關代碼到DW中，需要注意的是，如果一個圖片已經用切片工具切割了，就不能再用熱區工具了，熱區在已切

34、片區域上不起作用。Fireworks對網頁進行切片輸出的時候，一般都用普通的切片工具進行輸出。但是如果遇到導航很多，切片重疊時候，用一般的方法就無法進行處理，這時多變形切片工具的好處就顯現出來了。需要注意的問題：多邊形切片工具不能切出圓形切片，如原圖比較復雜，可多切幾個邊，或在DW中在進行熱區形狀編輯。多邊形工具的邊數多少決定生成文件的大小，所以除非特殊需要，盡量控制多邊形的邊數。60熱區和切片的作用獨立實踐61任務背景年代網網站有個父親節的欄目，90后甚至是10后都講究創意和個性，即將到來的父親節里，為年代網父親節欄目設計一款個性電子打火機動畫，效果如圖所示。任務要求畫布【大小】為“200像

35、素400像素”，用按鈕控制打火機的開關任務3 打火機動畫獨立實踐62任務背景那些屬于90后出生的一代，當回首往事，回憶童年的美好時光，總是記得那些歡聲笑語，那些逝去的歲月，那些最天真的小伙伴！讓我們在這些經典圖片中，重溫美好歲月！為年代網設計童年游戲導航菜單。年代網的導航欄菜單效果圖所示。任務要求站點里的導航信息必須非常的簡練和實用，只有那些最重要的信息才出現在導航條中，而更多的導航和內容信息通常都隱藏起來。彈出菜單要求有2級聯菜單，美觀且具有交互性。任務4 創建導航菜單學習目標能力目標1. 掌握“切片”工具的使用。2. 掌握“熱點”工具的使用。知識目標1. 了解圖像變換的概念。2. 掌握利用

36、行為實現網頁圖像變換的制作方法。課時分配2課時（授課1課時，實踐1課時）。63應知技能64Fireworks的圖像交互是通過切片或熱區實現，切片就成為了創建交互性網頁的一個基本方法，現在利用切片就可以實現交互功能。切片就是將圖像切成很多不同的部分，它是一種網頁對象，不是以圖像形式存在，而是以HTML代碼的形式出現。Photoshop也有切片功能，但相比Fireworks來說，無論在操作上和功能上都有一定的差距。使用Fireworks都不僅可以輕松地制作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態按鈕、動態翻轉圖等，因此，對于輔助網頁編輯來說，Fireworks將是最大的功臣。利用可視

37、化工具，無需學習代碼即可創建具有專業品質的網頁圖形和動畫，如變換圖像和彈出菜單等。切片與熱區模擬任務65任務背景為年代網的首頁設計2個廣告圖像的變換，效果如圖所示。任務要求當用戶瀏覽網頁時，鼠標指針滑過一個廣告圖像，該圖像變化成另一個廣告圖像。任務1 使用行為交換圖像模擬任務66任務背景回到了童年去過的地方，也是一件非常有趣味的玩法，為年代網重溫兒時的記憶欄目設計一個動物觀賞大圖片顯示動畫，效果如圖所示。任務要求當鼠標移動到任意一個小動物時，在中心位置顯示該動物的大圖片。任務2 使用切片交換圖像模擬任務67任務背景家庭養花，陶冶性情，為花卉網站網設計一個經典花卉展示，效果如圖所示。任務要求當鼠

38、標移動到任意一個數字序號時候，在中心位置顯示該序號的圖片。任務3 使用熱區交換圖像知識拓展68Dreamweaver 調用Fireworks圖像Dreamweaver和Fireworks識別和共享許多相同的文件編輯結果，其中包括對鏈接、圖像映射、切片、導航欄、彈出菜單等的更改。這兩個應用程序共同為在HTML頁面中編輯、優化和放置網頁圖形文件提供了一個優化的工作流程?？梢栽赑hotoshop、Fireworks頁面布局中，為圖像交換、導航欄定義好大小和位置，也可以直接在Dreamweaver中，使用圖像占位符、CSS+DIV，為圖像交換、導航欄定義好大小和位置，該位置允許用戶指定Dreamwea

39、ver中將來放置的Fireworks圖像的大小和位置。1使用Dreamweaver占位符調用Fireworks圖像2將Fireworks HTML復制到剪貼板在Dreamweaver中使用獨立實踐69任務背景曾經，我們在回家時候總想著那些游戲明天可以繼續，驀然回首，那些都已經是記憶的碎片。童年的游樂不是一輩子的游戲，童年是短暫的，它晃眼即逝，留下的只有溫暖的回憶。為年代網設計兒時游戲場景動畫，效果如圖所示。任務要求當鼠標移動到任意一個兒時游戲小圖片，在中心位置顯示該游戲的大圖片。任務4 童年的游戲獨立實踐70任務背景一首童謠、一部電影、一種游戲，甚至是一張時隔多年的泛黃的老照片，就是人們的懷舊

40、情結。它總是零零散散地讓人們感念自己所處的年代和時光，因此，年代網便應運而生。今天，在向前奔成為生活主旋律的時代，誰不渴望尋找到心靈的凈土？誰不想找回往日的溫馨？誰不想找到靈魂的棲息地？。為年代網經典影視欄目設計60年代、70年代、80年代、90年代經典影視回顧，效果如圖所示。任務要求分別給每一個年代設計一個導航欄按鈕，鼠標劃過按鈕，在中心區域顯示該年代經典電影4部。任務5 經典影視展示71下次再見！72模塊04 網頁界面切圖模塊引導如果網頁上的圖片較大，瀏覽器下載整個圖片需要花很長時間?！扒衅惫ぞ呖梢詫⒄麄€圖片分為多個不同的小圖片，從而實現分開下載，這樣下載的時間就大大縮短了。Photos

41、hop專注于設計，切片的話，用Freworks更專業，切片將Fireworks文檔分割成多個較小的部分，并將每部分導出為單獨的文件。導出時，Fireworks還創建一個包含表格代碼的HTML文件，切片最終是以HTML代碼的形式出現的網頁對象，而不是以圖像的形式存在，通過【層】面板中的“網頁層”查看、選擇和重命名切片，瀏覽器中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙地拼接起來，成為一幅完整的圖像。7374學習目標能力目標1. 了解切圖的基本方法。2. 了解“網頁層”的作用。知識目標1. 掌握圖像的優化。2. 掌握Firewors與Dreamweaver的相互配合。課時分配2課時（授課1

42、課時，實踐1課時）。75應知技能如果網頁上的圖片較大，瀏覽器下載整個圖片需要花很長時間?！扒衅惫ぞ呖梢詫⒄麄€圖片分為多個不同的小圖片，從而實現分開下載，這樣下載的時間就大大縮短了。Photoshop專注于設計，切片的話，用Freworks更專業，切片將Fireworks文檔分割成多個較小的部分，并將每部分導出為單獨的文件。導出時，Fireworks還創建一個包含表格代碼的HTML文件，切片最終是以HTML代碼的形式出現的網頁對象，而不是以圖像的形式存在，通過【層】面板中的“網頁層”查看、選擇和重命名切片，瀏覽器中通過沒有間距和寬度的表格重新將這些小的圖像沒有縫隙地拼接起來，成為一幅完整的圖像

43、。Fireworks切圖技術模擬任務76任務背景用戶在瀏覽網頁時，總希望它盡可能地呈現在眼前，減少等等時間，請將“60年代主頁面” 中“經典影視”“童謠”“老照片”“游戲”欄目頁面進行切割。任務要求切割時要優化圖像，以獲得最快的下載速度，易于更新，適用于經常更改的網頁部分，避免無謂的全盤改動。任務1 切割年代網60年代主頁面模擬任務77任務背景年代網老照片回憶欄目為你展示的那一張張熟悉而陌生的照片，模糊了歲月的面貌，裹挾著經年的風霜，愈發出時代的迷人的光輝。任務要求網站頁面【大小】為“1003像素800像素”，各年代板塊的圖片能通過鼠標單擊圖片序號進行展示，效果如圖4-5所示。任務2 制作年代

44、網老照片展示頁面78知識拓展一般的網站制作步驟大體上為：設計效果圖，然后切圖，再制作靜態html模板，最后嵌套至CMS（內容管理系統），其中，切圖雖然是很簡單的一個步驟，但其中也有很多技巧。 圖切得越小越好，圖切得越少越好。對于一整張圖來說，同時達到以上兩個目標是矛盾的。針對這點，一般將一個網頁切成2030個圖加載速度是不受影響的。 一行一行地切，背景圖切成小條。能用背景平鋪的則就切成1個像素或相對適合的像素大小，不要使用整張圖片做背景，不能分開的不要切分。 按顏色來區分來切圖一個區域顏色少的話就切分一塊，顏色復雜的區域再切分一塊，依次類推。然后就可以將顏色少的塊指定文件類型為GIF格式，顏色

45、復雜的指定為JPG格式，盡量讓出純色的區域，可以在HTML里實現。Fireworks切圖原則79 能用CSS寫的顏色，堅決不要用圖片如果能把純色的部分用CSS來寫，而不因為省事直接切圖，就會極大提高網站的運行效率。比如，如果僅僅只有背景色的導航條，而沒有欄目，不建議將導航條的背景直接切成圖片，可以用div定義好寬和高設置背景色和邊框，一行代碼就搞定。如果遇到有漸變色的背景，可以沿著與漸變色相同方向切一個像素的條紋，用CSS中background的repeat-x或repeat-y來自動填充。 文字不要切成圖片一般情況下都不會把文字切成圖，除非用到比較特殊字體。 盡量使用有透明效果的存儲格式如果

46、圖片中使用了透明效果，要存儲成PNG-8的格式，PNG的其他格式要么不支持透明，要么保存時文件要大很多，PNG-8是“性價比”最高的。Fireworks切圖原則知識拓展80 適宜的圖像尺寸千萬不能不壓縮圖片直接放上去，然后靠width和height來進行限制，這樣做是自欺欺人，瀏覽器會先把大圖片下載到本地，然后用樣式強制將它壓縮，顯示不但不會更清楚，反而會失真，一定要對圖片尺寸進行處理后再上傳，一般處理圖片的寬度為500-600像素之間，高度自動等比例即可。圖片質量一般不用太高，JPEG格式的保持在60就可以。 切圖命名規范切好圖片的命名也要養成良好的習慣，最好的命名習慣就是見名知意，對于一個

47、擴展性強的網站來說，在進行改版和維護的時候，如果要更換某些網站圖片，就需要一個一個從瀏覽器中右鍵查看圖片地址，記下每一個長長的沒有規律的圖片名稱，這會讓技術人員十分崩潰，所以，在保存圖片時就給它寫上有意義的名字是很必要的。Fireworks切圖原則知識拓展獨立實踐81任務背景在教師節來臨之際，您是否想到如何為老師的默默耕耘送上自己的一份感恩，為老師送上一份貼心的教師節禮物？如今花成為教師節必備的禮物，那么教師節送什么樣的花比較好呢？下面花卉網站將為大家介紹幾種今年比較流行的花。參考效果如圖所示。任務要求網站頁面【大小】為“1000像素800像素”，網站包括頁眉、用戶登錄和導航、主要內容和頁腳等

48、部分。其中，頁眉又包括Logo、Banner、導航和彈出菜單等；主要內容部分包括動畫和切片等。任務3 制作花卉網站主頁學習目標能力目標1. 了解切圖的基本方法。2. 掌握單層切片的導出。知識目標1. 掌握存儲為Web所用格式的面板功能設置。2. 掌握Photoshop與Dreamweaver的相互配合。課時分配2課時（授課1課時，實踐1課時）。82應知技能83切圖，是一種網頁制作技術，它是將美工效果圖轉換為頁面效果圖的重要技術。Photoshop、Fireworks等軟件提供了切圖技術，切圖后可以直接導出為網頁格式。切片，是切圖的直接結果，切圖實際上就將圖切分為一系列的切片。PS和FW均可以用

49、于切圖，但二者有些區別，FW可以導出PNG32，而PS只能導出PNG8和PNG24，PNG8有兼容問題，不常用，PNG24不支持Alpha，只有PNG32是支持Alpha常用的。切片用Fireworks方便，而且切片有尺寸，而PS切片不可少設置尺寸，切片精確性沒有Fireworks 高，FW能很方便的定位邊緣，PS就很難，就算放到最大倍數也很難點準。網頁效果圖肯定都是一塊一塊地拼上去的，是多個矢量圖和位圖的組合?，F在大多數WEB網頁設計師都會選擇在Photoshop、AI創建網頁，完成美術視覺上的設計排版等，然后用Photoshop去切圖，再去敲代碼。PS切圖技術應知技能84這種設計的優勢是：

50、其一，設計布局靈活。而Dreamweaver等軟件給設計者提供的自由度低很多，其效果也會大打折扣。其二，修改方便，網站建設前期首先要與客戶簽定合同，簽定合同時客戶最關心的是自己的網站是什么樣子，這時設計者不可能拿出建好的網站給客戶演示，這樣一是成本太高，合同能否簽定還不一定。其三。保護知識產權，有的客戶拿走設計方案交給別的公司去做，自己豈不成了給別人做嫁衣裳。最好的辦法是拿出在Photoshop中做出的效果圖給客戶看。一般情況下，客戶一次滿意率非常低，總會提出修改意見，這時我們就可以利用Photoshop的強大功能按客戶的要求方便地進行修改和優化，直到客戶滿意為止。PS切圖技術模擬任務85任務

51、背景根據給定的界面原型設計界面效果圖，進行切圖制作。最終生成HTML代碼任務要求切圖是網頁設計中非常重要的一環，它可以很方便的為我們標明哪些是圖片區域，哪些是文本區域。另外，合理的切圖還有利于加快網頁的下載速度、設計復雜造型的網頁以及對不同特點的圖片進行分格式壓縮等優點。任務1 切割新亞房產主頁面知識拓展86Photoshop切圖原則 必須依靠參考線設計時用到參考線，切圖時更要用好參考線。參考線能保證我們切出圖在同一表格中的尺寸統一協調，有效避免“留白”和“爆邊”。 Logo和Banner必切如果效果圖中存在Logo和Banner，我們必須切片這部分，主要是為預先設計的Logo和Banner留

52、下空間，在DreamWeaver整合時最好不用Logo和Banner的切片，而是直接用Logo和Banner原文檔，這是提高Logo和Banner效果的需要。 虛線和轉角形狀必切虛線和轉角形狀在DreamWeaver 不能實現，只能使用Photoshop切片。 漸變必切這也是Dream Weaver實現不了的。知識拓展87Photoshop切圖原則 大圖必切大的圖像必須切分成均勻圖，這樣可以提高網頁下載速度。 特殊文字效果必切除黑體和宋體外，其他字體必須切片。DreamWeaver下最有效的字體只有宋體和黑體，其它字體瀏覽器也要能不兼容。 導航條必切一般情況下導航條都是特別設計的，其效果在Dr

53、eamWeaver下不能實現，因此必須形成切片供后期使用。 有效存儲切片存儲切片的文件夾必須位于站點的根目錄下，文件夾名必須是英文名字。存儲切片時用“文件存儲為WEB所用格式”命令。切片存儲格式要求一般存為Gif格式。Gif占用體積小。要求較高的圖像存儲為JPEG格式，JPG格式顯示更多的圖片細節。獨立實踐88任務背景根據給定的界面原型設計界面效果圖，并根據確認過的頁面效果圖進行切圖制作。任務要求最終提交HTML、CSS、JS代碼。完成時限：7天，服務商要求：有手機端應用界面設計優先報價可以是總共價格也可以是頁面單價。任務2 手機App界面設計與切圖89下次再見！90模塊05 網頁布局模塊引導

54、網頁的精彩與否的因素是什么呢？“用戶界面”與“用戶體驗”是兩個較為重要的環節，是滿足瀏覽者需求、提升網站瀏覽量與使用滿意度的重要因素?！坝脩趔w驗”如色彩的搭配、文字的變化、圖片的處理等，這些當然是不可忽略的因素，要給用戶留下深刻印象的，還有一個非常重要的因素“用戶界面”網頁頁面布局設計。采用DIV+CSS制作方法制作頁面有很多的優勢：使頁面載入得更快，降低流量費用，修改設計時更有效率，保持視覺的一致性，更好地被搜索引擎收錄。本模塊的所有情境都圍繞網站頁面的整體設計來開展，從頁面整體設計到局部樣式的處理，每個情境都細化分解指導操作。各專業可以根據自己專業的特點，對本模塊的內容進行有選擇教學。91

55、92學習目標能力目標1. 了解盒狀模型。 2. 了解元素的間距計算。 3. 了解塊級元素。 4.掌握使用DIV+CSS控制頁面文檔流的各種方法。知識目標1.掌握DIV的自然布局方法。 2.掌握DIV的浮動布局方法。 3.掌握DIV的精確布局方法。 4.掌握CSS標簽選擇器的使用。課時分配4課時（授課2課時，實踐2課時）。應知技能一、基本概念CSS（Cascading Style Sheet）層疊樣式表，用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。二、CSS選擇器1、標記選擇器（body等）2、類別選擇器（以“.”作為標記）3、ID選擇器（以“#”作為標記）4、復合選擇器（多

56、種選擇器的組合）三、基本語法93CSS概念及基本語法h1 color:red;font-size:25px;選擇器屬性:值;屬性:值;應知技能一、塊級元素與內聯元素塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標簽“P”；內聯元素一般都是基于語義級的基本元素。內聯元素只能容納文本或者其他內聯元素，常見內聯元素 “a”。二、盒狀模型用于塊元素內部或塊元素之間關系描述94盒狀模型模擬任務95任務背景一般個人主頁的都偏向圖像、文字元素較多，往往只需要將這些元素有效的排布，就能向大眾展現自我的風采，因此，采用簡單的DIV元素堆疊的方式布局HTML元素，再使用CSS控制HTML

57、元素，就能實現這類網頁的基本功能。基本布局完成效果所示。任務要求將HTML元素合理的分配，布局結構清晰，效果明顯造型簡潔。任務1 DIV自然布局模擬任務96任務背景控制文檔流的走向使用“float”屬性，可以實現圖文混排。效果圖如圖所示。任務要求在用戶瀏覽網頁中，鼠標指針滑過圖像時換成另外一幅圖像，離開時恢復原始圖像。任務2 DIV浮動布局模擬任務97任務背景當所要的頁面元素不能僅僅局限于原來的文檔流中，需要和其他元素有交叉重疊時，通常使用浮動與定位結合，調整Div的層疊次序，為較好的表達主題的起到補充作用。效果圖如圖所示。任務要求背景圖片和數字選項按鈕較好的融合，并呈現層疊效果。任務3 精確

58、定位布局知識拓展1定位（1）絕對定位（absolute）應用了絕對定位的元素將被不留痕跡地從常規文檔流中完全移除，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位, 如果不存在這樣的父對象，則依據body對象定位。其層疊通過z-index屬性定義。（2）相對定位（relative）這個屬性值保持對象所在文檔流中的位置，它同樣占有在文檔流中的固定位置，后面的對象不會侵占或覆蓋。設置了relative的對象，可以通過top,left,right,bottom屬性設定自己的新顯示位置，這4個屬性的取值是相對于文檔流的前一個對象的，你可以自由設置

59、這4個屬性偏移到新的位置而不對文檔流中的其他對象產生任何影響，原來的頁面呈現仍然會我行我素。如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響。 2浮動定位子塊級元素流集合面向父級元素的定位，定位的關鍵詞使用margin、padding】。兄弟塊元素之間進行相對的定位均基于移動后的新位置進行重新渲染，可以重疊，原位置被清空。98定位和浮動的區別知識拓展1ID標簽和類的使用區別ID只能在頁面中對應一個元素，就像我們的身份證號一樣，每個人的都不一樣；class為

60、類，可以對應多個元素。2取消Class和ID前的元素設定當給一個元素定義Class或ID時，可以省略前面的元素限定，因為ID在一個頁面里是唯一的，Class可以在頁面中多次使用。但是為了CSS結構清晰，也可以適當的添加前導元素進行申明。3默認值設定通常padding的默認值為0，background-color的默認值為transparent，但是不同的瀏覽器默認值可能不同，如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding的值均為0。99CSS常用技巧獨立實踐100任務背景么有效的在頁面上反應網站的眾多內容，讓用戶能一目了然呢？圖文混排是一個有效果的辦法。合理的利