1、網(wǎng)站設(shè)計與網(wǎng)站建設(shè),鹽城生物工程高等學(xué)校 李進(jìn),第1章 概述,1.1 網(wǎng)站的基本構(gòu)成,1.1.1 WWW簡介 WWW是World Wide Web的縮寫，中文譯名為“萬維網(wǎng)”，它作 為Internet上的新一代用戶界面，摒棄了以往純文本方式的信 息交互手段，而采用超文本(HyperText）方式。 利用該技術(shù)為用戶提供全球范圍的多媒體信息服務(wù)，并使用戶 獲取信息的手段有了根本性的改善，與之密切相關(guān)的概念就是 瀏覽器（Brower），瀏覽器實(shí)際上就是用于網(wǎng)上瀏覽的應(yīng)用程 序，程序的主要作用是顯示網(wǎng)頁和解釋腳本。對一般設(shè)計者而 言，不需要知道有關(guān)瀏覽器實(shí)現(xiàn)的程序細(xì)節(jié)，只要知道如何熟 練掌握和使用即

2、可。 WWW是附著在Internet上的覆蓋全球信息的“蜘蛛網(wǎng)”，是當(dāng)前 Internet上最受歡迎、最為流行、最新的信息檢索服務(wù)系統(tǒng)。,1.1.2 什么是網(wǎng)站 所謂網(wǎng)站（website）即網(wǎng)絡(luò)站點(diǎn)，是指連接到互聯(lián)網(wǎng)上， 包含特定內(nèi)容的網(wǎng)頁的有序集合。它擁有域名或地址并提 供一定網(wǎng)絡(luò)服務(wù)的主機(jī)，其中域名指網(wǎng)站所在的位置，主 機(jī)指提供存放文件所在的空間，網(wǎng)絡(luò)指提供訪問站點(diǎn)的物 理鏈路，也就是網(wǎng)站的接入，服務(wù)指提供網(wǎng)站功能和訪問 形式。,1.1 網(wǎng)站的基本構(gòu)成,1.1.3 網(wǎng)頁的概念 網(wǎng)頁是一種可以在WWW上傳輸并被瀏覽器識別、翻譯并 顯示出來的特殊文件。 一般我們常見到的網(wǎng)頁文件是 HTML【H

3、ypertext MarkupLanguage，超文本標(biāo)記語言】 文件。 所謂“超文本”就是指頁面內(nèi)除文本外，還可以包含圖片、 鏈接、音頻甚至視頻等非文字的組成部分。,1.1 網(wǎng)站的基本構(gòu)成,1.1.4 協(xié)議 協(xié)議（Protocol）是關(guān)于信息格式及信息交換規(guī)則的正式描述。 在信息技術(shù)中，協(xié)議就是一些特殊的規(guī)則集合，它被通信的接 收方和發(fā)送方認(rèn)可，收發(fā)雙發(fā)均以這種規(guī)則對信息加以解釋。 在網(wǎng)絡(luò)的各層中存在著許多協(xié)議。它是定義通過網(wǎng)絡(luò)進(jìn)行通信 的規(guī)則，接收方和發(fā)送方對應(yīng)層的協(xié)議必須一致，否則一方將 無法識別另一方發(fā)的信息，以這種規(guī)則規(guī)定雙方完成信息在計 算機(jī)之間的傳送過程。 在Internet上，

4、它統(tǒng)一了人們在網(wǎng)上的交流方式。HTTP協(xié)議【 Hypertext Transfer Protocol，超文本傳輸協(xié)議】是用來在 Internet上傳送超文本的傳送協(xié)議。它是運(yùn)行在TCPIP協(xié)議 族之上的最常用的傳輸協(xié)議。,1.1 網(wǎng)站的基本構(gòu)成,1.1.5 HTML HTML即超文本標(biāo)記語言，是WWW的描述語言。 設(shè)計HTML語言的目的是為了能把存放在一臺電腦中的文 本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一 起，形成有機(jī)的整體。 HTML文本是由HTML命令組成的描述性文本，HTML命令 可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的 結(jié)構(gòu)包括頭部（Head）、主體（Body

5、）兩大部分，其中頭部 描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi) 容。,1.1 網(wǎng)站的基本構(gòu)成,1.1.6 超文本 超文本（Hypertext）是把一些信息根據(jù)需要連接起來的信 息管理技術(shù)，人們可以通過 一個文本的鏈指針打開另一 個相關(guān)的文本，只要用鼠標(biāo)點(diǎn)一下文本中通常帶下劃線的 條目， 便可獲得相關(guān)的信息。,1.1 網(wǎng)站的基本構(gòu)成,1.1.7 超鏈接 網(wǎng)頁的出色之處在于能夠把超鏈接（Hyperlink）嵌入網(wǎng)頁 中，這使用戶能夠從一個網(wǎng)頁站點(diǎn)方便地轉(zhuǎn)移到另一個相 關(guān)的網(wǎng)頁站點(diǎn)。 它可以指向其他網(wǎng)頁文件、多媒體文件、圖像甚至程序。 超鏈接是內(nèi)嵌在文本或圖像中的，文本超鏈接在瀏覽器中 通

