個(gè)人站點(diǎn) 設(shè)計(jì)

1、2004畢業(yè)設(shè)計(jì)實(shí)習(xí)報(bào)告班級(jí)：_學(xué)號(hào)：_專業(yè)：_學(xué)生姓名：_指導(dǎo)教師：_目錄第一章：諸論31.1設(shè)計(jì)思想31.2開發(fā)工具選用和開發(fā)工具的介紹4第二章：網(wǎng)站的總體設(shè)計(jì)分析6 2.1網(wǎng)站的系統(tǒng)分析6 2.2 資料的搜集工作7 2.3 主頁的設(shè)計(jì)7 2.4 留言板9第三章：詳細(xì)設(shè)計(jì)133.1 利用DreamweaverMX調(diào)整設(shè)計(jì)143.2部分網(wǎng)頁效果截圖153.3 留言板的設(shè)計(jì)163.4 設(shè)計(jì)代碼18第四章：參考文獻(xiàn)20 4.1 HTML常用代碼22 4.2 CSS的簡單介紹和使用23 4.3設(shè)計(jì)總結(jié)24 第一章 諸論隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，科學(xué)技術(shù)的日新月異，信息技術(shù)的不斷蔓延，網(wǎng)絡(luò)已經(jīng)籠罩全球

2、、遍布全世界，廣泛的應(yīng)用到人類社會(huì)的各個(gè)領(lǐng)域?，F(xiàn)在上網(wǎng)也成了現(xiàn)代人的一種時(shí)尚，對(duì)與21世紀(jì)的我來說，我也是很喜歡上網(wǎng)，所以我就喜歡上了網(wǎng)絡(luò)這個(gè)不很現(xiàn)實(shí)的世界。其實(shí)在我剛剛接觸網(wǎng)絡(luò)的時(shí)候我就想能在這個(gè)虛幻的世界中建立一個(gè)自己的家，于是我也就有了做個(gè)個(gè)人站點(diǎn)的念頭。1.1 本站設(shè)計(jì)思想一、 定位網(wǎng)站的主題和名稱網(wǎng)站的主題也就是網(wǎng)站的題材，是網(wǎng)站設(shè)計(jì)首先要考慮的問題。作為我的畢業(yè)設(shè)計(jì)題目，它不僅代表了我在學(xué)校期間的所有所學(xué)知識(shí)，還夾雜了我的個(gè)人愛好，由于我個(gè)人比較喜歡網(wǎng)絡(luò)，故我的站點(diǎn)名稱定為：網(wǎng)絡(luò)城堡 1、主題要小而精定位要小，內(nèi)容要精。網(wǎng)絡(luò)在計(jì)算機(jī)里說包括的領(lǐng)域較多，故此網(wǎng)站建設(shè)題材也較多，這就需

3、要我們將題材化小，只有小了才能做到精，否則會(huì)給人包羅萬象卻沒有主題的的感覺，即樣樣有，卻樣樣都很膚淺。同時(shí)我個(gè)人也不可能有那么多的精力去維護(hù)它。網(wǎng)站的最大特點(diǎn)就是新和快，一個(gè)網(wǎng)站更新越快那么它的優(yōu)勢發(fā)揮的越好，這就需要尋找維護(hù)網(wǎng)站的捷徑竭力做到主題小而精。調(diào)查結(jié)果顯示，“小主題網(wǎng)站”比“大概括網(wǎng)站”更受人們的歡迎。不過值得注意的是主題小并不是內(nèi)容少，他涉及的各個(gè)方面的信息要全。2、多題材時(shí)最好將題材分類定位清晰明了的題材定位是制作網(wǎng)站的捷徑，沒有規(guī)劃，很難設(shè)計(jì)制作出優(yōu)秀的網(wǎng)站。對(duì)于題材的定位，其實(shí)，在我本人來說，在制作之中是很難的在網(wǎng)絡(luò)這個(gè)大的是世界中，題材實(shí)在是太多，而且能使我喜歡的東西也太

