1、里奧梅西的設計與制作 課程論文 （2016-2017學年第2學期）課程名稱：網站設計與網頁制作任課老師：崔松健姓名：xxx班級：15電子商務1班學號：33315133里奧梅西的設計與制作網頁制作和網站設計以知名球星里奧·梅西網站為例摘要 在信息技術飛速發展的今天，人們獲取信息的方式更多是來源于互聯網。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網頁，所以網頁設計尤為重要。互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。網頁設計伴隨著網絡的快速發展而快速興起，作為上網的主要依托，由于人們使用網絡的頻繁而變得非常的重要

2、。網頁講究的是排版布局，其功能主要就是提供一種形式給每個上網者，讓他們能夠了解網站提供的信息。隨著計算機技術的快速發展和計算機網絡的普及，制作網頁已經不再是遙不可及的夢想。 不僅商業公司、各企事業單位紛紛建立網站，利用網絡來宣傳自己，越來越多的個人也希望在廣闊的網絡世界里擁有自己的一片天地。同時，高校也將網頁制作這一門學科當作基礎性課程放置在教學計中。由此可見，網頁制作知識越越來越重要，越來越普及。本網站設計的宗旨在于通過對搜集到的著名球星里奧梅西的各種信息與資料多方面，多角度的呈現，使廣大球迷能夠更加全面完整地了解梅西。我們還會不定期實時更新數據信息，確保廣大球迷都能夠接受到最新資訊。 關鍵

3、詞:；ASP；網頁制作；網站設計；里奧·梅西目錄 摘 要 (1) 第一章. 緒論 (4) 1.1 網頁制作的背景和意義 (4) 1.2 相關術語的闡述 (5) 第二章. 網頁開發環境及數據庫概述 (6) 2.1 網頁環境的開發 (6) 2.2 ASP和ADO簡介 (6) 2.2.1 ASP產生的歷史環境 (6) 2.2.2 ADO對象 (9) 2.3 網頁圖像設計工具photoshop (10) 2.4 網頁頁面設計工具Dreamweave (11) 第三章. 網頁需求分析 (12) 3.1 可行性分析 (12) 3.1.1.網頁的界面設計 (12) 3.2 網站需求分析 (12)

4、3.2.1.網站主題確立與建站目的 (13) 3.2.2.網站實現功能 (13) 第四章. 網站的總體規劃 (13) 4.1 制作網頁的一般步驟 (13) 4.2 網頁包括的元素 (14) 4.3 網頁層次結構 (16) 4.4目錄的層次結構 (16)4.5網頁設計的相關步驟 (17)4.6網頁制作的效果展示 (19)第五章需要解決的幾個關鍵問題 (27)5.1 數據庫技術 (27)5.2 數據庫連接技術 (27)5.3 數據庫寫入技術 (28)5.4 數據庫讀取技術 (29)5.5 記錄集合的錄入 (30)第六章 網頁測試 (30)6.1 測試網站 (31)6.2 測試發布及網站維護 (31

5、)結 論(33)致 謝(34)參 考 文 獻(35) 第一章 緒論1.1 網頁制作的背景和意義我們讀書就是為了獲得知識，現在我們學習了ASP動態網頁設計，當然就是要能做一個精美的網頁。在此次畢業設計中，我們要能更加的了解Dreameaver強大的功能和更好的使用它。通過此次設計我們還要能夠知道靜態網頁和動態網也的區別。誠然，次此設計的個人網頁，一方面是為了完成畢業作業，但更重要的是把我們所學到的東西用在具體的實踐之中，所以，這次設計的目的也是要我們更好的掌握和使用好ASP的核心工具和技術，以便提高對網頁知識的更深層了解。第三點也是最要的一點是，把我們在書本上學到的知識充分運用到此次設計之中。使

6、我們的在書上學到的東西不僅僅停留在表面上，把這些東西都用在所要做的網頁上面。以達到老師要求的效果和學以致用。Internet是目前世界上最大的計算機互聯網絡，它遍布全球，將世界各地各種規模的網絡連接成一個整體。作為Internet上一種先進的，易于被人們所接受的信息檢索手段，World Wide Web(簡稱WWW)發展十分迅速，成為目前世界上最大的信息資源寶庫。據估計，目前Internet上已有上百萬個Web站點，其內容范圍跨越了教育科研、文化事業、金融、商業、新聞出版、娛樂、體育等各個領域，其用戶群十分龐大，因此，建設一個好的Web站點對于一個機構的發展十分重要。近年來，隨著網絡用戶要求的

