一個(gè)好的教育網(wǎng)站的設(shè)計(jì)主要分兩個(gè)方面：
1、教育網(wǎng)站的總體設(shè)計(jì)，包括網(wǎng)站的主題，整體形象，整體風(fēng)格創(chuàng)意設(shè)計(jì)等多方面的工作；
2、頁(yè)面設(shè)計(jì)，可分為一般頁(yè)面的設(shè)計(jì)和首頁(yè)設(shè)計(jì)，主要涉及到版面布局，色彩搭配等問(wèn)題，其中首頁(yè)的設(shè)計(jì)在頁(yè)面設(shè)計(jì)是最至關(guān)重要的。
教育網(wǎng)站設(shè)計(jì)的基本原則
1、要立足于教育，為創(chuàng)新教育、素質(zhì)教育服務(wù)
2、要有創(chuàng)新精神與獨(dú)特的創(chuàng)意，要有在互聯(lián)網(wǎng)中生存下去的支點(diǎn)。
3、整體架構(gòu)要模塊化，清晰化，易于使用。
4、網(wǎng)頁(yè)瀏覽速度快，更新快，交互性強(qiáng)，導(dǎo)航智能化
5、網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)潔明快，注重實(shí)用性。
6、網(wǎng)站內(nèi)容要精，及時(shí)更新、便于閱讀。
7、網(wǎng)站立足于長(zhǎng)期發(fā)展，具有開(kāi)放性，可拓展性，易于維護(hù)更新。
教育網(wǎng)站的總體設(shè)計(jì)。
1.定位網(wǎng)站主題和名稱；
2.定位網(wǎng)站形象；
3.確定欄目和版塊；
4.網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)
5.網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)
定位教育網(wǎng)站主題和名稱
1.設(shè)計(jì)網(wǎng)站的標(biāo)志。標(biāo)志是站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)，標(biāo)志能讓用戶聯(lián)想起特定 的網(wǎng)站。就象看見(jiàn)了狐貍就想起了搜狐。聽(tīng)見(jiàn)了世界不大，就想起了網(wǎng)大。標(biāo)志可以是中文，英文字母，可以是符號(hào)，圖案，可以是動(dòng)物或者人物等等。比如：網(wǎng)易 是用netease的英文作為標(biāo)志，新浪用字母sina+眼睛作為標(biāo)志。
2.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩。標(biāo)準(zhǔn)色彩指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色 彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒。如所有教育網(wǎng)的綠 色調(diào)就給人一種安靜的感覺(jué)，網(wǎng)大的黃色調(diào)給人一種活潑向上的感覺(jué)。
3.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般網(wǎng)頁(yè)默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格，可以根據(jù)需要選擇一些特別字體。
4.設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)。也可以說(shuō)是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。用一句話甚至一個(gè)詞來(lái)高度概括。類似實(shí)際生活中的廣告金句。如世界不大網(wǎng)大，啟迪網(wǎng)創(chuàng)造未來(lái)等等。
確定教育網(wǎng)站的欄目和版塊
網(wǎng)站的題材確定后，就要考慮欄目的設(shè)置問(wèn)題，欄目的設(shè)置要緊扣網(wǎng)站主題，可以把主題按一定的方法分類并將它們作為網(wǎng)站的主欄目，主題欄目個(gè)數(shù)在總欄目中要占絕對(duì)優(yōu)勢(shì)，這樣的網(wǎng)站顯的專業(yè)，主題突出，容易給人留下深刻印象。
在制定欄目的時(shí)候，要注意以下幾點(diǎn)
1、盡可能刪除與主題無(wú)關(guān)的欄目
2、可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上
3、盡可能方便訪問(wèn)者的瀏覽和查詢
版塊比欄目的概念要大一些，每個(gè)版塊都有自己的欄目。例如，k12的站點(diǎn)分新聞 中心，學(xué)生頻道、教師頻道、家長(zhǎng)頻道、教育產(chǎn)品、虛擬社區(qū)等幾大版塊，每個(gè)版塊下面又有自己的主欄目。設(shè)置版塊時(shí)要注意1.各版塊要有相對(duì)獨(dú)立性。2.各 版塊要有相互關(guān)聯(lián)。3.版塊的內(nèi)容要圍繞站點(diǎn)主題。
網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)
網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最希望掌握，也是最難以學(xué)習(xí)的。它沒(méi)有一個(gè)固定的模式可以參照和模仿。給出一個(gè)主題，任何兩個(gè)人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。
創(chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這里說(shuō)的創(chuàng)意是指站點(diǎn)的整體創(chuàng)意，因?yàn)檫@個(gè)創(chuàng)意而產(chǎn)生這個(gè)站點(diǎn)，或者相同的內(nèi)容，推出的創(chuàng)意不同。
創(chuàng)意是傳達(dá)信息的一種特別方式。創(chuàng)意并不是天才者的靈感，而是思考的結(jié)果。根據(jù)美國(guó)廣告學(xué)教授詹姆斯的研究，創(chuàng)意思考的過(guò)程分五階段：
1.準(zhǔn)備期--研究所搜集的資料，根據(jù)舊經(jīng)驗(yàn)，啟發(fā)新創(chuàng)意；
2.孵化期--將資料咀嚼消化，使意識(shí)自由發(fā)展，任意結(jié)合；
3.啟示期--意識(shí)發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意；
4.驗(yàn)證期--將產(chǎn)生的創(chuàng)意討論修正；
5.形成期--設(shè)計(jì)制作網(wǎng)頁(yè)，將創(chuàng)意具體化
網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)
網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu)的目的是：使瀏覽者能用最少的鏈接，最快的定位到感興趣的頁(yè)面上。
建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：
1.樹(shù)狀鏈接結(jié)構(gòu)（一對(duì)一）。類似DOS的目錄結(jié)構(gòu)，首頁(yè)鏈接指向一級(jí)頁(yè)面，一級(jí)頁(yè)面鏈接指向二級(jí)頁(yè)面。立體結(jié)構(gòu)看起來(lái)就象蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時(shí)，一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰，訪問(wèn)者明確知道自己在什么位置，不會(huì)"迷"路。缺點(diǎn)是瀏覽效率低，一個(gè)欄目下的子頁(yè)面到另一個(gè)欄目下的子頁(yè)面，必須繞經(jīng)首頁(yè)。
2.星狀鏈接結(jié)構(gòu)（一對(duì)多）。類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁(yè)面相互之間都建立有鏈接。立體結(jié)構(gòu)象東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁(yè)面。缺點(diǎn)是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。
這兩種基本結(jié)構(gòu)都只是理想方式，在實(shí)際的網(wǎng)站設(shè)計(jì)中，總是將這兩種結(jié)構(gòu)混合起來(lái)使用。我們希望瀏覽者既可以方便快速的達(dá)到自己需要的頁(yè)面，又可以清晰的知道自己的位置。所以，首頁(yè)和一級(jí)頁(yè)面之間用星狀鏈接結(jié)構(gòu)，最好的辦法是：一級(jí)和二級(jí)頁(yè)面之間用樹(shù)狀鏈接結(jié)構(gòu)。
（一）版面布局的原理
版面指的是瀏覽器看到的完整的一個(gè)頁(yè)面（可以包含框架和層）。由于顯示器分辨率的不同的原因，同一個(gè)頁(yè)面的大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。布局，就是以最適合瀏覽的方式安排圖片和文字在頁(yè)面上的位置。
版面布局的步驟要經(jīng)過(guò)三個(gè)步驟，一是設(shè)計(jì)草案，這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫(huà)出創(chuàng)意的輪廓即可。二是粗略布局，遵循突出重點(diǎn)、平衡諧調(diào)的原則，把需要的功能模塊安排到頁(yè)面上。三是制定方案，將粗略布局精細(xì)化，具體化。
常用的版面布局形式有：
（1）“T”結(jié)構(gòu)布局。指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單， 右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景較深，整體效果類似英文字母“T”,所以我們稱之為“T”形布局。這是網(wǎng)頁(yè)設(shè)計(jì)中用的最廣泛的一種布局方式。優(yōu)點(diǎn)是頁(yè) 面結(jié)構(gòu)清晰，主次分明。容易掌握。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人看之無(wú)味。
（2）“口”型布局。這是一個(gè)象形的說(shuō)法，就是頁(yè)面一般上下各有一個(gè)廣告條，左面是主菜單，右面放友情連接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大，缺點(diǎn)是頁(yè)面擁擠，不夠靈活。
（3）“三”型布局。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊，將頁(yè)面整體分割為四部分，色塊中大多放廣告條。
（4）對(duì)稱對(duì)比布局。顧名思義，采取左右或者上下對(duì)稱的布局，一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺(jué)沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。
（5）POP布局。POP引自廣告術(shù)語(yǔ)，就是指頁(yè)面布局象一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。優(yōu)點(diǎn)顯而易見(jiàn)：漂亮吸引人。缺點(diǎn)就是速度慢。
（二）網(wǎng)頁(yè)色彩的搭配
網(wǎng)頁(yè)的色彩是樹(shù)立網(wǎng)站形象的關(guān)鍵之一，網(wǎng)頁(yè)的背景，文字，圖標(biāo)，邊框，超鏈接等 等都要用到色彩。不同的顏色會(huì)給瀏覽者不同的心理感受，如紅色，能使人產(chǎn)生沖動(dòng)，憤怒，熱情，活力的感覺(jué)；綠色，顯得和睦，寧?kù)o，健康，安全；黃色，具有 快樂(lè)，希望，智慧和輕快的個(gè)性。每種色彩在飽和度，透明度上略微變化就會(huì)產(chǎn)生不同的感覺(jué)。以綠色為例，黃綠色有青春，旺盛的視覺(jué)意境，而藍(lán)綠色則顯得幽 寧，陰深。合理的搭配色彩，能更好的表現(xiàn)主題，吸引用戶的注意力。
網(wǎng)頁(yè)色彩搭配的原理是；
（1）色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。
（2）色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對(duì)你的印象強(qiáng)烈。
（3）色彩的合適性。色彩要和網(wǎng)站的主題和表現(xiàn)內(nèi)容相吻合。
（4）色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。
網(wǎng)頁(yè)色彩搭配中要注意不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)，背景和前文的對(duì)比要大，突出主要文字內(nèi)容，常見(jiàn)配色方法有。
1.用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。
2.用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色主頁(yè)用藍(lán)色和黃色就是這樣確定的。整個(gè)頁(yè)面色彩豐富但不花稍。
3.用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。
4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺(jué)很“跳”。
（三）網(wǎng)頁(yè)字體的設(shè)計(jì)
字體(Font)的設(shè)置相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，下面是網(wǎng)頁(yè)中字體一般設(shè)計(jì)原則，
1.字體不宜過(guò)多，不要使用超過(guò)3種以上的字體。字體太多則顯得雜亂，沒(méi)有主題。
2.字號(hào)要合適，字號(hào)過(guò)大，會(huì)浪費(fèi)版面空間，字號(hào)過(guò)小，又不能吸引用戶注意力，還容易使眼睛疲勞。
3.不同內(nèi)容的字號(hào)要有所區(qū)別，原則上標(biāo)題的字體較正文大，顏色也應(yīng)有所區(qū)別。
4.特殊的字體要轉(zhuǎn)成圖象。
（四）網(wǎng)頁(yè)中表格的運(yùn)用
表格(table)是頁(yè)面的重要元素,是頁(yè)面排版的主要手段。但由于瀏覽器在讀 取網(wǎng)頁(yè)html原代碼時(shí)，是讀完整一個(gè)table才將表格中的內(nèi)容顯示在屏幕上，而且顯示也有優(yōu)先級(jí)，先讀到的先顯示。如果一個(gè)大表格中含有多個(gè)子表格， 必須等大表格讀完，才能將子表格一起顯示出來(lái)。有些站點(diǎn)等待很久卻什么也出不來(lái)，按“停止”按鈕卻一下顯示出頁(yè)面，就是這個(gè)原因。
因此，我們?cè)谠O(shè)計(jì)頁(yè)面表格的時(shí)候，應(yīng)該做到：
1.整個(gè)頁(yè)面不要都套在一個(gè)表格里，盡量拆分成多個(gè)表格;
2.單一表格的結(jié)構(gòu)盡量整齊；
3.表格嵌套層次盡量要少，越復(fù)雜，嵌套層次越多的表格下載速度越慢。
首頁(yè)的設(shè)計(jì)
在全面考慮好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風(fēng)格之后，就可以正式動(dòng)手制作首頁(yè)。這有三項(xiàng)工作要做。
1、確定首頁(yè)的功能模塊
2、設(shè)計(jì)首頁(yè)的版面
3、處理技術(shù)上的細(xì)節(jié)
一).確定首頁(yè)的功能模塊
首頁(yè)的內(nèi)容模塊是指需要在首頁(yè)上實(shí)現(xiàn)的主要內(nèi)容和功能。一般的站點(diǎn)都需要這樣一些模塊：
（1）主菜單。包括網(wǎng)站的主要欄目。
（2）廣告條(banner)。這個(gè)是網(wǎng)站必不可少的。
（3）標(biāo)題。標(biāo)題必須清楚無(wú)誤地標(biāo)示你的網(wǎng)站。標(biāo)題可以是名稱、標(biāo)語(yǔ)徽號(hào)或圖像。
（4）雙向交流欄目。如論壇，留言本，郵件列表等，有調(diào)查表明，提供雙向交流的站點(diǎn)比簡(jiǎn)單的留一個(gè)“Email me”的站點(diǎn)更具有親和力。
處理技術(shù)上的細(xì)節(jié)
網(wǎng)頁(yè)制作上有許多技術(shù)細(xì)節(jié)，諸如如何適應(yīng)不同的瀏覽器，在不同的不同分辨率下保持不變形，如何減速少垃圾代碼等等，首頁(yè)相比其它頁(yè)面來(lái)說(shuō)，技術(shù)上要求更加嚴(yán)格，不能出錯(cuò)。
首頁(yè)設(shè)計(jì)要注意的幾個(gè)問(wèn)題
1、簡(jiǎn)潔明快。首頁(yè)是吸引用戶注意的關(guān)鍵所在，設(shè)計(jì)上要以清楚醒目為上，讓人一目了然。不要過(guò)于繁雜，堆砌太多的細(xì)節(jié)，
2、瀏覽速度快。一般來(lái)說(shuō)，首頁(yè)的下載時(shí)間超過(guò)十至十五秒，很多用戶就會(huì)失去耐心，提高瀏覽速度，就要盡可能的減小首頁(yè)的數(shù)據(jù)量，少用圖像，特別是大的圖像。另外要盡量減少表格嵌套，不要把所有內(nèi)容都放在一個(gè)大表里。
3、使首頁(yè)易于漫游。首頁(yè)的其實(shí)就是一張大的導(dǎo)航圖，設(shè)計(jì)上要盡量使瀏覽更快捷更方便。能讓用戶迅速定位到感興趣的頁(yè)面上。
4、保持新鮮感。如果首頁(yè)從不改變，用戶很快會(huì)厭倦。應(yīng)時(shí)刻確保主頁(yè)提供的是最新信息。可以在首頁(yè)上預(yù)告即將有新資料推出，可吸引用戶再來(lái)測(cè)覽，或是在頁(yè)頭以大字標(biāo)題宣布新消息，或是定期改變主頁(yè)上的圖像、主頁(yè)的式樣。
網(wǎng)頁(yè)制作與開(kāi)發(fā)
1、網(wǎng)頁(yè)開(kāi)發(fā)工具的選擇，包括網(wǎng)頁(yè)制作工具、素材制作工具的選擇。頁(yè)面制作工具有很多種，對(duì)于初學(xué)者，Microsoft FrontPage，Netscape編輯器，Adobe Pagemill， Claris Home Page等工具比較適合，對(duì)于專業(yè)網(wǎng)站的設(shè)計(jì)，可選用DreamWeaver，HotDog Professional，HomeSite，HotMetal Pro等工具，網(wǎng)頁(yè)素材制作工具包括圖象制作處理工具，動(dòng)畫(huà)制作處理工具，聲音制作處理工具，視頻制作處理工具等，這類工具在有很多網(wǎng)站作了專門(mén)的歸類整理。
2、網(wǎng)頁(yè)的制作。網(wǎng)頁(yè)制作是網(wǎng)站開(kāi)發(fā)中至關(guān)重要的一環(huán)，網(wǎng)頁(yè)制作的好壞，直接影響到網(wǎng)站的成敗。在網(wǎng)頁(yè)制作中要注意以下問(wèn)題
一、控制頁(yè)面的數(shù)據(jù)量，提高用戶的瀏覽速度。
二、分解大型表格，加快頁(yè)面顯示。
三、圖象的運(yùn)用，頁(yè)面要做的生動(dòng)，不可避免的要用到圖象，圖象處理的好壞，對(duì)網(wǎng)頁(yè)的效果影響很大，可以從心下幾點(diǎn)來(lái)考慮，1、選取擇合適的圖象格式，2、少用圖片來(lái)敘述內(nèi)容，3、盡量減少圖象的數(shù)目，4、在HTML代碼中,標(biāo)記圖像的顯示高度和寬度，5、盡可能重用圖象。
四、能用HTML和JavaScript實(shí)現(xiàn)的，最好不用Java Applet和ActiveX來(lái)做。五、少用背景音樂(lè)。
網(wǎng)站的調(diào)試
這一階段主要是測(cè)試網(wǎng)站的穩(wěn)定性，整體功能，檢查可能存在的教學(xué)上、技術(shù)上的錯(cuò)誤。
|
