案例網(wǎng)站欄目的規(guī)劃

案例網(wǎng)站欄目的規(guī)劃教學(xué)設(shè)計課型：新授課時：2教學(xué)目標(biāo)了解網(wǎng)站的建設(shè)流程了解案例網(wǎng)站的工程規(guī)劃重點(diǎn)網(wǎng)站的建設(shè)流程難點(diǎn)網(wǎng)站的建設(shè)流程關(guān)鍵結(jié)合程序?qū)嵗斫饨虒W(xué)方法：工程實(shí)例教學(xué)

教學(xué)準(zhǔn)備教具資料網(wǎng)絡(luò)教室、多媒體播送環(huán)境準(zhǔn)備Dreamweavercs3

內(nèi)容提要1.欄目籌劃

2.風(fēng)格設(shè)計

案例網(wǎng)站“西部汽車王〞的欄目規(guī)劃本書案例網(wǎng)站“西部汽車王〞首頁面和子頁面的欄目規(guī)劃如下：1、首頁的欄目規(guī)劃網(wǎng)站首頁主要主要包括：網(wǎng)站CI標(biāo)識，網(wǎng)站形象動畫、網(wǎng)站用戶登陸區(qū)、新聞搜索區(qū)、新車展示、新聞速遞、汽車王公告、汽車文化、政府信息等，這些是網(wǎng)站的一級欄目。一級欄目設(shè)置好后，需要考慮一級欄目之下的二級欄目。2、子頁面的欄目規(guī)劃網(wǎng)站一級欄目規(guī)劃后，需要考慮的是網(wǎng)站的二級欄目，網(wǎng)站二級欄目應(yīng)該在網(wǎng)站的子頁面，二級欄目應(yīng)該說內(nèi)容沒有一級欄目復(fù)雜，它相對來說比較單一，因?yàn)橐话闶菑木W(wǎng)站首頁單擊各個鏈接進(jìn)入二級欄目的頁面。二級欄目不應(yīng)該將所有的一級欄目的內(nèi)容全局部布在頁面中，而應(yīng)該突出重點(diǎn)，使用戶翻開網(wǎng)站頁面后重點(diǎn)顯示的是與一級欄目中的鏈接有關(guān)的內(nèi)容。例如：二級欄目可以設(shè)置：用戶登錄成功的二級頁面、用戶修改資料的頁面、新聞搜索結(jié)果頁面、新聞具體內(nèi)容頁面、汽車文化的詳細(xì)頁面、新車快報頁面等。在網(wǎng)站的欄目設(shè)置好后，接下要做的工作是網(wǎng)站風(fēng)格及頁面布局規(guī)劃。

案列網(wǎng)站風(fēng)格及頁面布局設(shè)計案例網(wǎng)站風(fēng)格設(shè)計●如何樹立網(wǎng)站風(fēng)格？●如何產(chǎn)生創(chuàng)意？風(fēng)格(Style)就是站點(diǎn)整體給瀏覽者的綜合感受，它應(yīng)該是站點(diǎn)與眾不同的特色，包括網(wǎng)站頁面字里行間透露出作者或企業(yè)的文化品味和行事風(fēng)格。如何樹立網(wǎng)站風(fēng)格呢？可以按照這樣幾個步驟：(1)、確信風(fēng)格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風(fēng)格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證網(wǎng)站內(nèi)容的質(zhì)量和價值性。這是最根本的，確立網(wǎng)站風(fēng)格的前提。

案列網(wǎng)站風(fēng)格及頁面布局設(shè)計(2)、需要徹底搞清楚自己網(wǎng)站希望給人一個什么樣的印象。(3)、在明確自己的網(wǎng)站印象后，開始努力建立和加強(qiáng)這種印象。風(fēng)格的形成不是一次定位的，需要設(shè)計者在實(shí)踐中不斷強(qiáng)化，調(diào)整，修飾。創(chuàng)意是網(wǎng)站生存的關(guān)鍵，不同的創(chuàng)意可以產(chǎn)生不同的網(wǎng)站，或者相同的內(nèi)容可以有不同的創(chuàng)意創(chuàng)意思考的途徑最常用的是聯(lián)想，這里提供了網(wǎng)站創(chuàng)意的25種聯(lián)想線索：

把它顛倒

把它縮小

把顏色換一下

使它更長

使它閃動

把它放進(jìn)音樂里

