畢業(yè)論文---網(wǎng)頁設(shè)計(jì)與發(fā)布

1、<p><b>　　網(wǎng)頁設(shè)計(jì)與發(fā)布</b></p><p><b>　　摘 要</b></p><p>　　進(jìn)入二十一世紀(jì)，隨著國際互聯(lián)網(wǎng)絡(luò)的普及和應(yīng)用，首先是互聯(lián)網(wǎng)絡(luò)正在不斷改變著人們的生活方式和生產(chǎn)方式，也改變著打工者的生活方式，當(dāng)今社會(huì)也有越來越多的人在網(wǎng)上尋找工作機(jī)會(huì)，而擁有打工者網(wǎng)站就是更需要的呢。</p>&l

2、t;p>　　本網(wǎng)頁主要以藍(lán)色為主，為打工者們創(chuàng)造了一個(gè)溫馨的大家庭。在此網(wǎng)站人們可以找到自己所需要的招工信息。在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。本文從網(wǎng)頁設(shè)計(jì)的角度出發(fā)，介紹一些設(shè)計(jì)中要素和技巧，例如框架、css樣式的使用等等。 </p><p>　　關(guān)鍵詞：網(wǎng)頁，數(shù)據(jù)庫，媒體，功能</p><p><b>　　ABSTRACT</b&g

3、t;</p><p>　　Entering the 21st century, with the international Internet application and popularization of the first Internet are constantly changing people's way of life and production style, also changed

4、 the migrant workers lifestyle, today's society is more and more people are seeking work online, and have more need of migrant workers website is?</p><p>　　The key to the blue, for the workers made a coz

5、y family. in this web site can be found himself to the vacancy information. in the rapid development of information technology, obtain information of the more is coming from the internet. from the web page design perspec

6、tive, the introduction of some design elements and techniques, such as the framework, css styles to use, etc. </p><p>　　Keywords: web pages,database, media, function</p><p><b>　　目錄</b&g

7、t;</p><p><b>　　1 引言1</b></p><p>　　2 網(wǎng)頁設(shè)計(jì)基礎(chǔ)1</p><p>　　2.1 網(wǎng)頁圖像設(shè)計(jì)工具——Photoshop CS3、Fireworks 8.01</p><p>　　2.2 動(dòng)畫制作工具——Flash MX 20041</p><p>

8、　　2.3 網(wǎng)頁排版工具—— Macromedia Dreamweaver 81</p><p>　　2.3.1 B/S結(jié)構(gòu)介紹2</p><p>　　2.3.2 ACCESS 數(shù)據(jù)庫3</p><p>　　2.3.3 ASP 技術(shù)3</p><p>　　3 網(wǎng)頁設(shè)計(jì)總體規(guī)劃3</p><p>　　3.1 總

9、體功能需求分析3</p><p>　　3.2 網(wǎng)頁版面規(guī)劃4</p><p>　　3.3網(wǎng)站CI形象設(shè)計(jì)5</p><p>　　3.4 網(wǎng)頁布局技術(shù)5</p><p>　　3.4.1 HTML5</p><p>　　3.4.2 Css7</p><p>　　3.4.3 Javasc

10、ript9</p><p>　　4 網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)9</p><p>　　4.1 數(shù)據(jù)庫的設(shè)計(jì)9</p><p>　　4.2 后臺(tái)登錄界面設(shè)計(jì)10</p><p>　　4.3 用戶管理頁面設(shè)計(jì)10</p><p>　　4.4 信息檢索頁面設(shè)計(jì)10</p><p>　　4.5 后臺(tái)管理

11、頁面設(shè)計(jì)10</p><p>　　5 網(wǎng)頁測試與發(fā)布10</p><p>　　5.1 測試網(wǎng)站的建立10</p><p>　　5.1.1. 測試網(wǎng)站環(huán)境10</p><p>　　5.1.2. Web服務(wù)器IIS5.1簡介11</p><p>　　5.1.3. 網(wǎng)頁測試11</p><p&

12、gt;　　5.2 網(wǎng)頁發(fā)布及網(wǎng)站維護(hù)11</p><p><b>　　6 結(jié) 論12</b></p><p><b>　　[參考文獻(xiàn)]13</b></p><p><b>　　致 謝14</b></p><p><b>　　1 引 言</b><

13、;/p><p>　　當(dāng)今社會(huì)迅猛發(fā)展,可隨之引發(fā)的社會(huì)問題也越來越突出。在一所大城市里，許許多多的打工者沒有家，或者有的只是那一間比家里廁所還小的房子，或者睡在地下室。</p><p>　　計(jì)算機(jī)網(wǎng)絡(luò)作為一種先進(jìn)的信息傳輸媒體，其特點(diǎn)就是信息傳送速度快、信息覆蓋面廣而且成本低，可以更方便的給人們提供更好的信息資源，此時(shí)制作一個(gè)制作一個(gè)動(dòng)態(tài)網(wǎng)頁“打工者之家”網(wǎng)站，為在外地奔波的打工者提供更快的工

