體育新聞網(wǎng)站畢業(yè)論文

1、<p><b>　　畢 業(yè) 論 文</b></p><p>　　題　　目　　　 　　　　　　　　　　　　　</p><p>　　學(xué)　　號(hào) 班　　級(jí) 應(yīng)用2班 </p><p>　　專(zhuān)　　業(yè) 計(jì)算機(jī)應(yīng)用 系　　別計(jì)算機(jī)應(yīng)用系　　　　　</p><p>　　作者姓名　

2、 　 完成時(shí)間　 　　　　　</p><p>　　指導(dǎo)教師　 　 職　　稱(chēng)　　　　</p><p><b>　　體育新聞網(wǎng)站</b></p><p><b>　　摘 要</b></p><p>　　班級(jí)網(wǎng)站是一個(gè)班級(jí)和外界交流的窗口，也是本班同學(xué)相互聯(lián)系,交流的平臺(tái)。網(wǎng)站首頁(yè)提供

3、一些其他常用的鏈接，讓用戶方便去這些網(wǎng)站搜集自己所要的信息。班級(jí)動(dòng)態(tài)是公布班級(jí)里一些重大事務(wù)或重要通知的地方。普通用戶只可以瀏覽新聞, 而管理員享有發(fā)布、修改、刪除新聞的權(quán)利。校內(nèi)外新聞可以幫助同學(xué)拓展知識(shí)面。用戶可以給其他任何用戶發(fā)短信息和郵件。用戶還可以在這里修改本人資料。班級(jí)相冊(cè)是用戶存放照片的地方，用戶可以在這里瀏覽其他用 戶上傳的照片，或者自己也可以上傳照片。管理員享有修改，刪除照片的權(quán)利。留言是用來(lái)給用戶相互交流，高談闊論的

4、地方。普通用戶只能編輯自己的帖子，而管理員則可以編輯任何人的帖子。管理功能是管理員用來(lái)管理網(wǎng)站的，在這里，管理員可以增加和刪除用戶，設(shè)置 用戶權(quán)限。并且可以對(duì)網(wǎng)站的數(shù)據(jù)庫(kù)進(jìn)行備份，防止惡意攻擊造成巨大損失.最后，關(guān)于鏈接是對(duì)整個(gè)網(wǎng)站功能的一個(gè)大概介紹,相當(dāng)于是網(wǎng)站的一個(gè)簡(jiǎn)單的使用說(shuō)明，讓用戶看了后可以對(duì)網(wǎng)站的使用更加得心應(yīng)手。</p><p>　　關(guān)鍵詞：網(wǎng)頁(yè) Dreamweaver 設(shè)計(jì) 班級(jí) </

5、p><p><b>　　前言</b></p><p><b>　　網(wǎng)站的定義</b></p><p>　　網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,網(wǎng)頁(yè)制作是企業(yè)開(kāi)展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開(kāi)網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱(chēng)為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無(wú)形資產(chǎn)的組成部分

6、，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。</p><p><b>　　什么是網(wǎng)頁(yè)制作</b></p><p>　　網(wǎng)頁(yè)制作要能充分吸引訪問(wèn)者的注意力，讓訪問(wèn)者產(chǎn)生視覺(jué)上的愉悅感。因此在網(wǎng)頁(yè)創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來(lái)。網(wǎng)站設(shè)計(jì)是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識(shí)通過(guò)藝術(shù)的手法表現(xiàn)出來(lái)；網(wǎng)頁(yè)制

7、作通常就是將網(wǎng)頁(yè)設(shè)計(jì)師所設(shè)計(jì)出來(lái)的設(shè)計(jì)稿，按照規(guī)范用html語(yǔ)言將其制作成網(wǎng)頁(yè)格式。</p><p><b>　　網(wǎng)頁(yè)設(shè)計(jì)</b></p><p>　　網(wǎng)頁(yè)設(shè)計(jì)是指使用標(biāo)識(shí)語(yǔ)言（markup language)，通過(guò)一系列設(shè)計(jì)、建模、和執(zhí)行的過(guò)程將電子格式的信息通過(guò)互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡(jiǎn)單來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站，什么是

