網(wǎng)站欄目、版面、風(fēng)格設(shè)計第一頁，共13頁。網(wǎng)站欄目、版面設(shè)計第二頁，共13頁。網(wǎng)站設(shè)計的目的在于把需要表達的信息以恰當?shù)姆绞浇M織并呈現(xiàn)在網(wǎng)上，設(shè)法吸引人們的關(guān)注，并為瀏覽者提供方便的訪問。一、網(wǎng)頁欄目設(shè)計設(shè)計一個網(wǎng)站與編寫一本書有相似之處，開始著手寫書之前，首先要進行總體構(gòu)思，擬定書的編寫目錄，然后才按章節(jié)組織編寫內(nèi)容。同樣制作網(wǎng)站前要設(shè)計好網(wǎng)站的欄目。請大家觀看南京大學(xué)的網(wǎng)站：當然，還可以有二級欄目或三級欄目：第一級欄目如下圖示：第三頁，共13頁。1、“T”字型：也稱“廠”字型，頁面頂部為主菜單以及橫條網(wǎng)站標志+廣告條，下方左面為導(dǎo)航菜單，右面顯示內(nèi)容的布局。優(yōu)點：頁面結(jié)構(gòu)清晰，主次分明；缺點：呆板，如果細節(jié)色彩上不注意，容易“看之無味”。二、網(wǎng)頁版面設(shè)計網(wǎng)頁要呈現(xiàn)的內(nèi)容很多，概括起來可分為標題信息、欄目信息、內(nèi)容信息、附加信息等，需要進行合理的放置，讓人看起來井井有條，主次分明。一個網(wǎng)頁的版面通常以屏幕中央最能引人注意，屏幕上方緊隨其后，屏幕的左右側(cè)通常放置不太重要或固定信息，附加信息（如版權(quán)信息）一般放在最下方。版面布局的整體造型和色彩搭配的靈活運用也會影響人們的注意力，產(chǎn)生不同的視覺效果。版面布局沒有絕對統(tǒng)一的方法，應(yīng)視需要而定，有創(chuàng)意的布局會給人以耳目一新的感覺。常見頁面布局樣式：第四頁，共13頁。2、“國”字型，也稱“同”字型。即最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。常見頁面布局樣式：第五頁，共13頁。3、自由式。又稱POP布局頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，菜單欄目自由擺放。優(yōu)點：漂亮、吸引人，適宜于藝術(shù)類網(wǎng)站。缺點：顯示速度慢，文字信息量少。常見頁面布局樣式：第六頁，共13頁。4、“口”字型。頁面一般上下各有一個廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。優(yōu)點：充分利用版面，信息量大，與其他頁面的鏈接多，切換方便；缺點：頁面擁擠，不過靈活。5、標題正文型。標題正文型布局的布局結(jié)構(gòu)一般用于顯示文章頁面、新聞頁面和一些注冊頁面等，其特點是簡潔明快，干擾信息少，較為正規(guī)。

6、“匡”字形布局：這種布局結(jié)構(gòu)給主內(nèi)容區(qū)釋放了更多空間，內(nèi)容雖看起來比較多，但布局整齊又不過于擁擠，適合一些下載類和賀卡類站點使用。7、“三”字形布局：一般應(yīng)用在簡潔明快的藝術(shù)性網(wǎng)頁布局，這種布局一般采用簡單的圖片和線條代替擁擠的文字，給瀏覽者以強烈的視覺沖擊。8、“川”字型布局：整個頁面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁的索引功能，一般適用在欄目較多的網(wǎng)站里。9、對稱對比布局。顧名思義，采取左右或者上下對稱的布局，一半深色一半淺色，一般用于設(shè)計型站點。優(yōu)點是視覺沖擊力強，缺點是很難將兩部分有機地結(jié)合起來。

10、FLASH布局：FLASH布局是指網(wǎng)頁頁面以一個或多個Flash作為頁面主體的布局方式。在這種布局中，大部分甚至整個頁面都是Flash。常見頁面布局樣式：第七頁，共13頁。鞏固練習(xí)：1.如果一個網(wǎng)站的欄目設(shè)置不合理，可能導(dǎo)致網(wǎng)站（）A.不能正常運行B.目錄結(jié)構(gòu)不清晰、內(nèi)容混亂C.沒有自己的整體風(fēng)格D.瀏覽時速度比較慢2.如果一個網(wǎng)頁給人的感覺是內(nèi)容雜亂無序，主次不分，這主要是因為（）A.制作工具選擇不合理B.色彩選擇不合理

