第一篇：《ASP動態網站》課程教學項目設計與實踐研究

生家鋒

摘 要：項目教學適合計算機專業學生實踐技能的培養，適應符合職業崗位、工種，符合現代企業生產實際需要的職業工人的培養。本文以《ASP動態網站》課程中教學項目的設計與實踐應用為例，來探索中職計算機專業教學如何設計設計教學項目、應用項目教學法。關鍵詞：教學項目；ASP動態網站；職業能力

本學期我在ASP動態網站制作課程中就教學項目的設計、項目教學的實施做了一定的研究。學期初我將ASP動態網站教學內容根據實際工作任務整合成若干教學項目，實施項目教學。教學設計上我們采用任務招標的形式，以任務招標，模擬職場為教學環境，通過招標、訓標、實踐制作、評標等環節來落實教學內容，培養和提升學生的技能。

一、教學項目的設計

教學實踐告訴我們，項目可以有很多形式，而不僅僅是綜合項目。通過示范項目可以讓學生掌握基礎的知識，為真正解決問題的能力奠定基礎，在此基礎上可以用知識遷移、協作討論等方式來完成技能的提升。下面我就以“留言板”項目為例來說明教學項目設計的思路。1.以典型工作任務為依托是教學項目設計的基本原則。教學項目設計的原則是從典型的職業工作任務中開發設計教學項目，項目內容突破傳統的學科界限，是以典型工作為核心，按照工作過程建構教學內容。所以我把“留言板”這個綜合網站中很常見的功能模塊單獨拿出來作為一個簡單的學生操作項目來設計。通過完成制作任務來落實知識，讓理論教學內容與實踐教學內容通過項目緊密地結合在一起。

2.以學生為主體的活動是教學項目的構成要素。學生活動主要指學生采用一定的工具和工作方法解決所面臨的工作任務所采取的探究行動?！傲粞园濉苯虒W項目中我設計了如下的學生活動：

（1）6人小組成立工作室競標。把全班48人根據學生學習能力和個性在自由組合基礎上分成8個小組，成立工作室，課堂教學模擬工作室競標形式。

（2）以工作室為單位的方案設計，競標說明書遞交。師生共同分析任務招標要求，明確網站的基本功能、設計的思路，在此基礎上學生完成網站美工圖設計和技術方案，遇到技術難題時向老師求助。（3）“留言板”網站制作。根據所學內容完成“留言板”網站制作。

（4）各工作室競標，闡述各自網站的功能及特點，說明設計意圖和技術優勢所在。（5）評標，結合學生評價和老師評價兩種形式，評選最適合的作品。

3.工作情境的創設是教學項目設計的前提。教學項目能順利實施的一個前提就是為學生創設一具能進行探究學習的環境。技術實踐知識與工作過程知識具有情景性特點，這決定了這類知識的掌握依賴于工作情景的再現。整個教學的設計也是用工作室任務招標、訓標、制作、評標環節進行的，模仿了一個職場環境，讓學生成為職業人去競爭去制作。

4.成果展示的多樣性。項目設計要有明確而具體成果展示環節，有明確的評分標準，但不是簡單的“對”、“錯”之分。當工作任務完成學習結束后，師生可共同評價項目成果和工作學習方法。這時要充分考慮學生的實際能力和行業的標準。

二、項目教學的具體實施

下面以《留言板制作》為例來講述項目組織實施過程。本項目就是用“模擬職場任務招標”形式。

1.任務招標，導入課題

模擬職場環境，以任務招標形式開展留言板網站制作項目教學。欣賞參考網站幫助更好地理解標書要求。學生接標開始課堂實踐制作。2.功能分析、新課講解

首先引導同學分析標書，明確網站基本功能和結構，得出制作思路。其次根據設計思路，結合前面所學知識，明確制作過程和實現技術方法。最后是新問題分析、新技術講解。師生共同分析得到留言板必須要有的內容。3.學生完成設計草案

