Dreamweaver網(wǎng)頁設(shè)計(jì)設(shè)計(jì)說明書

1、dreamweaver網(wǎng)頁設(shè)計(jì)設(shè)計(jì)說明書姓 名： 王 丹 學(xué) 號(hào)： 20101180124 班 級(jí)： 10圖文 指導(dǎo)教師： 李德云 完成日期： 2011年12月16日 設(shè) 計(jì) 要 求考核目的通過開發(fā)一個(gè)完整網(wǎng)站讓同學(xué)們親自動(dòng)手，身臨其境體驗(yàn)制作過程才能將知識(shí)真正化為己有，為我所用。一個(gè)網(wǎng)站的建設(shè)不僅僅是收集制作素材、合成網(wǎng)頁，更多的是開發(fā)者的創(chuàng)意和構(gòu)思。從而了解網(wǎng)站開發(fā)要求、開發(fā)規(guī)范、掌握一個(gè)網(wǎng)站的完整制作步驟和操作方法?？己隧?xiàng)目要求1、 網(wǎng)頁內(nèi)容積極向上、思想健康、有時(shí)代氣息，網(wǎng)頁內(nèi)容充實(shí)，符合網(wǎng)站主題。1）主頁上必須有l(wèi)ogo、banner、網(wǎng)站導(dǎo)航、網(wǎng)站版權(quán)等信息。2）各網(wǎng)頁的文字通順，

2、無文字語法錯(cuò)誤。 3）欄目至少有5個(gè)，每個(gè)欄目不少于3個(gè)子頁。 2、設(shè)計(jì)要求： 網(wǎng)頁布局設(shè)計(jì)合理，文字、圖片、動(dòng)畫在網(wǎng)頁中的運(yùn)用適當(dāng)。 各網(wǎng)頁之間的設(shè)計(jì)風(fēng)格統(tǒng)一，符合設(shè)計(jì)原理。 3、技術(shù)要求： 網(wǎng)頁中各種技術(shù)運(yùn)用恰到好處，不為技術(shù)而技術(shù)。 1）網(wǎng)頁中包含表格、層、表單和多媒體等技術(shù)2）網(wǎng)頁中含有樣式和行為技術(shù)（鼠標(biāo)經(jīng)過圖像、跳轉(zhuǎn)菜單等）。 4、美工要求： 網(wǎng)頁界面美觀大方、引人入勝，色顏搭配合理，所有圖片、動(dòng)畫與網(wǎng)站主題相符。 5、創(chuàng)意要求： 網(wǎng)站與同類主題網(wǎng)站相比富有新意，有自己的特色。6、格式要求：使用a4紙，上下左右邊距分別為2.5厘米。標(biāo)題：黑體二號(hào)，下劃線，居中。內(nèi)容：首行縮進(jìn)2個(gè)字

3、符，小四號(hào)字，宋體，1.5倍行距。頁碼在右下角，起始頁碼0，格式“-頁碼-”，首頁頁碼不顯示。目錄1網(wǎng)站規(guī)劃111策劃網(wǎng)站主題112確定網(wǎng)站風(fēng)格113構(gòu)思網(wǎng)站欄目結(jié)構(gòu)114規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)115設(shè)計(jì)主要頁面的布局22準(zhǔn)備素材221準(zhǔn)備文本222準(zhǔn)備logo223準(zhǔn)備圖片和按鈕224建立庫項(xiàng)目33創(chuàng)建網(wǎng)站331創(chuàng)建本地站點(diǎn)332網(wǎng)站目錄結(jié)構(gòu)的搭建34網(wǎng)站首頁的設(shè)計(jì)與制作441網(wǎng)站首頁的布局設(shè)計(jì)442編輯css樣式文件443編輯美化網(wǎng)站首頁75制作二級(jí)欄目網(wǎng)頁和內(nèi)容網(wǎng)頁751制作模板75、1、1 新建一個(gè)網(wǎng)頁文件75、1、2 定義可編輯區(qū)域752制作基于模板的二級(jí)欄目網(wǎng)頁753制作框架網(wǎng)

