班級網(wǎng)站設(shè)計(jì)

I 班級網(wǎng)站設(shè)計(jì) 摘 要 隨著 Internet 飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。 Internet 上發(fā)布信息主要是通過網(wǎng)站來實(shí)現(xiàn)的，獲取信息也是要 在 Internet“ 海洋 ” 中按照一定的檢索方式將所需要的信息從網(wǎng)站上下載下來。因此網(wǎng)站建設(shè)在 Internet 應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。 關(guān)鍵字 ： 網(wǎng)站設(shè)計(jì) 班級網(wǎng)站 Dreamweaver II ABSTRACT Along 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 information 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 important component in the more peoples attention. Key words: website design the class web site Dreamweaver III 目 錄 摘 要 . I ABSTRACT . II 第一章緒論 . 1 1.1 選題背景 . 1 1.2 研究的目的及意義 . 1 1.3 設(shè)計(jì)思想 . 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 CSS 樣式表在 HTML中的實(shí)現(xiàn) . 5 2.6 超鏈接 . 6 第三章 網(wǎng)站的總體分析與設(shè)計(jì) . 8 3.1 網(wǎng)站系統(tǒng)分析 . 8 3.2 主頁設(shè)計(jì) . 8 3.3 詳細(xì)設(shè)計(jì) . 9 結(jié)論 . 23 致謝 . 24 參考文獻(xiàn) . 25 1 第一章緒論 1.1 選題背景 “上溯幾十年的歷史，電腦的發(fā)展走過了艱辛的歷程，而在網(wǎng)絡(luò)產(chǎn)生了以后，電腦才真正實(shí)現(xiàn)了最大的優(yōu)勢與價(jià)值。如今，網(wǎng)絡(luò)形成的是一種新興的文化，塑造的是一批新興的人類，成就的是一個(gè)新興的社會(huì)。它逐漸以它的快捷統(tǒng)率著整個(gè)世界通過網(wǎng)頁制作的學(xué)習(xí)，將提高我們的網(wǎng)絡(luò)知識水平，拓寬知識面，使我們的班級在新文化的簇?fù)硐伦聣殉砷L，造就我們一批新興的人類！”。 21世紀(jì)是網(wǎng)絡(luò)的時(shí)代，是信息的時(shí)代，互聯(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)，為了充實(shí)學(xué)校網(wǎng)站，加強(qiáng)學(xué)校班級網(wǎng)頁建設(shè)，因此我們提出了這樣一個(gè)課題，同時(shí)希望以此為載體，培養(yǎng)學(xué)生自主探索，主動(dòng)提出問題，研究問題，并在一定程度上解決問題的能力，從而在提高學(xué)生自主學(xué)習(xí)，終身學(xué)習(xí)能力上做一些有益的探索。 班級網(wǎng)站是一個(gè)班級與外界交流的窗口，也是本班同學(xué)相互聯(lián)系的平臺。在這個(gè)畢業(yè)離開的季節(jié)，希望做出一個(gè)特別的班級網(wǎng)站，能夠讓大家了 解我們的班級，同時(shí)也能讓同學(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ā)表建議及意見，提供資源共享，布置班上各種計(jì)劃和任務(wù)，提供更好的學(xué)習(xí)與交流環(huán)境。 2 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è)有利于信息的積累 ， 班級站建設(shè)有利于學(xué)生互相學(xué)習(xí) ， 班級網(wǎng)站建設(shè)有利于班集體的建設(shè) 。 1.3 設(shè)計(jì)思想 通過 班級 網(wǎng)站，全面宣傳，展示 班級 風(fēng)采、優(yōu)點(diǎn)與特色，發(fā)布 班級 的重大活動(dòng)安排，增強(qiáng) 同學(xué) 之間的 相互 聯(lián)系，提高辦事效率。 1.4 主要研究內(nèi)容 本論文共分為三章，主要內(nèi)容如下： 第一章主要介紹課題的選題背景，然后分別介紹課題研究的目的和意義， 另外簡單的概括一下本文的設(shè)計(jì)思想；第二章主要是軟件的介紹及相關(guān)的術(shù)語解釋，幫助我們更容易的了解網(wǎng)站的制作；第三章主要介紹網(wǎng)站的總 體分析與設(shè)計(jì)，該網(wǎng)站分為五個(gè)頁面，主頁面和四個(gè)鏈接子頁面，然后分別詳細(xì)的介紹每個(gè)頁面的設(shè)計(jì)內(nèi)容，設(shè)計(jì)理念，是怎樣設(shè)計(jì)的等等。 3 第二章 軟件介紹及相關(guān)術(shù)語解釋 2.1 Dreamweaver 簡介 Dreamweaver 是美國 Adobe 公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。 Dreamweaver 特點(diǎn)： 1、 最佳的制作效率 Dreamweaver可以用最快速的方式將 Fireworks， FreeHand，或 Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇螢?zāi)簧系念伾稍O(shè)定最接近的網(wǎng)頁安全色。對於選單，快捷鍵與格式控制，都只要一個(gè)簡單步驟便可完成。 Dremweaver 能與您喜愛的設(shè)計(jì)工具，如 Playback Flash， Shockwave 和外掛模組等搭配，不需離開Dremweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟 Firework或 Photoshop 來進(jìn)行編輯與設(shè)定圖檔的最佳化。 2、 網(wǎng)站管理 使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱， Dreamweaver 會(huì)自動(dòng)更新所有連結(jié)。使用支援文字、 HTML 碼、 HTML屬性標(biāo)簽和一般語法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡單。 3、 無可比擬的控制能力 Dreamweaver是唯一提供 Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含 HomeSite和 BBEdit等主流文字編輯器。幀 (frames)和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡單的選擇單格、行、欄 或作未連續(xù)之選取。甚至可以排序或格式化表格群組， Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換 4 成表格的圖層以拖拉置放的方式進(jìn)行版面配置。 所見即所得 Dreamweaver 成功整合動(dòng)態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給 Third-party廠商，包含 ASP， Apache， BroadVision， Cold Fusion， iCAT， Tango與自行發(fā)展的應(yīng)用軟體。 更多去 宿遷房產(chǎn)網(wǎng) 。 當(dāng)您正使用 Dreamweaver 在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁時(shí)，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。 夢幻樣版和 XML Dreamweaver 將內(nèi)容與設(shè)計(jì)分開，應(yīng)用於快速網(wǎng)頁更新和團(tuán)隊(duì)合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出 XML內(nèi)容。 全方位的呈現(xiàn)利用 Dreamweaver 設(shè)計(jì)的網(wǎng)頁，可以全方位的呈現(xiàn)在任何平臺的熱門瀏覽器上。對于cascading style sheets 的動(dòng)態(tài) HTML支援和鼠標(biāo)換圖 效果，聲音和動(dòng)畫的 DHTML效果資料庫可在 Netscape 和 Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從 Dreamweaver 的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。 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è)計(jì)被視為過時(shí)。服務(wù)器方面的技術(shù)亦改變了網(wǎng)絡(luò)的構(gòu)造，使用者可以選擇其瀏覽方式、外觀。 Flash 的出現(xiàn)為設(shè)計(jì)師和媒體創(chuàng)作人開創(chuàng)了新路。除了引人的外觀之外，亦有一個(gè)重要的考慮點(diǎn)：網(wǎng)絡(luò)無障礙，即使用者能否容易讀取資訊。 2.3 CSS 樣式表概述 5 CSS 是 Cascading Style Sheet 的縮寫，譯作“層疊樣式表單”。它是一種在網(wǎng)頁制作過程中經(jīng)常用到的技術(shù)。 CSS樣式表其實(shí)是一組樣式，它增加了更多的樣式定義方法 來輔助 HTML。樣式就是用一個(gè)指定的名字來標(biāo)識和保存的一組有關(guān)字符和段落格式的選項(xiàng)集合。其實(shí)，我們很早就已經(jīng)與“樣式”打過交道了。在 Word的“格式”菜單中的“樣式項(xiàng)”里，提供了多種樣式，如“標(biāo)題 1”、“標(biāo)題 2”、“正文”等。只要選定文字，然后選擇不同的樣式，所選定的文字就會(huì)自動(dòng)改變字體、字號、對齊方式、字間距等。同樣，我們可以通過 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è)置段落格式等操作時(shí)重復(fù)定義需要的樣式，提高網(wǎng)頁編輯的效率。 2.5 CSS 樣式表在 HTML 中的實(shí)現(xiàn) 在 HTML網(wǎng)頁中加入 CSS并不是只有一種方法，在不同的情況下，可以采用不同的方法，比較常用的有下面幾中。 2.5.1 嵌入式樣式表 嵌入式樣式表的實(shí)現(xiàn)很簡單，只需在每個(gè)要應(yīng)用樣式的 HTML標(biāo)簽后寫上 CSS屬性即可。例如要設(shè)置指定表格中的文字的樣式為紅色，字號為 10pt，可在當(dāng)前表 格的 標(biāo)記內(nèi)添加下面的代碼： 。這種方式主要用于對具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。嵌入式樣式表不能充分體現(xiàn)出 CSS 樣式表的優(yōu)越性，所以應(yīng)用場合并不多。 6 2.5.2 內(nèi)聯(lián)式樣式表 若想只對當(dāng)前頁面應(yīng)用樣式，就要使用內(nèi)聯(lián)式樣式表。所謂內(nèi)聯(lián)式樣式表就是把樣式表定義語句放在標(biāo)簽 和 中，設(shè)置時(shí)通常放在HTML 代碼的 部分。 2.5.3 外 聯(lián)式樣式表 外聯(lián)式樣式表是將指定的樣式代碼放到一個(gè)擴(kuò)展名為 .css的樣式文件中以方便其他網(wǎng)頁的調(diào)用。這種方式的優(yōu)點(diǎn)是可以通過一個(gè) .css文件管理網(wǎng)站中的多個(gè)網(wǎng)頁。如果要對網(wǎng)站中其他頁面進(jìn)行樣式引用，可以先把樣式用記事本定義成一個(gè)“ .css”的文件。例如：打開記事本，將定義的名為 h3的樣式代碼寫到記事本中，保存的文件名為 example.css，代碼如下： h3 font-family:”黑體” ； color:green； font-style:italic； 引用時(shí)在網(wǎng)頁 HTML 代碼的 標(biāo)記 后用 引用這個(gè)樣式文件，在 部分的相應(yīng)內(nèi)容的前后加上 和。 2.6 超鏈接 超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系 ,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁 ,也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超 鏈接的對象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后 ,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。按照鏈接路徑的不同 ,網(wǎng)頁中超鏈接一般分為以下 3種類型 : 內(nèi)部鏈接 ,錨點(diǎn)鏈接和外部鏈接。超鏈接對象：如果按照使用對象的不同，網(wǎng)頁中的 7 鏈接又可以分為：文本超鏈接，圖像超鏈接， E-mail鏈接，錨點(diǎn)鏈接，多媒體文件鏈接，空鏈接等。超鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實(shí)現(xiàn)鏈接，如果單擊該鏈接，則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個(gè)位置，或打開一個(gè)新的網(wǎng)頁，或打開某一個(gè) 新的 WWW網(wǎng)站中的網(wǎng)頁。網(wǎng)頁超鏈接：網(wǎng)頁上的超鏈接一般分為三種：一種是絕對 URL 的超鏈接。 URL（ Uniform Resource Locator）就是統(tǒng)一資源定位符，簡單地講就是網(wǎng)絡(luò)上的一個(gè)站點(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)移動(dòng)鼠標(biāo)指針到該超鏈接上時(shí)，鼠標(biāo)指針就會(huì)變成一只手的形狀，這時(shí)候用鼠標(biāo)左鍵單擊，就可以直接跳到與這個(gè)超鏈接相連接的網(wǎng)頁或 WWW網(wǎng)站上去。如果用戶已經(jīng)瀏覽過某個(gè)超鏈接，這個(gè)超鏈接的文本顏色就會(huì)發(fā)生改變（默認(rèn)為紫色）。只有圖像的超鏈接訪問后顏色不會(huì)發(fā)生變化。 8 第三章 網(wǎng)站的總體分析與設(shè)計(jì) 3.1 網(wǎng)站系統(tǒng)分析 根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對網(wǎng)站進(jìn)行分解，從內(nèi)容上可對網(wǎng)站 總體布局如下 ： 3.2 主頁設(shè)計(jì) 每個(gè)網(wǎng)站都會(huì)有一個(gè)首頁，就功能上而言，它代表著一個(gè)網(wǎng)站的風(fēng)格與特色， 就網(wǎng)站架構(gòu)上而言，它代表了網(wǎng)站的第一層架構(gòu)，首頁是打開網(wǎng)站后在瀏覽器中現(xiàn)實(shí)的第一個(gè)頁面。 9 3.3 詳細(xì)設(shè)計(jì) 3.3.1 班級主頁 10 班級主頁 歡迎來到計(jì)信專 101！ 班級簡介 最新相冊 * 本 學(xué) 期 課 程 安 排* 星期一 上午 網(wǎng)站建設(shè)與管理 11 班長 :林丹 設(shè)計(jì)理念 網(wǎng)站 首頁是一個(gè)網(wǎng)站的入口網(wǎng)頁，是網(wǎng)站建站時(shí) 樹狀結(jié)構(gòu) 的第一頁，即打開 網(wǎng)站后看到的第一個(gè)頁面。由于首頁是一個(gè)網(wǎng)站的第一頁，也是最重要的一頁 ， 人們都將首頁作為體現(xiàn) 班級 形象的重中之重，也是 網(wǎng)站 所有信息的歸類目錄或分類縮 影。 所以，主頁既要簡潔清爽又要內(nèi)容豐富。本次主頁設(shè)計(jì)主要分為七個(gè)版塊： 首先打開一個(gè)空白網(wǎng)頁，在頁面屬性中外觀屬性設(shè)置背景顏色， 然后添加一個(gè)一行一列的表格作為總的布局版面，然后在下面的屬性欄中插入背景圖片 。 12 第一個(gè)版塊：在剛才的表格中再插入一個(gè)一行一列的表格，從插入工具欄中插入圖像 ， 讓人們一目了然的就看出這是一個(gè)班級網(wǎng)站，該圖片展示了班級的主題“張揚(yáng)個(gè)性 放飛夢想”，班主任的寄語，四個(gè)靜凈竟敬，體現(xiàn)了同學(xué)們在干凈的學(xué)習(xí)環(huán)境中安靜的學(xué)習(xí)，即使面對激烈的學(xué)習(xí)競爭，仍然 保持相敬相愛的團(tuán)結(jié)友情。 第二個(gè)板塊：插入一個(gè)一行五列的表格，作為網(wǎng)站的導(dǎo)航條，分別寫上班級主頁，班級介紹，班級新聞，班級相冊，班級留言，由此就可以看出該網(wǎng)站有五個(gè)鏈接網(wǎng)頁，分別詳細(xì)介紹班級網(wǎng)站的內(nèi)容。 第三個(gè)版塊：插入一個(gè)一行一列的表格，在表格里輸入紅色的幾個(gè)大字歡迎來到計(jì)信專 101！這樣，瀏覽網(wǎng)站的人們就能明確的知道這是計(jì)信專 101 的班級網(wǎng)站，從而激起想要深入了解該班級的好奇心。 第四個(gè)版塊：插入一個(gè)一行兩列的表格，左邊的表格是文字介紹，右邊是圖片介紹。在左邊的表格中輸入簡單的班級簡介，用簡明扼要的 言語概括一下班級整體形象，讓瀏覽者大體了解一下我們的班級是怎樣的一個(gè)集體。下面接著介紹班級最新文學(xué)，文學(xué)不是哲學(xué)或宗教，它不提供生存的理論，而是以它對世界的感悟保障人類的精神永遠(yuǎn)有一個(gè)支點(diǎn)，這個(gè)支點(diǎn)即理想。不管是在精神迷茫的時(shí)候，還是在情緒晦暗的時(shí)候，或者在我們陷入迷狂的激動(dòng)時(shí)刻，文學(xué)總會(huì)給予我們可靠的心靈指引。人們通過閱讀，以至聆聽和觀看文學(xué)，領(lǐng)悟到人生或世界的某種真相，點(diǎn)燃起心中生存的信念，尋找到個(gè)人的生存目標(biāo) 從古至今，從中國到外國，概莫能外。文學(xué)最可貴之處在于它不管在什么時(shí)代什么環(huán)境中，總會(huì)讓人懂 得生活并不是茫無頭緒的存在，而是充滿著可能性與選擇性的生機(jī)勃勃的過程。文學(xué)是人類價(jià)值生長的過程，也是人類文化的鏡子，它照耀著人類的靈魂，同時(shí)也照耀著人類的行為，使人成為人。所以，文學(xué)總是與人的生活融為一體的。 然后接著介紹的是我們的班級目標(biāo) 班級目標(biāo)可以讓大家 13 擁有共同的追求，能凝聚整個(gè)班集體的力量。如果沒有班級目標(biāo) ,猶如沒有羅盤向?qū)У姆?，隨波逐流，隨時(shí)隨地都有觸礁的危險(xiǎn)。愛因斯坦說道： “ 我們體驗(yàn)到一種最美好，最深刻的情感，就是探索奧秘的感覺，誰缺乏這種情感，誰就會(huì)喪失神奇的內(nèi)心的激動(dòng)能力。 ” 通過設(shè)立班集體的探 索目標(biāo)，激勵(lì)學(xué)生確立明確的奮斗目標(biāo)，喚起學(xué)生為實(shí)現(xiàn)目標(biāo)而不斷奮斗的欲望，使學(xué)生在完成目標(biāo)后獲得的探索和學(xué)習(xí)成績的快樂，也喚醒他們心靈里的自豪感、自尊感和自信感。因此目標(biāo)是使學(xué)生產(chǎn)生克服困難的動(dòng)力和學(xué)習(xí)愿望的內(nèi)在力量的唯一源泉。通過設(shè)立班集體的目標(biāo)，還能夠促使學(xué)生將對集體的感情上升為對集體的責(zé)任，有助于學(xué)生集體責(zé)任感的形成。當(dāng)我們有了共同的目標(biāo)后，我們就擁有了團(tuán)結(jié)奮斗的不懈努力。 最后是我們的誓言，在這三年期間，我們要為我們共同的目標(biāo)不懈奮斗，我們用青春發(fā)下誓言，用我們的熱情活力，為我們的青春譜寫輝煌的樂章。把 右邊的表格拆分成三行，第一行寫最新相冊，鏈接到班級相冊頁面，然后在下面的兩行分別插入圖片，渲染一下班級的文化氛圍。 第五個(gè)版塊：插入一個(gè)兩行一列的表格，第一行插入文字本學(xué)期課程安排，然后把第二行拆分成三行八列，分別寫上這學(xué)期的課程表。 第六個(gè)版塊：插入一個(gè)兩行五列的表格，然后合并第一列的單元格，插入圖片，在各個(gè)單元格沒分別寫上班干部的名字和擔(dān)任的職務(wù)。 第七個(gè)版塊：插入一個(gè)一行一列的表格，然后寫上寫上班級的網(wǎng)站歸屬權(quán)。 到此，班級主頁就算是完成了，整體看上去，對本班級有了個(gè)大致的了解，可以看出班級的文化建設(shè) ，課程安排，同學(xué)們的活潑熱情，班集體的團(tuán)結(jié)和諧。主頁采取了圖片和文字相結(jié)合的原理，圖文并茂，更好的傳遞了我們班級那種蓬勃朝氣的青春氣息。 14 3.3.2班級介紹 設(shè)計(jì)理念 這是主頁的一個(gè)連接，網(wǎng)站的一個(gè)子頁，主要是詳細(xì)介紹一下我們的班級。首先打開一個(gè)空白的網(wǎng)頁，然后在頁面屬性內(nèi)設(shè)置背景顏色，選取一個(gè)活潑可愛的淡粉色 15 作為該網(wǎng)頁的背景顏色，給網(wǎng)頁增添了不少的朝氣。然后插入一個(gè)一行一列的表格 在下面的屬性欄內(nèi)添加背景圖片，背景圖片選取的也是淡粉和淡藍(lán)相結(jié)合的帶有青春氣息的圖片。該頁面包含三個(gè)版塊： 第一個(gè)版塊：插入一個(gè)一行一列的表格，設(shè)置好長度寬度，然后插入和主頁第一板塊中一樣的圖片，目的是和主頁保持一致，看上去整齊干凈。 第二個(gè)版塊：插入一個(gè)一行五列的表格，作為該網(wǎng)頁的導(dǎo)航條，便于鏈接到網(wǎng)站的各個(gè)子頁面，想要了解哪個(gè)頁面的內(nèi)容，只要單擊一下導(dǎo)航條，就會(huì)自動(dòng)鏈接到想要看到的頁面，方便快捷。 第三個(gè)版塊：插入一個(gè)一行一列的表 格，在下面的屬性欄中設(shè)置它的寬度，然后在該表格內(nèi)錄入詳細(xì)的班級介紹，簡單介紹一下我們的同學(xué)，班風(fēng)，班集體的相處，班級活動(dòng)，同學(xué)們的學(xué)習(xí)熱情等等，班級介紹不在字多，追求一個(gè)“精”字。用簡單的言語概括出更全面的內(nèi)容，配以適當(dāng)?shù)膱D片和背景，會(huì)更加的吸引瀏覽者的眼球。 16 3.3.3 班級新聞 光榮榜 2012 年 3 月，王洪同學(xué)獲得系部安全知識技能大賽二等獎(jiǎng)。 設(shè)計(jì)理念 17 這是班級網(wǎng)站的第二個(gè)子頁面，主要介紹班級新聞。該網(wǎng)頁同樣和前兩個(gè)頁面一樣，首先新建一個(gè)空包的頁面，在頁面屬性一欄設(shè)置背景顏色，這次的背景顏色換成了淡綠色，給人一種清新的舒暢感覺。然后插入一個(gè)一行一列的表格，設(shè)置背景圖片，該背景圖片換成了淡 藍(lán)色的山水圖，中間點(diǎn)綴了些星星，使頁面看上去簡單干凈。該頁面同樣也包含三個(gè)版塊： 第一個(gè)版塊：和前兩個(gè)頁面一樣，也是插入一個(gè)一行一列的表格，然后插入一樣的圖片。 第二個(gè)版塊：導(dǎo)航條，用于鏈接各個(gè)頁面。 第三個(gè)版塊：主要介紹班級的最新新聞，基本上也就相當(dāng)于一個(gè)光榮榜，把最近同學(xué)們參加了什么活動(dòng)獲得了哪些獎(jiǎng)項(xiàng)寫在上面，提高一下班級的素質(zhì)形象，激勵(lì)同學(xué)們踴躍參加班級和學(xué)校組織的各項(xiàng)活動(dòng)，積極的為班集體貢獻(xiàn)自己的力量，為班級爭光。 該網(wǎng)頁設(shè)計(jì)繼續(xù)沿著前面的設(shè)計(jì)風(fēng)格做的，內(nèi)容有點(diǎn)過于單調(diào)了點(diǎn)，既然是班級新聞，不 應(yīng)該單單的只是寫出了班級的光榮榜，還應(yīng)該在添加一些同學(xué)們發(fā)生的生活趣事，學(xué)習(xí)心得等等，以后會(huì)好好地學(xué)習(xí)，做出更漂亮的網(wǎng)站。 18 3.3.4 班級相冊 設(shè)計(jì)理念 19 該頁面是網(wǎng)站的第三個(gè)子頁面，主要是班級相。首先是新建一個(gè)空白網(wǎng)頁，在下面的頁面屬性中設(shè)置背景顏色，該背景顏色選取的是亮黃色的，然后插入一個(gè)一行一列的表格，同樣該頁面還是分為三個(gè)版塊： 第一個(gè)和第二個(gè)版塊 和前面的三個(gè)頁面一樣，圖片和布局也是采用一樣的來設(shè)計(jì)，是整個(gè)網(wǎng)站瀏覽起來一目了然。 第三個(gè)版塊：這個(gè)才是該網(wǎng)頁設(shè)計(jì)的重點(diǎn)，插入一個(gè)一行十二列的表格，分別插入十二張班級、學(xué)校的照片，把表格設(shè)置成向右方向滑動(dòng)的動(dòng)感相冊，簡單形象。 班級相 冊就像一本完整的書，甚至是一系列的書，記錄校園成長的歷程。每張 照片都能夠配上你親自書寫的畫外音，可以是圖說，也可以是拍攝時(shí)的心情。 班級相冊是一 本記錄青春和友誼的紀(jì)念冊，記錄的是校園的點(diǎn)點(diǎn)滴滴，記錄的是同學(xué)之間的友誼。可以說 班級相冊 是歲月的寫真，記憶的回顧，也是情感的醞釀天地。 班 級 相冊就是一段封存的大學(xué)生活的記憶，包含了我們大學(xué)生活的美好回憶，以后我們或許沒有機(jī)會(huì)再見，但是當(dāng)我們翻開相冊，這些曾經(jīng)的回憶都會(huì)讓我們想起以往的種種 ，是我們 回憶往事的載體和線索。 該頁面采取動(dòng)靜結(jié)合的方式，形象生動(dòng)的展現(xiàn)了班級相冊的內(nèi)容，看著照片慢慢的往右滑動(dòng)，一幅幅不同的照片出現(xiàn)在眼前，倍感親切，放佛又回到了當(dāng)時(shí)的情景。該相冊不但有班級活動(dòng)是拍的照片，還有我們學(xué)校的照片，宿舍照片，既能了解了我們的班級同時(shí)也看到了學(xué)校和宿舍的面貌。 20 3.3.5 班級留言 艾米：你若安好，便是晴天。 /p 設(shè)計(jì)理念 該頁面是網(wǎng)站的最后一個(gè)子頁面，主要是同學(xué)們的班級留言設(shè)計(jì)。首先新建一個(gè)空白網(wǎng)頁，在下面的頁面屬性欄中設(shè)置外觀屬性中的背景顏色，改背景顏色設(shè)置成了淡綠色的，代表著我們班級有著像小草一樣的旺盛生命力。然后插入一個(gè)一行一列的表格，在下面的屬性欄中添加背景圖片， 背景圖片同樣是淡綠色的，上面印有四葉草， 四葉草 是國際公認(rèn)為幸運(yùn)的象征 ， 它的每片葉子都有著不同的意義， 當(dāng)中包含了人生夢寐以求的四樣?xùn)|西： 名譽(yù)、財(cái)富、愛情及健康，倘若同時(shí)擁有這些 東西，那就是幸運(yùn)了 ，我希望我們班的同學(xué)都能幸福。該頁面同樣也被分成了三個(gè)版塊： 第一個(gè)版塊：插入一個(gè)一行一列的表格，然后在表格內(nèi)插入圖片，設(shè)置好高度和寬度。 第二個(gè)版塊：插入 一個(gè)一行五列的表格作為導(dǎo)航條，分別寫上班級主頁，班級介紹，班級新聞，班級相冊，班級留言，然后分別鏈接到各個(gè)頁面，設(shè)置 CSS 樣式 a:link color: #FF0000； a:visited 22 color: #00FF00； a:hover color: #0000FF； a:active color: #FF00FF； 第三個(gè)版塊：該版塊主要是同學(xué)們的留言內(nèi)容，首先插入一個(gè)一行一列的表格， ，然后分別插入同學(xué)們的留言內(nèi)容，這些都是同學(xué)們發(fā)自肺腑的聲音，有祝福，有懷念，有夢想 留言是一座光芒四射的燈塔，可以指明前進(jìn)的方向；留言是一味良藥，可以規(guī)箴過失，鞭策行動(dòng)；留言是一部內(nèi)容豐富的回憶錄，它將喚回美好的昨天。荀子說：“贈(zèng)人以言，重于金石珠玉”，可見，好的留言有其重要意義。好的留言就像春雨甘淋，能滋潤心田，激發(fā)斗志，激勵(lì)人，鼓舞人，警示人。 23 結(jié)論 21 世紀(jì)是信息高 速發(fā)達(dá)的時(shí)代，網(wǎng)絡(luò)作為當(dāng)今最流行最方便快捷的媒介也越來越被人們接受，并且融入我們的生活。 經(jīng)過了幾個(gè)月的學(xué)習(xí)和工作，我終于完成了班級網(wǎng)站設(shè)計(jì)的論文。從開始接挑戰(zhàn)，這也是我在大學(xué)期間獨(dú)立完成的最大的項(xiàng)目。在這段時(shí)間里，我學(xué)到了很到論文題目到系統(tǒng)的實(shí)現(xiàn)，再到論文文章的