讓學生在功能分析及制作過程方法的基礎上自我設計，內化為自己的過程和方法。通過明確草案內容再次幫助學生理清制作過程：數據庫表字段設計、站點配置、內容留言頁面美工圖設計及制作方法、添加留言頁面美工圖設計及制作方法。4.分析點評設計草案

教師根據學生自薦抽取設計方案進行分析點評：通過學生展示自己的設計方案（數據庫的設計、實現技術、頁面布局）、學生評價（頁面設計特點及實現方法）、教師點評（重點在頁面的布局設計和實現方法）來模擬企業訓標環節。

通過對草案的點評可以讓設計不合理的方案及時得到調整而不用等具體作品出來再推翻；通過教師指導、學生之間互相學習取長補短，及時更好完善草案。5.學生實踐制作

指導學生根據自己的設計方案及調整意見完成網站制作。這環節重點是動網技能訓練，讓學生將知識融合，融會貫通，在項目分析的基礎上進行開發，調試，在提高學生操作技能的同時也提升了學生解決實際問題能力。6.作品展示、評標和小結 模擬評標環節，評選三個最佳作品：采用自薦或推薦展示學生作品。請學生交流網站的特色、優點所在、介紹技術亮點、制作經驗。學生提問、學生評價，教師點評。通過點評更好地實現技術交流，鞏固知識點，提高技能，提高學生的表達、交流能力。

三、結束語

本學期我在ASP動態網站制作課程的探索取得了一定的成效，學生的實踐技能提高明顯。教學項目便于學生以項目為主線，把課程中的零散知識點串聯起來，強化學生對課程相關知識的理解記憶，學生的學習興趣、顯著提高，使學生愛學，動起手來。

第二篇：基于ASP技術的班級動態網站設計畢業論文

目 錄

摘 要.......................................................................I ABSTRACT...................................................................II 1 緒 言.....................................................................1 1.1 課題的可行性分析......................................................1 1.2 總體設計..............................................................2 1.3 網站設計思想..........................................................3 2 相關技術..................................................................3 2.1 ASP簡介...............................................................3 2.1.1 Asp的優勢.........................................................3 2.1.2 Asp的特點.........................................................4 2.2 MACROMEDIA DREAMWEAVER 8簡介..............................................5 2.3 MICROMEDIA FLASH 8.0.....................................................5 2.4 ADOBE PHOTOSHOP8.0.......................................................6 2.5 ACCESS數據庫的簡介.....................................................6 2.5.1 Access數據庫概述..................................................6 2.5.2 Access數據庫的優點................................................6 2.5.3 ADO數據訪問技術...................................................7 3 網站總體分析與設計........................................................7 3.1 網站系統分析..........................................................7 3.2 網站數據庫詳細設計....................................................8 3.3 每個頁面的詳細設計....................................................9 3.3.1 網站主頁..........................................................9 3.3.2 音樂欣賞.........................................................10 3.3.3 班級相冊模塊.....................................................10 3.3.4 美文模塊.........................................................12 3.3.5 留言模塊.........................................................14 4 結束語...................................................................18 致 謝......................................................................19 參考文獻...................................................................20

摘 要

班級網站是一個班級和外界交流的窗口，也是本班同學相互聯系、交流的平臺。本設計是用Dreamweaver排版頁面，中間嵌入asp編程來實現各個功能。網站利用IIS-ASP構成三層式WEB結構中的中間一層，將瀏覽器/服務器結構與WEB密切結合，完成前、后端兩者的集成輸出功能。網站以互聯網信息服務(IIS)為依托，后臺采用access數據庫服務，兼容性強。本設計界面友好，功能直觀，方便用戶在互聯網上訪問本網站。

網站首頁提供一些其他常用網站的鏈接，讓用戶方便去這些網站搜集自己所要的信息。班級動態是公布班級里一些重大事務或重要通知的地方，普通用戶只可以瀏覽新聞，而管理員享有發布、修改、刪除新聞的權利。影集里是用戶存放照片的地方，用戶可以在這里瀏覽其他用戶上傳的照片，或者自己也可以上傳照片；管理員享有修改、刪除照片的權利。論壇是用來給用戶相互交流，高談闊論的地方，普通用戶只能編輯自己的帖子，而管理員則可以編輯任何人的帖子。