14、作信息渠道</p><p><b>　　2 網(wǎng)頁設(shè)計(jì)基礎(chǔ)</b></p><p>　　在眾多的網(wǎng)頁設(shè)計(jì)與制作工具軟件中，我根據(jù)實(shí)際需求及對軟件的熟悉程度，主要選取了Photoshop CS3、Fireworks 8.0、Flash MX 2004、Macromedia Dreamweaver8進(jìn)行網(wǎng)頁的開發(fā)和制作，這些軟件的主要特點(diǎn)分述如下。</p>&

15、lt;p>　　2.1 網(wǎng)頁圖像設(shè)計(jì)工具——Photoshop CS3、Fireworks 8.0</p><p>　　在網(wǎng)頁制作過程中，首先要使用Photoshop或Fireworks 設(shè)計(jì)網(wǎng)頁和整體效果圖、處理網(wǎng)頁中的圖像、背景圖及網(wǎng)頁的圖標(biāo)、按鈕等。Photoshop是平面圖像處理業(yè)界霸主Adobe公司推出的跨越PC和MAC兩界首屈一指的大型圖像處理軟件.它功能強(qiáng)大,操作界面友好,得到了廣大第三方開發(fā)廠

16、家的支持,從而也贏得了眾多的用戶的青睞。Fireworks是Adobe公司推出的著名平面圖像設(shè)計(jì)和圖像處理軟件，它具有強(qiáng)大的圖像處理功能和操作易用性，受到廣大平面圖形設(shè)計(jì)人員及專業(yè)廣告設(shè)計(jì)師的青睞。它涉及圖像合成、色彩校正、圖層調(diào)板、通道使用、動(dòng)作調(diào)板、路徑工具、濾鏡等圖像處理功能。可制作如按鈕制作、文字特效、材質(zhì)紋理、三維物體、影像特效及廣告創(chuàng)意設(shè)計(jì)等多種用途。</p><p>　　2.2 動(dòng)畫制作工具——Fl

17、ash MX 2004</p><p>　　Flash MX 2004是Macromedia公司的一個(gè)的網(wǎng)頁交互動(dòng)畫制作工具。用flash制作出來的動(dòng)化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 用flash制作的文件很小，這樣便于在互聯(lián)網(wǎng)上傳輸，它還采用了數(shù)據(jù)流技術(shù)，只要下載一部分，就能欣賞動(dòng)畫，而且能一邊播放一邊傳輸數(shù)據(jù)。 交互性更是flash動(dòng)畫的迷人之處，可以通過點(diǎn)擊按鈕、選擇菜單來控制動(dòng)畫的播放，這

18、些優(yōu)點(diǎn)使flash日益成為網(wǎng)絡(luò)多媒體的主流。</p><p>　　2.3 網(wǎng)頁排版工具—— Macromedia Dreamweaver 8</p><p>　　Macromedia Dreamweaver 8是由Macromedia公司推出的，用于網(wǎng)頁開發(fā)和網(wǎng)站管理的專業(yè)化設(shè)計(jì)工具。它采用了多種新技術(shù)，具有設(shè)計(jì)和開發(fā)網(wǎng)站過程中需要的網(wǎng)站管理、網(wǎng)站設(shè)計(jì)、頁面制作、多媒體制作和動(dòng)畫制作等豐富

19、實(shí)用的功能；它具有友好的操作界面，在文檔窗口中可以打開各種浮動(dòng)面板，同時(shí)還可以使用系統(tǒng)內(nèi)置的多種對象進(jìn)行操作。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，其功能強(qiáng)大，使得各個(gè)層次的開發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。開發(fā)人員可以使用 Dreamweaver 及所選擇的服務(wù)器技術(shù)來創(chuàng)建功能強(qiáng)大的 Internet 應(yīng)用程序，從而使用戶能連接到數(shù)據(jù)庫、Web 服務(wù)。</p>&

20、lt;p>　　2.3.1 B/S結(jié)構(gòu)介紹</p><p>　　B/S（Browser/Server，簡稱B/S）結(jié)構(gòu)，即瀏覽器/服務(wù)器模式，它是WEB興起后的一種網(wǎng)絡(luò)結(jié)構(gòu)模式，從傳統(tǒng)的二層C/S結(jié)構(gòu)發(fā)展而來，通常采用三層結(jié)構(gòu)：瀏覽器-Web服務(wù)器-數(shù)據(jù)庫服務(wù)器，WEB瀏覽器是客戶端最主要的應(yīng)用軟件，瀏覽器通過Web Server 同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互。</p><p>　　在B／S體

