杜文博 網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐設(shè)計(jì)

1、網(wǎng)頁(yè)設(shè)計(jì)與制作設(shè)計(jì)說(shuō)明書(shū)姓 名： 學(xué) 號(hào)： 班 級(jí)： 指導(dǎo)教師： 完成日期： 設(shè) 計(jì) 要 求考核目的通過(guò)課程設(shè)計(jì)，考查學(xué)生對(duì)dreamweaver網(wǎng)頁(yè)設(shè)計(jì)的綜合應(yīng)用能力，要求學(xué)生能夠獨(dú)立制作出獨(dú)特的網(wǎng)頁(yè)作品，突出強(qiáng)調(diào)知識(shí)的系統(tǒng)性與制作方法的實(shí)用性?？己隧?xiàng)目要求1、制作主題明確，內(nèi)容健康。2、網(wǎng)頁(yè)色彩搭配協(xié)調(diào)，布局合理。3、創(chuàng)意新穎，風(fēng)格獨(dú)特，具有現(xiàn)實(shí)意義。4、網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)合理。5、整體效果好，實(shí)用性較強(qiáng)。6、站點(diǎn)命名準(zhǔn)確，網(wǎng)站的可移植性強(qiáng)。7、網(wǎng)站必須由作者本人親自構(gòu)思，采集素材，整理加工，不得抄襲他人作品。3網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)說(shuō)明書(shū)內(nèi)容首行縮進(jìn)2個(gè)字符，小四號(hào)字，宋體，1.5

2、倍行距，上下左右邊距分別為2.5厘米。一、規(guī)劃網(wǎng)站1、策劃網(wǎng)站主題2、確定網(wǎng)站風(fēng)格3、構(gòu)思網(wǎng)站欄目結(jié)構(gòu)4、規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)5、設(shè)計(jì)主要頁(yè)面的布局二、準(zhǔn)備素材1、準(zhǔn)備文本2、準(zhǔn)備logo3、準(zhǔn)備圖片及按鈕4、準(zhǔn)備動(dòng)畫(huà)5、建立庫(kù)項(xiàng)目三、創(chuàng)建網(wǎng)站1、創(chuàng)建本地站點(diǎn)2、網(wǎng)站目錄結(jié)構(gòu)的搭建四、網(wǎng)站首頁(yè)的設(shè)計(jì)與制作1、網(wǎng)站首頁(yè)的布局設(shè)計(jì)2、編輯CSS樣式文件3、編輯美化網(wǎng)站首頁(yè)五、制作二級(jí)欄目網(wǎng)頁(yè)和內(nèi)容網(wǎng)頁(yè)1、制作模板（1）新建一個(gè)網(wǎng)頁(yè)文件（2）定義可編輯區(qū)域2、制作基于模板的二級(jí)欄目網(wǎng)頁(yè)3、制作框架網(wǎng)頁(yè)例子科比二十年無(wú)悔青春網(wǎng)站設(shè)計(jì)說(shuō)明書(shū)第一章 網(wǎng)站規(guī)劃11、網(wǎng)站介紹12、網(wǎng)站風(fēng)格23、網(wǎng)頁(yè)布局

3、2第二章 備用素材41、 文本42、 Logo53、 圖片6第三章 創(chuàng)建網(wǎng)站91、網(wǎng)站布局92、創(chuàng)建網(wǎng)站9第四章 網(wǎng)站首頁(yè)的設(shè)計(jì)與制作101、網(wǎng)站首頁(yè)的布局設(shè)計(jì)102、 為導(dǎo)航制作下拉菜單11第五章二級(jí)頁(yè)面的制作參考文獻(xiàn)13 第一章 網(wǎng)站規(guī)劃1、網(wǎng)站介紹“曼巴”精神激勵(lì)了我們這一代籃球人，輝煌榮譽(yù)書(shū)寫(xiě)了我們這個(gè)時(shí)代的神話(huà)，無(wú)悔青春詮釋了偉大的定義。在一個(gè)偉大傳奇巨星科比·布萊恩特二十年職業(yè)籃球生涯的精彩演出宣布落下帷幕時(shí)，謹(jǐn)此“科比20年無(wú)悔青春”網(wǎng)站獻(xiàn)給那些熱愛(ài)運(yùn)動(dòng)，熱愛(ài)籃球，熱愛(ài)科比，為自己的夢(mèng)想不斷拼搏不放棄的人們！此網(wǎng)站的主題是：“飛俠高光生涯青春無(wú)悔，曼巴精神歷史永傳承”。

