畢業(yè)論文班級網(wǎng)站設(shè)計

1、xx學(xué)院畢業(yè)設(shè)計（論文）題 目： 班級網(wǎng)站設(shè)計 系 部： 電子信息系 專 業(yè)： 計算機(jī)信息管理 學(xué) 號： 學(xué)生姓名： 指導(dǎo)教師： 職 稱： 2013年 月 日25摘 要隨著Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個方面發(fā)揮著重要的作用。Internet上發(fā)布信息主要是通過網(wǎng)站來實現(xiàn)的，獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。關(guān)鍵字：網(wǎng)站設(shè)計 班級網(wǎng)站

2、DreamweaverABSTRACTAlong with the rapid development of the Internet, the Internet becomes people to quickly get, release information and the important channel, it in politics, economy, life aspects plays an important role. On the Internet site information release mainly through, but also to obtain i

3、nformation on the Internet "Marine" according to certain retrieval will need to download information from the web site. Therefore website construction in the Internet application status of the obvious, it has become a government, enterprises informationization construction, which is an imp

4、ortant component in the more people's attention.Key words: website design the class web site Dreamweaver目 錄摘 要IABSTRACTII第一章緒論1§1.1選題背景1§1.2研究的目的及意義1§1.3 設(shè)計思想2§1.4主要研究內(nèi)容2第二章 軟件介紹及相關(guān)術(shù)語解釋3§2.1 Dreamweaver 簡介3§2.2 HTML簡史4§2.3 CSS樣式表概述4§2.4 CSS樣式表的優(yōu)勢5§2.5

5、 CSS樣式表在HTML中的實現(xiàn)5§2.6 超鏈接6第三章 網(wǎng)站的總體分析與設(shè)計8§3.1網(wǎng)站系統(tǒng)分析8§3.2主頁設(shè)計8§3.3詳細(xì)設(shè)計9結(jié)論25致謝26參考文獻(xiàn)27第一章緒論§1.1選題背景“上溯幾十年的歷史，電腦的發(fā)展走過了艱辛的歷程，而在網(wǎng)絡(luò)產(chǎn)生了以后，電腦才真正實現(xiàn)了最大的優(yōu)勢與價值。如今，網(wǎng)絡(luò)形成的是一種新興的文化，塑造的是一批新興的人類，成就的是一個新興的社會。它逐漸以它的快捷統(tǒng)率著整個世界通過網(wǎng)頁制作的學(xué)習(xí)，將提高我們的網(wǎng)絡(luò)知識水平，拓寬知識面，使我們的班級在新文化的簇?fù)硐伦聣殉砷L，造就我們一批新興的人類！”。21世紀(jì)是網(wǎng)絡(luò)的時

6、代，是信息的時代，互聯(lián)網(wǎng)正逐漸地改變我們的生活方式。人們很容易地接受網(wǎng)絡(luò)知識和在網(wǎng)上得到的信息。在網(wǎng)絡(luò)飛速發(fā)展的趨勢下，各類網(wǎng)站應(yīng)運(yùn)而生，學(xué)生對此問題有強(qiáng)烈的探究興趣；學(xué)校的校園網(wǎng)建設(shè)的完成，學(xué)校網(wǎng)站建設(shè)也完成了新一輪的更新，而各教學(xué)班級網(wǎng)頁建設(shè)正處于萌芽狀態(tài)，為了充實學(xué)校網(wǎng)站，加強(qiáng)學(xué)校班級網(wǎng)頁建設(shè)，因此我們提出了這樣一個課題，同時希望以此為載體，培養(yǎng)學(xué)生自主探索，主動提出問題，研究問題，并在一定程度上解決問題的能力，從而在提高學(xué)生自主學(xué)習(xí)，終身學(xué)習(xí)能力上做一些有益的探索。班級網(wǎng)站是一個班級與外界交流的窗口，也是本班同學(xué)相互聯(lián)系的平臺。在這個畢業(yè)離開的季節(jié)，希望做出一個特別的班級網(wǎng)站，能夠讓大