關鍵字：班級網站；ASP；Access；留言板

I

ABSTRACT

The net station is a window which can communicate with outside world, It's also a terrace with which classmates can get in touch with each other and communicate with other classmates.This construction used Dreamweaver to compose the interfaces and actualize every function with asp program.the net station make use of IIS-ASP to constitute the middle layer of three layers WEB framework, with which, make explorer/service and WEB combine closely, so, it can complete pre-end and back-end’s function of corpus output.the net station relay on Internet Information Server(IIS), and use the database of access ,it is strong compatible.this net station has friendly interface and it’s function is intuitivism.because of these, the customers can visit this net station with internet easily.The net station’s header provide some net station’s catenate which used often.it can help customer to collect information that he need expediently.Class dynamic is a place where the administrator will announce some important events or important notification.general customer can browse news only, and the administrator can announce, mending and delete news.there are photos in the album, the customer can browse other customer’s photo ,or spread own photos.the administrator have the obligation of modify, delete the photos.Beside these, the customers also can communicate with each other and talk volubly with the forum.General customer can only edit own article, and the administrator can edit any customer’s article.Keywords：Class Webpage;ASP;Access;Message board

II 1 緒 言

據中國互聯網絡信息中心（CNNIC）2007年4月發布的調查數據，在我國3.03億網民中，學生占到33.2%，而這其中在校學生更是網民的主體。在大學校園里，擁有個人電腦的學生與日俱增。在連上教育網的大學宿舍里，一個個學生一整天掛在網上，開著BBS，開著QQ，他們在上面憑借一個個ID瀏覽、發布信息，與人交流，甚至是與自己相距80公分的室友。BBS幾乎成為大學校園次文化的一個組成部分。特別是大學班級網站這一特殊的虛擬社區，近年來也像QQ和手機短信一樣，逐漸成為年輕人的一種時尚。

既然網絡已經融入了學生的日常生活，成為他們學習、生活中不可或缺的部分，而現實又迫切需要有新的集體建設的方式來彌補傳統班級管理的缺陷，那么能否發揮網絡的功能，服務于班集體建設便成為自然的思考。所以該論文所涉及討論的班級網站就是班級現實組織在網絡上的一種延伸和映射，建立班級網站的目的是為了探索高校班級建設的新方式，構建班級建設的新平臺。1.1 課題的可行性分析

隨著網絡信息時代的來臨，互聯網應用越來越廣泛，從網上獲取并且發布信息已成為現代計算機應用的一大特色。一個網站，是一個傳媒，也是一個窗口。普通人可以通過瀏覽各個網站，接觸到許多從書本上學不到的知識，還可以看看新聞之類當作是一種消遣。而一個企業，一個個體通過制作自己的網站，向全世界宣傳自己的產品，提供各種產品的信息供顧客參考，并兼顧銷售。這時，網站也就成為對外的窗口。同時，網站上普遍都有一些免費資源，從而達到資源共享，使得我們足不出戶都能得到想要的資料?，F在很多企業、學校、乃至班級都有自己的網站，通過網站使數據處理更方便快捷，人員訪問更方便。

班級網站是使用計算機對畢業班級大學生活以及以后方便聯系而開發的系統。通過使用計算機技術、信息技術、數據庫技術，來實現遠程網絡聯系，資源共享為目標，利用先進的硬件設備，對班級網站進行一定的錯誤的調試和糾正以及網站完整性的規劃。

在該項目的可行性研究與計劃工作中，通過對網絡工作環境進行的實地調查和自己掌握的知識的程度，通過對資料的整體和對整體網站的構想和實現程度進行的全面的分析得出了結論，這個網站的任務對是完全可以達到的。主要分析如下所述：