4、多，但最后我還是選擇的一個(gè)題材作為我的站點(diǎn)素材。3、題材要“濫”中求“新”。濫是指到處可見，人人都有的題材，比如國家的政策法規(guī)，公眾的教育信息等會(huì)發(fā)布到全國的各個(gè)學(xué)校，同時(shí)會(huì)要求宣傳給每一位同學(xué)，這就需要我們認(rèn)真考慮如何將濫題材中新形象挖掘出來，展示給網(wǎng)站的訪問者，引起他們的訪問興趣。網(wǎng)站題材初步確定以后，就可以圍繞題材給網(wǎng)站起一個(gè)名字。網(wǎng)站名稱，也是網(wǎng)站設(shè)計(jì)的一部分，而且是很關(guān)鍵的一部分。網(wǎng)站名稱是否正氣，響亮，易記，清晰明了對(duì)網(wǎng)站的形象的宣傳和推廣有很大影響，網(wǎng)站名字的優(yōu)劣直接決定著網(wǎng)站是否容易被別人所接受。作為一個(gè)好的站點(diǎn)名稱應(yīng)改具有以下的條件: 1）名稱要正 其實(shí)就是要合法，和理，和情

5、。不能用反動(dòng)的，色情的，迷信的，危害社會(huì)安全的名詞語句。 2）名稱要易記最好用中文名稱，不要使用英文或者中英文混合型名稱。另外，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在六個(gè)字（最好四個(gè)字）以內(nèi)，四個(gè)字的也可以用成語。字?jǐn)?shù)少還有個(gè)好處，適合于其他站點(diǎn)的鏈接排版。3）名稱要有特色名稱平實(shí)可以接受，如果再能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，則會(huì)有意想不到的收獲。例如：音樂前衛(wèi)，網(wǎng)頁陶吧，e書時(shí)空等。在體現(xiàn)出網(wǎng)站主題的同時(shí)，又展示了自己的獨(dú)特。對(duì)與我的個(gè)人站點(diǎn),和我的個(gè)人愛好,最終我的站點(diǎn)名稱定為:網(wǎng)絡(luò)城堡.二、設(shè)計(jì)網(wǎng)站的整體風(fēng)格風(fēng)格(style)是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。其中

6、整體形象包括站點(diǎn)的CI(標(biāo)志，色彩，字體，標(biāo)語)，版面布局，瀏覽方式，交互性，文字，語氣，內(nèi)容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等諸多因素。舉個(gè)例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專業(yè)嚴(yán)肅的，這些都是網(wǎng)站給人們留下的不同感受。獨(dú)特的風(fēng)格，是一個(gè)網(wǎng)站不同與其他網(wǎng)站的地方?；蛘呱剩蛘呒夹g(shù)，或者是交互方式等，要能讓瀏覽者明確分辨出這是你的網(wǎng)站獨(dú)有的。例如新世紀(jì)網(wǎng)絡(luò)的黑白色,網(wǎng)易壁紙站的特有框架,即使你只看到其中一頁，也可以分辨出是哪個(gè)網(wǎng)站的。風(fēng)格是人性化的。通過網(wǎng)站的外表，內(nèi)容，文字，交流等便可以展示出該網(wǎng)站的個(gè)性和情緒。在此我們可以用人的性格來比喻站點(diǎn)，一個(gè)網(wǎng)站有風(fēng)格而沒有內(nèi)容，

7、就好比一個(gè)性格傲慢但卻目不識(shí)丁的人。所以我的站點(diǎn)在保持風(fēng)格的同時(shí)還要保持它的內(nèi)容的豐富，但由于我個(gè)人的能力有限但最好還的在內(nèi)容上有些缺乏。1.2 開發(fā)工具的選用及介紹設(shè)計(jì)一個(gè)好的網(wǎng)站決非易事，它涉及到眾多領(lǐng)域的知識(shí)，體現(xiàn)了設(shè)計(jì)者的基本素質(zhì)和綜合能力-計(jì)算機(jī)知識(shí)；媒體美學(xué)；感染藝術(shù)；網(wǎng)絡(luò)知識(shí)；宣傳技巧；音樂的魅力（如果網(wǎng)頁需要音樂的話）；創(chuàng)意；美術(shù)、色彩。 實(shí)踐證明，要設(shè)計(jì)出一個(gè)好的網(wǎng)站，我們必須對(duì)HTML語言有一定的了解，它是一種超文本描述性語言，其編寫方式同一般的文本文件一樣，故在EDIT、WPS、Windows Notepad等相似性質(zhì)的文字編輯器中即可進(jìn)行。 要了解HTML的詳細(xì)內(nèi)容，還