7、家了解我們的班級，同時也能讓同學(xué)們在各自離開后能夠方便的互相聯(lián)系。§1.2研究的目的及意義§1.2.1研究的目的隨著網(wǎng)絡(luò)的發(fā)展，人們通過網(wǎng)絡(luò)可以更方便更快捷交流，學(xué)習(xí)，教育，商業(yè)貿(mào)易等等。為了促進(jìn)本班同學(xué)能更好的學(xué)習(xí)交流，感情勾通，快捷通知，搞好班上工作，所以決定開發(fā)班級論壇平臺給同學(xué)們發(fā)表建議及意見，提供資源共享，布置班上各種計劃和任務(wù)，提供更好的學(xué)習(xí)與交流環(huán)境。§1.2.2研究的意義班級網(wǎng)站的建設(shè)有利于家校的溝通，班級網(wǎng)站建設(shè)有利于教師信息素養(yǎng)的提高，班級網(wǎng)站建設(shè)有利于學(xué)生信息素養(yǎng)的提高，班級網(wǎng)站建設(shè)有利于學(xué)生網(wǎng)絡(luò)道德教育。班級網(wǎng)站建設(shè)有利于信息的積累，班級站

8、建設(shè)有利于學(xué)生互相學(xué)習(xí)，班級網(wǎng)站建設(shè)有利于班集體的建設(shè)。§1.3 設(shè)計思想通過班級網(wǎng)站，全面宣傳，展示班級風(fēng)采、優(yōu)點(diǎn)與特色，發(fā)布班級的重大活動安排，增強(qiáng)同學(xué)之間的相互聯(lián)系，提高辦事效率。§1.4主要研究內(nèi)容本論文共分為三章，主要內(nèi)容如下：第一章主要介紹課題的選題背景，然后分別介紹課題研究的目的和意義， 另外簡單的概括一下本文的設(shè)計思想；第二章主要是軟件的介紹及相關(guān)的術(shù)語解釋，幫助我們更容易的了解網(wǎng)站的制作；第三章主要介紹網(wǎng)站的總體分析與設(shè)計，該網(wǎng)站分為五個頁面，主頁面和四個鏈接子頁面，然后分別詳細(xì)的介紹每個頁面的設(shè)計內(nèi)容，設(shè)計理念，是怎樣設(shè)計的等等。第二章 軟件介紹及相關(guān)術(shù)

9、語解釋§2.1 Dreamweaver 簡介Dreamweaver是美國Adobe公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver特點(diǎn)：1、 最佳的制作效率Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇螢?zāi)簧系念伾稍O(shè)定最接近的網(wǎng)頁安全色。對於選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dremweaver能與您喜愛的設(shè)計工

10、具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dremweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。2、 網(wǎng)站管理使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱，Dreamweaver 會自動更新所有連結(jié)。使用支援文字、HTML碼、HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。3、 無可比擬的控制能力Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯

11、同步的設(shè)計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。 所見即所得 Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。更多去 宿遷房產(chǎn)網(wǎng)。當(dāng)您正使用Dreamwea

12、ver在設(shè)計動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。 夢幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計分開，應(yīng)用於快速網(wǎng)頁更新和團(tuán)隊合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver設(shè)計的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets的動態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動畫的DHTML效果資料庫可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同

13、瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報告。§2.2 HTML簡史 HTML超文本標(biāo)記語言（Hypertext Markup Language） 網(wǎng)絡(luò)的資訊越來越多，網(wǎng)站須有引人注意的外觀，才能增加瀏覽人次，達(dá)到宣傳的目的。人們開始注意網(wǎng)頁的外觀，HTML亦因此變得更復(fù)雜、更具彈性。表格，原本是更整齊展現(xiàn)資料的工具，變成了排版工具。CSS的出現(xiàn)令以表格為基礎(chǔ)的外觀設(shè)計被視為過時。服務(wù)器方面的技術(shù)亦改變了網(wǎng)絡(luò)的構(gòu)造，使用者可以選擇其瀏覽方式、外觀。Flas