（1）技術可行性 通過以往學習和總結得到的經驗，首先我熟練掌握了基礎軟件Dreamweaver的使用，可以使用它對網站的整體結構進行完整的設計規劃。Flash是一款很好的動畫制作軟件，可以對網頁的進一步完善起到至關重要的作用。后臺數據庫設計使用Microsoft公司提供的office軟件中自帶的Access軟件，數據表存儲格式為*.MDB。通過它對數據可以很方便的進行管理，也可以很容易的移植到其他數據庫系統中。因此，在技術上，開發班級網站是可行的。

（2）經濟可行性

對于我來說已經不用再到其他的網吧或者借用其他人的電腦來完成自己的班級網站的設計，自己可以在自己的電腦中完成對網站開發的所有工作，而且這次對班級網站的開發也是完全不需要資金的投入的，主要是時間和精力的投入，所以經濟這方面是完全可行的。

（3）人員可行性

作為班級網站的設計，我已掌握了大部分設計軟件的使用，包括Dreamweaver的使用、Flash動畫軟件的使用、Photoshop美化軟件的使用、Access數據軟件的使用、Asp知識的靈活運用等等，完全有能力成功設計出這個班級網站的。另在輔導老師的大力支持和幫助下，其他曾經參與過其他網站設計的同學等等所有的人力都已經完全大具備的情況下，實現班級網站的設計在人員上是完全可行的。

綜上所述，系統開發是完全可行的。1.2 總體設計

在總體設計中要解決的問題是“做什么”以及“怎么做”問題?？傮w設計的任務是：劃分出組成網頁的物理元素，如：程序、文件、數據庫、過程和文檔等。

（1）設計網頁的結構，確定中每個程序由哪些模塊組成，并確定模塊與模塊之間的關系。

（2）尋找實現目標網頁的各種不同的方案，然后從中選取合理的方案，列出組成網頁的所有物理元素，制定實現這個方案的進一步計劃。

（3）選擇一個最佳方案，并進一步為這個最佳方案設計軟件結構，進行必要的數據庫設計。

一、版面設計(Dreamweaver)Dreamweaver網頁設計軟件，它的功能非常強大，幾乎可以完成很多網頁的整體規劃。它可以連續修改一個或幾個網頁的外觀和格式，能夠顯著增強和擴展HTML元素，從而實現更少的編碼、更少的頁數和更快的下載速度。選取一個固定的版面格式，為頁面設計確定方向。

二、建立數據庫

運用Access，因其具有強大的數據倉庫，并提供了一個全面的平臺，從而使設計、建立、維護和使用數據倉庫解決方案變得迅速而輕松，這樣的數據倉庫解決方案讓決策過程在準確的信息基礎上更為有效。在邏輯結構基本確定之后，再根據應用需要對設計結構進行適當的修改和調整以期進一步完善設計，提高應用系統的性能。這種修改和調整包括以下這兩個方面：

（1）增加必要的冗余數據。

（2）如果經常要做的查詢是兩個關系的連接，則可以考慮是否可以將兩個關系合并為一個關系。

數據試運行合格后，數據開發工作就基本完成，即可投入正式運行了。但是，由于應用環境在不斷變化，數據運行過程中物理存儲也會不斷變化，對數據設計進行評價、調整、修改等維護工作是一個長期的任務，也是設計工作的繼續和提高。1.3 網站設計思想

通過班級網站，全面宣傳，展示班級風采、優點與特色，發布班級的重大活動安排，增強同學之間的相互聯系，提高辦事效率。相關技術

本系統是以Asp技術，以DreamWeaver 8.0、Micromedia Flash 8.0、Adobe photoshop8.0作為開發工具，Access數據庫管理為基礎而設計的一個班級網站。2.1 Asp簡介

2.1.1 Asp的優勢

在制作本系統過程中的一個至關重要的環節就是網頁的制作。而在當今世界上，用于制作網頁的工具比比皆是，如ASP、PHP、JSP等等。但我之所以選擇ASP制作本系統,原 因在于asp是微軟公司最為流行的開放式的Web服務器應用程序開發技術，它相對于其他網頁制作工具具有自己獨特的優勢,是一套微軟開發的服務器端運行的腳本平臺。

