“網(wǎng)頁設(shè)計(jì)”專題學(xué)習(xí)站的結(jié)構(gòu)和各功能模塊設(shè)計(jì),網(wǎng)站設(shè)計(jì)論文

“網(wǎng)頁設(shè)計(jì)〞專題學(xué)習(xí)站的結(jié)構(gòu)和各功能模塊設(shè)計(jì),網(wǎng)站設(shè)計(jì)論文隨著Internet的迅速發(fā)展與普及，專題學(xué)習(xí)網(wǎng)站作為一種信息技術(shù)與學(xué)科課程整合的新形式，正在被越來越多的教育者和學(xué)習(xí)者所接受，它的廣泛應(yīng)用充分地發(fā)揮了網(wǎng)絡(luò)的開放性、分享性、交互性等優(yōu)勢。本文著重研究網(wǎng)頁設(shè)計(jì)專題學(xué)習(xí)網(wǎng)站的設(shè)計(jì)與開發(fā)經(jīng)過。

2.專題學(xué)習(xí)網(wǎng)站的構(gòu)造設(shè)計(jì)

2.1專題學(xué)習(xí)網(wǎng)站的總體構(gòu)造設(shè)計(jì)

網(wǎng)站的組織構(gòu)造圖如此圖1所示。

華而不實(shí)，基礎(chǔ)知識(shí)部分提供有關(guān)網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)部分的教學(xué)資源。這部分歸納總結(jié)了網(wǎng)頁設(shè)計(jì)課程的基本理論知識(shí)、Dreamweaver網(wǎng)頁設(shè)計(jì)軟件操作的基本方式方法和技巧，可供學(xué)習(xí)者自學(xué)使用，可以作為學(xué)習(xí)者的入門學(xué)習(xí)教程或基礎(chǔ)知識(shí)資料庫。實(shí)例教學(xué)部分以教學(xué)實(shí)例的形式，采用任務(wù)驅(qū)動(dòng)的方式，提供應(yīng)學(xué)習(xí)者自主探尋求索學(xué)習(xí)時(shí)所需要的各類相關(guān)資源。教學(xué)實(shí)例的設(shè)計(jì)以知識(shí)點(diǎn)為主線，采取循序漸進(jìn)的方式，引導(dǎo)學(xué)習(xí)者對(duì)網(wǎng)頁設(shè)計(jì)相關(guān)知識(shí)的把握。作品展示部分包括學(xué)生原創(chuàng)的優(yōu)秀作品和網(wǎng)上收集的優(yōu)秀作品。一方面給學(xué)生提供一個(gè)學(xué)習(xí)成果的展示平臺(tái)，另一方面通過對(duì)這些優(yōu)秀作品的欣賞，提高學(xué)生的欣賞能力和審美能力，拓寬他們的視野。

素材管理部分包括網(wǎng)頁設(shè)計(jì)中所需要的各種素材文件，方便學(xué)生使用網(wǎng)站上的資源進(jìn)行網(wǎng)頁的設(shè)計(jì)和制作，并且網(wǎng)站提供的下載功能，還能夠?yàn)椴痪邆渖暇W(wǎng)條件的學(xué)習(xí)者創(chuàng)造學(xué)習(xí)的條件。學(xué)生能夠通過在線留言部分中的留言板，隨時(shí)隨地解決學(xué)習(xí)中碰到的問題，好像在課堂上與老師和其他學(xué)習(xí)者進(jìn)行溝通一樣，能夠更好的促進(jìn)學(xué)習(xí)者的學(xué)習(xí)，還能夠提高學(xué)習(xí)者與人溝通和溝通的能力。教學(xué)評(píng)價(jià)部分能夠有效地檢驗(yàn)學(xué)習(xí)者的學(xué)習(xí)效果，幫助學(xué)習(xí)者在學(xué)習(xí)的經(jīng)過中提高認(rèn)識(shí)，更好地把握所學(xué)的內(nèi)容。

2.2專題學(xué)習(xí)網(wǎng)站的頁面設(shè)計(jì)