14、h的出現(xiàn)為設(shè)計師和媒體創(chuàng)作人開創(chuàng)了新路。除了引人的外觀之外，亦有一個重要的考慮點(diǎn)：網(wǎng)絡(luò)無障礙，即使用者能否容易讀取資訊。§2.3 CSS樣式表概述CSS是Cascading Style Sheet 的縮寫，譯作“層疊樣式表單”。它是一種在網(wǎng)頁制作過程中經(jīng)常用到的技術(shù)。CSS樣式表其實是一組樣式，它增加了更多的樣式定義方法來輔助HTML。樣式就是用一個指定的名字來標(biāo)識和保存的一組有關(guān)字符和段落格式的選項集合。其實，我們很早就已經(jīng)與“樣式”打過交道了。在Word的“格式”菜單中的“樣式項”里，提供了多種樣式，如“標(biāo)題1”、“標(biāo)題2”、“正文”等。只要選定文字，然后選擇不同的樣式，所選定的

15、文字就會自動改變字體、字號、對齊方式、字間距等。同樣，我們可以通過CSS來規(guī)定網(wǎng)頁元素的各種樣式，如顏色、位置、大小等。 §2.4 CSS樣式表的優(yōu)勢CSS樣式表是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。通過使用CSS樣式表，不僅可以對文字格式進(jìn)行設(shè)置，還可以更加精確地控制布局、字體、顏色、背景和其他圖文效果，從而避免在標(biāo)識字符和設(shè)置段落格式等操作時重復(fù)定義需要的樣式，提高網(wǎng)頁編輯的效率。§2.5 CSS樣式表在HTML中的實現(xiàn) 在HTML網(wǎng)頁中加入CSS并不是只有一種方法，在不同的情況下，可以采用不同的方法，比較常用的有下面幾中。§

16、;2.5.1嵌入式樣式表 嵌入式樣式表的實現(xiàn)很簡單，只需在每個要應(yīng)用樣式的HTML標(biāo)簽后寫上CSS屬性即可。例如要設(shè)置指定表格中的文字的樣式為紅色，字號為10pt，可在當(dāng)前表格的<table>標(biāo)記內(nèi)添加下面的代碼： <table style=”color:red;font-size:10pt”>。這種方式主要用于對具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。嵌入式樣式表不能充分體現(xiàn)出CSS樣式表的優(yōu)越性，所以應(yīng)用場合并不多。§2.5.2內(nèi)聯(lián)式樣式表 若想只對當(dāng)前頁面應(yīng)用樣式，就要使用內(nèi)聯(lián)式樣式表。所謂內(nèi)聯(lián)式樣式表就是把樣式表定義語句放在標(biāo)簽<sty

17、le type=”text/css”>和</style>中，設(shè)置時通常放在HTML代碼的<head>部分。§2.5.3外聯(lián)式樣式表 外聯(lián)式樣式表是將指定的樣式代碼放到一個擴(kuò)展名為.css的樣式文件中以方便其他網(wǎng)頁的調(diào)用。這種方式的優(yōu)點(diǎn)是可以通過一個.css文件管理網(wǎng)站中的多個網(wǎng)頁。如果要對網(wǎng)站中其他頁面進(jìn)行樣式引用，可以先把樣式用記事本定義成一個“.css”的文件。例如：打開記事本，將定義的名為h3的樣式代碼寫到記事本中，保存的文件名為example.css，代碼如下： h3 font-family:”黑體”; color:green; font-sty

18、le:italic; 引用時在網(wǎng)頁HTML代碼的<head>標(biāo)記后用<link rel=”stylesheet” href=”example.css”>引用這個樣式文件，在<body>部分的相應(yīng)內(nèi)容的前后加上<h3>和</h3>。§2.6 超鏈接 超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行連接的元素。各個網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個網(wǎng)站。所謂的超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系,這個目標(biāo)可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件

19、，甚至是一個應(yīng)用程序。而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。按照鏈接路徑的不同,網(wǎng)頁中超鏈接一般分為以下3種類型: 內(nèi)部鏈接,錨點(diǎn)鏈接和外部鏈接。超鏈接對象：如果按照使用對象的不同，網(wǎng)頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點(diǎn)鏈接，多媒體文件鏈接，空鏈接等。超鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接，如果單擊該鏈接，則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個位置，或打開一個新的網(wǎng)頁，或打開某一個新的WWW網(wǎng)站中的網(wǎng)頁。網(wǎng)頁超鏈接：網(wǎng)頁上的超