21、系結(jié)構(gòu)系統(tǒng)中，用戶通過瀏覽器向分布在網(wǎng)絡(luò)上的許多服務(wù)器發(fā)出請求，服務(wù)器對瀏覽器的請求進(jìn)行處理，將用戶所需信息返回到瀏覽器。而其余如數(shù)據(jù)請求、加工、結(jié)果返回以及動(dòng)態(tài)網(wǎng)頁生成、對數(shù)據(jù)庫的訪問和應(yīng)用程序的執(zhí)行等工作全部由Web Server完成，這樣大大簡化了客戶端，減輕了系統(tǒng)維護(hù)與升級的成本和工作量，降低了用戶的總體擁有成本（TCO）。B／S體系結(jié)構(gòu)系統(tǒng)如圖2-1所示：</p><p>　　圖2-1 B／S體系結(jié)構(gòu)系

22、統(tǒng)</p><p>　　2.3.2 ACCESS 數(shù)據(jù)庫</p><p>　　Access是微軟公司推出的基于Windows的桌面關(guān)系數(shù)據(jù)庫管理系統(tǒng)（RDBMS），是Office系列應(yīng)用軟件之一。它提供了表、查詢、窗體、報(bào)表、頁、宏、模塊7種用來建立數(shù)據(jù)庫系統(tǒng)的對象；提供了多種向?qū)?、生成器、模板，把?shù)據(jù)存儲(chǔ)、數(shù)據(jù)查詢、界面設(shè)計(jì)、報(bào)表生成等操作規(guī)范化；為建立功能完善的數(shù)據(jù)庫管理系統(tǒng)提供了方便

23、，也使得普通用戶不必編寫代碼，就可以完成大部分?jǐn)?shù)據(jù)管理的任務(wù)。由于Access數(shù)據(jù)庫的ODBC驅(qū)動(dòng)程序支持的SQL指令全，執(zhí)行效率高，所以Access后臺(tái)數(shù)據(jù)庫 ASP服務(wù)器端程序 客戶端IE瀏覽器，是一個(gè)精練、實(shí)用、高效的組合模式。</p><p>　　2.3.3 ASP 技術(shù)</p><p>　　ASP是Active Server Page的縮寫，意為“動(dòng)態(tài)服務(wù)器頁面”。ASP是微軟公

24、司開發(fā)的代替CGI腳本程序的一種應(yīng)用，它可以與數(shù)據(jù)庫和其它程序進(jìn)行交互，是一種簡單、方便的編程工具。ASP的網(wǎng)頁文件的格式是.asp，現(xiàn)在常用于各種動(dòng)態(tài)網(wǎng)站中。ASP是一種服務(wù)器端腳本編寫環(huán)境，可以用來創(chuàng)建和運(yùn)行動(dòng)態(tài)網(wǎng)頁或Web應(yīng)用程序。ASP網(wǎng)頁可以包含HTML標(biāo)記、普通文本、腳本命令以及COM組件等。利用ASP可以向網(wǎng)頁中添加交互式內(nèi)容（如在線表單），也可以創(chuàng)建使用HTML網(wǎng)頁作為用戶界面的web應(yīng)用程序。與HTML相比，ASP網(wǎng)頁

25、具有實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁技術(shù)；包含在HTML代碼所組成的文件中，易于修改和測試；可以使用服務(wù)器端ActiveX組件來執(zhí)行各種各樣的任務(wù)；方便連接ACCESS與SQL數(shù)據(jù)庫等多種優(yōu)點(diǎn)，其主要缺點(diǎn)是開發(fā)人員要有豐富的經(jīng)驗(yàn)，否則會(huì)留出漏洞，讓黑客利用進(jìn)行注入攻擊。安裝ASP時(shí)，系統(tǒng)提供了兩種腳本語言：VBScript和JScript，而VBScript則被作為系統(tǒng)默認(rèn)的腳本語言。</p><p>　　3 網(wǎng)頁設(shè)計(jì)總體規(guī)劃<

26、;/p><p>　　3.1 總體功能需求分析</p><p>　　網(wǎng)頁功能分析就是以系統(tǒng)的觀點(diǎn)，對已選定的對象與開發(fā)范圍進(jìn)行有目的、有步驟的實(shí)際調(diào)查和科學(xué)分析。分析的目的就是要弄清楚網(wǎng)頁要做什么，最終為后面的設(shè)計(jì)工作打下基礎(chǔ)。</p><p>　　該網(wǎng)頁作為“打工者之家”服務(wù)平臺(tái)，具有信息發(fā)布、網(wǎng)上辦事功能、訪客留言等功能。</p><p>&l