網(wǎng)頁能夠講是構(gòu)成網(wǎng)站的基本元素。在網(wǎng)絡(luò)中翱翔時(shí)，只要輕點(diǎn)鼠標(biāo)，一幅幅精彩的網(wǎng)頁就會(huì)呈如今我們面前。那么，影響網(wǎng)頁的精致華美程度的因素又是什么呢？這往往成為網(wǎng)頁制作者首先要考慮的問題。可見，網(wǎng)站的界面設(shè)計(jì)至關(guān)重要。網(wǎng)站界面的主要功能就是為用戶服務(wù)，是用戶與計(jì)算機(jī)進(jìn)行溝通的唯一途徑。一般來講網(wǎng)站界面的設(shè)計(jì)應(yīng)盡量做到下面幾點(diǎn)：一是簡易性。界面的簡潔是要讓用戶便于使用、便于了解，并能減少用戶發(fā)生誤操作的可能性。二是一致性。這是每一個(gè)優(yōu)秀界面都應(yīng)具備的特點(diǎn)。界面的構(gòu)造必須清楚明晰一致，風(fēng)格也必須與內(nèi)容相一致。三是清楚。在視覺效果上便于閱讀和使用。四是排列。一個(gè)有序的界面勢必能讓用戶輕松的使用。五是安全性。用戶能夠自由地做出選擇，并且所有的選擇都應(yīng)該是可逆的。在用戶做出錯(cuò)誤的選擇時(shí)最好有系統(tǒng)信息的提示。六是靈敏性。簡單的講就是要讓用戶在使用上更方便。

作為專題學(xué)習(xí)網(wǎng)站，本網(wǎng)站屬于教育類的網(wǎng)站，根據(jù)網(wǎng)站的性質(zhì)，在風(fēng)格的選擇上應(yīng)當(dāng)注重既美觀大方，又簡潔明了。本網(wǎng)站在界面設(shè)計(jì)時(shí)充分考慮了以上幾點(diǎn)。每個(gè)頁面都盡量做到簡潔明了，方便用戶的操作使用。各欄目之間固然由于內(nèi)容的不同，界面有所區(qū)別，但風(fēng)格上始終保持了一致性。界面布局合理，一目了然。導(dǎo)航部分和內(nèi)容部分排列有序。

網(wǎng)站色彩也是需要考慮的因素，根據(jù)教育類網(wǎng)站的特點(diǎn)定位本網(wǎng)站的色彩基調(diào)，主要以明快的藍(lán)白相間色調(diào)為基礎(chǔ)，這樣的網(wǎng)站看起來更嚴(yán)謹(jǐn)，能夠使閱讀者產(chǎn)生信賴的感覺。網(wǎng)站中每個(gè)模塊的導(dǎo)航部分都采用了的一樣的色彩，網(wǎng)站每個(gè)模塊的內(nèi)容呈現(xiàn)部分，則主要采用白色背景深藍(lán)色文字的樣式，非常清楚明晰，能夠到達(dá)良好的視覺效果。

3.主頁的設(shè)計(jì)與開發(fā)

本網(wǎng)頁設(shè)計(jì)專題學(xué)習(xí)網(wǎng)站的定位是一個(gè)既可用于課堂教學(xué)，又合適于學(xué)生課外學(xué)習(xí)的網(wǎng)站。因而，網(wǎng)站的主頁對(duì)于整個(gè)站點(diǎn)來講是相當(dāng)重要的。一個(gè)設(shè)計(jì)美觀的主頁，既能在視覺上吸引用戶的訪問，又有助于用戶訪問站點(diǎn)，而且還能使用戶對(duì)本站點(diǎn)的主題內(nèi)容等一目了然。

根據(jù)網(wǎng)站的功能設(shè)計(jì)，站點(diǎn)主頁主要分三部分：導(dǎo)航部分、標(biāo)題部分和內(nèi)容部分。

導(dǎo)航部分：本站點(diǎn)的主要版塊有基礎(chǔ)知識(shí)、實(shí)例教程、作品展示、素材管理等，另外還提供了留言板、教學(xué)論壇為教學(xué)活動(dòng)提供溝通的場所。在主頁的設(shè)計(jì)上，為了便于用戶能夠迅速地訪問指定的模塊，分別設(shè)置了以上欄目的導(dǎo)航按鈕，用戶能夠直接通過導(dǎo)航按你就進(jìn)入到相應(yīng)的模塊。

標(biāo)題部分：標(biāo)題設(shè)置在屏幕的上方偏左的位置，文字字體較大。

內(nèi)容部分：是在導(dǎo)航欄的下方對(duì)本站點(diǎn)的基本內(nèi)容進(jìn)行介紹，使閱讀者能夠?qū)Ρ菊军c(diǎn)的功能有一個(gè)基本的認(rèn)識(shí)。

本站點(diǎn)的主頁構(gòu)造簡潔，色彩明快，主題清楚明晰，這種簡單實(shí)用的設(shè)計(jì)，更合適學(xué)生的學(xué)習(xí)，主頁的效果圖如此圖2所示。

4.基礎(chǔ)知識(shí)部分的設(shè)計(jì)與開發(fā)

