HTML網(wǎng)頁(yè)編程基礎(chǔ)講義課件_第1頁(yè)
HTML網(wǎng)頁(yè)編程基礎(chǔ)講義課件_第2頁(yè)
HTML網(wǎng)頁(yè)編程基礎(chǔ)講義課件_第3頁(yè)
HTML網(wǎng)頁(yè)編程基礎(chǔ)講義課件_第4頁(yè)
HTML網(wǎng)頁(yè)編程基礎(chǔ)講義課件_第5頁(yè)
已閱讀5頁(yè)，還剩125頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目二HTML網(wǎng)頁(yè)編程基礎(chǔ)

任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)

任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript

任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)項(xiàng)目二HTML網(wǎng)頁(yè)編程基礎(chǔ)任務(wù)一使用HTML語言來制作網(wǎng)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【任務(wù)要點(diǎn)】1.使用記事本來制作HTML網(wǎng)頁(yè)2.使用DreamWeaver來制作HTML網(wǎng)頁(yè)【案例1】使用記事本來制作HTML網(wǎng)頁(yè)【具體步驟】（在WindowsXP中完成）（1）雙擊【我的電腦】圖標(biāo)，選擇【工具】→【文件夾選項(xiàng)】命令，從彈出的對(duì)話框中打開【查看】選項(xiàng)卡，取消選中【隱藏已知文件類型的擴(kuò)展名】復(fù)選框，再單擊【確定】按鈕，即可將所有文件的擴(kuò)展名顯示出來。下一頁(yè)返回任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【任務(wù)要點(diǎn)】下一頁(yè)返回任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（2）在【桌面】上右擊，在彈出的快捷菜單中選擇【新建】→【文本文檔】命令，此時(shí)會(huì)在桌面上出現(xiàn)“新建文本文檔.txt”文件，如圖2-2所示，將文件名改為“index.htm”。圖標(biāo)會(huì)馬上改為圖2-3所示的樣式。（3）在“index.htm”上右擊，在彈出的快捷菜單中選擇【打開方式】→【記事本】命令，使用記事本來編緝代碼文本，如圖2-4所示。（4）在打開的記事本中，輸入以下代碼：<html><head><title>網(wǎng)頁(yè)標(biāo)題</title></head><body>這是我的第一個(gè)主頁(yè)</body></html>下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（2）在【桌面】上右擊，在彈任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)要瀏覽這個(gè)index.htm文件，只需在桌面上雙擊它，或者打開瀏覽器，選擇【File】→【Open】命令，然后選擇這個(gè)文件就行了。效果如圖2-5所示?！景咐?】使用DreamWeaver來制作HTML網(wǎng)頁(yè)【具體步驟】（在DreamWeaver8中完成）（1）在D盤根目錄下建立文件夾并命名為website（網(wǎng)站）。（2）打開DreamWeaver，選擇【文件】→【新建】→【基本頁(yè)】→【HTML】→【創(chuàng)建】命令，將出現(xiàn)Unitiled-1（未命名1）的頁(yè)面，如圖2-6所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）選擇【文件】→【保存】命令，在彈出的【另存為】對(duì)話框的【保存在】下拉列表框中，選擇第一步建立的文件夾website，在【文件名】下拉列表框中輸入index.htm，然后單擊【確定】按鈕。（4）在上半部分的代碼區(qū)的<title></title>內(nèi)，輸入“我的第一個(gè)首頁(yè)”，在<body></body>內(nèi)，輸入“此處顯示網(wǎng)頁(yè)的主體內(nèi)容”。（5）按F12鍵運(yùn)行網(wǎng)頁(yè)，得到圖2-7所示的網(wǎng)頁(yè)。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）選擇【文件】→【保存】任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【案例3】在DreamWeaver中進(jìn)行站點(diǎn)發(fā)布【具體步驟】（1）在【桌面】上右擊，在彈出的快捷菜單中選擇【管理】命令，彈出【計(jì)算機(jī)管理】對(duì)話框，選擇【Internet信息服務(wù)】→【網(wǎng)站】→【默認(rèn)網(wǎng)站】命令，右擊，在彈出的快捷菜單中選擇【新建】→【虛擬目錄】→【下一步】命令，如圖2-8～圖2-10所示。（2）在【別名】文本框中填入要給網(wǎng)站起的別名后，單擊【下一步】按鈕，單擊打開的對(duì)話框中【目錄】文本框后的【瀏覽】按鈕，選擇D:\website→【下一步】→【下一步】→【完成】命令，如圖2-11和圖2-12所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【案例3】在DreamWea任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）打開IE瀏覽器，在【地址】欄中輸入http://localhost/webtest/index.htm即可，出現(xiàn)如圖2-13所示的頁(yè)面。（4）打開DreamWeaver，選擇【站點(diǎn)】→【新建站點(diǎn)】命令，在彈出的對(duì)話框中打開【高級(jí)】選項(xiàng)卡，按照步驟（5）、（6）、（7）分別完成【本地信息】、【遠(yuǎn)程信息】、【測(cè)試服務(wù)器】的配置就可以了，如圖2-14所示。（5）在【本地信息】中，在【站點(diǎn)名稱】文本框中給站點(diǎn)起名為myWebsite，將【本地文件夾】設(shè)置為D:\website，如圖2-15所示。（6）在【遠(yuǎn)程信息】中，將【訪問】下拉列表框中的值設(shè)置為“本地/網(wǎng)絡(luò)”，將【遠(yuǎn)程文件夾】設(shè)置為“D:\website”，并對(duì)應(yīng)圖將復(fù)選框進(jìn)行勾選，如圖2-16所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）打開IE瀏覽器，在【地任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（7）在【測(cè)試服務(wù)器】中，將【服務(wù)器模型】設(shè)置為“ASPJavaScript”，將【訪問】設(shè)置為“本地/網(wǎng)絡(luò)”，在【URL前綴】中的http://localhost/后加上“webtest”，結(jié)果如圖2-17所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（7）在【測(cè)試服務(wù)器】中，將任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【背景知識(shí)】一、HTML概述HTML是HypertextMarkedLanguage的簡(jiǎn)寫，即超文本標(biāo)記語言，是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)，用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)，自1990年以來HTML就一直被用作ＷＷＷ（WorldWideWeb，也可稱為Web，中文叫做萬維網(wǎng)）的信息表示語言，使用HTML語言描述的文件，需要通過Web瀏覽器顯示出效果。