8、可以具體搜索“HTML教程”關(guān)鍵字。建設(shè)網(wǎng)站FrontPage是一個(gè)不錯(cuò)的選擇，但在效率至上的今天讓我們最不能忍受的是它有著烏龜速度。相比之下Dreamweaver便成了網(wǎng)站建設(shè)的首選工具，這次的站點(diǎn)制作也主要采用它來完成，同時(shí)輔以Adobe Photoshop、Flash MX和ASP.在此我向大家簡單的把這些軟件給大家介紹一下:工具一：PhotoShop 6.0和Flash MX圖象處理軟件使用 Adobe Photoshop 和 Flash MX 設(shè)計(jì) Web 頁 Photoshop 提供創(chuàng)建和處理用于 Web 的靜態(tài)圖像的工具?？梢郧懈顖D像、添加鏈接和 HTML 文本、優(yōu)化切片并將圖像

9、存儲(chǔ)為 Web 頁。 Flash MX 提供許多類似Photoshop的圖形編輯工具的同時(shí)還提供了大量的動(dòng)畫制作面板,用于創(chuàng)建高級(jí)動(dòng)態(tài) Web 圖像如動(dòng)畫、翻轉(zhuǎn)效果和文字特效等。PhotoShop是業(yè)界圖形處理的老大，功能非常的強(qiáng)大，可以制作出很多特殊的效果，利用它設(shè)計(jì)網(wǎng)頁最適合不過了。Flash MX也是網(wǎng)頁動(dòng)畫制作的有力工具，它可以制作出絕對(duì)漂亮的動(dòng)畫，使用它來優(yōu)化網(wǎng)頁也就成了我們最好的選擇。工具二：Dreamweaver MX網(wǎng)頁制作軟件Dreamweaver功能強(qiáng)大，界面友好，加上與另外兩位兄弟工具Flash與Fireworks的緊密合作，實(shí)在是制作網(wǎng)站的首選。但是Dreamweave

10、r一直定位于專業(yè)網(wǎng)頁設(shè)計(jì)軟件，對(duì)初學(xué)者的考慮似乎不是十分周到，如果沒有一些基本的網(wǎng)頁設(shè)計(jì)知識(shí)，確實(shí)很難一下弄清楚那么多復(fù)雜的功能，尤其是當(dāng)我們只是想制作一個(gè)簡單的網(wǎng)站而不想深究其中知識(shí)的時(shí)候，Dreamweaver就不是那么讓人得心應(yīng)手了。現(xiàn)在隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，越來越多的人開始制作網(wǎng)站，為了適應(yīng)新形式的需要，占領(lǐng)更多的市場份額，Macromedia公司在Dreamweaver MX版本中對(duì)軟件功能進(jìn)行重大調(diào)整，尤其是針對(duì)新手提供了強(qiáng)大的網(wǎng)站模板功能，有了它，即使我們幾乎沒有什么網(wǎng)頁的專業(yè)知識(shí)，也可以迅速的建立具有專業(yè)水準(zhǔn)的頁面布局并快速設(shè)計(jì)網(wǎng)頁。工具三：ASP(Active Server

11、Pages)ASP的優(yōu)勢：Active Server Pages：“動(dòng)態(tài)服務(wù)器網(wǎng)頁”，一般簡稱為“ASP”，ASP之所以能受到大家的重視與使用的原因，主要在于所產(chǎn)生的執(zhí)行結(jié)果都是標(biāo)準(zhǔn)的HTML格式，而且這些程序是在網(wǎng)絡(luò)服務(wù)端中執(zhí)行，使用一般的瀏覽器（如IE 或Netscape）都可以正確地獲得ASP的“執(zhí)行”結(jié)果，并且將這ASP執(zhí)行的結(jié)果直接在瀏覽器中“瀏覽”，不像VBScript或 JavaScript是在客戶端（Client）的瀏覽器上執(zhí)行，比如：使用VBScript來設(shè)計(jì)程序，客戶端（Client）在瀏覽器中可以顯示程序執(zhí)行的結(jié)果，可是，客戶端（Client）若使用Netscape瀏覽器