6、常是帶下劃線，而圖像超鏈接是看不到的，但如果用戶 的鼠標(biāo)指向它，則鼠標(biāo)的指針通常會變成手指狀（文本超 鏈接也是如此）。,1.1 網(wǎng)站的基本構(gòu)成,1.1.8 網(wǎng)站的基本構(gòu)成 1網(wǎng)站前臺 網(wǎng)站前臺是指普通訪問者或普通用戶訪問的網(wǎng)站頁面。一般 由HTML網(wǎng)站頁面與CSS樣式構(gòu)成。 2網(wǎng)站后臺 網(wǎng)站后臺是指供管理人員使用的、普通用戶一般無法訪問的 網(wǎng)站頁面。可以由Asp或Jsp等其他動態(tài)網(wǎng)站設(shè)計程序與網(wǎng)站 數(shù)據(jù)庫組成。 現(xiàn)在的網(wǎng)站系統(tǒng)，一般都是由后臺生成前臺，可以方便、高效 、系統(tǒng)地管理網(wǎng)站中的任何信息和內(nèi)容。 幾乎所有網(wǎng)站的應(yīng)用功能的開發(fā)都將使用到后臺數(shù)據(jù)庫。因 此，網(wǎng)絡(luò)數(shù)據(jù)庫技術(shù)與網(wǎng)頁前臺設(shè)計的完

7、全結(jié)合，是一個網(wǎng)站 設(shè)計成功的前提。,1.1 網(wǎng)站的基本構(gòu)成,1.1.9 網(wǎng)站與網(wǎng)頁的區(qū)別 1網(wǎng)頁是網(wǎng)站的組成部分之一，網(wǎng)站還有系統(tǒng)程序和數(shù)據(jù) 庫等組成部分。 2網(wǎng)站以動態(tài)化管理為基本特征。 3更新方式不同。 4網(wǎng)站能方便地實(shí)現(xiàn)管理功能和信息查詢。 5網(wǎng)站以數(shù)據(jù)庫為核心。 6網(wǎng)站需要服務(wù)器驅(qū)動。 7網(wǎng)站支持郵件服務(wù)器。,1.1 網(wǎng)站的基本構(gòu)成,1.2 網(wǎng)站的類型,1.2.1 按開辦網(wǎng)站的主體以及目的分類 按開辦網(wǎng)站的主體以及目的分類可分為： 政府網(wǎng)站、企業(yè)網(wǎng)站、商業(yè)網(wǎng)站、教育科研機(jī)構(gòu)網(wǎng) 站、個人網(wǎng)站、其他非盈利機(jī)構(gòu)網(wǎng)站以及其他類型 等。,1.2.2 按信息流轉(zhuǎn)和提供的服務(wù)方式劃分 1門戶類網(wǎng)站

