網(wǎng)頁設(shè)計與開發(fā)PPT課件.ppt

網(wǎng)頁設(shè)計與開發(fā) 呂智強lv0595 1 網(wǎng)頁和網(wǎng)站 網(wǎng)站是有獨立域名 獨立存放空間的內(nèi)容集合 即對外發(fā)布 這些內(nèi)容可能是網(wǎng)頁 也可能是程序或其他文件 不一定要有很多網(wǎng)頁 主要有獨立域名和空間 那怕只有一個頁面也叫網(wǎng)站 網(wǎng)頁是網(wǎng)站的組成部分 有了很多網(wǎng)頁沒有獨立的域名和空間也只能說是網(wǎng)頁 例如一個程序 盡管有很多頁面 功能也齊全 但沒有獨立域名和空間 沒對外發(fā)布 但都不能叫網(wǎng)站 一 概述 2 網(wǎng)頁表現(xiàn)形式 靜態(tài)網(wǎng)頁 通常是以 htm html shtml等為后綴的 它的特點是不會 變 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持 在網(wǎng)站制作和維護方面工作量較大 因此當網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難靜態(tài)網(wǎng)頁的交互性較差 功能簡單 無法實現(xiàn)更多的功能 3 網(wǎng)頁表現(xiàn)形式 動態(tài)網(wǎng)頁 通常是以 php aspx jsp等為后綴的 它的特點是會 變 以數(shù)據(jù)庫技術(shù)為基礎(chǔ) 大大降低網(wǎng)站維護的工作量可以實現(xiàn)更多的功能 如用戶注冊 用戶登錄 在線調(diào)查 用戶管理 訂單管理等等動態(tài)網(wǎng)頁實際上并不是獨立存在于服務(wù)器上的網(wǎng)頁文件 只有當用戶請求時服務(wù)器才返回一個完整的網(wǎng)頁 4 什么是萬維網(wǎng) 萬維網(wǎng)的核心部分由統(tǒng)一資源定位器 URL 超文本傳輸協(xié)議 HTTP 以及超文本標記語言 HTML 三個標準構(gòu)成 1 統(tǒng)一資源定位器統(tǒng)一資源定位器 又叫URL UniformResourceLocator 是專為標識Internet網(wǎng)上資源位置而設(shè)的一種編址方式 通常所說的網(wǎng)頁地址指的即是URL 2 超文本傳輸協(xié)議HTTP是超文本轉(zhuǎn)移協(xié)議 是客戶端瀏覽器或其他程序與Web服務(wù)器之間的應(yīng)用層通信協(xié)議 在Internet上的Web服務(wù)器上存放的都是超文本信息 客戶機需要通過HTTP協(xié)議傳輸所要訪問的超文本信息 3 超文本標記語言HTML HyperTextMarkupLanguage 超文本標記語言是一種嵌入式語言 通過定義標記標簽使瀏覽器解析頁面并進行顯示 5 工作原理 當進入萬維網(wǎng)上一個網(wǎng)頁 或者其他網(wǎng)絡(luò)資源的時候 通常你要首先在瀏覽器上鍵入想訪問網(wǎng)頁的統(tǒng)一資源定位器 URL 或者通過超鏈接方式鏈接到那個網(wǎng)頁或網(wǎng)絡(luò)資源 這之后的工作首先是URL的服務(wù)器名部分 被名為域名系統(tǒng)的分布于全球的因特網(wǎng)數(shù)據(jù)庫解析 并根據(jù)解析結(jié)果決定進入哪一個IP地址 接下來的步驟是為所要訪問的網(wǎng)頁 向在那個IP地址工作的服務(wù)器發(fā)送一個HTTP請求 在通常情況下 HTML文本 圖片和構(gòu)成該網(wǎng)頁的一切其他文件很快會被逐一請求并發(fā)送回用戶 網(wǎng)絡(luò)瀏覽器接下來的工作是把HTML CSS和其他接受到的文件所描述的內(nèi)容 加上圖像 鏈接和其他必須的資源 顯示給用戶 這些就構(gòu)成了瀏覽器中所看到的 網(wǎng)頁 6 開發(fā)工具的選擇 HTML的編輯工具是比較多的 讀者既可以選擇最常用的基于文本的HTML編輯器 Windows自帶的記事本 也可以選擇一套功能強大 可取代記事本編輯器的EditPlus 還可以選擇所見即所得的Dreamweaver等 7 網(wǎng)頁制作的相關(guān)技術(shù) 1 HTMLHTML HyperTextMarkupLanguage 超文本標記語言是一種嵌入式語言 和一般文本的不同的是 一個HTML文件不僅包含文本內(nèi)容 還包含一些Tag 中文稱 標記 通過定義標記標簽使瀏覽器解析頁面并進行顯示 一個HTML文件的后綴名是htm或者是html 2 CSSCSS意思就是疊層樣式表 CascadingStyleSheets 使用CSS的優(yōu)點在于將格式從功能中分離出來 它定義了HTML元素的顯示 是一種對web文檔添加樣式的簡單機制 在主頁制作時采用CSS技術(shù) 可以有效地對頁面的布局 字體 顏色 背景和其它效果實現(xiàn)更加精確的控制 只要對相應(yīng)的代碼做一些簡單的修改 就可以改變同一頁面的不同部分 或者頁數(shù)不同的網(wǎng)頁的外觀和格式 8 網(wǎng)頁制作的相關(guān)技術(shù) 3 JavaScriptJavaScript是由Netscape公司開發(fā)的一種腳本語言 scriptlanguage 稱為描述性語言 具有面向?qū)ο蟮哪芰?可以非常自由地嵌入到HTML XHTML文件中 從而更便捷地開發(fā)出可交互的Web網(wǎng)頁 JavaScript是目前最為流行的客戶端腳本語言 大大地增強了網(wǎng)頁的交互性 JavaScript語法構(gòu)成與C C Java類似 都包括if語句 while循環(huán) 分支選擇以及運算等結(jié)構(gòu) 但也僅是在語法上的相似 9 網(wǎng)頁元素單位 相對長度單位px 像素是相對于顯示器屏幕分辨率而言em 相對于當前對象內(nèi)文本的字體尺寸絕對長度單位cm 厘米mm 毫米in 英寸 10 HTML文檔結(jié)構(gòu) HTML HyperTextMarkupLanguage 超文本標記語言是一種嵌入式語言 通過定義標記標簽使瀏覽器解析頁面并進行顯示 一個HTML4 01的文檔結(jié)構(gòu)包括以下幾部分 DOCTYPE聲明定義文檔類型 HTML頭元素信息 HTML正文信息 body標簽內(nèi)信息 二 初識HTML 11 聲明定義文檔類型 在HTML4 01中提供了三種DTD文檔 嚴格型HTML4 01DTD文檔不包括那些不被推薦的元素和屬性 并且不能在帶有frameset的頁面中出現(xiàn) 過渡型HTML4 01DTD文檔包含所有嚴密型DTD文檔中所允許的內(nèi)容 還可以使用那些不被推薦的元素以及屬性 框架型HTML4 01DTD文檔包含過渡型以及框架 12 HTML頭元素信息 HTML文檔的head元素中包含了meta元素 meta元素用來指定有關(guān)這個文檔的相關(guān)信息 例如 用http equiv content charset描述頁面的內(nèi)容 meta元素的屬性有兩種 http equiv和name 13 什么是標簽大多數(shù)HTML文檔的標簽都是由開始標簽和結(jié)束標簽進行界定 開始標簽和結(jié)束標簽成對出現(xiàn) 結(jié)束標簽是以斜線開頭 例如 中為結(jié)束標簽 每一個標簽都是由尖括號 包圍 有單向標簽和雙向標簽單向標簽 br hr img等 三 標簽 14 標簽的屬性 標簽可以擁有屬性 屬性可以為頁面中的HTML元素提供附加信息 屬性被放置在標簽的后面 但在最終括號 的前面 即屬性應(yīng)該添加在HTML元素里的起始標簽中 例如 15 標簽的嵌套 HTML標簽經(jīng)常使用嵌套的方式 所謂的嵌套是指一個HTML標簽包含另外一個標簽的情況 例如 標題顯示的內(nèi)容 16 HTML基本標簽 HTML基本標簽包括 標題標簽h1 段落標簽p 換行標簽br 水平分割標簽hr 部分標簽div 注釋標簽 字體標簽font 部分標簽最早在HTML3 2標準中定義 可以將文檔分割成獨立的 不同的部分 在標簽中定義的文本內(nèi)容 實際上與沒有在標簽中定義的沒有什么區(qū)別 但要是引入了align屬性 標簽就變的十分有用了 用來設(shè)置段落或標題的對齊方式 和其他編程語言一樣 HTML也提供了代碼注釋的方式 作為一個程序員應(yīng)該養(yǎng)成對代碼注釋的習慣 這樣可以保持清晰的思路 瀏覽器不顯示注釋的部分 17 文字格式化 常見的文字格式化標簽如下表 18 字體設(shè)置 在HTML中 字體標簽 font 通過其屬性來設(shè)置文本字體 字體大小和字體顏色 字體標簽的屬性如下表 color color color color 19 無序列表 所謂無序列表就是列表中列表項的前導符號沒有一定的次序 而是用黑點 圓圈 方框等一些特殊符號標識 無序列表并不是使列表項雜亂無章 而是使列表項的結(jié)構(gòu)更清晰 更合理 當創(chuàng)建一個無序列表時 主要使用用HTML的標簽和標簽來標記 其中標簽標識一個無序列表的開始 標簽標識一個無序列表項 基本語法結(jié)構(gòu)為 項目名稱項目名稱項目名稱項目名稱 四 列表 20 有序列表 有序列表與前面介紹的無序列表正好相反 所謂有序列表就是列表項的前導符號是有序的符號標識的列表 有序的符號標識包括 阿拉伯數(shù)字 小寫英文字母 大寫英文字母 小寫羅馬數(shù)字 大寫羅馬數(shù)字 基本語法結(jié)構(gòu)為 項目名稱項目名稱項目名稱標簽的type屬性用來定義一個有序列表的前導字符 如果省略了type屬性 瀏覽器會默認顯示為 1 前導字符 type取值為1 阿拉伯數(shù)字 a 小寫英文字母 A 大寫英文字母 i 小寫羅馬數(shù)字 I 大寫羅馬數(shù)字 21 圖片的使用 HTML和XHTML的一個重要特性就是可以在文本中加入圖片 既可以把圖片作為文檔的內(nèi)在對象加入 又可以通過超級鏈接的方式加入 同時還可以將圖片作為背景加入到文檔中 在文檔中合理地使用圖片會使瀏覽器顯示的網(wǎng)頁更活潑 引人入勝 五 圖片 22 在頁面中插入圖片 在HTML中 用標簽在網(wǎng)頁中添加圖片 圖片是以嵌入的方式添加到網(wǎng)頁中的 網(wǎng)頁開發(fā)者可以通過多種方式獲取網(wǎng)頁設(shè)計中用到的圖片 可以將現(xiàn)有的圖片掃描到計算機內(nèi) 從Internet上的Web站點獲取以及通過制圖軟件自己動手制作 如果是 引用 的圖片 一定要得到圖片版權(quán)擁有者的同意才可使用 在頁面中插入圖片的語法 23 替換文本說明 有時 由于網(wǎng)絡(luò)過忙或者用戶在圖片還沒有下載完全就點擊了瀏覽器的停止鍵 用戶不能在瀏覽器中看到圖片 這時替換文本說明就十分有必要了 替換文本說明應(yīng)該簡潔而清晰 能為用戶提供足夠的圖片說明信息 在無法看到圖片的情況下也可以了解圖片的內(nèi)容信息 例如 24 調(diào)整圖片大小 在HTML中 通過img標簽的屬性width和height來調(diào)整圖片大小 其目的是通過指定圖片的高度和寬度加快圖片的下載速度 如果不設(shè)置width和height屬性 瀏覽器就要等到圖片下載完畢才顯示網(wǎng)頁 因此延緩了其它頁面元素的顯示 例如 25 設(shè)置背景圖片 背景屬性將背景設(shè)置為圖片 屬性值為圖片的URL 如果圖片尺寸小于瀏覽器窗口 那么圖像將在整個瀏覽器窗口進行復制 例如 26 添加背景顏色 使用body標簽的bgcolor屬性可以給HTML頁面指明背景顏色 其值可以是16進制數(shù) RGB值或者是顏色的名稱 例如 27 HTML使用標簽來建立一個鏈接 通常標簽又稱為錨 一個超級鏈接可以指向任意一個Web上的資源 一個HTML頁面 一張圖片 一段聲音文件 一部電影等 創(chuàng)建超級鏈接的基本語法格式 這是要鏈接的站點 文字 圖片 在和標簽之間的文本文字 用戶可以單擊該文字來實現(xiàn)網(wǎng)頁的瀏覽訪問 六 超級鏈接 28 同一頁面內(nèi)的書簽鏈接 當網(wǎng)頁的頁面較長 且該頁面是由幾個部分組成時 不得不拖動瀏覽器的滑動條查看信息 這樣既麻煩又費時 HTML恰好提供了跳轉(zhuǎn)功能 能夠非常方便 快捷地實現(xiàn)從網(wǎng)頁當前的部分跳轉(zhuǎn)到同一網(wǎng)頁的另一部分 建立書簽語法 鏈接內(nèi)容創(chuàng)建書簽鏈接語法 鏈接標題 29 不同頁面間的書簽鏈接 書簽鏈接還可以在不同頁面間進行鏈接 當單擊書簽鏈接標題 頁面會根據(jù)鏈接中的href屬性所以定的地址 將網(wǎng)頁跳轉(zhuǎn)到目標地址中書簽名稱所表示的內(nèi)容 建立書簽語法 鏈接內(nèi)容創(chuàng)建書簽鏈接語法 鏈接標題 30 超級鏈接路徑 超級鏈接標簽的屬性 href 定義了當前鏈接所指的目標地址 也就是超級鏈接路徑 在HTML中 主要提供了2種路徑 絕對路徑和相對路徑 31 絕對路徑 絕對路徑就是主頁上的文件或目錄在硬盤上真正的路徑 URL和物理路徑 例如 C xyz index html代表了index html文件的物理絕對路徑 32 相對路徑 相對路徑就是相對與某個基準目錄的路徑 相對路徑適合于創(chuàng)建網(wǎng)站內(nèi)部鏈接 它是以當前文件所在的路徑為起點 進行相對文件的查找 1 同一級目錄的文件鏈接假設(shè)1 html路徑是 c Inetpub wwwroot sites admin 1 html假設(shè)2 html路徑是 c Inetpub wwwroot sites admin 2 html1 html文件和2 html文件在同一個文件夾 1 html文件鏈接到2 html文件 可以在1 html中寫成 同級目錄文件鏈接2 上級目錄的文件鏈接假設(shè)1 html路徑是 c Inetpub wwwroot sites 1 html假設(shè)2 html路徑是 c Inetpub wwwroot sites admin 2 html1 html文件是2 html文件的上一級目錄的文件 2 html文件鏈接到1 html文件 可以在2 html中寫成 1 html 33 相對路徑 假設(shè)1 html路徑是 c Inetpub wwwroot 1 html假設(shè)2 html路徑是 c Inetpub wwwroot sites admin 2 html1 html文件是2 html文件的上兩級目錄中的文件 2 html文件鏈接到1 html文件 可以在2 html中寫成 1 html假設(shè)1 html路徑是 c Inetpub wwwroot sites admin 1 html假設(shè)2 html路徑是 c Inetpub wwwroot sites reg 2 html1 html文件和2 html分別在c Inetpub wwwroot sites 目錄下的admin和reg兩個文件夾內(nèi) 1 html文件鏈接到2 html文件 可以在1 html中寫成 2 html 34 相對路徑 3 下級目錄的文件鏈接假設(shè)1 html路徑是 c Inetpub wwwroot sites 1 html假設(shè)2 html路徑是 c Inetpub wwwroot sites admin 2 html2 html文件是1 html文件的下一級目錄的文件 1 html文件鏈接到2 html文件 可以在1 html中寫成 2 html假設(shè)1 html路徑是 c Inetpub wwwroot sites 1 html假設(shè)2 html路徑是 c Inetpub wwwroot sites admin user 2 html2 html文件是1 html文件的下兩級目錄的文件 1 html文件鏈接到2 html文件 可以在1 html中寫成 2 html 35 七 表格 主要內(nèi)容 表格的構(gòu)成設(shè)置表格背景設(shè)置表格表頭設(shè)置表格大小設(shè)置表格數(shù)據(jù)對齊方式cellspancing與cellpadding屬性橫跨行和列添加表格高級標簽使用表格進行網(wǎng)頁布局 36 7 1表格簡介 表格在網(wǎng)站開發(fā)中應(yīng)用廣泛 幾乎多有的HTML頁面或多或少地采用了表格 表格可以靈活地控制頁面的排版 使整個頁面層次清晰 學好網(wǎng)頁制作 熟練掌握表格的各種屬性是很有必要的 37 表格標記 基本標簽 table定義一個表格 tr定義表格中的行 td定義表格中的數(shù)據(jù)基本語法 38 表格邊框 可以使用table標簽的border屬性為表格添加邊框并設(shè)置表格邊框?qū)挾?表格的邊框按照數(shù)據(jù)單元將表格分割成單元格 邊框的寬度以像素為單位 可以通過bordercolor屬性為邊框添加顏色 其顏色值可以是rgb x x x 16進制顏色值或代表顏色值的顏色名稱 39 表格表頭 表頭是指表格的第一行或第一列對該列或該行的表格內(nèi)容進行說明 表頭的文字樣式為居中 加粗顯示 通過標簽實現(xiàn) 基本語法 40 7 2表格背景 表格可以添加背景顏色和背景圖片 使用表格背景顏色或背景圖片必須使表格中的文本數(shù)據(jù)顏色與表格的背景顏色或背景圖片形成足夠的反差 否則 將不容易分辯表格中的文本數(shù)據(jù) 41 設(shè)置表格背景 可以使用bgcolor屬性設(shè)置表格的背景顏色 其值可以是rgb x x x xxxxxx或顏色名 colorname 例如 或 42 2020 2 6 43 設(shè)置表格單元背景 可以通過bgcolor屬性和background屬性為表格中的單元格添加背景顏色或背景圖片 44 7 3表格大小 設(shè)置表格大小 如果需要表格在網(wǎng)頁中占用適當?shù)目臻g 可以通過width和height屬性指定像素值來設(shè)置表格的寬度和高度 也可以通過表格寬度占瀏覽器窗口的百分比來設(shè)置表格的大小 方法如下 設(shè)置單元格大小 width屬性和height屬性不但可以設(shè)置表格的大小 還可以設(shè)置表格單元格的大小 為表格單元設(shè)置width屬性或height 將影響整行或整列單元的大小 例如 汽車名稱價格范圍級別 45 7 4對齊方式 表格的對齊方式包括 行數(shù)據(jù)水平對齊單元格數(shù)據(jù)水平對齊行數(shù)據(jù)垂直對齊單元格數(shù)據(jù)垂直對齊align屬性和valign屬性混合使用 46 設(shè)置表格對齊方式 使用align屬性設(shè)置表格在網(wǎng)頁中的對齊方式 在默認的情況下表格的對齊方式為左對齊 設(shè)置方法為 這里align的值為left center right 將表格的對齊方式設(shè)置成右對齊 則表格的右邊框自動地向瀏覽器右邊框?qū)R 47 設(shè)置表格數(shù)據(jù)對齊方式 1 行數(shù)據(jù)水平對齊使用align可以設(shè)置表格中數(shù)據(jù)的水平對齊方式 如果在標簽中使用align屬性 將影響整行數(shù)據(jù)單元的水平對齊方式 align屬性的值可以是left center right 它的默認值為left 2 單元格數(shù)據(jù)水平對齊如果在某個標簽中使用align屬性 那么align屬性將影響一個表格單元數(shù)據(jù)水平對齊方式 3 行數(shù)據(jù)垂直對齊如果在標簽中使用valign屬性 那么valign屬性將影響整行數(shù)據(jù)單元的垂直對齊方式 這里的valign值可以是top middle bottom baseline 它的默認值是middle 48 設(shè)置表格數(shù)據(jù)對齊方式 4 單元格數(shù)據(jù)垂直對齊如果在某個標簽中使用valign屬性 那么valign只影響當前表格單元數(shù)據(jù)垂直對齊方式 5 align屬性和valign屬性混合使用align屬性和valign屬性除了上述用法外 有時在格式化表格單元數(shù)據(jù)時需要align屬性和valign屬性混合使用 49 7 5表格單元格的邊距 改變表格單元格間距離和單元格內(nèi)的數(shù)據(jù)填充距離可以通過table標簽的cellspancing與cellpadding屬性實現(xiàn) cellspancing屬性用來添加表格單元格之間的間距 以像素為單位或表格寬度百分比 cellpadding屬性用來添加表格單元格內(nèi)數(shù)據(jù)填充間距 以像素為單位或表格寬度百分比 50 7 6橫跨行和列 橫跨列是指一個表格單元格橫跨多列 橫跨行是指一個表格單元格橫跨多個行 表格橫跨行和列屬性 有時橫跨行和列又稱為合并單元格 表格橫跨行和列屬性 colspan 指明該單元格應(yīng)有多少列的跨度 在th和td標簽中使用 rowspan 指明該單元格應(yīng)有多少行的跨度 在th和td標簽中使用 51 7 7表格的高級標簽 使用表格的高級標簽可以為表格中相似的區(qū)域添加邊界 在表格標題上添加行或文本格式信息 定義表格的腳標等 表格的高級標簽如下 thead定義表格的標題區(qū)域 tbody定義表格的主題區(qū)域 tfoot定義表格的腳標區(qū)域 colgroup定義表格的列組 col為表格中的一個或多個列定義屬性值 只能在表格或colgroup里使用這個元素 52 7 8使用表格進行網(wǎng)頁布局 使用個非HTML時一常普遍的應(yīng)用就是用HTML表格功能給網(wǎng)頁進行布局 下圖就是利用HTML表格對網(wǎng)頁進行布局的效果 此布局定義了兩個表格 上下各一個表格 將這兩個表格的border值設(shè)置為0 如果將border值設(shè)置為1 則很容易看出此頁面的表格布局 53 八 表單 主要內(nèi)容 創(chuàng)建單行文本框創(chuàng)建口令文本框創(chuàng)建提交與復位按鈕創(chuàng)建單選按鈕與復選按鈕創(chuàng)建多行文本框創(chuàng)建下拉框上傳文件處理表單定義域集合使用Tab鍵與快捷鍵 54 8 1單行文本框 一個表單是一塊可以含有表單元素的區(qū)域 可以使用標簽在網(wǎng)頁中創(chuàng)建表單 例如 55 8 2口令文本框 在進行網(wǎng)上注冊的時候 用戶使用的是提交用戶名和口令的表單 口令文本框隱藏了當前要填寫的內(nèi)容 使信息更加保密 例如 56 8 3提交與復位按鈕 使用提交按鈕 submit 可以將填寫在文本框中的內(nèi)容發(fā)送到服務(wù)器 復位按鈕 Reset 使表單文本框的內(nèi)容返回初始值 例如 57 8 4單選按鈕與復選框按鈕 單選按鈕允許用戶從選擇列表中選擇一個單項的輸入字段類型 當type radio 是表示該輸入是一個單選按鈕 復選按鈕允許用戶從選擇列表中選擇一個或多個選項的輸入字段類型 當type checkbox 是表示該輸入是一個復選按鈕 58 8 5多行文本框 多行文本框是在表單中應(yīng)用比較廣泛的文本輸入?yún)^(qū)域 多行文本框主要用于得到用戶的評論和一些反饋信息 用戶可以在里面書寫文字 字數(shù)沒有限制 默認的字體是固定的 可以通過標簽創(chuàng)建多行文本 textarea標簽的屬性 Cols指定文本區(qū)域的列數(shù) Row指定文本區(qū)域的行數(shù) Disabled第一次加載的時候文字區(qū)域不可用 Readonly將文本區(qū)域的內(nèi)容設(shè)置為不可修改 可選屬性 Name 指定文本區(qū)域的名稱 可選屬性 59 8 6下拉框 如果一個列表選項過長 可以考慮使用下拉框 下拉框可以使用戶選擇其中的一個選項 在選擇列表中僅有一個是可選項 單擊右邊下拉按鈕便可進行選項的選擇 下拉框通過select標簽 option標簽來定義 其屬性如下表 60 8 7處理表單 通常情況下 用戶通過submit按鈕來提交表單 收集的信息發(fā)送到Web服務(wù)器上 這一過程通過HTML文檔中action屬性指定所收集的信息發(fā)送到哪里 如何處理信息 可以通過form標簽的特殊屬性實現(xiàn) 處理表單的通用語法模式 61 8 8定義域集合 在設(shè)計網(wǎng)頁時 如果表單中包含多個控件 可以通過標簽將相關(guān)主題的控件或標簽組合在一起 定義域集合 這樣使網(wǎng)頁中的表單分布更合理 結(jié)構(gòu)更清晰 從而增加了網(wǎng)頁的易讀性 同時也有利于tab鍵在元素之間的移動 在定義表單的域集合時 往往要用標簽為fieldset設(shè)置標題 還可以使用align屬性設(shè)置標題的對齊方式 用戶信息姓名 年齡 性別 籍貫 62 8 9使用Tab鍵與快捷鍵 1 使用Tab鍵瀏覽者可以通過使用Tab鍵在表單的各個組件之間移動 默認情況下 Tab鍵的移動順序為順序移動 可以通過tabindex屬性來實現(xiàn) 例如 姓名 年齡 性別 籍貫 2 快捷鍵可以通過accesskey屬性給HTML中的元素指定一個快捷方式 指定方法如下 63 九 多媒體 主要內(nèi)容 會滾動的文字音樂創(chuàng)建視頻 64 9 1會滾動的文字 滾動文字可以增加文字的動態(tài)效果 引起瀏覽者的注意 豐富頁面的內(nèi)容 65 創(chuàng)建滾動文字標簽 使文字在網(wǎng)頁中動態(tài)地滾動好像只是flash的專利 其實則不然 可以通過HTML的同樣能夠達到文字在網(wǎng)頁中移動的效果 但是只適用于InternetExplorer 并不是標準標簽 這里并不推薦使用這個擴展標簽 例如 這是會滾動的文字 66 設(shè)置滾動文字的屬性 滾動文字的屬性用來控制文字的移動方向 滾動方式 文字滾動速度以及移動文字的外觀等多個屬性 常見的屬性有direction scrollamount align bgcolor等 1 設(shè)置文字滾動的方向可以通過direction屬性來設(shè)置文字滾動的方向 該屬性有l(wèi)eft right屬性值 left為默認屬性值 在不設(shè)置direction屬性時文字的滾動順序為從右向左移動 2 設(shè)置滾動文字速度與屬性用來控制滾動文字的速度 scrollamount屬性用來設(shè)置滾動過程中文字每次移動的像素數(shù) 當scrollamount取值較小時 文字滾動的較慢 反之文字滾動較快 scrolldelay屬性用來設(shè)置文字移動的延遲 以毫秒為單位 值越小 文字滾動的越快 文字滾動速度與計算機的處理能力有關(guān) 67 設(shè)置滾動文字的屬性 3 設(shè)置滾動文字字幕區(qū)域使用height和width屬性設(shè)置滾動文字字幕區(qū)域大小 在默認情況下 滾動文字字幕區(qū)域為整個IE瀏覽器屏幕 這兩個屬性值可以取絕對的像素數(shù) 也可以取相對的百分比 68 9 2背景音樂 為網(wǎng)頁添加背景音樂的方法一般有三種 第一種是通過普通的標簽來添加 一種是通過標簽來添加 還有一種直接建立聲音的鏈接 69 嵌入背景音樂 1 標簽InternetExplorer自帶了一個內(nèi)置音頻解碼器 支持特殊的標簽 該標簽可以把聲音文件集成到文檔中 在后臺作為背景音樂播放 基本語法 2 標簽embed可以用來插入各種多媒體 格式可以是Midi Wav AIFF AU MP3等等 基本語法 3 建立聲音的鏈接在設(shè)計網(wǎng)頁的時候可以創(chuàng)建一個背景音樂的鏈接 單擊網(wǎng)頁上的鏈接后 就會播出背景音樂 當建立聲音鏈接時 提倡使用萬維網(wǎng)上的音頻格式 建立聲音的鏈接方法如下 點擊播放音樂 春風 70 9 3創(chuàng)建視頻 在網(wǎng)頁中創(chuàng)建視頻與創(chuàng)建音頻的方法基本相同 可以通過創(chuàng)建一個視頻的鏈接實現(xiàn)視頻在網(wǎng)頁中的加載 當瀏覽者選中視頻連接時 瀏覽器將播放該視頻 如果瀏覽器不能播放該視頻格式 則會自動打開本地計算機上已安裝支持該格式的視頻播放器軟件 如果本地計算機上沒有安裝所需的視頻播放軟件 則瀏覽器會提示瀏覽者是否要保存該視頻文件到本地的計算機上 71 創(chuàng)建內(nèi)部視頻 1 使用標簽創(chuàng)建視頻所謂內(nèi)部視頻就是視頻文件可以直接在網(wǎng)頁中播放 可以通過標簽創(chuàng)建內(nèi)部視頻 創(chuàng)建方法如下 2 使用標簽創(chuàng)建視頻一些網(wǎng)頁設(shè)計者利用標簽的dynsrc屬性在網(wǎng)頁內(nèi)部添加視頻文件 dynsrc屬性用來指定視頻文件所在位置 例如 72 11CSS語法基礎(chǔ) CSS意思就是疊層樣式表 CascadingStyleSheets 使用CSS的優(yōu)點在于將格式從功能中分離出來 它定義了HTML元素的顯示 是一種對web文檔添加樣式的簡單機制 主要內(nèi)容 CSS定義CSS語法CSS類型偽類與為元素 73 11 1理解CSS 1 基本語法CSS規(guī)則由選擇器 selector 屬性 property 和值 value 三部分組成 基本格式如下 selector property value 2 組合為了提高效率 可以將相同屬性和值賦給多個選擇器 并用逗號將選擇器分開 例如 h1 h2 h3 h4 h5 h6 color blue 74 11 1理解CSS 3 選擇器類選擇器類可以將同一類型的HTML元素定義出不同的樣式 例如 p right text align right p center text align center 居右顯示 居中顯示 4 ID選擇器可以使用id選擇器來定義HTML標簽的樣式 id選擇器可用 來定義 例如 p idone text align center color blue 或 idone text align center color blue 75 11 1理解CSS 5 關(guān)聯(lián)選擇器可以為嵌入的其它標簽定義樣