8、網(wǎng)站呢，就是服務(wù)器內(nèi)的一系列網(wǎng)頁(yè)的組合，終端用戶發(fā)出請(qǐng)求后服務(wù)器通過(guò)傳輸特定的網(wǎng)頁(yè)向用戶傳輸所需的信息。簡(jiǎn)單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過(guò)使用HTML/XHTML/XML放置到網(wǎng)站頁(yè)面上。而更復(fù)雜的信息如vector graphics,動(dòng)畫(huà)，視頻，聲頻則需要插件程序例如Flash, QuickTime, Java run-time environment,等等，這些插件程序也是通過(guò)HTML/XHTML/

9、XML植入網(wǎng)頁(yè)的。隨著瀏覽器和W3C(萬(wàn)維網(wǎng)聯(lián)盟 World Wide Web Consortium)標(biāo)準(zhǔn)一致性的改善，XHTML/XML（可擴(kuò)展標(biāo)識(shí)語(yǔ)言）與CSS（層疊樣式表）共同用作網(wǎng)頁(yè)內(nèi)容的設(shè)計(jì)已經(jīng)被廣泛的接受和使用。最新的標(biāo)準(zhǔn)和建議則是朝著瀏覽器的能力擴(kuò)充和改善發(fā)展，使之能夠不需要插件程序也能夠給用戶傳輸多媒體信息和更多的選擇。</p><p><b>　　兩種設(shè)計(jì)模式</b><

10、;/p><p>　　從前一般網(wǎng)頁(yè)都使用表格進(jìn)行排版設(shè)計(jì)，這樣作的優(yōu)點(diǎn)在于設(shè)計(jì)制作速度快，尤其在可視化網(wǎng)頁(yè)編輯器，如Microsoft FrontPage中，這樣設(shè)計(jì)顯得直觀而方便，然而這讓越來(lái)越復(fù)雜的版面需要許多不斷嵌套的表格設(shè)計(jì)，致使網(wǎng)頁(yè)代碼變得冗長(zhǎng)復(fù)雜，使文件體積增大，且不容易被搜索引擎查找。同時(shí)，這樣做也不利于大型網(wǎng)站的改版工作。 　　 </p><p>　　隨著主流網(wǎng)頁(yè)瀏覽器對(duì)CSS的

11、支援度提高，近年來(lái)興起了一種新的網(wǎng)頁(yè)設(shè)計(jì)模式。被業(yè)界稱(chēng)為“網(wǎng)頁(yè)重構(gòu)”的革命，其核心在于分隔網(wǎng)頁(yè)的風(fēng)格和內(nèi)容(en:Separation of style and content)，指標(biāo)記語(yǔ)言(如HTML,XML)負(fù)責(zé)定義頁(yè)面的內(nèi)容，但不可以定義任何涉及網(wǎng)站外觀(風(fēng)格)的東西。而網(wǎng)站風(fēng)格就由另外的CSS檔案負(fù)責(zé)。在排版方面，新的模式提倡使用由CSS定義的DIV進(jìn)行頁(yè)面排版，而將表格還原為排列數(shù)據(jù)的最初功能。這種模式有很多好處，例如可以協(xié)助

12、搜尋引擎查找網(wǎng)頁(yè)的情況，減小文件提及提高瀏覽速度，且由于一個(gè)CSS檔案可以控制多個(gè)頁(yè)面，這也給改版帶來(lái)了很大方便。由于W3C是該模式極力的倡導(dǎo)者，于是業(yè)界鑒定網(wǎng)頁(yè)是否符合W3C標(biāo)準(zhǔn)，就可以在W3C網(wǎng)站自動(dòng)檢測(cè)該網(wǎng)站的情況。這種模式也有缺點(diǎn)，其中一個(gè)弱點(diǎn)就是，在不同瀏覽器出來(lái)的效果會(huì)有分別，但這種情況主要是由于微軟的Internet Explorer對(duì)CSS文檔的支持有眾多缺陷造成的。另一方面，開(kāi)始設(shè)計(jì)CSS時(shí)，并不能清楚看到目標(biāo)，因此顯

