《Dreamweaver-CS6實例教程(第3版)課件.ppt》由會員分享，可在線閱讀，更多相關《Dreamweaver-CS6實例教程(第3版)課件.ppt（31頁珍藏版）》請在匯文網(wǎng)上搜索。

1、本章簡介：本章簡介：本章的綜合設計實訓案例，本章的綜合設計實訓案例，是根據(jù)網(wǎng)頁設計項目真實情境來是根據(jù)網(wǎng)頁設計項目真實情境來訓練學生如何利用所學知識完成訓練學生如何利用所學知識完成網(wǎng)頁設計項目。通過多個網(wǎng)頁設網(wǎng)頁設計項目。通過多個網(wǎng)頁設計項目案例的演練，使學生進一計項目案例的演練，使學生進一步牢固掌握步牢固掌握Dreamweaver CS6的的強大操作功能和使用技巧，并應強大操作功能和使用技巧，并應用好所學技能制作出專業(yè)的網(wǎng)頁用好所學技能制作出專業(yè)的網(wǎng)頁設計作品。設計作品。第13章綜合設計實訓課堂學習目標掌握表格布局的應用方法和技巧掌握表格布局的應用方法和技巧掌握掌握CSSCSS樣式命令的使用

2、方法樣式命令的使用方法掌握表單的創(chuàng)建方法和應用掌握表單的創(chuàng)建方法和應用掌握動畫文件和圖像文件的插入方掌握動畫文件和圖像文件的插入方法和應用法和應用掌握超鏈接的方法和創(chuàng)建掌握超鏈接的方法和創(chuàng)建案列類別個人網(wǎng)頁個人網(wǎng)頁購物網(wǎng)頁購物網(wǎng)頁休閑網(wǎng)頁休閑網(wǎng)頁房產(chǎn)網(wǎng)頁房產(chǎn)網(wǎng)頁汽車網(wǎng)頁汽車網(wǎng)頁 13.1 個人網(wǎng)頁李明的攝影網(wǎng)頁項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 李明 2客戶需求客戶需求 李明是一名專業(yè)的攝影師，為了使更多的人認識和了解他以及分享其攝影成果，需要制作一個個人網(wǎng)站，網(wǎng)站內(nèi)容包括個人資料、個人作品、攝影日志等，內(nèi)容全面，具有獨特的個性和個人特

3、色。3設計要求設計要求 （1）網(wǎng)頁風格要求具有藝術與時尚感。（2）設計要求具有張揚的設計，等夠凸顯個性。（3）網(wǎng)頁設計分類明確，注重細節(jié)的修飾。（4）使用藍綠黑三色進行搭配，并且攝影圖片進行裝飾。（5）設計規(guī)格均為775px（寬）670px（高）。項目創(chuàng)意及制作 使用使用“表格表格”按鈕，插入表格；使用按鈕，插入表格；使用“圖像圖像”按鈕，插入圖像；按鈕，插入圖像；使用使用“CSS樣式樣式”命令，調(diào)整文字的顏色、大小和行距。命令，調(diào)整文字的顏色、大小和行距。效果圖13.2購物網(wǎng)頁百貨商場網(wǎng)項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 百貨商城網(wǎng)

4、2客戶需求客戶需求 百貨商城網(wǎng)是一家網(wǎng)購專業(yè)平臺，是中國電子商務領域較受消費者歡迎和較具影響力的電子商務網(wǎng)站之一。為了更好為廣大消費者服務，需要重新設計網(wǎng)頁頁面，網(wǎng)頁的設計要求符合百貨商城網(wǎng)的定位，能夠更加吸引消費者。3設計要求設計要求 （1）網(wǎng)頁設計的背景使用白色，能夠更好地突出產(chǎn)品。（2）網(wǎng)頁的頁面分類明確細致，便于用戶瀏覽搜索。（3）網(wǎng)頁的內(nèi)容豐富，畫面熱鬧，使用粉色進行裝飾。（4）整體設計更偏重于迎合女性消費者的喜好。（5）設計規(guī)格均為1000px（寬）1412px（高）。項目創(chuàng)意及制作 使用使用“表單表單”按鈕，插入表單；使按鈕，插入表單；使用用“表格表格”按鈕，插入表格；使用按鈕，