20、鏈接一般分為三種：一種是絕對URL的超鏈接。URL（Uniform Resource Locator）就是統(tǒng)一資源定位符，簡單地講就是網(wǎng)絡(luò)上的一個站點(diǎn)、網(wǎng)頁的完整路徑。http:/www.xxx. com/ 第二種是相對URL的超鏈接。如將自己網(wǎng)頁上的某一段文字或某標(biāo)題鏈接到同一網(wǎng)站的其他網(wǎng)頁上面去； 還有一種稱為同一網(wǎng)頁的超鏈接，這種超鏈接又叫做書簽。顏色：在網(wǎng)頁中，一般文字上的超鏈接都是藍(lán)色（當(dāng)然，用戶也可以自己設(shè)置成其他顏色），文字下面有一條下劃線。當(dāng)移動鼠標(biāo)指針到該超鏈接上時，鼠標(biāo)指針就會變成一只手的形狀，這時候用鼠標(biāo)左鍵單擊，就可以直接跳到與這個超鏈接相連接的網(wǎng)頁或WWW網(wǎng)站上去。如

21、果用戶已經(jīng)瀏覽過某個超鏈接，這個超鏈接的文本顏色就會發(fā)生改變（默認(rèn)為紫色）。只有圖像的超鏈接訪問后顏色不會發(fā)生變化。 第三章 網(wǎng)站的總體分析與設(shè)計§3.1網(wǎng)站系統(tǒng)分析根據(jù)前面的設(shè)計思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解，從內(nèi)容上可對網(wǎng)站總體布局如下：§3.2主頁設(shè)計 每個網(wǎng)站都會有一個首頁，就功能上而言，它代表著一個網(wǎng)站的風(fēng)格與特色，就網(wǎng)站架構(gòu)上而言，它代表了網(wǎng)站的第一層架構(gòu)，首頁是打開網(wǎng)站后在瀏覽器中現(xiàn)實的第一個頁面。§3.3詳細(xì)設(shè)計§3.3.1班級主頁<link href="aa.css" rel="s

22、tylesheet" type="text/css" /> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <td><div align="center" class="STYLE1"><a href="index.html">班級主頁</a></div></td&

23、gt; <td><div align="center" class="STYLE2">歡迎來到計信專101！</div></td> <table width="100%" height="828" border="0" cellpadding="0" cellspacing="0"> <td width="71%" rowspan="3" align=

24、"left" valign="top"><div align="center"> <p class="STYLE5">班級簡介</p> <td width="29%" height="28" align="left" valign="top"><div align="center"><span class="STYLE4"&g

25、t;最新相冊</span></div></td> <td height="170" align="left" valign="top"><img src="images/3.jpg" width="300" height="300" /></td> <td colspan="8" class="STYLE1"><strong>*本學(xué)期課程安排

26、*</strong></td> <td><div align="center"></div></td> <td><div align="center">星期一</div></td> <td><div align="center">上午</div></td> <td><div align="center">網(wǎng)站建設(shè)與管理<

27、/div></td> <td><div align="center"></div></td> <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <td width="20%" rowspan="2"><img src=&q

28、uot;images/5.jpg" width="215" height="110" /></td> <td width="20%" height="64"><div align="center" class="STYLE1">班長:林丹</div></td>設(shè)計理念網(wǎng)站首頁是一個網(wǎng)站的入口網(wǎng)頁，是網(wǎng)站建站時樹狀結(jié)構(gòu)的第一頁，即打開網(wǎng)站后看到的第一個頁面。由于首頁是一個網(wǎng)站的第一頁，也是最重要的一頁，

29、人們都將首頁作為體現(xiàn)班級形象的重中之重，也是網(wǎng)站所有信息的歸類目錄或分類縮影。所以，主頁既要簡潔清爽又要內(nèi)容豐富。本次主頁設(shè)計主要分為七個版塊：首先打開一個空白網(wǎng)頁，在頁面屬性中外觀屬性設(shè)置背景顏色，然后添加一個一行一列的表格作為總的布局版面，然后在下面的屬性欄中插入背景圖片。第一個版塊：在剛才的表格中再插入一個一行一列的表格，從插入工具欄中插入圖像，讓人們一目了然的就看出這是一個班級網(wǎng)站，該圖片展示了班級的主題“張揚(yáng)個性 放飛夢想”，班主任的寄語，四個靜凈竟敬，體現(xiàn)了同學(xué)們在干凈的學(xué)習(xí)環(huán)境中安靜的學(xué)習(xí)，即使面對激烈的學(xué)習(xí)競爭，仍然保持相敬相愛的團(tuán)結(jié)友情。第二個板塊：插入一個一行五列的表格，作