13、得不直觀。網(wǎng)頁(yè)實(shí)際是一個(gè)文件，他存放在世界某個(gè)角落的的某一臺(tái)計(jì)算機(jī)中，而這臺(tái)計(jì)算機(jī)必須是與互</p><p><b>　　目 錄</b></p><p>　　第一章 需求分析1</p><p>　　第二章 軟件介紹及相關(guān)術(shù)語(yǔ)解釋2</p><p>　　2.1 Dreamweaver簡(jiǎn)介2</p>&l

14、t;p>　　2.2 HTML簡(jiǎn)史3</p><p>　　2.3 XHTML4</p><p>　　2.4 CSS樣式表概述4</p><p>　　2.5CSS樣式表的優(yōu)勢(shì)5</p><p>　　2.6CSS樣式表在HTML中的實(shí)現(xiàn)5</p><p>　　2.6.2內(nèi)聯(lián)式樣式表6</p>

15、<p>　　2.6.3外聯(lián)式樣式表6</p><p><b>　　2.7超鏈接6</b></p><p>　　第三章 網(wǎng)站總體分析與設(shè)計(jì)8</p><p>　　3．1網(wǎng)站系統(tǒng)分析8</p><p>　　3.2設(shè)置首頁(yè)布局和頁(yè)面屬性8</p><p>　　3.2.1設(shè)置首頁(yè)布局

16、8</p><p>　　3.2.2設(shè)置首頁(yè)的頁(yè)面屬性9</p><p>　　3.2.3 查看和編輯頭內(nèi)容10</p><p>　　3.2.4 插入圖像10</p><p>　　3. 3創(chuàng)建其它網(wǎng)頁(yè)11</p><p><b>　　第四章 總結(jié)12</b></p><

17、p><b>　　參考文獻(xiàn)13</b></p><p><b>　　致謝14</b></p><p><b>　　第一章 需求分析</b></p><p>　　隨著互聯(lián)網(wǎng)的進(jìn)一步發(fā)展與成熟，網(wǎng)絡(luò)的帶寬進(jìn)一步加闊，網(wǎng)絡(luò)應(yīng)用也越來(lái)越廣泛。網(wǎng)頁(yè)制作更是日新月異，層出不窮。涌現(xiàn)了很多琳瑯滿目的網(wǎng)站，使

18、得整個(gè)互聯(lián)網(wǎng)多姿多彩。網(wǎng)頁(yè)功能分析就是以系統(tǒng)的觀點(diǎn)，對(duì)已選定的對(duì)象與開(kāi)發(fā)范圍進(jìn)行有目的、有步驟的實(shí)際調(diào)查和科學(xué)分析。分析的目的就是要弄清楚網(wǎng)頁(yè)要做什么，最終為后面的設(shè)計(jì)工作打下基礎(chǔ)。需求分析是制作一個(gè)網(wǎng)站的第一步。在制作網(wǎng)站之前，首先要了解客戶的需要和要求。這些必要的信息包括客戶所要表達(dá)的理念、界面顯示的內(nèi)容和欄目的要求、網(wǎng)站功能方面的要求等。根據(jù)客戶的具體情況，需求也會(huì)有所差別。本網(wǎng)站是針對(duì)班級(jí)同學(xué)而設(shè)計(jì)的網(wǎng)站，主要是便于同學(xué)聯(lián)系例如

19、聚會(huì)、發(fā)布班級(jí)信息等系列的通知，同時(shí)本網(wǎng)站還針對(duì)同學(xué)們的需求建立個(gè)人信息空間，可以建立個(gè)人影集，彰顯每個(gè)同學(xué)的個(gè)性與風(fēng)采，相當(dāng)于一個(gè)“便攜式”的聊天平臺(tái)，無(wú)論同學(xué)們以后身在那里我們都可以在茶余飯后對(duì)我們現(xiàn)在亦或是過(guò)去進(jìn)行討論，彼此交換心得體會(huì)，更加了解班級(jí)的概況，關(guān)注班級(jí)的動(dòng)態(tài)。各個(gè)角色功能如下：瀏覽班級(jí)動(dòng)態(tài)、發(fā)表論壇、觀看發(fā)表作品、瀏覽新聞、瀏覽班級(jí)相冊(cè)、瀏覽文學(xué)作品、實(shí)時(shí)留言。</p><p>　　該網(wǎng)站主要

