綜合課設(shè)報告_計算機網(wǎng)絡(luò)課程群網(wǎng)站的設(shè)計與實現(xiàn)

1、綜合課程設(shè)計報告題目： 計算機網(wǎng)絡(luò)課程群網(wǎng)站的設(shè)計與實現(xiàn) 班級： 姓名： 學號： 指導教師： 完成日期：網(wǎng)絡(luò)工程專業(yè)2010級綜合課程設(shè)計任務(wù)書1、 設(shè)計目的 目前，精品課程資源平臺建設(shè)，尤其是課程群平臺建設(shè)，是高校教學改革于建設(shè)的主要內(nèi)容之一，也是教學質(zhì)量工程內(nèi)容之一。為廣大師生對本計算機網(wǎng)絡(luò)精品課程的了解和認識；從而為計算機網(wǎng)絡(luò)課程群實現(xiàn)資源共享提供大家一個公共的學習平臺。便于大家對計算機網(wǎng)絡(luò)課程群的知識組織結(jié)構(gòu)銜接的重要性，特做此網(wǎng)站。二、設(shè)計內(nèi)容 此次計算機網(wǎng)絡(luò)課程群網(wǎng)站設(shè)計的主要內(nèi)容如下：首頁，課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)

2、計。其中本組設(shè)計成員各自完成如下功能：由舒均波所完成的功能：首頁：其中包括標題行的首頁，課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計；在首頁中實現(xiàn)課程群介紹、通知公告、五大課程、申請書和交流區(qū)；設(shè)計頭部和腳本。課程優(yōu)化表：實現(xiàn)下載 聯(lián)合課程優(yōu)化表PDF;課程群說課錄像：實現(xiàn)課程錄像的觀看；計算機網(wǎng)絡(luò)：介紹計算機網(wǎng)絡(luò)課程的重要性，和該課程的主要負責人的介紹；由蘇浩完成的功能：網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計；設(shè)計課程的主頁標題（課程主頁，說課錄像，師資隊伍，課程描述，建設(shè)規(guī)劃，課程評價，學習資源，課程申報書，在線回答，返回首頁）。

3、網(wǎng)絡(luò)管理：實現(xiàn)課程的介紹和課程的負責人；網(wǎng)絡(luò)安全技術(shù)：介紹該課程重要性和主要負責人的介紹；網(wǎng)絡(luò)協(xié)議分析：實現(xiàn)介紹課程的重要性課程的負責人；點擊課程主頁的標題分別實現(xiàn)相應(yīng)的實習隊伍介紹，課程的描述，建設(shè)規(guī)劃，課程評價，學習資源，在線回答的功能。三、設(shè)計要求第一：標題行中的內(nèi)容：· 首頁 · 課程群優(yōu)化表 · 課程群說課錄像 · 計算機網(wǎng)絡(luò)· 網(wǎng)絡(luò)管理· 網(wǎng)絡(luò)安全技術(shù)· 計算機網(wǎng)絡(luò)協(xié)議分析· 網(wǎng)絡(luò)程序設(shè)計第二： 網(wǎng)頁中在課程群介紹、通知公告、五大課程、申請書、交流區(qū)。四、時間安排及考核方式 設(shè)計時間為5周。 采用答辯和

4、設(shè)計報告相結(jié)合的考核方法對綜合課程設(shè)計效果進行考核。其中綜合課程設(shè)計報告(不少于5000字)（占總成績50%），答辯（占總成績50%）?？己斯卜治鍌€等級，優(yōu)秀、良好、中等、及格、不及格。五、主要參考文獻：Web應(yīng)用開發(fā)技術(shù)清華大學出版社；DEDE織夢官方網(wǎng)PHP100;W3school。一、概述1.1 簡介計算機網(wǎng)絡(luò)課程群網(wǎng)站設(shè)計的內(nèi)容此次綜合課程設(shè)計的項目是完成計算機網(wǎng)絡(luò)課程群網(wǎng)站的設(shè)計與實現(xiàn)，主要包括首頁，課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計。實現(xiàn)相關(guān)精品課程和相關(guān)課程負責人的介紹功能。首頁中實現(xiàn)課程群介紹，通知公告，五大課程，申請書

