靜態(tài)網(wǎng)站建設(shè)初探

■何洪剛

網(wǎng)站建設(shè)是初中信息技術(shù)教學(xué)的重點(diǎn)內(nèi)容，也是當(dāng)今社會(huì)各行各業(yè)走向網(wǎng)絡(luò)化的一種主要的途徑。從網(wǎng)站的設(shè)計(jì)構(gòu)思、網(wǎng)站素材的制作與收集、網(wǎng)站制作中的關(guān)鍵步驟等幾方面介紹靜態(tài)網(wǎng)站的初步搭建。

在社會(huì)逐漸邁向現(xiàn)代化的同時(shí)，各行各業(yè)也紛紛為展現(xiàn)自我，而融入互聯(lián)網(wǎng)大家庭之中。方式之一就是紛紛建立自己的網(wǎng)站，并在網(wǎng)站上充分地利用各種方式展現(xiàn)自我特色和優(yōu)勢(shì)，與其他同行、廣大網(wǎng)友進(jìn)行交流。在教育領(lǐng)域，各個(gè)學(xué)校也紛紛建立了自己的網(wǎng)站，通過(guò)網(wǎng)站收集教學(xué)資源，發(fā)布重要通知公告，展現(xiàn)學(xué)校的風(fēng)采。在網(wǎng)站中，專門設(shè)立了教師博客和教師論壇，以彰顯教師個(gè)性，剖析教育現(xiàn)象。各個(gè)班級(jí)也紛紛建立了自己的主頁(yè)，專門介紹本班的風(fēng)貌，展現(xiàn)學(xué)生的創(chuàng)作。因此說(shuō)，網(wǎng)站的搭建和制作也成為人們交流的話題和信息技術(shù)教學(xué)重要的一部分內(nèi)容。

筆者通過(guò)制作學(xué)科網(wǎng)站的經(jīng)驗(yàn)，與大家交流一下網(wǎng)站制作過(guò)程中的重要環(huán)節(jié)及注意事項(xiàng)。筆者是一名新手，網(wǎng)站制作只是處于嘗試階段，本文中提到的觀點(diǎn)可能不太客觀，或許存在很大的漏洞，望各位網(wǎng)站制作高手加以點(diǎn)撥。

1 網(wǎng)站的設(shè)計(jì)與構(gòu)思

網(wǎng)站的設(shè)計(jì)非常關(guān)鍵。在制作網(wǎng)站之前，設(shè)計(jì)者頭腦中要有一個(gè)清晰的目標(biāo)，就是你制作的網(wǎng)站是要向誰(shuí)傳遞什么樣的信息，最終目的是為了實(shí)現(xiàn)什么。將讀者和目標(biāo)確定好之后，就要想如何將自己的想法準(zhǔn)確地傳遞出去，達(dá)到與讀者的無(wú)障礙溝通。你的每一種想法都要有一種載體相承托，你想法的每一步就構(gòu)成了不同的網(wǎng)頁(yè)主題。這就是網(wǎng)站的流程圖，流程圖的每一步都要環(huán)環(huán)相扣、相互轉(zhuǎn)化，每一步都要有明顯的分工。構(gòu)思好方案之后，就可以設(shè)計(jì)主頁(yè)和分頁(yè)了。主頁(yè)非常關(guān)鍵，它就像一個(gè)人的整體形象，外貌不吸引人，就不會(huì)吸引多少觀眾。主頁(yè)就像一個(gè)窗口，所有的信息都是通過(guò)它直接或者間接地展示給讀者。其他的網(wǎng)頁(yè)都是通過(guò)鏈接主頁(yè)，從而實(shí)現(xiàn)分層次地展現(xiàn)內(nèi)容。設(shè)計(jì)者首先要規(guī)劃出一張?jiān)O(shè)計(jì)草圖，并清晰地標(biāo)明主頁(yè)的布局，如網(wǎng)站的logo、banner和導(dǎo)航條，網(wǎng)站的分欄目和主要表達(dá)的信息，網(wǎng)站的主體內(nèi)容等。另外要預(yù)留出網(wǎng)站的注冊(cè)和登錄入口、網(wǎng)站的管理入口，這些都非常關(guān)鍵，因?yàn)橹挥型ㄟ^(guò)這些入口才能達(dá)到對(duì)網(wǎng)站的有效管理，比如說(shuō)網(wǎng)站各導(dǎo)航詳細(xì)頁(yè)面內(nèi)容的添加、修改和刪除。