8、 2資訊類 3娛樂游戲類 4電子商務(wù)類 5交易類 6企業(yè)類 7政府類 8個人主頁類 9資源服務(wù)類 10遠(yuǎn)程教育類網(wǎng)站 11其他,1.2 網(wǎng)站的類型,1.3 建立網(wǎng)站的目的,1.3.1 為什么要建立網(wǎng)站 1競爭的需要。 2可以迅速樹立政府或企業(yè)形象。 3可以讓更多的人獲得所需的商業(yè)信息或其他資訊。 4可以銷售產(chǎn)品并為來訪者提供服務(wù)同時可得到相應(yīng)的反饋。 5可以吸引公眾的注意力，及時發(fā)布時間性強(qiáng)的信息，提供圖片、聲音和視頻文件，使公司的宣傳達(dá)到聲情并茂。 6可以進(jìn)入一個高需求的市場，甚至可以開拓國際市場。 7可以回答用戶經(jīng)常關(guān)心的問題，提供24小時服務(wù)，同你的銷售人員隨時保持聯(lián)系。 8、可以盡可能

9、快地更新信息。 9、檢驗(yàn)市場服務(wù)和產(chǎn)品。 10、聯(lián)系媒介。,1.3.2 如何建立成功的網(wǎng)站 在建立網(wǎng)站前必需考慮以下幾個問題： 1建網(wǎng)站的目的是什么？ 2網(wǎng)站規(guī)模的大??？ 3、你希望或者需要獨(dú)立域名嗎？ 4、網(wǎng)站的主要訪問目標(biāo)是什么人或者群體？ 、基于什么樣的的受眾定位，確定網(wǎng)站的設(shè)計特色？ 6、如何推廣網(wǎng)站？網(wǎng)上、網(wǎng)下或者兩者并舉？ 是否希望網(wǎng)站帶來哪類額外收入？ 、準(zhǔn)備如何經(jīng)營這個網(wǎng)站？ 、投入的預(yù)算是多少？,1.3 建立網(wǎng)站的目的,1.4 建立網(wǎng)站的流程,建立網(wǎng)站的流程大致可以分成四個主要階段，如圖所示。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.1 網(wǎng)站設(shè)計的常用應(yīng)用軟件 1FrontPag

10、e Microsoft出品的網(wǎng)頁制作軟件，有典型的微軟辦公軟件界面，簡 單易學(xué)，它是網(wǎng)頁制作的入門軟件。 2Photoshop Adobe公司出品，是功能強(qiáng)大的專業(yè)圖形軟件，可以制作任何平 面效果。它是網(wǎng)頁圖像處理方面的首選軟件。 3Dreamweaver Macromedia公司出品，是“所見即所得”可視化網(wǎng)頁編輯軟件。 它是高級網(wǎng)頁設(shè)計者的首選。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.1 網(wǎng)站設(shè)計的常用應(yīng)用軟件 4Fireworks Macromedia公司出品，用于制作網(wǎng)站標(biāo)志、進(jìn)行平面圖像處理 ，并可以輕松創(chuàng)作GIF動畫。 5Flash Macromedia公司出品，用于制作動態(tài)頁面、動

11、畫和頁面廣告， 做出的動畫聲音和動畫效果都是其他軟件無法比的。它與 Dreamweaver和Fireworks一起合稱為“網(wǎng)頁制作三劍客”。,1.5.2 網(wǎng)站設(shè)計的編程語言 與網(wǎng)站設(shè)計相關(guān)的程序語言有下列幾種： 1HTML語言 它是一種用來撰寫網(wǎng)頁的程序語言，用來表示W(wǎng)eb文檔的規(guī)范。 顧名思義，HTML使用標(biāo)記符來確定網(wǎng)頁顯示的格式。 雖然HTML原始文件為純文本文件，沒有圖片和動畫等多媒體組 件，但卻包含了指向這些多媒體組件的指針。 每個Web頁對應(yīng)一個HTML文件，當(dāng)打開HTML的文件后，便可 看到不同文本屬性、圖片和動畫等很多效果。HTML文件的擴(kuò)展 名為.html或.htm。,1.5

12、 創(chuàng)建網(wǎng)站的幾種方法,1.5.2 網(wǎng)站設(shè)計的編程語言 與網(wǎng)站設(shè)計相關(guān)的程序語言有下列幾種： 2XML語言 XML語言是Extensible Markup Language的縮寫，中文澤為“ 可擴(kuò)展標(biāo)記浯言”，主要的用途是在Internet上傳送或處理數(shù)據(jù)。 XML與HTML不是并列的概念，它可以說是HTML的補(bǔ)丁，以便 彌補(bǔ)HTML語言中的不足。 比如，在HTML語言中不允許用戶自定義控制標(biāo)記符，而在XML 語言中則允許用戶這樣做。XML文件的擴(kuò)展名為.xml。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.2 網(wǎng)站設(shè)計的編程語言 與網(wǎng)站設(shè)計相關(guān)的程序語言有下列幾種： 3VRML語言 VRML語言是Vi

13、rtual Reality Modeling Language的縮寫，中 文譯為“虛擬實(shí)境描述模塊語言”，主要的用途是描述物體的三維 空間信息，使游覽者可以看到三維物體。 游覽者不僅可以看到物體的正面，還可以將物體加以旋轉(zhuǎn)、拉遠(yuǎn) 、拉近或者是從各個角度來觀察物體。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.2 網(wǎng)站設(shè)計的編程語言 4CSS語言 CSS語言是Caseading Style Sheets的縮寫，中文譯為“層疊樣 式表”，主要的用途是定義網(wǎng)頁數(shù)據(jù)的編排、格式化、顯示及特殊 效果等，可以彌補(bǔ)HTML的某些不足。 5瀏覽器端Script腳本語言 腳本（Script）是一段嵌在HTML原始代碼內(nèi)

14、的小程序。Netscape 公司開發(fā)的JavaScript 和Microsoft公司開發(fā)的VBScript均可用 來撰寫瀏覽器端的腳本，但在使用效果上JavaScript 似乎更勝 一籌。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.2 網(wǎng)站設(shè)計的編程語言 6服務(wù)器端的Script腳本語言 盡管瀏覽器端的腳本已經(jīng)可以完成許多工作，但有些工作 還需要在服務(wù)器端執(zhí)行才可以完成。目前常見的服務(wù)器 端的腳本語言是ASP程序。 ASP是Active Serve Pages的縮寫，中文譯為“動態(tài)服務(wù) 器網(wǎng)頁”。ASP程序是在Microsoft IIS或PWS等Web服務(wù) 器執(zhí)行的腳本，通常是由VBScript或是

15、JavaScript撰寫而 成。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.2 網(wǎng)站設(shè)計的編程語言 7DHTML語言 DHTML（Dynamic HTML），即動態(tài)HTML，它是一種技術(shù) 的總稱，它使用HTML、VBScript、JavaScript和CSS等語 言技術(shù)使得網(wǎng)頁能夠具有動態(tài)交互功能。 雖然HTML語言可以制作出具有復(fù)雜格式的網(wǎng)頁，但這樣 制作出來的網(wǎng)頁中只包含靜態(tài)內(nèi)容，如果網(wǎng)頁上有任何信 息需要更新，瀏覽器就必須從服務(wù)器重新下載整個網(wǎng)頁， 因而造成網(wǎng)絡(luò)的極大的負(fù)荷。,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.3 網(wǎng)站建設(shè)常用數(shù)據(jù)庫技術(shù) 1數(shù)據(jù)庫系統(tǒng) 數(shù)據(jù)庫系統(tǒng)是指含有以下部分的不同的數(shù)據(jù)庫軟件組件 和數(shù)據(jù)庫的集合： （1）數(shù)據(jù)庫應(yīng)用程序 （2）前端（即客戶端）組件 （3）數(shù)據(jù)庫管理系統(tǒng) （4）數(shù)據(jù)庫,1.5 創(chuàng)建網(wǎng)站的幾種方法,2常用的網(wǎng)站后臺數(shù)據(jù)庫,1.5 創(chuàng)建網(wǎng)站的幾種方法,1.5.4 創(chuàng)建網(wǎng)站的幾種方法比較 1PHP超文本預(yù)處理器（Hypertext Pre-processor）是開放源代碼服務(wù)器端的腳本語言，在語法上同C語言非常類似。 2ASP動態(tài)服務(wù)頁面（Active Server Pages