27、t;b>　　1.信息發(fā)布</b></p><p>　　進(jìn)入二十一世紀(jì)，隨著國際互聯(lián)網(wǎng)絡(luò)的普及和應(yīng)用，首先是互聯(lián)網(wǎng)絡(luò)正在不斷改變著人們的生活方式和生產(chǎn)方式，也改變著打工者的生活方式，當(dāng)今社會(huì)也有越來越多的人在網(wǎng)上尋找工作機(jī)會(huì)，而擁有打工者網(wǎng)站就顯得更需要的了。</p><p><b>　　2.網(wǎng)站辦事功能</b></p><p>

28、;　　提供發(fā)布工作信息，可以讓打工族可以盡快的找到自己滿意的工作，盡快的在外地落腳。</p><p><b>　　3.訪客留言功能</b></p><p>　　通過訪客留言交平臺(tái)，讓打工者能夠?qū)⒆约旱慕ㄗh與意見直接反應(yīng)出來，讓社會(huì)更多的關(guān)心打工者就業(yè)情況，以及生活狀況。</p><p>　　3.2 網(wǎng)頁具體功能模塊需求分析</p>

29、<p>　　根據(jù)總體功能需求分析,該部門網(wǎng)頁確定信息發(fā)布、工作動(dòng)態(tài)、網(wǎng)上交流等三大功能模塊</p><p><b>　　1. 信息發(fā)布功能</b></p><p>　　網(wǎng)站的管理員發(fā)布最新工作消息為那些急需工作的打工者提供更有價(jià)值的信息。</p><p><b>　　2. 網(wǎng)站辦事功能</b></p>

30、;<p>　　模塊設(shè)置便民服務(wù)、服務(wù)流程、資料下載、統(tǒng)計(jì)報(bào)表四個(gè)子模塊，將該部門能夠進(jìn)行網(wǎng)上辦理的相關(guān)行政審批事項(xiàng)予以了公開，方便了群眾，提高了辦事效率，提升了部門形象。</p><p><b>　　3. 網(wǎng)上交流功能</b></p><p><b>　　(1)在線交流模塊</b></p><p>　　模塊設(shè)

31、置：打工者論壇、咨詢留言、網(wǎng)上調(diào)查三個(gè)子模塊。打工者論壇子模塊為打工者之間相互交流提供了平臺(tái)。咨詢留言、網(wǎng)上調(diào)查即使了解打工者的就業(yè)趨勢。</p><p><b>　　(2)聯(lián)系我們模塊</b></p><p>　　該模塊主要功能：收集網(wǎng)站的反饋信息。</p><p>　　3.3 網(wǎng)頁版面規(guī)劃</p><p>　　全部網(wǎng)

32、頁采用1024×768分辨率制成，網(wǎng)頁訪問采用首頁、導(dǎo)航頁和新聞頁三級頁面形式。</p><p><b>　　1.首頁</b></p><p>　　首頁使用的是國字型結(jié)構(gòu)布局。 國字型結(jié)構(gòu)布局是一些大型網(wǎng)站所喜歡的類型,即最上面是網(wǎng)站的標(biāo)題 主菜單,下半部分分為3個(gè)區(qū)域,左右分列一些兩小條內(nèi)容,中間是主題內(nèi)容,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息,

33、聯(lián)系方式,版權(quán)聲明等。這種布局的優(yōu)點(diǎn)是能夠充分利用版面,信息量大;缺點(diǎn)是頁面擁擠,不夠靈活。</p><p><b>　　2.導(dǎo)航頁</b></p><p>　　采用拐角型布局，優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰,主次分明,缺點(diǎn)是規(guī)矩呆板，容易讓人“看之無味。</p><p><b>　　3.新聞頁</b></p><

34、p>　　使用標(biāo)題正文型：這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文；本站子頁大部分是這個(gè)結(jié)構(gòu)。</p><p><b>　　4.頁頭</b></p><p>　　本站頁頭以900×150的打工者圖為底，右邊放置宣傳語（FLASH動(dòng)畫）一起構(gòu)成。</p><p>　　3.4網(wǎng)站CI形象設(shè)計(jì)</p><p

35、><b>　　1.主色調(diào)與色彩</b></p><p>　　網(wǎng)站采用代表了春天、希望田野的“綠色”為主色調(diào)，與打工者找到一份理想的工作性質(zhì)相吻合。</p><p><b>　　2.字體</b></p><p>　　導(dǎo)航欄字體為“黑體”,14px；網(wǎng)站主欄目字體為“宋體”,14 px；正文字體為“宋體”,9px 。&l