12、就無法顯示VBScript的執(zhí)行結(jié)果。ASP的特點(diǎn)：任何開發(fā)工具皆可發(fā)展ASP只要使用一般的文書編輯程序，如Windows記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁發(fā)展工具，例如，F(xiàn)rontPage Express、FrontPage等也都可以；不過還是建議使用記事本來寫，既省錢又方便，若是使用那些所見即所得的網(wǎng)頁編輯來寫ASP，可能會(huì)發(fā)生一些意想不到的離奇狀態(tài)。通吃各家瀏覽由于ASP程序是在網(wǎng)絡(luò)服務(wù)器端中執(zhí)行，執(zhí)行結(jié)果所產(chǎn)生的HTML文件適用于各種不同的瀏覽器。語言相容性高ASP與所有的ActiveX Script語言都相容，除了可結(jié)合HTML，VBScript、Java Script、Active

13、 X服務(wù)器組件來設(shè)計(jì)外，并可經(jīng)由“plug-In（外掛組件模組）的方式，使用其他廠商（Third Party）所提供的語言。隱密安全性高如果我們在瀏覽器中直接查看網(wǎng)頁的原始代碼，就只能看到HTML文件，原始的ASP程序代碼是看不到的！這是由于ASP程序先于網(wǎng)站服務(wù)（Web Server）端執(zhí)行后，將結(jié)果轉(zhuǎn)換成標(biāo)準(zhǔn)HTML文件，再傳送到客戶端（Client）的瀏覽器上，因此，我們所辛苦撰寫的ASP程序并不會(huì)輕易地被看見進(jìn)而被盜用。易于操控?cái)?shù)據(jù)庫ASP可以輕易地通過ODBC(Open Database Connectivity)驅(qū)動(dòng)程序連接各種不同的數(shù)據(jù)庫，例如：Access、Foxpro、dBa

14、se、Oracle等等，另外，ASP亦可將“文本文件”或是“Excel” 文件當(dāng)成數(shù)據(jù)庫用。面向?qū)ο髮W(xué)習(xí)容易ASP具備有面向?qū)ο螅∣bject-Oriented）功能，學(xué)習(xí)容易，ASP提供了五種方便能力強(qiáng)大的內(nèi)建對(duì)象：Request、Response、Sever、Application以及Session，同時(shí)，若使用ASP內(nèi)建的“Application”對(duì)象或”Session”對(duì)象所撰寫出來的ASP程序可以在多個(gè)網(wǎng)頁之間暫時(shí)保存必要的信息。ASP的六大內(nèi)部對(duì)象對(duì)象名稱 功能描述Request、Response、Server、Session、Application、ObjectContext 從

15、客戶端取得信息將信息送給客戶端提供一些Web服務(wù)器工具儲(chǔ)存在一個(gè)Session內(nèi)的用戶信息，該信息僅可被該用戶訪問在一個(gè)ASP-Application中讓不同的客戶端共享信息可以用來配合Microsoft Transaction 服務(wù)器進(jìn)行分布式事務(wù)處理作為一個(gè)好的校園網(wǎng)站客觀條件要求無非上述幾點(diǎn)，所以我選擇了PhotoShop結(jié)合Dreamweaver、 ASP構(gòu)建我院學(xué)生處網(wǎng)站。第二章 網(wǎng)站總體分析與設(shè)計(jì)2.1 網(wǎng)站的系統(tǒng)分析根據(jù)前面的設(shè)計(jì)思想進(jìn)行分析，按照系統(tǒng)開發(fā)的基本觀點(diǎn)對(duì)網(wǎng)站進(jìn)行分解，從個(gè)人愛好和網(wǎng)絡(luò)素材的準(zhǔn)備,站點(diǎn)可主要分以下的幾方面:1、 網(wǎng)絡(luò)介紹2、 網(wǎng)絡(luò)安全3、 網(wǎng)絡(luò)駕校4、