5、和交流區(qū)這五大模塊。在主頁中欄目下的子欄目中如主頁中的計算機網(wǎng)絡(luò)這個欄目；即點擊計算機網(wǎng)絡(luò)這個欄目則進入計算機網(wǎng)絡(luò)課程相關(guān)的頁面。這里有課程主頁，說課錄像可供大家觀看，有計算機網(wǎng)絡(luò)的師資隊伍的介紹和計算機網(wǎng)絡(luò)的負責人的介紹等內(nèi)容。主頁中的其他欄目也可以按照計算機網(wǎng)路這樣的方式顯示相關(guān)的內(nèi)容和該課程的介紹和詳解的內(nèi)容。1.2 項目分工：此次綜合課程設(shè)計的項目是完成計算機網(wǎng)絡(luò)課程群網(wǎng)站的設(shè)計與實現(xiàn)，主要包括首頁，課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計。實現(xiàn)相關(guān)精品課程和相關(guān)課程負責人的介紹功能。以上是綜合課設(shè)設(shè)計項目的大體功能，其具體的項目分工

6、情況如下，即本組設(shè)計成員各自完成如下功能：由x所完成的功能：首頁：其中包括標題行的首頁，課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計；在首頁中實現(xiàn)課程群介紹、通知公告、五大課程、申請書和交流區(qū)；設(shè)計頭部和底部。課程優(yōu)化表：實現(xiàn)下載 聯(lián)合課程優(yōu)化表PDF;課程群說課錄像：實現(xiàn)課程錄像的觀看；計算機網(wǎng)絡(luò)：介紹計算機網(wǎng)絡(luò)課程的重要性，和該課程的主要負責人的介紹。由x完成的功能：網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計；設(shè)計課程的主頁標題（課程主頁，說課錄像，師資隊伍，課程描述，建設(shè)規(guī)劃，課程評價，學習資源，課程申報書，在線回答，返回首頁）。網(wǎng)

7、絡(luò)管理：實現(xiàn)課程的介紹和課程的負責人；網(wǎng)絡(luò)安全技術(shù)：介紹該課程重要性和主要負責人的介紹；網(wǎng)絡(luò)協(xié)議分析：實現(xiàn)介紹課程的重要性課程的負責人；點擊課程主頁的標題分別實現(xiàn)相應(yīng)的實習隊伍介紹，課程的描述，建設(shè)規(guī)劃，課程評價，學習資源，在線回答的功能。1.3 開發(fā)環(huán)境的簡介1.31 APMserv 的簡介APMserv是一款快速搭建Apache、PHP、MySQL5.0和MySQL4.0，以及ASP，CGI，PhpMyAdmin等網(wǎng)站服務(wù)器平臺的綠色軟件，可以在WinNT/Win2000/WinXP的環(huán)境下運行。APMserv擁有跟IIS一樣便捷的圖形管理界面。具有靈活的移動性，將其拷貝到其他目錄、分區(qū)或

8、其他的電腦時，均只需點擊APMserv.exe中的驅(qū)動按鈕，即可進行相關(guān)的設(shè)置，講Apache和MySQL安裝位系統(tǒng)服務(wù)并啟動；該服務(wù)器支持了MySQL5.0和MySQL4.0兩個版本，虛擬主機，虛擬目錄、端口的更改，SMTP、上傳大小限制、自動全局變量、SSL證書制定、緩存性能優(yōu)化的呢過設(shè)置，只需鼠標點擊即可完成。該服務(wù)器集成了以下軟件：Apache2.23HTTP服務(wù)器；NetBox2.8Build4128HTTP服務(wù)器+ASP腳本解釋引擎；PHP5.2.0PHP腳本解釋引擎；MiniPerl5.8Perl腳本解釋器；MySQL5.0.27MySQL數(shù)據(jù)庫服務(wù)器；phpMyAdmin2.9

9、.1.1MySQL數(shù)據(jù)庫在線管理工具等。1.32 MySQL簡介MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，由瑞典MySQL AB公司開發(fā)，目前屬于Oracle公司。MySQL是一種關(guān)聯(lián)數(shù)據(jù)庫管理系統(tǒng)，關(guān)聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)，這樣就增加了速度并提高了靈活性。MySQL所使用的SQL語言是用于訪問數(shù)據(jù)庫的最常用標準化語言。MySQL軟件采用了雙授權(quán)政策，它分為社區(qū)版和商業(yè)版，由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點，一般中小型網(wǎng)站的開發(fā)都選擇MySQL作為網(wǎng)站數(shù)據(jù)庫。由于其社區(qū)版的性能卓越，搭配PHP和Apache可組成良好的開發(fā)環(huán)境。M

