【正文】 上占優(yōu)勢地位。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。在欄目編排時需要注意的是：? 盡可能刪除那些與主題無關(guān)的欄目；? 盡可能將網(wǎng)站內(nèi)最有價值的內(nèi)容列在欄目上；? 盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽；輔助內(nèi)容，如站點簡介、版權(quán)信息等大可不必放在主欄目里，以免沖淡主題。另外，板塊的編排設(shè)置也要合理安排與劃分。板塊比欄目的概念要大一些，每個板塊都有自己的欄目。（2）目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)網(wǎng)站的目錄是指建立網(wǎng)站時創(chuàng)建的目錄。例如：在用 Dreamweaver 建立網(wǎng)站時都默認建立了根目錄和 Images 子目錄。目錄的結(jié)構(gòu)是一個容易忽略的問題，大多數(shù)制作者都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的維護，以后內(nèi)容的擴充和移植有著重要的影響。所以建立目錄結(jié)構(gòu)時也要仔細安排，比如：? 不要將所有文件都存放在根目錄下。有網(wǎng)站制作者為了方便，將所有文件都放在根目錄下。這樣就很容易造成：文件管理混亂，搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關(guān)聯(lián)的文件，影響工作效率。? 按欄目內(nèi)容建立子目錄。子目錄的建立，首先按主欄目建立。新聞內(nèi)容較多，需要經(jīng)常更新的可以建立獨立的子目錄。而一些相關(guān)性強，不需要經(jīng)常更新的欄目，例如：協(xié)會簡介、協(xié)會章程等可以合并放在一個統(tǒng)一目錄下。? 在每個主目錄下都建立獨立的 Images 目錄。一般來說，一個站點根目錄下都有一個默認地Images 目錄。將所有圖片都存放在這個目錄里很是不方便，比如在欄目刪除時，圖片的管理相當(dāng)麻煩。所以為每個主欄目建立一個獨立的 Images 目錄是方便管理的。需要注意的還有：目錄的層次不要太深，不要超過 3 層；不要使用中文目錄，可能對網(wǎng)址的正確顯示造成困難；不要使用過長的目錄，太長的目錄名不便于記憶；盡量使用意義明確的目錄，以便于記憶和管理。（3）網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓撲結(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：●樹狀鏈接結(jié)構(gòu)（一對一） ，這類似 DOS 的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進入，一級級退出，條理比較清晰，訪問者明確知道自己在什么位置，不會“不知身在何處” ，但是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須回到首頁再進行?！裥菭铈溄咏Y(jié)構(gòu)（一對多） ，類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有鏈接。這樣瀏覽比較方便，隨時可以到達自己喜歡的頁面。但是由于鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。因此，在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用。網(wǎng)站希望瀏覽者既可以方便快速地達到自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。關(guān)于鏈接結(jié)構(gòu)的設(shè)計，在實際的網(wǎng)頁制作中是非常重要一環(huán)，采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。 素材準(zhǔn)備（1）搜索瀏覽，制作收集素材。明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。為了收集素材，除了身邊現(xiàn)成的一些素材，還需要到網(wǎng)上多查找素材。? 有的圖片可以自己用 Photoshop、fireworks 制作設(shè)計。? 對于一些實物素材，我們利用拍攝、掃描等幫助，處理成電腦文件以便設(shè)計時使用。? 網(wǎng)絡(luò)搜索找素材：利用網(wǎng)絡(luò)搜索引擎，輸入與主題相關(guān)的關(guān)鍵詞進行搜索下載，然后加以修改。? 瀏覽網(wǎng)頁選素材：逐個瀏覽搜索到的相關(guān)網(wǎng)頁，尋找可以利用的材料。注意記錄下選中的網(wǎng)頁地址，以便隨時復(fù)制需要的資料。也可以及時下載保存看中的文字圖片資料，在加以修改在使用。（2）整理素材，設(shè)計網(wǎng)頁。? 對收集的素材進行分類整理，并由此設(shè)置子網(wǎng)頁欄目，一般不宜過多。將各類素材分別放入或鏈接到相應(yīng)網(wǎng)頁中。對于網(wǎng)上素材的使用，采取下面兩種做法：? 對于重點素材，一般用復(fù)制、下載的方法放入自己的網(wǎng)頁中，如自己各子網(wǎng)頁的文字、圖片等中心內(nèi)容。? 對于相關(guān)的次要素材，尤其是內(nèi)容豐富而繁雜的，用超鏈接的方法將整個網(wǎng)頁鏈接到自己的網(wǎng)頁中，但不宜過多；還可以是整個網(wǎng)站的友情鏈接。這也是一些中小型網(wǎng)站常用的豐富自己、加強交流的好方法，給上網(wǎng)瀏覽者帶來不少方便。 網(wǎng)頁設(shè)計考慮的問題當(dāng)你在 Inter 這個信息的海洋中盡情遨游時，會發(fā)現(xiàn)許許多多內(nèi)容豐富、創(chuàng)意新穎、設(shè)計獨特的網(wǎng)頁，見到這樣漂亮可人的網(wǎng)頁有點心動。但是網(wǎng)頁設(shè)計時應(yīng)考慮哪些方面的問題，包括網(wǎng)站功能和以及訪問者需要什么。你的整個設(shè)計都應(yīng)該圍繞這些方面來進行。（1）頁面內(nèi)容要新穎網(wǎng)頁內(nèi)容的選擇要不落俗套，要重點突出一個“新”字，這個原則要求我們在設(shè)計網(wǎng)站內(nèi)容時不能照抄別人的內(nèi)容，要結(jié)合設(shè)計主題的實際情況創(chuàng)作出一個獨一無二的網(wǎng)站。放眼望去，網(wǎng)上從頭到尾找不出一絲“鮮”意。所以，我們在設(shè)計網(wǎng)頁時，要把功夫下在選材上。選材要盡量做到“少”而“ 精”,又必須突出“新”，這樣的網(wǎng)頁一定會受到大家的歡迎。（2）網(wǎng)頁命名要簡潔由于一個網(wǎng)站不可能就是由一個網(wǎng)頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最后能給這些頁面起一些有代表性的而且簡潔易記的網(wǎng)頁名稱。這樣既會有助于你以后方便管理網(wǎng)頁。在給網(wǎng)頁命名時，最好使用自己常用的或符合頁面內(nèi)容的小寫英文字母，這直接關(guān)系到頁面上的連接。（3）網(wǎng)頁內(nèi)容要易讀網(wǎng)站設(shè)計最重要的訣竅，恐怕就是你的網(wǎng)頁要易讀。這就意味著,你必須花點心思來規(guī)劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網(wǎng)頁來很費勁。一般來說，淺色背景下的深色文字為佳。另外，最好讓文本左對齊，而不是居中。按當(dāng)代中文的閱讀習(xí)慣，文本大都居左的。當(dāng)然，標(biāo)題一般應(yīng)該居中，因為這符合讀者的閱讀習(xí)慣。（4）少用特殊字體雖然你可以在你的 HTML 中使用特殊的字體，但是，你不可能預(yù)測你的訪問者在他們的計算機上將看到什么。在你的計算機里看起來相當(dāng)好的頁面，在另一個不同的平臺上看起來可能非常糟糕。一些網(wǎng)站設(shè)計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯(lián)風(fēng)格表 CSS 有助于解決這些問題，但是只有最新版的瀏覽器才支持 CSS。（5）考慮瀏覽器的兼容性當(dāng)然現(xiàn)在 IE 所占的市場份額越來越大，但是我們?nèi)匀恍枰紤]到 Mozilla Firefox、Netscape 以及Opera 這些瀏覽器用戶。設(shè)計風(fēng)格的考慮，如色彩的搭配，圖形、線條的使用等等。要時刻為用戶著想，必須最少在幾種不同類型的瀏覽器下測試網(wǎng)站，看看兼容性如何。（6）網(wǎng)頁風(fēng)格要統(tǒng)一網(wǎng)頁上所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子用戶看起來舒服、順暢，會對你的網(wǎng)站留下一個“很專業(yè)”的印象。（7）動畫最多只用一個 大家都喜歡用 GIF 動畫來裝飾網(wǎng)頁，它的確很吸引人，但我們在選擇時，是否能確定必須用 GIF 動畫，如果答否，那么就選擇靜止的圖片，因為它的容量要小得多。同樣的尺寸的 LOGO，GIF 動畫的容量有 5K，而靜止 LOGO 的只有 3K。雖然只有 2K 之差，但多起來，就會影響下載的速度，所以，如果有些不是必須的，就選擇最小的。（8）善用圖像用戶在網(wǎng)上四處漫游，你必須設(shè)法吸引和維護他們對你的主頁的注意力。萬維網(wǎng)的其中一個最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。注意圖畫可以彌補文字之不足，但并不能夠完全取代文字。制作主頁時，必須注意將圖像所連接的重要信息或聯(lián)接其他頁面的指示用文字重復(fù)表達幾次，同時要注意避免使用過大的圖像。（9）使網(wǎng)站具有交互功能一個靜態(tài)網(wǎng)頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網(wǎng)站上提供一些回答問題的工具以及其他具有交互性能的設(shè)計，使得訪問者能從網(wǎng)站上獲得交互的信息，從而使訪問者有一種參與網(wǎng)絡(luò)建設(shè)的新鮮感和成就感。 網(wǎng)頁制作流程（如：圖 11）確 定主 題需 求分 析總 體設(shè) 計搜 索 整合 資 料特 效 技術(shù) 制 作頁 面設(shè) 計效 果分 析制 作評 審整 合測 試修 改 評審 完 成圖 11 （如：圖 12）首 頁協(xié) 會 簡 介協(xié) 會 簡 述協(xié) 會 章 程管 理 制 度指 導(dǎo) 老 師協(xié) 會 概 況現(xiàn) 任 學(xué) 生 干 部技 術(shù) 交 流 科 目娛 樂 活 動 形 式協(xié) 會 品 牌 活 動機 構(gòu) 設(shè) 置軟 件 技 術(shù) 部網(wǎng) 絡(luò) 技 術(shù) 部設(shè) 計 制 作 部硬 件 技 術(shù) 部事 務(wù) 秘 書 處新 聞 動 態(tài)協(xié) 會 新 聞協(xié) 會 公 告軟 件 編 程 應(yīng) 用網(wǎng) 絡(luò) 網(wǎng) 頁 技 術(shù)圖 形 圖 像 技 術(shù)硬 件 維 護 技 術(shù)技 術(shù) 園 地I T 動 態(tài)活 動 風(fēng) 采生 活 娛 樂資 源 共 享協(xié) 會 視 頻計算機協(xié)會網(wǎng)站（計協(xié)之家）圖 12二、開發(fā)工具與開發(fā)技術(shù)本站主要使用 Dreamweaver 軟件及 Div+CSS、html 進行網(wǎng)頁的排版布局、使用 fireworks 和 Photoshop CS 處理圖片及制作一些特效文字、Flash 制作本站動畫。 開發(fā)工具 網(wǎng)頁制作工具 Dreamweaver簡介Dreamweaver 是美國 Macromedia 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver 是當(dāng)前主流的站點和網(wǎng)頁編輯器，其代碼簡潔、兼容性和整體功能都很強。Dreamweaver 的介入，使得網(wǎng)頁一些部分的實現(xiàn)變得更加直觀簡便。我們有 Fireworks 和 Photoshop 兩種選擇，Adobe Photoshop 在繪圖、色彩調(diào)整等諸多方面有著出色的功能，集成度高、適應(yīng)面廣和操作簡便。他不僅提供強大的繪圖工具，可以直接繪制藝術(shù)圖形，還能直接從掃描儀，數(shù)碼相機等