結(jié)合文字音樂圖畫

使它成為年輕的

使它重復(fù)

使它變成立體

參加競賽

參加打賭

變更一局部

分裂它

使它羅曼蒂克

使它速度加快

增加香味

使它看起來流行

使它對稱

將它向兒童訴求

價格更低

給它起個綽號

把它打包

免費(fèi)提供

以上各項(xiàng)延伸組合本書案例網(wǎng)站“西部汽車王〞的風(fēng)格可以進(jìn)行如下設(shè)計：本書案例網(wǎng)站“西部汽車王〞整個色調(diào)是灰色的，應(yīng)該是比較專業(yè)嚴(yán)肅的，當(dāng)然在講汽車文化、設(shè)計汽車留言時整個風(fēng)格略有變化，配以綠色調(diào)，代表生氣。

網(wǎng)頁布局的根本概念1、頁面尺寸由于頁面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于你無法突破顯示器的范圍，同時瀏覽器也將占去不少空間，留給設(shè)計者的頁面范圍變得越來越小。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428象素；分辨率在640x480的情況下，頁面的顯示尺寸為：620X311象素；分辨率在1024X768的情況下，頁面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁面尺寸越大。

2、整體造型什么是造型，造型就是創(chuàng)造出來的物體形象。這里是指頁面的整體形象，這種形象應(yīng)該是一個整體，圖形與文本的結(jié)合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對于頁面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對于不同的形狀，它們所代表的意義是不同的。比方矩形代表著規(guī)那么，你注意到很多ICP和政府網(wǎng)頁都是以矩形為整體造型；圓形帶表著柔和、團(tuán)結(jié)、溫暖、平安等，許多時尚站點(diǎn)喜歡以圓形為頁面整體造型；三角形代表著力量、權(quán)威、牢固等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁面整體造型；菱形代表著平衡、協(xié)調(diào)、公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁面整體造型。雖然不同形狀代表著不同意義，但目前的網(wǎng)頁制作多數(shù)是結(jié)合多個圖形加以設(shè)計，在其中某種圖形的構(gòu)圖比例可能占得較多一些。

3、頁頭頁頭又可稱之為頁眉，頁眉的作用是定義頁面的主題。比方：一個站點(diǎn)的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點(diǎn)是什么內(nèi)容。頁頭是整個頁面設(shè)計的關(guān)鍵，它將牽涉到下面的更多設(shè)計和整個頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名字或者圖片或者公司標(biāo)志以及旗幟廣告。4、文本文本在頁面中出現(xiàn)都是以行或者塊(段落)出現(xiàn)，它們的擺放位置決定整個頁面布局的可視性。在過去因?yàn)轫撁嬷谱骷夹g(shù)的局限，文本放置位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁面的任何位置。

5、頁腳頁腳和頁頭相照應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。讀者可以看到許多制作信息都是放置在頁腳的。6、圖片圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關(guān)鍵。而設(shè)計者的布局思維也將表達(dá)在這里。7、多媒體除了文本和圖片，還有聲音，動畫，視頻等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動態(tài)網(wǎng)頁的興起，它們在網(wǎng)頁布局上也變得越來越重要。

網(wǎng)頁常見布局結(jié)構(gòu)常見頁面布局結(jié)構(gòu)有七種，下面分別介紹。●“同〞字形布局結(jié)構(gòu)“同〞字形結(jié)構(gòu)就是頁面整體布局類似于一個“同〞字，頁頁頂部為主導(dǎo)航欄，下方左右兩側(cè)為二級導(dǎo)航欄，登錄注冊區(qū)、搜索區(qū)、更新推薦區(qū)、友情鏈接區(qū)，屏幕中間顯示主體內(nèi)容。“同〞字形結(jié)構(gòu)的布局非常普遍，這種布局的優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，左右對稱，主次清楚，缺點(diǎn)是版式呆板，如果主內(nèi)容較多，那么頁面容易過長顯示。