7、不斷提高及計算機科學的迅速發展，特別是數據庫技術在Internet中的廣泛應用，Web站點向用戶提供的服務將越來越豐富，越來越人性化。我們發現這樣一個事實，一個用戶在訪問一個網站時一般來講只對該網站的部分內容感性趣，而且這種興趣會持續一段時間。這點啟發了我們，如果能根據用戶的喜好為不同的用戶顯示其個性化的頁面，即著重顯示該用戶感興趣的內容，將為用戶節約大量的檢索時間，而且這樣的網頁顯然是更具有吸引力的。一些站點已經在這方面作出了一定的嘗試，通常采用的方法是，在用戶登陸時為其提供一系列的選項，使用戶能夠對站點進行一些自主的設置。這樣做能夠使站點呈現一定程度的個性化，但是對用戶來講，還是比較煩瑣，

8、而且在用戶了解一個站點前讓其對站點進行設置，其結果未免有些粗糙。于是我們構想了這樣一種方案，對用戶登陸后的動作進行跟蹤，分析，發掘用戶點擊的規律，即用戶先后點擊的關聯規則，這樣，在用戶點擊一個主題（鏈接）之后，系統能夠自動生成一頁面，其中包含了該主題下用戶經常關注的內容（若干鏈接），這樣便在無須用戶作出任何額外工作的情況下實現了為用戶量身訂做的個性化頁面。本文主要完成Web服務器端的設計實現管理個人資料、照片上傳、網文撰寫、客戶留言、日志以及后臺管理等ASP頁面及整個實驗網站的組織建立和測試工作。我通過中國書畫網站展示出中華文化的博大精深。不同的人，其網站上的展示方式或手法各有不同，千變萬化。

9、在網站策劃中，如何把把中華文化通過網站展示出來，是我設計的重要內容。1.2 相關術語的闡述WWW是“World Wide Web"的縮寫；HTML的意思則是“Hypertext Markup Language”,中文翻譯為“超文本標記語言”。“超文本”就是指頁面內可以包含圖片、鏈接、甚至音樂，程序等非文字的元素。URLs是Uniform Resource Locator的縮寫，統稱為統一資源定位器。可以把它想象成文件名的網絡擴展。我們不但可以通過各種不同的方法指出在網絡的上哪一臺機器的目錄下的文件。這個文件可以通過各種不同的方法得到。在URL中還指定了訪問這一個文件的協議。在實際應用

10、中，URL經常稱為“網址”或URL地址。TCP/IP協議（Transmission Control Protocol / Internet Protocol傳輸控制協議/因特網協議）所謂協議，其實應該叫他網絡協議，它是計算機與計算機之間，進行信息傳輸的語言，只有兩臺計算機具有相同的協議方能進行信息傳輸，常見協議有IPX協議、TCP/IP協議等。IPX現廣泛應用于局域網中，大多數局域網游戲都使用IPX協議。TCP/IP協議可以說它是你接入因特網的必備條件，因為它是因特網上的通用協議。FTP協議(File Transter Protocol)也就是文件傳輸協議。我們知道，在服務器中一般都有大量的共

11、享軟件和免費資源，要想從服務器中把文件傳送到本地的計算機（術語稱“客戶機”）上或者把自己機器上的資源傳送到服務器上，就必須在兩臺機器中進行文件傳送，那么雙方就必須要共同遵守一定的規則，FTP就是用來在客戶機和服務器之間進行文件傳輸以實現文件共享的協議。FTP只是一種協議，必須要有相應的專用軟件來執行它，一般稱為FTP軟件。通過FTP軟件可連接到FTP服務器上，執行上載和下載文件的任務。常用的FTP軟件有LeapFTP、CuteFTP、WS_FTP、FTPX等，這些軟件的原理基本相同，只是用戶界面和功能略有差異。第2章 網頁開發環境及數據庫概述2.1 網頁運行環境的開發本系統必須被運行在IIS

12、(Internet Information Server)下。使用 Micorsoft Internet Information Server (IIS)，運行 Windows NT Server 的計算機便成為大容量、功能強大的 Web 服務器，它可以將信息發布給辦公大樓或整個世界的用戶。對于在基于 Windows NT 的計算機上聯網，Internet Information Server 是很理想的，因為它可以在現存硬件上設置功能強大的 Web 服務器。Internet Information Server 集成在 Windows NT Server 操作系統中，并利用了其安全特征和性能

