認(rèn)識動態(tài)網(wǎng)頁分析課件

1、認(rèn)識動態(tài)網(wǎng)頁分析認(rèn)識動態(tài)網(wǎng)頁分析5.1.1 動態(tài)HTML了解動態(tài)HTML的幾種常見效果體驗(yàn)動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的異同學(xué)會創(chuàng)建簡單的動態(tài)網(wǎng)頁5.1.1 動態(tài)HTML了解動態(tài)HTML的幾種常見效果5.1.1 動態(tài)HTML什么是動態(tài)HTML動態(tài)HTML是近年來網(wǎng)絡(luò)發(fā)展進(jìn)程中出現(xiàn)的一種特別的技術(shù)應(yīng)用概念，它專指一種制作網(wǎng)頁的方式。所謂動態(tài)HTML，是指即使在脫離網(wǎng)絡(luò)環(huán)境的情況下，網(wǎng)頁下載到瀏覽器以后仍能夠隨時(shí)變換的HTML。例如，當(dāng)鼠標(biāo)移至文章段落中，段落能夠變成藍(lán)色。HTML中能夠做的一切在網(wǎng)頁下載后還能夠再重復(fù)。動態(tài)HTML，即DHTML，是Dynamic HTML的簡稱。5.1.1 動態(tài)HTML什

2、么是動態(tài)HTML5.1.1 動態(tài)HTML常見的動態(tài)HTML效果有許多，除了有簡單的光標(biāo)懸停效果等外，還有一些較復(fù)雜的動態(tài)效果，如可以在網(wǎng)頁上加入當(dāng)前日期、時(shí)間，以方便瀏覽者；或是既可以節(jié)省網(wǎng)頁空間又可以給人新鮮感的動感菜單 ；或是各種變化多端的文字特效、鼠標(biāo)特效、網(wǎng)頁特效。5.1.1 動態(tài)HTML常見的動態(tài)HTML效果有許多，除了5.1.1 動態(tài)HTML實(shí)現(xiàn)簡單的動態(tài)HTML效果在FrontPage的菜單欄中，提供了一個(gè)動態(tài)HTML創(chuàng)建工具“DHTML效果”工具欄，它能夠幫助使用者方便、快速地創(chuàng)建動態(tài)的HTML效果實(shí)例：5.1.1 動態(tài)HTML實(shí)現(xiàn)簡單的動態(tài)HTML效果5.1.1 動態(tài)HTML

3、觸發(fā)事件 ：就是促使文本和圖片產(chǎn)生動態(tài)效果的事件或行動，主要包 括“單擊”、“鼠標(biāo)懸?！?、“雙擊”和“網(wǎng)頁加載”四種類型。效果類型：是指動態(tài)效果的表現(xiàn)方式，如“飛入”、“彈起”等。效果設(shè)置內(nèi)容：完成動態(tài)對象的觸發(fā)事件、效果類型的選擇之后，可 在效果下拉列表框內(nèi)設(shè)置具體的效果樣式。演示：5.1.1 動態(tài)HTML觸發(fā)事件 ：就是促使文本和圖片產(chǎn)生5.1.2 動態(tài)網(wǎng)頁什么是動態(tài)網(wǎng)頁 動態(tài)網(wǎng)頁不僅局限于動態(tài)HTML，還包括一些能夠提供個(gè)性化信息服務(wù)的頁面，簡單來說，就是服務(wù)器通過HTML表單收集用戶的信息，用戶也可以通過搜索引擎頁面得到自己想要的信息。如：表單、搜索引擎、一些登錄界面、數(shù)據(jù)庫查詢等5.

4、1.2 動態(tài)網(wǎng)頁什么是動態(tài)網(wǎng)頁5.1.2 動態(tài)網(wǎng)頁早期的動態(tài)網(wǎng)頁指的是采用：CGI(公用網(wǎng)關(guān)接口，CommonGateway Interface)、ASP(動態(tài)服務(wù)器頁面，Active Server Pages)JSP(Java服務(wù)器頁面，Java Server Pages)PHP(超級文本預(yù)處理語言，Hypertext reprocessor等技術(shù)動態(tài)生成的頁面。它們只有在接到用戶的訪問要求后，才生成并傳輸?shù)接脩舻臑g覽器中5.1.2 動態(tài)網(wǎng)頁早期的動態(tài)網(wǎng)頁指的是采用：5.1.2 動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的比較靜態(tài)網(wǎng)頁無需系統(tǒng)實(shí)時(shí)生成，網(wǎng)頁風(fēng)格靈活多樣，但是，采用靜態(tài)頁面建立起來的站點(diǎn)，只能