4、該網(wǎng)站為廣大籃球迷，科比粉絲提供了一個(gè)資訊專(zhuān)題，和交流互動(dòng)的平臺(tái)。全方位分析整合了科比的職業(yè)生涯，以及科比退役的各方反響和重要意義，努力打造成為一個(gè)具有對(duì)于科比巨星的輝煌總結(jié)和偉大曼巴精神的傳承代表性的網(wǎng)站。2、網(wǎng)站風(fēng)格在做本網(wǎng)站時(shí)，我選擇了以黑色同時(shí)以暗紅色調(diào)為主色調(diào)，能夠體現(xiàn)出科比的孤傲冷酷，襯托出“曼巴”精神的堅(jiān)忍不拔和偉大，讓球迷粉絲廣大網(wǎng)友有一種激情澎湃的青春熱血情感。在本網(wǎng)站如圖1-1所示。圖1-13、網(wǎng)頁(yè)布局 整個(gè)的網(wǎng)頁(yè)布局傳統(tǒng)，層次分明，圖文并茂，動(dòng)靜結(jié)合，整體大致分為7行，詳細(xì)布局如圖1-2所示。滾動(dòng)時(shí)間日期Logo導(dǎo)航Flash動(dòng)畫(huà)標(biāo)題圖片論壇圖片文字表單、文字主題圖片文字

5、（項(xiàng)目列表）圖片文字圖片圖片圖片文字文字文字文字、圖片滾動(dòng)圖片版權(quán)所有 作者信息圖1-2該網(wǎng)站導(dǎo)航分為九大塊，分別為首頁(yè)、新聞、新生、賽程、戰(zhàn)況、裝備、圖片、專(zhuān)訪(fǎng)、歷史。如圖1-3所示。圖1-3 整個(gè)網(wǎng)頁(yè)縱向布局分為左中右三塊，左邊部分為圖片、flash動(dòng)畫(huà)。動(dòng)態(tài)輪換圖片效果。如圖1-4所示。圖1-4 中間半部分為“熱點(diǎn)新聞”的項(xiàng)目列表，包含一些比較新的報(bào)道和的新聞，供人們?yōu)g覽。如圖1-5所示。圖1-5 下半部由一個(gè)標(biāo)題欄背景圖片和圖文并茂組成，標(biāo)題欄的內(nèi)容為“科比觀(guān)天下”各個(gè)單元格都是以圖文混排的方式編輯。如圖1-6所示。 圖1-6再下面是滾動(dòng)圖片，如圖1-7所示。圖1-7右半部分是用戶(hù)登錄

6、界面，討論區(qū)以表單的形式編輯，如圖1-8所示。最后是版權(quán)聲明部分，如圖1-9所示第二章 備用素材1、 文本 我從百度網(wǎng)上搜集了一些關(guān)于女性健康的文章，在做網(wǎng)頁(yè)的時(shí)候，只寫(xiě)上標(biāo)題，再加上一小段的簡(jiǎn)介，配以相應(yīng)的圖片就完成了。主要的文本內(nèi)容如下：標(biāo)題：女性生理期 不能碰的七種食物 簡(jiǎn)介：月經(jīng)期間，很多女性都會(huì)出現(xiàn)肚子絞痛，頭昏腦脹，渾身乏力，食欲欠佳等癥狀。此時(shí)如果飲食上不注意，更是會(huì)加重經(jīng)期不適癥狀。女性月經(jīng)期間有什么飲食注意?什么東西不能吃?.巧克力:巧克力除了會(huì)引起發(fā)胖之外.標(biāo)題：豐胸必吃的6種水果簡(jiǎn)介：青木瓜很多人都誤以為是木瓜能豐胸，其實(shí)不然，木瓜中具有豐胸作用的是木瓜酶，就是弄破木瓜時(shí)