基礎(chǔ)知識(shí)欄目是本網(wǎng)站的一個(gè)重要內(nèi)容。作為初學(xué)者，要學(xué)好網(wǎng)頁設(shè)計(jì)軟件的操作和使用方式方法，了解和把握一些必要的基礎(chǔ)理論知識(shí)和基本技巧是非常必要的。本模塊的特點(diǎn)重在學(xué)習(xí)資源的呈現(xiàn)，因而在制作技術(shù)上采用純靜態(tài)網(wǎng)頁制作技術(shù)，利用超鏈接把各個(gè)知識(shí)點(diǎn)進(jìn)行歸納。

詳細(xì)來講，把網(wǎng)頁設(shè)計(jì)常用的基礎(chǔ)知識(shí)分為十八個(gè)問題進(jìn)行講解。

本欄目也包含導(dǎo)航部分、標(biāo)題部分和內(nèi)容部分三部分。導(dǎo)航部分和標(biāo)題部分與首頁及其它頁面在風(fēng)格上保持一致，內(nèi)容部分保持簡潔明了的風(fēng)格，色彩上以白底藍(lán)字為主?；A(chǔ)知識(shí)部分的界面如此圖3所示。

5.實(shí)例教學(xué)部分的設(shè)計(jì)與開發(fā)

實(shí)例教學(xué)模塊主要是制作了一些教學(xué)的案例供學(xué)習(xí)者使用，這些案例的設(shè)計(jì)是以課程的知識(shí)點(diǎn)為依托的，而且設(shè)計(jì)的案例不僅僅僅是一個(gè)知識(shí)點(diǎn)的應(yīng)用，有時(shí)是若干知識(shí)點(diǎn)的綜合應(yīng)用。在實(shí)踐教學(xué)的經(jīng)過中，學(xué)習(xí)者通過實(shí)例的學(xué)習(xí)，能夠更好的理解和把握所學(xué)的基礎(chǔ)理論知識(shí)，把它們?nèi)跁?huì)貫穿，并且在練習(xí)制作的經(jīng)過中，也把握了實(shí)際操作的方式方法和技巧。

實(shí)例教學(xué)部分的界面如此圖4：

6.作品展示部分的設(shè)計(jì)與開發(fā)

作品展示部分展示的是一些制作較好的學(xué)生的網(wǎng)頁作品，以及在網(wǎng)絡(luò)上收集到的優(yōu)秀網(wǎng)頁作品，可供學(xué)習(xí)者閱讀和欣賞，并能從中汲取難得珍貴的經(jīng)歷體驗(yàn)，提高學(xué)生的鑒賞能力和創(chuàng)新能力。

作品展示模塊的效果圖如此圖5所示：

7.在線留言部分的設(shè)計(jì)與開發(fā)

7.1在線留言的界面設(shè)計(jì)

在線留言部分是老師〔網(wǎng)站管理者〕和學(xué)生溝通的平臺(tái)，學(xué)生在學(xué)習(xí)的經(jīng)過中很可能會(huì)碰到這樣或那樣的問題，或者對(duì)網(wǎng)站有一些建議和意見，那么要解決這些問題，就能夠利用留言板的功能進(jìn)行更好的溝通。留言板的制作主要采用的是ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)，它的界面如此圖6所示

通過這個(gè)留言板的界面，學(xué)習(xí)者能夠?qū)⒆詡€(gè)的問題和建議，以留言的形式發(fā)布到服務(wù)器上，老師〔網(wǎng)站管理者〕就會(huì)了解到這些信息，盡快對(duì)學(xué)生進(jìn)行回復(fù)，知足學(xué)生不同的學(xué)習(xí)需求。

7.2在線留言的程序設(shè)計(jì)

8.結(jié)束語

本文主要從總體構(gòu)造、主頁、基礎(chǔ)知識(shí)部分、實(shí)例教學(xué)部分、作品展示部分、在線留言等幾個(gè)方面對(duì)網(wǎng)頁設(shè)計(jì)專題學(xué)習(xí)網(wǎng)站進(jìn)行設(shè)計(jì)與開發(fā)，構(gòu)建了一個(gè)合適計(jì)算機(jī)學(xué)科計(jì)算機(jī)多媒體技術(shù)專業(yè)學(xué)生使用的、具有實(shí)用價(jià)值的專題學(xué)習(xí)網(wǎng)站系統(tǒng)。在學(xué)習(xí)和實(shí)用經(jīng)過中，還存在一些不完備的地方，我們將在以后的實(shí)踐經(jīng)過中，進(jìn)一步完善和改良。

以下為參考文獻(xiàn)

[1]楊京峰.基于資源的個(gè)性化交互服務(wù)系統(tǒng)設(shè)計(jì)與研究[D].北京：清華大學(xué).

[2]張蓓.中學(xué)心理健康教育網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[D].天津：天津師范