靜態網站建設初探

■何洪剛

網站建設是初中信息技術教學的重點內容，也是當今社會各行各業走向網絡化的一種主要的途徑。從網站的設計構思、網站素材的制作與收集、網站制作中的關鍵步驟等幾方面介紹靜態網站的初步搭建。

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

筆者通過制作學科網站的經驗，與大家交流一下網站制作過程中的重要環節及注意事項。筆者是一名新手，網站制作只是處于嘗試階段，本文中提到的觀點可能不太客觀，或許存在很大的漏洞，望各位網站制作高手加以點撥。

1 網站的設計與構思

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

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

2 網站素材的收集與制作

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

3 網站的搭建

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

4 網站的制作

首先制作的是首頁文件，首頁制作得好壞決定著網站整體功能的實現與否，決定著網站的發展命運。筆者在網站首頁的制作上花費了大量的精力。

其次是網站的top頁面，非常關鍵，從logo的設計制作、banner的制作，以及二者的顏色搭配，到Flash技巧的應用等，融入多人智慧的結晶。導航條的制作也是費盡一番心思，最初使用spry菜單欄，總是出現一些顯示上的問題，最后只好簡單地換成直接的文本輸入，主要是因為根本就沒有二級欄目，用不著分類設置了，畢竟是單科網站，沒有必要那么花哨。這樣做絲毫沒有影響到鏈接功能的實現，只要選中文本，在鏈接后輸入網址或者是搜索網頁，就可以跳轉到相應的頁面上，也能夠非常地快捷，修改也方便。

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

最后是網站的bottom，在這里設計了一個marquee，它引導著一個表格，表格中放置7幅校園風光的圖片，當然這里也可以放置學生的圖片作品或者攝影作品，這樣做的話，更能充分展示學生的個性和成績，與學生產生更加親密的感情。

課本中講的是用Office套裝軟件中的FrontPage制作網站，但是筆者認為還是Dreamweaver更專業，實現的功能更多，雖說比較復雜，但更能激勵學生探索其實用的功能，制作出更加富有特色的網頁。教師應富有探索精神，多嘗試新的軟件，以便應用于教學。