13、優勢。2.2 ASP和ADO簡介2.2.1 ASP產生的歷史環境 從本節開始，將進入本書的重點內容-使用ASP（active sever pages）技術設計最流行的遠程教育平臺。在目前飛速發展的IT行業中，網站一旦建立起來，就一如既往的保持"靜態"，不加更改？如果是這樣，就無形中一落后時代的步伐。所謂靜態指的是網站的頁面內容固定不變，當用戶瀏覽器通過互聯網的HTTP協議向Web服務器請求提供頁面內容時，服務器僅僅是將原來已經設計好的靜態HTML代碼，最多加上流行的GIF89A格式的動態圖片。若網站維護者要更新網頁的內容，就必須手動的來更新起所以的HTML文檔。這種網長的致

14、命弱點就是不容易維護，為了不斷更新網頁的內容，就必須不斷的重復HTML文檔，隨著網站內容和信息量的日益擴增，使得工作量大得出人想象。ASP正是解決這個尷尬局面出現了。因此ASP迅速的得到了無數網絡開發者的垂青。(1)什么是ASPASP的全稱是Active Sever Pages,目前沒有正式的中文名，可以理解為動態服務器頁面技術。ASP是目前最流行的開發動態網站的程序開發之一，它的特點是將腳本，超文本和強大的數據訪問功能結合在一起，并提供了眾多的服務器組件來擴張功能，能夠很方便的創建分布式和基于Web的商業話應用程序。如果要更簡單的描述ASP ，可以說ASP就是運行在Web服務器上的動態網頁。

15、ASP程序文件也是一個標準的網頁，一般HTML標記和ASP腳本代碼混雜在一起組成。ASP網頁程序必須想竟Web服務器的ASP解釋器解釋執行，產生HEML代碼后才傳送給用戶的瀏覽器執行顯示。(2).的特點為：1、任何開發工具皆可發展 只要使用一般的文書編輯程序，如Windows記事本，就可以編輯。當然，其他網頁發展工具，例如，FrontPage Express、 FrontPage等也都可以；不過還是建議你用記事本來寫，既省錢又方便，若是使用那些所見即所得的網頁編輯來寫，可能會發生一些意想不到的離奇狀態。通吃各家瀏覽由于ASP程序是在網絡服務器端中執行，執行結果所產生的HTML文件適用于不同的瀏

16、覽器。2、語言相容性高 ASP與所有的ActiveX Script語言都相容，除了可結合HTML，VBScript、Java Script、Active X服務器組件來設計外，并可經由“plug-In（外掛組件模組）的方式，使用其他廠商（Third Party）所提供的語言。3、隱密安全性高 如果我們在瀏覽器中直接查看網頁的原始代碼，就只能看到文件，原始的程序代碼是看不到的！這是應屆程序先于網站服務（eb Server）端執行后，將結果轉換成標準文件，再傳送到客戶端（Client）的瀏覽器上，因此，我們所辛苦撰寫的程序并不會輕易地被看見進而被盜用。4、易于操控數據庫 可以輕易地通過DBC(Op

17、en Database Connectivity)驅動程序連接各種不同的數據庫，例如：Access、FoxPro、dBase、Oracle等等，另外，亦可將“文本文件”或是”Excel” 文件當成數據庫用。5、面向對象學習容易 具備有面向對象（object-Oriented）功能，學習容易，提供了五種方便能力強大的內建對象：Request、Response、Sever、Application以及Session，同時，若使用內建的“Application”對象或”Session”對象所撰寫出來的程序可以在多個網頁之間暫時保存必要的信息。 6、對象名稱 功能描述 RequestResponseSe

18、rverSessionApplicationObjectContext 從客戶端取得信息將信息送給客戶端提供一些Web服務器工具儲存在一個Session內的用戶信息，該信息僅可被(3)ASP模型對象ASP提供了六個功能強大的內置對象供用戶使用，利用這六個對象，可以設計變化多端的Web應用程序，在ASP開發Web應用程序時，通過調用對象的方法，不但能實現提高編程效率，而且編程更優化。下面列出ASP包括的六個內置對象：Response：將信息送主客戶端Request：從客戶端取得信息Server：提供一些Web Sever方法Session：記錄連接著的信息，每一個連接者的信息有獨立的Sessio