與一般的程序不同，.asp 程序無須編譯，ASP 程序的控制部份，是使用 VBScript、JScript 等腳本語言來設計的，當執行 ASP 程序時，腳本程序將一整套命令發送給腳本解釋器(即腳本引擎)，由腳本解釋器進行翻譯并將其轉換成服務器所能執行的命令。當然，同其他編程語言一樣，ASP 程序的編寫也遵循一定的規則，如果你想使用你所喜愛的腳本語言編寫 ASP 程序，那么你的服務器上必須要有能解釋這種腳本語言的腳本解釋器。當你安裝 ASP 時，系統提供了兩種腳本語言： VBsrcipt 和 JScript，而 VBscript 則被作為系統默認的腳本語言。ASP 本身并不是一種腳本語言，它只是提供了一種使鑲嵌在 HTML 頁面中的腳本程序得以運行的環境。因此，我使用asp作為制作本網站的主要技術和工具，一方面符合了現階段制作網頁的流行趨勢，很好地做到了與世界前沿的接軌，可以最大限度地利用世界上現有的動態網頁資源，豐富制作手段；另一方面使用asp制作這個系統，可以最大化地發揮asp技術的優勢，簡化制作程序，減少工作時間，降低制作成本，這也是本文選擇ASP作為開發工具最重要的原因之一。

2.1.2 Asp的特點

（1）任何開發工具皆可開發ASP

只要使用一般的文書編輯程序，如Windows記事本，就可以編輯。當然，其他網頁開發工具，例如，FrontPage Express、FrontPage等也都可以。

由于ASP程序是在網絡服務器端中執行，執行結果所產生的HTML文件適用于不同的瀏覽器。

（2）語言相容性高

ASP與所有的ActiveX Script語言都相容，除了可結合HTML，VBScript、Java Script、Active X服務器組件來設計外，并可經由“plug-In（外掛組件模組）的方式，使用其他廠商（Third Party）所提供的語言。

（3）隱密安全性高

如果我們在瀏覽器中直接查看網頁的原始代碼，就只能看到HTML文件，原始的ASP程序代碼是看不到的！這是因為ASP程序先于網站服務（Web Server）端執行后，將結果轉換成標準HTML文件，再傳送到客戶端（Client）的瀏覽器上，因此，我們所辛苦撰寫的ASP程序并不會輕易地被看見進而被盜用。（4）易于操控數據庫

ASP可以輕易地通過ODBC(Open Database Connectivity)驅動程序連接各種不同的數據庫，例如：Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可將“文本文件”或是”Excel” 文件當成數據庫用。

（5）面向對象學習容易

ASP具備有面向對象（Object-Oriented）功能，學習容易，ASP提供了五種方便能力強大的內建對象：Request、Response、Sever、Application以及Session，同時，若使用ASP內建的“Application”對象或”Session”對象所撰寫出來的ASP程序可以在多個網頁之間暫時保存必要的信息。2.2 Macromedia Dreamweaver 8簡介

Dreamweaver是由美國MACROMEDIA公司開發的，是集網頁制作和管理網站于一身的網頁編輯器，它是目前市場上有關網頁設計、制作功能非常強大的軟件，操作界面友好，可擴展性能強，是網頁設計制作領域的主流工具。

由于Dreamweaver工作區是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區組件有以下若干種：

(1)文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。(2)裝載器中包含一些打開和關閉常用檢查器和模板的按鈕。

(3)對象工具欄包含創建不同類型的對象（例如圖象、表格和層等）的按鈕。(4)屬性檢查器顯示選定對象的屬性。

(5)快捷菜單可以使用戶對當前選擇或區域快速執行某些命令。

(6)可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。

2.3 Micromedia Flash 8.0 FLASH是Macromedia公司出品的，用在互聯網上動態的、互動的shockwave。它的優點是體積小，可邊下載邊播放，這樣就避免了用戶長時間的等待。

FLASH可以用其生成動畫，還可在網頁中加入聲音。這樣你就能生成多媒體的圖形和界面，而使文件的體積卻很小。

