《七年級信息技術(shù) 網(wǎng)頁設(shè)計基礎(chǔ)課件 青島版》由會員分享，可在線閱讀，更多相關(guān)《七年級信息技術(shù) 網(wǎng)頁設(shè)計基礎(chǔ)課件 青島版（36頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、 Web(Web(也稱也稱WWW)WWW)是是InternetInternet網(wǎng)上最網(wǎng)上最受歡迎的一種信息服務(wù)系統(tǒng)。受歡迎的一種信息服務(wù)系統(tǒng)。 主要由兩部分組成：一是服務(wù)器主要由兩部分組成：一是服務(wù)器端即信息的提供者，也稱端即信息的提供者，也稱WebWeb站點；站點；二是客戶端即信息的接收者?？蛻舳硕强蛻舳思葱畔⒌慕邮照??？蛻舳送ㄟ^瀏覽器來訪問通過瀏覽器來訪問WebWeb站點。站點。 WebWeb信息是以網(wǎng)頁的方式來組織信息是以網(wǎng)頁的方式來組織的。的?？蛻魴C客戶機(瀏覽器瀏覽器)客戶機客戶機(瀏覽器瀏覽器)客戶機客戶機(瀏覽器瀏覽器)Internet服務(wù)器服務(wù)器( (網(wǎng)站網(wǎng)站) )服務(wù)器服務(wù)
2、器( (網(wǎng)站網(wǎng)站) )Web網(wǎng)站由一系列精心策劃和組織的網(wǎng)頁組成網(wǎng)站由一系列精心策劃和組織的網(wǎng)頁組成以后課程將圍繞網(wǎng)頁設(shè)計來進行以后課程將圍繞網(wǎng)頁設(shè)計來進行 在在FrontPageFrontPage圖形界面下編制（與圖形界面下編制（與WordWord操作相似）操作相似） 使用使用HTMLHTML代碼編制代碼編制 嵌入腳本程序（使網(wǎng)頁動起來）嵌入腳本程序（使網(wǎng)頁動起來）網(wǎng)站由什么構(gòu)成的網(wǎng)站由什么構(gòu)成的? ?如何建設(shè)網(wǎng)站如何建設(shè)網(wǎng)站? ?如何設(shè)計網(wǎng)頁如何設(shè)計網(wǎng)頁? ?本章主要內(nèi)容退出退出網(wǎng)頁和站點的基本概念網(wǎng)頁和站點的基本概念使用使用FrontPage制作網(wǎng)頁制作網(wǎng)頁常用的常用的HTML標(biāo)記標(biāo)記H
3、TML及腳本語言簡介及腳本語言簡介初步認(rèn)識初步認(rèn)識HTML文檔文檔8.1 概述 8.1.1 8.1.1 網(wǎng)頁的基本概念網(wǎng)頁的基本概念 1. 1. 網(wǎng)站與網(wǎng)頁網(wǎng)站與網(wǎng)頁 Web（WWW）網(wǎng)由形形式式的）網(wǎng)由形形式式的Web站點組成站點組成 Web站點由一系列精心策劃和組織的網(wǎng)頁組成站點由一系列精心策劃和組織的網(wǎng)頁組成 網(wǎng)頁文件網(wǎng)頁文件2如如Photo.htm站點站點視頻素材視頻素材圖片素材圖片素材網(wǎng)頁文件網(wǎng)頁文件1如如Interest.htm主頁文件主頁文件 Index.htm聲音素材聲音素材 什么是超鏈接？什么是超鏈接？網(wǎng)頁之間通過網(wǎng)頁之間通過“超鏈接超鏈接”，構(gòu)成一個整體，構(gòu)成一個整體主頁主
4、頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁網(wǎng)頁超鏈接超鏈接 2. Web的特點的特點 超文本、圖形界面、與平臺無關(guān)，分布式、交互、動態(tài)超文本、圖形界面、與平臺無關(guān)，分布式、交互、動態(tài) 超媒體進一步擴展了超文本的信息類型超媒體進一步擴展了超文本的信息類型 3. HTML語言語言 超文本標(biāo)記語言。用來編制網(wǎng)頁文檔超文本標(biāo)記語言。用來編制網(wǎng)頁文檔(也稱也稱HTML文檔文檔) 。并不需要經(jīng)過。并不需要經(jīng)過編譯，只需要通過瀏覽器來打開就可以看到結(jié)果編譯，只需要通過瀏覽器來打開就可以看到結(jié)果 采用了標(biāo)記方式，描述了每個在網(wǎng)頁上的組件，例如文本段落、文本格采用了標(biāo)記方式，描述了每個在網(wǎng)頁上的組件，例如文
5、本段落、文本格式、圖像、超鏈接等式、圖像、超鏈接等 通過超文本鏈接能方便地進行各種信息之間切換通過超文本鏈接能方便地進行各種信息之間切換 HTMLHTML版本版本 歐洲粒子物理實驗室歐洲粒子物理實驗室(CERN)首次提出來的首次提出來的 HTML2.0 HTML3.0 HTML3.2 HTML4.0 DHTML DHTML（動態(tài)（動態(tài)HTMLHTML） 動態(tài)動態(tài)HTML能夠使網(wǎng)頁下載到瀏覽器以后仍然能夠隨時變換能夠使網(wǎng)頁下載到瀏覽器以后仍然能夠隨時變換 包含多種技術(shù)，如包含多種技術(shù)，如JavaScript, VBScript, Document Object Model(DOM, 文檔對象模型
6、文檔對象模型), Layers和和CSS等等 4. XML4. XML語言語言 擴展標(biāo)記語言擴展標(biāo)記語言XML(eXtensible Markup Language)是一種新興的面是一種新興的面向向Web應(yīng)用的標(biāo)記語言應(yīng)用的標(biāo)記語言 HTML無法描述數(shù)據(jù)內(nèi)容，而無法描述數(shù)據(jù)內(nèi)容，而XML能夠定義數(shù)據(jù)元素和屬性。其最大優(yōu)能夠定義數(shù)據(jù)元素和屬性。其最大優(yōu)點是適合網(wǎng)上發(fā)布和在網(wǎng)頁上組織信息。點是適合網(wǎng)上發(fā)布和在網(wǎng)頁上組織信息。 不少電子商務(wù)采用以不少電子商務(wù)采用以XML為基礎(chǔ)的文件來交換網(wǎng)絡(luò)數(shù)據(jù)為基礎(chǔ)的文件來交換網(wǎng)絡(luò)數(shù)據(jù) 8.1.2 兩個簡單的HTML文檔 例例8-1 顯示顯示“歡迎您來到歡迎您來到
7、HTML世界世界” 例例8-1 8-1 歡迎您來到歡迎您來到HTMLHTML世界世界 假設(shè)把該文檔存放在當(dāng)前站點中，文件名為假設(shè)把該文檔存放在當(dāng)前站點中，文件名為“Welcome.htm”例例8-1文件名標(biāo)簽文件名標(biāo)簽 例例8-2 建立含有兩個網(wǎng)頁鏈接的建立含有兩個網(wǎng)頁鏈接的HTML文檔文檔 例例8-2 8-2 A HREF= 歡迎您歡迎您 A HREF= 瀏覽北大瀏覽北大 其中其中: : 表示分段表示分段 表示一條水平線表示一條水平線 A HREF表示插入超級鏈接表示插入超級鏈接例例8-2 8.1.3 HTML文檔的基本結(jié)構(gòu) (1) 每個每個HTML文檔文檔(網(wǎng)頁網(wǎng)頁)以標(biāo)記以標(biāo)記開始，以開
8、始，以結(jié)結(jié)束束 四四種基本標(biāo)記如下種基本標(biāo)記如下： 標(biāo)明文檔的開始和結(jié)束，標(biāo)明文檔的開始和結(jié)束，定義文檔定義文檔 標(biāo)明文檔的標(biāo)明文檔的頭部頭部 標(biāo)明標(biāo)明標(biāo)題標(biāo)題，顯示在瀏覽器的標(biāo)題欄中，顯示在瀏覽器的標(biāo)題欄中 標(biāo)明文檔的標(biāo)明文檔的主體主體 (2) HTML文檔一般由兩部分組成：文檔一般由兩部分組成：頭部和主體頭部和主體 (3) 標(biāo)記以標(biāo)記以“”及標(biāo)記名組成及標(biāo)記名組成 雙邊標(biāo)記：雙邊標(biāo)記： 示例：示例： . 單邊標(biāo)記：單邊標(biāo)記： 示例：示例： 一個不包含任何內(nèi)容的基本一個不包含任何內(nèi)容的基本HTMLHTML文檔可以如下所示：文檔可以如下所示： 該文檔可作為一個該文檔可作為一個WebWeb頁標(biāo)準(zhǔn)
9、模板，以后每次創(chuàng)建新頁標(biāo)準(zhǔn)模板，以后每次創(chuàng)建新HTMLHTML文檔時都文檔時都可以以它為基礎(chǔ)進行擴充，從而減少錄入的時間，提高效率?？梢砸运鼮榛A(chǔ)進行擴充，從而減少錄入的時間，提高效率。 8.2 使用FRONTPAGE制作網(wǎng)頁 借助于借助于FrontPage，用戶可以采用圖形界面和代碼設(shè)計兩種方式來編，用戶可以采用圖形界面和代碼設(shè)計兩種方式來編制網(wǎng)頁。制網(wǎng)頁。還能創(chuàng)建和組織站點。還能創(chuàng)建和組織站點。 8.2.1 FrontPage的窗口的窗口 任務(wù)任務(wù)窗格窗格編輯控制按鈕編輯控制按鈕網(wǎng)頁編輯區(qū)網(wǎng)頁編輯區(qū) FrontPage提供了提供了網(wǎng)頁、文件夾、報表、導(dǎo)航、超鏈接、任務(wù)網(wǎng)頁、文件夾、報表、導(dǎo)
10、航、超鏈接、任務(wù)等等多種視多種視圖方式圖方式 在在“網(wǎng)頁網(wǎng)頁”視圖方式下，設(shè)有視圖方式下，設(shè)有“設(shè)計設(shè)計”、“代碼代碼”、“預(yù)覽預(yù)覽”和和“拆分拆分”四種選項卡四種選項卡 “設(shè)計設(shè)計” 方式：方式：可以利用菜單中的命令或工具欄上的按鈕來編輯網(wǎng)頁可以利用菜單中的命令或工具欄上的按鈕來編輯網(wǎng)頁 “代碼代碼” 方式：方式：可以直接對網(wǎng)頁的可以直接對網(wǎng)頁的HTML代碼進行編輯操作代碼進行編輯操作 “拆分拆分”方式：方式：窗口分為上下兩部分，上端為窗口分為上下兩部分，上端為“代碼代碼”方式，下端為方式，下端為“設(shè)計設(shè)計”方式方式。 “預(yù)覽預(yù)覽”方式：方式：可以預(yù)覽當(dāng)前的網(wǎng)頁，讓編制者觀看自己當(dāng)前所作的網(wǎng)
11、可以預(yù)覽當(dāng)前的網(wǎng)頁，讓編制者觀看自己當(dāng)前所作的網(wǎng)頁效果頁效果 8.2.2 網(wǎng)頁的制作和測試 1. 新建網(wǎng)頁新建網(wǎng)頁 選擇選擇“文件文件”/“/“新建新建”/ /命令，或單擊命令，或單擊“常用常用”工具欄上的工具欄上的“新建網(wǎng)頁新建網(wǎng)頁”按鈕，按鈕，此時在網(wǎng)頁編輯區(qū)中即可看到新建的空白網(wǎng)頁。此時在網(wǎng)頁編輯區(qū)中即可看到新建的空白網(wǎng)頁。 .HTM .HTM 或或 .HTML.HTML 在網(wǎng)頁上，用戶可以插入文字、圖片、聲音、超鏈接等，也可以添加一些特殊在網(wǎng)頁上，用戶可以插入文字、圖片、聲音、超鏈接等，也可以添加一些特殊效果，如滾動文字、交互式按鈕、計數(shù)器等。效果，如滾動文字、交互式按鈕、計數(shù)器等。
12、2. 網(wǎng)頁的編輯網(wǎng)頁的編輯 （1 1）采用）采用“設(shè)計設(shè)計”編輯方式編制網(wǎng)頁。編輯方式編制網(wǎng)頁。 不需要記憶不需要記憶HTMLHTML代碼，可以像使用代碼，可以像使用WordWord進行文字處理一樣方便地制作網(wǎng)頁。進行文字處理一樣方便地制作網(wǎng)頁。 （2 2）采用）采用“代碼代碼”編輯方式編制網(wǎng)頁。編輯方式編制網(wǎng)頁。 此時必須使用此時必須使用HTMLHTML代碼直接編制網(wǎng)頁，其優(yōu)點是有利于專業(yè)人員制作比較復(fù)雜代碼直接編制網(wǎng)頁，其優(yōu)點是有利于專業(yè)人員制作比較復(fù)雜的的網(wǎng)頁，其缺點是需要記憶的的網(wǎng)頁，其缺點是需要記憶HTMLHTML代碼及編寫規(guī)則。代碼及編寫規(guī)則。編輯HTML文檔 在編輯在編輯HTML
13、文檔的過程中，要注意以下幾點：文檔的過程中，要注意以下幾點： （1）“”、“/”等符號均用等符號均用半角符號半角符號（即英文符號）。（即英文符號）。 （2）標(biāo)記和屬性）標(biāo)記和屬性不區(qū)分大小寫不區(qū)分大小寫，如，如與與或或是沒是沒有區(qū)別的。習(xí)慣上，標(biāo)記用大寫表示，這樣標(biāo)記更容易從文本中分辨出有區(qū)別的。習(xí)慣上，標(biāo)記用大寫表示，這樣標(biāo)記更容易從文本中分辨出來。來。 （3）為了表示標(biāo)記的層次關(guān)系和便于閱讀文檔，文檔中通常采用）為了表示標(biāo)記的層次關(guān)系和便于閱讀文檔，文檔中通常采用標(biāo)記頭尾對齊，內(nèi)部的內(nèi)容標(biāo)記頭尾對齊，內(nèi)部的內(nèi)容向右縮進向右縮進方式。這種縮進結(jié)構(gòu)不會影響標(biāo)記方式。這種縮進結(jié)構(gòu)不會影響標(biāo)記的解
14、釋執(zhí)行。的解釋執(zhí)行。 3. 網(wǎng)頁的布局 制作網(wǎng)頁時，需要有計劃地擺放網(wǎng)頁內(nèi)的各個對象，這就是網(wǎng)頁內(nèi)容的制作網(wǎng)頁時，需要有計劃地擺放網(wǎng)頁內(nèi)的各個對象，這就是網(wǎng)頁內(nèi)容的精確定位（或布局），對網(wǎng)頁進行布局常用兩種方法，一是利用表格，另一種精確定位（或布局），對網(wǎng)頁進行布局常用兩種方法，一是利用表格，另一種是利用框架。是利用框架。 （1 1）表格布局）表格布局 使用表格布局功能時，先選用表格將網(wǎng)頁分成若干個單元格，每個單元使用表格布局功能時，先選用表格將網(wǎng)頁分成若干個單元格，每個單元格對應(yīng)網(wǎng)頁中的一個部分，然后對每一部分分別進行設(shè)計和制作。利用表格實格對應(yīng)網(wǎng)頁中的一個部分，然后對每一部分分別進行設(shè)計和
15、制作。利用表格實現(xiàn)對網(wǎng)頁內(nèi)容擺放位置的管理?，F(xiàn)對網(wǎng)頁內(nèi)容擺放位置的管理。表格線表格線。當(dāng)邊框的當(dāng)邊框的“粗細粗細”為為0 0時時, ,在在瀏覽網(wǎng)頁時看不到邊框。瀏覽網(wǎng)頁時看不到邊框。 （2）框架 把瀏覽器窗口分割成幾個不同的區(qū)域（框架）把瀏覽器窗口分割成幾個不同的區(qū)域（框架） 每個框架可以顯示一個獨立的網(wǎng)頁每個框架可以顯示一個獨立的網(wǎng)頁這是一個框架網(wǎng)頁示例。這是一個框架網(wǎng)頁示例。含有含有4 4個網(wǎng)頁：顯示在個網(wǎng)頁：顯示在3 3個框架中的個框架中的3 3個網(wǎng)頁個網(wǎng)頁和作為容器的和作為容器的總框架網(wǎng)頁總框架網(wǎng)頁。 4. 網(wǎng)頁的保存、打開及關(guān)閉 （1） 保存網(wǎng)頁保存網(wǎng)頁 （2） 打開網(wǎng)頁打開網(wǎng)頁 （
16、3）關(guān)閉網(wǎng)頁）關(guān)閉網(wǎng)頁 5. 測試網(wǎng)頁測試網(wǎng)頁 “預(yù)覽預(yù)覽” 選擇選擇“文件文件”菜單中的菜單中的“在瀏覽器中預(yù)覽在瀏覽器中預(yù)覽” 使用使用IE瀏覽器來打開指定的網(wǎng)頁文檔瀏覽器來打開指定的網(wǎng)頁文檔 8.3 常用的HTML標(biāo)記 8.3.1 8.3.1 文本格式設(shè)置文本格式設(shè)置 （1）文字標(biāo)記）文字標(biāo)記 FONT SIZE #” 文字文字 設(shè)置文字的大小、字體及顏色設(shè)置文字的大小、字體及顏色 示例：示例：FONT SIZE 網(wǎng)頁制作網(wǎng)頁制作 （2）BODY標(biāo)記的標(biāo)記的TEXT屬性、屬性、BGCOLOR等屬性等屬性 BODY TEXT #” 文字文字 設(shè)定整個網(wǎng)頁的文字顏色和背景顏色設(shè)定整個網(wǎng)頁的文
17、字顏色和背景顏色 示例：示例：BODY TEXT red” 網(wǎng)頁制作網(wǎng)頁制作 （3）字符修飾標(biāo)記字符修飾標(biāo)記 有多個字符修飾標(biāo)記，其中有多個字符修飾標(biāo)記，其中、及及分別用于設(shè)分別用于設(shè)置粗體字、斜體字、帶下劃線、下標(biāo)及上標(biāo)。置粗體字、斜體字、帶下劃線、下標(biāo)及上標(biāo)。示例示例1 1： 這是粗體字這是粗體字 示例示例2 2： 這是粗、斜體字這是粗、斜體字 （4）META標(biāo)記標(biāo)記 METAMETA標(biāo)記是一種單邊標(biāo)記，放入標(biāo)記是一種單邊標(biāo)記，放入HEADHEAD部分中，可以說明與部分中，可以說明與WebWeb頁有關(guān)的信息，其頁有關(guān)的信息，其中一個作用是說明字符編碼方面的信息。中一個作用是說明字符編碼方面
18、的信息。 例如，以下例如，以下METAMETA標(biāo)記告知瀏覽器本文檔是標(biāo)記告知瀏覽器本文檔是HTMLHTML文檔，且中文編碼使用的是文檔，且中文編碼使用的是GB2312GB2312。 其中，屬性其中，屬性HTTP-EQUIVHTTP-EQUIV描述特征名，屬性描述特征名，屬性CONTENTCONTENT描述特征值。描述特征值。又如又如 META HTTP-EQUIV=Refresh CONTENT=10 URL=http:/ 表示完成當(dāng)前網(wǎng)頁加載表示完成當(dāng)前網(wǎng)頁加載1010秒后自動加載另一網(wǎng)頁（本例為北大主頁）。秒后自動加載另一網(wǎng)頁（本例為北大主頁）。 （5）特殊字符）特殊字符 特殊字符特殊字符
19、 字符代碼字符代碼 < > > & & & & 空格空格 例如，例如，“< >”< >”顯示為顯示為“”（即兩個尖括號中間留一個空）。（即兩個尖括號中間留一個空）。 8.3.2 8.3.2 段落格式設(shè)置段落格式設(shè)置 （1 1）段落標(biāo)記）段落標(biāo)記：P ALIGN #” 文字塊文字塊 示例：示例：P ALIGN right” 網(wǎng)頁制作網(wǎng)頁制作 P ALIGN center” 網(wǎng)頁制作網(wǎng)頁制作 （2 2）標(biāo)題標(biāo)記：）標(biāo)題標(biāo)記：Hn ALIGN #” 標(biāo)題文字標(biāo)題文字 示例：示例： 網(wǎng)頁制作網(wǎng)頁制作
20、 （3 3）換行標(biāo)記：）換行標(biāo)記： （4 4）居中對齊標(biāo)記：）居中對齊標(biāo)記： 文字居中對齊文字居中對齊 （5 5）原樣顯示標(biāo)記）原樣顯示標(biāo)記 標(biāo)記格式：標(biāo)記格式： 預(yù)先排好的格式預(yù)先排好的格式 在無在無標(biāo)記處理的情況下，標(biāo)記處理的情況下，HTMLHTML會忽略文檔中文本的空白字符和換行會忽略文檔中文本的空白字符和換行符。使用符。使用標(biāo)記后，可以保留文字塊中的間隔、換行和空白，即按照原樣標(biāo)記后，可以保留文字塊中的間隔、換行和空白，即按照原樣顯示文字。顯示文字。 例8-3 編制一個HTML文檔，顯示唐詩靜夜思 靜夜思靜夜思 靜夜思靜夜思 ( (唐詩唐詩) FONT SIZE=4 FACE= COL
21、OR=red 床前明月光，疑是地上霜。床前明月光，疑是地上霜。 FONT SIZE=4 FACE= COLOR=black 舉頭望明月，低頭思故鄉(xiāng)。舉頭望明月，低頭思故鄉(xiāng)。 預(yù)覽該文檔時的顯示結(jié)果預(yù)覽該文檔時的顯示結(jié)果 例例8-3例8-4 顯示預(yù)排格式 PRE PRE標(biāo)記的作用標(biāo)記的作用 試一試試一試 沒有沒有PREPRE的顯示效果的顯示效果 試一試試一試 有有PREPRE的顯示效果的顯示效果 例例8-4 8.3.3 加入水平線、超鏈接和表單 （1 1）注釋標(biāo)記）注釋標(biāo)記 標(biāo)記格式：標(biāo)記格式：!- - 或或 ! HTML HTML的注釋標(biāo)記由開始標(biāo)記符的注釋標(biāo)記由開始標(biāo)記符!-構(gòu)成。這兩個標(biāo)記
22、符之構(gòu)成。這兩個標(biāo)記符之間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。示例間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。示例 注釋標(biāo)記的作用注釋標(biāo)記的作用 這是正文這是正文 !- 添加注釋是增強文檔可讀性的重要手段，它為其他人員閱讀該添加注釋是增強文檔可讀性的重要手段，它為其他人員閱讀該HTMLHTML文檔起文檔起提示和解釋作用，或是為程序的創(chuàng)作人起備忘作用。提示和解釋作用，或是為程序的創(chuàng)作人起備忘作用。注釋內(nèi)容并不在注釋內(nèi)容并不在瀏覽器中顯示瀏覽器中顯示注釋標(biāo)記注釋標(biāo)記 （2 2）插入水平線的標(biāo)記）插入水平線的標(biāo)記 HR ALIGN# NOSHADE 本標(biāo)記可以在本標(biāo)記可
23、以在WebWeb頁面中插入一條水平線頁面中插入一條水平線 （3）圖像的標(biāo)記）圖像的標(biāo)記IMG 標(biāo)記基本格式：標(biāo)記基本格式：IMG src= 本標(biāo)記可以在本標(biāo)記可以在Web頁面中插入一個圖像，頁面中插入一個圖像，src指出圖像的存放位置和文件指出圖像的存放位置和文件名。名。 （4）插入超鏈接的標(biāo)記）插入超鏈接的標(biāo)記 標(biāo)記基本格式：標(biāo)記基本格式： 超鏈接的對象超鏈接的對象 文本鏈接文本鏈接 圖形鏈接圖形鏈接 書簽式超鏈接書簽式超鏈接鏈接到微軟公司鏈接到微軟公司 （5 5）表單標(biāo)記）表單標(biāo)記 利用網(wǎng)頁不但能發(fā)布信息，而且能收集信息。表單（利用網(wǎng)頁不但能發(fā)布信息，而且能收集信息。表單（FORMFORM
24、，也稱窗體），也稱窗體）是網(wǎng)頁中收集信息、與訪問者進行交互的主要元素。是網(wǎng)頁中收集信息、與訪問者進行交互的主要元素。 表單標(biāo)記的基本格式：表單標(biāo)記的基本格式： TYPE TYPE表示控件類型，參數(shù)表示控件類型，參數(shù)# #為為texttext（文本框）、（文本框）、passwordpassword（輸入口令的（輸入口令的文本框）、文本框）、buttonbutton（一般按鈕）、（一般按鈕）、resetreset（“重置重置”按鈕）、按鈕）、submitsubmit（“提提交交”按鈕）等。按鈕）等。通常為通常為URL(URL(網(wǎng)址網(wǎng)址) )Post(Post(發(fā)送表單發(fā)送表單) ) 或或Get(G
25、et(得到表單得到表單) )例8-5 建立一個簡單的表單。 一個簡單的表單一個簡單的表單 在表單中設(shè)置一個文本框和兩個命令按鈕在表單中設(shè)置一個文本框和兩個命令按鈕 請輸入姓名：請輸入姓名： INPUT TYPE=button NAME=button1 VALUE= INPUT TYPE=button NAME=button 例例8-5 1. 1. 腳本的概念腳本的概念 腳本腳本(Script(Script）實際上就是一段程序，用來完成某些特殊的功能）實際上就是一段程序，用來完成某些特殊的功能( (主要主要是讓它完成是
26、讓它完成HTMLHTML不能做的事不能做的事) ) 腳本語言用于編制網(wǎng)頁腳本腳本語言用于編制網(wǎng)頁腳本(Script)(Script)程序，它通過使用變量、表達式、程序，它通過使用變量、表達式、函數(shù)、各種控制語句等，擴展了函數(shù)、各種控制語句等，擴展了HTMLHTML的功能。在的功能。在HTMLHTML文檔中插入腳本程序，文檔中插入腳本程序，可使靜態(tài)的可使靜態(tài)的HTMLHTML網(wǎng)頁成為動態(tài)交互式網(wǎng)頁。通常腳本語言的網(wǎng)頁成為動態(tài)交互式網(wǎng)頁。通常腳本語言的語法規(guī)則比較語法規(guī)則比較簡單簡單，沒有一般編程語言那樣嚴(yán)格和復(fù)雜，因此，沒有一般編程語言那樣嚴(yán)格和復(fù)雜，因此學(xué)習(xí)起來比較容易學(xué)習(xí)起來比較容易。 兩種
27、兩種腳本：腳本：服務(wù)器端腳本和服務(wù)器端腳本和客戶端腳本客戶端腳本 客戶端腳本程序可以直接嵌入到客戶端腳本程序可以直接嵌入到HTMLHTML文檔中，并文檔中，并由客戶瀏覽器解釋由客戶瀏覽器解釋執(zhí)行執(zhí)行( (可減輕服務(wù)器的負荷可減輕服務(wù)器的負荷) ) 常用的腳本語言有常用的腳本語言有VBScripVBScript t和和JavaScriptJavaScript。8.4 網(wǎng)頁腳本語言初步認(rèn)識網(wǎng)頁腳本語言初步認(rèn)識 LANGUAGE=VBScript 網(wǎng)頁腳本程序網(wǎng)頁腳本程序網(wǎng)頁文檔網(wǎng)頁文檔嵌入嵌入一段程序一段程序使用使用HTML標(biāo)記標(biāo)記客戶端腳本的概念 服務(wù)器服務(wù)器WebWeb瀏覽器瀏覽器( (新版本
28、含有腳本解釋器新版本含有腳本解釋器) )網(wǎng)站網(wǎng)站用戶用戶請求請求網(wǎng)頁網(wǎng)頁( (含腳本程序含腳本程序) ) 由瀏覽器解由瀏覽器解釋執(zhí)行釋執(zhí)行 2. 初識VBSCRIPT程序 例8-6 顯示“大家好”、“新年快樂” 例例8-68-6 Document.Write(Document.Write(大家好大家好!)!) 顯示第一句顯示第一句 表示換行表示換行 x = x = 新年快樂新年快樂! xx是一個變量是一個變量 Document.Write(x)Document.Write(x) 顯示第二句顯示第二句 說明：說明：1. 1. 為腳本標(biāo)記，為腳本標(biāo)記，LANGUAGE =LANGUAGE =“VB
29、ScriptVBScript”表示采表示采 用用VBScriptVBScript腳本語言編寫的?？梢郧度塍w部腳本語言編寫的?？梢郧度塍w部( (BodyBody) )或頭部或頭部( (HeadHead) ) 2. 2. ( (或或REM)REM)為為VBScriptVBScript的注釋語句的注釋語句 3. DOCUMENT.WRITE( )3. DOCUMENT.WRITE( )表示輸出表示輸出( (即在屏幕上顯示即在屏幕上顯示) )信息信息例例8-6預(yù)覽結(jié)果預(yù)覽結(jié)果 例例8-7 8-7 h = Hour(Time() h = Hour(Time() 取出系統(tǒng)時間的小時數(shù)取出系統(tǒng)時間的小時數(shù)
30、If h12 Then If h12 Then 判斷時數(shù)是否小于判斷時數(shù)是否小于1212 Document.Write( Document.Write(早上好早上好 ! )! ) Else Else If h18 Then If h18 Then 再判斷時數(shù)是否小于再判斷時數(shù)是否小于1818 Document.Write( Document.Write(下午好下午好 ! )! ) Else Else Document.Write( Document.Write(晚上好晚上好 ! ! ) END IF END IF End If End If 例8-7 根據(jù)不同的時間段在網(wǎng)頁上發(fā)出問候語， 如“早上好”等例例8-7 If 條件條件 Then 語句序列語句序列1Else 語句序列語句序列2End If 功能：判斷條件是否成立，如果成立，則執(zhí)行指定的語句序列功能：判斷條件是否成立，如果成立，則執(zhí)行指定的語句序列1 1，否，否則執(zhí)行語句序列則執(zhí)行語句序列2 2 小時數(shù)小時數(shù) hh12h18顯示顯示“早上好早上好”顯示顯示“下午好下午好”顯示顯示“晚上好晚上好”是否是否程序框圖程序框圖
七年級信息技術(shù) 網(wǎng)頁設(shè)計基礎(chǔ)課件 青島版
