WebDB HTML頁(yè)面設(shè)計(jì)(1)

1、1Web 頁(yè) 面 設(shè) 計(jì)l1 HTMLl2 樣式表設(shè)計(jì)樣式表設(shè)計(jì)2345678910111213利用工具創(chuàng)建利用工具創(chuàng)建HTML頁(yè)面頁(yè)面14利用工具創(chuàng)建利用工具創(chuàng)建HTML頁(yè)面頁(yè)面1516HTML（超文本標(biāo)記語(yǔ)言）（超文本標(biāo)記語(yǔ)言）ll頭 部 信 息l文 檔 主 體， 正 文 部 分l171.1 HTML基本標(biāo)記頭部標(biāo)記頭部標(biāo)記 ， HTML文件頭部的起始和結(jié)束標(biāo)記。，HTML文件的標(biāo)題，是顯示于瀏覽器標(biāo)題欄的字符串。，CSS樣式定義 該標(biāo)記用于描述文檔的 屬性 體部標(biāo)記體部標(biāo)記 ，標(biāo)記標(biāo)記 18/* 鏈接顏色 */a:link color: #1f3a87; text-decoration:

2、none;a:visited color: #83006f;text-decoration:none;a:hover color: #bc2931; text-decoration:underline;a:active color: #bc2931;/* 字體大小*/.f12px font-size:12px;.f14px font-size:14px;191、告訴瀏覽器網(wǎng)頁(yè)所識(shí)別的文件類(lèi)型及語(yǔ)言類(lèi)型 202、讓一些搜索引擎搜索到你的網(wǎng)頁(yè) 21l3、讓網(wǎng)頁(yè)每隔一段時(shí)間刷新一次，若要10秒刷新一次，代碼這樣寫(xiě)： 224、標(biāo)注作者：235、控制頁(yè)面緩沖，如不要頁(yè)面緩沖的代碼這樣寫(xiě)： 24251.1

3、 HTML基本標(biāo)記頭部標(biāo)記頭部標(biāo)記 ， HTML文件頭部的起始和結(jié)束標(biāo)記。，HTML文件的標(biāo)題，是顯示于瀏覽器標(biāo)題欄的字符串。，CSS樣式定義 該標(biāo)記位于與標(biāo)記之間，用于描述文檔的 屬性 體部標(biāo)記體部標(biāo)記 ，標(biāo)記標(biāo)記 26表1 標(biāo)記屬性表27文字顯示和段落控制標(biāo)記 表2 常用的文字顯示和段落控制標(biāo)記表28【例【例4-1】 圖圖4-1是一個(gè)具有不同的文字顯示格式和段落控制格式的是一個(gè)具有不同的文字顯示格式和段落控制格式的HTML文件的顯文件的顯示效果，相應(yīng)的示效果，相應(yīng)的HTML文件中包含了文字顯示和段落控制標(biāo)記文件中包含了文字顯示和段落控制標(biāo)記。 圖4-1 文字顯示和段落控制示例查看源代碼29

4、轉(zhuǎn)義字符轉(zhuǎn)義字符l > >l“ "l空格  la. 轉(zhuǎn)義序列各字符間不能有空格；b. 轉(zhuǎn)義序列必須以；結(jié)束；c. 單獨(dú)的&不被認(rèn)為是轉(zhuǎn)義開(kāi)始。d.區(qū)分大小寫(xiě) 30313233343536圖像標(biāo)記 u標(biāo)記的屬性包括以下標(biāo)記的屬性包括以下5種種：src指定圖像文件的地址。該屬性值必須指明，值的形式可以是本地文件名，指定圖像文件的地址。該屬性值必須指明，值的形式可以是本地文件名，也可以是也可以是URL形式。形式。border指定圖像邊框粗細(xì)，值為整數(shù)。若為指定圖像邊框粗細(xì)，值為整數(shù)。若為0，表示無(wú)邊框，值越大，邊框越，表示無(wú)邊框，值越大，邊框越 粗。粗。width指

5、定圖像寬度，值為整數(shù)，單位為屏幕像素點(diǎn)。若不指定該屬性值，則瀏指定圖像寬度，值為整數(shù)，單位為屏幕像素點(diǎn)。若不指定該屬性值，則瀏覽器根據(jù)圖像的實(shí)際尺寸顯示。覽器根據(jù)圖像的實(shí)際尺寸顯示。height指定圖像高度，值為整數(shù)，單位為屏幕像素點(diǎn)。若不指定該屬性值，則瀏指定圖像高度，值為整數(shù)，單位為屏幕像素點(diǎn)。若不指定該屬性值，則瀏覽器根據(jù)圖像的實(shí)際尺寸顯示。覽器根據(jù)圖像的實(shí)際尺寸顯示。alt指定圖像的提示標(biāo)簽。若設(shè)置了該屬性值，則當(dāng)鼠標(biāo)移至該圖像區(qū)域時(shí)，指定圖像的提示標(biāo)簽。若設(shè)置了該屬性值，則當(dāng)鼠標(biāo)移至該圖像區(qū)域時(shí)，將以一個(gè)小標(biāo)簽顯示該屬性的值將以一個(gè)小標(biāo)簽顯示該屬性的值。 常用圖像格式：gif、jpe