36、t;/p><p>　　3.5 網(wǎng)頁布局技術(shù)</p><p>　　網(wǎng)頁分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁兩種。靜態(tài)頁面是網(wǎng)頁的代碼都在頁面中，不需要執(zhí)行asp,php,jsp,.net等程序生成客戶端網(wǎng)頁代碼的網(wǎng)頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁常見的靜態(tài)頁面以.html、.htm為擴(kuò)展名的。動(dòng)態(tài)網(wǎng)頁是最常用的網(wǎng)站建設(shè)的一種表達(dá)形式，其優(yōu)點(diǎn)在于可以根據(jù)先前所制定好的程序界面，根據(jù)用戶的不同請求返回相應(yīng)的數(shù)

37、據(jù)。所以我將以四部分闡述我對網(wǎng)頁設(shè)計(jì)與制作的理解。首先是基于靜態(tài)網(wǎng)頁的html超文本標(biāo)記語言和css層疊樣式表，然后是基于動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)語言JavaScript。最后是我對JavaScript與cookie的應(yīng)用知識(shí)。</p><p>　　3.5.1 HTML</p><p><b>　?。?）HTML標(biāo)簽</b></p><p>　　HTML

38、 文檔和 HTML 元素是通過 HTML 標(biāo)簽進(jìn)行標(biāo)記的 </p><p>　　HTML 標(biāo)簽由開始標(biāo)簽和結(jié)束標(biāo)簽組成 </p><p>　　開始標(biāo)簽是被括號包圍的元素名 </p><p>　　結(jié)束標(biāo)簽是被括號包圍的斜杠和元素名 </p><p>　　某些 HTML 元素沒有結(jié)束標(biāo)簽，比如 <br /></p>&l

39、t;p><b>　?。?）HTML元素</b></p><p>　　HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。</p><p>　　HTML 元素以開始標(biāo)簽起始 </p><p>　　HTML 元素以結(jié)束標(biāo)簽終止 </p><p>　　元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽

40、之間的內(nèi)容 </p><p>　　某些 HTML 元素具有空內(nèi)容（empty content） </p><p>　　空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束） </p><p>　　大多數(shù) HTML 元素可擁有屬性 </p><p><b>　?。?）HTML屬性</b></p><p&g

41、t;　　HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。</p><p>　　屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。</p><p>　　屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。</p><p><b>　?。?）HTML段落</b></p><p&g

42、t;　　段落是通過 <p> 標(biāo)題定義的。</p><p>　　使用空的段落標(biāo)記 <p></p> 去插入一個(gè)空行是個(gè)壞習(xí)慣。用 <br /> 標(biāo)簽代替它！（但是不要用 <br /> 標(biāo)簽去創(chuàng)建列表。不要著急，您將在稍后的篇幅學(xué)習(xí)到 HTML 列表。）</p><p><b>　　（5）HTML樣式</b><

43、;/p><p>　　style 屬性的作用：</p><p>　　提供了一種改變所有 HTML 元素的樣式的通用方法。</p><p>　　樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨(dú)立的樣式表中（CSS 文件）進(jìn)行定義。</p&

44、gt;<p><b>　　（6）HTML鏈接</b></p><p>　　HTML 使用 <a> （錨）標(biāo)簽來創(chuàng)建連接另一個(gè)文檔的鏈接。</p><p>　　錨可以指向網(wǎng)絡(luò)上的任何資源：一張 HTML 頁面，一幅圖像，一個(gè)聲音或視頻文件等等。</p><p><b>　　（7）HTML表格</b>

45、</p><p>　　表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。</p><p><b>　?。?）HTML列表</

46、b></p><p><b>　　無序列表</b></p><p>　　無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。</p><p>　　無序列表始于 <ul> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。</p><p><b>　　有序列表</b>

47、</p><p>　　同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。</p><p>　　有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。</p><p><b>　?。?）HTML表單</b></p><p>　　表單是一個(gè)包含表單元素的區(qū)域。</p><

48、;p>　　表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。</p><p>　　表單使用表單標(biāo)簽（<form>）定義。</p><p>　?。?0）HTML框架</p><p>　　框架結(jié)構(gòu)標(biāo)簽（<frameset>）定義如何將窗口分割為框架 </p><p>　　每個(gè) f

49、rameset 定義了一系列行或列 </p><p>　　rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積 </p><p>　　3.5.2 Css</p><p>　?。?）Css基礎(chǔ)語法</p><p>　　CSS 語法由三部分構(gòu)成：選擇器、屬性和值：</p><p>　　selector {prop

50、erty: value}</p><p>　　選擇器 (selector) 通常是你希望定義的 HTML 元素或標(biāo)簽，屬性 (property) 是你希望改變的屬性，并且每個(gè)屬性都有一個(gè)值。屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個(gè)完整的樣式聲明（declaration）：</p><p>　　body {color: blue}</p><p>　　上面