下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【背景知識(shí)】下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)所謂超文本，是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，事實(shí)上每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁(yè)文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是程序語言，它只是一種排版網(wǎng)頁(yè)中資料顯示位置的標(biāo)記結(jié)構(gòu)語言，易學(xué)易懂，非常簡(jiǎn)單。HTML的普遍應(yīng)用就是帶來了超文本的技術(shù)，即通過單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，與世界各地主機(jī)的文件鏈接，直接獲取相關(guān)的主題。HTML只是一個(gè)純文本文件。創(chuàng)建一個(gè)HTML文檔只需要兩個(gè)工具，一個(gè)是HTML編輯器，另一個(gè)是Web瀏覽器。HTML編輯器是用于生成和保存HTML文檔的應(yīng)用程序。Web瀏覽器是用來打開Web網(wǎng)頁(yè)文件，提供給用戶查看Web資源的客戶端程序。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)二、HTML的基本結(jié)構(gòu)一個(gè)HTML文檔是由一系列的元素和標(biāo)簽組成的，元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置，HTML超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)二、HTML的基本結(jié)構(gòu)下一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)下面是一個(gè)最基本的HTML文檔的代碼：<HTML>-----------------------------------------------|開始標(biāo)簽<HEAD>---------------------------------------------|頭部標(biāo)簽開始<TITLE>一個(gè)簡(jiǎn)單的HTML示例</TITLE>------------|Title標(biāo)簽對(duì)用來在標(biāo)題欄內(nèi)顯示網(wǎng)頁(yè)主題</HEAD>------------------------------------------------|頭部標(biāo)簽結(jié)果<BODY>-----------------------------------------|主體開始這是網(wǎng)頁(yè)的文檔的顯示部分（大部分代碼是在這個(gè)標(biāo)簽對(duì)里面的）</BODY>----------------------------------------|主體結(jié)束</HTML>-----------------------------------------------|結(jié)尾標(biāo)簽下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)下面是一個(gè)最基本的HTML文任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)三、HTML的標(biāo)簽與屬性對(duì)于剛剛接觸超文本的朋友，遇到的最大的障礙就是一些用“<”和“>”括起來的句子，稱之為標(biāo)簽，它是用來控制文本的布局、文字的格式以及五彩繽紛的頁(yè)面。標(biāo)簽通過指定某塊信息為段落或標(biāo)題等來標(biāo)識(shí)文檔某個(gè)部件。屬性是標(biāo)志里的參數(shù)的選項(xiàng)，HTML的標(biāo)簽分單標(biāo)簽和成對(duì)標(biāo)簽兩種。成對(duì)標(biāo)簽是由首標(biāo)簽（<標(biāo)簽名>）和尾標(biāo)簽（</標(biāo)簽名>）組成的，成對(duì)標(biāo)簽的作用域只作用于這對(duì)標(biāo)簽中的文檔。單獨(dú)標(biāo)簽的格式的（<標(biāo)簽名>），單獨(dú)標(biāo)簽在相應(yīng)的位置插入元素就可以了，大多數(shù)標(biāo)簽都有自己的一些屬性,屬性要寫在首標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果,各屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值；其格式如下：<標(biāo)簽名字屬性1屬性2屬性3…>內(nèi)容</標(biāo)簽名字>下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)三、HTML的標(biāo)簽與屬性下一任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)作為一般的原則，大多數(shù)屬性值不用加雙引號(hào)。但是包括空格、％、＃等特殊字符的屬性值必須加雙引號(hào)。為了培養(yǎng)良好的習(xí)慣，提倡對(duì)屬性值全部加雙引號(hào)。如：<fontcolor="#ff00ff"face="宋體"size="30">字體設(shè)置</font>四、常用標(biāo)記（tag）及屬性的英文識(shí)記常用標(biāo)記及屬性的英文識(shí)記見表2-1。返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【任務(wù)要點(diǎn)】1.學(xué)會(huì)事件驅(qū)動(dòng)（處理）的編程思想2.掌握對(duì)象及對(duì)象的事件、方法、屬性3.掌握基于對(duì)象化的編程【案例1】應(yīng)用JavaScript事件、屬性、方法來制作網(wǎng)頁(yè)【具體步驟】（1）在DreamWeaver中新建一個(gè)網(wǎng)頁(yè)，命名為index.htm，并保存在D:\website中。（2）打開index.htm，并在其代碼框的<head></head>標(biāo)簽對(duì)中輸入以下代碼，如圖2-21所示。下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【任務(wù)要點(diǎn)】下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【案例2】應(yīng)用JavaScript內(nèi)置對(duì)象來制作網(wǎng)頁(yè)【具體步驟】（1）如前所述，在D:\website中使用DreamWeaver建立一個(gè)頁(yè)面，并命名為default.htm。（2）在DreamWeaver中，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】選項(xiàng)，單擊【創(chuàng)建】按鈕，并命名為default.html。（3）在<head></head>標(biāo)簽對(duì)中輸入以下代碼，如圖2-22所示。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【案例2】應(yīng)用Java任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（4）繼續(xù)在DreamWeaver中進(jìn)行操作，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】選項(xiàng)，單擊【創(chuàng)建】按鈕，并命名為default1.html。（5）在<body></body>內(nèi)輸入文字“這是彈出的一個(gè)通知窗口”，如圖2-23所示。（6）在DreamWeaver中，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】選項(xiàng)，單擊【創(chuàng)建】按鈕，并命名為default2.html。（7）在<body></body>內(nèi)輸入代碼，如圖2-24所示。（8）按照前面所學(xué)的知識(shí)，在DreamWeaver中設(shè)置站點(diǎn)，并在IIS中設(shè)置Web站點(diǎn)發(fā)布。（9）運(yùn)行結(jié)果如圖2-25所示。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（4）繼續(xù)在Dream任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（10）單擊【單擊我，仔細(xì)查看標(biāo)題樣和窗口內(nèi)容】按鈕，可得到如圖2-26所示的頁(yè)面。（11）在如圖2-25所示的頁(yè)面中點(diǎn)擊“跳轉(zhuǎn)到default2.html”超鏈接，得到如圖2-27所示的頁(yè)面。（12）在圖2-27中，點(diǎn)擊“返回到default.html”超鏈接，就回到圖2-26所示的頁(yè)面。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（10）單擊【單擊我，任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【背景知識(shí)】JavaScript是一種新的描述性語言，可以被嵌入到HTML文件之中。這是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語言。使用它的目的是使HTML與JavaScript語言一樣實(shí)現(xiàn)與Web客戶進(jìn)行交互，從而可以開發(fā)客戶端的應(yīng)用程序等。JavaScript的出現(xiàn)使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而且實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互式的表達(dá)能力。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【背景知識(shí)】下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript一、事件事件定義了用戶與Web頁(yè)面交互時(shí)產(chǎn)生的各種操作。簡(jiǎn)單地說，點(diǎn)擊一個(gè)超鏈接或按鈕，就會(huì)產(chǎn)生一個(gè)事件，告訴瀏覽器發(fā)生了需要進(jìn)行處理的單擊操作。事件不僅可以在用戶交互過程中產(chǎn)生，而且瀏覽器自己的一些動(dòng)作也可能產(chǎn)生事件。比如說，瀏覽器載入一個(gè)網(wǎng)頁(yè)時(shí)，就會(huì)產(chǎn)生一個(gè)Load事件。在JavaScript中對(duì)象事件的處理通常由函數(shù)Function來?yè)?dān)任，其基本格式與函數(shù)完全一樣，格式如下：Function事件處理名（參數(shù)表）｛事件處理語句集……｝下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript一、事件下一頁(yè)返回上一任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript下面介紹常用事件及處理。1.瀏覽器事件（1）Load事件當(dāng)文檔載入時(shí)，產(chǎn)生該事件。onLoad的一個(gè)作用就是在首次載入一個(gè)文檔時(shí)檢測(cè)Cookie的值，并用一個(gè)變量為其賦值，使它可以被源代碼使用。（2）unLoad事件當(dāng)Web頁(yè)面退出（關(guān)閉或轉(zhuǎn)向另一個(gè)頁(yè)面）時(shí)會(huì)引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。（3）Submit事件Submit事件在完成信息的輸入，準(zhǔn)備將信息提交給服務(wù)器處理時(shí)發(fā)生，onSumbit句柄在Submit事件發(fā)生時(shí)由JavaScript自動(dòng)調(diào)用執(zhí)行。onSubmit句柄通常在標(biāo)記中聲明。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript下面介紹常用事件及處理任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript2.鼠標(biāo)事件鼠標(biāo)事件是常見的事件，經(jīng)常用到有onClick、onMouseDown、onMouseOver、onMouseOut等。3.文本框事件在文本框事件中有很多事件，下面主要介紹onChange、onSelect、onFocus、onBlue四種事件。onChange事件，當(dāng)利用Text或TextArea元素輸入字符值改變時(shí)會(huì)引發(fā)該事件，同時(shí)，當(dāng)在Select表格項(xiàng)中的一個(gè)選項(xiàng)狀態(tài)改變后也會(huì)引發(fā)該事件。OnSelect事件，當(dāng)Text或Textarea對(duì)象中的文字被加亮（選中）后，引發(fā)該事件。獲得焦點(diǎn)事件onFocus，當(dāng)用戶單擊Text或TextArea以及Select對(duì)象時(shí)，產(chǎn)生該事件。此時(shí)該對(duì)象成為前臺(tái)對(duì)象。失去焦點(diǎn)事件onBlur，當(dāng)Text對(duì)象或TextArea對(duì)象以及Select對(duì)象不再擁有焦點(diǎn)、而退到后臺(tái)時(shí)，引發(fā)該文件，它與onFocas事件是一個(gè)對(duì)應(yīng)的關(guān)系。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript2.鼠標(biāo)事件下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript二、內(nèi)置對(duì)象JavaScript的一個(gè)重要功能是基于對(duì)象功能。JavaScript的內(nèi)置對(duì)象極大地簡(jiǎn)化了JavaScript程序設(shè)計(jì)，使其可以用更直觀、模塊化和可重用的方式進(jìn)行程序開發(fā)。它支持開發(fā)對(duì)象模型并可將這些類型實(shí)例化，創(chuàng)建對(duì)象實(shí)例。JavaScript中的對(duì)象由屬性和方法兩個(gè)基本元素構(gòu)成。屬性是對(duì)象在實(shí)施其行為的過程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)。方法是指對(duì)象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)關(guān)聯(lián)。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript二、內(nèi)置對(duì)象下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript一般來說，JavaScript對(duì)象具有以下對(duì)象：Windows、Document、History、Navigator、Location、Date、Math、Array、Boolean、Number、String等。Windows對(duì)象包括許多屬性、方法和事件，可以利用這些對(duì)象控制瀏覽器窗口顯示的各個(gè)方面。Document可用于輸出，主要有write()和writeln()，主要用來實(shí)現(xiàn)在Web頁(yè)面上顯示輸出信息。History對(duì)象是指瀏覽器的瀏覽地址，History對(duì)象中常用的方法包括back()、forward()和go()。back()和forward()主要實(shí)現(xiàn)頁(yè)面的后退和前進(jìn)，go()用來進(jìn)入指定的界面。Navigator對(duì)象可用來存取瀏覽器的相關(guān)信息，瀏覽器對(duì)象Navigator中包括的常用屬性有瀏覽器的名稱、版本、代碼名稱、Cookie功能是否打開等。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScriptLocation對(duì)象是當(dāng)前網(wǎng)頁(yè)的URL地址，可以使用Location對(duì)象來打開網(wǎng)頁(yè)，Location對(duì)象中常用的方法包括reload()，replace。Reload()相當(dāng)于IE瀏覽器上的“刷新”功能。Replace()打開一個(gè)URL，并取代歷史對(duì)象中當(dāng)前位置的地址。JavaScript沒有時(shí)間類型，但可以用Date對(duì)象及其方法來取得日期和時(shí)間。Date對(duì)象有許多方法來設(shè)置、提取和操作時(shí)間，它沒有任何屬性。預(yù)定義的Math對(duì)象具有數(shù)學(xué)常量和函數(shù)的屬性和方法。同樣地，標(biāo)準(zhǔn)的數(shù)學(xué)函數(shù)也是Math對(duì)象的方法。與別的對(duì)象不同，不能自己創(chuàng)建一個(gè)Math對(duì)象，所有的Math對(duì)象都是預(yù)定義的。JavaScript可以使用預(yù)定義的Array對(duì)象及其方法提供對(duì)創(chuàng)建任何數(shù)據(jù)類型的支持。數(shù)組是一套數(shù)值的序列，它由一個(gè)名字和索引所組成。創(chuàng)建數(shù)組有兩種方法來定義一個(gè)數(shù)組。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScriptBoolean對(duì)象是數(shù)據(jù)類型的包裝器。每當(dāng)Boolean數(shù)據(jù)類型轉(zhuǎn)換為Boolean對(duì)象時(shí)，JavaScript都隱含地使用Boolean對(duì)象。Number對(duì)象代表數(shù)值數(shù)據(jù)類型和提供數(shù)值常數(shù)的對(duì)象。Number對(duì)象最主要的用途是將其屬性集中到一個(gè)對(duì)象中，以及使數(shù)字能夠通過toString方法轉(zhuǎn)換為字符串。String對(duì)象可用于處理或格式化文本字符串，以及確定和定位字符串中的子字符串。不要將它同字符串常量相混淆。用戶可以在一個(gè)字符串常量中調(diào)用任何String對(duì)象方法，JavaScript自動(dòng)將字符串常量轉(zhuǎn)換為一個(gè)臨時(shí)的String對(duì)象并調(diào)用其方法，然后丟棄該臨時(shí)的String對(duì)象。用戶也可以在一個(gè)字符串常量中使用String.length等屬性。預(yù)定義的function對(duì)象指定一個(gè)JavaScript字符串碼，它可以像函數(shù)一樣進(jìn)行編譯。返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)【任務(wù)要點(diǎn)】1.使用內(nèi)部樣式表美化網(wǎng)頁(yè)2.使用外部樣式表美化網(wǎng)頁(yè)【案例1】使用內(nèi)部樣式表對(duì)網(wǎng)頁(yè)的字體、字號(hào)、字色、字樣進(jìn)行美化設(shè)置【具體步驟】（1）如前所述，在D:\website中使用DreamWeaver建立一個(gè)頁(yè)面，并命名為cssTest1.htm。（2）打開cssTest1.htm頁(yè)面，并將方框內(nèi)的CSS代碼（<style></style>標(biāo)記內(nèi)的代碼）加入到代碼編輯區(qū)，如圖2-28所示。下一頁(yè)返回任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)【任務(wù)要點(diǎn)】下一頁(yè)返回任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（3）繼續(xù)將方框內(nèi)的代碼放入<body></body>標(biāo)記內(nèi)，如圖2-29所示。（4）在DreamWeaver中按F12鍵，即可得到圖2-30所示的結(jié)果?！景咐?】使用外部樣式表對(duì)網(wǎng)頁(yè)的字體、字號(hào)、字色、字樣進(jìn)行美化設(shè)置【具體步驟】（1）如前所述，在D:\website中使用DreamWeaver建立一個(gè)頁(yè)面，并命名為cssTest2.htm。下一頁(yè)返回上一頁(yè)任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（3）繼續(xù)將方框內(nèi)的代碼任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（2）在DreamWeaver中，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】→【CSS】選項(xiàng)，單擊【創(chuàng)建】按鈕，得到如圖2-31所示。（3）選擇【文件】→【保存】命令，在彈出的【另存為】對(duì)話框的【文件名】下拉列表框中輸入cssTest2.css，然后單擊【保存】按鈕。（4）在cssTest2.css文件中，并將CSS代碼加入到編輯區(qū)中去，如圖2-32所示。（5）切換到cssTest2.htm頁(yè)面，將方框內(nèi)的代碼，加入到網(wǎng)頁(yè)中，如圖2-33所示。（6）仍然在cssTest.htm頁(yè)面，在DreamWeaver的右側(cè)窗口中（如圖2-34所示），單擊鏈接按鈕，彈出【鏈接外部樣式表】對(duì)話框，如圖2-35所示。下一頁(yè)返回上一頁(yè)任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（2）在DreamWea任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（7）單擊【瀏覽】按鈕，在D:\website目錄中選擇cssTest.css即可，出現(xiàn)圖2-36所示橢圓內(nèi)的代碼。【背景知識(shí)】1996年底的時(shí)候悄悄誕生了一種叫做樣式表（stylesheets）的技術(shù)。它向世人保證：將對(duì)布局、字體、顏色、背景和其他文圖效果實(shí)現(xiàn)更加精確的控制。只通過修改一個(gè)文件就改變頁(yè)數(shù)不計(jì)的網(wǎng)頁(yè)的外觀和格式。能在所有瀏覽器和平臺(tái)之間實(shí)現(xiàn)兼容。實(shí)際上除了還不能全面支持常用的大多數(shù)瀏覽器之外，CSS在實(shí)現(xiàn)其他承諾方面做得相當(dāng)出色。現(xiàn)在，先來了解樣式表能做什么。下一頁(yè)返回上一頁(yè)任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（7）單擊【瀏覽】按鈕，任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)CSS樣式表有什么特別之處?簡(jiǎn)而言之,它能做以下事情。①用戶可以將格式和結(jié)構(gòu)分離；②用戶可以以前所未有的能力控制頁(yè)面布局；③用戶可以制作體積更小下載更快的網(wǎng)頁(yè)；④用戶可以將許多網(wǎng)頁(yè)同時(shí)更新，比以前更好、更快、更容易；⑤瀏覽器將成為更友好的界面。利用CSS樣式表可以將格式和結(jié)構(gòu)分離。利用CSS樣式表使用戶可以以前所未有的能力控制頁(yè)面的布局。利用CSS樣式表使用戶可以制作出體積更小下載更快的網(wǎng)頁(yè)。利用CSS樣式表使用戶可以更好、更快、更容易地維護(hù)及更新大量的網(wǎng)頁(yè)。返回上一頁(yè)任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)CSS樣式表有什么特別之表2-1常用標(biāo)記及屬性的英文識(shí)記返回表2-1常用標(biāo)記及屬性的英文識(shí)記返回圖2-2新建文本文檔.txt返回圖2-2新建文本文檔.txt返回圖2-3index.htm返回圖2-3index.htm返回圖2-4“記事本”命令返回圖2-4“記事本”命令返回圖2-5程序運(yùn)行效果返回圖2-5程序運(yùn)行效果返回圖2-6Unitiled-1頁(yè)面返回圖2-6Unitiled-1頁(yè)面返回圖2-7運(yùn)行結(jié)果返回圖2-7運(yùn)行結(jié)果返回圖2-8“管理”命令返回下一頁(yè)圖2-8“管理”命令返回下一頁(yè)圖2-9選擇【Internet信息服務(wù)】命令返回下一頁(yè)上一頁(yè)圖2-9選擇【Internet信息服務(wù)】命令返回下一頁(yè)上一頁(yè)圖2-10選擇【虛擬目錄】命令返回上一頁(yè)圖2-10選擇【虛擬目錄】命令返回上一頁(yè)圖2-11設(shè)置別名返回圖2-11設(shè)置別名返回圖2-12選擇目錄路徑返回圖2-12選擇目錄路徑返回圖2-13顯示頁(yè)面返回圖2-13顯示頁(yè)面返回圖2-14“高級(jí)”選項(xiàng)卡返回圖2-14“高級(jí)”選項(xiàng)卡返回圖2-15設(shè)置本地信息返回圖2-15設(shè)置本地信息返回圖2-16設(shè)置遠(yuǎn)程信息返回圖2-16設(shè)置遠(yuǎn)程信息返回圖2-17設(shè)置測(cè)試服務(wù)器返回圖2-17設(shè)置測(cè)試服務(wù)器返回圖2-21輸入代碼返回圖2-21輸入代碼返回圖2-22輸入代碼返回圖2-22輸入代碼返回圖2-23輸入文字返回圖2-23輸入文字返回圖2-24輸入代碼返回圖2-24輸入代碼返回圖2-25運(yùn)行結(jié)果（1）返回圖2-25運(yùn)行結(jié)果（1）返回圖2-25運(yùn)行結(jié)果（1）返回圖2-25運(yùn)行結(jié)果（1）返回圖2-26運(yùn)行結(jié)果（2）返回圖2-26運(yùn)行結(jié)果（2）返回圖2-27運(yùn)行結(jié)果（3）返回圖2-27運(yùn)行結(jié)果（3）返回圖2-28輸入代碼（1）返回圖2-28輸入代碼（1）返回圖2-29輸入代碼（2）返回圖2-29輸入代碼（2）返回圖2-30運(yùn)行結(jié)果返回圖2-30運(yùn)行結(jié)果返回圖2-31新建頁(yè)面返回圖2-31新建頁(yè)面返回圖2-32加入代碼（1）返回圖2-32加入代碼（1）返回圖2-33加入代碼（2）返回圖2-33加入代碼（2）返回圖2-34DreamWeaver右側(cè)窗口返回圖2-34DreamWeaver右側(cè)窗口返回圖2-35【鏈接外部樣式表】對(duì)話框返回圖2-35【鏈接外部樣式表】對(duì)話框返回圖2-36加入代碼（3）返回圖2-36加入代碼（3）返回項(xiàng)目二HTML網(wǎng)頁(yè)編程基礎(chǔ)