5、插入表格；使用“圖圖像像”按鈕，插入圖像；使用按鈕，插入圖像；使用“代碼代碼”命命令，調(diào)整圖片的屬性；使用令，調(diào)整圖片的屬性；使用“CSSCSS樣式樣式”命令，調(diào)整文字的顏色、大小和行距。命令，調(diào)整文字的顏色、大小和行距。效果圖13.3休閑網(wǎng)頁旅游度假網(wǎng)頁項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 旅游網(wǎng) 2客戶需求客戶需求 旅游網(wǎng)是專門面向旅游市場及宣傳，向廣大旅游朋友提供旅游相關信息資訊、產(chǎn)品等信息的旅游網(wǎng)站，旅游網(wǎng)站為了擴大知名度，特需重新對網(wǎng)頁進行設計，網(wǎng)頁設計要緊緊圍繞網(wǎng)站主題，表現(xiàn)旅游的魅力與樂趣。3設計要求設計要求 （1）網(wǎng)頁背景

6、要求使用美麗的海邊攝影照片，視野寬廣。（2）網(wǎng)頁多使用清新干凈的色彩搭配，為畫面增添自然之感。（3）圖文搭配合理舒適，將主要內(nèi)容放置在主要位置，達到宣傳效果。（4）導航欄的設計要直觀簡潔，方便瀏覽。（5）設計規(guī)格均為1000px（寬）770px（高）。項目創(chuàng)意及制作 使用使用“表格表格”按鈕，插入表格；使用按鈕，插入表格；使用“圖像圖像”按鈕，插入圖像；使用按鈕，插入圖像；使用“CSSCSS樣式樣式”命令，調(diào)整文字的顏色、大小、行距和為表格添加背景圖像。命令，調(diào)整文字的顏色、大小、行距和為表格添加背景圖像。效果圖13.4房產(chǎn)網(wǎng)頁新焦點房產(chǎn)網(wǎng)頁項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及

7、制作 項目背景及要求 1客戶名稱客戶名稱 新焦點房地產(chǎn)有限責任公司 2客戶需求客戶需求 新焦點房產(chǎn)是一家經(jīng)營房地產(chǎn)開發(fā)、物業(yè)管理、城市商品住宅、商品房銷售等全方位的房地產(chǎn)公司。公司為迎合市場需求，擴大知名度，需要制作網(wǎng)站，網(wǎng)站設計要求厚重沉穩(wěn)，并且設計精美，體現(xiàn)企業(yè)的高端品質(zhì)。3設計要求設計要求 （1）設計風格要求高端大氣，制作精良。（2）要求網(wǎng)頁設計使用深綠色的背景，深沉的色彩表現(xiàn)出畫面質(zhì)感。（3）網(wǎng)站設計圍繞房產(chǎn)的特色進行設計搭配，分類明確細致。（4）整體風格沉穩(wěn)大氣，表現(xiàn)出企業(yè)的文化內(nèi)涵。（5）設計規(guī)格均為1000px（寬）842px（高）。項目創(chuàng)意及制作 使用使用“頁面屬性頁面屬性”命

8、令，調(diào)整頁面的樣式；使用命令，調(diào)整頁面的樣式；使用“表格表格”按鈕，插入表格；按鈕，插入表格；使用使用“圖像圖像”按鈕，插入圖像；使用按鈕，插入圖像；使用“CSSCSS樣式樣式”命令，調(diào)整文字的顏色、大小、命令，調(diào)整文字的顏色、大小、行距和為表格添加背景圖像。行距和為表格添加背景圖像。效果圖13.5汽車網(wǎng)頁TSHFA汽車網(wǎng)頁項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 TSHFA汽車 2客戶需求客戶需求 TSHFA汽車是一家產(chǎn)品覆蓋乘用車、商用車、微型車等領域的國內(nèi)自主品牌，目前已成為國內(nèi)頗具名氣的汽車品牌，公司目前需要對其網(wǎng)站進行更新設計，設計

