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

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