30、為網(wǎng)站的導(dǎo)航條，分別寫上班級主頁，班級介紹，班級新聞，班級相冊，班級留言，由此就可以看出該網(wǎng)站有五個鏈接網(wǎng)頁，分別詳細(xì)介紹班級網(wǎng)站的內(nèi)容。第三個版塊：插入一個一行一列的表格，在表格里輸入紅色的幾個大字歡迎來到計信專101！這樣，瀏覽網(wǎng)站的人們就能明確的知道這是計信專101的班級網(wǎng)站，從而激起想要深入了解該班級的好奇心。第四個版塊：插入一個一行兩列的表格，左邊的表格是文字介紹，右邊是圖片介紹。在左邊的表格中輸入簡單的班級簡介，用簡明扼要的言語概括一下班級整體形象，讓瀏覽者大體了解一下我們的班級是怎樣的一個集體。下面接著介紹班級最新文學(xué)，文學(xué)不是哲學(xué)或宗教，它不提供生存的理論，而是以它對世界的感悟

31、保障人類的精神永遠(yuǎn)有一個支點(diǎn)，這個支點(diǎn)即理想。不管是在精神迷茫的時候，還是在情緒晦暗的時候，或者在我們陷入迷狂的激動時刻，文學(xué)總會給予我們可靠的心靈指引。人們通過閱讀，以至聆聽和觀看文學(xué)，領(lǐng)悟到人生或世界的某種真相，點(diǎn)燃起心中生存的信念，尋找到個人的生存目標(biāo)從古至今，從中國到外國，概莫能外。文學(xué)最可貴之處在于它不管在什么時代什么環(huán)境中，總會讓人懂得生活并不是茫無頭緒的存在，而是充滿著可能性與選擇性的生機(jī)勃勃的過程。文學(xué)是人類價值生長的過程，也是人類文化的鏡子，它照耀著人類的靈魂，同時也照耀著人類的行為，使人成為人。所以，文學(xué)總是與人的生活融為一體的。然后接著介紹的是我們的班級目標(biāo)班級目標(biāo)可以讓

32、大家擁有共同的追求，能凝聚整個班集體的力量。如果沒有班級目標(biāo),猶如沒有羅盤向?qū)У姆?，隨波逐流，隨時隨地都有觸礁的危險。愛因斯坦說道：“我們體驗到一種最美好，最深刻的情感，就是探索奧秘的感覺，誰缺乏這種情感，誰就會喪失神奇的內(nèi)心的激動能力?！蓖ㄟ^設(shè)立班集體的探索目標(biāo)，激勵學(xué)生確立明確的奮斗目標(biāo)，喚起學(xué)生為實現(xiàn)目標(biāo)而不斷奮斗的欲望，使學(xué)生在完成目標(biāo)后獲得的探索和學(xué)習(xí)成績的快樂，也喚醒他們心靈里的自豪感、自尊感和自信感。因此目標(biāo)是使學(xué)生產(chǎn)生克服困難的動力和學(xué)習(xí)愿望的內(nèi)在力量的唯一源泉。通過設(shè)立班集體的目標(biāo)，還能夠促使學(xué)生將對集體的感情上升為對集體的責(zé)任，有助于學(xué)生集體責(zé)任感的形成。當(dāng)我們有了共同的

33、目標(biāo)后，我們就擁有了團(tuán)結(jié)奮斗的不懈努力。最后是我們的誓言，在這三年期間，我們要為我們共同的目標(biāo)不懈奮斗，我們用青春發(fā)下誓言，用我們的熱情活力，為我們的青春譜寫輝煌的樂章。把右邊的表格拆分成三行，第一行寫最新相冊，鏈接到班級相冊頁面，然后在下面的兩行分別插入圖片，渲染一下班級的文化氛圍。第五個版塊：插入一個兩行一列的表格，第一行插入文字本學(xué)期課程安排，然后把第二行拆分成三行八列，分別寫上這學(xué)期的課程表。第六個版塊：插入一個兩行五列的表格，然后合并第一列的單元格，插入圖片，在各個單元格沒分別寫上班干部的名字和擔(dān)任的職務(wù)。第七個版塊：插入一個一行一列的表格，然后寫上寫上班級的網(wǎng)站歸屬權(quán)。到此，班級主