●“國〞字形布局“國〞字形布局是在“同〞字形布局的根底上變化而來，它是同字形的布局結(jié)構(gòu)下方增加一個橫幅狀的“菜單或廣告條〞?！瘛翱铷曌中谓Y(jié)構(gòu)這種頁面布局的特點(diǎn)去掉了“國〞字形布局右邊的邊框局部，給主內(nèi)容區(qū)釋放了更多空間，其內(nèi)容雖然看上去比較多，但布局整齊又不過于擁擠，適合下載類站點(diǎn)，這種布局站點(diǎn)色彩要協(xié)調(diào)，通常外部顏色深，內(nèi)部顏色淺，有透視類效果，如網(wǎng)易的結(jié)構(gòu)布局。●“三〞字形結(jié)構(gòu)簡潔明快的藝術(shù)性網(wǎng)頁布局，適用于藝術(shù)類、收藏類、展示類網(wǎng)站，這種布局往往采用簡單的圖象和線條代替擁擠的文字，給瀏覽者以強(qiáng)烈的視覺沖擊，使其感覺進(jìn)入了一幅簡單的畫面，不是一個分門別類的超市，它的一級頁面和二級頁面的鏈接都按照行水平排列在頁面中部，網(wǎng)站標(biāo)志什么醒目。

●“川〞字形布局川字形布局結(jié)構(gòu)在網(wǎng)站設(shè)計時也是較為常見的布局，整個網(wǎng)頁在垂直方向上分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁的索引功能，如果網(wǎng)站欄目較多，可以考慮采用這種布局?！褡杂墒讲季肿杂墒讲季执蚱屏藗鹘y(tǒng)了布局的結(jié)構(gòu)，頁面布局比較隨意如一張宣傳廣告，以精美圖片，動畫作為頁面設(shè)計的中心，菜單欄按鈕自由設(shè)置在頁面上，這種網(wǎng)站布局屬于時尚型網(wǎng)站，網(wǎng)站優(yōu)點(diǎn)是漂亮、吸引人；缺點(diǎn)是顯示速度較慢，文字信息少?！褡笥覍ΨQ式布局這種布局是采用左右對稱分?jǐn)嗑W(wǎng)頁的布局，在左右布局內(nèi)部自由安排文字和圖片，這種布局一般適合電子商務(wù)網(wǎng)站。

案例網(wǎng)站“西部汽車王〞布局設(shè)計按照前面所述的方法對案例網(wǎng)站“西部汽車王〞進(jìn)行頁面布局設(shè)計。該布局設(shè)計就是前面介紹的“川〞字型布局類型的應(yīng)用。“中國西部汽車王〞網(wǎng)站的欄目：網(wǎng)站頁眉中的欄目：用戶注冊、網(wǎng)站后臺管理導(dǎo)航中的欄目有：新車展示、舊車交易、維修培訓(xùn)、汽車常識、修車網(wǎng)點(diǎn)、汽車商情、汽車文化、汽車留言。根據(jù)網(wǎng)站的欄目可以對頁面按照先畫草圖、再成定稿的方法進(jìn)行布局設(shè)計。網(wǎng)站總體來說是按照“川〞字形結(jié)構(gòu)，主體內(nèi)容區(qū)分為三列，中間一列占的面積較大，左右兩側(cè)劃分較小。頁面左側(cè)包含以下欄目：用戶登錄區(qū)、新聞搜索區(qū)、政府信息區(qū)、汽車常識區(qū)、友情鏈接區(qū)。頁面右側(cè)包含以下欄目：汽車王公告、汽車文化、汽車商情區(qū)。頁面中間包含的欄目：新聞速遞、新車快報。頁面最下面是版權(quán)區(qū)、技術(shù)支持區(qū)。

案例網(wǎng)站“西部汽車王〞目錄結(jié)構(gòu)設(shè)計設(shè)計網(wǎng)站目錄沒有特別的規(guī)那么，只要方便使用和今后的維護(hù)管理。分析網(wǎng)站的欄目可知，要設(shè)計網(wǎng)站的目錄，首先要考慮網(wǎng)站的欄目，網(wǎng)站欄目可以分為三類：一是欄目中內(nèi)容較多，較復(fù)雜；二是內(nèi)容較少，但是需要經(jīng)常更新的欄目；三是首頁，這是很重要的頁面，需要單獨(dú)放在網(wǎng)站的根目錄下。根據(jù)這個要求，可以設(shè)計如下的目錄結(jié)構(gòu)：新車展示單獨(dú)建立一個文件夾，汽車常識單獨(dú)建立一個文件夾，汽車商情單獨(dú)建立一個文件夾，汽車文化單獨(dú)建立一個文件夾，汽車留言需要單獨(dú)建立一個文件夾，同時由于