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

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

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

3、符，小四號字，宋體，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è)計主要頁面的布局22準(zhǔn)備素材221準(zhǔn)備文本222準(zhǔn)備logo223準(zhǔn)備圖片和按鈕224建立庫項目33創(chuàng)建網(wǎng)站331創(chuàng)建本地站點332網(wǎng)站目錄結(jié)構(gòu)的搭建34網(wǎng)站首頁的設(shè)計與制作441網(wǎng)站首頁的布局設(shè)計442編輯css樣式文件443編輯美化網(wǎng)站首頁75制作二級欄目網(wǎng)頁和內(nèi)容網(wǎng)頁751制作模板75、1、1 新建一個網(wǎng)頁文件75、1、2 定義可編輯區(qū)域752制作基于模板的二級欄目網(wǎng)頁753制作框架網(wǎng)

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

5、。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于:用最少的鏈接，使得瀏覽最有效率。網(wǎng)站目錄結(jié)構(gòu)如下：n 1.5設(shè)計主要頁面的布局此網(wǎng)頁用了5個導(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)站，如果自己再做就有點沒什么心意了，最后選擇做我喜歡的家居生活網(wǎng)，恰巧我未來也要從事的也是這方面的工作，也為自己的未來多了解一些這方面的知識。然

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

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

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

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

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

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