6、g、png37超鏈接標(biāo)記 u超鏈接標(biāo)記的格式如下超鏈接標(biāo)記的格式如下：超鏈接文本或圖像超鏈接文本或圖像 u超鏈接標(biāo)記除了有必備的超鏈接標(biāo)記除了有必備的href屬性外，還有一個(gè)屬性屬性外，還有一個(gè)屬性target，它指明目標(biāo)頁(yè)面顯示的窗口它指明目標(biāo)頁(yè)面顯示的窗口target=_blank 表示目標(biāo)頁(yè)面顯示于一個(gè)新的瀏覽器窗口中target=_top 表示目標(biāo)頁(yè)面顯示于整個(gè)瀏覽器窗口中，而不是顯示在 幀所在窗口中，通常在幀中的超鏈接才需要設(shè)置該值target=幀名 目標(biāo)頁(yè)面顯示于指定幀所在的窗口中target的默認(rèn)值是本頁(yè)面所在的瀏覽器窗口 Target=_self Target=_search

7、Target=_parent38根據(jù)目標(biāo)頁(yè)面位置的不同，href屬性的URL信息的構(gòu)成分為以下3種情況：目標(biāo)頁(yè)面位于另外的主機(jī)或采用非目標(biāo)頁(yè)面位于另外的主機(jī)或采用非http協(xié)議，此時(shí)采用絕對(duì)協(xié)議，此時(shí)采用絕對(duì)URL格式，即使用格式，即使用如下格式：如下格式：協(xié)議名協(xié)議名:/主機(jī)名主機(jī)名/目錄信息目錄信息 若目標(biāo)頁(yè)面位于本主機(jī)，可采用相對(duì)若目標(biāo)頁(yè)面位于本主機(jī)，可采用相對(duì)URL格式：格式： 超鏈接文本超鏈接文本或或超鏈接文本超鏈接文本39比較：比較：超鏈接文本超鏈接文本超鏈接文本超鏈接文本4041通常超鏈接總是指向目標(biāo)通常超鏈接總是指向目標(biāo)HTML文件的頭文件的頭部，但超鏈接的目標(biāo)也可以是某個(gè)文件

8、部，但超鏈接的目標(biāo)也可以是某個(gè)文件的特定位置（稱(chēng)為的特定位置（稱(chēng)為“錨點(diǎn)錨點(diǎn)”，anchor） 其格式如下：其格式如下：文本或圖像等頁(yè)面文本或圖像等頁(yè)面元素元素 文本或文本或圖像等頁(yè)面元素圖像等頁(yè)面元素42利用圖片制作鏈接利用圖片制作鏈接注意：該圖片有個(gè)邊框，影響圖片美觀43利用圖片制作鏈接（去邊框）利用圖片制作鏈接（去邊框）注意：該圖片無(wú)邊框44鏈接郵件鏈接郵件與我聯(lián)系45與我聯(lián)系添加郵件主題464748 l列表標(biāo)記是列表標(biāo)記是HTML的一個(gè)基本結(jié)構(gòu)。有以下的一個(gè)基本結(jié)構(gòu)。有以下3種類(lèi)型的列表：種類(lèi)型的列表： 無(wú)序列表（無(wú)序列表（Unordered list）列表項(xiàng)列表項(xiàng) 有序列表（有序列表

9、（Ordered list）列表項(xiàng)列表項(xiàng) 定義列表（定義列表（Definition list）列表項(xiàng)列表項(xiàng)l預(yù)定格式（預(yù)定格式（Preformatted）標(biāo)記可以使信息）標(biāo)記可以使信息完全按照完全按照HTML文件中編排的格式原樣顯示于文件中編排的格式原樣顯示于瀏覽器中，該標(biāo)記的格式如下：瀏覽器中，該標(biāo)記的格式如下：預(yù)定格式的信息預(yù)定格式的信息 49清單元素清單元素l無(wú)序清單 l有序清單 l定義清單 l清單條目l定義清單中的清單條目l定義清單中的條目說(shuō)明50【例4-3】 下列程序采用3種列表標(biāo)記顯示如圖4-2所示的頁(yè)面 查看程序查看程序51清單元素清單元素l改變無(wú)序清單的條目標(biāo)記ll數(shù)據(jù)庫(kù)原理l