筆者在設(shè)計(jì)初中信息技術(shù)網(wǎng)站的時(shí)候是這樣設(shè)想的：要向?qū)W生全面展示信息技術(shù)學(xué)科的知識(shí)和技能，同時(shí)與學(xué)生的自學(xué)形成良好的互動(dòng)狀態(tài)。網(wǎng)站要適合不同學(xué)生的自主學(xué)習(xí)和獨(dú)立創(chuàng)新，要對(duì)學(xué)生的每一份精彩成果予以展示，表現(xiàn)出色的學(xué)生要在醒目的地方給予表彰，讓學(xué)生在體驗(yàn)收獲中不斷地演繹他們精彩的人生。這些對(duì)學(xué)生大張旗鼓地肯定與鼓勵(lì)，可以讓他們充分體驗(yàn)生命中的每一分輝煌，讓他們對(duì)前途充滿希望和幻想。因此，筆者專門設(shè)計(jì)了這樣幾個(gè)導(dǎo)航內(nèi)容：基礎(chǔ)知識(shí)(讓學(xué)生對(duì)信息知識(shí)有一個(gè)整體的概念)、常用軟件(初中生必須學(xué)會(huì)的幾種應(yīng)軟件，如Word、Excel等)、教學(xué)視頻(教師課堂教學(xué)演示，方便學(xué)生模仿學(xué)習(xí)，尤其適合上課領(lǐng)悟慢的學(xué)生的學(xué)習(xí)，通過(guò)反復(fù)觀看教師演示以達(dá)到真正地掌握軟件的使用技巧)、信息題庫(kù)(檢測(cè)學(xué)生對(duì)于基礎(chǔ)知識(shí)和應(yīng)用技能的掌握程度)、信息論壇(通過(guò)學(xué)生交流學(xué)習(xí)常用軟件的體會(huì)，以達(dá)到精通掌握的目的，合作交流，共同進(jìn)步)、榜上有名(貼出光榮榜，鼓勵(lì)優(yōu)秀學(xué)生，通過(guò)點(diǎn)擊其姓名，進(jìn)一步觀看其作品，以達(dá)到吸取精華、互促互進(jìn)的目的)。

2 網(wǎng)站素材的收集與制作

為了更好地制作出版面新穎、富有本校特色的網(wǎng)站，筆者用數(shù)碼相機(jī)拍攝了大量的體現(xiàn)校園風(fēng)光的圖片，精選出幾幅圖片，使用Photoshop加以修飾與裁切，縮小成所需要的大小的圖片，放在首頁(yè)的底部予以動(dòng)態(tài)地展示。網(wǎng)站logo使用了學(xué)校的校徽融入信息技術(shù)網(wǎng)站的特點(diǎn)設(shè)計(jì)而成。Banner使用數(shù)碼相機(jī)連續(xù)拍攝了幾張相片制成了一個(gè)全景圖，中間突出學(xué)校的標(biāo)志性建筑，體現(xiàn)了學(xué)校的人文理念和濃郁的文化氛圍。各級(jí)欄目的標(biāo)題圖片用Flash制成，帶有線性紅白過(guò)渡的圓角矩形圖案，以及灰白過(guò)渡的圓角矩形圖案，用于分頁(yè)顯示頁(yè)面標(biāo)題欄的設(shè)置。網(wǎng)站的文本內(nèi)容主要是自己編輯或者是課本上基礎(chǔ)知識(shí)的概要，少數(shù)是網(wǎng)上下載的內(nèi)容，要求就是篇幅簡(jiǎn)短、簡(jiǎn)明扼要。教學(xué)視頻主要是自己使用多媒體網(wǎng)絡(luò)教室中的教師教學(xué)軟件錄制而成，這樣錄出的視覺(jué)效果清晰，便于學(xué)生觀看。錄像盡可能分章分節(jié)，時(shí)間較短，步驟簡(jiǎn)單，便于學(xué)生模仿嘗試。學(xué)生作品取自學(xué)生平時(shí)上交的作業(yè)，展示時(shí)盡可能點(diǎn)明班級(jí)和作品特點(diǎn)。

3 網(wǎng)站的搭建

網(wǎng)站建設(shè)初期可以使用靜態(tài)頁(yè)面，這樣能夠更加快捷地觀看顯示效果。筆者使用的是Dreamweaver cs3，這一款軟件的特點(diǎn)就是可以隨時(shí)切換設(shè)計(jì)視圖和代碼視圖，編輯起來(lái)非常方便。這對(duì)于對(duì)代碼還處于盲區(qū)的初學(xué)者來(lái)說(shuō)非常有用，可以一邊看設(shè)計(jì)一邊學(xué)代碼。讀懂代碼對(duì)于網(wǎng)頁(yè)設(shè)計(jì)非常有利。如果一開(kāi)始就直奔代碼，很多人是會(huì)頭痛，難以繼續(xù)學(xué)下去的。筆者先在D盤中建立一個(gè)名為myweb的網(wǎng)站，然后啟動(dòng)Dreamweaver進(jìn)行新建網(wǎng)站，建立了一個(gè)首頁(yè)，三個(gè)文件夾分別是images、web、org，分別用于存放圖像素材、各分類網(wǎng)頁(yè)文件和源文件，當(dāng)然可以根據(jù)需要建立音樂(lè)素材文件夾和視頻素材文件夾，將素材分門別類地加以保存更能有效地管理文件，查找起來(lái)會(huì)更加快捷。