10、ySQL是一個真正的多用戶、多線程SQL數(shù)據(jù)庫服務(wù)器，是世界上最流行的和標準化的數(shù)據(jù)庫語言，是以一個客戶機/服務(wù)器結(jié)構(gòu)的實現(xiàn)，它由一個服務(wù)器守護程序mysql和很多不同的客戶程序和庫組成。 1.33 JavaScript簡介 JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（Netscape）的Brendan Eich設(shè)計，是一種動態(tài)、弱類型、基于原型的語言，內(nèi)置支持類。JavaScript是Sun公司的注冊商標。Ecma國際以JavaScri

11、pt為基礎(chǔ)制定了ECMAScript標準。JavaScript也可以用于其他場合，如服務(wù)器端編程。完整的JavaScript實現(xiàn)包含三個部分：ECMAScript，文檔對象模型，字節(jié)順序記號。Netscape公司在最初將其腳本語言命名為LiveScript。在Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計的，目的之一就是“看上去像Java”1，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計原則源自Self和Scheme2。JavaScript與Java名稱上的近似，是當時網(wǎng)景為了營銷3

12、考慮與Sun公司達成協(xié)議的結(jié)果。為了取得技術(shù)優(yōu)勢，微軟推出了JScript腳本語言。Ecma國際（前身為歐洲計算機制造商協(xié)會）創(chuàng)建了ECMA-262標準（ECMAScript）?，F(xiàn)兩者都屬于ECMAScript的實現(xiàn)。盡管JavaScript作為給非程序人員的腳本語言，而非是作為給程序人員的編程語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。二、設(shè)計內(nèi)容該課程群所包含的各門課程建設(shè)一個公共平臺。在平臺中首先介紹平臺建設(shè)的背景及組織結(jié)構(gòu)，課程群的公共資源以及每門課程的鏈接；其次是各門課程的詳細資源建設(shè)。即計算機網(wǎng)絡(luò)課程群的設(shè)計內(nèi)容如下。2.1后臺的服務(wù)設(shè)計本次綜合課程設(shè)計之計算機網(wǎng)

13、絡(luò)課程群網(wǎng)站建設(shè)的后臺服務(wù)主要是使用DEDE織夢官方網(wǎng)站的服務(wù)提供，后臺服務(wù)器在安裝過程中一自動實現(xiàn)把MYSQL 5.1給安裝好，在后臺的管理登陸界面下輸入用戶名admin和密碼admin，然后再輸入驗證碼就可以實現(xiàn)對計算機網(wǎng)絡(luò)課程群網(wǎng)站建設(shè)的后臺的服務(wù)操作。數(shù)據(jù)庫的導入，根據(jù)已建好的數(shù)據(jù)庫，在織夢管理服務(wù)器中選擇管理MySQL數(shù)據(jù)庫，然后創(chuàng)建一個數(shù)據(jù)庫名稱，選擇Import將自己的數(shù)據(jù)庫導入到后臺創(chuàng)建的數(shù)據(jù)庫中。根據(jù)計算機網(wǎng)絡(luò)課程群網(wǎng)站前臺頁面要顯示的欄目，在織夢后臺的核心中的欄目管理，選擇批量增加欄目，依次在欄目中填入首頁，課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，

14、網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計。在后臺的系統(tǒng)模塊中修改默認模板為moban，在生成的主頁默認default. html改為moban. Html。將已建好的欄目根據(jù)網(wǎng)頁要實現(xiàn)的設(shè)計要求可將一些欄目管理設(shè)為頻道封面頁，也可以欄目設(shè)為列表內(nèi)容頁即list_article.htm;根據(jù)計算機網(wǎng)絡(luò)設(shè)計的要求可以在欄目的內(nèi)容頁中添加標題和內(nèi)容。以便在前臺顯示。2.2前臺頁面的設(shè)計在計算機網(wǎng)絡(luò)群網(wǎng)站的頂部的logo中顯示計算機網(wǎng)絡(luò)精品課程群的圖片；首頁中除了顯示課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，計算機網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計7個標題名稱之外，顯示課程群的介紹區(qū)域；顯示計算機網(wǎng)