19、n對象來記錄Apptication：記錄共用消息，讓不同的可戶端共享信息Objectlontent：配合MTS進行分布式事務處理(4)ASP的運行ASP頁面與一般的HTML頁面的真正不同之處，在于ASP頁面需要經過Web服務器的解釋執行而HTML網頁不需要。因此如果要運行和發布式ASP網頁，就需要有Web服務器的支持。任何一個Web服務器，只有內嵌有ASP的解釋程序，就可以運行ASP 編寫的動態網頁。整個過程主要有如下5個步驟（HTML頁面的處理沒有第三步）A.用戶將ASP文件的網址輸入到瀏覽器的地址欄，請求一個ASP網頁。B.瀏覽器向Web服務器發送ASP文件請求，成為RequestC.服務

20、器找到并解釋執行該ASP文件，生成標準的HTML文件D.服務器將HTML文件傳送給用戶瀏覽器，稱為ResponseE.用戶的瀏覽器解釋HTML文件，結果在瀏覽器窗口顯示2.2.2 ADO對象ADO原名為ActiveX Data Object。通過與ASP的結合，可以在網頁里執行SQL的指令，用戶可以輕松且快速的存取、增加或是刪除數據庫的數據。ADO包含三個主要的對象：Recordset、Connection以及Cmmand。通過這些對象的了解與應用，再利用ASP對象，就可以很容易地制作出一個方便快捷、功能多樣的網站。快速、容易和節省磁盤空間，是ADO的特性，這使得ADO成為十分熱門的技巧。AD

21、O通過與ODBC的鏈接，可以鏈接許多各種類型的數據庫，因為ODBC本身就支持許多類型的數據庫。ADO通過VBScript和JavaScript語言的技巧，不但可以控制存取數據庫，還可以達到一些特殊技巧的變化。ADO 提供 Connection 對象可以使用該對象建立和管理應用程序和 ODBC 數據庫之間的連接。Connection 對象具有各種屬性和方法，可以使用它們打開和關閉數據庫連接，并且發出查詢請求來更新信息。要建立數據庫連接，首先應創建 Connection 對象的實例。用 Connection 對象的 Execute 方法您可以發出結構化查詢語言 (SQL) 查詢數據庫源并檢索結果。

22、SQL 是用于與數據庫通訊的工業標準語言，它有許多命令可用來檢索和更新信息。使用 Connection 對象的 Execute 方法在 SQL INSERT 命令的表格中發出查詢，該命令將數據插入特定的數據庫表格。使用 Recordset 對象處理結果盡管 Connection 對象簡化了連接數據庫和查詢任務，但 Connection 對象仍有許多不足。確切地說，檢索和顯示數據庫信息的 Connection 對象不能用于創建腳本；您必須確切知道要對數據庫作出的更改，然后才能使用查詢實現更改。對于檢索數據、檢查結果、更改數據庫，ADO 提供了 Recordset 對象。正如它的名稱所暗示的那樣，

23、Recordset 對象有許多您可以使用的特性，根據您的查詢限制，檢索并且顯示一組數據庫行，即記錄。 Recordset 對象保持查詢返回的記錄的位置，允許您一次一項逐步掃描結果。根據 Recordset 對象的指針類型屬性設置，您可以滾動和更新記錄。數據庫指針可以讓您在一組記錄中定位到特定的項。指針還用于檢索和檢查記錄，然后在這些記錄的基礎上執行操作。Recordset 對象有一些屬性，可用于精確地控制指針的行為，提高您檢查和更新結果的能力。例如，您可以使用 CursorType 和 CursorLocation 屬性設置指針的類型，將結果返回給客戶端應用程序（結果通常保留在數據庫服務器上）

24、并顯示其他用戶對數據庫的最后一次更改。一個成功的數據庫應用程序都使用 Connection 對象建立鏈接并使用 Recordset 對象處理返回的數據。通過“協調”兩個對象的特定功能，您可以開發出幾乎可以執行任何數據處理任務的數據庫應用程序。例如，下面的服務器端腳本使用 Recordset 對象執行 SQL SELECT 命令。SELECT 命令檢索一組基于查詢限制的信息。查詢也包含 SQL WHERE 子句，用來縮小查詢的范圍。通過 ADO Command 對象，可以象用 Connection 對象和 Recordset 對象那樣執行查詢，唯一的不同在于用 Command 對象您可以在數據庫

25、源上準備、編譯您的查詢并且反復使用一組不同的值來發出查詢。這種方式的編譯查詢的優點是您可以最大程度地減少向現有查詢重復發出修改的請求所需的時間。另外，您還可以在執行之前通過您的查詢的可變部分的選項使 SQL 查詢保持局部未定義。Command 對象的 parameter 集合減少了您的麻煩，使您不必在每次重新發出查詢時重新建立查詢。2.3 網頁圖像設計工具Photoshop Adobe公司開發，處理圖形圖像的專門設計軟件。DTP和圖像軟件的結合，使設計師可在電腦上直接完成文字的錄入、排版、圖像處理、形象創造和分色制板的全過程，開創了“電腦平面設計”時代。 Photoshop的專長在于圖像處理，