16、 免費(fèi)資源5、 網(wǎng)絡(luò)病毒 6、網(wǎng)絡(luò)詞典 7、個(gè)人作品8、給我留言2.2 資料的搜集工作互連網(wǎng)覆蓋范圍越來越大，發(fā)展越來越迅速正是因?yàn)樗胸S富的資源。我在網(wǎng)站建設(shè)中確定好主題之后，就要搜集和主題相關(guān)的資料來豐富網(wǎng)站了。其中網(wǎng)站的資料搜集主要有以下兩個(gè)途徑：1、網(wǎng)絡(luò)搜集:本站點(diǎn)中的主要的內(nèi)容主要是通過網(wǎng)絡(luò)的搜索而來的本站點(diǎn)中的,例如站點(diǎn)中的網(wǎng)絡(luò)知識(shí),網(wǎng)絡(luò)病毒都是通過網(wǎng)絡(luò)搜索來的.2、電腦報(bào)的利用:站點(diǎn)中的免費(fèi)資源主要是我平時(shí)通過電腦報(bào)所累計(jì)起來的,正好在此的制作中發(fā)揮了作用.3、個(gè)人的制作:我的個(gè)人作品都是我的個(gè)人作品,還有就 是站點(diǎn)中的圖片和背景的制作都是本人的制作.2.3主頁設(shè)計(jì)一、定位網(wǎng)站的

17、CI形象 所謂CI(corporate identity)，意思是通過視覺來統(tǒng)一企業(yè)的形象。一個(gè)杰出的網(wǎng)站，和實(shí)體公司一樣，需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的，有創(chuàng)意的CI設(shè)計(jì)，對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。網(wǎng)站的CI形象設(shè)計(jì)具體包含以下幾個(gè)方面：1、設(shè)計(jì)網(wǎng)站的標(biāo)志(logo)網(wǎng)站的標(biāo)志就如同商標(biāo)一樣，是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)，是站點(diǎn)文化的濃縮，成功的網(wǎng)站標(biāo)志有看見標(biāo)志就讓大家聯(lián)想起站點(diǎn)的功效。而標(biāo)志的設(shè)計(jì)創(chuàng)意來自網(wǎng)站的名稱和內(nèi)容.本站的站標(biāo):2、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩色彩是藝術(shù)表現(xiàn)的要素之一，它是光刺激眼睛再傳導(dǎo)到大腦中樞產(chǎn)生的一種感覺。而網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是

18、相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。3、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體和標(biāo)準(zhǔn)色彩設(shè)計(jì)一樣，設(shè)計(jì)網(wǎng)站字體也是網(wǎng)頁內(nèi)涵的一種表現(xiàn)，合適的字體會(huì)讓人感覺到美觀、親切，會(huì)讓人心里感覺舒適。所謂標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體。有時(shí)為了體現(xiàn)站點(diǎn)的與眾不同和特有風(fēng)格，我們可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用加粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。本站的標(biāo)準(zhǔn)字體是宋體9號(hào)字。4、設(shè)計(jì)網(wǎng)站基本框架網(wǎng)站的基本結(jié)構(gòu)很重要,一個(gè)站點(diǎn)的基本框架也就是站點(diǎn)的外表,它就好比是人的外表,本站點(diǎn)的基本框架其實(shí)很簡

19、單的,就也是個(gè)表格的綜合利用,它是有兩個(gè)圖片和一個(gè)表格背景組成的.也就是一個(gè)標(biāo)準(zhǔn)的結(jié)構(gòu).5、網(wǎng)站特殊效果站點(diǎn)中的特殊效果就好比是一個(gè)站點(diǎn)中的美化,在站點(diǎn)中利用一定的特殊效果可以給你的站點(diǎn)增添無限錦繡.例如本站點(diǎn)中用到了幾個(gè)java小程序.例如在站點(diǎn)中利用到調(diào)用本地計(jì)算機(jī)時(shí)間和收藏本站點(diǎn)和滾屏的效果,給本站增添了不少風(fēng)采.2.5 留言板的設(shè)計(jì)在一個(gè)好的站點(diǎn)中，一個(gè)留言板做為瀏覽者和設(shè)計(jì)者是橋梁，它是必不可少的一個(gè)欄目之一。留言板，它的好壞也關(guān)系著站點(diǎn)好壞，一個(gè)好的留言板應(yīng)當(dāng)具有一定的功能：注冊帳號(hào)，登陸界面，簽寫留言，斑竹修改等是必須具備的。對(duì)于其它的功能一般可有可無，在這里有個(gè)人的能力有限，有