4、頁7歪歪蛋創(chuàng)意生活網(wǎng)站設(shè)計(jì)說明書n 1網(wǎng)站規(guī)劃n 1.1規(guī)劃網(wǎng)站主題以家居家飾生活為主題，隨著社會(huì)的發(fā)展，人們生活水平的提高，家居設(shè)計(jì)越來越成為人們生活中密不可分的一部分。n 1.2確定網(wǎng)站風(fēng)格 健康向上的樂觀生活態(tài)度，一股自然風(fēng)構(gòu)成此網(wǎng)站的主題風(fēng)格趨勢(shì)。n 1.3構(gòu)思網(wǎng)站欄目結(jié)構(gòu)logo圖片導(dǎo)航新看點(diǎn)最新動(dòng)態(tài)家居top5設(shè)計(jì)賞消費(fèi)資訊精彩專題家居設(shè)計(jì)家飾生活廣告樂居方式裝修手冊(cè)友情鏈接法律聲明n 1.4規(guī)劃網(wǎng)站目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。形象的說:每個(gè)頁面都是一個(gè)固定點(diǎn)，鏈接則是在兩個(gè)固定點(diǎn)之間的連線

5、。一個(gè)點(diǎn)可以和一個(gè)點(diǎn)連接，也可以和多個(gè)點(diǎn)連接。更重要的是，這些點(diǎn)并不是分布在一個(gè)平面上，而是存在于一個(gè)立體的空間中。我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于:用最少的鏈接，使得瀏覽最有效率。網(wǎng)站目錄結(jié)構(gòu)如下：n 1.5設(shè)計(jì)主要頁面的布局此網(wǎng)頁用了5個(gè)導(dǎo)航、結(jié)構(gòu)清晰、分類明確、可另瀏覽網(wǎng)頁著迅速找到自己想要找到的信息，分欄結(jié)構(gòu)用了三分欄結(jié)構(gòu)n 2準(zhǔn)備素材n 2.1準(zhǔn)備文本首先是想了很多關(guān)于網(wǎng)站的內(nèi)容，開始想做旅游的或服飾的網(wǎng)站，可是又覺得很多人都在做這些內(nèi)容的網(wǎng)站，如果自己再做就有點(diǎn)沒什么心意了，最后選擇做我喜歡的家居生活網(wǎng)，恰巧我未來也要從事的也是這方面的工作，也為自己的未來多了解一些這方面的知識(shí)。然

6、后，我開始考慮這個(gè)網(wǎng)站的名字，經(jīng)過了兩個(gè)周的考慮，我決定用“歪歪蛋”做為這個(gè)家居網(wǎng)站的名字。因此，這個(gè)網(wǎng)站最后的名字就是歪歪蛋創(chuàng)意生活網(wǎng)。在設(shè)計(jì)網(wǎng)站布局的過程中，我曾瀏覽過很多優(yōu)秀的網(wǎng)站，并且學(xué)習(xí)運(yùn)用了他們里面的令人賞心悅目的優(yōu)點(diǎn)。最后我的主頁用的是三等分的布局模式。在編輯網(wǎng)站的過程中，我不斷地瀏覽其他的家居網(wǎng)站，了解了最新的家居動(dòng)態(tài)，調(diào)查了很多家居市場(chǎng)的發(fā)展?fàn)顩r，在自己的網(wǎng)站里引用了很多瑞麗家居網(wǎng)的家居動(dòng)態(tài)和家居最新形勢(shì)。從里面下載了大量的文本內(nèi)容和家居圖片。整個(gè)網(wǎng)站的編輯中運(yùn)用了布局模式、各種形式的表格、css樣式、表單和鼠標(biāo)經(jīng)過圖像等網(wǎng)頁制作技巧，使網(wǎng)頁內(nèi)容達(dá)到了很大的充實(shí)。整個(gè)網(wǎng)頁采用

7、了藍(lán)色調(diào)，是網(wǎng)頁的顏色達(dá)到了協(xié)調(diào)一致的要求。n 2.2準(zhǔn)備logo從網(wǎng)絡(luò)上瀏覽了大量的網(wǎng)站logo圖片，學(xué)習(xí)優(yōu)秀網(wǎng)站的logo特點(diǎn)，又自己學(xué)著用fireworks做屬于自己網(wǎng)站的logo圖片。曾經(jīng)用過很多顏色作為logo圖片的底色，可是都覺得有些地方不合適，最終選定了用普藍(lán)色作為網(wǎng)站logo圖片的最終底色。網(wǎng)站的廣告語是設(shè)計(jì)美麗設(shè)計(jì)生活。曾想用讓生活美麗一點(diǎn)，經(jīng)過很久的斟酌最后選用設(shè)計(jì)美麗設(shè)計(jì)生活，最為本網(wǎng)站的廣告語。n 2.3準(zhǔn)備圖片及按鈕瀏覽了大量的網(wǎng)站，從網(wǎng)絡(luò)上搜集了大量的家居家飾圖片，包含各種風(fēng)格的。有歐式古典風(fēng)格、中式古典風(fēng)格、現(xiàn)代清新風(fēng)格、清新自然風(fēng)格、現(xiàn)代時(shí)尚風(fēng)格等等。搜集的圖片