15、絡(luò)課程的相關(guān)內(nèi)容，點擊該區(qū)域的更多可以查看整個內(nèi)容的文章。中間還可以顯示相關(guān)計算機網(wǎng)絡(luò)相關(guān)的圖片，圖片可以動態(tài)的按順序跳轉(zhuǎn)。通知公告區(qū)域的設(shè)計內(nèi)容；該區(qū)域以列表頁的形式顯示各通知公告；點擊通知公告下面的通知可以查看相關(guān)通知的內(nèi)容！也可以點擊該通知公告區(qū)域的更多可以查看更多的通知和內(nèi)容。在另外一個區(qū)域中可以看到五大課程，點擊相關(guān)的圖片可以調(diào)到相關(guān)的鏈接。在交流區(qū)區(qū)域可以實現(xiàn)交流的區(qū)域，便于光大學生對精品課程的了解和認識。底部的設(shè)計，加上版權(quán)和背景效果；是頁面看起來更加友好！ 三、設(shè)計目標目前，精品課程資源平臺建設(shè)，尤其是課程群平臺建設(shè)，是高校教學改革于建設(shè)的主要內(nèi)容之一，也是我校教學質(zhì)量工程內(nèi)容

16、之一。課程群建設(shè)的基本思想是把內(nèi)容聯(lián)系緊密、內(nèi)在邏輯性強、屬同個培養(yǎng)能力范疇的同一類課程作為個課程群組進行建設(shè)，打破課程內(nèi)容的歸屬性，從技能培養(yǎng)目標層次把握課程內(nèi)容的分配、實施、保障和技能的實現(xiàn)。計算機網(wǎng)絡(luò)課程群，主要包括計算機網(wǎng)絡(luò)、網(wǎng)絡(luò)管理、網(wǎng)絡(luò)安全技術(shù)、網(wǎng)絡(luò)工程設(shè)計與系統(tǒng)集成、網(wǎng)絡(luò)協(xié)議分析等課程，是網(wǎng)絡(luò)工程專業(yè)的主干課程 ，部分課程也是計算機科學與技術(shù)專業(yè)、軟件專業(yè)的必須主干課程。課程之間存在著明顯的前導、后繼關(guān)系，在教學內(nèi)容、教學模式、教學方法等各方面具有深厚的學緣關(guān)系。將這些課程組織為課程群進行建設(shè)并指導教學安排，使各門課程主講老師加強教研活動，以幫助學生構(gòu)建整個學科體系的知識架構(gòu)為目

17、標，調(diào)整各門課程的教學內(nèi)容，做好教學銜接，建立綜合教學平臺，拓寬教學資源的共享面，從而提高教學效果。本次計算機網(wǎng)絡(luò)課程群網(wǎng)站主要的設(shè)計目標就是建設(shè)計算機網(wǎng)絡(luò)課程群網(wǎng)站,為該課程群所包含的各門課程建設(shè)一個公共平臺。在網(wǎng)站的欄目中可以實現(xiàn)各個精品課程的欄目，在相關(guān)欄目下可以查看具體的課程信息；在平臺中首先介紹平臺建設(shè)的背景及組織結(jié)構(gòu)，課程群的公共資源以及每門課程的鏈接；其次是各門課程的詳細資源建設(shè)。在建設(shè)計算機網(wǎng)絡(luò)課程群網(wǎng)站達到界面友好，界面的整體布局合理；圖片和文字相結(jié)合看起來給人一種平易近人的感覺。四、需求分析4.1引言計算機網(wǎng)絡(luò)精品課程群網(wǎng)站是高校計算機學院精品課程建設(shè)的一項重要內(nèi)容，一個優(yōu)

18、秀的計算機網(wǎng)絡(luò)精品課程群網(wǎng)站在我校各類課程建設(shè)與教學中發(fā)展中發(fā)揮著不可或缺的重要作用。本校目前，精品課程資源平臺建設(shè)，尤其是課程群平臺建設(shè)，是高校教學改革于建設(shè)的主要內(nèi)容之一，也是我校教學質(zhì)量工程內(nèi)容之一。課程群建設(shè)的基本思想是把內(nèi)容聯(lián)系緊密、內(nèi)在邏輯性強、屬同個培養(yǎng)能力范疇的同一類課程作為個課程群組進行建設(shè)，打破課程內(nèi)容的歸屬性，從技能培養(yǎng)目標層次把握課程內(nèi)容的分配、實施、保障和技能的實現(xiàn)。計算機網(wǎng)絡(luò)課程群，主要包括計算機網(wǎng)絡(luò)、網(wǎng)絡(luò)管理、網(wǎng)絡(luò)安全技術(shù)、網(wǎng)絡(luò)工程設(shè)計與系統(tǒng)集成、網(wǎng)絡(luò)協(xié)議分析等課程，是網(wǎng)絡(luò)工程專業(yè)的主干課程 ，部分課程也是計算機科學與技術(shù)專業(yè)、軟件專業(yè)的必須主干課程。課程之間存在