4 網(wǎng)站的制作

首先制作的是首頁(yè)文件，首頁(yè)制作得好壞決定著網(wǎng)站整體功能的實(shí)現(xiàn)與否，決定著網(wǎng)站的發(fā)展命運(yùn)。筆者在網(wǎng)站首頁(yè)的制作上花費(fèi)了大量的精力。

其次是網(wǎng)站的top頁(yè)面，非常關(guān)鍵，從logo的設(shè)計(jì)制作、banner的制作，以及二者的顏色搭配，到Flash技巧的應(yīng)用等，融入多人智慧的結(jié)晶。導(dǎo)航條的制作也是費(fèi)盡一番心思，最初使用spry菜單欄，總是出現(xiàn)一些顯示上的問(wèn)題，最后只好簡(jiǎn)單地?fù)Q成直接的文本輸入，主要是因?yàn)楦揪蜎](méi)有二級(jí)欄目，用不著分類設(shè)置了，畢竟是單科網(wǎng)站，沒(méi)有必要那么花哨。這樣做絲毫沒(méi)有影響到鏈接功能的實(shí)現(xiàn)，只要選中文本，在鏈接后輸入網(wǎng)址或者是搜索網(wǎng)頁(yè)，就可以跳轉(zhuǎn)到相應(yīng)的頁(yè)面上，也能夠非常地快捷，修改也方便。

接著開(kāi)始設(shè)計(jì)left頁(yè)面，在這個(gè)頁(yè)面里，主要設(shè)計(jì)的是分欄目的內(nèi)容，讓讀者對(duì)分欄目有一個(gè)大致的了解。網(wǎng)頁(yè)的主體部分也是網(wǎng)站主要內(nèi)容的顯示區(qū)域，在這里又劃分成兩部分，一是放置正文的部分，二是幾個(gè)二級(jí)欄目。正文部分對(duì)于網(wǎng)站的意圖做了一下介紹，又介紹了一下信息技術(shù)課學(xué)生應(yīng)該注意的事項(xiàng)。右側(cè)的分欄目中第一欄就是榜上有名欄目，在這里應(yīng)用了一個(gè)jif的圖像，內(nèi)容為抖動(dòng)花瓣的花枝，隨著花瓣的飄灑，上榜學(xué)生的名字徐徐上升。在這里應(yīng)用了marquee的特效功能，讓學(xué)生的名字沐浴鮮花而冉冉升起，這樣學(xué)生的心底就會(huì)涌現(xiàn)出一種自豪感，內(nèi)心就會(huì)充滿激情和活力。動(dòng)態(tài)顯示的畫面更會(huì)吸引學(xué)生的目光，讓學(xué)生感到新鮮好奇，有一種期待和等候，盼望著出現(xiàn)自己的名字。榜上有名的下面是基礎(chǔ)知識(shí)，列出初中階段必須掌握的基礎(chǔ)知識(shí)，以利于學(xué)生時(shí)時(shí)復(fù)習(xí)鞏固增強(qiáng)印象。再下一個(gè)欄目是常用軟件，讓學(xué)生對(duì)其應(yīng)會(huì)的軟件有一個(gè)整體的認(rèn)識(shí)，以便于查漏補(bǔ)缺，看到自己還有哪些不足，以明確努力方向。

最后是網(wǎng)站的bottom，在這里設(shè)計(jì)了一個(gè)marquee，它引導(dǎo)著一個(gè)表格，表格中放置7幅校園風(fēng)光的圖片，當(dāng)然這里也可以放置學(xué)生的圖片作品或者攝影作品，這樣做的話，更能充分展示學(xué)生的個(gè)性和成績(jī)，與學(xué)生產(chǎn)生更加親密的感情。

課本中講的是用Office套裝軟件中的FrontPage制作網(wǎng)站，但是筆者認(rèn)為還是Dreamweaver更專業(yè)，實(shí)現(xiàn)的功能更多，雖說(shuō)比較復(fù)雜，但更能激勵(lì)學(xué)生探索其實(shí)用的功能，制作出更加富有特色的網(wǎng)頁(yè)。教師應(yīng)富有探索精神，多嘗試新的軟件，以便應(yīng)用于教學(xué)。