8、好包含著各種家飾布藝、花藝還有包括各種手工diy。使整個(gè)網(wǎng)頁給人一種溫暖的家的感覺。n 2.4建立庫項(xiàng)目一個(gè)總的文件夾命名為waiwaidan，文件夾由word、flash、image文件夾模板文件夾和html文件組成。每個(gè)文件夾都有它各自的功能，分工明確，使用時(shí)方便快捷。n 3創(chuàng)建網(wǎng)站n 3.1創(chuàng)建本地站點(diǎn) 創(chuàng)建本地站點(diǎn)的具體操作步驟如下：（1）在“文件”面板中，單擊“文件”下方列表框的下拉箭頭，從下拉列表框中單擊“管理站點(diǎn)”菜單項(xiàng)。（2）彈出“管理站點(diǎn)”對(duì)話框。（3）點(diǎn)擊“新建”-“站點(diǎn)”。（4）彈出“未命名站點(diǎn)1的站點(diǎn)定義為”對(duì)話框，在“基本”選項(xiàng)卡，“您打算為您的站點(diǎn)起什么名字？”一欄

9、輸入站點(diǎn)的名字，如：waiwaidan在“您的站點(diǎn)的http地址（url）是什么？”輸入。（5）點(diǎn)擊“下一步”按鈕，進(jìn)入編輯文件第2部分，選擇“否，我不想使用服務(wù)器技術(shù)。（o）”（6）點(diǎn)擊“下一步”按鈕，進(jìn)入編輯文件第3部分。選擇站點(diǎn)保存路徑。（7）點(diǎn)擊“下一步”按鈕，進(jìn)入“共享文件”窗口。在“您如何連接到遠(yuǎn)程服務(wù)器？”選擇“無”。（8）點(diǎn)擊“下一步”按鈕，進(jìn)入“總結(jié)”窗口。（9）點(diǎn)擊“完成”按鈕，再次彈出“管理站點(diǎn)”對(duì)話框，在“管理站點(diǎn)”對(duì)話框中顯示出新建的本地站點(diǎn)名稱。（10）點(diǎn)擊“完成”按鈕，web的本地站點(diǎn)就創(chuàng)建完成了。n 3.2網(wǎng)站目錄結(jié)構(gòu)的搭建 網(wǎng)站的目錄是指你建立網(wǎng)站時(shí)創(chuàng)建的目錄

10、。注意事項(xiàng)：不要將所有文件都存放在根目錄下。按欄目內(nèi)容建立子目錄。在每個(gè)主目錄下都建立獨(dú)立的images目錄。目錄的層次不要太深。waiwaidan這個(gè)站點(diǎn)里包括flash、word、image、index和包括家居設(shè)計(jì)、家飾生活在內(nèi)的等十個(gè)子頁。其中，在image文件夾下包含了logo等202個(gè)圖片。n 4網(wǎng)站首頁的設(shè)計(jì)與制作n 4.1網(wǎng)站首頁的布局設(shè)計(jì)首先是整個(gè)網(wǎng)頁的logo圖片和網(wǎng)站名稱，然后是網(wǎng)站的導(dǎo)航分為六類，分別是家居設(shè)計(jì)、家飾生活、樂居方式、裝修手冊(cè)、建材寶典和設(shè)計(jì)師在線。導(dǎo)航的下面是各類導(dǎo)航的小菜單。然后是一組四個(gè)的家居宣傳圖片，再下面是新看點(diǎn)、家居最新動(dòng)態(tài)和家居top5。然后

11、是設(shè)計(jì)賞。再往下是消費(fèi)資訊和精彩專題。在下面是家居設(shè)計(jì)、家飾生活、樂居方式和裝修手冊(cè)四個(gè)分類的具體內(nèi)容分類。最后是網(wǎng)站首頁的法律聲明。n 4.2編輯css樣式文件body,td,th font-size: x-large;color: #000000;.style9 font-family: "華文琥珀"font-style: italic;font-size: larger;color: #6699ff;.style10 font-family: "華文隸書"color: #6699ff;font-weight: bold;font-style: it

12、alic;.aa font-family: "宋體"font-size: 14px;font-style: normal;color: #6699ff;list-style-image: url(image/icon_one01-g01.gif);a:hover color: #ffffff;text-decoration: none;a:active color: #ffffff;text-decoration: none;.style19 color: #ffffff; font-weight: bold; font-size: 18px; .style21 color