9、要求表現(xiàn)汽車品牌的品質(zhì)，展現(xiàn)TSHFA汽車的魅力。3設計要求設計要求 （1）網(wǎng)頁設計多體現(xiàn)汽車品牌相關元素，突出網(wǎng)頁的宣傳重點。（2）網(wǎng)頁頁面干凈清爽，避免圖文編排太過緊密。（3）網(wǎng)頁的背景使用汽車的效果圖，襯托主要信息，使畫面具有層次感。（4）導航欄設計清晰直觀，使用戶瀏覽方便快捷。（5）設計規(guī)格均為980px（寬）855px（高）。項目創(chuàng)意及制作 使用使用“頁面屬性頁面屬性”命令，調(diào)整頁面的屬性；使用命令，調(diào)整頁面的屬性；使用“表格表格”按鈕，插入表格；按鈕，插入表格；使用使用“SWF”SWF”按鈕，插入按鈕，插入FlashFlash動畫；使用動畫；使用“CSSCSS樣式樣式”命令，制作導

10、航條效果和命令，制作導航條效果和調(diào)整文字的顏色、大小、行距；使用調(diào)整文字的顏色、大小、行距；使用“超鏈接超鏈接”命令，創(chuàng)建超鏈接。命令，創(chuàng)建超鏈接。效果圖13.6課堂練習1設計時尚購物網(wǎng)頁項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 時尚SSCL女性時尚媒體 2客戶需求客戶需求 時尚SSCL是一家社區(qū)型女性時尚媒體，網(wǎng)站提供應季最新單品，各種風格的服飾搭配信息，并提供時尚、美容問答服務。致力于為女性用戶提供最美麗的時尚購物體驗。目前網(wǎng)站需要進行改版，要求針對網(wǎng)站的女性受眾群體設計一款時尚、獨特的網(wǎng)站。3設計要求設計要求 （1）網(wǎng)頁設計要求使用深色

11、的背景，體現(xiàn)神秘魅惑的女性魅力。（2）網(wǎng)頁畫面分為休閑之旅與時尚購物兩個板塊，要求設計獨特，搭配合理。（3）網(wǎng)頁設計緊緊圍繞網(wǎng)站主題，將女性、時尚、服飾等元素在頁面上充分表現(xiàn)。（4）網(wǎng)頁能夠運用插畫元素，導航欄設計簡單直觀。（5）設計規(guī)格均為1003px（寬）1028px（高）。項目創(chuàng)意及制作 使用使用“表格表格”按鈕，插入表格；使用按鈕，插入表格；使用“圖像圖像”按鈕，插入圖像；使用按鈕，插入圖像；使用“超超鏈接鏈接”命令，為文字添加超鏈接效果，使用命令，為文字添加超鏈接效果，使用“外部樣式外部樣式”命令，調(diào)整文字的大命令，調(diào)整文字的大小、顏色、行距、超鏈接的顯示和導航條效果。小、顏色、行距

12、、超鏈接的顯示和導航條效果。13.7課堂練習2設計書法藝術網(wǎng)站項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 中國書法網(wǎng)站 2客戶需求客戶需求 中國書法網(wǎng)站是剛剛成立的專業(yè)的書法學習交流網(wǎng)站，內(nèi)容包括書法學術理論、名家書法作品欣賞、公益書法培訓、名家書法講座等，是書法愛好者首選書法網(wǎng)站。需要為其設計制作網(wǎng)站，設計要求符合書法的內(nèi)涵，具有中國傳統(tǒng)文化氣息。3設計要求設計要求 （1）網(wǎng)頁設計使用中國書法字畫為背景，表現(xiàn)主題，使人一目了然。（2）網(wǎng)頁分類明確，畫面整齊干凈。（3）網(wǎng)頁設計注重細節(jié)的處理，能夠在畫面多處體現(xiàn)書法元素。（4）設計規(guī)格均為996