10、操作系統(tǒng)l計(jì)算機(jī)網(wǎng)絡(luò)ll默認(rèn)方式為實(shí)心圓點(diǎn)，即 .52清單元素清單元素l改變有序清單條目標(biāo)記ll阿拉伯?dāng)?shù)字標(biāo)記l大寫(xiě)字母標(biāo)記l小寫(xiě)字母標(biāo)記l大寫(xiě)羅馬數(shù)字標(biāo)記l小寫(xiě)羅馬數(shù)字標(biāo)記l阿拉伯?dāng)?shù)字標(biāo)記 大寫(xiě)字母標(biāo)記 .小寫(xiě)字母標(biāo)記 大寫(xiě)羅馬數(shù)字標(biāo)記 v.小寫(xiě)羅馬數(shù)字標(biāo)記 默認(rèn)標(biāo)記為數(shù)字53l改變有序清單條目的初始數(shù)字ll阿拉伯?dāng)?shù)字標(biāo)記l#表示條目起始序號(hào)：，54預(yù)排版文本預(yù)排版文本l格式l保持該標(biāo)記中的文字格式，瀏覽器不對(duì)其中的文字重新排版沒(méi)有經(jīng)過(guò)預(yù)排版經(jīng)過(guò)預(yù)排版551.2 表格 表格的定義表格的定義 標(biāo)題內(nèi)容標(biāo)題內(nèi)容 表格內(nèi)容表格內(nèi)容 表格內(nèi)容表格內(nèi)容 表格的屬性表格的屬性標(biāo)記標(biāo)記，和和的屬性用來(lái)定義

11、表格的顯的屬性用來(lái)定義表格的顯示特性示特性 56表表3 標(biāo)記屬性表標(biāo)記屬性表 57表4 標(biāo)記屬性表58表5 標(biāo)記屬性表59【例4-4】 以下是一個(gè)顯示圖4-3所示表格頁(yè)面的HTML文件，例中只給出主要的表格部分的文本，其余部分讀者可以很容易地補(bǔ)全 查看程序60【例4-5】 以下是一個(gè)顯示圖4-4所示較復(fù)雜表格頁(yè)面的HTML文件 查看程序查看程序611.3 表單 表單的定義表單的定義定義表單的語(yǔ)法如下：定義表單的語(yǔ)法如下： textarea定義定義 select定義定義 表單的輸入域表單的輸入域以標(biāo)記以標(biāo)記定義的多種輸入域，包括定義的多種輸入域，包括text，radio，checkbox，pas

12、sword，hidden，button，submit和和reset等。等。以標(biāo)記以標(biāo)記定義的文本域。定義的文本域。以標(biāo)記以標(biāo)記和和定義的下拉列表框定義的下拉列表框 62表表4-6 常用的表單輸入域常用的表單輸入域 63表單表單l. . GET, POST 64基本格式之一基本格式之一 text, password, checkbox, radio, image, hidden, submit, reset 程序識(shí)別的程序識(shí)別的輸入域名稱(chēng)輸入域名稱(chēng) 65文本和密碼輸入文本和密碼輸入 ll66復(fù)選框復(fù)選框l被選內(nèi)容l被選內(nèi)容如果是在同一組中，如果是在同一組中，名稱(chēng)應(yīng)該是相同的名稱(chēng)應(yīng)該是相同的67單

13、選按鈕單選按鈕l被選內(nèi)容l被選內(nèi)容如果是在同一組中，如果是在同一組中，名稱(chēng)應(yīng)該是相同的名稱(chēng)應(yīng)該是相同的68下拉菜單下拉菜單ll菜單項(xiàng)l基本結(jié)構(gòu)基本結(jié)構(gòu)ll菜單項(xiàng)可選參數(shù)可選參數(shù)69多行文本輸入域多行文本輸入域l 70提交按鈕、重置按鈕提交按鈕、重置按鈕ll按鈕上顯示的信息按鈕上顯示的信息71一般按鈕l一般按鈕用來(lái)控制其他定義了處理腳本的處理一般按鈕用來(lái)控制其他定義了處理腳本的處理工作工作 ll例例:l 72Hidden(隱藏域隱藏域)linput type=hidden name=* value=*l說(shuō)明說(shuō)明:l隱藏域是用來(lái)收集或發(fā)送信息的不可見(jiàn)元素，對(duì)于網(wǎng)頁(yè)的訪隱藏域是用來(lái)收集或發(fā)送信息的不