不僅如此，FLASH用其內置語句并結合JAVASCRIPE，還可作出互動性很強的主頁。但 是，必須安裝插件PLUG-IN，才能被瀏覽器所接受。2.4 Adobe Photoshop8.0 Photoshop 8.0是目前最流行的圖形、圖像編輯設計軟件，在數碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網頁設計等領域都被廣泛地應用。Photoshop 8.0的主要特點是：

(1)文字處理更加方便。(2)使圖層管理更有序。

(3)新增圖像功能：圖像的剪切和剪裁更加方便。

(4)將所有工具的選項板改進為工具選項欄放置在工作區頂部，方便先項參數的設置。(5)為了更方便地用路徑繪畫，改進增加了幾何形狀工具，通過選擇工具的不同工作模式，可創建路徑、幾何形狀或幾何填充區，使得矢量繪圖功能得到了加強。2.5 Access數據庫的簡介

2.5.1 Access數據庫概述

數據庫是有結構的數據集合,它與一般的數據文件不同，是一串文字或數字流。數據庫中的數據可以是文字、圖象、聲音等。

Microsoft Access是一種關系式數據庫，關系式數據庫由一系列表組成，表又由一系列行和列組成，每一行是一個記錄，每一列是一個字段，每個字段有一個字段名，字段名在一個表中不能重復。表與表之間可以建立關系（或稱關聯，連接），以便查詢相關聯的信息。Access數據庫以文件形式保存，文件的擴展名是DB。

2.5.2 Access數據庫的優點

Access 是微軟公司推出的基于Windows的桌面關系數據庫管理系統（RDBMS），是Office系列應用軟件之一。Access是一種關系型數據庫管理系統，其優點如下：

(1)完善地管理各種數據庫對象，具有強大的數據組織、用戶管理、安全檢查等功能。(2)強大的數據處理功能，在一個工作組級別的網絡環境中，使用Access開發的多用戶數據庫管理系統具有傳統的XBASE（DBASE、FoxBASE的統稱）數據庫系統所無法實現的客戶服務器(Cient/Server)結構和相應的數據庫安全機制，Access具備了許多先進的大型 數據庫管理系統所具備的特征，如事務處理/出錯回滾能力等。

(3)可以方便地生成各種數據對象，利用存儲的數據建立窗體和報表，可視性好。(4)作為Office套件的一部分，可以與Office集成，實現無縫連接。

(5)能夠利用Web檢索和發布數據，實現與Internet的連接。Access主要適用于中小型應用系統，或作為客戶機/服務器系統中的客戶端數據庫。

2.5.3 ADO數據訪問技術

連接一個本地數據庫或遠程數據庫。打開一個指定的數據庫表，或定義一個基于結構化查詢語言(SQL)的查詢、或存儲過程、或該數據庫中的表的視圖的記錄集合。將數據字段的數值傳遞給數據綁定的控件，可以在這些控件中顯示或更改這些數值。添加新的記錄，或根據對顯示在綁定的控件中的數據的任何更改來更新一個數據庫。

ADO連接數據庫的通用代碼：（1）添加的代碼為：

<%Conn.execute(“insert into tab data**)values('**','**')”)

Conn.close

set Conn=nothing response.Redirect(“datalist.asp”)

%>（2）刪除的代碼為：

<%Conn.execute(“delete * from tab data where id=”+request.QueryString(“did”))'Response.Write(“delete * from tab data where id=”+request.QueryString(“did”))Conn.close

set Conn=nothing

response.Redirect(“datalist.asp”)

%> 3 網站總體分析與設計

3.1 網站系統分析

根據前面的設計思想進行分析，按照系統開發的基本觀點對網站進行分解，欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。因此我將自己的班級網站分為五個欄目：

（1）班級首頁

通過一定的flash動畫設計和動態的文字實現首頁的展示，從側面反映班級的和睦和 團結。

（2）班級風采

通過班級體、校內外的趣事、宿舍間的故事展現班級體，從中多數是以照片和文字結合的效果來展現的。

（3）音樂

在其中展示個人喜歡的歌曲，朋友們可以在里面點播自己喜歡的歌。（4）美文