19、著明顯的前導、后繼關(guān)系，在教學內(nèi)容、教學模式、教學方法等各方面具有深厚的學緣關(guān)系。將這些課程組織為課程群進行建設(shè)并指導教學安排，使各門課程主講老師加強教研活動，以幫助學生構(gòu)建整個學科體系的知識架構(gòu)為目標，調(diào)整各門課程的教學內(nèi)容，做好教學銜接，建立綜合教學平臺，拓寬教學資源的共享面，從而提高教學效果。4.2總體目標本系統(tǒng)網(wǎng)站能夠根據(jù)精品課程的需求，生成課程網(wǎng)站要求能夠滿足計算機學院精品課程網(wǎng)站的建設(shè)要求，能實現(xiàn)以下目標：1) 根據(jù)計算機網(wǎng)絡(luò)精品課程網(wǎng)站的建設(shè)，能夠在后臺根據(jù)需求完成欄目的創(chuàng)建，欄目內(nèi)容的添加和更改；2) 網(wǎng)站界面管理部分根據(jù)模板的方式，是的課程主頁的外觀、布局，使得網(wǎng)站界面看起來

20、更加友好和美觀；3) 具有交互功能。學生和老師都可以通過網(wǎng)站的在線答疑進行交流；4) 系統(tǒng)具有良好的性能，能夠穩(wěn)定高效的運行；5）具有良好的安全機制和擴展能力。4.3功能需求 為了讓精品課程網(wǎng)站系統(tǒng)真正的夠用，易用，好用；讓學生可以通過該網(wǎng)站來實現(xiàn)對精品課程的了解和認識，方便學生實現(xiàn)學習交流。1) 網(wǎng)站導航與網(wǎng)站欄目的管理部分；該部分支持管理員直接在后臺對精品課程網(wǎng)站欄目的文章內(nèi)容進行添加和修改和刪除操作，從而構(gòu)建一個與時俱進的網(wǎng)站；2) 說課錄像部分；說課錄像師精品課程建設(shè)一個非常重要的組成部分不能缺少，本部分只要是晚上對計算機網(wǎng)絡(luò)精品課程群網(wǎng)站的視頻上傳、更新和刪除；以及視頻播放的鏈接功能

21、；3) 網(wǎng)站界面的管理部分，為了使網(wǎng)站界面能夠是用戶看起來更加友好和美觀，在欄目和文章內(nèi)容添加一些背景顏色；4) 交互功能。學生可以通過在線答疑欄目里進行信息交互，如提交自己的問題，老師可以解答學生的問題，方便學生的學習和交流；4.4 性能需求計算機網(wǎng)絡(luò)課程群網(wǎng)站隨著精品課程的建設(shè)進程會變得越來越龐大，為了在較長的時間內(nèi)保證網(wǎng)快速、安全高效的運行；該計算機網(wǎng)絡(luò)課程群網(wǎng)站設(shè)計因滿足以下的性能需求。1) 采用Browser/Server結(jié)構(gòu)；訪問基于B/S方式的結(jié)構(gòu)，不必為每臺電腦都安裝客戶端，只需要打開瀏覽器就能夠非常方便快捷的訪問或者管理計算機網(wǎng)絡(luò)群網(wǎng)站。2) 具備權(quán)限管理功能，方便后臺的操作

