HTML網頁編程基礎講義課件_第1頁
HTML網頁編程基礎講義課件_第2頁
HTML網頁編程基礎講義課件_第3頁
HTML網頁編程基礎講義課件_第4頁
HTML網頁編程基礎講義課件_第5頁
已閱讀5頁，還剩125頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

項目二HTML網頁編程基礎

任務一使用HTML語言來制作網頁

任務二在網頁中應用JavaScript

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

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

任務一使用HTML語言來制作網頁

任務二在網頁中應用JavaScript

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

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

溫馨提示

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

評論

0/150

提交評論