在其中展示個人喜歡的文章，朋友們可以在里面欣賞到經典的文章。（5）留言板

是一個我與大家談心交流的地方，在留言板中，我們可以暢所欲言，就我們感興趣的話題展開討論，和大家進行溝通。3.2 網站數據庫詳細設計

一、用戶表yh 存儲了用戶的檔案包括：id、name、ly、hf、lytime等。id字段采用自動編號，為該表的主關鍵字；name字段為留言者的名稱；ly字段為留言的內容；hf字段為管理員進行回復的內容；lytime字段代表留言的時間。它的設計視圖如下圖3-1所示。

圖3-1 yh表

二、管理員表admin 管理員表是為管理員服務的，該表包括字段為id、name、password字段。其中id為主關鍵字，name和password分別代表用戶名和密碼。它的設計視圖如下圖3-2所示。

圖3-2 admin表 以上數據表為Access類型的庫文件，將它定名為：“ly.mdb”。3.3 每個頁面的詳細設計

3.3.1 網站主頁

網站主頁采用靜、動相結合的方式，即靜態的主畫面和動態的flash動畫相結合以及滾動的消息條相組合而成，以蛋黃色為背景色，充分體現班級的勃勃生氣，靜態的圖片起到了一定的承托動態文字的作用,起到了一定的美化作用，而動態的文字就得利用到了JavaScript 等腳本語言來設計的,使之可以實現移動的效果也利用Dreamweaver實現了鏈接的功能。

班級網站的主頁面構圖如下圖3-3所示，首頁中導航欄包含了如網站首頁、班級相冊、音樂天地、美文欣賞、留言板等板塊，從多方面展示網站作者的生活動態。

圖3-3 網站首頁

1、flash的制作

主頁的大篇幅被一個flash占據,并且我使用flash實現了它對其他班級網站頁面的鏈接,該flash給人以一種新鮮活潑的感覺,充分的反應了當代大學生的積極樂觀的風貌,在該flash中點擊一定的頁面內容都會出現一定的動畫效果,可以給每一個瀏覽該頁面的人一種輕松愉悅的心情。3.3.2 音樂欣賞

音樂欣板塊供瀏覽者在閑暇之余享受到一份安寧，用淡淡的紫色作為背景給人一種舒心的感覺。在這個板塊中添加的主要音樂有我校校歌，陽光總在風雨后等一些激勵的歌曲，同時通過點擊不同的音樂還會伴隨著歌詞的出現，該板塊頁面如下圖3-4所示。

圖3-4 音樂界面

音樂欣賞界面的核心代碼為：

班級相冊主要展示我們班級同學的精神面貌，以及展現出我們班級和諧相處，互敬互愛的高尚素質。班級相冊頁面如下圖3-5所示。

圖3-5 班級相冊 班級相冊主要是采用Micromedia Flash 8.0技術制作的，自制動畫是由四個圖層組成，主要使用動作補間動畫和形狀補間動畫制成。動作補間動畫的原理是根據實例屬性的變化來形成動畫效果。它的前提條件是對象必須是一個元件的實例、文本或組；分離的對象不能形成動作補間動畫。對于在舞臺上繪制的圖形，一定要將圖形組合或轉換為元件之后，才能形成動作補間動畫。動作補間動畫實際上就是給一個對象的兩個關鍵幀分別定義不同的屬性，如大小、顏色、位置、角度以及透明度等，在這兩個關鍵幀之間建立一種變化關系。形狀補間動畫是根據對象的形狀變化來實現的動畫，只需要給出動畫的第一幀和最后一幀的對象形狀，中間的動畫過程由系統自動生成。實現形狀動畫的前提條件是，對象必須為矢量圖形。班級相冊頁面的核心代碼如下：

stop();//動畫開始時停止

var i:Number = 1;//設置變量i的初始值為1 prev_mc.gotoAndStop(2);//“prev_mc”影片，開始讓它停止在第2幀，讓按鈕變成灰色并失去作用，因為動畫開始時沒有上一張圖片

