5.2網(wǎng)頁的文件結(jié)構(gòu)及支持技術(shù)

1、5.2 網(wǎng)頁的文件結(jié)構(gòu)及支持技術(shù)一、欣賞“滾動的圖片”網(wǎng)頁一、欣賞“滾動的圖片”網(wǎng)頁1網(wǎng)頁與網(wǎng)站： 一個網(wǎng)頁就是一個用超文本標(biāo)記語言（HTML）編寫的文件。利用“超級鏈接的方法”將一些有關(guān)聯(lián)網(wǎng)頁串連起來就形成了網(wǎng)站。當(dāng)我們訪問一個網(wǎng)站時，首先顯示的就是網(wǎng)站的主頁（HomePage）。2HTML文件結(jié)構(gòu)： HTML元素體由三大部分組成：html元素、head元素（頭元素）、body元素（體元素）。html元素是最外層的元素，里面包含head元素和body元素。head元素中包含對文檔基本信息（文檔標(biāo)題、文檔搜索關(guān)鍵字、文檔生成器等）描述的標(biāo)記。body元素是文檔的主體部分，包含對網(wǎng)頁元素（文本、

2、表格、圖片、動畫、鏈接等）描述的標(biāo)記。二、知識點(diǎn)解析HTML文件的基本結(jié)構(gòu)說明 HTML文件開始 文件頭開始 文件頭內(nèi)容 文件頭結(jié)束 文件體開始 文件體內(nèi)容 文件體結(jié)束HTML文件結(jié)束一個HTML應(yīng)具有下面的基本結(jié)構(gòu)：3HTML元素的語句結(jié)構(gòu)有以下三種方式：（1）文件或超文本（2）文件或超文本（3）實(shí)例，一個網(wǎng)頁的HTML代碼：開遠(yuǎn)南洞公園網(wǎng)頁文件結(jié)構(gòu)4、 HTML中的基本標(biāo)記： HTML中的基本標(biāo)記說明HTML標(biāo)記， 網(wǎng)頁標(biāo)題主體標(biāo)記鏈接文字表示文件為HTML文件表示代碼結(jié)束網(wǎng)頁文件的頭部信息。放置網(wǎng)頁標(biāo)題名放置網(wǎng)頁主體內(nèi)容指向index.htm目標(biāo)表示圖像文件的位置表格屬性代 碼屬性名說明

3、表格標(biāo)記cellspacing是單元格間距屬性cellpadding是單元格內(nèi)容與單元格邊界之間的空白距離的大小屬性width是表格寬度屬性background是表格背景屬性border是邊框粗細(xì)屬性align是表格對齊方式屬性是行標(biāo)記是列標(biāo)記文字段落屬性代 碼屬性名說明開遠(yuǎn)南洞公園標(biāo)記為分段標(biāo)記為換行標(biāo)記為文字屬性標(biāo)記color是文字顏色屬性size是文字大小屬性face是文字字體屬性圖片屬性代碼屬性名說明圖片標(biāo)記src是圖片地址屬性width是圖片寬度屬性height是圖片高度屬性。5、 HTML中的基本標(biāo)記屬性名和屬性值： 6、其他代碼屬性標(biāo)記1、超鏈接設(shè)置.文字超鏈接2、背景音樂設(shè)置3

4、、表單設(shè)置4、框架設(shè)置5、換行符6、段落標(biāo)記7、水平線字幕屬性代碼屬性名說明滾動的圖片字幕標(biāo)記behavior是表現(xiàn)方式屬性direction是字幕方向?qū)傩詗idth是字幕寬度屬性height是字幕高度屬性。三、制作“滾動的圖片”網(wǎng)頁1、插入2行1列表格2、分別在第一行和第二行中插入相應(yīng)文字并設(shè)置文字大小、顏色對齊方式等3、在表格下方插入5張圖片并設(shè)置5張圖片大小一致。4、插入字幕并設(shè)置字幕屬性5、把5張圖片的代碼剪切到字幕標(biāo)記中間，即：圖片代碼6、美化網(wǎng)頁。拓展練習(xí)：制作開遠(yuǎn)瀘江公園的滾動圖片。 開遠(yuǎn)還有哪些美麗的風(fēng)景？請你也把它們展示出來，制作成一個漂亮的完整的網(wǎng)站。1、動態(tài)網(wǎng)頁（1）動態(tài)

5、HTML 所謂動態(tài)HTML，是指即使在脫離網(wǎng)絡(luò)環(huán)境的情況下，網(wǎng)頁下載到瀏覽器以后仍能夠隨時變換的HTML。（2）動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁：指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的HTML格式的網(wǎng)頁。動態(tài)網(wǎng)頁：指包括動態(tài)HTML效果、ASP、PHP、CGI和JSP等網(wǎng)頁技術(shù)在內(nèi)的能提供個性化信息服務(wù)的頁面。靜態(tài)網(wǎng)頁可簡單地根據(jù)用戶的請求傳送已有的頁面，無法實(shí)現(xiàn)各種個性化的交互功能，日常維護(hù)也十分繁瑣；而動態(tài)網(wǎng)頁則是由計算機(jī)實(shí)時生成，具有日常維護(hù)簡單，更改結(jié)構(gòu)方便，交互功能強(qiáng)大等優(yōu)點(diǎn)。四、動態(tài)網(wǎng)頁支持技術(shù)2.客戶端網(wǎng)頁支持技術(shù)體驗(yàn)一JavaScript 能做什么？JavaScript 能夠改變 H

6、TML 屬性值。在本例中，JavaScript 改變了圖像的 src 屬性值。開燈關(guān)燈2.客戶端網(wǎng)頁支持技術(shù)體驗(yàn)二（動態(tài)文字）動態(tài)文字請移動鼠標(biāo)到我這里sub hellodocument.fgColor=int(256*256*256*rnd)end sub3、JavaScript的簡單使用 能讀懂常見的Javascript代碼(如日期顯示、下拉菜單、計數(shù)器、動態(tài)字幕、跟隨鼠標(biāo)的圖片、跟隨鼠標(biāo)的滾動文本、標(biāo)題欄里的閃爍效果等)，并能根據(jù)需要，選擇適當(dāng)?shù)腏avaScript代碼插入到當(dāng)前網(wǎng)頁的HTML代碼中。(1)和標(biāo)記對。該標(biāo)記對可以放在和標(biāo)記對之間，也可以放在和標(biāo)記對之間。可以在一個HTML

7、文件中使用標(biāo)記對任意多次。(2)指定腳本語言。例如: (3)插入JavaScript代碼的方法。在和標(biāo)記對之間插入JavaScript代碼。4、服務(wù)器端網(wǎng)頁支持技術(shù)體驗(yàn)一（顯示當(dāng)前日期時間）Todays date is: .The servers local time is: .與客戶端生成的代碼作對比4、服務(wù)器端網(wǎng)頁支持技術(shù)體驗(yàn)二（顯示表單提交內(nèi)容）Your name: %dim fnamefname=Request.Form(fname)If fname Then Response.Write(Hello & fname & !) Response.Write(How are you today?)End If%5、ASP工作流程。(1)使用不同技術(shù)編寫的動態(tài)頁面保存在Web服務(wù)器內(nèi)，客戶端用戶向Web服務(wù)器發(fā)出訪問動態(tài)頁面的請求。(2) Web服務(wù)器根據(jù)用戶所訪問網(wǎng)頁文件名的后綴來確