20、有六大模塊組成，分別為班級(jí)論壇，班級(jí)作品，班級(jí)新聞，班級(jí)相冊(cè)，班級(jí)文學(xué)，班級(jí)留言。用戶登錄網(wǎng)站index.html頁(yè)面，即可對(duì)該網(wǎng)站進(jìn)行瀏覽，index.html主要為大家展示的內(nèi)容有：班級(jí)論壇，班級(jí)作品，班級(jí)相冊(cè)，班級(jí)新聞，班級(jí)留言等功能，在該頁(yè)面中，用戶可以根據(jù)導(dǎo)航欄連接到在子頁(yè)進(jìn)行瀏覽</p><p>　　第二章 軟件介紹及相關(guān)術(shù)語(yǔ)解釋</p><p>　　2.1 Dreamweav

21、er簡(jiǎn)介</p><p>　　Dreamweaver是美國(guó)MACROMEDIA公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作個(gè)管理網(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)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)，其特點(diǎn)有以下幾方面：</p><p><b>　　1、最佳的制作效果</b></p>&l

22、t;p>　　Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand或Photoshop等檔案移至網(wǎng)頁(yè)上，使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。</p><p>　　Dreamweaver能與您喜愛(ài)的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需要離開(kāi)Dreamweaver便

23、可完成，整體運(yùn)用流程自然流暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開(kāi)啟Firework或Photoshop來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。</p><p><b>　　2、網(wǎng)站管理</b></p><p>　　使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱(chēng)，Dreamweaver會(huì)自動(dòng)更新所有連接。使支援文字、HTML碼、H

24、TML屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。</p><p>　　3.無(wú)可比擬的控制能力</p><p>　　Dreamweaver是唯一提供Roundtrip HTML、視覺(jué)化編輯與原始編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀（frames）惡化表格的制作速度快的令您無(wú)法想像。進(jìn)階表格編輯功能使</p>&l

25、t;p>　?。?jiǎn)單的選擇單元格、行、列或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver支持精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。 所見(jiàn)即所得 Dreamweaver成功整合動(dòng)態(tài)式出版視覺(jué)編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正

26、使用Dreamweaver在設(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è)外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver設(shè)計(jì)的網(wǎng)頁(yè)，可以全方位的呈現(xiàn)在任何平臺(tái)的熱門(mén)瀏覽器

27、上。對(duì)于cascading style sheets的動(dòng)態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動(dòng)畫(huà)的DHTML效果資料庫(kù)可在Netscape</p><p>　　2.2 HTML簡(jiǎn)史</p><p>　　HTML超文本標(biāo)記語(yǔ)言（Hypertext Markup Language） 網(wǎng)絡(luò)的資訊越來(lái)越多，網(wǎng)站須有引人注意的外觀，才能增加瀏覽人次，達(dá)到宣傳的目的。人們開(kāi)始注意網(wǎng)頁(yè)的外觀，HTML亦

28、因此變得更復(fù)雜、更具彈性。表格，原本是更整齊展現(xiàn)資料的工具，變成了排版工具。CSS的出現(xiàn)令以表格為基礎(chǔ)的外觀設(shè)計(jì)被視為過(guò)時(shí)。服務(wù)器方面的技術(shù)亦改變了網(wǎng)絡(luò)的構(gòu)造，使用者可以選擇其瀏覽方式、外觀。Flash的出現(xiàn)為設(shè)計(jì)師和媒體創(chuàng)作人開(kāi)創(chuàng)了路。除了引人的外觀之外，亦有一個(gè)重要的考慮點(diǎn)：網(wǎng)</p><p>　　圖2-3-2后臺(tái)關(guān)系圖</p><p>　　三、系統(tǒng)數(shù)據(jù)庫(kù)結(jié)構(gòu)設(shè)計(jì)與實(shí)現(xiàn)</p&g