22、和管理，很大地提高了計算機網(wǎng)絡(luò)精品課程群網(wǎng)站的安全性和管理效率。3) 易用性；刺痛界面友好，簡單易用，用戶需要按照要求和相關(guān)界面的欄目點擊操作，就能夠很方便的使用和管理課程網(wǎng)站。4) 容錯性；當用戶在使用過程中出現(xiàn)錯誤的操作時，并不會破壞系統(tǒng)的正常結(jié)構(gòu)，只要終止進行的錯誤操作，重新進入頁面；并不會影響用戶的操作。5) 具備良好的健壯性和兼容性，對于在運行過程中出現(xiàn)的一般錯誤能過自動地進行分析和處理，保證系統(tǒng)的正常運行；同時可以保證用戶在不同的瀏覽器上面都能夠訪問和管理操作。6) 易維護性；該網(wǎng)站系統(tǒng)運行的所需要的組件都放置在服務(wù)器端，因此系統(tǒng)的維護工作只需要在服務(wù)器端就可以完成，而不需要客戶端

23、的參與。這要簡化了系統(tǒng)的維護操作。五、設(shè)計思想首先分析網(wǎng)站的結(jié)構(gòu)；計算機網(wǎng)絡(luò)課程群網(wǎng)站是一個屬于UTF_8的結(jié)構(gòu)；HTML格式（文件擴展名為.htm）；采用CSS結(jié)構(gòu)設(shè)計模板風格，以便增加視圖的美觀效果。設(shè)計的思想如下：1. 明確建立網(wǎng)站的的目標和用戶的需求?；谟嬎銠C網(wǎng)絡(luò)課程群網(wǎng)站的設(shè)計與實現(xiàn)是展現(xiàn)計算機網(wǎng)絡(luò)專業(yè)相關(guān)課程的緊湊性和銜接性；因此就必須明確設(shè)計站點的目的性和滿足廣大學生的學習資源的需求；設(shè)計出的網(wǎng)站須能夠方便師生的查閱特別是為計算機網(wǎng)絡(luò)學者了解網(wǎng)絡(luò)知識提供服務(wù)。2. 計算機網(wǎng)絡(luò)課程群網(wǎng)站設(shè)計的總體方案主題鮮明。在明確網(wǎng)站設(shè)計的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體方案設(shè)計；對計算機網(wǎng)絡(luò)

24、群網(wǎng)站的整體風格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。要做到主題鮮明突出，就必須根據(jù)網(wǎng)站的設(shè)計要求，以簡單明確的語言和視圖結(jié)合在一起來體現(xiàn)計算機網(wǎng)絡(luò)課程群網(wǎng)站的主題；設(shè)計一些CSS結(jié)構(gòu)，展現(xiàn)出好的頁面風格，從而使網(wǎng)站充分表現(xiàn)出該網(wǎng)站應(yīng)具有的友好界面等特點。3. 確定計算機網(wǎng)絡(luò)課程群網(wǎng)站的整體風格。一個好的網(wǎng)站能夠給人留下深刻的印象，給人舒適和平易近人的感覺；所以為了使本次設(shè)計的網(wǎng)站也能夠盡量的達到此目標，設(shè)計該網(wǎng)站具有以下幾個特點：設(shè)計的精品課程群標志的Logo放置在網(wǎng)頁頂端，這樣特別突出計算機網(wǎng)絡(luò)課程群網(wǎng)站的基本特點；將本次網(wǎng)站設(shè)計內(nèi)容最核心的關(guān)鍵字提取出來作業(yè)主頁中的欄目內(nèi)容；同時每個欄目下

25、又有相應(yīng)的子欄目和頁面。再加上一些優(yōu)美的板式和一些美麗的圖片，使網(wǎng)站看起來更加友善，接近總體的設(shè)計要求。4.設(shè)計工具。本次綜合課設(shè)計算機網(wǎng)絡(luò)群網(wǎng)站的設(shè)計主要用到的工具Dreamweaver 8; PS cs；老李仿站工具等輔助工具。5. 可讀性好；在設(shè)計網(wǎng)站的過程中要使得界面友好趕緊，看起來舒適，文字的設(shè)計也很重要。不要設(shè)計擁擠不堪的文字覺得好像只有把腦袋鉆進去才能閱讀，要么深色的背景給人的感覺好像處于非常狹隘的空間里，而且讓人的心情感覺很壓抑；所以設(shè)計一個好的網(wǎng)站不僅要把文字的設(shè)計合理即不必過于太大和太小，看起來舒適就行；而且要把顏色給調(diào)配好！才能使網(wǎng)站看起來更加友善，可讀性才更高！總的來說