7、會(huì)流出白白的乳狀物這種木瓜酶青木瓜中含量豐富，但熟木瓜就很少，故想吃木瓜豐胸一定要選青木瓜.標(biāo)題：找出月經(jīng)失調(diào)的罪魁禍?zhǔn)?簡(jiǎn)介：每個(gè)月的那幾天，都是女性頗為煩惱的日子。殊不知，許多你往往沒(méi)意識(shí)到的不良習(xí)慣，都可能是導(dǎo)致月經(jīng)失調(diào)的罪魁禍?zhǔn)住?檢查自己不良的生活方式及習(xí)慣，是跟月經(jīng)失調(diào)徹底說(shuō)Byebye的前提哦.標(biāo)題：蜂花粉：女人永保青春的秘密“武器”簡(jiǎn)介：蜂蜜一直被人們稱(chēng)之為女性養(yǎng)生保健的最佳飲品，除此之外，和蜜蜂有關(guān)的養(yǎng)顏產(chǎn)品，還有蜂王漿，蜂花粉?，F(xiàn)在，蜂花粉更被公認(rèn)為天然美容佳品。它不但可以.標(biāo)題：女性美容：肌膚補(bǔ)水的正確方法簡(jiǎn)介：很多MM會(huì)盲目的使用保濕產(chǎn)品，以為多次使用就能有效，其實(shí)這樣

8、對(duì)肌膚又是否真正起到補(bǔ)水保濕的作用呢？現(xiàn)在跟小編來(lái)分辨補(bǔ)水保濕方法的正確與錯(cuò)誤吧.標(biāo)題：快速減肚子 秀出平坦小蠻腰 簡(jiǎn)介：擁有平坦的小蠻腰不僅能夠更性感，穿衣服也能穿出身材，但是肚子上的肉肉實(shí)在是惱人，怎么運(yùn)動(dòng)都減不下去。今天小編就教給大家?guī)讉€(gè)減肚子最有效方法，只需要簡(jiǎn)單5招，就能夠減去肚子瘦出平坦小腹，變身小腰精.標(biāo)題：文胸到底穿好還是不穿好 簡(jiǎn)介：網(wǎng)上流傳長(zhǎng)時(shí)間戴文胸易致癌的說(shuō)法，穿文胸真的會(huì)致癌嗎？到底穿文胸好還是不穿文胸好.標(biāo)題：夏日嘆空調(diào) 如何預(yù)防寒邪入侵簡(jiǎn)介：炎熱的夏天，讓人們酷愛(ài)呆在空調(diào)房里。家里、辦公室、商場(chǎng).空調(diào)無(wú)處不在。然而，長(zhǎng)時(shí)間呆在空.標(biāo)題

9、：每天運(yùn)動(dòng)半小時(shí) 為何還瘦不了？簡(jiǎn)介：有研究稱(chēng)要靠運(yùn)動(dòng)來(lái)減肥，每天至少要花費(fèi)半小時(shí)以上運(yùn)動(dòng)，否則效果很難體現(xiàn)，但還是會(huì)有部分人抱怨說(shuō)自己明明很努力做運(yùn)動(dòng)了，為什么還是沒(méi)瘦下去?其實(shí).另一部分是只要文章標(biāo)題，如下所示：【皮膚暗黃、沒(méi)有光澤怎么調(diào)理？】【女性氣血足不足？教你幾招判斷】【20歲的女生用什么品牌的護(hù)膚品】【青春期少女如何防止面部痤瘡】【如何在少女時(shí)期鍛煉你的形體】【女孩應(yīng)考別亂吃藥避月經(jīng)】【姨媽來(lái)了，必須Say No 的17種食物】【微量元素影響少女健美】【找出月經(jīng)失調(diào)的罪魁禍?zhǔn)住俊久總€(gè)月的豐胸時(shí)期是什么時(shí)候呢】【女性泡溫泉的六大驚人好處】【青春期一定要養(yǎng)成的七大習(xí)慣】【少女怎樣才算健