26、而不是圖形創作。有必要區分一下這兩個概念。圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工；圖形創作軟件是按照自己的構思創意，使用矢量圖形來設計圖形，這類軟件主要有Adobe公司的另一個著名軟件Illustrator和Micromedia公司的Freehand。Photoshop系列中使用最廣泛的有Photoshop5.0版本、Photoshop7.0。2.4.網頁設計工具Dreamweaver Macromedia 公司的產品的另一款“所見即所得”的網頁編輯工具。與 Frontpage 不同，Deamweaver 采用的是 Mac 機浮動面版的設計風

27、格，對于初學者來說可能會感到不適應。但當你習慣了其操作方式后，就會發現 Dreamweaver 的直觀性與高效性是 Frontpage 所無法比擬的。 Dreamweaver 對于 DHTML 的支持特別好，可以輕而易舉地做出很多眩目的頁面特效。插件式的程序設計使得其功能可以無限的擴展。Dreamweaver 與 Flash、Firework 并稱為 Macromedia 的網頁制作三劍客，由于是同一公司的產品，因而在功能上有著一個非常緊密的結合。而最新推出的 Dreamweaver UltraDev 更支持 Asp，Jsp。因此，說Dreamweaver 是高級網頁制作的首選并不為過。常見的

28、版本為 Dreamweaver3、Dreamweaver4、DreamweaverMX、Dreamweaver8.0、Dreamweaver CS.所以我本次設計主要選用Dreamweaver CS.5結合Photoshop7.0處理圖片。第三章網頁需求分析3.1可行性分析3.1.1網頁的界面設計由于越來越多個人開始建立自己的網站，網站除了具有傳播信息的功能外，還往往代表個人的形象。網站建設商業化和廣告化的趨勢，對網頁設計的藝術性提出了更高的要求。雖然HTML語言提供了對常用Windows標準控件的支持，但是，由于Windows標準控件的形狀和顏色十分單一，網頁的視覺效果可能會很差。例如：列表

29、框和下拉列表框只能呈現凹陷邊框，而且下拉列表的箭頭的顏色不能改變，滾動條只能出現在窗口的下邊和右邊，當網頁分成多個幀的時候，滾動條就不可避免的出現在網頁的中間，破壞網頁的整體性。若在網頁的設計中主動配合Windows標準控件的形狀和顏色，網頁的創作空間就會受到限制。因此，有必要實現網頁中的自定義控件，以滿足網頁設計藝術化的要求。A. 網頁界面構成要素與傳統媒體不同，網頁除了文字和圖像以外，還包含聲音、視頻和動畫等新興多媒體元素，更借助由代碼語言編程所實現的各種交互式效果，增加了網頁界面的生動性和復雜性，也使得網頁設計者需要考慮更多頁面元素的排布、優化。 一般來說，網頁的界面主要由下面幾個因素構

30、成：（1）文字：文字元素是信息傳達的主體部分。網頁中的文字主要包括標題、信息、文字鏈接、幾種主要形式。標題和傳統媒體中信息傳達的基本作用相同，是內容的簡概說明一般比較醒目、優先編排。文字作為占據頁面重要比率的元素，同時又是信息重要載體，它的字體、大小、顏色和排布對頁面整體設計影響極大。（2）圖形：圖形在網頁界面中具有重要作用。合理的運用圖形。可以生動直觀、形象地表現設計主題。網頁中常用的圖形格式包括jpg和gif，這兩種格式壓縮比高，得到了規范瀏覽器的支持，下載速度快，具有跨平臺。3.2.網站需求分析3.2.1.主題確立與建站目的 在信息技術飛速發展的今天，人們獲取信息的方式更多是來源于互聯網

31、。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網頁，所以網頁設計尤為重要。互聯網成為人們快速獲取、發布和傳遞信息的重要渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。網頁設計伴隨著網絡的快速發展而快速興起，作為上網的主要依托，由于人們使用網絡的頻繁而變得非常的重要。網頁講究的是排版布局，其功能主要就是提供一種形式給每個上網者，讓他們能夠了解網站提供的信息。 本網站設計的宗旨在于通過對搜集到的著名球星里奧梅西的各種信息與資料多方面，多角度的呈現，使廣大球迷能夠更加全面完整地了解梅西。我們還會不定期實時更新數據信息，確保廣大球迷都能夠接受到最新資訊。3.2.2.網站實現功

