web技術與網(wǎng)頁制作1課件

1、第一章 Web網(wǎng)站架構與HTML基礎內容提要Web的特點和結構Web服務器的配置創(chuàng)建虛擬目錄HTML基礎Web的特點和結構本章介紹WWW的概念、Web服務器配置、創(chuàng)建虛擬目錄和瀏覽器IE6.0配置。 一、WWW的概念1.什么是WWW？WWW是World Wide Web的縮寫，簡稱為Web（萬維網(wǎng)）。WWW起源于1989年3月，是由歐洲粒子物理實驗室CERN (the European Laboratory for Particle Physics)開發(fā)的主從結構分布式（“客戶機/服務器”模式）超文本系統(tǒng)。1992年1月，Web的第一個版本在瑞士日內瓦問世 。 Web的特點和結構WWW是一個全

2、球性的信息系統(tǒng)，使計算機能夠在Internet上相互傳送基于超媒體的數(shù)據(jù)信息。 WWW也可以用來建立Intranet（企業(yè)內部網(wǎng)）的信息系統(tǒng)。WWW具有三個統(tǒng)一： 1.統(tǒng)一的資源命名方式：URL（統(tǒng)一資源定位符，即網(wǎng)址）。 2.統(tǒng)一的資源訪問方式：HTTP （超文本傳輸協(xié)議）。 3.統(tǒng)一的信息組織方式：HTML（超文本標記語言）。Web的特點和結構2.WWW的特點分布式的信息資源 。 統(tǒng)一的用戶界面 。支持各種信息資源和各種媒體的演播 。廣泛的用途。 Web的特點和結構網(wǎng)頁存放在被稱為Web服務器(Web Server)的計算機上，等待用戶訪問。 Web的特點和結構4.Web技術經(jīng)歷了3個發(fā)展

3、階段第一代，提供對靜態(tài)網(wǎng)頁的管理和訪問。第二代，提供對動態(tài)網(wǎng)頁的訪問和顯示。第三代，除動態(tài)網(wǎng)頁生成和訪問之外，還提供基于Web的聯(lián)機事務處理能力。靜態(tài)網(wǎng)頁是從放置到服務器以后，直到發(fā)送給瀏覽器不會發(fā)生更改的網(wǎng)頁，通常用HTML語言編寫其代碼，保存為.htm文件。動態(tài)網(wǎng)頁是在發(fā)送到瀏覽器之前由應用程序服務器修改的網(wǎng)頁。動態(tài)網(wǎng)頁的源文件可用HTML語言和VBScript或JavaScript等腳本語言編寫，保存為.asp文件，也稱為Web應用程序。 Web服務器配置二、Web服務器的配置 1.什么是Web 服務器？Web 服務器也稱為 HTTP 服務器，它是響應來自瀏覽器的請求，并且發(fā)送出 網(wǎng)頁的

4、軟件。當訪問者在瀏覽器的地址文本框中輸入一個 URL，或者單擊在瀏覽器中打開的 網(wǎng)頁上的某個鏈接時，便生成一個網(wǎng)頁請求。 常見的 Web 服務器有：Microsoft Internet Information Server（IIS）Microsoft Personal Web Server(PWS)Apache HTTP ServerNetscape Enterprise ServerSun ONE Web Server。 Web服務器配置2.五種常見的Web應用程序服務器Dreamweaver可以使用以下五種服務器技術的任何一種 設計Web 應用程序：ColdFusion（可用于Window

5、s和Solaris操作系統(tǒng)平臺的動態(tài)服務器網(wǎng)頁技術） ASP （Active Server Page：動態(tài)服務器網(wǎng)頁技術） ASP .NET （.NET平臺的動態(tài)服務器網(wǎng)頁技術） JSP （Java Server Page ：Java服務器網(wǎng)頁技術） PHP （Personal Home Page：個人主頁技術） 每種技術都與 Dreamweaver 中的一種文檔類型相對應。 Web服務器配置ASP、JSP、PHP的比較Web服務器配置3.兩種Web系統(tǒng)配置方案 一種配置是將 IIS或PWS安裝在本地Windows 計算機硬盤中，另一種是將IIS或PWS安裝在遠程Windows計算機硬盤中。

6、Web服務器配置4.如何用Windows操作系統(tǒng)建立Web服務器？可以安裝下列系統(tǒng)之一 ： 1Windows 2000/2003 Server和IIS 5.0。 2Windows XP和IIS 5.1。 3Windows 98/2000 Professional和PWS。 其中 IIS：Internet Information Service （Internet信息服務器）； PWS：Personal Web Service （個人Web服務）。Web服務器配置注意，由于ASP處理程序會隨著IIS自動安裝。所以，運行ASP的應用程序服務器會隨著Web服務器的建立而自動地建立。Web服務器配置如

7、何在Windows XP中安裝IIS （1）單擊“開始”“控制面板”，雙擊“添加或刪除程序”； （2）單擊“添加/刪除 Windows 組件”； （3）出現(xiàn)“Windows 組件向導”，單擊“下一步”； （4）在“Windows 組件”列表中，選中“Internet 信息服務(IIS)”； （5）單擊“下一步”，然后根據(jù)提示操作。 在安裝后，可以啟動瀏覽器，輸入地址：localhost。若顯示其網(wǎng)頁，則表示IIS正常安裝。 演示W(wǎng)eb服務器配置5.服務器上的根文件夾Inetpubwwwroot假定讀者在計算機的D:盤中安裝了Windows XP操作系統(tǒng)。那末，該系統(tǒng)會自動創(chuàng)建根文件夾D:Ine

8、tpubwwwroot。默認情況下， Web 服務器從 D:Inetpubwwwroot 文件夾提供網(wǎng)頁。Web 服務器將根據(jù)來自 Web 瀏覽器的 HTTP 請求，提供此文件夾中的任何頁或其子文件夾中的任何頁。在D:Inetpubwwwroot 文件夾中可以創(chuàng)建子文件夾，例如“MyPage”用以存放一組網(wǎng)頁源文件。 演示W(wǎng)eb服務器配置6.如何設置默認網(wǎng)站主目錄（根文件夾）（1）單擊“開始”“控制面板”“性能和維護”“管理工具”“Internet 信息服務”；展開“本地計算機”列表，展開“Web站點”文件夾，然后展開“默認Web站點”文件夾，右擊“默認網(wǎng)站”；單擊“屬性”。 （2）輸入默認網(wǎng)

9、站IP地址 （若本機作Web服務器，則用）。（3）輸入默認網(wǎng)站的主目錄，以及為該文件夾設置腳本權限 。 現(xiàn)在已完成了Web服務器的配置，它將根據(jù)瀏覽器的請求，提供根文件夾中的網(wǎng)頁。 假如建立網(wǎng)頁文件test.htm，將它存放到本機默認網(wǎng)站的主目錄d:inetpubwwwroot下。那末，其瀏覽地址為： test.htm。演示創(chuàng)建虛擬目錄三、如何創(chuàng)建虛擬目錄 1.存放網(wǎng)頁源文件的兩種做法將網(wǎng)頁文件保存到默認網(wǎng)站的主目錄里，如上節(jié)所述，默認網(wǎng)站的主目錄直接采用Windows系統(tǒng)已經(jīng)建立的d:Inetpubwwwroot根文件夾。 將網(wǎng)頁文件保存到默認網(wǎng)站的主目錄之外。這就需要建立一個虛擬目錄，在建

10、立虛擬目錄的過程中指定虛擬目錄及其實際目錄，從而建立虛擬目錄和實際目錄的聯(lián)系。 創(chuàng)建虛擬目錄2.什麼是虛擬目錄虛擬目錄是實際目錄的別名，它代表存放網(wǎng)頁的實際目錄，以便用在網(wǎng)址中代替實際目錄。虛擬目錄的名稱可以與實際目錄的名稱相同，也可以不同。虛擬目錄在磁盤目錄中并不存在，實際目錄是存放網(wǎng)頁內容的目錄。例如，存放網(wǎng)頁文件 test.htm的實際目錄為d:x1，若為該目錄設置一個別名，即虛擬目錄zhang，則虛擬目錄Zhang就可以用在網(wǎng)址zhangtest.htm中代表存放網(wǎng)頁的實際目錄d:x1。 IE6.0的配置四、網(wǎng)頁瀏覽器IE6.0的配置 瀏覽器IE6.0的配置可以使用瀏覽器的“工具”和“

11、Internet選項”菜單命令進行設置，也可以通過修改操作系統(tǒng)的注冊表進行設置。本節(jié)介紹如何使用“工具”和“Internet選項”進行下列設置。 1.設置Internet連接 （1）啟動Internet Explorer。 （2）單擊“工具”“Internet 選項”。出現(xiàn)Internet 選項對話框 。 （3）單擊“連接”選項卡單擊“建立連接”。 （4）按照屏幕上的提示操作。 演示IE6.0的配置2.設置起始頁面 （1）單擊IE菜單欄中的“工具”“Internet選項”出現(xiàn)Internet選項對話框。 （2）輸入“主頁”的“地址”，例如，單擊“確定” 。3.設置IE緩存 在“Internet

12、選項”對話框中，單擊“設置”，出現(xiàn)“設置”對話框?？梢栽O置IE緩存“使用的磁盤空間”等。演示IE6.0的配置6.清除已訪問過的網(wǎng)頁 為了加快瀏覽速度，IE會自動把瀏覽過的網(wǎng)頁保存在系統(tǒng)盤的Temporary Internet Files文件夾內。當用戶不再需要這些網(wǎng)頁時，在該文件夾下全選且刪除即可。或者，在“常規(guī)”標簽下單擊“Internet臨時文件”項目的“刪除文件”按鈕，選中“刪除所有脫機內容”，單擊“確定”按鈕即可。 這種方法不太徹底，還會留少許Cookies在文件夾內。在“常規(guī)”標簽下，“刪除文件”按鈕旁邊還有一個“刪除Cookies”按鈕，通過它可以很方便地刪除遺留的Cookies。

13、Cookies（小甜餅）是客戶端逐塊保存用戶信息的小文本文件。 演示HTML基礎 一、 HTML的概念1.什么是HTML ？超文本標記語言（HTMLHyperText Markup Language）是用于設計網(wǎng)頁源文件（網(wǎng)頁文檔）的語言。每一個頁面的代碼保存為一個網(wǎng)頁源文件(.htm文件) 。八十年代初，HTML由萬維網(wǎng)聯(lián)盟（W3C：World Wide Web Consortium）制訂。 HTML包括一些定義頁面內容和格式的符號，稱為標記。它能夠將文本、圖像、聲音和動畫結合在一個網(wǎng)頁文檔中。這些文檔可以通過Web瀏覽器顯示，還可以通過超鏈接以訪問其它的信息資源。后來，進一步推出了XML（

14、擴展標記語言），該語言可以由程序員自己定義標記。 。 HTML基礎2.什么是標記？標記是網(wǎng)頁文檔中的一些有特定意義的符號。這些符號指明如何顯示文檔中的內容。標記總是放在三角括號中，大多數(shù)標記都成對出現(xiàn)（有開始標記和結束標記）。結束標記和開始標記所用的字符相同，只是前面加一個斜杠。例如： 用于標記一個自然段。 標記可以具有相應屬性即各種參數(shù)，如size、color、 text、 width和noshade等 。 例如： HTML基礎 標記通常可以分成兩種：第一種用來指定網(wǎng)頁上的元素或元素的樣式。 例如， 指定一個自然段及其字體和顏色： 自然段內容。 第二種用來指向其它的資源。 例如，指定一個鏈接

15、地址： 武漢大學 指定一個圖片文件： HTML基礎3.什么是超文本、超媒體和超鏈接？超文本是網(wǎng)頁上具有鏈接功能的文字。 例如，娛樂 新聞 電影 。超媒體是網(wǎng)頁上具有鏈接功能的多媒體。超鏈接是網(wǎng)頁上連接其它網(wǎng)頁或網(wǎng)頁上指定位置的超文本和超媒體。超鏈接分為文字和圖像（包括動畫）兩種，網(wǎng)頁中的一段文字、一副圖像或圖像的某一個部分等都可以定義為超鏈接。 HTML基礎 二、如何編寫和瀏覽HTML網(wǎng)頁文檔啟動IE，然后使用“查看”菜單中的“源文件”菜單項，進入記事本，就可以輸入網(wǎng)頁源文件了。在輸入完之后，另存為.htm文件。或者直接進入記事本，輸入網(wǎng)頁源文件。在輸入完之后，另存為.htm文件（選擇保存類型

16、為“所有文件”）。在瀏覽器中輸入該文件名，就能瀏覽HTML源文件的網(wǎng)頁效果。 HTML基礎例如： 學生選課系統(tǒng) 網(wǎng)頁制作練習 演示HTML基礎 三、HTML的常用標記 1. HTML文檔的結構標記 用來指明一個HTML文檔的基本結構。 （1）文件標記： 整個HTML文檔內容均在標記之中。 （2）頭部標記： 整個HTML文檔分頭部和主體部分。頭部使用標記標識，凡是在此標記之內的內容，例如標題等，均屬于頭部信息。頭部信息不顯示在Web頁中。 HTML基礎 （3）頭部標題標記： 在此標記之間的內容將作為標題顯示在瀏覽器的標題欄。注意： 標記只能放在標記之間。 （4）主體標記： 主體是Web頁的主要部

17、分，用標記定義的信息將顯示在Web頁中。 例如： （見下頁）HTML基礎結構標記示例斜體字文本 演示HTML基礎 2.格式標記 （1）（段落標記） 標記用來創(chuàng)建一個段落，在此標記之間的文本將按照段落的格式顯示。 （2）（換行標記） 是一個很簡單的標記，它沒有結束標記，用來創(chuàng)建一個換行。 （3）（兩邊縮進標記） 在標記之間的文本將按照兩邊縮進的方式顯示。 下面一一介紹在標記之間常用的各種標記。HTML基礎 （4）（列表標記） 用來創(chuàng)建一個列表; 用來創(chuàng)建列表中的上層項目; 用來創(chuàng)建列表中最下層項目; 和都必須放在標記之間。 例2-2 創(chuàng)建一個普通列表：HTML基礎 一個普通列表 中國城市 北京

18、上海 廣州 美國城市 華盛頓 芝加哥 紐約 演示HTML基礎 （5）（標有數(shù)字或圓點的列表標記） 標記用來創(chuàng)建一個標有數(shù)字的列表； 標記用來創(chuàng)建一個標有圓點的列表； 標記只能在或標記之間使用，此標記對用來創(chuàng)建一個列表項。 若放在之間,則每個列表項加上一個數(shù)字，若在之間,則每個列表項加上一個圓點。 HTML基礎例2-3 標有數(shù)字的列表與標有圓點的列表： HTML基礎標有數(shù)字與圓點的列表中國城市 北京 上海 廣州 美國城市 華盛頓 芝加哥 紐約 演示HTML基礎 （6）（分段標記） 標記對用來排版大塊HTML段落，也用于格式化表，此標記的用法與標記非常相似，同樣有align對齊方式屬性 。 ali

19、gn屬性，它用來說明對齊方式，語法是：。 align可以是Left(左對齊)、Center(居中)和Right(右對齊)三個值中的任何一個。 例如：表示標記中的文本居中顯示。 HTML基礎3. 文本標記 （1）(預處理標記) 表示標記之間的文本原有格式如word格式仍有效 。 （2）（六級標題標記） 是最大的標題，則是最小的標題。如果要在HTML文檔中輸出標題，那麼可以使用六對標題標記的任何一對。 HTML基礎 （3）（字體標記） 之間的文本以黑體字的形式輸出； 之間的文本以斜體字的形式輸出； 之間的文本以下加一劃線的形式輸出。 （4）（強調加重標記） 用來輸出需要強調的文本(通常是斜體加黑體

20、)； 則用來輸出加重文本(通常也是斜體加黑體)。 HTML基礎 （5） （字體的大小顏色標記） 可以指定輸出文本的字體大小、顏色，它主要兩個屬性size和color。 size屬性用來指定字體的大小，可以取值： -1、1和+1； color屬性用來指定文本的顏色，顏色的取值是十六進制RGB顏色碼或HTML語言給定的顏色名稱。例如，#ff0000，引號內的rrggbb是用六位十六進制數(shù)字表示的RGB(即紅、綠、藍三色的組合)顏色，#ff0000對應的是紅色。HTML基礎 Html語言所給定的顏色名稱有： Black、White、Green、Maroon、Olive、Navy、Purple、Gra

21、y、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。 例如： size取值“+1”、color取值“red”時的文本 表示標記之間的文本按大小為+1，顏色為紅色顯示。HTML基礎例 文本標記的綜合示例HTML基礎文本標記的綜合示例最大的標題使用h3的標題最大的標題黑體字文本 斜體字文本 下加一劃線文本 強調的文本加重的文本size取值“+1”、color取值“red”時的文本演示HTML基礎4. 鏈接標記 （1）（超鏈接標記） 在標記對之間可指定作為超鏈接的文本或圖像，使用標記指定圖像。 例如，指定超鏈接及其文本“武漢大學網(wǎng)站” ：武漢大學網(wǎng)站 或者

22、，指定超鏈接及其圖像“d:pic1.gif”： 在上例中，href的值是武漢大學的網(wǎng)址。 （href縮寫：http reference含義為http引用。）HTML基礎 href的值也可以是mailto:形式，即發(fā)送E-Mail形式。語法為： 這就創(chuàng)建了一個自動發(fā)送電子郵件的鏈接，mailto:后邊緊跟想要自動發(fā)送的電子郵件的地址(即E-Mail地址)。 例如，鏈接到我的電子信箱： 這是我的電子信箱(E-Mail信箱)HTML基礎 還具有target屬性，此屬性用來指明顯示的目標窗口。 如果不使用target屬性，當瀏覽者點擊了鏈接之后將在原來的瀏覽器窗口中顯示HTML文檔，若target的值

23、等于“_blank”，點擊鏈接后將會打開一個新的瀏覽器窗口顯示HTML文檔。 例如，進入，并且在新窗口中顯示網(wǎng)頁： 在新窗口中顯示 HTML基礎（2）（標簽標記） 標簽標記需要結合標記使用。name屬性不可缺少。 標記用來在同一網(wǎng)頁中創(chuàng)建一個標簽(即做一個記號), 即在同一網(wǎng)頁中創(chuàng)建鏈接，以便轉到同一網(wǎng)頁中有標簽的地方并顯示。例如，在頁頂創(chuàng)建一個標簽 此處創(chuàng)建了一個標簽 要找到標簽所在地，就必須使用標記。例如： 點擊此處將轉到標簽“Top”的地方顯示 注意：href屬性的值若是標簽名，必須在標簽名前頭加一個“#”號。 HTML基礎例 鏈接標記的綜合示例鏈接標記的綜合示例創(chuàng)建標簽處歡迎想要學習網(wǎng)

24、頁制作的同學訪問網(wǎng)站武漢大學網(wǎng)站HTML基礎 本網(wǎng)站的主要內容在新窗口中顯示歡迎給我來信，我的E-Mail是： 點擊此處回到標簽處 可以建立HTML源文件和作為超鏈的圖像文件d:Inetpubwwwrootweb.gif，在瀏覽器中顯示執(zhí)行結果。 5.圖像標記和多媒體標記 （1）圖像標記 ： 將圖形文件嵌入到網(wǎng)頁文檔中的當前位置。 例如，網(wǎng)頁文檔與圖形文件logo.gif在同一個目錄下，則可以將代碼寫成。 假如圖形文件放在網(wǎng)頁文檔所在目錄的一個子目錄(images)下，則代碼應為： 。 此外，標記還有alt（文字代替）、align（對齊）、border（邊框）、width（寬度）和height

25、（高度）屬性。 HTML基礎演示 假如圖形文件放在網(wǎng)頁文檔所在目錄的上層目錄(如home)下，則相對路徑就必須是準網(wǎng)址，即用“./”表示網(wǎng)站，后邊緊跟文件在網(wǎng)站中的路徑。 例如，home是網(wǎng)站下的一個目錄，則代碼應為： 。 例如， home是網(wǎng)站下的目錄king下邊的一個子目錄，則代碼應為： 。 HTML基礎 例 圖像標記舉例圖像標記示例 HTML基礎演示若事先在網(wǎng)站根目錄中存放一幅圖像logo468_60.gif ，則可以在網(wǎng)頁中顯示它。alt=網(wǎng)頁制作屬性表示在網(wǎng)頁中可以用文字網(wǎng)頁制作代替該圖像先行顯示出來。 （2）多媒體標記 A.設置音樂播放的鏈接 在Windows中，可播放的音樂文件格

26、式常有au、mid及wav三種。若要提供音樂文件讓瀏覽者播放，則可建立指向音樂文件的超鏈接。例如： 甜美音樂 B.設置影像播放的鏈接 常見的影像文件有mov、mpg和avi?？山⒊溄拥接跋裎募．敒g覽者單擊超鏈接時，將會調用Windows Media Player，進行影像文件播放。例如： 本市交通 HTML基礎 C.直接將音樂或影像嵌入網(wǎng)頁 可以用標記，即: 若“播放次數(shù)”設為TRUE，則無限次播放，直到單擊關閉或停止。若設為NO（默認值），則只播放一次。 D.播放網(wǎng)頁背景音樂 可運用標記，即： 若“次數(shù)”設為Infinite，音樂將循環(huán)播放，直到網(wǎng)頁關閉為止。 HTML基礎 6. 表格

27、標記 （用于制作表格或網(wǎng)頁結構） （1）（創(chuàng)建一個表格） （2）和（創(chuàng)建表格中的每一行和每一格） （3）（創(chuàng)建表格頭） 。 例2-7 用表格標記創(chuàng)建下列表格。 HTML基礎 表格標記示例意大利英格蘭西班牙HTML基礎cellpadding設置格子邊框與其內容之間的大小；valign是垂直對齊方式 ；colspan設置一個格子跨占的列數(shù)；rowspan設置一個格子跨占的行數(shù)。 AC米蘭佛羅倫薩曼聯(lián)紐卡斯爾巴塞羅那皇家社會HTML基礎尤文圖斯桑普多利亞利物浦阿申納皇家馬德里HTML基礎拉齊奧國際米蘭切爾西米德爾斯堡馬德里競技HTML基礎演示 7. 表單標記（用于制作對話框） （1）（表單開始和結束

28、標記） （2）（輸入?yún)^(qū)標記） （3）（列表框標記） （4） （多行文本框標記） 分別介紹如下： （1）標記用來創(chuàng)建一個表單，也即定義表單的開始和結束位置，在標記對之間的一切都屬于表單的內容。 HTML基礎 標記具有action、method和target屬性。 action的值是處理程序的程序名。例如：，當用戶提交表單時，服務器將執(zhí)行網(wǎng)站/上的counter.cgi程序。 method用來定義處理程序從表單中獲得信息的方式，可取值為 GET 或 POST 。 GET方式是程序從當前網(wǎng)頁文檔中獲取數(shù)據(jù)，然而這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。 POST方式與GET方式相反，它是當前網(wǎng)頁文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式大得多。 target用來指定顯示表單的目標窗口。 HTML基礎 （2）標記用來定義一個用戶輸入?yún)^(qū)，用戶可在其中輸入信息。此標記必須放在標記對之間。標記中共提供文本框、按鈕、復選框、單選鈕等八種類型的輸入?yún)^(qū)