C.版面設(shè)計不合理D.語言使用不合理3.網(wǎng)頁的版面設(shè)計是否精美是吸引網(wǎng)民訪問網(wǎng)站的重要因素之一。下列關(guān)于版面設(shè)計的敘述，錯誤的是（）

A.網(wǎng)頁版面布局可按創(chuàng)意草案、粗略布局、最后定案三個步驟來進行

B.可以根據(jù)自己的想法在紙上繪制初步的版面布局創(chuàng)意圖

C.版面設(shè)計包括風(fēng)格設(shè)計、布局設(shè)計和交互設(shè)計

D.版面布局就是將網(wǎng)頁需要呈現(xiàn)的內(nèi)容進行合理的放置第八頁，共13頁。網(wǎng)站風(fēng)格設(shè)計第九頁，共13頁。一、風(fēng)格設(shè)計

風(fēng)格是指網(wǎng)站的整體形象給瀏覽受。有的嚴肅計策、有的清爽溫馨、有的深沉厚重、有的生動活潑、有的古樸典雅、有的豪邁奔放。風(fēng)格設(shè)計與主題是密不可分的，是為突出主題服務(wù)的。一種風(fēng)格的形成需要從多方面著手設(shè)計，包括網(wǎng)頁布局的整體造型、色彩的搭配、字體圖片的樣式設(shè)置、網(wǎng)站的標志設(shè)計等，同一個網(wǎng)站的各網(wǎng)頁之間應(yīng)保持風(fēng)格一致。1、網(wǎng)站標志樹立網(wǎng)站整體風(fēng)格的第一步是：設(shè)計、制作一個網(wǎng)站的標志(logo)，將你的標志盡可能地放置在每個頁面最突出的位置上，或者頁眉，或者頁腳，或者背景。如同商標一樣，看見標志就讓大家聯(lián)想起你的網(wǎng)站。設(shè)計標志有這樣幾種方法：(1)選擇與網(wǎng)站主題有關(guān)的，并具有代表性的人或者物，用它們作為設(shè)計的藍本，加以卡通化和藝術(shù)化。例如搜狐網(wǎng)站的卡通狐貍。(2)對于專業(yè)性的網(wǎng)站，可以以本專業(yè)有代表的物品作為標志。比如中國銀行的銅板標志。(3)最常用和最簡單的方式是用自己網(wǎng)站的中文或者英文名稱作標志。采用不同的字體、字母的變形與組合，可以很容易制作出自己的標志。比如百度，Google。第十頁，共13頁。一、風(fēng)格設(shè)計2、網(wǎng)頁色彩搭配設(shè)計網(wǎng)站的標準色彩：網(wǎng)站的標志、標題、主菜單和主色塊文字的鏈接色彩盡量使用標準色彩；圖片的主色彩、背景色、邊框等盡量使用標準色彩同色系的色彩，這樣給人以整體統(tǒng)一的感覺。標準色彩能體現(xiàn)網(wǎng)站形象，延伸網(wǎng)站內(nèi)涵。網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標準色彩是相當重要的一步。3、設(shè)置字體設(shè)計網(wǎng)站的字體：在關(guān)鍵的標題、菜單、圖片里使用統(tǒng)一的標準字體。與標準色彩一樣，標準字體是指用于標志、標題、主菜單的特有字體。

但要注意的是使用一些比較特別的字體時，最好使用圖片的形式，否則你的辛苦設(shè)計便付之東流了，因為瀏覽者的計算機里很可能沒有安裝你的特別字體。第十一頁，共13頁。二、素材的收集與管理1、什么是素材？

網(wǎng)頁制作過程中常用的多媒體文件格式有：

（1）圖片：gif、jpg、png等

（2）聲音：midi、wav、ra等

（3）視頻：wmv、asf、rm、mov等

選用何種格式的文件要考慮到文件的大小。文件過大，會影響網(wǎng)頁打開的速度，影響瀏