29、t;<p><b>　　（一）創(chuàng)建數(shù)據(jù)庫(kù)</b></p><p>　　首先創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)用來(lái)保存本系統(tǒng)的所有數(shù)據(jù)。</p><p>　　用戶信息表denglu 用來(lái)保存原有用戶信息和新注冊(cè)用戶信息。在首頁(yè)中，可以清晰的看見(jiàn)今日在首頁(yè)中，可以清晰的看見(jiàn)今日在首頁(yè)中，可以清晰的看見(jiàn)今日。所謂標(biāo)識(shí)列，就是可以惟一標(biāo)識(shí)一行記錄的列，在表中不會(huì)存在兩條標(biāo)識(shí)列相同的

30、記錄。表結(jié)構(gòu)如下圖（圖 3-1-1）：</p><p>　　絡(luò)無(wú)障礙，即使用者能否容易讀取資訊。 </p><p><b>　　2.3 XHTML</b></p><p>　　由于XML的可構(gòu)造性，XHTML 1.0在2000年1月26日成為W3C的推薦標(biāo)準(zhǔn)，即HTML將會(huì)隨著時(shí)間而淘汰。 </p><p><b&

31、gt;　　外觀的影響</b></p><p>　　流動(dòng)性對(duì)固定排版大部分網(wǎng)站設(shè)計(jì)師原本是每處地方都有絕對(duì)限界的平面設(shè)計(jì)師?？墒窃诰W(wǎng)頁(yè)瀏覽器，卻不能控制某些因素，特別是瀏覽器的闊度。有些設(shè)計(jì)師將其網(wǎng)頁(yè)定義在固定大小的表格中，每部分的寬度都有精確的數(shù)據(jù)，一般使用確定的值，這就是固定排版了。然而有人認(rèn)為這不好，因?yàn)檫@種設(shè)計(jì)罔顧使用者的設(shè)定，他們使用流動(dòng)性排版，網(wǎng)頁(yè)的寬度使用百分比定義寬度，因此網(wǎng)頁(yè)會(huì)依瀏覽器

32、的屏幕分辨率而改變，但是流動(dòng)性的排版對(duì)于日益增大的屏幕就不一定合適，因?yàn)槿说难劬M(jìn)行橫向閱讀時(shí)，過(guò)長(zhǎng)的文字會(huì)增加閱讀的困難度，反之大約在十幾個(gè)字即換行的文章，瀏覽者會(huì)更好吸收其內(nèi)容。 </p><p>　　網(wǎng)頁(yè)制作兩種設(shè)計(jì)模式</p><p>　　從前一般網(wǎng)頁(yè)都使用表格進(jìn)行排版設(shè)計(jì)，這樣作的優(yōu)點(diǎn)在于設(shè)計(jì)制作速度快，尤其在可視化網(wǎng)頁(yè)編輯器，如Microsoft FrontPage中，這樣設(shè)計(jì)

33、顯得直觀而方便，然而這讓越來(lái)越復(fù)雜的版面需要許多不斷嵌套的表格設(shè)計(jì)，致使網(wǎng)頁(yè)代碼變得冗長(zhǎng)復(fù)雜，使文件體積增大，且不容易被搜索引擎查找。同時(shí)，這樣做也不利于大型網(wǎng)站的改版工作。</p><p>　　2.4 CSS樣式表概述</p><p>　　CSS是Cascading Style Sheet 的縮寫(xiě)，譯作“層疊樣式表單”。它是一種在網(wǎng)頁(yè)制作過(guò)程中經(jīng)常用到的技術(shù)。CSS樣式表其實(shí)是一組樣式，

34、它增加了更多的樣式定義方法來(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”、“正文”等。只要選定文字，然后選擇不同的樣式，所選定的文字就會(huì)自動(dòng)改變字體、字號(hào)、對(duì)齊方式、字間距等。同樣，我們可以通過(guò)CSS來(lái)規(guī)定網(wǎng)頁(yè)元素的各種樣式，如顏色、位置、大小等。</p>&

35、lt;p>　　2.5CSS樣式表的優(yōu)勢(shì)</p><p>　　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è)編輯的效率。</p><p>　　2.6CSS樣式表在HTML中