onEnterFrame = function(){//運行每一幀時執行以下函數

片

if(_root._currentframe == 11){//如果主場景播放到第11幀

} if(_root._currentframe == 20){//如果主場景播放到第20幀

} gotoAndStop(2);//主場景動畫停止在第2幀

pictures.gotoAndStop(i);//“pictures”影片停止在第i幀，從第11幀出現第i張圖

next_mc.next_btn.onRelease = function(){//“next_mc”影片中的按鈕在釋放時執行以

if(i<28){//如果變量i小于28（“pictures”影片中只有5張圖片）

下函數

i++;//每點擊“next_mc”影片中的按鈕時變量i遞增1，“pictures”影片也跳轉 到下一幀

prev_mc.gotoAndStop(1);//“prev_mc”影片停止在第1幀，即讓按鈕變黑并起

作用，因為此時有了上一張圖片

} play();//主場景動畫開始播放 if(i == 28){//如果變量i等于28

next_mc.gotoAndStop(2);//“next_mc”影片停止在第1幀，即讓按鈕變成灰色

并失去作用，因為此時沒有下一張圖片

};} prev_mc.prev_btn.onRelease = function(){//“prev_mc”影片中的按鈕在釋放時執行以

if(i>1){//如果變量i大于1

下函數

i--;//每點擊“prev_mc”影片中的按鈕時變量i遞減1，“pictures”影片也跳轉 到上一幀

next_mc.gotoAndStop(1);//“next_mc”影片停止在第1幀，即讓按鈕變黑并起

作用，因為此時有了下一張圖片

} play();//主場景動畫開始播放

if(i == 1){//如果變量i等于1

prev_mc.gotoAndStop(2);//“prev_mc”影片停止在第2幀，即讓按鈕變成灰色

并失去作用，因為此時沒有上一張圖片

};3.3.4 美文模塊 };} 美文，顧名思義就是美好的文辭。美文，顧名思義就是美好的文辭。有人把美文比作一杯好茶，看著舒雅，泡在杯里，茶葉慢慢地舒展開來，一股淡淡地清香猶如裊裊升起的飲煙，撩拔起心中的欲想，于是情不自盡地想品上一口，幾許苦澀，幾許甘甜，從口中一直向心田傳去。

該模塊主要包括友誼是一棵樹、做個努力的人、我們學會感恩等一些文章，該模塊左邊有一個導航欄目，通過點擊不同的美文可以在頁面查看該文章的內容。該模塊的頁面如下圖3-6所示。

圖3-6 美文界面

美文界面的核心代碼如下所示：

忙的時候，想要休息；

度假的時候，想到未來。

窮的時候，渴望富有；

生活安逸了，怕幸福不能長久。

該決定的時候，擔心結果不如預期；

看明白了，后悔當初沒有下定決心。

不屬于自己的，常常心存欲望；

握在手里了，又懷念未擁有前的輕松。

生命若不是現在，那是何時？

一個人可以毫無道理跟你做一輩子親戚,但

一個人不會毫無道理跟你做一輩子朋友

我會想起與你們認識的種種.

也會想起發生過的點點滴滴.

直到我們都年老時是否會像現在這樣坐在電腦前互訴心聲？

不管如何,希望我們永遠是真誠相對的朋友(知己)

朋友就是喜歡你也了解你的人

愿你都能珍惜身邊每一個朋友

因為你我有緣份，才能成為朋友

可以成為知己的，更難得！

時間未必是你我成為知己的原因

但一定可以證明到

你對朋友的關懷不是白費！
3.3.5 留言模塊

留言板模塊是一個我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進行交流。就我們感興趣的話題展開討論，和大家進行溝通。

本板塊由發表留言和查看留言兩部分組成。查看留言結果為網頁lyxs.asp，用來顯示用戶發言的內容；發表留言為頁面zxly.asp，大家可以暢談自己的想法。留言板與數據庫book.mdb相連，其中數據庫連接頁面conn.asp

一、查看留言頁面，如下圖3-7所示。

圖3-7 瀏覽留言界面

查看留言界面核心代碼如下: