Dreamweaver-CS6-第13章綜合設(shè)計(jì)實(shí)訓(xùn)課件

1、Dreamweaver-CS6-第13章綜合設(shè)計(jì)實(shí)訓(xùn)課件Dreamweaver-CS6-第13章綜合設(shè)計(jì)實(shí)訓(xùn)課件課堂學(xué)習(xí)目標(biāo)掌握表格布局的應(yīng)用方法和技巧掌握CSS樣式命令的使用方法掌握表單的創(chuàng)建方法和應(yīng)用掌握動(dòng)畫文件和圖像文件的插入方法和應(yīng)用掌握超鏈接的方法和創(chuàng)建課堂學(xué)習(xí)目標(biāo)掌握表格布局的應(yīng)用方法和技巧案列類別個(gè)人網(wǎng)頁休閑網(wǎng)頁旅游網(wǎng)頁房產(chǎn)網(wǎng)頁游戲網(wǎng)頁案列類別個(gè)人網(wǎng)頁 13.1 個(gè)人網(wǎng)頁張發(fā)的攝影網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作 13.1 個(gè)人網(wǎng)頁張發(fā)的攝影網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 張發(fā) 2客戶需求 張發(fā)是一位旅游愛好者，喜歡收錄旅游資源、旅行游記、當(dāng)?shù)孛朗?、地方特產(chǎn)等方面

2、的信息，現(xiàn)張發(fā)想與大家共同分享他的收獲和記錄，想要為此發(fā)一篇博文。本例即為張發(fā)設(shè)計(jì)博文首頁，要求畫面簡單干凈功能齊全。3設(shè)計(jì)要求 （1）網(wǎng)頁風(fēng)格要求表現(xiàn)出旅游博客的特點(diǎn)。 （2）根據(jù)博客類型，網(wǎng)頁要求多使用淡色，體現(xiàn)出旅游帶來的輕松愉悅的感受。 （3）網(wǎng)頁設(shè)計(jì)分類明確，注重細(xì)節(jié)的修飾。 （4）要符合旅游愛好者陽光向上、樂觀開朗的特點(diǎn)。 （5）設(shè)計(jì)規(guī)格為1400像素（寬）1258像素（高）。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作使用“頁面屬性”命令，設(shè)置頁面背景、邊距和標(biāo)題效果；使用“表格”按鈕，插入表格進(jìn)行頁面布局；使用“CSS樣式”命令，美化頁面效果。效果圖 項(xiàng)目創(chuàng)意及制作使用“頁面屬

3、性”命令，設(shè)置頁面背景、邊距和標(biāo)13.2休閑網(wǎng)頁瑜伽休閑網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.2休閑網(wǎng)頁瑜伽休閑網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 時(shí)尚瑜伽館 2客戶需求 時(shí)尚瑜伽館是一家設(shè)施齊全、教學(xué)項(xiàng)目全面、并且配有專業(yè)的教練進(jìn)行指導(dǎo)教學(xué)，瑜伽館氛圍良好，能夠得到很好的身心鍛煉，目前瑜伽館為擴(kuò)大其知名度，需要制作瑜伽館網(wǎng)站，網(wǎng)頁設(shè)計(jì)要求能夠達(dá)到宣傳效果。3設(shè)計(jì)要求 （1）網(wǎng)站設(shè)計(jì)風(fēng)格具有瑜伽的特色。 （2）網(wǎng)站的色彩使用紫色進(jìn)行設(shè)計(jì)，能讓人感到寧靜舒適。 （3）淡雅的風(fēng)格能夠突出主題，達(dá)到宣傳目的。 （4）整體畫面搭配合理，具有創(chuàng)新。 （5）設(shè)計(jì)規(guī)格為1400像素（寬）1535

4、像素（高）。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，改變頁面字體、大小、顏色、背景圖像和頁邊距效果；使用“CSS樣式”面板，制作單元格背景、文字顏色和行距效果；使用“屬性”面板，改變單元格的高度和寬度。效果圖 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，改變頁面字體、13.3旅游網(wǎng)頁旅游度假網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.3旅游網(wǎng)頁旅游度假網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 旅游度假村 2客戶需求 旅游度假村是一家專業(yè)的提供旅游信息的平臺。有官方旅游網(wǎng)站，側(cè)重旅游市場及宣傳，向廣大旅游朋友提供旅游相關(guān)信息資訊、產(chǎn)品等信息?，F(xiàn)新建設(shè)旅游網(wǎng)，通過發(fā)布各種相關(guān)

5、旅游信息，旅游線路供游客選擇，不僅為旅客提供了服務(wù)，而且也推廣了自己，讓更多旅客了解自己。3設(shè)計(jì)要求 （1）網(wǎng)站設(shè)計(jì)風(fēng)格具有旅游特色。 （2）網(wǎng)站的色彩使用淺色調(diào)進(jìn)行設(shè)計(jì)，能讓人感到寧靜舒適。 （3）淡雅的風(fēng)格能夠突出主題，達(dá)到宣傳目的。 （4）整體畫面搭配合理，具有創(chuàng)新。 （5）設(shè)計(jì)規(guī)格為1400像素（寬）1970像素（高）。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，設(shè)置頁面字體、大小、顏色、邊距和頁面標(biāo)題；使用“圖像”按鈕，插入裝飾圖像；使用“屬性”面板，改變單元格的高度、寬度、對齊方式及背景顏色；使用“CSS樣式”命令，制作單元格背景圖像、文字的顏色、大小及行距