任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)

任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript

任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)項(xiàng)目二HTML網(wǎng)頁(yè)編程基礎(chǔ)任務(wù)一使用HTML語言來制作網(wǎng)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【任務(wù)要點(diǎn)】1.使用記事本來制作HTML網(wǎng)頁(yè)2.使用DreamWeaver來制作HTML網(wǎng)頁(yè)【案例1】使用記事本來制作HTML網(wǎng)頁(yè)【具體步驟】（在WindowsXP中完成）（1）雙擊【我的電腦】圖標(biāo)，選擇【工具】→【文件夾選項(xiàng)】命令，從彈出的對(duì)話框中打開【查看】選項(xiàng)卡，取消選中【隱藏已知文件類型的擴(kuò)展名】復(fù)選框，再單擊【確定】按鈕，即可將所有文件的擴(kuò)展名顯示出來。下一頁(yè)返回任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【任務(wù)要點(diǎn)】下一頁(yè)返回任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（2）在【桌面】上右擊，在彈出的快捷菜單中選擇【新建】→【文本文檔】命令，此時(shí)會(huì)在桌面上出現(xiàn)“新建文本文檔.txt”文件，如圖2-2所示，將文件名改為“index.htm”。圖標(biāo)會(huì)馬上改為圖2-3所示的樣式。（3）在“index.htm”上右擊，在彈出的快捷菜單中選擇【打開方式】→【記事本】命令，使用記事本來編緝代碼文本，如圖2-4所示。（4）在打開的記事本中，輸入以下代碼：<html><head><title>網(wǎng)頁(yè)標(biāo)題</title></head><body>這是我的第一個(gè)主頁(yè)</body></html>下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（2）在【桌面】上右擊，在彈任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)要瀏覽這個(gè)index.htm文件，只需在桌面上雙擊它，或者打開瀏覽器，選擇【File】→【Open】命令，然后選擇這個(gè)文件就行了。效果如圖2-5所示。【案例2】使用DreamWeaver來制作HTML網(wǎng)頁(yè)【具體步驟】（在DreamWeaver8中完成）（1）在D盤根目錄下建立文件夾并命名為website（網(wǎng)站）。（2）打開DreamWeaver，選擇【文件】→【新建】→【基本頁(yè)】→【HTML】→【創(chuàng)建】命令，將出現(xiàn)Unitiled-1（未命名1）的頁(yè)面，如圖2-6所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）選擇【文件】→【保存】命令，在彈出的【另存為】對(duì)話框的【保存在】下拉列表框中，選擇第一步建立的文件夾website，在【文件名】下拉列表框中輸入index.htm，然后單擊【確定】按鈕。（4）在上半部分的代碼區(qū)的<title></title>內(nèi)，輸入“我的第一個(gè)首頁(yè)”，在<body></body>內(nèi)，輸入“此處顯示網(wǎng)頁(yè)的主體內(nèi)容”。（5）按F12鍵運(yùn)行網(wǎng)頁(yè)，得到圖2-7所示的網(wǎng)頁(yè)。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）選擇【文件】→【保存】任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【案例3】在DreamWeaver中進(jìn)行站點(diǎn)發(fā)布【具體步驟】（1）在【桌面】上右擊，在彈出的快捷菜單中選擇【管理】命令，彈出【計(jì)算機(jī)管理】對(duì)話框，選擇【Internet信息服務(wù)】→【網(wǎng)站】→【默認(rèn)網(wǎng)站】命令，右擊，在彈出的快捷菜單中選擇【新建】→【虛擬目錄】→【下一步】命令，如圖2-8～圖2-10所示。（2）在【別名】文本框中填入要給網(wǎng)站起的別名后，單擊【下一步】按鈕，單擊打開的對(duì)話框中【目錄】文本框后的【瀏覽】按鈕，選擇D:\website→【下一步】→【下一步】→【完成】命令，如圖2-11和圖2-12所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【案例3】在DreamWea任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）打開IE瀏覽器，在【地址】欄中輸入http://localhost/webtest/index.htm即可，出現(xiàn)如圖2-13所示的頁(yè)面。（4）打開DreamWeaver，選擇【站點(diǎn)】→【新建站點(diǎn)】命令，在彈出的對(duì)話框中打開【高級(jí)】選項(xiàng)卡，按照步驟（5）、（6）、（7）分別完成【本地信息】、【遠(yuǎn)程信息】、【測(cè)試服務(wù)器】的配置就可以了，如圖2-14所示。（5）在【本地信息】中，在【站點(diǎn)名稱】文本框中給站點(diǎn)起名為myWebsite，將【本地文件夾】設(shè)置為D:\website，如圖2-15所示。（6）在【遠(yuǎn)程信息】中，將【訪問】下拉列表框中的值設(shè)置為“本地/網(wǎng)絡(luò)”，將【遠(yuǎn)程文件夾】設(shè)置為“D:\website”，并對(duì)應(yīng)圖將復(fù)選框進(jìn)行勾選，如圖2-16所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（3）打開IE瀏覽器，在【地任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（7）在【測(cè)試服務(wù)器】中，將【服務(wù)器模型】設(shè)置為“ASPJavaScript”，將【訪問】設(shè)置為“本地/網(wǎng)絡(luò)”，在【URL前綴】中的http://localhost/后加上“webtest”，結(jié)果如圖2-17所示。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)（7）在【測(cè)試服務(wù)器】中，將任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【背景知識(shí)】一、HTML概述HTML是HypertextMarkedLanguage的簡(jiǎn)寫，即超文本標(biāo)記語言，是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)，用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)，自1990年以來HTML就一直被用作ＷＷＷ（WorldWideWeb，也可稱為Web，中文叫做萬維網(wǎng)）的信息表示語言，使用HTML語言描述的文件，需要通過Web瀏覽器顯示出效果。

下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)【背景知識(shí)】下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)所謂超文本，是因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，事實(shí)上每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁(yè)文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是程序語言，它只是一種排版網(wǎng)頁(yè)中資料顯示位置的標(biāo)記結(jié)構(gòu)語言，易學(xué)易懂，非常簡(jiǎn)單。HTML的普遍應(yīng)用就是帶來了超文本的技術(shù)，即通過單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，與世界各地主機(jī)的文件鏈接，直接獲取相關(guān)的主題。HTML只是一個(gè)純文本文件。創(chuàng)建一個(gè)HTML文檔只需要兩個(gè)工具，一個(gè)是HTML編輯器，另一個(gè)是Web瀏覽器。HTML編輯器是用于生成和保存HTML文檔的應(yīng)用程序。Web瀏覽器是用來打開Web網(wǎng)頁(yè)文件，提供給用戶查看Web資源的客戶端程序。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)二、HTML的基本結(jié)構(gòu)一個(gè)HTML文檔是由一系列的元素和標(biāo)簽組成的，元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置，HTML超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)二、HTML的基本結(jié)構(gòu)下一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)下面是一個(gè)最基本的HTML文檔的代碼：<HTML>-----------------------------------------------|開始標(biāo)簽<HEAD>---------------------------------------------|頭部標(biāo)簽開始<TITLE>一個(gè)簡(jiǎn)單的HTML示例</TITLE>------------|Title標(biāo)簽對(duì)用來在標(biāo)題欄內(nèi)顯示網(wǎng)頁(yè)主題</HEAD>------------------------------------------------|頭部標(biāo)簽結(jié)果<BODY>-----------------------------------------|主體開始這是網(wǎng)頁(yè)的文檔的顯示部分（大部分代碼是在這個(gè)標(biāo)簽對(duì)里面的）</BODY>----------------------------------------|主體結(jié)束</HTML>-----------------------------------------------|結(jié)尾標(biāo)簽下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)下面是一個(gè)最基本的HTML文任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)三、HTML的標(biāo)簽與屬性對(duì)于剛剛接觸超文本的朋友，遇到的最大的障礙就是一些用“<”和“>”括起來的句子，稱之為標(biāo)簽，它是用來控制文本的布局、文字的格式以及五彩繽紛的頁(yè)面。標(biāo)簽通過指定某塊信息為段落或標(biāo)題等來標(biāo)識(shí)文檔某個(gè)部件。屬性是標(biāo)志里的參數(shù)的選項(xiàng)，HTML的標(biāo)簽分單標(biāo)簽和成對(duì)標(biāo)簽兩種。成對(duì)標(biāo)簽是由首標(biāo)簽（<標(biāo)簽名>）和尾標(biāo)簽（</標(biāo)簽名>）組成的，成對(duì)標(biāo)簽的作用域只作用于這對(duì)標(biāo)簽中的文檔。單獨(dú)標(biāo)簽的格式的（<標(biāo)簽名>），單獨(dú)標(biāo)簽在相應(yīng)的位置插入元素就可以了，大多數(shù)標(biāo)簽都有自己的一些屬性,屬性要寫在首標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果,各屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值；其格式如下：<標(biāo)簽名字屬性1屬性2屬性3…>內(nèi)容</標(biāo)簽名字>下一頁(yè)返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)三、HTML的標(biāo)簽與屬性下一任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)作為一般的原則，大多數(shù)屬性值不用加雙引號(hào)。但是包括空格、％、＃等特殊字符的屬性值必須加雙引號(hào)。為了培養(yǎng)良好的習(xí)慣，提倡對(duì)屬性值全部加雙引號(hào)。如：<fontcolor="#ff00ff"face="宋體"size="30">字體設(shè)置</font>四、常用標(biāo)記（tag）及屬性的英文識(shí)記常用標(biāo)記及屬性的英文識(shí)記見表2-1。返回上一頁(yè)任務(wù)一使用HTML語言來制作網(wǎng)頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【任務(wù)要點(diǎn)】1.學(xué)會(huì)事件驅(qū)動(dòng)（處理）的編程思想2.掌握對(duì)象及對(duì)象的事件、方法、屬性3.掌握基于對(duì)象化的編程【案例1】應(yīng)用JavaScript事件、屬性、方法來制作網(wǎng)頁(yè)【具體步驟】（1）在DreamWeaver中新建一個(gè)網(wǎng)頁(yè)，命名為index.htm，并保存在D:\website中。（2）打開index.htm，并在其代碼框的<head></head>標(biāo)簽對(duì)中輸入以下代碼，如圖2-21所示。下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【任務(wù)要點(diǎn)】下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【案例2】應(yīng)用JavaScript內(nèi)置對(duì)象來制作網(wǎng)頁(yè)【具體步驟】（1）如前所述，在D:\website中使用DreamWeaver建立一個(gè)頁(yè)面，并命名為default.htm。（2）在DreamWeaver中，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】選項(xiàng)，單擊【創(chuàng)建】按鈕，并命名為default.html。（3）在<head></head>標(biāo)簽對(duì)中輸入以下代碼，如圖2-22所示。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【案例2】應(yīng)用Java任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（4）繼續(xù)在DreamWeaver中進(jìn)行操作，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】選項(xiàng)，單擊【創(chuàng)建】按鈕，并命名為default1.html。（5）在<body></body>內(nèi)輸入文字“這是彈出的一個(gè)通知窗口”，如圖2-23所示。（6）在DreamWeaver中，選擇【文件】→【新建】命令，在彈出的對(duì)話框中的【常規(guī)】選項(xiàng)卡中，選擇【基本頁(yè)】選項(xiàng)，單擊【創(chuàng)建】按鈕，并命名為default2.html。（7）在<body></body>內(nèi)輸入代碼，如圖2-24所示。（8）按照前面所學(xué)的知識(shí)，在DreamWeaver中設(shè)置站點(diǎn)，并在IIS中設(shè)置Web站點(diǎn)發(fā)布。（9）運(yùn)行結(jié)果如圖2-25所示。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（4）繼續(xù)在Dream任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（10）單擊【單擊我，仔細(xì)查看標(biāo)題樣和窗口內(nèi)容】按鈕，可得到如圖2-26所示的頁(yè)面。（11）在如圖2-25所示的頁(yè)面中點(diǎn)擊“跳轉(zhuǎn)到default2.html”超鏈接，得到如圖2-27所示的頁(yè)面。（12）在圖2-27中，點(diǎn)擊“返回到default.html”超鏈接，就回到圖2-26所示的頁(yè)面。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript（10）單擊【單擊我，任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【背景知識(shí)】JavaScript是一種新的描述性語言，可以被嵌入到HTML文件之中。這是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語言。使用它的目的是使HTML與JavaScript語言一樣實(shí)現(xiàn)與Web客戶進(jìn)行交互，從而可以開發(fā)客戶端的應(yīng)用程序等。JavaScript的出現(xiàn)使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而且實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互式的表達(dá)能力。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript【背景知識(shí)】下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript一、事件事件定義了用戶與Web頁(yè)面交互時(shí)產(chǎn)生的各種操作。簡(jiǎn)單地說，點(diǎn)擊一個(gè)超鏈接或按鈕，就會(huì)產(chǎn)生一個(gè)事件，告訴瀏覽器發(fā)生了需要進(jìn)行處理的單擊操作。事件不僅可以在用戶交互過程中產(chǎn)生，而且瀏覽器自己的一些動(dòng)作也可能產(chǎn)生事件。比如說，瀏覽器載入一個(gè)網(wǎng)頁(yè)時(shí)，就會(huì)產(chǎn)生一個(gè)Load事件。在JavaScript中對(duì)象事件的處理通常由函數(shù)Function來?yè)?dān)任，其基本格式與函數(shù)完全一樣，格式如下：Function事件處理名（參數(shù)表）｛事件處理語句集……｝下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript一、事件下一頁(yè)返回上一任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript下面介紹常用事件及處理。1.瀏覽器事件（1）Load事件當(dāng)文檔載入時(shí)，產(chǎn)生該事件。onLoad的一個(gè)作用就是在首次載入一個(gè)文檔時(shí)檢測(cè)Cookie的值，并用一個(gè)變量為其賦值，使它可以被源代碼使用。（2）unLoad事件當(dāng)Web頁(yè)面退出（關(guān)閉或轉(zhuǎn)向另一個(gè)頁(yè)面）時(shí)會(huì)引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。（3）Submit事件Submit事件在完成信息的輸入，準(zhǔn)備將信息提交給服務(wù)器處理時(shí)發(fā)生，onSumbit句柄在Submit事件發(fā)生時(shí)由JavaScript自動(dòng)調(diào)用執(zhí)行。onSubmit句柄通常在標(biāo)記中聲明。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript下面介紹常用事件及處理任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript2.鼠標(biāo)事件鼠標(biāo)事件是常見的事件，經(jīng)常用到有onClick、onMouseDown、onMouseOver、onMouseOut等。3.文本框事件在文本框事件中有很多事件，下面主要介紹onChange、onSelect、onFocus、onBlue四種事件。onChange事件，當(dāng)利用Text或TextArea元素輸入字符值改變時(shí)會(huì)引發(fā)該事件，同時(shí)，當(dāng)在Select表格項(xiàng)中的一個(gè)選項(xiàng)狀態(tài)改變后也會(huì)引發(fā)該事件。OnSelect事件，當(dāng)Text或Textarea對(duì)象中的文字被加亮（選中）后，引發(fā)該事件。獲得焦點(diǎn)事件onFocus，當(dāng)用戶單擊Text或TextArea以及Select對(duì)象時(shí)，產(chǎn)生該事件。此時(shí)該對(duì)象成為前臺(tái)對(duì)象。失去焦點(diǎn)事件onBlur，當(dāng)Text對(duì)象或TextArea對(duì)象以及Select對(duì)象不再擁有焦點(diǎn)、而退到后臺(tái)時(shí)，引發(fā)該文件，它與onFocas事件是一個(gè)對(duì)應(yīng)的關(guān)系。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript2.鼠標(biāo)事件下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript二、內(nèi)置對(duì)象JavaScript的一個(gè)重要功能是基于對(duì)象功能。JavaScript的內(nèi)置對(duì)象極大地簡(jiǎn)化了JavaScript程序設(shè)計(jì)，使其可以用更直觀、模塊化和可重用的方式進(jìn)行程序開發(fā)。它支持開發(fā)對(duì)象模型并可將這些類型實(shí)例化，創(chuàng)建對(duì)象實(shí)例。JavaScript中的對(duì)象由屬性和方法兩個(gè)基本元素構(gòu)成。屬性是對(duì)象在實(shí)施其行為的過程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)。方法是指對(duì)象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)關(guān)聯(lián)。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript二、內(nèi)置對(duì)象下一頁(yè)返回任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript一般來說，JavaScript對(duì)象具有以下對(duì)象：Windows、Document、History、Navigator、Location、Date、Math、Array、Boolean、Number、String等。Windows對(duì)象包括許多屬性、方法和事件，可以利用這些對(duì)象控制瀏覽器窗口顯示的各個(gè)方面。Document可用于輸出，主要有write()和writeln()，主要用來實(shí)現(xiàn)在Web頁(yè)面上顯示輸出信息。History對(duì)象是指瀏覽器的瀏覽地址，History對(duì)象中常用的方法包括back()、forward()和go()。back()和forward()主要實(shí)現(xiàn)頁(yè)面的后退和前進(jìn)，go()用來進(jìn)入指定的界面。Navigator對(duì)象可用來存取瀏覽器的相關(guān)信息，瀏覽器對(duì)象Navigator中包括的常用屬性有瀏覽器的名稱、版本、代碼名稱、Cookie功能是否打開等。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScriptLocation對(duì)象是當(dāng)前網(wǎng)頁(yè)的URL地址，可以使用Location對(duì)象來打開網(wǎng)頁(yè)，Location對(duì)象中常用的方法包括reload()，replace。Reload()相當(dāng)于IE瀏覽器上的“刷新”功能。Replace()打開一個(gè)URL，并取代歷史對(duì)象中當(dāng)前位置的地址。JavaScript沒有時(shí)間類型，但可以用Date對(duì)象及其方法來取得日期和時(shí)間。Date對(duì)象有許多方法來設(shè)置、提取和操作時(shí)間，它沒有任何屬性。預(yù)定義的Math對(duì)象具有數(shù)學(xué)常量和函數(shù)的屬性和方法。同樣地，標(biāo)準(zhǔn)的數(shù)學(xué)函數(shù)也是Math對(duì)象的方法。與別的對(duì)象不同，不能自己創(chuàng)建一個(gè)Math對(duì)象，所有的Math對(duì)象都是預(yù)定義的。JavaScript可以使用預(yù)定義的Array對(duì)象及其方法提供對(duì)創(chuàng)建任何數(shù)據(jù)類型的支持。數(shù)組是一套數(shù)值的序列，它由一個(gè)名字和索引所組成。創(chuàng)建數(shù)組有兩種方法來定義一個(gè)數(shù)組。下一頁(yè)返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScriptBoolean對(duì)象是數(shù)據(jù)類型的包裝器。每當(dāng)Boolean數(shù)據(jù)類型轉(zhuǎn)換為Boolean對(duì)象時(shí)，JavaScript都隱含地使用Boolean對(duì)象。Number對(duì)象代表數(shù)值數(shù)據(jù)類型和提供數(shù)值常數(shù)的對(duì)象。Number對(duì)象最主要的用途是將其屬性集中到一個(gè)對(duì)象中，以及使數(shù)字能夠通過toString方法轉(zhuǎn)換為字符串。String對(duì)象可用于處理或格式化文本字符串，以及確定和定位字符串中的子字符串。不要將它同字符串常量相混淆。用戶可以在一個(gè)字符串常量中調(diào)用任何String對(duì)象方法，JavaScript自動(dòng)將字符串常量轉(zhuǎn)換為一個(gè)臨時(shí)的String對(duì)象并調(diào)用其方法，然后丟棄該臨時(shí)的String對(duì)象。用戶也可以在一個(gè)字符串常量中使用String.length等屬性。預(yù)定義的function對(duì)象指定一個(gè)JavaScript字符串碼，它可以像函數(shù)一樣進(jìn)行編譯。返回上一頁(yè)任務(wù)二在網(wǎng)頁(yè)中應(yīng)用JavaScript任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)【任務(wù)要點(diǎn)】1.使用內(nèi)部樣式表美化網(wǎng)頁(yè)2.使用外部樣式表美化網(wǎng)頁(yè)【案例1】使用內(nèi)部樣式表對(duì)網(wǎng)頁(yè)的字體、字號(hào)、字色、字樣進(jìn)行美化設(shè)置【具體步驟】（1）如前所述，在D:\website中使用DreamWeaver建立一個(gè)頁(yè)面，并命名為cssTest1.htm。（2）打開cssTest1.htm頁(yè)面，并將方框內(nèi)的CSS代碼（<style></style>標(biāo)記內(nèi)的代碼）加入到代碼編輯區(qū)，如圖2-28所示。下一頁(yè)返回任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)【任務(wù)要點(diǎn)】下一頁(yè)返回任務(wù)三使用樣式表（CSS）來美化網(wǎng)頁(yè)（3）繼續(xù)將方框內(nèi)的代碼放入<body></body>標(biāo)記內(nèi)，如圖2-29所

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論