34、頁就算是完成了，整體看上去，對本班級有了個大致的了解，可以看出班級的文化建設(shè)，課程安排，同學(xué)們的活潑熱情，班集體的團(tuán)結(jié)和諧。主頁采取了圖片和文字相結(jié)合的原理，圖文并茂，更好的傳遞了我們班級那種蓬勃朝氣的青春氣息。§3.3.2班級介紹<style type="text/css"><!-.STYLE1 font-size: 24px.STYLE2 font-size: 36px;color: #FF0000;-></style><link href="bb.css" rel="stylesheet

35、" type="text/css" /><style type="text/css">設(shè)計理念 這是主頁的一個連接，網(wǎng)站的一個子頁，主要是詳細(xì)介紹一下我們的班級。首先打開一個空白的網(wǎng)頁，然后在頁面屬性內(nèi)設(shè)置背景顏色，選取一個活潑可愛的淡粉色作為該網(wǎng)頁的背景顏色，給網(wǎng)頁增添了不少的朝氣。然后插入一個一行一列的表格在下面的屬性欄內(nèi)添加背景圖片，背景圖片選取的也是淡粉和淡藍(lán)相結(jié)合的帶有青春氣息的圖片。該頁面包含三個版塊： 第一個版塊：插入一個一行一列的表格，設(shè)置好長度寬度，然后插入和主頁第一板塊中一樣的圖片，目的是和主頁保持一致，看

36、上去整齊干凈。 第二個版塊：插入一個一行五列的表格，作為該網(wǎng)頁的導(dǎo)航條，便于鏈接到網(wǎng)站的各個子頁面，想要了解哪個頁面的內(nèi)容，只要單擊一下導(dǎo)航條，就會自動鏈接到想要看到的頁面，方便快捷。 第三個版塊：插入一個一行一列的表格，在下面的屬性欄中設(shè)置它的寬度，然后在該表格內(nèi)錄入詳細(xì)的班級介紹，簡單介紹一下我們的同學(xué)，班風(fēng)，班集體的相處，班級活動，同學(xué)們的學(xué)習(xí)熱情等等，班級介紹不在字多，追求一個“精”字。用簡單的言語概括出更全面的內(nèi)容，配以適當(dāng)?shù)膱D片和背景，會更加的吸引瀏覽者的眼球。§3.3.3班級新聞<table width="100%" height="

37、258" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"><p class="STYLE3">光榮榜</p> <p class="STYLE4">2012年3月，王洪同學(xué)獲得系部安全知識技能大賽二等獎。</p>

38、;設(shè)計理念 這是班級網(wǎng)站的第二個子頁面，主要介紹班級新聞。該網(wǎng)頁同樣和前兩個頁面一樣，首先新建一個空包的頁面，在頁面屬性一欄設(shè)置背景顏色，這次的背景顏色換成了淡綠色，給人一種清新的舒暢感覺。然后插入一個一行一列的表格，設(shè)置背景圖片，該背景圖片換成了淡藍(lán)色的山水圖，中間點(diǎn)綴了些星星，使頁面看上去簡單干凈。該頁面同樣也包含三個版塊： 第一個版塊：和前兩個頁面一樣，也是插入一個一行一列的表格，然后插入一樣的圖片。第二個版塊：導(dǎo)航條，用于鏈接各個頁面。第三個版塊：主要介紹班級的最新新聞，基本上也就相當(dāng)于一個光榮榜，把最近同學(xué)們參加了什么活動獲得了哪些獎項寫在上面，提高一下班級的素質(zhì)形象，激勵同學(xué)們踴躍