32、能 廣大梅西的忠實粉絲通過本網站可以快速獲取與他有關的信息，了解其不太為人所熟知的成長經歷，婚姻，家庭生活狀況以及比賽和獲獎情況，從而使球迷對里奧梅西形成一個更加立體全面地認識。第四章網站的總體規劃4.1制作網頁的一般步驟首先，你應該明確制作網頁是為了干什么。比如，你是公司的職員，想通過網頁來對公司進行廣告宣傳；再假設你正在做一個項目，想和外地的工程師通過網頁討論該項目。如果你要制作個人網頁，那么你可能想通過個人網頁在網上進行傳播，從而展示自己，并和網友交朋友。這就是你的目的。我這次做這個網頁就是為了讓同學們在自己的班級網站里面更好的交流和聯系，及時發布一些班級新聞，為同學們建造一個網上家園。

33、其次，組織好你的網頁內容。試想，你把自己的照片和內容都堆在一起，別人將無法明白你想干什么，說不準，連你自己都糊涂了。如果組織得好，用戶從你的網頁中獲取信息就容易得多。對于那些很重要的信息，用戶只需要簡單的操作就能得到。一般來說，組織好網頁的關鍵是要對網頁建立層次分明、條理清楚的結構圖。腦子里有了這樣一張結構圖，就會對網頁很明白，并且有助于制作網頁。而后，要確定你的網頁所具有的外觀和特色，目的就是讓用戶被你的網頁所吸引。如果你只是要把很多漂亮的畫面堆在一起，而不管內容，那將沒人看。應該讓你的網頁不僅漂亮，更重要的是實用。怎么把自己的照片和內容有機的結合到一起，這也正是你的網頁特色所在。然后，開始

34、制作網頁。具體操作時，首先要創建個人站點，再充分利用Dreamweaver的功能建立各個網頁。最后，等網頁做好了，就該發布站點了。站點發布后，為了保持站點的吸引力，要經常修改網頁的內容（添加新的內容，更換已過時的圖像等），就要更新和維護你的站點了。4.2網頁包括的元素無論是初次領略Internet風光的新手，還是經常上網沖浪的老手，在初次設計網頁之前，都必須先認識一下構成網頁的基本元素。只有這樣，才能在真正的設計工作中得心應手，根據需要合理的組織和安排網頁的內容，從而達到期望的目標。設計網頁的目的主要是發布信息，因此，作為信息載體的文本和圖像也就成了網頁的基本組成部分，超級鏈接是Web的核心，

35、使它將萬維網中無數的網頁鏈接在一起，如果沒有它，Web就無從談起，此外，表格、動畫、音樂和交互表單等信息的組織、表現，以及交互元素在網頁中也具有舉足輕重的地位。(1)、文本文本一直是人類最重要的信息載體和交流工具，網頁中的信息也以文本為主，與圖像相比，文字雖不如圖像那樣能夠很快的引起瀏覽者的主意，但卻能準確的表達消息的內容和含義，為了克服文字固有的缺點，人們賦予了網頁中文本更多的屬性，如文字、字號、顏色、底紋和邊框等，通過不同格式的區別，突出顯示重要的內容，此外，用戶還可以在網頁中設計各種各樣的文字列表來清晰表達一系列項目，這些功能都給網頁中的文本賦予了新的生命力。(2)、圖像圖像在網頁中具有

36、提供信息，展示作品，裝飾網頁，表達個人情調和風格的作用。用戶可以在網頁中使用GIF、JPEG、PNG 3種圖像文件格式，其中使用最廣泛的是GIF和JPEG兩種格式。(3)、超級鏈接超級鏈接技術可以說是萬維網流行起來的最主要的原因，它是從一個網頁指向另一個目的端的鏈接，例如指向另一個網頁或相同網頁上的不同位置，這個目的端通常是另一個網頁，但也可以是一幅圖片，一個電子郵件地址，一個文件，一個程序或本網頁中的其他位置，其載體通常是文本，圖片或圖片中的區域，也可以是一些不可見的程序腳本。當瀏覽者單擊超級鏈接時，其目的端將顯示在Web瀏覽器上，并根據目的端的類型以不同方式鏈接。例如，當指向一個AVI文件