20、很多的不足之處，還忘讀者能多多的提出建議。留言板的設(shè)計(jì)，做為一個(gè)好的站點(diǎn)，留言板一般都會(huì)給讀者一個(gè)好的界面，一個(gè)和諧、溫馨的界面。第三章：詳細(xì)設(shè)計(jì)3.1 利用DreamweaverMX調(diào)整設(shè)計(jì)3.2部分網(wǎng)頁效果截圖3.3 留言板的設(shè)計(jì)3.4 設(shè)計(jì)代碼第四章：參考文獻(xiàn)4.1 HTML常用代碼全寫： HyperText Mark-up Language 譯名： 超文件注標(biāo)式語言（譯名之一） 簡釋：一種為普通文件中某些字句加上標(biāo)示的語言，其目的在于運(yùn)用標(biāo)記（tag）使文件達(dá)到預(yù)期的顯示效果。 HTML 是在 SGML 定義下的一個(gè)描述性語言，或可說 HTML 是 SGML 的一個(gè)應(yīng)用程式，HTML

21、不是程式語言，如 C+ 和 Java 之類，它只是標(biāo)示語言，基本上你只要明白了各種 標(biāo)記的用法便算學(xué)懂了 HTML，HTML 的格式非常簡單，只是由文字及標(biāo)記組合而成，于 編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當(dāng)然 以專業(yè)的網(wǎng)頁編輯軟件為佳。 閱讀須知： 這一篇【HTML剖析】偏重于標(biāo)記的介紹，考慮到易懂及每節(jié)的篇幅問題，我并不按 W3C 的 HTML 分類，這可令你更易選擇有興趣的標(biāo)記，其中只有【文件標(biāo)記】是必讀的，其 余可任意選擇。這一篇不會(huì)提及任何網(wǎng)頁編輯軟件，只要掌握了 HTML ，任何網(wǎng)頁 編輯工具都可以變成一把利器。 標(biāo)記寫法： 任何標(biāo)記皆

22、由所圍住，如 標(biāo)記名與小于號(hào)之間不能留有空白字符。 某些標(biāo)記要加上參數(shù)，某些則不必。如 Hello 參數(shù)只可加于起始標(biāo)記中。 在起始標(biāo)記之標(biāo)記名前加上符號(hào)/便是其終結(jié)標(biāo)記，如 標(biāo)記字母大小寫皆可。 圍堵標(biāo)記與空標(biāo)記： 標(biāo)記按型態(tài)分為圍堵標(biāo)記與空標(biāo)記 圍堵標(biāo)記 顧名思義，它以起始標(biāo)記及終結(jié)標(biāo)記將文字圍住，令其達(dá)到預(yù)期顯示效果。 例如 HTML Source ： Creation of Webpage is my favourite. 顯示成： Creation of Webpage is my favourite. 其中 便稱為圍堵標(biāo)記。 它以起始標(biāo)記及終結(jié)標(biāo)記標(biāo)示文字 Creation of

23、webpage ，令它顯示成粗體，兩者失其一都會(huì)發(fā)生錯(cuò)誤顯示。 空標(biāo)記 是指標(biāo)記單獨(dú)出現(xiàn)，只有起始標(biāo)記沒有終結(jié)標(biāo)記。 例如 HTML Source： I love Creation of Webpage.Its a wonderful place. 顯示成： I love Creation of Webpage. Its a wonderful place. 其中換行標(biāo)記便屬空標(biāo)記。 它的作用便是將標(biāo)記后所有東西顯示于下一行，可見終結(jié)標(biāo)記于它是沒意義的， 但有些人會(huì)為空標(biāo)記加上終結(jié)標(biāo)記，這是為方便記認(rèn)而己，對(duì) HTML 沒有影響。 4.2 CSS的簡單介紹和使用CSS 樣式，全稱是級(jí)聯(lián)樣式表，

24、即：Cascading Style Sheets(層疊樣式表)，是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。它不僅可控制單個(gè)文檔中的文本格式，還可控制多個(gè)文檔的文本格式，當(dāng)CSS樣式更新時(shí)，所有使用CSS樣式的文檔自動(dòng)更新。1.Type類型面板：font,通常為宋體；Size,通常為9號(hào)字；line(行高)；color(顏色)；Decoration(裝飾線)，含underline(下劃線),overline（上劃線）,line-through（刪除線）,blink（閃爍）；style 中包括Italic(斜體),Oblique(粗體),Weight(粗細(xì)),Case(大小寫),Captalizes(首字母大小寫

25、).2.Background(背景)面板:background color/Image Repeat:當(dāng)背景圖象不足以填滿頁面時(shí),決定是否和如何重復(fù). Attachment(附著):最初位置還是同內(nèi)容一起滾動(dòng). Horizontal Position Vertial Position: 指訂背景圖象相對(duì)于文檔窗口而不是相 對(duì)于元素.3.Block（文本塊）：含有Word Spacing(字間距),letter Spacing(字母間距),text Align(文本對(duì)齊),Text Indent(文本縮進(jìn)),Whitespace(白色空格)。4.Box(框):Windth和Height:只有應(yīng)用