13、: #999999; font-size: 10px; .style22 font-size: 14px;color: #999999;.style23 color: #999999;font-size: 14px;.style35 color: #003366;font-size: 16px;font-weight: bold;.style37 color: #003366;font-weight: bold;font-size: 14px;.style38 color: #006699;font-weight: bold;font-size: 16px;.style39 font-size

14、: 14px;font-weight: bold;color: #006699;.style41 color: #6699ff.style42 font-family: "華文隸書".style45 color: #006699.style49 color: #6699ff;font-size: 14px;.style50 font-size: 14px;color: #ffffff;font-weight: bold;.cibiaoti font-size: 14px;font-weight: bold;color: #ffffff;.style52 color: #00

15、6699; font-size: 14px; .ti font-size: 18px;font-style: normal;font-weight: bold;color: #6699ff;.xiaobiaoti font-size: 14px;color: #000000;line-height: 20px;font-weight: normal;a:link text-decoration: none;a:visited text-decoration: none;.fuhao font-size: 14px;font-weight: bold;color: #666666;.ww fon

16、t-size: 14px;font-weight: normal;color: #ffffff;.cc font-size: 14px;font-weight: bold;color: #344b3d;.ee font-size: 14px;font-weight: normal;color: #006633;.style54 font-size: 14px;color: #cc6600;font-weight: bold;.style56 font-size: 14px;color: #006633;font-weight: bold;.style58 color: #006633.styl

17、e59 font-size: 14px; font-weight: normal; color: #006633; .style60 font-size: 14px;font-weight: bold;color: #0066ff;.style61 font-size: 14px;color: #cc6600;.style62 font-size: 14px;color: #666666;line-height: 20px;font-weight: bold;.style63 color: #666666; line-height: 20px; font-size: 14px;n 4.3編輯美

18、化網(wǎng)站首頁整個(gè)網(wǎng)站首頁風(fēng)格采用藍(lán)色基調(diào)，使網(wǎng)頁給人一種清新愉快的感覺，看的時(shí)間久了，也不會(huì)讓人產(chǎn)生視覺疲勞。整個(gè)網(wǎng)頁的的內(nèi)容比例設(shè)計(jì)的也恰到好處，詳略得當(dāng)，不會(huì)讓讀者看起來的時(shí)候覺得沒有重點(diǎn)。n 5制作二級(jí)欄目網(wǎng)頁和內(nèi)容網(wǎng)頁n 5.1制作模板n 5.1.1新建一個(gè)網(wǎng)頁文件在我的站點(diǎn)文件夾里新建一個(gè)網(wǎng)頁子頁，依次是：家居設(shè)計(jì)、家飾生活、裝修手冊(cè)、建材寶典、設(shè)計(jì)師在線。然后設(shè)計(jì)整個(gè)子頁的布局和框架，讓整個(gè)網(wǎng)頁的子頁設(shè)計(jì)與主頁設(shè)計(jì)達(dá)到協(xié)調(diào)一致，把整個(gè)網(wǎng)頁的主要內(nèi)容構(gòu)思好。n 5.1.2定義可編輯區(qū)域用一個(gè)做好的網(wǎng)站子頁 ，做了一個(gè)網(wǎng)頁模板，在需要編輯的地方定義一個(gè)可編輯區(qū)域，首先選定你想要編輯的區(qū)域點(diǎn)擊插入記錄然后點(diǎn)擊模板對(duì)象選擇此菜單中的可編輯區(qū)域選項(xiàng)，然后想要編輯的區(qū)域就建立完成了。n 5.2制作基于模板的二級(jí)欄目網(wǎng)頁在我的站點(diǎn)內(nèi)創(chuàng)建一個(gè)新的網(wǎng)頁，也就是整個(gè)網(wǎng)站的子頁。然后把整體網(wǎng)頁的布局給設(shè)計(jì)好，使新的網(wǎng)頁的風(fēng)格與網(wǎng)站主頁的風(fēng)格相同，使整個(gè)網(wǎng)站的風(fēng)格協(xié)調(diào)一致，給人一種舒服的感覺。整個(gè)網(wǎng)站的banna和導(dǎo)航不變，就是改變了子頁里面的具體內(nèi)容。n 5.3制作框架網(wǎng)頁網(wǎng)址：網(wǎng)站名稱：歪歪蛋創(chuàng)意生活網(wǎng)網(wǎng)址：http:/ n 參考文獻(xiàn)：1.dreamweavercs3 基礎(chǔ)與實(shí)例教程主編 謬亮 電子工業(yè)出版社2.網(wǎng)頁設(shè)計(jì)制作