51、這行代碼的作用是將 body 元素內(nèi)的文字顏色定義為藍(lán)色。在上述例子中，body 是選擇器，而包括在花括號內(nèi)的的部分是聲明。聲明依次由兩部分構(gòu)成：屬性和值，color 為屬性，blue 為值。</p><p><b>　?。?）派生選擇器</b></p><p>　　通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標(biāo)記更加簡潔。</p><p&

52、gt;　　在 CSS1 中，通過這種方式來應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由于它們依賴于上下文關(guān)系來應(yīng)用或者避免某項(xiàng)規(guī)則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。</p><p>　　派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。</

53、p><p>　　（3）Id和類選擇器</p><p>　　id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。</p><p>　　id 選擇器以 "#" 來定義。</p><p>　　下面的兩個(gè) id 選擇器，第一個(gè)可以定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色：</p><p>

54、;　　#red {color:red;}</p><p>　　#green {color:green;}</p><p>　　下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。</p><p>　　#sidebar p {</p><p>　　font-style:

55、italic;</p><p>　　text-align: right; </p><p>　　margin-top: 0.5em;</p><p><b>　　}</b></p><p>　　#sidebar h2 {</p><p>　　font-size: 1em;</p>&

56、lt;p>　　font-weight: normal;</p><p>　　font-style: italic;</p><p>　　margin: 0;</p><p>　　line-height: 1.5;</p><p>　　text-align: right;</p><p><b>　　}&

57、lt;/b></p><p>　　（4）Css框架型結(jié)構(gòu)</p><p>　　CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。</p><p>　　元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素

58、。</p><p>　　內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對所有元素進(jìn)行設(shè)置：</p><p>　　在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)

59、域的尺寸，但是會(huì)增加元素框的總尺寸。</p><p>　　假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素</p><p>　　網(wǎng)頁使用表格方式布局，同時(shí)用CSS進(jìn)行樣式控制。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔(dān)心不同對象之間的影響。表格布局的缺點(diǎn)是，當(dāng)我們用了過多表格時(shí)，頁面下載速

60、度受到影響。CSS層疊樣式表是W3C組織新近批準(zhǔn)的一個(gè)輔助HTML設(shè)計(jì)的新特性,它使整個(gè)HTML保持統(tǒng)一的外觀。過去在設(shè)置文本時(shí),為了保持整個(gè)段落都使用相同的外觀,不得不為每一段設(shè)置屬性,很麻煩。采用CSS可以在設(shè)置文本之前,就指定整個(gè)文本的屬性,比如顏色、字體大小等等,獲得統(tǒng)一的文本外觀。</p><p>　　3.5.3 Javascript</p><p>　　JavaScript 是

61、屬于網(wǎng)絡(luò)的腳本語言！</p><p>　　JavaScript 被數(shù)百萬計(jì)的網(wǎng)頁用來改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測瀏覽器、創(chuàng)建cookies，以及更多的應(yīng)用。</p><p>　　JavaScript 是因特網(wǎng)上最流行的腳本語言。</p><p>　　在數(shù)百萬張頁面中，JavaScript 被用來改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測瀏覽器、創(chuàng)建cookies，等等等等。</p&

62、gt;<p>　　JavaScript 是因特網(wǎng)上最流行的腳本語言，并且可在所有主要的瀏覽器中運(yùn)行，比方說 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。</p><p><b>　　4 網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)</b></p><p>　　4.1 數(shù)據(jù)庫的設(shè)計(jì)</p><p>　　

63、數(shù)據(jù)庫在一個(gè)網(wǎng)頁系統(tǒng)中占有非常重要的地位，數(shù)據(jù)庫的結(jié)構(gòu)好壞將直接影響到應(yīng)用系統(tǒng)的實(shí)現(xiàn)效果和數(shù)據(jù)操作效率以及能否保證數(shù)據(jù)的一致性、完整性和安全性。</p><p>　　數(shù)據(jù)庫概念設(shè)計(jì)的任務(wù)是根據(jù)用戶需求設(shè)計(jì)數(shù)據(jù)的概念數(shù)據(jù)模型，簡稱概念模型。概念模型是按用戶的觀點(diǎn)對數(shù)據(jù)和信息進(jìn)行建模，是從用戶的角度看到的數(shù)據(jù)庫，它可以用E-R模型來表示。構(gòu)成E-R圖的基本要素是實(shí)體型、屬性和關(guān)系，其表示方法為：實(shí)體型：用矩形表示，矩

