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

1、xx學(xué)院畢業(yè)設(shè)計(jì)（論文）題 目： 班級(jí)網(wǎng)站設(shè)計(jì) 系 部： 電子信息系 專(zhuān) 業(yè)： 計(jì)算機(jī)信息管理 學(xué) 號(hào)： 學(xué)生姓名： 指導(dǎo)教師： 職 稱(chēng)： 2013年 月 日25摘 要隨著Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。Internet上發(fā)布信息主要是通過(guò)網(wǎng)站來(lái)實(shí)現(xiàn)的，獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來(lái)。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見(jiàn)，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。關(guān)鍵字：網(wǎng)站設(shè)計(jì) 班級(jí)網(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è)計(jì)思想2§1.4主要研究?jī)?nèi)容2第二章 軟件介紹及相關(guān)術(shù)語(yǔ)解釋3§2.1 Dreamweaver 簡(jiǎn)介3§2.2 HTML簡(jiǎn)史4§2.3 CSS樣式表概述4§2.4 CSS樣式表的優(yōu)勢(shì)5§2.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23、gt; <td><div align="center" class="STYLE2">歡迎來(lái)到計(jì)信專(zhuān)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">班級(jí)簡(jiǎn)介</p> <td width="29%" height="28" align="left" valign="top"><div align="center"><span class="STYLE4"&g

25、t;最新相冊(cè)</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">班長(zhǎng):林丹</div></td>設(shè)計(jì)理念網(wǎng)站首頁(yè)是一個(gè)網(wǎng)站的入口網(wǎng)頁(yè)，是網(wǎng)站建站時(shí)樹(shù)狀結(jié)構(gòu)的第一頁(yè)，即打開(kāi)網(wǎng)站后看到的第一個(gè)頁(yè)面。由于首頁(yè)是一個(gè)網(wǎng)站的第一頁(yè)，也是最重要的一頁(yè)，

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

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

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

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

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

34、頁(yè)就算是完成了，整體看上去，對(duì)本班級(jí)有了個(gè)大致的了解，可以看出班級(jí)的文化建設(shè)，課程安排，同學(xué)們的活潑熱情，班集體的團(tuán)結(jié)和諧。主頁(yè)采取了圖片和文字相結(jié)合的原理，圖文并茂，更好的傳遞了我們班級(jí)那種蓬勃朝氣的青春氣息。§3.3.2班級(jí)介紹<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è)計(jì)理念 這是主頁(yè)的一個(gè)連接，網(wǎng)站的一個(gè)子頁(yè)，主要是詳細(xì)介紹一下我們的班級(jí)。首先打開(kāi)一個(gè)空白的網(wǎng)頁(yè)，然后在頁(yè)面屬性?xún)?nèi)設(shè)置背景顏色，選取一個(gè)活潑可愛(ài)的淡粉色作為該網(wǎng)頁(yè)的背景顏色，給網(wǎng)頁(yè)增添了不少的朝氣。然后插入一個(gè)一行一列的表格在下面的屬性欄內(nèi)添加背景圖片，背景圖片選取的也是淡粉和淡藍(lán)相結(jié)合的帶有青春氣息的圖片。該頁(yè)面包含三個(gè)版塊： 第一個(gè)版塊：插入一個(gè)一行一列的表格，設(shè)置好長(zhǎng)度寬度，然后插入和主頁(yè)第一板塊中一樣的圖片，目的是和主頁(yè)保持一致，看

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

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

39、參加班級(jí)和學(xué)校組織的各項(xiàng)活動(dòng)，積極的為班集體貢獻(xiàn)自己的力量，為班級(jí)爭(zhēng)光。該網(wǎng)頁(yè)設(shè)計(jì)繼續(xù)沿著前面的設(shè)計(jì)風(fēng)格做的，內(nèi)容有點(diǎn)過(guò)于單調(diào)了點(diǎn)，既然是班級(jí)新聞，不應(yīng)該單單的只是寫(xiě)出了班級(jí)的光榮榜，還應(yīng)該在添加一些同學(xué)們發(fā)生的生活趣事，學(xué)習(xí)心得等等，以后會(huì)好好地學(xué)習(xí)，做出更漂亮的網(wǎng)站。 §3.3.4班級(jí)相冊(cè)<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è)計(jì)理念該頁(yè)面是網(wǎng)站的第三個(gè)子頁(yè)面，主要是班級(jí)相。首先是新建一個(gè)空白網(wǎng)頁(yè)，在下面的頁(yè)面屬性中設(shè)置背景顏色，該背景顏色選取的是亮黃色的，然后插入一個(gè)一行一列的表格，同樣該頁(yè)面還是分為三個(gè)版塊：第一個(gè)和第二個(gè)版塊和前面的三個(gè)頁(yè)面一樣，圖片和布局也是采用一樣的來(lái)設(shè)計(jì)，是整個(gè)網(wǎng)站瀏覽起來(lái)一目了然。第三個(gè)版塊：這個(gè)才是該網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)，插入一個(gè)一行十二列的表格，分別插入十二張班級(jí)、學(xué)校的照片，把表格設(shè)置成向右方向滑動(dòng)的動(dòng)感相冊(cè)，簡(jiǎn)單形象。班級(jí)相冊(cè)就像一本完整的書(shū)，甚至是一系列的書(shū)，記錄校園成長(zhǎng)的歷程。每張照片都能夠配上你親自書(shū)寫(xiě)的畫(huà)外音，可以是

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

43、宿舍的面貌。§3.3.5班級(jí)留言<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è)計(jì)理念 該頁(yè)面是網(wǎng)站的最后一個(gè)子頁(yè)面，主要是同學(xué)們的班級(jí)留言設(shè)計(jì)。首先新建一個(gè)空白網(wǎng)頁(yè)，在下面的頁(yè)面屬性欄中設(shè)置外觀(guān)屬性中的背景顏色，改背景顏色設(shè)置成了淡綠色的，代表著我們班級(jí)有著像小草一樣的旺盛生命力。然后插入一

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