10、美】2、 Logo我采用的是英文和中文相結(jié)合的方式，顏色清新亮麗。用Photoshop做處理，處理的方法是：先新建一個(gè)文件，大小為1425px ×517px，然后把找到的圖片用移動(dòng)工具移到新建的文件當(dāng)中去。用橢圓工具，按住shift鍵畫(huà)圓，用文字工具寫(xiě)英文字母womens，再寫(xiě)健康兩個(gè)字。中間的空白用中英文來(lái)代替，也就是主題：呵護(hù)女性健康，綻放美麗青春。在做的過(guò)程中，字體可以隨自己的想法來(lái)改變，找到“切換字符和段落”面板，就可改動(dòng)。最后，得到如圖2-1所示。圖2-13、 圖片 每一張圖片都有相應(yīng)的內(nèi)容來(lái)對(duì)照，第一張是巧克力，對(duì)應(yīng)的標(biāo)題是：女性生理期不能碰的七種食物。眾所周知，女性生理

11、期間，巧克力可是大禁忌。如圖2-2所示。圖2-2圖23圖24圖25 第二張圖片是木瓜，對(duì)應(yīng)的標(biāo)題是：豐胸必吃的六種水果。當(dāng)然，木瓜，是最好的豐胸食材，這可是每個(gè)女人都想得到的。如圖2-3所示。 第三張是一張女性趴在桌子上冥想美好事物的圖片。對(duì)應(yīng)的標(biāo)題是：找出月經(jīng)失調(diào)的罪魁禍?zhǔn)?，我想，?xiě)這個(gè)標(biāo)題必然要找一副與它相對(duì)的圖片，當(dāng)女人聽(tīng)到這個(gè)消息后，心中會(huì)感到很欣慰。于是就選擇了這張圖片。如圖2-4所示。 第四張圖片是蜂蜜，對(duì)應(yīng)的標(biāo)題是：蜂花粉，女人永葆青春的秘密武器。蜂蜜能都是女人皮膚變得白皙，而且還可以幫助體內(nèi)排毒。如圖2-5所示。 第五張圖片是女性補(bǔ)水的圖片，其對(duì)應(yīng)的標(biāo)題是：女性美容，肌膚補(bǔ)水的

12、正確方法。女性皮膚易干燥，使用對(duì)的護(hù)膚產(chǎn)品是極為重要的。如圖2-6所示。圖2-6圖27 第六章圖片是女性纖細(xì)的腰，對(duì)應(yīng)的標(biāo)題是：快速減肚子 秀出平坦小蠻腰。意在教女性朋友們?nèi)绾伪３掷w細(xì)的小蠻腰。如圖2-7所示。 最底下一部分分別是：每張圖片多對(duì)應(yīng)的標(biāo)題加班族養(yǎng)顏蔬果汁，對(duì)于加班的人來(lái)說(shuō)，自己能學(xué)會(huì)做一杯養(yǎng)顏蔬果汁是做好不過(guò)的了，在家就可以自己做，不用東奔西跑。如圖2-8所示。 蜂蜜護(hù)膚功效多 ，蜂蜜可是天然的護(hù)膚品，受到了廣大女性朋友們的喜愛(ài)。如圖2-9所示。 夏季如何祛痘痘、痘印，夏季，天氣悶熱潮濕，尤其是沿海地區(qū)。對(duì)于我來(lái)說(shuō)，在青島上學(xué)，天氣雖然不如別的地方熱，但是臉上也照樣起了

13、不少的痘痘，所以，特此寫(xiě)這篇文章來(lái)為廣大女性朋友們支招。希望能對(duì)女性朋友們有更好的幫助。如圖2-10所示。圖2-8圖29圖210 茶葉水洗臉有功效 ，生活中的茶葉水可是有大功效的哦，可不要白白的把它浪費(fèi)掉，從日常生活中的點(diǎn)滴做起。如圖2-11所示。 玫瑰花美容養(yǎng)顏，玫瑰花具有養(yǎng)顏的功效，用它可以制作面膜，珍珠粉等，可是上好的良藥啊。如圖2-12所示。圖2-11圖2-12 第三章 創(chuàng)建網(wǎng)站 1、創(chuàng)建本地站點(diǎn)先打開(kāi)Dreamweaver軟件，找到“站點(diǎn)”，點(diǎn)擊，新建站點(diǎn)。如圖3-1所示。圖3-1然后輸入名稱(chēng)和文件夾的名字，用英文字母。文件夾選擇自己的U盤(pán)就可。如圖3-2所示。圖3-2 2、網(wǎng)站布局