64、形框內(nèi)寫明實(shí)體名；屬性：用橢圓形表示，并用無向邊將其與相應(yīng)的實(shí)體連接起來；關(guān)系：用菱形表示，菱形框內(nèi)寫明關(guān)系名，并用無向邊分別將有關(guān)實(shí)體連接起來，同時(shí)在無向邊旁標(biāo)上聯(lián)系的類型。</p><p>　　4.2 后臺(tái)登錄界面設(shè)計(jì)</p><p>　　設(shè)計(jì)思想：登錄頁面主要實(shí)現(xiàn)用戶的登錄。通過用戶名、密碼、隨機(jī)密碼、IP、SessionID的組合驗(yàn)證實(shí)現(xiàn)未登陸用戶的正常登陸和已登陸用戶中同一用戶名

65、允許在同一IP上重復(fù)登陸，拒絕同一用戶名在不同IP上重復(fù)登陸。</p><p>　　4.3 用戶管理頁面設(shè)計(jì)</p><p>　　設(shè)計(jì)思想：登錄頁面主要實(shí)現(xiàn)用戶的登錄，用戶有超級管理員、普通管理員。超級管理員可以對其進(jìn)行任何的操作，包括對普通管理員的增刪、密碼修改。一般用戶只可以做權(quán)限之內(nèi)的操作和只能對自身的信息作修改。 </p><p>　　4.4 信息檢索頁面設(shè)

66、計(jì)</p><p>　　設(shè)計(jì)思想：根據(jù)輸入的關(guān)鍵字實(shí)現(xiàn)單字段或多字段組合查詢。</p><p>　　4.5 后臺(tái)管理頁面設(shè)計(jì)</p><p>　　網(wǎng)站后臺(tái)管理系統(tǒng)提供了添加新聞內(nèi)容、管理全部新聞、領(lǐng)導(dǎo)信箱管理、在線咨詢管理、公眾留言管理、網(wǎng)上投訴管理、網(wǎng)上調(diào)查管理、信息中心管理、超級管理選項(xiàng)、文件上傳十個(gè)功能選擇項(xiàng)，可以完成新聞信息的在線編輯發(fā)布、咨詢留言的在線回復(fù)

67、、網(wǎng)上調(diào)查項(xiàng)的增減等管理任務(wù)。</p><p><b>　　5 網(wǎng)頁測試與發(fā)布</b></p><p>　　5.1 測試網(wǎng)站的建立</p><p>　　5.1.1. 測試網(wǎng)站環(huán)境</p><p>　　網(wǎng)頁測試使用本單位局域網(wǎng)進(jìn)行，配置如下：</p><p>　　服務(wù)器端：操作系統(tǒng)—Windows

68、xp</p><p>　　Web服務(wù)器—IIS5.1</p><p><b>　　瀏覽器—IE6.0</b></p><p>　　客戶端：Internet Explorer6.0</p><p>　　5.1.2. Web服務(wù)器IIS5.1簡介</p><p>　　IIS是Internet Info

69、rmation Services的縮寫，是目前使用最廣泛的Web服務(wù)器，可以在UNIX和Windows平臺(tái)上運(yùn)行。它與Windows NT Server完全集成，允許使用Windows NT Server內(nèi)置的安全性以及NTFS文件系統(tǒng)建立強(qiáng)大靈活的Internet／Intranet站點(diǎn)。IIS組件主要包括Web服務(wù)器、FTP服務(wù)器、NNTP服務(wù)器和SMTP服務(wù)器，分別用于網(wǎng)頁瀏覽、文件傳輸、新聞服務(wù)和郵件發(fā)送等方面。</p>

70、;<p>　　5.1.3. 網(wǎng)頁測試</p><p><b>　?。?） IIS配置</b></p><p>　　當(dāng)IIS被成功安裝后，將在計(jì)算機(jī)C:\Inetpub\wwwroot下新建一個(gè)默認(rèn)網(wǎng)站，通過修改默認(rèn)網(wǎng)站配置可以建立自己的站點(diǎn)。如自己的網(wǎng)頁放在D:\Wy目錄下，首頁文件名為Index.asp，其具體步驟如下：</p><

71、p>　　第一步：在“默認(rèn)Web站點(diǎn)”上單擊右鍵，選“屬性”，以進(jìn)入名為“默認(rèn)Web站點(diǎn)屬性”設(shè)置界面。 </p><p>　　第二步：轉(zhuǎn)到“主目錄”窗口，再在“本地路徑”輸入（或用“瀏覽”按鈕選擇）好自己網(wǎng)頁所在的“D:\Wy”目錄。 </p><p>　　第三步：轉(zhuǎn)到“文檔”窗口，再按“添加”按鈕，根據(jù)提示在“默認(rèn)文檔名”后輸入自己網(wǎng)頁的首頁文件名“Index.asp”。 <

