主題資源網(wǎng)站以其明確的主題、大量的結(jié)構(gòu)化的學(xué)習(xí)資源、溝通探究式的“教”和“學(xué)”等特點(diǎn)成為信息技術(shù)與學(xué)科整合研究的切入點(diǎn)，也成為教師開展教學(xué)活動(dòng)、展示自己教學(xué)思想的舞臺(tái)。但一個(gè)優(yōu)秀的主題網(wǎng)站的完成需要投入很多精力，如何做到有條不紊且效率最高呢？那就要了解網(wǎng)站制作的流程及注意事項(xiàng)，避免做無(wú)用功。
　　
　　網(wǎng)站的整體規(guī)劃和設(shè)計(jì)階段
　　
　　1.網(wǎng)站主題的確定
　　網(wǎng)站的主題也就是網(wǎng)站的題材。主題資源網(wǎng)站籠統(tǒng)地可分為：?jiǎn)我粚W(xué)科型主題資源網(wǎng)站和跨學(xué)科型主題資源網(wǎng)站兩大類。對(duì)于單一學(xué)科型主題資源網(wǎng)站，可以以某一個(gè)知識(shí)點(diǎn)、某一個(gè)章節(jié)為主題；對(duì)于跨學(xué)科的主題資源網(wǎng)站，就要考慮網(wǎng)站所涉及學(xué)科范圍的大小。比如，語(yǔ)文：散文園地、文言文園地等；數(shù)學(xué)：一元一次不等式、角的大家庭等；化學(xué)：氧氣的性質(zhì)和制法、摩爾定律及其應(yīng)用等；跨學(xué)科：絲綢之路（含歷史、地理、語(yǔ)文等學(xué)科）等。
　　題材確定以后，就可以圍繞題材給網(wǎng)站起一個(gè)名字了。網(wǎng)站名稱，也是網(wǎng)站設(shè)計(jì)的一部分，而且是很關(guān)鍵的一個(gè)要素。好的網(wǎng)站名稱可以起到畫龍點(diǎn)睛的作用。關(guān)于起名，我的建議是：(1)貼近主題，使人一目了然，避免無(wú)關(guān)信息的干擾。(2)名稱要易記，最好用中文名稱，不要使用英文或者中英文混合型名稱。而且，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在8個(gè)字以內(nèi)，便于記憶，便于其他站點(diǎn)的鏈接排版。(3)名稱要有特色，能體現(xiàn)一定的內(nèi)涵，能給瀏覽者更多的沖擊和想象空間。
　　2.欄目?jī)?nèi)容的設(shè)計(jì)
　　建立一個(gè)網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊，結(jié)果不但瀏覽者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引。索引應(yīng)該將網(wǎng)站的主題層次分明地表現(xiàn)出來(lái)，并將主題相關(guān)的知識(shí)、資源等也有層次地展示出來(lái)。另外，主題網(wǎng)站是學(xué)生探究式學(xué)習(xí)的舞臺(tái)，所以欄目的設(shè)置還要考慮操作的直觀性和簡(jiǎn)便性。
　　欄目的內(nèi)容除了要有主題相關(guān)知識(shí)和資源，還要有動(dòng)態(tài)交互部分，如留言板（實(shí)現(xiàn)網(wǎng)上答疑）、交流園地（給學(xué)生提供上傳空間）等，一方面供學(xué)生交流探討、自主學(xué)習(xí)，另一方面實(shí)現(xiàn)網(wǎng)站的師生共建。
　　欄目名稱的確定要簡(jiǎn)單明了，突出欄目的內(nèi)容信息，為了便于版面的設(shè)計(jì)，最好采用4個(gè)字。
　　3.網(wǎng)站的風(fēng)格設(shè)計(jì)
　　網(wǎng)站風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI（標(biāo)志、色彩、字體、標(biāo)語(yǔ)）、版面布局、瀏覽方式、交互性、文字、語(yǔ)氣、內(nèi)容價(jià)值、存在意義等諸多因素。如我們覺得搜狐是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專業(yè)嚴(yán)肅的，這些都是網(wǎng)站給人的不同感受。
　　主題資源網(wǎng)站主要用于教學(xué)，網(wǎng)站的風(fēng)格設(shè)計(jì)是為突出網(wǎng)站主題服務(wù)的，所以，我們要根據(jù)網(wǎng)站的主題、面向的對(duì)象、學(xué)科的特色等方面來(lái)綜合考慮網(wǎng)站的風(fēng)格，具體可以從網(wǎng)站的布局、色彩基調(diào)、素材的采用等方面來(lái)體現(xiàn)網(wǎng)站的風(fēng)格。比如，要做一個(gè)荷塘月色的網(wǎng)站。為了突出“荷塘”這個(gè)主題，可以采用綠色基調(diào)，背景采用荷花或荷葉處理的朦朧圖，圖片素材、按鈕的設(shè)計(jì)等都要貼近荷塘這個(gè)主題。再如，要做面向幼兒的教學(xué)主題網(wǎng)站。因?yàn)槊嫦虻膶?duì)象是年齡較小的孩子，考慮到幼兒的心理和生理特點(diǎn)，在顏色上可以以明快的顏色為基調(diào)，圖片素材以活潑可愛型為主，為避免干擾孩子的視線，影響視力，字體應(yīng)較大一些，頁(yè)面應(yīng)比較簡(jiǎn)潔，最好不要充斥著大量的文字和圖片。
　　4.頁(yè)面框架的設(shè)計(jì)
　　眾所周知，框架設(shè)計(jì)是網(wǎng)站設(shè)計(jì)的基礎(chǔ)部分。形象一點(diǎn)說明框架設(shè)計(jì)，就是把頁(yè)面當(dāng)作一張白紙，在上面劃分出大小區(qū)域，并把信息安排到格子中去。劃分區(qū)域的方式就是框架設(shè)計(jì)的重點(diǎn)?？蚣茉O(shè)計(jì)不是孤立地去思考，而是要與導(dǎo)航設(shè)計(jì)、標(biāo)題按鈕、網(wǎng)站色彩等方面結(jié)合起來(lái)?？蚣艿男问绞嵌嘧兊?，它應(yīng)根據(jù)網(wǎng)站的信息內(nèi)容來(lái)劃分，有重點(diǎn)地突出和排列信息。結(jié)合現(xiàn)有網(wǎng)絡(luò)上能呈現(xiàn)的設(shè)計(jì)條件，提供以下幾個(gè)類型供大家參考。至于具體采用哪種類型，沒有特定的模式可循，可以根據(jù)自己的主題、內(nèi)容的多少、欄目策劃等細(xì)節(jié)確定。
　　(1)“國(guó)”字型：也稱為“同”字型，是一些大型網(wǎng)站所喜歡的，也是最為多見的結(jié)構(gòu)。即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來(lái)就是網(wǎng)站的主要內(nèi)容，左右分列一些小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。
　　(2)拐角型：此結(jié)構(gòu)與“國(guó)”字型結(jié)構(gòu)很相近，上面是標(biāo)題及廣告橫幅，接下來(lái)的左側(cè)是一窄列的鏈接（多為導(dǎo)航鏈接），右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。
　　(3)左右框架型：這是一種左右分別為兩頁(yè)的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)志，右面是正文。我們見到的多數(shù)大型論壇都是采用這種結(jié)構(gòu)，清晰了然。
　　(4)封面型：網(wǎng)站的首頁(yè)多采用此類型，大多為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫，放上幾個(gè)簡(jiǎn)單的鏈接，或者僅是一個(gè)“進(jìn)入”的鏈接，甚至直接在首頁(yè)的圖片上做鏈接而沒有任何提示。這種結(jié)構(gòu)大多出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁(yè)上，給人一個(gè)視覺緩沖，給人帶來(lái)賞心悅目的感覺，不至于一打開主頁(yè)就看到滿滿當(dāng)當(dāng)?shù)捻?yè)面。
　　網(wǎng)站信息的準(zhǔn)備和收集階段
　　在建立網(wǎng)站之前，必須依據(jù)確定的主題和內(nèi)容，搜集相關(guān)信息和材料，包括文字、圖片、動(dòng)畫、視頻等信息。
　　1.素材格式、大小要適于網(wǎng)上傳播
　　由于受網(wǎng)絡(luò)速度的限制，網(wǎng)站所采用的素材格式要有所選擇。視、音頻文件要轉(zhuǎn)換成流媒體的格式（視頻如wmv、rm、asf等，音頻如wma、ra等，視音頻轉(zhuǎn)換的軟件有Media encoder、Real producer等），圖片文件要采用gif和jpg格式。
　　素材的大小也很重要。太大了影響頁(yè)面的下載速度，超過了瀏覽者的忍耐限度。一般，單張圖片不要超過30K，單個(gè)動(dòng)畫控制在15K以內(nèi)，每頁(yè)圖片總量不要超過60K，這樣，其下載速度才可以讓人接受。所有的圖片都必須“減肥”成小圖片(100*40)，一般可以控制在6K以內(nèi)，較大的圖片可以“分割”成小圖片。另外，合理選擇jpg格式和gif格式也是至關(guān)重要的。色彩鮮艷、分辨率高的用jpg格式，色彩單調(diào)、分辨率低的用gif，并且，采用gif89a格式的圖片在download時(shí)能交錯(cuò)顯示。
　　2.素材分類應(yīng)遵循欄目的劃分
　　為了便于網(wǎng)站的制作和節(jié)省時(shí)間，在搜集保存素材時(shí)，就要規(guī)劃好素材?？梢詣?chuàng)建一個(gè)名字為“素材”的文件夾，在下面再按照網(wǎng)站欄目建立子文件夾，把素材存放到相關(guān)的欄目文件夾中，以方便查找。另外，對(duì)沒有采用
　　的素材要及時(shí)刪除，以減小網(wǎng)站容量。
　　
　　網(wǎng)站的制作階段
　　
　　1.形成良好的建站習(xí)慣
　　為了便于自己制作網(wǎng)站以及對(duì)網(wǎng)站的維護(hù)，避免網(wǎng)站在越做越大時(shí)目錄結(jié)構(gòu)紛亂無(wú)序、素材查找費(fèi)時(shí)費(fèi)力，最好形成良好的習(xí)慣：(1)每一個(gè)欄目一個(gè)文件夾，每個(gè)欄目中的素材，另設(shè)立子文件夾。(2)網(wǎng)頁(yè)命名最好采用“英文+序號(hào)”或“欄目代碼+日期+序號(hào)”。(3)注意歸檔。建立說明網(wǎng)站欄目、網(wǎng)頁(yè)、素材文件的命名規(guī)則的電子文檔，以備日后更新網(wǎng)站所需。
　　2.制作技術(shù)簡(jiǎn)單化
　　主題資源網(wǎng)站是為教學(xué)服務(wù)的，不要求運(yùn)用的技術(shù)多么高超，頁(yè)面效果多么多姿多彩，盡量追求技術(shù)簡(jiǎn)單化，讓自己從技術(shù)中解放出來(lái)，把精力放到基于主題資源網(wǎng)站的教學(xué)設(shè)計(jì)、內(nèi)容設(shè)計(jì)、資源準(zhǔn)備上，放到如何真正提高教學(xué)效果上來(lái)。
　　3.注意絕對(duì)路徑和相對(duì)路徑
　　經(jīng)常有教師訴苦：自己的網(wǎng)頁(yè)在移動(dòng)后有許多圖片不能正常顯示。什么原因呢？絕大多數(shù)都是因?yàn)槭褂昧隋e(cuò)誤的路徑所致。網(wǎng)頁(yè)中的圖像、動(dòng)畫等素材都有自己固定的存放位置，網(wǎng)頁(yè)只是通過路徑使用HTML語(yǔ)言來(lái)調(diào)用它們，然后把它們顯示在網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中的路徑大體可分為相對(duì)路徑和絕對(duì)路徑，大家(尤其是初學(xué)網(wǎng)頁(yè)設(shè)計(jì)的朋友)往往對(duì)它們不夠認(rèn)識(shí)，在應(yīng)該使用相對(duì)路徑的地方使用了絕對(duì)路徑，從而導(dǎo)致瀏覽器無(wú)法在指定的位置打開指定的文件，使素材不能正常顯示。一般情況下，如果是站內(nèi)文件，建議使用相對(duì)路徑，因?yàn)樗冉^對(duì)路徑的代碼短，另外，相對(duì)位置也比較容易找，使網(wǎng)站維護(hù)比較方便。至于絕對(duì)路徑，一般是做外部資源鏈接的時(shí)候才使用的。
　　
　　有的教師可能會(huì)有這樣的疑惑：一個(gè)網(wǎng)站有許多的鏈接，我怎么能保證它們的鏈接都正確，如果我調(diào)整了一下圖片或網(wǎng)頁(yè)的存儲(chǔ)路徑，那不是全亂了么？為了提高工作效率，我推薦大家使用Dreamweaver進(jìn)行網(wǎng)站編輯，因?yàn)樗袀€(gè)站點(diǎn)管理功能，使用該功能絕對(duì)路徑可以自動(dòng)地轉(zhuǎn)化為相對(duì)路徑，并且當(dāng)你在站點(diǎn)中改動(dòng)文件路徑時(shí)，與這些文件關(guān)聯(lián)的鏈接路徑都會(huì)自動(dòng)更改。
　　4.注意中英文的問題
　　制作網(wǎng)站的過程中，建議大家在素材名字、文件夾名稱中采用英文或者拼音。否則由于瀏覽器版本的問題，有時(shí)候會(huì)出現(xiàn)圖片不顯示，鏈接的視頻不播放等情況。
　　5.主頁(yè)上要下大功夫
　　主頁(yè)的作用好比一本書的封面，是為了吸引用戶更進(jìn)一步瀏覽你的網(wǎng)站內(nèi)容。因此，網(wǎng)站給人的第一觀感是最為重要的。主頁(yè)的設(shè)計(jì)應(yīng)以醒目為上，令人一目了然，并別具特色，令人過目不忘，如采用新穎的圖像、美觀的字體等，切勿堆砌太多不必要的細(xì)節(jié)，或使畫面過于復(fù)雜。主頁(yè)上的圖像應(yīng)力求簡(jiǎn)樸，并有一定的實(shí)際意義，最好能集美觀與傳訊于一身，切忌虛飾浮夸，同時(shí)，要避免耽擱用戶的時(shí)間，圖像愈大、顏色愈深，傳送頁(yè)面的時(shí)間愈長(zhǎng)。
　　6.使網(wǎng)站易于漫游
　　主頁(yè)的其中一個(gè)主要功能就是作為漫游工具，指引用戶查閱網(wǎng)站中的信息。因此，要盡量使漫游過程不費(fèi)吹灰之力?；谇逦鞔_和速度的考慮，主頁(yè)上的鏈接項(xiàng)目應(yīng)只限于幾個(gè)高級(jí)的類別（6～８?jìng)€(gè)鏈接項(xiàng)目最為理想），例如教學(xué)設(shè)計(jì)、教學(xué)資源等。同時(shí)，如果選擇的是“在當(dāng)前頁(yè)打開要瀏覽的頁(yè)面”，則欄目與欄目之間要能實(shí)現(xiàn)方便的切換，或者干脆采用“在空白頁(yè)打開鏈接”。
　　此外，提供給瀏覽者的閱讀信息不應(yīng)埋藏在重重疊疊的頁(yè)面之下，穿越五個(gè)以上的鏈接項(xiàng)目足以令人厭煩。因此，設(shè)計(jì)時(shí)，必須在廣度和深度之間求取平衡。如果網(wǎng)站中有太多的信息，就可能需要編制較長(zhǎng)的頁(yè)面或使用更多的鏈接項(xiàng)目，甚至可能要建立多個(gè)主頁(yè)，使每個(gè)主頁(yè)載有不同的信息。最受歡迎的設(shè)計(jì)處理方法是在主頁(yè)上增加關(guān)鍵字查找所需信息的功能。
　　7.不宜多用閃爍文字、動(dòng)畫等
　　有的教師想通過閃爍的文字或動(dòng)畫來(lái)使網(wǎng)站活潑些，是可以被人理解的，但一個(gè)頁(yè)面中最多不能有３處閃爍文字或動(dòng)畫，太多了給學(xué)生一種眼花繚亂的感覺，會(huì)干擾學(xué)生的注意力。
　　8.網(wǎng)站導(dǎo)航要清晰
　　制作網(wǎng)站時(shí)，所有的超鏈接都應(yīng)清晰無(wú)誤地向訪問者標(biāo)識(shí)出來(lái)，所有導(dǎo)航性質(zhì)的設(shè)置（如圖像按鈕）也都要有清晰的標(biāo)識(shí)，千萬(wàn)別光顧視覺效果的熱鬧，而讓訪問者不知東西南北。鏈接文本的顏色最好用約定俗成的格式：未訪問的用藍(lán)色；點(diǎn)擊過的用紫色或栗色?？傊?，文本鏈接一定要和頁(yè)面的其他文字有所區(qū)分，給訪問者清楚的導(dǎo)向。
　　
　　后期測(cè)試階段
　　
　　在網(wǎng)站正式發(fā)布之前，必須進(jìn)行有效的測(cè)試。要測(cè)試所有的鏈接和導(dǎo)航工具條的有效性，并檢查每個(gè)頁(yè)面是否有圖片不顯示、頁(yè)面不整齊等問題。另外，并非所有人都會(huì)使用最新的瀏覽器，為了照顧到使用低版本瀏覽器的訪問者，在保證網(wǎng)頁(yè)內(nèi)容展示質(zhì)量的情況下，盡量不采用對(duì)瀏覽器版本有要求的一些特效、技術(shù)。我們可以先采用老版本的瀏覽器來(lái)測(cè)試網(wǎng)頁(yè)并進(jìn)行適當(dāng)?shù)恼{(diào)整，同時(shí)，還要測(cè)試頁(yè)面版式在我們常用的640×400、600×800和1024×768的分辨率模式下是否都能顯示正常，這樣才能保證用戶端的瀏覽效果。