14、可見(jiàn)元素，對(duì)于網(wǎng)頁(yè)的訪問(wèn)者來(lái)說(shuō)，隱藏域是看不見(jiàn)的。當(dāng)表單被提交時(shí)，隱藏域就問(wèn)者來(lái)說(shuō)，隱藏域是看不見(jiàn)的。當(dāng)表單被提交時(shí)，隱藏域就會(huì)將信息用你設(shè)置時(shí)定義的名稱(chēng)和值發(fā)送到服務(wù)器上。會(huì)將信息用你設(shè)置時(shí)定義的名稱(chēng)和值發(fā)送到服務(wù)器上。 73注意比較一下兩種寫(xiě)法注意比較一下兩種寫(xiě)法(1)：llll name屬性是用于接收表單各個(gè)輸入域時(shí)所需要的。 id屬性是用于頁(yè)面需要JavaScript處理時(shí)所需的。7475注意比較一下兩種寫(xiě)法注意比較一下兩種寫(xiě)法(1)：ll764.1.4 框架框架簡(jiǎn)例框架簡(jiǎn)例【例【例4-7】 以下是使用框架的一個(gè)簡(jiǎn)例以下是使用框架的一個(gè)簡(jiǎn)例 查看每部分的代碼查看每部分的代碼顯示實(shí)際效果

15、顯示實(shí)際效果7778框架的定義l框架的定義較為特殊，首先需確定如何分割窗框架的定義較為特殊，首先需確定如何分割窗口，然后建立描述窗口分割的主文件，再為每口，然后建立描述窗口分割的主文件，再為每個(gè)框架建立相應(yīng)的個(gè)框架建立相應(yīng)的HTML文件文件 頭部標(biāo)記頭部標(biāo)記 字符串字符串 是用以劃分框窗，是用以劃分框窗，每一框窗由一個(gè)每一框窗由一個(gè) 標(biāo)標(biāo) 記記所標(biāo)示，所標(biāo)示，必須在必須在 范圍中使用。范圍中使用。 79l 80表表4-7 標(biāo)記屬性表標(biāo)記屬性表表表4-8 標(biāo)記屬性標(biāo)記屬性表表81【例4-8】 設(shè)計(jì)如圖4-7所示的框架頁(yè)面 顯示代碼查看實(shí)際效果82l說(shuō)明： 當(dāng)別人使用的瀏覽器太舊，不支援框架這個(gè)功

16、能時(shí)，他看到的將當(dāng)別人使用的瀏覽器太舊，不支援框架這個(gè)功能時(shí)，他看到的將會(huì)是一片空白。為了避免會(huì)是一片空白。為了避免 這種情況，可使用這種情況，可使用 這個(gè)這個(gè)標(biāo)記，當(dāng)使用者的瀏覽器看不到框架時(shí)，他就會(huì)看標(biāo)記，當(dāng)使用者的瀏覽器看不到框架時(shí)，他就會(huì)看 到到 與與 之間的內(nèi)容，而不是一片空之間的內(nèi)容，而不是一片空白。這些內(nèi)容可以是提醒白。這些內(nèi)容可以是提醒 瀏覽轉(zhuǎn)用新的瀏覽器的字句，甚至是一瀏覽轉(zhuǎn)用新的瀏覽器的字句，甚至是一個(gè)沒(méi)有框架的網(wǎng)頁(yè)或能自動(dòng)切換至沒(méi)有框架的版本個(gè)沒(méi)有框架的網(wǎng)頁(yè)或能自動(dòng)切換至沒(méi)有框架的版本 亦可。亦可。 83 內(nèi)嵌框架內(nèi)嵌框架l作用：是在一頁(yè)網(wǎng)頁(yè)中間插入一個(gè)框窗以顯示另一個(gè)文件作用：是在一頁(yè)網(wǎng)頁(yè)中間插入一個(gè)框窗以顯示另一個(gè)文件 。l例子：例子： 84HTML的缺陷：的缺陷：l不能適應(yīng)現(xiàn)在越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要；lHTML代碼不規(guī)范、臃腫，瀏覽器需要足夠智能和龐大才能夠正確顯示HTML；l數(shù)據(jù)與表現(xiàn)混雜；85采用采用XHTML：lXHTML解決HTML語(yǔ)言所存在的嚴(yán)重制約其發(fā)展的問(wèn)題；lXML是web發(fā)展的趨勢(shì)；lXHTML非常嚴(yán)密；lXHTML是能與其它基于XML的標(biāo)記語(yǔ)言、應(yīng)用程序及協(xié)議進(jìn)行良好的交互工作；lXHTML是Web標(biāo)準(zhǔn)家族的一部分，能很好在無(wú)線設(shè)備等其它用戶(hù)代理上； 86XHTML區(qū)別于區(qū)別于HTML的規(guī)則：的規(guī)則：lXHTML文件的開(kāi)始要聲明