36、的實(shí)現(xiàn)</p><p>　　在HTML網(wǎng)頁(yè)中加入CSS并不是只有一種方法，在不同的情況下，可以采用不同的方法，比較常用的有下面幾中。</p><p>　　2.6.1．嵌入式樣式表</p><p>　　嵌入式樣式表的實(shí)現(xiàn)很簡(jiǎn)單，只需在每個(gè)要應(yīng)用樣式的HTML標(biāo)簽后寫(xiě)上CSS屬性即可。例如要設(shè)置指定表格中的文字的樣式為紅色，字號(hào)為10pt，可在當(dāng)前表格的<tabl

37、e>標(biāo)記內(nèi)添加下面的代碼：</p><p>　　<table style=”color:red;font-size:10pt”>。這種方式主要用于對(duì)具體的標(biāo)簽作具體的調(diào)整，其作用的范圍只限于本標(biāo)簽。嵌入式樣式表不能充分體現(xiàn)出CSS樣式表的優(yōu)越性，所以應(yīng)用場(chǎng)合并不多。</p><p>　　2.6.2內(nèi)聯(lián)式樣式表</p><p>　　若想只對(duì)當(dāng)前頁(yè)面應(yīng)

38、用樣式，就要使用內(nèi)聯(lián)式樣式表。所謂內(nèi)聯(lián)式樣式表就是把樣式表定義語(yǔ)句放在標(biāo)簽<style type=”text/css”>和</style>中，設(shè)置時(shí)通常放在HTML代碼的<head>部分。</p><p>　　2.6.3外聯(lián)式樣式表</p><p>　　外聯(lián)式樣式表是將指定的樣式代碼放到一個(gè)擴(kuò)展名為.css的樣式文件中以方便其他網(wǎng)頁(yè)的調(diào)用。這種方式的優(yōu)點(diǎn)

39、是可以通過(guò)一個(gè).css文件管理網(wǎng)站中的多個(gè)網(wǎng)頁(yè)。如果要對(duì)網(wǎng)站中其他頁(yè)面進(jìn)行樣式引用，可以先把樣式用記事本定義成一個(gè)“.css”的文件。例如：打開(kāi)記事本，將定義的名為h3的樣式代碼寫(xiě)到記事本中，保存的文件名為example.css，代碼如下：</p><p><b>　　h3{</b></p><p>　　font-family:”黑體”;</p><

40、;p>　　color:green;</p><p>　　font-style:italic;</p><p><b>　　}</b></p><p>　　引用時(shí)在網(wǎng)頁(yè)HTML代碼的<head>標(biāo)記后用<link rel=”stylesheet” href=”example.css”>引用這個(gè)樣式文件，在<bo

41、dy>部分的相應(yīng)內(nèi)容的前后加上<h3>和</h3>。</p><p><b>　　2.7超鏈接</b></p><p>　　超鏈接在本質(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è),也可以是

42、相同網(wǎng)頁(yè)上的不同位置，還可以是一</p><p>　　個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(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è)中的鏈接又可以分為：文本

43、超鏈接，圖像超鏈接，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è)上的超鏈接一般分為三種：一種是絕對(duì)URL的超鏈接。URL（Uniform Resource Locator）就是統(tǒng)一資源定位符，簡(jiǎn)單地講就是網(wǎng)絡(luò)上的一個(gè)站點(diǎn)、網(wǎng)頁(yè)的完整路徑。

44、http://www.xxx. com/ 　　第二種是相對(duì)URL的超鏈接。如將自己網(wǎng)頁(yè)上的某一段文字或某標(biāo)題鏈接到同一網(wǎng)站的其他網(wǎng)頁(yè)上面去； 　　還有一種稱(chēng)為同一網(wǎng)頁(yè)的超鏈接，這種超鏈接又叫做書(shū)簽。</p><p><b>　　If</b></p><p>　　第三章 網(wǎng)站總體分析與設(shè)計(jì)</p><p><b>　　3．1網(wǎng)站系統(tǒng)分