5、夠簡單地根據(jù)用戶的請求傳送現(xiàn)有頁面，無法實(shí)現(xiàn)各種個(gè)性化的交互功能，而且日常維護(hù)也十分繁瑣。動態(tài)網(wǎng)頁可以通過更新頁面的外觀和行為，實(shí)現(xiàn)動態(tài)的交互作用，能方便地同訪問者進(jìn)行交流，及時(shí)獲得信息反饋。如使用者在瀏覽頁面時(shí)，能通過因特網(wǎng)或內(nèi)聯(lián)網(wǎng)(Intranet)查詢網(wǎng)絡(luò)數(shù)據(jù)庫的資料，甚至更新或刪除網(wǎng)絡(luò)服務(wù)器上的資料。動態(tài)網(wǎng)頁一般由計(jì)算機(jī)實(shí)時(shí)生成，具有日常維護(hù)簡單、更改結(jié)構(gòu)方便、交互性能強(qiáng)大等優(yōu)點(diǎn)。5.1.2 動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的比較5.2 理解動態(tài)HTML構(gòu)成動態(tài)HTML的核心技術(shù)主要有：客戶端的腳本語言、文件目標(biāo)模塊(Document Object Model)、CSS樣式表5.2 理解動態(tài)

6、HTML構(gòu)成動態(tài)HTML的核心技術(shù)主要有：5.2 理解動態(tài)HTML文件目標(biāo)模塊(DOM) ：使得HTML具備了動態(tài)性，體現(xiàn)的是Web頁面元素的等級關(guān)系，這些元素可以按照指定的時(shí)間在瀏覽器上呈現(xiàn)。它可以包括時(shí)空背景信息、窗口自身屬性、各HTML元素。CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（Cascading Stylesheet）。在主頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果進(jìn)行更加精確地控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。腳本語言：一種簡單的描述性語言，

7、它的語法結(jié)構(gòu)與計(jì)算機(jī)上的高級語言頗為相似。它通過一個(gè)標(biāo)記嵌入到HTML頁中。 JavaScript是一種面向?yàn)g覽器的網(wǎng)頁腳本編程語言，是Netscape公司推出的一種提高網(wǎng)頁頁面交互性的方法。JavaScript腳本可以被嵌入HTML文件之中，無需經(jīng)過編譯即可在瀏覽器中運(yùn)行，Navigator 3.0 和Internet Explorer3.0 及以上版本都支持JavaScript腳本語言。5.2 理解動態(tài)HTML文件目標(biāo)模塊(DOM) ：使得HT5.2.1 客戶端腳本語言什么是客戶端腳本語言 客戶端腳本語言就是指可以直接對客戶端進(jìn)行編寫并使頁面發(fā)生動態(tài)變化的腳本語言，而JavaScript和

8、VBScript就是我們最常用的客戶端開發(fā)動態(tài)網(wǎng)頁的腳本語言。5.2.1 客戶端腳本語言什么是客戶端腳本語言5.2.1 客戶端腳本語言JavaScript是一種基于對象（Object）和事件驅(qū)動（Event Driven）并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java腳本語言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁面中鏈接多個(gè)對象，與Web客戶交互作用，從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，它是Java與HTML折中的選擇，具有以下幾個(gè)基本特點(diǎn)。: 1. 是一種腳本編寫語言 2. 基于對象的

9、語言3. 簡單性 4. 安全性 5. 動態(tài)性 6. 跨平臺性5.2.1 客戶端腳本語言JavaScript是一種基于對5.2.1 客戶端腳本語言JavaScript是一種面向?yàn)g覽器的網(wǎng)頁腳本編程語言，是Netscape公司推出的一種提高網(wǎng)頁頁面交互性的方法。JavaScript腳本可以被嵌入HTML文件之中，無需經(jīng)過編譯即可在瀏覽器中運(yùn)行，Navigator 3.0 和Internet Explorer3.0 及以上版本都支持JavaScript腳本語言5.2.1 客戶端腳本語言JavaScript是一種面向?yàn)g5.2.1 客戶端腳本語言我們運(yùn)用JavaScript 是為了控制HTML頁面中的對

10、象，所以JavaScript代碼必須與HTML結(jié)合起來。在將JavaScript嵌入HTML頁面時(shí)，必須使用標(biāo)簽，JavaScrip代碼是包含在標(biāo)簽內(nèi)的。只有通過標(biāo)簽，瀏覽器才能夠解釋其中的腳本或引用寫在HTML中的JavaScrip代碼。標(biāo)簽使用的一般形式如下： /JavaScript 語句 5.2.1 客戶端腳本語言我們運(yùn)用JavaScript 是5.2.1 客戶端腳本語言例1： alert(“這是我的第一個(gè)java程序“） 例2： document.write(“這是我的第一個(gè)java程序”) 5.2.1 客戶端腳本語言例1：5.2.1 客戶端腳本語言調(diào)用JavaScript文件寫在HT

11、ML頁面中的JavaScript語句只能在當(dāng)前頁面中調(diào)用，在編輯網(wǎng)頁時(shí)，有時(shí)會在多個(gè)頁面中用到相同的JavaScript功能。在這種情況下，就可以將這些JavaScript語句寫在一個(gè)文件中，只需編寫一次JavaScript語句，就可以被多個(gè)頁面調(diào)用，要修改時(shí)也只需要修改一次。這種在多個(gè)頁面之間共享代碼的方法可以有效地減輕代碼編寫的工作量。5.2.1 客戶端腳本語言調(diào)用JavaScript文件5.2.1 客戶端腳本語言調(diào)用JavaScript文件我們可以將JavaScript語句另外保存在一個(gè)擴(kuò)展名為“.js”的文件中，需要時(shí)再調(diào)用。這時(shí)要用到標(biāo)簽的SRC屬性，標(biāo)簽的SRC屬性使得頁面能夠調(diào)用

12、保存過的JavaScript文件。如*.js與網(wǎng)頁文件在同一目錄下，可直接在SRC屬性中調(diào)用。例3： 5.2.1 客戶端腳本語言調(diào)用JavaScript文件5.2.1 客戶端腳本語言用JavaScript制作動態(tài)HTML日期顯示問候語下拉菜單滾動背景代碼生成器5.2.1 客戶端腳本語言用JavaScript制作動態(tài)H5.2.1 客戶端腳本語言在插入JavaScript特效時(shí)還要注意以下問題。1. 首先確定版權(quán)問題。并不是所有網(wǎng)上的代碼都可以無償使用，只有免費(fèi)資源，才可以下載。2. 判斷是否要修改。在把一個(gè)JavaScript特效的源代碼應(yīng)用到自己的網(wǎng)頁之前，先要判斷它是否需要修改，一般說來像日

13、期時(shí)間、鼠標(biāo)特效、頁面特效等是不需要修改的；但像菜單、文字等特效是要根據(jù)自身網(wǎng)頁的特性和需要來進(jìn)行修改的。3. 確定插入位置和如何插入。一般來說，在我們下載的允許使用的源代碼中，都會有如何插入的說明，我們只需按照其說明確定插入位置和方法就可以使用了。5.2.1 客戶端腳本語言在插入JavaScript特效時(shí)5.2.2 CSS樣式表什么是CSSCSS( Cascading StyleSheet，是層疊樣式表，簡稱樣式表)，它是近幾年才發(fā)展起來的新技術(shù)，誕生于1996年底。“樣式”就是用一個(gè)指定的名字來標(biāo)識和保存的一組有關(guān)字符和段落格式的選項(xiàng)集合。例：Word 中的樣式。例：FrontPage 中

14、的樣式5.2.2 CSS樣式表什么是CSS5.2.2 CSS樣式表CSS樣式表作為當(dāng)前網(wǎng)頁制作中的一個(gè)常用技術(shù)，不僅可以對文字格進(jìn)行設(shè)置，還可以更加精確地控制布局、字體、顏色、背景和其他圖文效果。它主要有以下幾個(gè)優(yōu)點(diǎn)。(1) 只需修改一個(gè)CSS代碼就可以改變頁數(shù)不定的網(wǎng)頁外觀和格式。(2) 可以“隨心所欲”地控制頁面布局和外觀。(3) 在所有瀏覽器和平臺之間具有較好的兼容性。(4) 精簡網(wǎng)頁，提高下載速度。5.2.2 CSS樣式表CSS樣式表作為當(dāng)前網(wǎng)頁制作中的一5.2.2 CSS樣式表CSS的實(shí)現(xiàn)2.CSS樣式表的格式1. CSS定義字體的標(biāo)簽元素font-family: 設(shè)置字體字族。fo

15、nt-style:設(shè)置字體類型。 font-weight:設(shè)置字體的字重。font-size:設(shè)置字體大小。font-decoration:修飾文本字體，比如帶下劃線“underline”。 5.2.2 CSS樣式表CSS的實(shí)現(xiàn)1. CSS定義字體的5.2.2 CSS樣式表 CSS標(biāo)記樣式名標(biāo)簽元素屬性5.2.2 CSS樣式表style type=“text5.2.2 CSS樣式表引入樣式表的方法1. 嵌入式樣式表2. 內(nèi)聯(lián)式樣式表3. 外聯(lián)式樣式表5.2.2 CSS樣式表引入樣式表的方法5.2.2 CSS樣式表1. 嵌入式樣式表嵌入式樣式表很簡單，只需在每個(gè)要應(yīng)用樣式的HTML的標(biāo)記后寫上CSS屬性就可以了。例：定義一個(gè)表格加入樣式 這樣在表格中的所有文字都變成：“宋體，綠色，9磅 ”的字了5.2.2 CSS樣式表1. 嵌入式樣式表5.2.2 CSS樣式表內(nèi)