37、的超級鏈接被單擊后，該文件將在媒體播放軟件中打開;如果是指向一個網頁的超級鏈接，則該網頁將顯示在Web瀏覽器上。(4).表格在網頁中表格用來控制網頁中信息的布局方式。這包括兩方面：一是使用行和列的形式來布局文本和圖像以及其他的列表化數據；二是還可以使用表格來精4.3.網頁層次結構（附結構圖）里里奧梅西 主頁 運動生涯場外生活 職業數據 獲獎記錄 注冊我們 登錄網站4.4.目錄的層次結構（附結構圖）登錄網站注冊我們 獲獎記錄職業數據場外生活運動生涯 主頁 里奧梅西俱樂部國家隊個人生活社會活動團體獎個人獎4.5.網頁設計的相關步驟4.5.1 創建網頁頁面 在Dreamveaver“文件新建常規基本

38、頁HTML”，這樣就建好了一個頁面，英文版的默認的文件名為untitled.htm。中文版的的默認的文件名為“無標題文檔”。html就表示這個網頁文件是一個靜態的HTML文件。給它改名index.html在標題空格里輸入網頁名稱，點擊修改頁面屬性，打開“頁面屬性”窗口。設置網站主題。4.5.2 插入圖像 使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對話框，選中該圖像文件，單擊確定。4.5.3 插入標題文字 進入頁面編輯設計視圖狀態。在一般情況下，編輯器默認左對齊，光標在左上角閃爍，光標位置就是插入點的位置。如果要想讓文字居中插入，點屬性面板居中按鈕即可。啟動中文輸入法輸入“我

39、的主頁”四個字。字小不要緊，我們可以對它進行設置。4.5.4 設置文字的格式 選中文字，在上圖屬性面板中將字體格式設置成默認字體，大小可任意更改字號。并選中“B”將字體變粗。 根據這樣的方法，逐漸填充完整我們的首頁。以此類推，完成我們的其他子頁面。4.5.5 插入logo插入圖片方式，在網站中心加入本網站的logo4.6.網頁設計的效果展示4.6.1 主頁界面展示4.6.2 運動生涯界面展示.4.6.3 場外生活界面展示4.6.4 職業數據界面展示4.6.5 獲獎記錄界面展示4.6.6 精彩瞬間界面展示4.6.7 注冊我們界面展示4.6.8 登錄網站界面展示第五章需要解決的幾個關鍵問題5.1

40、數據庫技術Access是Office系列軟件中用來專門管理數據庫的應用軟件。所謂數據庫是指經過組織的、關于特定主題或對象的信息集合。數據庫管理系統分為兩類：文件管理系統和關系型管理系統。Access應用程序就是一種功能強大且使用方便的關系型數據庫管理系統，一般也稱關系型數據庫管理軟件。它可運行于各種Microsoft Windows系統環境中，由于它繼承了Windows的特性，不僅易于使用，而且界面友好，如今在世界各地廣泛流行。它并不需要數據庫管理者具有專業的程序設計水平，任何非專業的用戶都可以用它來創建功能強大的數據庫管理系統。Access使用標準的SQL（Structured Query

41、Language,結構化查詢語言）作為它的數據庫語言，從而提供了強大的數據處理能力和通用性，使其成為一個功能強大而且易于使用的桌面關系型數據庫管理系統和應用程序生成器。Access數據庫使用單一的*.mdb文件管理所有的信息，這種針對數據庫集成的最優化文件結構不僅包括數據本身，也包括了它的支持對象。此外，Access 2000還利用Office套件共享的編程語言VBA（Visual Basic for Application）進行高級操作控制和復雜的數據操作。5.2. 數據庫連接技術一個動態的網站，它的動態就體現在數據庫技術上面，那么怎么才能使數據庫與我們的WEB頁面進行連接呢？這里就要用到A

42、SP六大內對象中的server對象！具體代碼如下：<%dim conn,connstrset conn=server.createobject(“adodb.connection”)connstr=”dbq=”&server.mappath(“數據庫的路徑”)&” ;driver=Microsoft access driver(*.mdb)”conn .open connstr%>這些代碼一般都放在一個名稱為conn.asp的文件里面。如果WEB頁面中需要用到數據庫連接時就使用宏定義把這個文件包含進去就可以了！具體代碼十分簡單：<!-#include file

43、=conn.asp->。5.3. 數據庫寫入技術 關于數據庫的寫入技術一般可以分為兩類：ADDNEW方法和INSERTINTO！在ASP中，直接使用“Insert into” 語句與使用ADO中AddNew方法有什么區別？哪一種更好呢？AddNew方法的實質就是封裝了“Insert into”語句。所以，當我們需要對大量數據進行操作的時候，應優先選用“Insert into”語句。因為直接使用SQL語句，減少了ADO的解釋時間，顯然會大大加快存取數據的速度。下面我們分別來看一下它們的代碼！以向一個名為data的表中插入一個類型均為文本型的兩個字段 username和psw一：insert