45、析</b></p><p>　　根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開(kāi)發(fā)的基本觀點(diǎn)對(duì)網(wǎng)站進(jìn)行分解，從內(nèi)容上可對(duì)網(wǎng)站總體布局如下：</p><p>　　3.2設(shè)置首頁(yè)布局和頁(yè)面屬性</p><p>　　3.2.1設(shè)置首頁(yè)布局</p><p>　　每個(gè)網(wǎng)站都會(huì)有一個(gè)首頁(yè)，就功能上而言，它代表著一個(gè)網(wǎng)站的風(fēng)格與特色，就網(wǎng)站架構(gòu)上而言，它

46、代表了網(wǎng)站的第一層架構(gòu)，首頁(yè)是打開(kāi)網(wǎng)站后在瀏覽器中顯示的第一個(gè)頁(yè)面。它是起什么名字通常要視Server端的設(shè)置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。當(dāng)然，后綴名為html也是正確的。具體設(shè)置方法是：右健單擊“檔”浮動(dòng)面板中的index.htm,在彈出的菜單中選擇“設(shè)成首頁(yè)”。操作步驟：1、在“插入快捷欄”的“布局”分類(lèi)中，單擊“布局表格”按紐。2、將變成“+”形狀的

47、鼠標(biāo)游標(biāo)放到編輯中網(wǎng)頁(yè)上，在要繪制的地方進(jìn)行拖動(dòng)就可以進(jìn)行創(chuàng)建了。（如果繪制的是第一個(gè)表格必須從網(wǎng)頁(yè)的最左上角開(kāi)始繪制）。表格布局如下圖：</p><p>　　3.2.2設(shè)置首頁(yè)的頁(yè)面屬性</p><p>　　首先雙擊“檔”浮動(dòng)面板中的index.htm,進(jìn)入頁(yè)面的編輯窗口。右健單擊空白區(qū)域，在菜單中選擇“頁(yè)面屬性”，之后彈出“頁(yè)面屬性”對(duì)話框，若選擇主菜單“修改/頁(yè)面屬性”項(xiàng)，也可以把打

48、開(kāi)該對(duì)話框。在“頁(yè)面屬性”對(duì)話框中，左側(cè)窗口顯示“分類(lèi)”，其中包括了“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”5項(xiàng)，右側(cè)區(qū)域則顯示各類(lèi)中可以設(shè)置的項(xiàng)目，首頁(yè)設(shè)置的屬性如下圖所示：</p><p>　　3.2.3 查看和編輯頭內(nèi)容</p><p>　　一個(gè)網(wǎng)頁(yè)文件結(jié)構(gòu)上實(shí)際是由兩部分組成，頭（head）內(nèi)容和主體（body）內(nèi)容主體內(nèi)容（body）是文檔的主要部分，也是包含文

49、本和圖像等的可見(jiàn)部分。頭內(nèi)容（head）是除文檔標(biāo)題外的不可見(jiàn)部分，包含有文文件類(lèi)型、語(yǔ)言編碼、搜索引擎的關(guān)鍵的關(guān)鍵詞和內(nèi)容指示器以及樣式定義等重要信息，這些元器并不是每個(gè)頁(yè)面都需要的，例如，可以僅為主頁(yè)提供關(guān)鍵詞。</p><p>　　3.2.4 插入圖像</p><p>　　圖像是網(wǎng)頁(yè)中不可或缺的組成成份，恰當(dāng)?shù)厥褂脠D像，可以使網(wǎng)站充滿生活生命力與說(shuō)服力，吸引更多的瀏覽者，加深他們欣賞

50、你網(wǎng)站的意愿。首先將游標(biāo)停留在要插入圖像的位置，然后單擊“菜單欄”下面“插入快健欄”的下拉表，選擇其中的“常用”類(lèi)，則右側(cè)將會(huì)顯示該類(lèi)中可以插入的對(duì)象快鍵按鈕。左起第5個(gè)即為“圖像：圖像”按鈕，單擊它右側(cè)的下拉列表，選擇第1項(xiàng)“圖像”。隨即彈出“選擇圖像源文件”對(duì)話框。從計(jì)算機(jī)磁盤(pán)中選擇想要插入的圖像文件，下面的“相對(duì)于”下拉表框中，可選擇文件URL地址的類(lèi)型，插入logo圖像，如圖所示:</p><p>　　最