26、，本次計算機網(wǎng)絡(luò)群設(shè)計的思路基于以上幾點外就是，在主頁index.htm中含有七個欄目和一些列表內(nèi)容如：課程群介紹，課程負責人介紹，在線申請書和交流區(qū)BBS等。然后再每個欄目下建立幾個子欄目，在相應(yīng)的子欄目中放置不同的內(nèi)容，這樣方便用戶的需求進行選擇。 六、具體實現(xiàn)6.1 總體的實現(xiàn)經(jīng)過需求分析之后，計算機網(wǎng)絡(luò)課程群的網(wǎng)站具體的實現(xiàn)在網(wǎng)站首頁中實現(xiàn)課程的欄目如課程群優(yōu)化表，課程群說課錄像，計算機網(wǎng)絡(luò)，網(wǎng)絡(luò)管理，網(wǎng)絡(luò)安全技術(shù)，網(wǎng)絡(luò)協(xié)議分析，網(wǎng)絡(luò)程序設(shè)計；同時在首頁中實現(xiàn)課程群介紹、通知公告、五大課程、申請書和交流區(qū)的介紹和相關(guān)區(qū)域的內(nèi)容。計算機網(wǎng)絡(luò)課程群網(wǎng)站的總體實現(xiàn)具體如下圖所示：精品課程群網(wǎng)

27、站首頁BBS交流區(qū)申請書五大課程通知公告課程群介紹首頁欄目6.2數(shù)據(jù)庫的具體實現(xiàn)1) 后臺dede_co_htmls數(shù)據(jù)庫：2) dede_admin后臺管理員的數(shù)據(jù)庫：3） dede_addonarticle后臺的數(shù)據(jù)庫：4）dede_channeltype數(shù)據(jù)庫：6.3詳細的設(shè)計實現(xiàn)1) 程序結(jié)構(gòu)的設(shè)計；主頁模塊即計算機網(wǎng)絡(luò)精品課程群網(wǎng)站首頁的流程圖： 開始首頁欄目五大課程通知公告課程群介紹申請書BBS交流區(qū)精品課程群網(wǎng)站首頁 輸入網(wǎng)站網(wǎng)址結(jié)束點擊相關(guān)子欄目的流程圖如（點擊計算機網(wǎng)絡(luò)欄目）開始點擊計算機網(wǎng)絡(luò)欄目課程評價說課錄像課程主頁師資隊伍課程負責人課程描述建設(shè)規(guī)劃在線回答課程申報書學習

28、資源返回首頁 返回首頁的頁面在線回答頁面課程申報書頁面學習資源頁面課程評價頁面建設(shè)規(guī)劃頁面課程描述頁面課程主頁頁面說課錄像頁面師資隊伍頁面課程負責人頁面結(jié)束7、 附錄1) article_article.htm;2) article_article2.htm;3)index.htm;4)index_article.htm;5)index_aticle1.htm;6)index_aticle2.htm;7）list_article.htm;8)list_article1.htm;Index.htm主頁程序<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML

29、 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type

30、="text/css" href="dede:global.cfg_templets_skin/style/style.css"><script type="text/javascript" src="dede:global.cfg_templets_skin/style/jquery-1.2.6.pack.js"></script><title>dede:global.cfg_webname/</title></head><body>&

31、lt;div class="center"><div class="top_1"><div class="set_homepage"><a href="#" class="hrefs" onclick="this.style.behavior='url(#default#homepage)'this.setHomePage('');">設(shè)為首頁</a>&nbsp;|&nbsp

32、;<a href="">加入收藏</a></div><!-div class="page_name"><span class="page_name1">青島理工大學精品課程群</span><br/><span class="page_name2">會計學主干課程群</span></div-><param name="wmode" value="transpare

33、nt" /> <param name="wmode" value="opaque"> <EMBED width="400" height="90" src="dede:global.cfg_templets_skin/images/logo.swf" NAME="2" quality="high" wmode="transparent" pluginspage=" type="app

34、lication/x-shockwave-flash" style="margin:35px 0 0 10px;" ></EMBED></div><ul class="nav_1"><li><a href="dede:global.cfg_basehost/"id="hover">首頁</a></li>dede:channel row='7' type ='top' <li>

35、;<a href="field:typelink/">field:typename/</a></li>/dede:channel</ul><div class="list_1"><div class="class_intro"><div class="nav_more"><span class="nav_more1" style="text-indent:0;">課程群介紹<