6、的顯示效果。效果圖 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，設(shè)置頁面13.4房產(chǎn)網(wǎng)頁焦點(diǎn)房產(chǎn)網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.4房產(chǎn)網(wǎng)頁焦點(diǎn)房產(chǎn)網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 焦點(diǎn)房產(chǎn)網(wǎng) 2客戶需求 焦點(diǎn)房產(chǎn)網(wǎng)為廣大網(wǎng)友提供最焦點(diǎn)的房產(chǎn)資訊、新建樓盤、家居裝飾、二手房信息、產(chǎn)業(yè)新區(qū)等房產(chǎn)信息及相關(guān)論壇，還設(shè)有移動(dòng)客戶端便于查詢，是房地產(chǎn)媒體及業(yè)內(nèi)外網(wǎng)友公認(rèn)的專業(yè)網(wǎng)站和焦點(diǎn)房產(chǎn)信息庫。現(xiàn)網(wǎng)站要進(jìn)行改版，要求設(shè)計(jì)體現(xiàn)出網(wǎng)站獨(dú)有的特色。3設(shè)計(jì)要求 （1）以城市樓盤背景作為主體，在點(diǎn)明主題的同時(shí)，增加的說服力。 （2）不規(guī)則的畫面設(shè)計(jì)，更能吸引人們的視線，達(dá)到宣傳的目的。 （3）色彩

7、搭配更能圖片相呼應(yīng)，增強(qiáng)畫面的統(tǒng)一感。 （4）整體設(shè)計(jì)充滿了律動(dòng)感，讓人印象深刻。 （5）設(shè)計(jì)規(guī)格為1400像素（寬）1156像素（高）。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“鼠標(biāo)經(jīng)過圖像”按鈕，制作導(dǎo)航效果；使用“屬性”面板，設(shè)置單元格高度和對齊方式；使用“CSS樣式”面板，設(shè)置單元格的背景圖像和文字大小顏色及行距。效果圖 項(xiàng)目創(chuàng)意及制作 使用“鼠標(biāo)經(jīng)過圖像”按13.5游戲網(wǎng)頁鋒芒游戲網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.5游戲網(wǎng)頁鋒芒游戲網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 鋒芒游戲公司 2客戶需求 鋒芒游戲公司是一家新成立的互動(dòng)娛樂軟件公司，主要經(jīng)營各種電子游戲的

8、開發(fā)、出版以及銷售業(yè)務(wù)。目前需要制作公司網(wǎng)站，為前期的宣傳做準(zhǔn)備，該網(wǎng)頁主要內(nèi)容為公司研發(fā)的幾款小游戲，要求能夠表現(xiàn)公司的特點(diǎn)，達(dá)到宣傳效果。3設(shè)計(jì)要求 （1）網(wǎng)頁的風(fēng)格具有可愛清新的風(fēng)格特色。 （2）畫面使用卡通的圖案進(jìn)行搭配，體現(xiàn)小游戲的趣味與放松。 （3）色彩搭配清爽干凈，讓人感到舒適。 （4）使用卡通圖案裝飾畫面，具有童趣。 （5）設(shè)計(jì)規(guī)格為1600像素（寬）1510像素（高）。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，修改頁面的頁邊距和頁面標(biāo)題；使用“屬性”面板，設(shè)置單元格寬度、高度及背景顏色，使用“CSS樣式”命令，設(shè)置文字的大小、字體及行距的顯示效果。效

9、果圖 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，修改頁面13.6課堂練習(xí)1設(shè)計(jì)書法藝術(shù)網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.6課堂練習(xí)1設(shè)計(jì)書法藝術(shù)網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 青竹書法網(wǎng) 2客戶需求 青竹書法網(wǎng)以書法資訊、書家機(jī)構(gòu)推介、作品展示及交易和業(yè)內(nèi)交流為主要服務(wù)項(xiàng)目的書法綜合性網(wǎng)站。為了擴(kuò)大網(wǎng)站的知名度，網(wǎng)站需要重新設(shè)計(jì)，設(shè)計(jì)要求表現(xiàn)書法特色，使人一目了然。3設(shè)計(jì)要求 （1）網(wǎng)頁設(shè)計(jì)要體現(xiàn)中國書法文化的元素，增強(qiáng)網(wǎng)頁的文化氛圍。 （2）網(wǎng)頁頁面要大氣，信息排列合理恰當(dāng)。 （3）網(wǎng)頁的背景顏色使用沉穩(wěn)的顏色襯托主要信息。 （4）將傳統(tǒng)文化在網(wǎng)頁的設(shè)計(jì)上全面體現(xiàn)。 （5）設(shè)

10、計(jì)規(guī)格為1003像素（寬）923像素（高） 。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”面板，更改頁面屬性；使用“CSS樣式”命令，設(shè)置文字的顏色和大??；使用“行為”命令，制作彈出信息效果。 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”面板，更改頁13.7課堂練習(xí)2設(shè)計(jì)電影在線網(wǎng)頁項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.7課堂練習(xí)2設(shè)計(jì)電影在線網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 在線電影網(wǎng) 2客戶需求 在線電影網(wǎng)是一家涵蓋最新電影、好看電影、經(jīng)典電影、電影推薦、免費(fèi)電影、高清電影在線觀看及海量最新電影圖文視頻的網(wǎng)站。目前特推出全新的網(wǎng)站首頁，網(wǎng)站內(nèi)容主要是電影的最新動(dòng)態(tài)，網(wǎng)站要求

11、緊湊直觀、豐富多樣。3設(shè)計(jì)要求 （1）網(wǎng)頁設(shè)計(jì)要求圍繞網(wǎng)站特色，電影元素在網(wǎng)頁上充分體現(xiàn)。 （2）網(wǎng)頁的頁面布局合理，便于用戶瀏覽搜索。 （3）網(wǎng)頁的主題顏色以深色為主，增強(qiáng)畫面質(zhì)感，突出內(nèi)容。 （4）設(shè)計(jì)緊湊直觀，獨(dú)特新穎。 （5）設(shè)計(jì)規(guī)格為1600像素（寬）2198像素（高） 。 項(xiàng)目背景及要求 1客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“表格”按鈕，插入表格布局網(wǎng)頁；使用“屬性”面板，設(shè)置單元格的大小及背景顏色；使用“CSS樣式”命令，設(shè)置圖片與文字的對齊方式；使用“CSS樣式”命令，控制文字的大小、顏色及行距的顯示。 項(xiàng)目創(chuàng)意及制作 使用“表格”按鈕，插入表格布13.8課后習(xí)題1設(shè)計(jì)籃球運(yùn)動(dòng)網(wǎng)頁

12、項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.8課后習(xí)題1設(shè)計(jì)籃球運(yùn)動(dòng)網(wǎng)頁項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 VBFE籃球網(wǎng)站 2客戶需求 VBFE是一家著名的網(wǎng)絡(luò)公司，公司目前想要推出一個(gè)以籃球?yàn)橹饕獌?nèi)容的網(wǎng)站，以報(bào)道籃球相關(guān)最新資訊、籃球賽事轉(zhuǎn)播、以及相關(guān)產(chǎn)品銷售為一體的專業(yè)網(wǎng)站，網(wǎng)站內(nèi)容明確，以籃球?yàn)橹?，設(shè)計(jì)要抓住重點(diǎn)，明確主題。3設(shè)計(jì)要求 （1）網(wǎng)頁風(fēng)格以籃球運(yùn)動(dòng)的活力激情為主。 （2）設(shè)計(jì)要時(shí)尚、簡潔、大方，體現(xiàn)網(wǎng)站的質(zhì)感。 （3）網(wǎng)頁圖文搭配合理，符合大眾審美。 （4）色彩搭配使用紅色，體現(xiàn)籃球運(yùn)動(dòng)的熱情與活力。 （5）設(shè)計(jì)規(guī)格為986像素（寬）1005像素（高）。 項(xiàng)目背景及要求 1

13、客戶名稱 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，設(shè)置頁面的字號大小、背景顏色和邊距；使用“表格”按鈕，插入表格；使用“圖像”按鈕，插入圖像；使用“代碼”命令，制作滾動(dòng)條效果；使用“日期”按鈕，插入日期時(shí)間；使用“CSS樣式”面板，設(shè)置文字的大小和顏色。 項(xiàng)目創(chuàng)意及制作 使用“頁面屬性”命令，設(shè)置頁面13.9課后習(xí)題2設(shè)計(jì)電子商城網(wǎng)站項(xiàng)目背景及要求項(xiàng)目創(chuàng)意及制作13.9課后習(xí)題2設(shè)計(jì)電子商城網(wǎng)站項(xiàng)目背景及要求 項(xiàng)目背景及要求 1客戶名稱 第比電子商城 2客戶需求 第比電子商城是一家覆蓋傳統(tǒng)家電、3C電器、日用百貨等品類的電子銷售平臺。網(wǎng)站以銷售電子類產(chǎn)品為主，目前網(wǎng)站需要更新其網(wǎng)站，需要重新設(shè)計(jì)網(wǎng)站頁面，設(shè)計(jì)要求體現(xiàn)網(wǎng)站特色。3設(shè)計(jì)要求 （1）網(wǎng)頁設(shè)計(jì)要求具有調(diào)理，整齊的頁面能夠體現(xiàn)網(wǎng)站的專業(yè)性和品質(zhì)。 （2）網(wǎng)頁畫面背景使用紅白的色彩搭配，使畫面干凈舒適。 （3）網(wǎng)頁設(shè)計(jì)突出主題，分類明確細(xì)致，體現(xiàn)網(wǎng)站服務(wù)特色。