72、/p><p>　　第四步：在“默認(rèn)Web站點(diǎn)”上單擊右鍵，選“新建→虛擬目錄”，依次在“別名”處輸入“test”，在“目錄”處輸入“D:\Wy”后再按提示操作。</p><p>　　（2）數(shù)據(jù)源（ODBC）配置</p><p>　　第一步：選擇控制面板中的管理工具打開數(shù)據(jù)源（ODBC）。</p><p>　　第二步：在選項(xiàng)卡系統(tǒng)DNS中添加Mic

73、rosoft Access Driver(*.mdb)驅(qū)動(dòng)并指定數(shù)據(jù)源為網(wǎng)站的數(shù)據(jù)庫文件。</p><p><b>　　（3） 測試</b></p><p>　　打開瀏覽器，直接在地址欄中輸入：http://localhost/test/index.asp或者h(yuǎn)ttp://127.0.0.1/test/index.asp即可。</p><p>

74、　　5.2 網(wǎng)頁發(fā)布及網(wǎng)站維護(hù)</p><p>　　在測試完成后，網(wǎng)頁就可以發(fā)布到互聯(lián)網(wǎng)上了，接下來要做的就是網(wǎng)站的日常維護(hù)了。網(wǎng)站維護(hù)就是對服務(wù)器及相關(guān)軟硬件的維護(hù)，對可能出現(xiàn)的問題進(jìn)行評估，制定響應(yīng)時(shí)間，制定相關(guān)維護(hù)規(guī)定，將網(wǎng)站維護(hù)制度化、規(guī)范化，主要包括以下內(nèi)容：</p><p>　?。?）即時(shí)更新新聞內(nèi)容</p><p>　?。?）留言、投訴、咨詢、信箱定期

75、回復(fù)</p><p>　　（3）數(shù)據(jù)庫內(nèi)容定期備份、刪減、分類</p><p>　?。?）更正數(shù)據(jù)庫使用過程中發(fā)現(xiàn)的問題</p><p>　　（5）定期進(jìn)行綜合分析，不斷優(yōu)化數(shù)據(jù)庫中數(shù)據(jù)結(jié)構(gòu)，提高使用效率</p><p>　?。?）在系統(tǒng)運(yùn)行過程中應(yīng)定期對管理員用戶名和密碼進(jìn)行更新，并對IIS和NT權(quán)限作相應(yīng)設(shè)置。</p>&l

76、t;p><b>　　6 結(jié)論</b></p><p>　　本次利用畢業(yè)設(shè)計(jì)的機(jī)會(huì)，為自己工作的單位設(shè)計(jì)了網(wǎng)頁。網(wǎng)頁使用ASP技術(shù)開發(fā)，具有良好的交互性能，具備強(qiáng)大的后臺(tái)管理功能。新聞發(fā)布、信息檢索、互動(dòng)交流等主要模塊設(shè)計(jì)做到了與單位職能職責(zé)的緊密結(jié)合，達(dá)到了預(yù)期設(shè)計(jì)目標(biāo)。網(wǎng)頁經(jīng)單位局域網(wǎng)多次測試，在WindowsXP操作系統(tǒng)，IIS5.1的服務(wù)器環(huán)境上正常運(yùn)行。 (責(zé)任編輯：論文圖書館

77、編輯04) ｛本文僅供參考，如需定制或指導(dǎo)原創(chuàng)論文，請聯(lián)系論文圖書館客服!｝</p><p>　　此次網(wǎng)頁制作，通過大量閱讀書籍和求助互聯(lián)網(wǎng)，使我初步掌握了網(wǎng)頁設(shè)計(jì)制作的一般過程、ASP簡單設(shè)計(jì)應(yīng)用、CSS和表單布局常識(shí)、ACCESS數(shù)據(jù)庫設(shè)計(jì)技能。掌握了許多新的知識(shí)和技巧，獲益良多。</p><p><b>　　[參考文獻(xiàn)]</b></p><p

78、>　　[1] 薛凱，康亞雄編著；Dreamweaver CS3 入門提高精通[M]；機(jī)械工業(yè)出版社 2008</p><p>　　[2] 洪光主編；Photoshop CS2 實(shí)用教程[M]；大連理工大學(xué)出版社</p><p>　　[3] 劉瑞新,汪遠(yuǎn)征編著；ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程[M]；機(jī)械工業(yè)出版社 2005</p><p>　　[4] 華信卓越編著；F

79、lash CS3動(dòng)畫制作[M]；電子工業(yè)出版社 2008</p><p>　　[5] 徐磊 編著；網(wǎng)頁制作與網(wǎng)站建設(shè)技術(shù)大全； 清華大學(xué)出版社。</p><p>　　[6] 楊繼萍，孫巖，梁文新編著；Access2007數(shù)據(jù)庫應(yīng)用與開發(fā)；清華大學(xué)出版社 2008</p><p>　　[7] 譚貞軍，劉斌編著；網(wǎng)頁制作從入門到精通；清華大學(xué)出版社 2008</p