36、/span><span class="nav_more2"><a href="/a/kechengqunjieshao/">更多>></a></span></div><div class="intro_con">dede:arclist flag=h typeid=58 row=1 titlelen='200' orderby=pubdate<a href="field:arcurl/

37、" target="_blank">field:id runphp='yes' $aid = me; $row = $GLOBALS'dsql'->GetOne("Select body From dede_addonarticle where aid='$aid' "); me = cn_substr(strip_tags("$row'body'"),550);/field:id.</a>/dede:arclist</div>

38、;</div><div class="banner"><!-img src="images/banner.jpg" /-><script type="text/javascript">var t = n = 0, count;$(document).ready(function()count=$("#banner_list a").length;$("#banner_list a:not(:first-child)").hide();$("

39、;#banner_info").html($("#banner_list a:first-child").find("img").attr('alt');$("#banner_info").click(function()window.open($("#banner_list a:first-child").attr('href'), "_blank");$("#banner li").click(function() var i =

40、 $(this).text() - 1;/獲取Li元素內(nèi)的值，即1，2，3，4n = i;if (i >= count) return;$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt');$("#banner_info").unbind().click(function()window.open($("#banner_list a").eq(i).attr('href

41、9;), "_blank")$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);document.getElementById("banner").style.background=""$(this).toggleClass("on");$(this).siblings().removeAttr("class"););t = s

42、etInterval("showAuto()", 2000);$("#banner").hover(function()clearInterval(t), function()t = setInterval("showAuto()", 2000););)function showAuto()n = n >=(count - 1) ? 0 : +n;$("#banner li").eq(n).trigger('click');</script><div id="ban

43、ner"><!-div id="banner_bg"></div-> <!-標題背景-><!-div id="banner_info"></div-> <!-標題-> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li><li>5</li> </u

44、l> <div id="banner_list"> <a href="" target="_blank"><img src="dede:global.cfg_templets_skin/images/20110630193405.jpg"/></a> <a href="" target="_blank"><img src="dede:global.cfg_templets_skin/images

45、/20110701183107.jpg"/></a> <a href="" target="_blank"><img src="dede:global.cfg_templets_skin/images/20110630193146.jpg"/></a> <a href="" target="_blank"><img src="dede:global.cfg_templets_skin/images/201

46、10630193231.jpg"/></a> <a href="" target="_blank"><img src="dede:global.cfg_templets_skin/images/20110630193753.jpg"/></a></div></div></div><div class="notice"><div class="nav_more"><sp

47、an class="nav_more1">通知公告</span><span class="nav_more2"><a href="/a/tongzhigonggao/">更多>></a></span></div><ul class="notice_con">dede:arclist row='8' titlelen='50' typeid='59

48、' <li><img src="/templets/moban/images/notice_drop.jpg" />&nbsp;<a href="field:arcurl/" />field:title/</a></li>/dede:arclist</ul></div></div><div class="list_2"><div class="course"

49、><div class="nav_more"><span class="nav_more1">五大課程</span></div><!-ul class="courses"><li><a href=""><img src="images/book.jpg" /></a></li><li><a href=""><img src

50、="images/book.jpg" /></a></li><li><a href=""><img src="images/book.jpg" /></a></li><li><a href=""><img src="images/book.jpg" /></a></li><li><a href="">&l

51、t;img src="images/book.jpg" /></a></li></ul-><div id="teach"> <TABLE border=0 cellPadding=0 cellSpacing=0 cellspace="0" ><TR><TD id=teach1 vAlign=top align=middle><table border="0" width="536" cellpaddi

52、ng="4" cellspacing="0"><tr><td><a href="28/middleacc/"><img src="dede:global.cfg_templets_skin/images/20110704054643.jpg" border="0" width="98" height="130"></a></td><td&

53、gt;<a href="28/middleman/"><img src="dede:global.cfg_templets_skin/images/20110704054719.jpg" border="0" width="98" height="130"></a></td><td><a href="28/senioracc/">&l

54、t;img src="dede:global.cfg_templets_skin/images/20110704054744.jpg" border="0" width="98" height="130"></a></td><td><a href="28/auditing/"><img src="dede:global.cfg_templets_skin/images/20110704054

55、808.jpg" border="0" width="98" height="130"></a></td><td><a href="28/accinfor/"><img src="dede:global.cfg_templets_skin/images/20110704054828.jpg" border="0" width="98" height="130"></a></td></tr></table></TD><