51、后單擊“確定”按鈕，即可完成插入圖像的操作。</p><p>　　3. 3創(chuàng)建其它網(wǎng)頁(yè)</p><p>　　還有其它的幾個(gè)網(wǎng)站與主頁(yè)的制作相同，一個(gè)網(wǎng)頁(yè)是圖像和文字的組合。 其他的圖像插入和前面的介紹相似。</p><p><b>　　第四章 總結(jié)</b></p><p>　　對(duì)于現(xiàn)在的社會(huì)，科技的飛速發(fā)展已經(jīng)成為社會(huì)發(fā)

52、展的標(biāo)志。其中計(jì)算機(jī)的發(fā)展可謂快中之快，而在計(jì)算機(jī)的發(fā)展中計(jì)算機(jī)網(wǎng)絡(luò)的發(fā)展又是首當(dāng)其沖的。計(jì)算機(jī)網(wǎng)絡(luò)從為我們所知，到現(xiàn)在才經(jīng)歷的短短的幾年時(shí)間，在這幾年中隨著計(jì)算機(jī)網(wǎng)絡(luò)的廣泛應(yīng)用，特別是Internet的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。不論是最新的新聞信息、新產(chǎn)品的出臺(tái)、新游戲的發(fā)布、最新的各種IT動(dòng)態(tài)，包括等候就業(yè)人才的個(gè)人簡(jiǎn)歷，我們都是可以通過(guò)網(wǎng)絡(luò)來(lái)獲得。但是什么為這所有的一切提供平臺(tái)的呢。我們又是通過(guò)什么來(lái)獲取這些消

53、息的呢——對(duì)就是網(wǎng)頁(yè)?，F(xiàn)如今，數(shù)以萬(wàn)計(jì)的網(wǎng)站以網(wǎng)頁(yè)的方式提供了豐富、精彩的信息。在人類(lèi)社會(huì)進(jìn)入信息時(shí)代的時(shí)候，在網(wǎng)絡(luò)成為通信的主要手段的時(shí)候，在計(jì)算機(jī)網(wǎng)絡(luò)普及的今天，網(wǎng)頁(yè)也在它自己的崗位上做出了突出的貢獻(xiàn)。網(wǎng)頁(yè)是我們?cè)诰W(wǎng)絡(luò)上的“帶言人”。我們將什么樣的信息傳達(dá)給瀏覽者，要講述什么要的事情，網(wǎng)頁(yè)在這里起著重用的作用。網(wǎng)頁(yè)設(shè)計(jì)是伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起.</p><p>　　由于人們使用網(wǎng)絡(luò)的頻繁而網(wǎng)頁(yè)作為上網(wǎng)

54、的主要依托就變得非常的重要。網(wǎng)頁(yè)講究的是排版布局，其功能主要就是提供一種形式給每個(gè)上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。網(wǎng)頁(yè)設(shè)計(jì)直接面對(duì)的是大量用戶,隨時(shí)都會(huì)反饋回來(lái)對(duì)網(wǎng)頁(yè)的批評(píng)建議等，可以根據(jù)實(shí)際情況進(jìn)行修改，這樣做可以使使用者用起來(lái)更加的方便。在制作班級(jí)網(wǎng)站的過(guò)程中,我有一些體會(huì):1. 整體性好: 一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的。 2. 網(wǎng)站形象突出: 一個(gè)符合美的標(biāo)準(zhǔn)的網(wǎng)頁(yè)是能夠使網(wǎng)站的形象

55、得到最大限度的提升的。3.頁(yè)面用色協(xié)調(diào)，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網(wǎng)頁(yè)富有可欣賞性，提高檔次。當(dāng)然雅俗共賞是人人都追求的。</p><p><b>　　致　謝</b></p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1] 馮啟.Photoshop 7.0中文版經(jīng)典實(shí)例解.

56、北京.希望電子出版社. 2003年4月</p><p>　　[2] 雷波.Photoshop 7標(biāo)準(zhǔn)教程. 中國(guó)青年出版. 2005年2月</p><p>　　[3] 宋雪巖 .圖像處理Photoshop 7.0入門(mén)與提高. 人民郵電出版社. 2002年8月</p><p>　　[4] 李彪 楊仁毅.Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作.郵電出版社