39、參加班級和學(xué)校組織的各項活動，積極的為班集體貢獻(xiàn)自己的力量，為班級爭光。該網(wǎng)頁設(shè)計繼續(xù)沿著前面的設(shè)計風(fēng)格做的，內(nèi)容有點(diǎn)過于單調(diào)了點(diǎn)，既然是班級新聞，不應(yīng)該單單的只是寫出了班級的光榮榜，還應(yīng)該在添加一些同學(xué)們發(fā)生的生活趣事，學(xué)習(xí)心得等等，以后會好好地學(xué)習(xí)，做出更漂亮的網(wǎng)站。 §3.3.4班級相冊<marquee width=955 scrolldelay=10 scrollamount=2 direction="right" behavior="alternate" onmouseover=stop() onmouseout=start()

40、><table width="977" height="348" border="0" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="161" valign="top"><img src="images/21.jpg" width="640" height=&q

41、uot;480" /></td>設(shè)計理念該頁面是網(wǎng)站的第三個子頁面，主要是班級相。首先是新建一個空白網(wǎng)頁，在下面的頁面屬性中設(shè)置背景顏色，該背景顏色選取的是亮黃色的，然后插入一個一行一列的表格，同樣該頁面還是分為三個版塊：第一個和第二個版塊和前面的三個頁面一樣，圖片和布局也是采用一樣的來設(shè)計，是整個網(wǎng)站瀏覽起來一目了然。第三個版塊：這個才是該網(wǎng)頁設(shè)計的重點(diǎn)，插入一個一行十二列的表格，分別插入十二張班級、學(xué)校的照片，把表格設(shè)置成向右方向滑動的動感相冊，簡單形象。班級相冊就像一本完整的書，甚至是一系列的書，記錄校園成長的歷程。每張照片都能夠配上你親自書寫的畫外音，可以是

42、圖說，也可以是拍攝時的心情。班級相冊是一本記錄青春和友誼的紀(jì)念冊，記錄的是校園的點(diǎn)點(diǎn)滴滴，記錄的是同學(xué)之間的友誼?？梢哉f班級相冊是歲月的寫真，記憶的回顧，也是情感的醞釀天地。班級相冊就是一段封存的大學(xué)生活的記憶，包含了我們大學(xué)生活的美好回憶，以后我們或許沒有機(jī)會再見，但是當(dāng)我們翻開相冊，這些曾經(jīng)的回憶都會讓我們想起以往的種種，是我們回憶往事的載體和線索。該頁面采取動靜結(jié)合的方式，形象生動的展現(xiàn)了班級相冊的內(nèi)容，看著照片慢慢的往右滑動，一幅幅不同的照片出現(xiàn)在眼前，倍感親切，放佛又回到了當(dāng)時的情景。該相冊不但有班級活動是拍的照片，還有我們學(xué)校的照片，宿舍照片，既能了解了我們的班級同時也看到了學(xué)校和

43、宿舍的面貌。§3.3.5班級留言<style type="text/css"><!-.STYLE4 font-size: 24px-></style><link href="ee.css" rel="stylesheet" type="text/css" /><style type="text/css"> <table width="95%" height="314" border

44、="0" cellpadding="0" cellspacing="0"> <tr><td valign="top"><p align="center" class="STYLE4">艾米：你若安好，便是晴天。</p設(shè)計理念 該頁面是網(wǎng)站的最后一個子頁面，主要是同學(xué)們的班級留言設(shè)計。首先新建一個空白網(wǎng)頁，在下面的頁面屬性欄中設(shè)置外觀屬性中的背景顏色，改背景顏色設(shè)置成了淡綠色的，代表著我們班級有著像小草一樣的旺盛生命力。然后插入一

45、個一行一列的表格，在下面的屬性欄中添加背景圖片，背景圖片同樣是淡綠色的，上面印有四葉草，四葉草是國際公認(rèn)為幸運(yùn)的象征， 它的每片葉子都有著不同的意義， 當(dāng)中包含了人生夢寐以求的四樣?xùn)|西： 名譽(yù)、財富、愛情及健康，倘若同時擁有這些東西，那就是幸運(yùn)了，我希望我們班的同學(xué)都能幸福。該頁面同樣也被分成了三個版塊：第一個版塊：插入一個一行一列的表格，然后在表格內(nèi)插入圖片，設(shè)置好高度和寬度。第二個版塊：插入一個一行五列的表格作為導(dǎo)航條，分別寫上班級主頁，班級介紹，班級新聞，班級相冊，班級留言，然后分別鏈接到各個頁面，設(shè)置CSS樣式a:link color: #FF0000;a:visited color: