網(wǎng)頁(yè)制作與編程基礎(chǔ).ppt

,第7章 網(wǎng)頁(yè)制作與編程基礎(chǔ),本章學(xué)習(xí)目標(biāo)： 了解常用網(wǎng)頁(yè)制作工具，基本掌握其中一種 掌握HTML語(yǔ)言 初步掌握VBScript或JavaScript腳本語(yǔ)言 了解動(dòng)態(tài)網(wǎng)頁(yè)技術(shù) 初步掌握ASP與數(shù)據(jù)庫(kù)應(yīng)用,7.1 常用網(wǎng)頁(yè)制作工具,隨著Internet技術(shù)的不斷發(fā)展，網(wǎng)頁(yè)制作工具越來(lái)越多，選擇一種好的工具非常重要，能夠起到事半功倍的效果。網(wǎng)頁(yè)制作工具大體上可以分為兩類：著眼于網(wǎng)頁(yè)、網(wǎng)站全局的，稱之為基本工具；著眼于網(wǎng)頁(yè)某些元素的，稱之為輔助工具。 網(wǎng)頁(yè)制作基本工具是指那些專門(mén)用來(lái)設(shè)計(jì)能在瀏覽器中顯示為網(wǎng)頁(yè)的HTML文檔的專用工具軟件，它能整合編排網(wǎng)頁(yè)元素，生成HTML網(wǎng)頁(yè)代碼文件。比較流行的網(wǎng)頁(yè)制作工具軟件包括Microsoft FrontPage和Macromedia Dreamweaver等。 網(wǎng)頁(yè)制作輔助工具是指用來(lái)創(chuàng)建或加工網(wǎng)頁(yè)上的圖形、圖像、動(dòng)畫(huà)、聲音和視頻等網(wǎng)頁(yè)元素的工具軟件。,7.1 常用網(wǎng)頁(yè)制作工具,7.1.1 Microsoft FrontPage 2003,FrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁(yè)制作工具。FrontPage使網(wǎng)頁(yè)制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁(yè)，具有直觀的網(wǎng)頁(yè)制作和管理方法，簡(jiǎn)化了大量工作。 FrontPage的最強(qiáng)大之處是其站點(diǎn)管理與遠(yuǎn)程發(fā)布功能。用戶只需在本地對(duì)網(wǎng)頁(yè)進(jìn)行編輯，F(xiàn)rontPage會(huì)跟蹤用戶編輯過(guò)的文件，在發(fā)布時(shí)，它會(huì)自動(dòng)將修改過(guò)的網(wǎng)頁(yè)進(jìn)行發(fā)布，未編輯過(guò)的網(wǎng)頁(yè)可由用戶決定是否再次向服務(wù)器發(fā)送。,7.1 常用網(wǎng)頁(yè)制作工具,7.1.1 Microsoft FrontPage 2003,1FrontPage 2003的特色 (1)強(qiáng)大的網(wǎng)頁(yè)設(shè)計(jì)功能 可以智能地完成HTML文本的編輯，并可以針對(duì)不同的瀏覽器對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置；可以提供對(duì)多種版本的瀏覽器的支持；完善了所見(jiàn)即所得的網(wǎng)頁(yè)編輯操作。 (2)豐富的網(wǎng)頁(yè)設(shè)計(jì)模板、設(shè)計(jì)向?qū)Ш椭黝}樣式 提供了多種網(wǎng)頁(yè)設(shè)計(jì)模板、網(wǎng)頁(yè)設(shè)計(jì)向?qū)Ш椭黝}樣式。使用這些模板、向?qū)Ш蜆邮?，即使是初學(xué)者也可以設(shè)計(jì)出具有專業(yè)水準(zhǔn)的網(wǎng)站。,7.1 常用網(wǎng)頁(yè)制作工具,7.1.1 Microsoft FrontPage 2003,2FrontPage 2003的新增功能 (1)設(shè)計(jì)網(wǎng)站 FrontPage 2003 具有經(jīng)過(guò)改進(jìn)的設(shè)計(jì)環(huán)境、新的布局和設(shè)計(jì)工具、模板以及經(jīng)過(guò)改進(jìn)的主題，這一切可以幫助用戶實(shí)現(xiàn)網(wǎng)站創(chuàng)意，而無(wú)需任何HTML知識(shí)。 (2)開(kāi)發(fā)網(wǎng)站 FrontPage 2003具有改進(jìn)的創(chuàng)作環(huán)境、新的圖形功能、強(qiáng)大的編碼工具（幫助用戶應(yīng)用并增加各種編碼語(yǔ)言知識(shí)）、以及創(chuàng)建交互式腳本的工具。此外，F(xiàn)rontPage 2003可以生成有效和干凈的HTML，能讓用戶更好地控制代碼。,7.1 常用網(wǎng)頁(yè)制作工具,7.1.1 Microsoft FrontPage 2003,3FrontPage 2003工作界面,7.1 常用網(wǎng)頁(yè)制作工具,7.1.1 Microsoft FrontPage 2003,3FrontPage 2003工作界面,窗口欄的內(nèi)容隨著所選視圖不同而不同。為了便于用戶制作網(wǎng)頁(yè)和查看、修改Web站點(diǎn)的組織結(jié)構(gòu)，F(xiàn)rontPage 2003提供了6種視圖。單擊視圖菜單相應(yīng)的菜單項(xiàng)可以切換到不同的視圖。各個(gè)視圖的功能分別為：,“網(wǎng)頁(yè)”視圖：網(wǎng)頁(yè)視圖是進(jìn)行網(wǎng)頁(yè)編輯的操作界面。 “文件夾”視圖：用來(lái)對(duì)網(wǎng)站的目錄和文件夾進(jìn)行管理。 “報(bào)表”視圖：用于查看與網(wǎng)頁(yè)制作有關(guān)的各項(xiàng)參數(shù)。 “遠(yuǎn)程網(wǎng)站”視圖：可以發(fā)布整個(gè)網(wǎng)站或個(gè)別文件，還可以在兩個(gè)或更多個(gè)位置之間同步文件。 “導(dǎo)航”視圖：用來(lái)顯示和編輯網(wǎng)頁(yè)的導(dǎo)航關(guān)系。 “超鏈接”視圖：顯示某個(gè)網(wǎng)頁(yè)與其他網(wǎng)頁(yè)之間的關(guān)系。 “任務(wù)”視圖：用來(lái)查看網(wǎng)站和網(wǎng)頁(yè)設(shè)計(jì)的完成情況。,7.1 常用網(wǎng)頁(yè)制作工具,7.1.2 Adobe Dreamweaver CS3,使用Dreamweaver，設(shè)計(jì)師可以隨心所欲地編寫(xiě)代碼、設(shè)計(jì)網(wǎng)站網(wǎng)頁(yè)以及進(jìn)行高級(jí)開(kāi)發(fā)。無(wú)論是喜歡手寫(xiě)HTML代碼還是習(xí)慣于可視化環(huán)境，Dreamweaver都能提供方便快捷、功能強(qiáng)大的工具，使用Dreamweaver將是一種全新的體驗(yàn)。在易用、創(chuàng)新、規(guī)范等優(yōu)點(diǎn)的基礎(chǔ)上，Dreamweaver還擁有更先進(jìn)的網(wǎng)頁(yè)布局和設(shè)計(jì)環(huán)境，以及更為強(qiáng)大的代碼編輯功能等卓越特性。 Dreamweaver CS3的操作界面主要由以下幾個(gè)部分組成：標(biāo)題欄、菜單欄、插入欄、文檔工具欄、文檔窗口、屬性檢查器以及多個(gè)面板組，如圖7-2所示。,7.1 常用網(wǎng)頁(yè)制作工具,7.1.2 Adobe Dreamweaver CS3,圖7-2 Dreamweaver CS3 的界面布局,7.1 常用網(wǎng)頁(yè)制作工具,1標(biāo)題欄(注意區(qū)別文檔的標(biāo)題和文檔的文件名稱) 2菜單欄 3插入欄 4文檔工具欄 5“屬性”檢查器 6其他面板,7.1.2 Adobe Dreamweaver CS3,7.1 常用網(wǎng)頁(yè)制作工具,7.1.3 網(wǎng)頁(yè)美化工具,1Photoshop CS3 2Fireworks CS3 3Flash CS3,為了使制作的網(wǎng)頁(yè)更為美觀，用戶在利用網(wǎng)頁(yè)制作工具制作網(wǎng)頁(yè)時(shí)，還需利用網(wǎng)頁(yè)美化工具對(duì)網(wǎng)頁(yè)進(jìn)行美化。,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,1什么是HTML HTML英文全名是Hyper Text Markup Language，即超文本標(biāo)記語(yǔ)言，是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。 用HTML編寫(xiě)的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)（如UNIX、Windows等）。它主要是在原來(lái)文本文件的基礎(chǔ)上，增加一系列的標(biāo)識(shí)符來(lái)描述格式，形成網(wǎng)絡(luò)文件。當(dāng)用戶使用瀏覽器下載時(shí)，就把這些標(biāo)識(shí)符解釋成應(yīng)有的含義，并按照一定的格式將這些被標(biāo)識(shí)的文件顯示在屏幕上，而HTML的標(biāo)識(shí)符號(hào)并不顯示在屏幕上。,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,2HTML文檔的結(jié)構(gòu) (1)HTML文檔的基本結(jié)構(gòu) 下面是一個(gè)最基本的超文本文檔的源代碼, My first page 我的第一個(gè)網(wǎng)頁(yè) ,HTML文件由標(biāo)記和被標(biāo)記的內(nèi)容組成。每個(gè)標(biāo)記都有“”圍住，以表示這是HTML代碼而非普通文本，標(biāo)記能產(chǎn)生所需的各種效果。就像一個(gè)排版程序，它將網(wǎng)頁(yè)的內(nèi)容排成理想的效果。這些標(biāo)記名稱大都為相應(yīng)的英文單詞首字母或縮寫(xiě)，很好記憶。各種標(biāo)記差別很大，但總的表示形式卻大同小異。,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,2HTML文檔的結(jié)構(gòu) (2)HTML的標(biāo)記 單標(biāo)簽 某些標(biāo)記稱為“單標(biāo)簽”，它只需單獨(dú)使用就能完整地表達(dá)意思。 這類標(biāo)記的語(yǔ)法是： 最常用的單標(biāo)簽是, 它表示換行。 雙標(biāo)簽 另一類標(biāo)記稱為“雙標(biāo)簽”，它由“始標(biāo)簽”和“尾標(biāo)簽”兩部分構(gòu)成，必須成對(duì)使用，其中始標(biāo)簽告訴Web瀏覽器從此處開(kāi)始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能。始標(biāo)簽前加一個(gè)斜杠（/）即成為尾標(biāo)記。 這類標(biāo)記的語(yǔ)法是：受標(biāo)記影響的內(nèi)容 例如你想對(duì)某段文字的加粗顯示，就將此段文字放在 標(biāo)記中, 如：你要加粗的字,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,2HTML文檔的結(jié)構(gòu) (2)HTML的標(biāo)記 標(biāo)簽屬性 許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性，標(biāo)記要通過(guò)屬性來(lái)制作出各種效果。 其語(yǔ)法是：受影響內(nèi)容 需要注意的是，并不是所有的標(biāo)記都有屬性；根據(jù)需要可以用該標(biāo)記的所有屬性，也可以只用需要的幾個(gè)屬性。在使用時(shí)，屬性之間沒(méi)有順序。,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,2HTML文檔的結(jié)構(gòu) (3)HTML的幾個(gè)部分 HTML文件以開(kāi)頭，以結(jié)尾。瀏覽器解釋網(wǎng)頁(yè)代碼的起始標(biāo)志。HTML文件包括頭部（head）和正文（body）。 1)head頭部信息,：表示這是網(wǎng)頁(yè)的題頭部分，用來(lái)說(shuō)明文件命名和與文件本身的相關(guān)信息。通常這部分標(biāo)記來(lái)聲明此網(wǎng)頁(yè)的默認(rèn)語(yǔ)言編碼、關(guān)鍵字、使用軟件等，個(gè)別的標(biāo)記產(chǎn)生頁(yè)面動(dòng)作，第4行聲明超文本頭部分結(jié)束。在簡(jiǎn)單的網(wǎng)頁(yè)中這部分不重要，而較復(fù)雜的網(wǎng)頁(yè)中，比如：用CSS樣式表、JavaScript語(yǔ)言等，這部分會(huì)相當(dāng)重要。 ：網(wǎng)頁(yè)的標(biāo)題。標(biāo)題概括了網(wǎng)頁(yè)的內(nèi)容，能迅速了解網(wǎng)頁(yè)的大意。在文件頭部定義的標(biāo)題內(nèi)容不在瀏覽器窗口中顯示，而是在瀏覽器的標(biāo)題欄中顯示。盡管頭部定義的信息很多，但能在瀏覽器標(biāo)題欄中顯示的信息只有標(biāo)題。 在網(wǎng)頁(yè)的頭部代碼中，還有另外一種文頭標(biāo)記meta標(biāo)記，基本語(yǔ)法是：。,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,2HTML文檔的結(jié)構(gòu) (3)HTML的幾個(gè)部分 2）body文檔主體部分,：是網(wǎng)頁(yè)的正文部分。HTML文件主體標(biāo)記的格式為：。作為網(wǎng)頁(yè)的主體部分，有很多的內(nèi)置屬性，這些屬性用于設(shè)定網(wǎng)頁(yè)的總體風(fēng)格。例如，定義頁(yè)面的背景圖像、背景顏色、文字顏色以及超文本鏈接顏色等，主要屬性如表7-1所示。,HTML代碼在書(shū)寫(xiě)時(shí)不嚴(yán)格區(qū)分大小寫(xiě)，也并不要求在書(shū)寫(xiě)時(shí)縮進(jìn)，但為了程序的易讀性，建議網(wǎng)頁(yè)設(shè)計(jì)者使標(biāo)記的首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,2HTML文檔的結(jié)構(gòu) (3)HTML的幾個(gè)部分 2）body文檔主體部分,表7-1 BODY標(biāo)記屬性值,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,3一個(gè)簡(jiǎn)單的HTML實(shí)例, 一個(gè)簡(jiǎn)單的HTML示例 歡迎光臨我的主頁(yè) 這是我第一次做主頁(yè)，無(wú)論怎么樣，我都會(huì)努力做好！ ,7.2 HTML語(yǔ)言,7.2.1 HTML語(yǔ)言概述,4HTML的特點(diǎn),HTML是獨(dú)立于平臺(tái)的，它兼容多平臺(tái)。 HTML文件中含有大量的特定標(biāo)記(tags)，該標(biāo)記用于解釋如何顯示指定的內(nèi)容。 HTML文件中包含超文本內(nèi)容，如多媒體信息、E-mail地址、數(shù)據(jù)庫(kù)查詢結(jié)果等。 HTML文件是一個(gè)有特定標(biāo)記的、可識(shí)別的ASCII文本文件，通常文件擴(kuò)展名為.html或.htm。 編寫(xiě)一個(gè)HTML文件不需要特殊的軟件，只要有一個(gè)字符編輯器就可以完成。,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(1)標(biāo)題文字標(biāo)記,標(biāo)題文字的格式為：標(biāo)題文字,屬性align用來(lái)設(shè)置標(biāo)題在頁(yè)面中的對(duì)齊方式：left（左對(duì)齊）right（右對(duì)齊）center（居中對(duì)齊） 屬性n用來(lái)指定標(biāo)題文字的大小。N可以取16的整數(shù)值，取1時(shí)文字最大，6時(shí)文字最小 與用定義的網(wǎng)頁(yè)標(biāo)題不同，標(biāo)題格式顯示在瀏覽器窗口中，而不顯示在瀏覽器的標(biāo)題欄中。,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(1)標(biāo)題文字標(biāo)記, 設(shè)置標(biāo)題 第1級(jí)標(biāo)題(h1) 第2級(jí)標(biāo)題(h2) 第3級(jí)標(biāo)題(h3) 第4級(jí)標(biāo)題(h4)（居左） 第5級(jí)標(biāo)題(h5)（居右） 第6級(jí)標(biāo)題(h6)（居中） ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(2)字符格式標(biāo)記,格式為：被設(shè)置的文字,標(biāo)記可設(shè)定文字的字號(hào)（大?。?、字體和顏色。 size用來(lái)設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時(shí)最小，取7時(shí)最大。 Face用來(lái)設(shè)置字體。 Color用來(lái)設(shè)置文字顏色。,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(2)字符格式標(biāo)記,1)和標(biāo)記都可以設(shè)置文字的大小，二者的區(qū)別見(jiàn)下表(當(dāng)中的size取7時(shí)，文字比要大)。,2)設(shè)置字體：在網(wǎng)頁(yè)設(shè)計(jì)中要盡量用常見(jiàn)的字體。必要的罕見(jiàn)字體可以轉(zhuǎn)化為文字圖像。,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(2)字符格式標(biāo)記,3)設(shè)置文字的顏色：,標(biāo)記中的text屬性，設(shè)定整個(gè)網(wǎng)頁(yè)文字的顏色 標(biāo)記中的color屬性，設(shè)定網(wǎng)頁(yè)、段落、短語(yǔ)、詞或字的顏色。 與的優(yōu)先級(jí)，標(biāo)記優(yōu)先。, 標(biāo)記同時(shí)對(duì)文字顏色進(jìn)行定義 今天天氣真好 黑色藍(lán)色 粉紅色 ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(2)字符格式標(biāo)記,3)設(shè)置文字的顏色：,顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來(lái)表示。上例中同時(shí)使用了body的text屬性和font的color屬性來(lái)對(duì)文字的顏色進(jìn)行設(shè)置，但最后在網(wǎng)頁(yè)中的文字顏色應(yīng)該是離文字本身最近的標(biāo)記屬性所定義的。另外，在title中涉及網(wǎng)頁(yè)中的特殊替換字符，其字符所表示的的含義如下表所示。,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,1字符的格式化,(2)字符格式標(biāo)記,4)設(shè)置字型：,字型就是文字的風(fēng)格，如加粗、斜體、帶下劃線、上標(biāo)、下標(biāo)等。字型的控制標(biāo)記見(jiàn)下表所示：,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(1)強(qiáng)行換行標(biāo)記,格式為：文字,實(shí)例1：不使用 無(wú)換行示例 登鸛雀樓 白日依山盡， 黃河入海流。 欲窮千里目， 更上一層樓。 ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(1)強(qiáng)行換行標(biāo)記,實(shí)例2：使用后的效果 換行示例 登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。 ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(2) 段落標(biāo)記,格式為：文字,實(shí)例1：居中對(duì)齊CENTER 段落標(biāo)簽 浣溪沙 一曲新詞酒一杯，去年天氣舊亭臺(tái)，夕陽(yáng)西下幾時(shí)回。無(wú)可奈何花落去，似曾相識(shí)燕歸來(lái)。小園香徑幾徘徊。 ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(2)段落標(biāo)記,實(shí)例2：參見(jiàn)右圖 段落標(biāo)簽 登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。 ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(2)段落標(biāo)記,文件段落的開(kāi)始由來(lái)標(biāo)記，段落的結(jié)束由來(lái)標(biāo)記。標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之間多一空行。由于一段的結(jié)束意味著新一段的開(kāi)始，所以使用也可省略結(jié)束標(biāo)記。 一個(gè)強(qiáng)制換段標(biāo)記可以看作是兩個(gè)強(qiáng)制換行標(biāo)記。 其中屬性align用來(lái)設(shè)置段落的對(duì)齊方式，可以為left、center或right，分別表示居左、居中、居右。默認(rèn)時(shí)默認(rèn)為left。,格式為：文字,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(3)分區(qū)顯示標(biāo)記,格式:文本或圖象,文本塊、一段文字或標(biāo)題在網(wǎng)頁(yè)上的布局都有3種方式：左對(duì)齊、居中和右對(duì)齊。在標(biāo)記中使用align屬性，其屬性取值分別為：left、center、right。可以設(shè)置布局的標(biāo)記有：、。當(dāng)在許多段落中設(shè)置對(duì)齊方式時(shí)，常使用標(biāo)記。,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(3)分區(qū)顯示標(biāo)記,實(shí)例1，參照右圖 分區(qū)顯示標(biāo)記的應(yīng)用 居中center居中center 居左left居左left 居右right居右right ,7.2 HTML語(yǔ)言,7.2.2 文檔的格式與風(fēng)格,2段落格式化,(4)水平線,格式為：,align設(shè)定橫線放置的位置，其屬性取值為：left、center、right。 Size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2。 Width設(shè)定線段長(zhǎng)度，可以是絕對(duì)值或相對(duì)值。所謂絕對(duì)值，是指線段的長(zhǎng)度是固定的，不隨窗口尺寸的改變而改變。所謂相對(duì)值，是指長(zhǎng)度相對(duì)于窗口的寬度而定，窗口的寬度改變時(shí)，線段的長(zhǎng)度也隨之增減，默認(rèn)值為100%，即始終填滿當(dāng)前窗口。 Noshade設(shè)定線條為無(wú)陰影，若默認(rèn)則有陰影或立體效果。 Color設(shè)定線條顏色，默認(rèn)為黑色?？梢圆捎妙伾拿Q。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制代碼來(lái)表示。,7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,1加入圖像、視頻、動(dòng)畫(huà),(1)插入圖形,格式為： 例： 設(shè)置網(wǎng)頁(yè)的背景圖像、背景顏色可參照BODY標(biāo)記的相關(guān)屬性。,7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,1加入圖像、視頻、動(dòng)畫(huà),(2)插入背景音樂(lè),1)音頻標(biāo)記能在網(wǎng)頁(yè)中加入背景聲音，格式為： ,src=“your.mid“ ：設(shè)定 midi 檔案及路徑，可以是相對(duì)或絕對(duì)。 autostart=true ：是否在音樂(lè)檔下載完之后就自動(dòng)播放。true 是，false 否 （默認(rèn)值)。 loop=infinite ：是否自動(dòng)反復(fù)播放。LOOP=2 表示重復(fù)兩次，Infinite 表示重復(fù)多次。 要加入的背景聲音文件的格式為.wav、.mid、.ram等，播放次數(shù)為-1時(shí)，聲音將一直播放直到關(guān)閉網(wǎng)頁(yè)。,7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,1加入圖像、視頻、動(dòng)畫(huà),(2)插入背景音樂(lè),2)使用EMBED標(biāo)簽嵌入音樂(lè)文件,使用BGSOUND標(biāo)簽嵌入背景音樂(lè)時(shí)，當(dāng)最小化窗口時(shí)BGSOUND就會(huì)暫停，為了保證背景音樂(lè)的連貫性，建議使用HIDDEN了的EMBED標(biāo)簽。 ,src=“your.mid“：設(shè)定midi檔案及路徑，可以是相對(duì)或絕對(duì) autostart=true：是否在音樂(lè)檔下載完之后就自動(dòng)播放。true是，false否(默認(rèn)值) loop=“true“：是否自動(dòng)反復(fù)播放。LOOP=2 表示重復(fù)兩次，true是， false否 hidden=“true“：是否完全隱藏控制畫(huà)面，true為是，no為否(默認(rèn)值),7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,1加入圖像、視頻、動(dòng)畫(huà),(3)插入視頻,1)用標(biāo)記的dynsrc屬性可以向網(wǎng)頁(yè)中加入.avi視頻剪輯文件。 格式為：,Border：邊框大小。 Src：在瀏覽器尚未完全讀入AVI文件時(shí)，先在AVI播放區(qū)域顯示的圖像。 Dynsrc：指定播放視頻文件的路徑和文件名。 Loop：指定播放循環(huán)的次數(shù)。當(dāng)為-1時(shí)，則反復(fù)播放。 Loopdelay：兩次播放的時(shí)間間隔。 Start：指定何時(shí)開(kāi)始播放。Fileopen是文件打開(kāi)時(shí)，mouseover是鼠標(biāo)移到視頻文件上時(shí)。,2)插入flash用標(biāo)記，其格式為 文件,7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,2加入超級(jí)鏈接,超鏈接（Hyperlink）可以看作是一個(gè)熱點(diǎn)，它可以從當(dāng)前Web頁(yè)定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁(yè)的某個(gè)位置、Internet或本地硬盤(pán)或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。 當(dāng)Web頁(yè)包含超鏈接時(shí)，Web頁(yè)中的外觀形式為彩色且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接的顯示文本或圖片時(shí)，將變成手形。超文本鏈接使用錨點(diǎn)標(biāo)記來(lái)定義。標(biāo)記的格式為： 熱點(diǎn),7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,2加入超級(jí)鏈接,(1)屬性href為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。在書(shū)寫(xiě)URL時(shí)要注意，如果資源放在自己的服務(wù)器上，可以寫(xiě)相對(duì)路徑。否則，應(yīng)寫(xiě)絕對(duì)路徑. (2)屬性name指定當(dāng)前文檔內(nèi)的一個(gè)字符串作為鏈接時(shí)可以使用有效的目標(biāo)資源的地址。(注意：Href不能與name同時(shí)使用。) (3)Target=”_blank”或Target=”new”，將鏈接打開(kāi)的空白頁(yè)面或在新的瀏覽器窗口中打開(kāi)。 Target=”_parent”，將鏈接的頁(yè)面內(nèi)容，顯示在直接父框架窗口中。 Target=”_self”，將鏈接的頁(yè)面內(nèi)容，顯示在當(dāng)前窗口中（默認(rèn)值）。 Target=”_top”，將框架中鏈接的頁(yè)面內(nèi)容，顯示在沒(méi)有框架的窗口中。 Target=”框架名稱”，只運(yùn)用于框架中，若被設(shè)定則鏈接結(jié)果將顯示于該“框架名稱”指定的框架窗口中，框架窗口名稱是事先由框架標(biāo)記所命名的，可以理解為程序設(shè)計(jì)中的變量名稱。,7.2 HTML語(yǔ)言,7.2.3 加入多媒體與超級(jí)鏈接,2加入超級(jí)鏈接,(4)創(chuàng)建指向其他頁(yè)面的鏈接，就是在當(dāng)前頁(yè)面與其他相關(guān)頁(yè)面間建立超鏈接。無(wú)論目標(biāo)文件與當(dāng)前文件的目錄關(guān)系如何，其格式為： (5)創(chuàng)建指向本頁(yè)中的鏈接時(shí)，需要定義兩個(gè)標(biāo)記：一個(gè)為超級(jí)鏈接標(biāo)記，另一個(gè)為書(shū)簽標(biāo)記。格式為：。書(shū)簽為該超級(jí)鏈接的目標(biāo)，定義格式為：。同理，如果要?jiǎng)?chuàng)建指向其他頁(yè)面中的書(shū)簽，定義的格式為：。 (6)在網(wǎng)頁(yè)中，超級(jí)鏈接還可以指向下載文件和電子郵件。他們的格式分別為：； (7)圖像也可以做為鏈接指針。格式為：，可以看出，用取代了鏈接指針中text的位置。是圖像元素，它表明顯示url代表的圖像文件。,7.2 HTML語(yǔ)言,7.2.4 表格編輯,1表格的基本形式,表格對(duì)于格式化信息有著強(qiáng)大的功能，它能控制各種信息的位置，使得頁(yè)面結(jié)構(gòu)協(xié)調(diào)一致，用其他標(biāo)記不容易做到的文本對(duì)齊，只要把文本塊放到表格中就行了。任何表格都有三個(gè)基本要素：表行、表頭和表項(xiàng)，每個(gè)要素都有自己的標(biāo)簽,一個(gè)表由開(kāi)始，結(jié)束，表的內(nèi)容由，和定義，其中：,說(shuō)明表的一個(gè)行，表有多少行就有多少個(gè)，即定義表行； 說(shuō)明表的列數(shù)和相應(yīng)欄目的名稱，有多少個(gè)欄目就有多少個(gè)，即定義表頭； 則填充由和組成的表格，即定義表項(xiàng)。,是否用表格線分開(kāi)為部分內(nèi)容用border屬性說(shuō)明。,7.2 HTML語(yǔ)言,7.2.4 表格編輯,1表格的基本形式,實(shí)例1：一個(gè)有表格線和一個(gè)元組的組成的表格，參照右圖。 the simplest html file 食品飲料水果 面包可樂(lè)西瓜 ,7.2 HTML語(yǔ)言,7.2.4 表格編輯,2表格的修飾形式,(1)有通欄的表 有橫向通欄的表用屬性說(shuō)明，colspan表示橫向欄距，#代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個(gè)小于表的橫向網(wǎng)格數(shù)的整數(shù)。 實(shí)例2：下面是一個(gè)有表格線和有橫向通欄的表格。, the simplest html file 食品飲料水果 面包牛奶可樂(lè)西瓜 ,7.2 HTML語(yǔ)言,7.2.4 表格編輯,2表格的修飾形式,(1)有通欄的表 有縱向通欄的表用rowspan=#屬性說(shuō)明。rowspan表示縱向欄距，#表示通欄占據(jù)的網(wǎng)格數(shù)，小于縱向網(wǎng)絡(luò)數(shù)。需要說(shuō)明的是有縱向通欄的表，每一行必須用明確給出一橫向欄目結(jié)束,這和表格的基本形式是不同的。 實(shí)例3：下面是一個(gè)有表格線和有縱向通欄的表格。, the simplest html file 早餐 食品面包 飲料可樂(lè) 水果西瓜 ,7.2 HTML語(yǔ)言,7.2.4 表格編輯,2表格的修飾形式,(2)表的大小，邊框?qū)挾?，表格間距 表的大小用width=#和height=#屬性說(shuō)明。前者為表寬，后者為表高，#是以象素為單位整數(shù)。 表格間距即劃分表格的線的粗細(xì)用標(biāo)記ellspacing=#表示，#的單位是象素。 (3)表中文本的輸出 文本與表框的距離用cellpadding=#說(shuō)明。#的單位是象素。 表格的寬度大于其中的文本寬度時(shí)，文本在其中的輸出位置與用align=#說(shuō)明。#是 left，center和right三者之一，分別表示左對(duì)齊，居中和右對(duì)齊，align屬性可修飾，和鏈接簽。 表格的高度大于其中文本的高度時(shí)，可以用valign=#說(shuō)明文本在其中的位置。#是top，middle，bottom，baseline四者之一。同樣，valign可以修飾，中的任何一個(gè)。,7.2 HTML語(yǔ)言,7.2.4 表格編輯,2表格的修飾形式,(4)表格顏色 表格的顏色用bgcolor=#指定。#是16進(jìn)制的6位數(shù)，格式為rrggbb，分別表示紅、綠、蘭三色的分量?；蛘呤?6種已定義好的顏色名稱。 (5)表格標(biāo)題 表格可以加上標(biāo)題。標(biāo)題的語(yǔ)法格式如下： ，#可以是left，center和right三者之一。,7.2 HTML語(yǔ)言,7.2.5 創(chuàng)建框架,1框架的基本結(jié)構(gòu)如下：,框架可以將瀏覽器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)域可以單獨(dú)顯示一個(gè)html文件，各個(gè)區(qū)域也可相關(guān)連地顯示某一個(gè)內(nèi)容，例如可以將索引放在一個(gè)區(qū)域，文檔內(nèi)容顯示在另一個(gè)區(qū)域。, . . ,.中的內(nèi)容顯示在不支持框架的瀏覽器窗口中，因而這里指向一個(gè)普通版本的html文件，以便使用不支持框架瀏覽器的用戶閱讀。 框架由指定，并且可以嵌套，分區(qū)中各部分顯示的內(nèi)容用指定。frame是一個(gè)新出現(xiàn)的標(biāo)記，瀏覽器并不都支持。 可以將窗口橫向分成幾個(gè)部分，也可以分成縱向幾個(gè)部分，還可以形成混和框架。,7.2 HTML語(yǔ)言,7.2.5 創(chuàng)建框架,1框架的基本結(jié)構(gòu)如下：,(1)橫向框架 橫向框架用指定，#可以是一個(gè)百分?jǐn)?shù)，也可以是一整數(shù)。前者規(guī)定各框架占窗口的百分?jǐn)?shù)，后者指定各框的絕對(duì)大小。例如，下面的例子將窗口分成30%、20%、50%的幾個(gè)區(qū)域，各區(qū)域的內(nèi)容分別為A.html，B.html，C.html。, HTML 語(yǔ)言教程 ,7.2 HTML語(yǔ)言,7.2.5 創(chuàng)建框架,1框架的基本結(jié)構(gòu)如下：,(2)縱向框架：縱向框架用指定，#含義同上。 (3)混合框架 將窗口分成縱橫幾個(gè)區(qū)域時(shí)，用代替鏈接，即可將原來(lái)分好的區(qū)域再次分框，下面的例子先將窗口分成20%，80%，然后將右邊的區(qū)域再分成分別占40%和60%的上下兩個(gè)區(qū)域，如圖7-22 所示。 (4) 框架與框中文本的間距 分框與其中的文本間距可以用Marginwidth=#和margiheight=#來(lái)指定，前者指定文本與分框的邊緣的橫向距離，后者為縱向距離，其單位都為象素。, HTML 語(yǔ)言教程 ,7.2 HTML語(yǔ)言,7.2.5 創(chuàng)建框架,2分框間的關(guān)聯(lián),框架之間可以有特定的關(guān)聯(lián)，比如將某一框架的內(nèi)容輸出到另一個(gè)框架中，這樣該段文字就可以把其中一個(gè)框作為輸出框，另一個(gè)框作為選擇框。實(shí)現(xiàn)這種關(guān)聯(lián)需要做下列的事情。 (1)在分框的html文件中標(biāo)記各個(gè)框，標(biāo)記的方法是在中加入name屬性，比如上例，定義左邊的框?yàn)樗饕?，右邊框?yàn)檩敵觥?(2)在A.html文件中指定輸出到哪個(gè)框中去的方法是在A.html文件中加入下列一行。 這便得用鼠標(biāo)點(diǎn)取A.html中的鏈接指針，它的輸出會(huì)顯示在右邊的框中。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,表單在HTML頁(yè)面中起著重要作用，它是與用戶交互信息的主要手段。一個(gè)表單至少應(yīng)該包括說(shuō)明性文字、用戶填寫(xiě)的表格、提交和重填按鈕等內(nèi)容。用戶填寫(xiě)了所需的資料之后，按下“提交”按鈕，這樣所填資料就會(huì)通專門(mén)的接口傳到Web服務(wù)器上。網(wǎng)頁(yè)的設(shè)計(jì)者隨后就能在Web服務(wù)器上看到用戶填寫(xiě)的資料，從而完成了從用戶到服務(wù)提供者之間的反饋和交流。 一個(gè)表單有三個(gè)基本組成部分： 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用的CGI(Common Gateway Interface，即通用網(wǎng)關(guān)接口)程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來(lái)控制其他定義了處理腳本的處理工作。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,1表單標(biāo)簽form/form,格式：FORM action=url method=get|post enctype=mime target=./FORM 相關(guān)屬性解釋如下： action=url 指定用來(lái)處理表單提交的數(shù)據(jù)的應(yīng)用程序。它可以是任何一個(gè)有效的URL，那么用戶在表單中輸入的信息就會(huì)傳入那個(gè)URL處。 method=get或post，它控制收集信息的傳送方式。post方法可通過(guò)action所指定的服務(wù)程序?qū)Ρ韱芜M(jìn)行處理；GET方法可將表單的內(nèi)容作為查詢URL中的串來(lái)傳送，服務(wù)器使用QueryString集合來(lái)存儲(chǔ)這些內(nèi)容。 Enctype：指定如何對(duì)數(shù)據(jù)編碼，只有在使用post方式時(shí)這個(gè)屬性才適用，而且有唯一的可能值，即默認(rèn)值application/x-www-form-urlencoded。該屬性在平時(shí)的表單創(chuàng)建中可以不使用。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,1表單標(biāo)簽form/form,格式：FORM action=url method=get|post enctype=mime target=./FORM TARGET=#，#可以是下列值： _blank：在一個(gè)新的、無(wú)名瀏覽器窗口調(diào)入指定的文檔； _self：在指向這個(gè)目標(biāo)的元素的相同的框架中調(diào)入文檔； _parent：把文檔調(diào)入當(dāng)前框架的父FRAMESET框中；這個(gè)值在當(dāng)前框沒(méi)有父框時(shí)等價(jià)于_self； _top：把文檔調(diào)入原來(lái)的最頂部的瀏覽器窗口中（因此取消所有其它框架）；這個(gè)值等價(jià)于當(dāng)前框架沒(méi)有子框架時(shí)的_self；,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,2表單元素,（1）文本框 文本框是一種讓訪問(wèn)者自己輸入內(nèi)容的表單對(duì)象，通常被用來(lái)填寫(xiě)單個(gè)字或者簡(jiǎn)短的回答，如姓名、地址等。 格式：input type=text name=.size=.maxlength=.value=. 屬性解釋如下： type=text定義單行文本輸入框； name屬性定義文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，要定義一個(gè)獨(dú)一無(wú)二的名稱； size屬性定義文本框的寬度，單位是單個(gè)字符寬度； maxlength屬性定義最多輸入的字符數(shù)； value屬性定義文本框的初始值；,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,2表單元素,（2）多行文本框 格式：TEXTAREA name=.cols=.rows=.wrap=virtual/TEXTAREA 屬性解釋如下： name：同文本框 cols：定義多行文本框的寬度，單位是單個(gè)字符寬度； rows：定義多行文本框的高度，單位是單個(gè)字符寬度； wrap：定義輸入內(nèi)容大于文本域時(shí)顯示的方式，可選值如下： 默認(rèn)值是文本自動(dòng)換行；當(dāng)輸入內(nèi)容超過(guò)文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)； Off用來(lái)避免文本換行，當(dāng)輸入的內(nèi)容超過(guò)文本域右邊界時(shí)，文本將向左滾動(dòng)，必須用Return才能將插入點(diǎn)移到下一行； Virtual，允許文本自動(dòng)換行。當(dāng)輸入內(nèi)容超過(guò)文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)； Physical，讓文本換行，當(dāng)數(shù)據(jù)被提交處理時(shí)換行符也將被一起提交處理。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,2表單元素,（3）密碼框 是一種特殊的文本域，用于輸入密碼。當(dāng)訪問(wèn)者輸入文字時(shí)，文字會(huì)被星號(hào)或其它符號(hào)代替，而輸入的文字會(huì)被隱藏。 格式：input type=password name=.size=.maxlength=. （4）復(fù)選框 復(fù)選框允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)唯一的名稱。 格式：INPUT type=checkbox name=. value=.,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,2表單元素,（5）文件上傳框 文件上傳框看上去和其它文本框差不多，只是它還包含了一個(gè)瀏覽按鈕。訪問(wèn)者可以通過(guò)輸入需要上傳的文件的路徑或者點(diǎn)擊瀏覽按鈕選擇需要上傳的文件。 在使用文件上傳框以前，請(qǐng)先確定你的服務(wù)器是否允許匿名上傳文件。表單標(biāo)簽中必須設(shè)置ENCTYPE=multipart/form-data來(lái)確保文件被正確編碼；另外，表單的傳送方式必須設(shè)置成POST。 格式：input type=file name=.size=15 maxlength=100 屬性解釋如下： type=file：定義文件上傳框； name：同文本框； size：屬性定義文件上傳框的寬度，單位是單個(gè)字符寬度； maxlength：屬性定義最多輸入的字符數(shù)。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,2表單元素,（6）下拉選擇框 下拉選擇框允許你在一個(gè)有限的空間設(shè)置多種選項(xiàng)，下拉選擇框中帶有下拉按鈕，單擊下拉按鈕，出現(xiàn)多個(gè)可供選擇的選項(xiàng)，用戶單擊其中的一項(xiàng)，即可選中。 格式： select name=.size=.multiple option value=.selected./option . /select 屬性解釋如下： size：定義下拉選擇框的行數(shù)； name：定義下拉選擇框的名稱； multiple：表示可以多選，如果不設(shè)置本屬性，那么只能單選； value：定義選擇項(xiàng)的值； selected：表示默認(rèn)已經(jīng)選擇本選項(xiàng)。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,2表單元素,(7)表單按鈕 1)提交按鈕：提交按鈕用來(lái)將輸入的信息提交到服務(wù)器。 格式：input type=submit name=.value=. 屬性解釋如下： type=submit：定義提交按鈕； name：屬性定義提交按鈕的名稱； value：屬性定義按鈕的顯示文字； 2)復(fù)位按鈕：復(fù)位按鈕用來(lái)重置表單。 格式：input type=reset name=.value=. 3)一般按鈕：一般按鈕用來(lái)控制其他定義了處理腳本的處理工作。 格式：input type=button name=.value=.onClick=. 屬性解釋如下： type=button定義一般按鈕； onClick屬性，也可以是其它的事件，通過(guò)指定腳本函數(shù)來(lái)定義按鈕的行為。,7.2 HTML語(yǔ)言,7.2.6 創(chuàng)建表單,3表單綜合實(shí)例（參見(jiàn)右圖）, 姓名: 性別: 男 女 你喜歡的水果: 蘋(píng)果 桔子 西瓜 梨 每個(gè)星期你大概會(huì)吃多少水果: 少于1公斤 1至3公斤 多于3公斤 對(duì)于吃水果，你的觀點(diǎn)是： 多吃水果有利于身體 ,7.2 HTML語(yǔ)言,7.2.7 列表,列表可以分為無(wú)序列表、有序列表和自定義列表。,1無(wú)序列表 無(wú)序號(hào)列表使用的一對(duì)標(biāo)簽是，每一個(gè)列表項(xiàng)前使用。其結(jié)構(gòu)如下所示： 第一項(xiàng) 第二項(xiàng) 第三項(xiàng) ,實(shí)例1：結(jié)果請(qǐng)查看圖7-21 無(wú)序列表 這是一個(gè)無(wú)序列表： 國(guó)際互聯(lián)網(wǎng)提供的服務(wù)有： WWW服務(wù) 文件傳輸服務(wù) 電子郵件服務(wù) 遠(yuǎn)程登錄服務(wù) 其它服務(wù) ,7.2 HTML語(yǔ)言,7.2.7 列表,列表可以分為無(wú)序列表、有序列表和自定義列表。,2有序列表 有序列表和無(wú)序列表的使用方法基本相同，它使用標(biāo)簽，每一個(gè)列表項(xiàng)前使用。每個(gè)項(xiàng)目都有前后順序之分，多數(shù)用數(shù)字表示。其結(jié)構(gòu)如下所示： 第一項(xiàng) 第二項(xiàng) 第三項(xiàng) ,實(shí)例2：結(jié)果請(qǐng)查看圖7-22 有序列表 這是一個(gè)有序列表： 國(guó)際互聯(lián)網(wǎng)提供的服務(wù)有： WWW服務(wù) 文件傳輸服務(wù) 電子郵件服務(wù) 遠(yuǎn)程登錄服務(wù) 其它服務(wù) ,7.2 HTML語(yǔ)言,7.2.7 列表,列表可以分為無(wú)序列表、有序列表和自定義列表。,3自定義列表 除了上述兩種列表以外，還可以根據(jù)需要自定義列表樣式。格式為： ,7.2 HTML語(yǔ)言,7.2.8 樣式表（CSS）簡(jiǎn)介,1樣式表（CSS）概述,樣式表（stylesheets）的技術(shù)誕生于1996年底，全稱是層疊樣式表（Cascading Stylesheets簡(jiǎn)稱CSS），它可以對(duì)布局、字體、顏色、背景和其它圖文效果實(shí)現(xiàn)更加精確的控制。使用樣式表只通過(guò)修改一個(gè)文件就改變大量的網(wǎng)頁(yè)的外觀和格式，使網(wǎng)頁(yè)的風(fēng)格統(tǒng)一。使用樣式表的具體優(yōu)勢(shì)主要體現(xiàn)在以下幾個(gè)方面：,格式和結(jié)構(gòu)分離： 更好的控制頁(yè)面全局的能力： 可以制作出體積更小下載更快的網(wǎng)頁(yè)： 更快更容易地維護(hù)及更新大量的網(wǎng)頁(yè)：,7.2 HTML語(yǔ)言,7.2.8 樣式表（CSS）簡(jiǎn)介,2CSS添加到網(wǎng)頁(yè)中的方法,(1)鏈接外部CSS樣式表 (2)在HTML文檔中植入CSS樣式 (3)在標(biāo)記中加入樣式 (4)導(dǎo)入CSS樣式表 (5)用腳本來(lái)運(yùn)用CSS樣式,7.3 腳本語(yǔ)言基礎(chǔ),7.3.1 腳本語(yǔ)言概述,1腳本語(yǔ)言的優(yōu)勢(shì) 腳本語(yǔ)言作為用來(lái)控制網(wǎng)頁(yè)的控件和對(duì)象的一種編程語(yǔ)言的出現(xiàn)，它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交式的表達(dá)能力。從而基于CGI靜態(tài)的HTML頁(yè)面被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反應(yīng)的Web頁(yè)面的取代，腳本正是滿足這種需求而產(chǎn)生的語(yǔ)言。 腳本語(yǔ)言是一種非編譯語(yǔ)言，直接被瀏覽器所解釋執(zhí)行，它是一種事件型程序，通過(guò)捕捉用戶在各種瀏覽器中的行為來(lái)觸發(fā)特定的程序段。 腳本語(yǔ)言容易使用，在完成小任務(wù)方面表現(xiàn)相當(dāng)出色，比如檢查表單數(shù)據(jù)它在控制瀏覽器中的事件和訪問(wèn)，以及操作超文本標(biāo)記語(yǔ)言元素方面的功能也很強(qiáng)大，深受廣泛用戶的喜愛(ài)的歡迎。,7.3 腳本語(yǔ)言基礎(chǔ),7.3.1 腳本語(yǔ)言概述,2腳本語(yǔ)言的使用,聲明腳本語(yǔ)言有下列3種方法： 在IIS中設(shè)置默認(rèn)的腳本，如未更改設(shè)置則為VBScript。 在程序的第一段加上。 在程序體中加入對(duì)象聲明。,7.3 腳本語(yǔ)言基礎(chǔ),7.3.2 VBScript,1VBScript基本語(yǔ)法,(1)VBScript不區(qū)分大小寫(xiě)。 (2服務(wù)器端的VBScript位于中間，即，也可用 VBScript代碼 腳本如果放在客戶端執(zhí)行，則只需用 VBScript代碼 (3)程序注釋(Rem語(yǔ)句來(lái)注釋、一個(gè)單引號(hào)字符 ),7.3 腳本語(yǔ)言基礎(chǔ),7.3.2 VBScript,2VBScript編程基礎(chǔ),VBScript實(shí)質(zhì)上是Visual Basic的子集，因此VBScript也有常量、變量和數(shù)組。 常量、變量的命名可以使用數(shù)字、字母和下劃線等字符，但第一個(gè)字母必須是英文字母，中間不能有標(biāo)點(diǎn)和運(yùn)算符號(hào)，長(zhǎng)度不能超過(guò)255個(gè)字符。 常量是擁有名字的數(shù)值（字符串和數(shù)字），主要為了方便程序的編寫(xiě)。 變量是存有一個(gè)值的命名了的內(nèi)存位置。最好在使用以前先定義。 VBScript還有各種運(yùn)算符，包括算術(shù)運(yùn)算符，比較運(yùn)算符，邏輯運(yùn)算符和連接運(yùn)算符。 VBScript有很多現(xiàn)成的繼承VB的函數(shù)，主要包括轉(zhuǎn)換函數(shù)、輸入輸出函數(shù)、字符串函數(shù)、日期和時(shí)間函數(shù)、數(shù)學(xué)函數(shù)、檢驗(yàn)函數(shù)等。,7.3 腳本語(yǔ)言基礎(chǔ),7.3.2 VBScript,2VBScript編程基礎(chǔ),VBScript過(guò)程有Sub子程序和Function函數(shù)。 Sub子程序的語(yǔ)法如下： Sub子程序名(參數(shù)1,參數(shù)2,) End Sub 子程序調(diào)用可用Call子程序名(參數(shù)1,參數(shù)2, ) Function函數(shù)的語(yǔ)法如下： Function(參數(shù)1,參數(shù)2, ) End Function Function過(guò)程調(diào)用通過(guò)直接引用函數(shù)名(用在變量賦值語(yǔ)句的右端或表達(dá)式中)。,7.3 腳本語(yǔ)言基礎(chǔ),7.3.2 VBScript,2VBScript編程基礎(chǔ),VBScript控制語(yǔ)句主要有條件語(yǔ)句和循環(huán)語(yǔ)句。 條件語(yǔ)句有IfThenElse和Select Case語(yǔ)句。,例7-2 IF條件語(yǔ)句 放在程序首行，強(qiáng)制變量聲明 ,7.3 腳本語(yǔ)言基礎(chǔ),7.3.2 VBScript,2VBScript編程基礎(chǔ),VBScript控制語(yǔ)句主要有條件語(yǔ)句和循環(huán)語(yǔ)句。 循環(huán)語(yǔ)句主要有ForNext(強(qiáng)制型)，DoLoop(條件型)和不太常用的WhileWend、For EachIn。,例7-3 循環(huán)語(yǔ)句。 Hello everyone! “ next %,7.3 腳本語(yǔ)言基礎(chǔ),7.3.3 JavaScript,1JavaScript介紹,JavaScript是一種新的描述語(yǔ)言，可以被嵌入HTML的文件之中。通過(guò)JavaScript可以做到回應(yīng)使用者的需求事件 (如：form的輸入)而不用任何的網(wǎng)絡(luò)來(lái)回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用先傳給服務(wù)器端(server)處理，再傳回來(lái)的過(guò)程，而直接可以被客戶端(client)的應(yīng)用程序所處理，可以想象成有一個(gè)可執(zhí)行程序在你的客戶端上執(zhí)行一樣。 JavaScript與VBScript有很多地方是相通的，不同的是JavaScript腳本中，對(duì)象、屬性、方法等命名對(duì)大小寫(xiě)敏感，即常量、變量、函數(shù)、對(duì)象以及保留字的大小寫(xiě)是有區(qū)別的。在引用別人的網(wǎng)頁(yè)特效小程序時(shí)，不要更改字母的大小寫(xiě)。 JavaScript提供了4種基本數(shù)據(jù)類型來(lái)處理數(shù)字和文本，通過(guò)變量來(lái)當(dāng)作存儲(chǔ)信息的容器，而且還可以通過(guò)表達(dá)式以有效和復(fù)雜的方法來(lái)處理信息。,7.3 腳本語(yǔ)言基礎(chǔ),7.3.3 JavaScript,2JavaScript代碼的加入,JavaScript的腳本包括在HTML中，它成為HTML文檔的一部分。它與HTML標(biāo)識(shí)相結(jié)合，構(gòu)成了一個(gè)功能強(qiáng)大的Internet網(wǎng)上編程語(yǔ)言。 為了便于程序的解釋和調(diào)用，應(yīng)將JavaScript的腳本放在HTML文檔頭部，對(duì)于小的腳本和簡(jiǎn)單的頁(yè)面，它可以直接將JavaScript腳本加入文檔的任意位置。也可將JavaScript程序以擴(kuò)展名“.Js”單獨(dú)存放，再利用格式Script Src=JavaScript 文件名嵌入在文件的任何位置。例如，表示在此處調(diào)用1.js文件。 JavaScript的注釋如果是一行可以用“/”，若是多行則應(yīng)該用“/*/”。 在HTML中使用、標(biāo)識(shí)加入JavaScript語(yǔ)句，這樣，HTML語(yǔ)句和JavaScript語(yǔ)句位于同一個(gè)文件中，其格式為 ,7.3 腳本語(yǔ)言基礎(chǔ),7.3.3 JavaScript,2JavaScript代碼的加入(例7-4 倒計(jì)時(shí)), var urodz= new Date(“December 25,2006“); var s=“圣誕“; var now = new Date(); var ile = urodz.getTime() - now.getTime(); var dni = Math.floor(ile / (1000 * 60 * 60 * 24); if (dni 1) document.write(“今天離“+s+“還有“+dni +“天“) else if (dni = 1) document.write(“只有2天啦！“) else if (dni = 0) document.write(“只有1天啦！“) else document.write(“好象已經(jīng)過(guò)了哦！“); ,7.3 腳本語(yǔ)言基礎(chǔ),7.3.3 JavaScript,3使用特效代碼,怎樣在我的網(wǎng)頁(yè)中插入代碼？只要把這些代碼復(fù)制，使用FrontPage時(shí)，點(diǎn)擊編輯窗口左下角的“HTML”選項(xiàng)卡即出現(xiàn)源代碼窗口，將特效代碼粘貼進(jìn)去，保存即可，再在瀏覽器中打開(kāi)，你就會(huì)看到效果了。 一般來(lái)說(shuō)，除非特別指明，例如，要求插入到與之間。在網(wǎng)頁(yè)源代碼的與之間的任何地方插入代碼都可以，在表格的單元格與之間插入代碼，一般不會(huì)出錯(cuò)。 在網(wǎng)絡(luò)有大量的Javascript特效和Vbscript特效，其中有Cookie腳本，按鈕類特效，窗口類特效，導(dǎo)航菜單類，技巧特效類，鏈接類特效，時(shí)間類特效，圖片類特效，文字類特效等，集管理與收集于一身，非常適合網(wǎng)頁(yè)制作者使用。你只需簡(jiǎn)單的復(fù)制、粘貼，就可以做出很多漂亮的網(wǎng)頁(yè)特效。,7.3 腳本語(yǔ)言基礎(chǔ),7.3.4 腳本與表單的結(jié)合,1對(duì)象的引用,腳本語(yǔ)言可以看成是面向?qū)ο蟮恼Z(yǔ)言。每個(gè)對(duì)象都是事先定義好的，都有自己的屬性、方法和事件。對(duì)象是自然界的一類事物。在VBScript中，Windows、Form、Date、Document等都屬于對(duì)象。 屬性是指一類對(duì)象的特征，用于描述一個(gè)對(duì)象。方法說(shuō)明對(duì)象如何去做。例如：Document.Write(“您好“)就是在顯示器輸出字符串“您好”；又如Alter(“歡迎“)在新窗口中顯示歡迎，其中前頭的Windows一般可以省略。事件是每個(gè)對(duì)象可以識(shí)別和響應(yīng)有某些操作行為。程序能對(duì)這些