26、于圖象和層時(shí)，才會(huì)顯示該屬性。 Float(浮動(dòng))：移動(dòng)元素（頁面不動(dòng)）將其放在頁面邊緣的左側(cè)或右側(cè)其他環(huán)繞元素保持正常。只有應(yīng)用于IMG標(biāo)簽時(shí)，窗口才顯示。Clear:定義元素的哪一邊不允許有層。Padding(填充)：定義元素內(nèi)容和邊框（無邊框?yàn)檫吘墸┖驮刂g的大小。Margin(邊緣)：定義元素邊框和其它元素之間的空間大小。5.Border(邊框)：包含Width,Top,Right,Bottom,Left,Thin,Medium(中等)，Thick,Auto,Value等選項(xiàng)6.List（列表框）：文檔窗口不顯示該屬性Type：決定項(xiàng)目符號(hào)或編號(hào)的外觀。 Bullet（項(xiàng)目符號(hào)圖象）

27、Position：列表換行時(shí)是縮進(jìn)還是邊緣對(duì)齊。7.Position(定位)： Type 決定瀏覽器定位層的方式；Absolute對(duì)于頁面做上角的坐標(biāo)放置層； Visbility(可見性)，Inherit（繼承），Visible（可見），Hidder（隱藏）；Z-Index（Z索引）；Overfolw：決定層的內(nèi)容超出其大小時(shí)的處理方式；Placement（位置）8.Extensions（擴(kuò)展）：Page break（換頁）：由打印到樣式所控制的對(duì)象時(shí)強(qiáng)行換頁。Cursor（光標(biāo)）：Internet Explorer 4支持。Filter（濾鏡）：4.0以上的版本支持。CSS選擇器：Activ

28、e,選中超級(jí)鏈接時(shí)的狀態(tài)；Hover,光標(biāo)移上超級(jí)鏈接的狀態(tài)；Link:超級(jí)鏈接的正常狀態(tài)，沒有任何動(dòng)作；Visited,訪問過的超級(jí)鏈接的狀態(tài)。4.3設(shè)計(jì)總結(jié)在這次的畢業(yè)設(shè)計(jì)中，我首先感謝我的指導(dǎo)老師的精心指導(dǎo)。我的實(shí)習(xí)題目是一個(gè)網(wǎng)站的制作。在這次的實(shí)習(xí)中，本來我是想做個(gè)數(shù)據(jù)庫查詢什么的站點(diǎn)，但我看大家做的大多數(shù)都是那個(gè)東西，由于我本人對(duì)網(wǎng)絡(luò)比較愛好，所以 我就做了個(gè)網(wǎng)絡(luò)知識(shí)方面的個(gè)人站點(diǎn)，在制作中，我發(fā)現(xiàn)到很多的問題，有很多的知識(shí)我都是掌握的不牢固，所以制作的工程就進(jìn)行的很是緩慢，在實(shí)習(xí)中使我更好的學(xué)習(xí)了dream的使用，以及asp和數(shù)據(jù)庫的簡單使用。在實(shí)習(xí)中使我學(xué)習(xí)最多的就是dream中的css的使用以及圖層和表格的巧妙使用。再一個(gè)就是，在站點(diǎn)制作中，本來是沒有網(wǎng)絡(luò)病毒這個(gè)欄目，那個(gè)我在制作中，發(fā)現(xiàn)學(xué)校機(jī)房的病毒真的是太多，而我的站點(diǎn)也曾多次的被感染病毒，所以就做了個(gè)網(wǎng)絡(luò)病毒這個(gè)欄目，以便大家對(duì)那些病毒有真多的了解和保護(hù)自己的文件。tgKQcWA3PtGZ7R4I30kA1DkaGhn3XtKknBYCUDxqA7FHYi2CHhI92tgKQcWA3PtGshLs50cLmTWN60eo8Wgqv7XAv2OH