44、 into <!-#include file=conn.asp->這句話包括了數據庫的文件！<% name=request.form("name")psw=request.form("psw")sql=”select *from data where(Id is null)”sql="insert into data(username,psw)values('"+name+"',"+psw+"')"conn.execute sqlconn.closese

45、t conn=nothingresponse.write "記錄添加成功!"%>分析：1：<!-#include file=conn.asp->是一個宏它是我們提前定義好的一個數據庫連接的文件！ 2：psw=request.form(“psw”)實際上我們省略了一個提交的頁面我們定義了兩個中間的變量， 3：sql=”select *form data where(id is null)”這里我們要找的就是把數據庫中id為空的記錄找出來！ 4：sql=”insert into data(“username,psw”)values(”+name+”,”+psw

46、+”)”這里是我們值得注意的地方因為它是關鍵！學過vf或sql的對這語句并不陌生！但是一定要寫對因為在這一行語句的values值中需要根據數據庫中的字段類型來定義的！它使用了單引號、雙引號、連接符的排列順序！其中連接符號還可以是&!下面我們來看看用Addnew是如何實現的！<!-#include file=conn.asp->這句話包括了數據庫的文件！<% name=request.form("name")psw=request.form("psw")set rs=server.createobject(“adodb.recor

47、dset”)sql=”select *from data where(Id is null)”rs.open sql,conn1,3rs.addnewrs(“username”)=namers(“psw”)=pswrs.updatars.closeset rs=nothingconn.closeset conn=nothingresponse.write "記錄添加成功!"%>5.4 數據庫的讀取技術數據庫的讀取技術是與記錄集合的建立相結合而使用的！因為在數據庫中一行記錄可能會包括很多信息。但是這一行記錄始終是一個數據單元！我們可以通過該數據單元的具體情況和數據庫的查

48、詢條件找到需要的數據項！下面我們再來看一段代碼： <%set rs=server.createobject("adodb.recordset") sql="select * from music " rs.open sql,conn,1,3 if not rs1.eof then end if<AHREF="javascript:void(0)" onClick="newpage('swfPlay.asp?id=<%=rs("id")%>');">&

49、lt;%=rs("name")%></a> %>5.5記錄集合的建立記錄集是我們在做動態網站必須要考慮的問題因為動態網站的所有信息都是用一個或多個紀錄集組合而得到的其實一的web頁面的內容有時就是很簡單的幾個記錄集合！記錄集中記錄的是和我們要查詢的條件相同的一條或多條記錄！由此可以知道記錄集是非常重要的！那么怎么去寫一個記錄集呢？<%set rs= server.createobject(“adodb.recordset”)sql=”select * from 表名 where 條件語句”rs.open sql,conn,1,1%>這樣我

50、們就可以把我們要查詢的東西放在記錄集rs里面如果我們想從數據庫中把數據讀出來就response 對象了！一般我們就可以直接簡寫成<%=%>可以了！如果數據庫中只有一條記錄我們這樣寫就可以了但是 如果有多條記錄我們就要用到vb或則c語言中的循環條件！第六章網頁測試6.1.網頁測試Ø IIS配置當IIS被成功安裝后，將在計算機C:Inetpubwwwroot下新建一個默認網站，通過修改默認網站配置可以建立自己的站點。如自己的網頁放在D:Wy目錄下，首頁文件名為Index.asp，其具體步驟如下：第一步：在“默認Web站點”上單擊右鍵，選“屬性”，以進入名為“默認Web站點屬性”設置界面。 第二步：轉到“主目錄”窗口，再在“本地路徑”輸入（或用“瀏覽”按鈕選擇）好自己網頁所在的“D:Wy”目錄。 第三步：轉到“文檔”窗口，再按“添加”按鈕，根據提示在“默認文檔名”后輸入自己網頁的首頁文件名“Index.asp”。 第四步：在“默認Web站點”上單擊右鍵，選“新建虛擬目錄”，依次在“別名”處輸入“test”，在“目錄”處輸入“D:Wy”后再按提示操作。Ø 數據源（ODBC）配置第一步：選擇控制面板中的管理工具打開數據源（ODBC）。第二步：在選項卡系統DNS中添加Microsoft Access Driver(*.mdb)驅動并指定數據源為網站的數據庫文件