13、px（寬）941px（高）。項目創(chuàng)意及制作 使用使用“表格表格”按鈕，插入表格；使用按鈕，插入表格；使用“圖像圖像”按鈕，插入圖像；使用按鈕，插入圖像；使用“超超鏈接鏈接”命令，為文字添加超鏈接效果，使用命令，為文字添加超鏈接效果，使用“CSSCSS樣式樣式”命令，調(diào)整文字的大小、命令，調(diào)整文字的大小、顏色和行距等。顏色和行距等。13.8課后習題1設計淘寶小屋網(wǎng)頁項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 快樂淘寶小屋購物網(wǎng)站 2客戶需求客戶需求 快樂淘寶小屋購物網(wǎng)站是較受消費者歡迎的購物網(wǎng)站之一，網(wǎng)站經(jīng)營范圍廣泛，信譽度高，網(wǎng)站致力于打造時尚

14、新潮的網(wǎng)絡購物品牌。在新春到來之際，網(wǎng)站推出商品五折優(yōu)惠活動，以此吸引消費者前來購物，要求根據(jù)本次活動設計網(wǎng)站頁面。3設計要求設計要求 （1）網(wǎng)頁設計要求清新自然，畫面干凈清爽。（2）網(wǎng)頁畫面背景以白色為主，能夠襯托產(chǎn)品。（3）網(wǎng)頁設計色彩搭配豐富，畫面亮麗，具有青春時尚之感。（4）網(wǎng)頁設計主題信息明確，使用戶能夠快速直接的接收到折扣信息。（5）設計規(guī)格均為980px（寬）1172px（高）。項目創(chuàng)意及制作 使用使用“頁面屬性頁面屬性”面板，修改頁面屬性；使用面板，修改頁面屬性；使用“表格表格”按鈕，插入表格；按鈕，插入表格；使用使用“圖像圖像”按鈕，插入圖像；使用按鈕，插入圖像；使用“CSS

15、CSS樣式樣式”命令，調(diào)整文字的大小、顏色、命令，調(diào)整文字的大小、顏色、行距和單元格背景效果等。行距和單元格背景效果等。13.9課后習題2設計電子商城網(wǎng)站項目背景及要求項目背景及要求項目創(chuàng)意及制作項目創(chuàng)意及制作 項目背景及要求 1客戶名稱客戶名稱 第比電子商城 2客戶需求客戶需求 第比電子商城是一家覆蓋傳統(tǒng)家電、3C電器、日用百貨等品類的電子銷售平臺。網(wǎng)站以銷售電子類產(chǎn)品為主，目前網(wǎng)站需要更新其網(wǎng)站，需要重新設計網(wǎng)站頁面，設計要求體現(xiàn)網(wǎng)站特色。3設計要求設計要求 （1）網(wǎng)頁設計要求具有調(diào)理，整齊的頁面能夠體現(xiàn)網(wǎng)站的專業(yè)性和品質(zhì)。（2）網(wǎng)頁畫面背景使用紅白的色彩搭配，使畫面干凈舒適。（3）網(wǎng)頁設

16、計突出主題，分類明確細致，體現(xiàn)網(wǎng)站服務特色。（4）設計規(guī)格均為993px（寬）1208px（高 項目創(chuàng)意及制作 使用使用“頁面屬性頁面屬性”面板，設置頁面的背景色；使用面板，設置頁面的背景色；使用“表格表格”按鈕，插入表按鈕，插入表格；使用格；使用“圖像圖像”按鈕，插入圖像；使用按鈕，插入圖像；使用“鼠標經(jīng)過圖像鼠標經(jīng)過圖像”按鈕，制作導航條按鈕，制作導航條效果；使用效果；使用“表單表單”命令，制作會員注冊表效果；使用命令，制作會員注冊表效果；使用“CSSCSS樣式樣式”命令，調(diào)整命令，調(diào)整文字的大小、顏色和行距；使用文字的大小、顏色和行距；使用“代碼代碼”視圖，修改圖片屬性。視圖，修改圖片屬性。