14、 點(diǎn)擊“插入”，找到“表格”，創(chuàng)建，行和列可以按照自己的需求來(lái)制定，還可以設(shè)置表格的大小，邊框。然后把鼠標(biāo)移到表格的左上角，當(dāng)出現(xiàn)一個(gè)田字格的時(shí)候，點(diǎn)擊選中，在屬性面板中對(duì)齊方式選為居中對(duì)齊。如圖3-3所示。 圖3-3第四章 網(wǎng)站首頁(yè)的設(shè)計(jì)與制作 1、網(wǎng)站首頁(yè)的布局設(shè)計(jì)整個(gè)的網(wǎng)站布局如圖4-1所示。Logo導(dǎo)航圖片文字文章圖片圖片文字文字圖片圖片文字文字文字跑馬燈圖片文字版權(quán)所有 作者信息圖4-1 2、編輯CSS樣式文件在網(wǎng)頁(yè)的導(dǎo)航當(dāng)中，如圖4-2所示。添加了css樣式。設(shè)置好一個(gè)字體的樣式后，可以為其他的字來(lái)套用這一樣式，也就是說(shuō)，選中想要改變的字，在屬性面板中找到“類(lèi)”，然后選擇，就套用成

15、功了。如圖4-3所示。圖4-2圖4-33、 為導(dǎo)航制作下拉菜單 在主頁(yè)，有了總的導(dǎo)航項(xiàng)之后，還需要添加子頁(yè)導(dǎo)航。我自己從網(wǎng)上找了一個(gè)制作子頁(yè)導(dǎo)航的視頻來(lái)學(xué)習(xí)，有以下步驟： （1）在第一個(gè)導(dǎo)航項(xiàng)“首頁(yè)”中，選中這兩個(gè)字，然后選擇“插入”布局對(duì)象 AP div，看到出來(lái)藍(lán)色的框，名叫“層”，然后選中層，在下面的“屬性”面板中，調(diào)整左、上、寬、高。如圖4-4所示。圖4-4 （2）在層里面，添加表格，大小設(shè)置和層相一致，順便再”屬性“面板中，選擇背景顏色，字體顏色。如圖4-5所示。圖4-5（3） 在DW的面板中，右半部分選擇標(biāo)簽，點(diǎn)擊行為，如圖4-6所示。圖4-6 點(diǎn)擊加號(hào) 顯示與隱藏元素，彈出對(duì)話(huà)框

16、，如圖4-7所示圖4-7 （4）先給這個(gè)標(biāo)簽添加顯示，點(diǎn)擊確定。在右側(cè)的面板中改成on mouse over，也就是鼠標(biāo)滑過(guò)的時(shí)候。如圖4-8所示。圖4-8 （5）繼續(xù)添加行為，同第（4）步，但是，要把標(biāo)簽改為隱藏，點(diǎn)擊確定。在右側(cè)的面板中改成 on mouse Out。（6） 再次，就是對(duì)AP div 進(jìn)行添加層，步驟同上。（7） 添加完之后，選中藍(lán)色的框，為他設(shè)置，把左的距離給消除，可見(jiàn)性改為hidden，hidden意為“當(dāng)鼠標(biāo)滑過(guò)的時(shí)候”。如圖4-9所示。圖4-9（8） 其他的導(dǎo)航項(xiàng)也如上添加。第5章 二級(jí)頁(yè)面的制作1、 模板的設(shè)計(jì)2、 子頁(yè)的制作參考文獻(xiàn)1徐麗萍.網(wǎng)頁(yè)設(shè)計(jì)與制作 從零開(kāi)始完全精通.上?？茖W(xué)普及出版社 . 2013.42李彪，楊仁毅.Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作.人民郵電出版社.2010.43徐麗萍.photoshop圖像處理高手秘笈138招.上?？茖W(xué)普及出版社 . 2013.9信息工程學(xué)院網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)踐考核標(biāo)準(zhǔn)與成績(jī)報(bào)告單2015-2016學(xué)年度第一學(xué)期期末排課編號(hào)：(2015-2