第 2章 網(wǎng)站設計 2009年 7月 2 本階段的工作任務 網(wǎng)站建設在本階段的工作任務包括： 設計網(wǎng)站的功能模塊 設計網(wǎng)站的版面 設計網(wǎng)站的頁面框架 設計網(wǎng)站的首頁 網(wǎng)站其他頁面的設計 2009年 7月 3 網(wǎng)站 維護方式 目前許多企業(yè)發(fā)布新聞的方式大多是采用靜態(tài)的次更新新聞信息時需要做一個頁面，然后用 修改頁面鏈接，使新增的新聞頁面能正常顯示。但這樣的維護方式非常麻煩。建立新聞類別網(wǎng)站系統(tǒng)可以大大減輕網(wǎng)站更新維護的工作量，通過新聞信息的后臺維護程序，網(wǎng)站管理員只需要在瀏覽器上錄入新聞文字就可以快速實現(xiàn)新聞更新，從而大大加快了信息的傳播速度，時時保持網(wǎng)站的活動力和影響力。 2009年 7月 4 務描述 設計新聞類別網(wǎng)站的功能模塊 任務 2009年 7月 5 務實現(xiàn) 1 2 新聞類別網(wǎng)站前臺功能設計 新聞類別網(wǎng)站后臺功能設計 設計新聞類別網(wǎng)站的功能模塊 的步驟 2009年 7月 6 務實現(xiàn) 前臺功能設計 前臺為瀏覽者提供瀏覽網(wǎng)站新聞的平臺。這部分功能設計主要是網(wǎng)站前臺版面的設計，包括網(wǎng)站欄目的劃分、色彩的搭配、框架的設計、網(wǎng)站風格創(chuàng)意的體現(xiàn)等等。這些內(nèi)容具體請參考本章后面的知識。 新聞類別網(wǎng)站前臺功能設計 2009年 7月 7 務實現(xiàn) 后臺功能設計 后臺功能設計從以下幾個模塊來實現(xiàn)： 用戶管理模塊 欄目模塊 專題模塊 新聞模塊 友情鏈接模塊 系統(tǒng)日志管理模塊 系統(tǒng)配置管理 新聞類別網(wǎng)站后臺功能設計 2009年 7月 8 關(guān)知識拓展 定位了網(wǎng)站主題，確立了網(wǎng)站的 格和創(chuàng)意等，收集了相關(guān)的素材，接下來是否該進入實質(zhì)性的設計制作階段呢？答案是：不能。經(jīng)驗告訴我們，建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設計好框架圖紙，才能使樓房結(jié)構(gòu)合理。 因此，在動手制作網(wǎng)頁前，一定要設計好網(wǎng)站的功能模塊，考慮好欄目劃分與未來的設計細節(jié)。 網(wǎng)站的功能模塊 2009年 7月 9 欄目的實質(zhì)是一個網(wǎng)站的大綱索引，能夠?qū)⒕W(wǎng)站的主體明確顯示出來。在制定網(wǎng)站欄目的時候，要仔細考慮，合理安排。要盡可能刪除與網(wǎng)站主題無關(guān)的欄目，盡可能將網(wǎng)站最有價值的內(nèi)容明顯地列在首頁欄目上，盡可能方便訪問者的瀏覽和查詢。 驗總結(jié) 1 設置版塊時要注意各版塊既要保持相對的獨立性 ， 又要保持相互關(guān)聯(lián) ， 并且各版塊的內(nèi)容要圍繞網(wǎng)站主題 ，不要脫離主題 。 2 2009年 7月 10 1 2 3 4 版面設計 草案 設計 粗略布局 設計 定案 設計 2009年 7月 11 務描述 設計 新聞類別網(wǎng)站 的版面。 任務 2009年 7月 12 務實現(xiàn) 1 草案 設計 2 粗略布局 3 定案 2009年 7月 13 務實現(xiàn) 草案設計 新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，設計者可以盡可能的發(fā)揮想象力，將想到的“景象”畫上去 (建議準備一張白紙和一支鉛筆，如果用 圖工具等也可以 )。這是頁面的構(gòu)造階段，不必講究繪畫的細膩工整，不必考慮頁面細節(jié)功能，只需以粗陋的線條勾畫出網(wǎng)站版面的輪廓即可。盡可能多畫幾張，比較比較，最后選定一個滿意的作為繼續(xù)創(chuàng)作的草案。 2009年 7月 14 務實現(xiàn) 粗略布局 在草案的基礎(chǔ)上，繼續(xù)將網(wǎng)站的功能模塊安排到頁面上。要安排的內(nèi)容包括網(wǎng)站標志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、計數(shù)器、版權(quán)信息等。安排時必須遵循突出重點、平衡諧調(diào)的原則，將網(wǎng)站標志、主菜單等最重要的模塊放在最顯眼、最突出的位置，然后再考慮次要模塊的排放。 2009年 7月 15 務實現(xiàn) 定案 將粗略布局精細化、具體化。 這就要體現(xiàn)仁者見仁，智者見智的功力了，不同的設計者能創(chuàng)作出具有不同創(chuàng)意的版面布局。 2009年 7月 16 關(guān)知識拓展 (1) 1 3 5 4 2 2. “口”型布局 1. “ T”型結(jié)構(gòu)布局 3. “三”型布局 5. 幾種常見的版面布局 2009年 7月 17 關(guān)知識拓展 (2) 1 3 5 4 2 版面異常平衡 版面凝視 版面正常平衡 版面對比 版面空白 版面設計的原則 6 版面盡量用圖片解說 2009年 7月 18 驗總結(jié) 在網(wǎng)站的版面布局上要注意加強各對象展現(xiàn)的視覺效果，加強文案的可視度和可讀性，整體網(wǎng)站形成一個統(tǒng)一的感覺，要不時地更新網(wǎng)站，保持網(wǎng)站新鮮的內(nèi)容和獨特的個性。 2009年 7月 19 計網(wǎng)站的頁面框架 以使用它創(chuàng)建和編輯位圖、矢量圖形，還可以非常輕松的做出各種網(wǎng)頁設計中常見的效果，比如翻轉(zhuǎn)圖像，下拉菜單等，設計完成以后，若設計結(jié)果要在網(wǎng)頁中使用，可以將它輸出為 能輸出為可以在 而實現(xiàn)與網(wǎng)頁的無縫連接，為用戶一體化的網(wǎng)絡設計方案提供支持。 2009年 7月 20 務描述 利用 聞類別網(wǎng)站頁面框架的設計 。 任務 2009年 7月 21 務實現(xiàn) 1 2 3 新建設計頁面 設計網(wǎng)站頁面的背景 設計網(wǎng)站的頭部、導航和尾部 利用 聞類別網(wǎng)站頁面框架的設計 的具體操作步驟 2009年 7月 22 務實現(xiàn) -(1) 新建設計頁面 打開瀏覽器，最大化后截取1024 768分辨率下瀏覽器滿屏的視圖作為頁面設計的基本框架。 打開 建一頁面，將截取的圖像置入 刪除瀏覽器主區(qū)域中的內(nèi)容，形成一個只有瀏覽器框架的圖像。 用輔助線和標尺把大概范圍劃分出來 ,注意這里的劃分 ,正好是在 770和1000之內(nèi)的地方 ,因為新聞類別網(wǎng)站是在 1024 768的分辨率下運行的。 2009年 7月 23 務實現(xiàn) -(2) 設計網(wǎng)站頁面背景 依據(jù)網(wǎng)站頁面的整體風格和創(chuàng)意及相關(guān)的設計原則，對網(wǎng)站的整體背景進行設計，并考慮整個站點的背景使用，在此要從整個站點的角度來考慮，要盡量設計一種既簡單又能便于在網(wǎng)頁中實現(xiàn)的背景，即從背景大小、形狀以及展開方式上來考慮。 2009年 7月 24 務實現(xiàn) -(3) 設計網(wǎng)站的頭部、導航和尾部 依據(jù)網(wǎng)站頁面的整體風格和創(chuàng)意及相關(guān)的設計原則，對網(wǎng)站的整體背景進行設計，并考慮整個站點的背景使用，在此要從整個站點的角度來考慮，要盡量設計一種既簡單又能便于在網(wǎng)頁中實現(xiàn)的背景，即從背景大小、形狀以及展開方式上來考慮。 2009年 7月 25 關(guān)知識拓展 (1) 顏色可以分為非彩色和彩色兩類。非彩色是指黑、白、灰色，黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了。灰色是萬能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。彩色是指除了非彩色以外的所有色彩，如紅、綠、藍、黃等。但彩色的記憶效果是黑白色的 彩色頁面較完全黑白頁面更加吸引人。一般建議網(wǎng)站中主要內(nèi)容文字用非彩色 (黑色 )，邊框、背景、圖片用彩色。這樣頁面整體不單調(diào)，瀏覽主要內(nèi)容時也不會眼花。 色彩的基本知識 2009年 7月 26 關(guān)知識拓展 (2) 綠色 黃色 紅色 灰色 藍色 一種最具涼爽、清新、專業(yè)的色彩。若與白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。 能產(chǎn)生中庸、平凡、溫和、謙讓、中立和高雅的感覺。 介于冷暖兩種色彩的中間，能表現(xiàn)出和睦、寧靜、健康、安全的感覺。若與金黃、淡白搭配，可以產(chǎn)生優(yōu)雅、舒適的氣氛。 能表示出快樂、希望、智慧和輕快的個性，它的明亮度最高。 一種激奮的色彩，能產(chǎn)生刺激效果，使人產(chǎn)生沖動、憤怒、熱情、活力的感覺。 色彩與心理 不同的顏色會給瀏覽者帶來不同的心理感受。 2009年 7月 27 關(guān)知識拓展 (3) 一般在剛開始學習網(wǎng)頁制作時，由于技術(shù)和知識的缺乏，只能制作出簡單的網(wǎng)頁，色彩比較單一，這時的用色可以稱為“單色”；有了一定的網(wǎng)頁制作基礎(chǔ)和材料后 ,又會將收集到的認為是最好的圖片、最滿意的色彩堆砌在網(wǎng)頁上，造成網(wǎng)站色彩雜亂、沒有個性和風格，這時的用色可以稱為“五彩繽紛”；隨著網(wǎng)頁制作經(jīng)驗的積累，設計者會重新定位自己的網(wǎng)站，選擇適合自己的色彩，使網(wǎng)站設計走向成功，這時的用色可以稱為“標準色”；當設計理念和制作技術(shù)達到頂峰時，又會返樸歸真，用單一色彩甚至非彩色就可以設計出簡潔精美的站點，這時的用色又稱為“單色”。 網(wǎng)頁色彩掌握的過程 2009年 7月 28 驗總結(jié) (1) 選用一種 色彩 作為網(wǎng)站主色調(diào) 選用 對比色 作為網(wǎng)站主色調(diào) 選用 一個色系的色彩 作為網(wǎng)站主色調(diào) A C B 幾種常見的配色方案 選用 黑色和另一種彩色 作為網(wǎng)站主色調(diào) D 2009年 7月 29 驗總結(jié) (2) 一些不合理的搭配方案 ： （ 1）忌諱使用 顏色對比過于強烈 的搭配色做網(wǎng)站主色。 （ 2）網(wǎng)站配色要簡潔，不要試圖將所有顏色都用到，主 色要盡量控制在三種色彩之內(nèi)。 （ 3）網(wǎng)頁背景和前景的對比要明顯，盡量 少用花紋復雜的背景圖片 ，避免喧賓奪主，以便突出顯示文字內(nèi)容。 2009年 7月 30 計網(wǎng)站的首頁 1） 1 2 3 4 確定網(wǎng)站的功能模塊 設計網(wǎng)站的版面 進行具體的界面設計 處理設計技術(shù)上的細節(jié) 設計首頁的一般步驟 2009年 7月 31 務描述 利用 聞類別網(wǎng)站的網(wǎng)站首頁的設計 任務 2009年 7月 32 務實現(xiàn) 利用 聞類別網(wǎng)站 首頁 設計 的具體操作步驟 完成 其他版塊的設計制作 1 2 3 制作列表框架 實現(xiàn) “新聞圖片”版塊 完成 “最新新聞”版塊的設計制作 4 2009年 7月 33 務實現(xiàn) -(1) 制作列表框架 新建一個矩形，單擊【矩形圓角】文本框輸入“ 25”，實現(xiàn)圓角效果的具體屬性設置如圖 2 在上步所建矩形的上方新建一個比它大一些的矩形，為了將下方的圓角切掉。 同時選中上面所建的兩個矩形，進行【修改】 |【組合路徑】 |【打孔】命令，為了實現(xiàn)更好的效果，對其設置漸變效果。 新建兩個矩形，寬度和上面的一樣，一個高度為 200、背景色為白色（ #另一個高度 2、背景色為紅色（ #添加標題欄上的“ ”圖標和相應的文字，對上述元素進行排版，至此列表框架制作完畢。 2009年 7月 34 務實現(xiàn) -(2) 實現(xiàn) “新聞圖片”版塊 打開上面制作的“列表框架”，導入一幅圖片，調(diào)整其大小，實現(xiàn)如圖所示的“新聞圖片”版塊。 2009年 7月 35 務實現(xiàn) -(3) 完成 “最新新聞”版塊的設計制作 打開上面制作的“列表框架”，添加相關(guān)的文字，調(diào)整文字的屬性，最后對文字進行排版，完成 “最新新聞”版塊的設計制作，如圖所示。 2009年 7月 36 務實現(xiàn) -(4) 完成 其他 版塊的設計制作 打開 行網(wǎng)站首頁的設計制作，這樣既可以保持網(wǎng)站整體的風格一致，又可以準確定位相關(guān)模塊的位置。 2009年 7月 37 關(guān)知識拓展 (1) 框架元素：用于規(guī)劃頁面布局，每個框架里可以顯示一個網(wǎng)頁，框架的應用突破了原來瀏覽器只能顯示一張網(wǎng)頁的限制，應用了框架的網(wǎng)頁能同時顯示多個頁面。 圖像元素：比文本更直觀，更具吸引力的網(wǎng)頁元素。 空白元素：空白元素用來分開頁面上的各元素。一個沒有空白區(qū)的頁面，給瀏覽者的感覺是頁面很擁擠，容易引起閱讀心理緊張，導致對這樣的頁面有一種厭煩抵觸的感覺。 邊距元素：控制網(wǎng)頁所顯示的內(nèi)容距瀏覽器窗口邊界的距離，類似于 列表元素：列表在網(wǎng)頁占有極其重要的地位，規(guī)定了多種列表元素，可根據(jù)文本內(nèi)容的特征選擇不同的列表進行展示。 頁面布局元素 2009年 7月 38 關(guān)知識拓展 (2) 每一個頁面都應該是相對獨立的、完整的。只有照顧了整個頁面空間的分配，空白才能表現(xiàn)出一定的活力，利用空白可以使頁面布局生動活潑、松緊有度，使瀏覽者瀏覽頁面時感覺到舒適、輕松和簡潔。 網(wǎng)頁空白可以使用表格和透明 用表格定位頁面內(nèi)容時，可以設置不填充內(nèi)容的空白單元格來產(chǎn)生頁面空白，達到頁面布局松緊有度的效果。 “空白”元素 2009年 7月 39 關(guān)知識拓展 (3) 在設計頁面布局時 ， 設計人員在紙面上畫出頁面布局的草圖 ， 將設想落實到紙面上 ， 觀看設計效果 。 人們經(jīng)常會在瞬間產(chǎn)生一個好的靈感和想法 ， 但這種想法若不及時記錄下來很快又會從頭腦中消失 。 因此當有了好的靈感和想法時應該立即用紙筆記錄下來 ， 以備以后用到頁面設計當中 。 紙面布局法 使用圖形工具軟件設計頁面布局草圖 ， 可以使用比較熟悉的圖形軟件如 使用這些圖形工具可以方便地設計頁面布局和顏色 ， 比紙面布局法更能查看頁面布局的整體效果和真實效果 ， 使用圖形工具和層更容易修改和查看各種無法用紙張實現(xiàn)的效果 。 軟件布局法 2009年 7月 40 驗總結(jié) 首頁的設計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往看到網(wǎng)站第一頁就對站點產(chǎn)生一個整體的感覺。能不能促使瀏覽者繼續(xù)點擊進入，能否吸引瀏覽者多花時間駐留在站點上，全憑首頁設計的“功力”了。所以，首頁的設計和制作是絕對要重視和花心思的。一般首頁設計和制作要占整個網(wǎng)站制作時間的 40%。記住 ,寧可多花些時間在整體設計、框架制作和首頁設計上，避免網(wǎng)站全部做好以后再修改，那將是最浪費精力、浪費時間、浪費金錢的事。 2009年 7月 41 站其他頁面的設計 務描述 利用 聞類別網(wǎng)站其它功能頁面的設計 任務 2009年 7月 42 務實現(xiàn) 1 2 對列表頁進行設計 對內(nèi)容頁進行設計 利用 聞類別網(wǎng)站其它功能頁面設計 的具體操作步驟 2009年 7月 43 務實現(xiàn) -(1) 對列表頁進行設計 先來劃