學(xué)習(xí)-3網(wǎng)頁設(shè)計(jì)1html超標(biāo)記語言_第1頁
學(xué)習(xí)-3網(wǎng)頁設(shè)計(jì)1html超標(biāo)記語言_第2頁
學(xué)習(xí)-3網(wǎng)頁設(shè)計(jì)1html超標(biāo)記語言_第3頁
學(xué)習(xí)-3網(wǎng)頁設(shè)計(jì)1html超標(biāo)記語言_第4頁
學(xué)習(xí)-3網(wǎng)頁設(shè)計(jì)1html超標(biāo)記語言_第5頁
已閱讀5頁，還剩161頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

HTML桂素偉微軟全球MVPMSDN特邀講師HTML頁面基礎(chǔ)頁面版式控制和使用多媒體表格布局框架集與嵌入式框架表單與表單元素層疊式樣式表CSS與div布局課程大綱頁面基礎(chǔ)C/S模式的介紹C/S（

Client/Server

）模式的軟件開發(fā)就是指基于客戶端與服務(wù)器端的開發(fā)模式：桌面應(yīng)用程序服務(wù)器端應(yīng)用QQQQ服務(wù)器B/S模式的介紹B/S（

Browser/Server

）模式的軟件開發(fā)是指基與瀏覽器與服務(wù)器的開發(fā)模式：瀏覽器web服務(wù)端提供程序IE瀏覽器裝有IIS的web服務(wù)器本章內(nèi)容HTML的地位和作用開發(fā)HTML使用的工具h(yuǎn)ttp協(xié)議HTML文件的結(jié)構(gòu)如何設(shè)置HTML文件的背景色及文本色如何在頁面上添加一個(gè)超鏈接HTML頁面的文字布局HTML頁面的各種字體效果及滾動(dòng)字符頁面版式控制標(biāo)記HTML簡介HTML（HyperTextMarkupLanguage超文本標(biāo)記語言）由服務(wù)器端動(dòng)態(tài)生成記事本等手工編寫存成html,htm等可視化HTML編輯工具FrontpagewebdesignDreamweaver等（推薦使用）Dreamweaver業(yè)界使用最多的制作網(wǎng)頁的工具所見即所得的設(shè)計(jì)方式設(shè)計(jì)與代碼兩種制作手段擁有CS8MX等多種版本常有其他工具配合它來完成頁面制作輔助工具1Fireworksphotoshop簡單快捷，一般的網(wǎng)頁素材處理都可勝任。最專業(yè)的圖像處理軟件，功能強(qiáng)大，需要一定的基礎(chǔ)輔助工具2Flash制作工具制作絢麗奪目的網(wǎng)頁素材和視頻需要一定基礎(chǔ)熟練應(yīng)用瀏覽器HTML文件只有通過瀏覽器，才能被用戶所欣賞瀏覽器的種類（IE火狐等等）瀏覽器訪問HTML的方式（兩種）不同瀏覽器對(duì)HTML的顯示效果有所不同http協(xié)議超文本傳輸協(xié)議為什么需要協(xié)議客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的協(xié)議默認(rèn)服務(wù)器端口為80https協(xié)議（安全超文本傳輸協(xié)議）url（統(tǒng)一資源定位地址）HTML的基本結(jié)構(gòu)<Html><Head>

頭部信息:網(wǎng)頁的標(biāo)題和屬性</Head><Body>

文件主體,正文部分</Body></Html><Html>標(biāo)記用于HTML文檔的最前面，用來標(biāo)記HTML文檔的開始</Html>則是放在HTML文檔的最后面，用來表示HTML文檔的結(jié)束<HEAD>之間包括文檔的頭部信息，如文檔總標(biāo)題等，可省略<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="a.js"></script><linkhref="newsyle.css"rel="stylesheet"type="text/css"/><title>標(biāo)題</title></head>Head<meta>元素可提供有關(guān)頁面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。⒈name屬性name屬性主要用于描述網(wǎng)頁，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。meta標(biāo)簽的name屬性語法格式是：<metaname="參數(shù)"content="具體的參數(shù)值">；。其中name屬性主要有以下幾種參數(shù)：A、Keywords（關(guān)鍵字）說明：keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。舉例：<metaname="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">B、description（網(wǎng)站內(nèi)容描述）說明：description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。網(wǎng)站內(nèi)容描述（description）的設(shè)計(jì)要點(diǎn)：①網(wǎng)頁描述為自然語言而不是羅列關(guān)鍵詞（與keywords設(shè)計(jì)正好相反）；②盡可能準(zhǔn)確地描述網(wǎng)頁的核心內(nèi)容，通常為網(wǎng)頁內(nèi)容的摘要信息，也就是希望搜索引擎在檢索結(jié)果中展示的摘要信息；③網(wǎng)頁描述中含有有效關(guān)鍵詞；④網(wǎng)頁描述內(nèi)容與網(wǎng)頁標(biāo)題內(nèi)容有高度相關(guān)性；⑤網(wǎng)頁描述內(nèi)容與網(wǎng)頁主體內(nèi)容有高度相關(guān)性；⑥網(wǎng)頁描述的文字不必太多，一般不超過搜索引擎檢索結(jié)果摘要信息的最多字?jǐn)?shù)（通常在100中文字之內(nèi)，不同搜索引擎略有差異）。舉例：<metaname="description"content="Thispageisaboutthemeaningofscience,education,culture.">C、robots（機(jī)器人向?qū)В┱f明：robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。content的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。舉例：<metaname="robots"content="none">D、author（作者）說明：標(biāo)注網(wǎng)頁的作者舉例：<metaname="author"content="">Head⒉http-equiv屬性http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。meta標(biāo)簽的http-equiv屬性語法格式是：<metahttp-equiv="參數(shù)"content="參數(shù)變量值">；其中http-equiv屬性主要有以下幾種參數(shù)：A、Expires（期限）說明：可以用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">注意：必須使用GMT的時(shí)間格式。B、Pragma(cache模式）說明：禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。用法：<metahttp-equiv="Pragma"content="no-cache">注意：這樣設(shè)定，訪問者將無法脫機(jī)瀏覽。C、Refresh（刷新）說明：自動(dòng)刷新并指向新頁面。用法：<metahttp-equiv="Refresh"content="">；（注意后面的引號(hào)，分別在秒數(shù)的前面和網(wǎng)址的后面）注意：其中的2是指停留2秒鐘后自動(dòng)刷新到URL網(wǎng)址。D、Set-Cookie(cookie設(shè)定）說明：如果網(wǎng)頁過期，那么存盤的cookie將被刪除。用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">注意：必須使用GMT的時(shí)間格式。E、Window-target（顯示窗口的設(shè)定）說明：強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示。用法：<metahttp-equiv="Window-target"content="_top">注意：用來防止別人在框架里調(diào)用自己的頁面。F、content-Type（顯示字符集的設(shè)定）說明：設(shè)定頁面使用的字符集。用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312">G、content-Language（顯示語言的設(shè)定）用法：<metahttp-equiv="Content-Language"content="zh-cn"/>Head標(biāo)記標(biāo)記：用“<”和“>”括起來的句子單標(biāo)簽例如：<br/><hr/>雙標(biāo)簽例如：<html></html><font></font><a></a>標(biāo)簽中可以有屬性，根據(jù)需要可以有多個(gè)屬性是由名稱=“值”構(gòu)成常用的字符實(shí)體字符字符引用(十進(jìn)制代碼)字符引用(十六進(jìn)制代碼)實(shí)體引用描述“"""雙引號(hào)&&&&和號(hào)<<<<小于號(hào)>>>>大于號(hào)

   不間斷空格?©©©版權(quán)符號(hào)?®®®注冊(cè)商標(biāo)<body><body>標(biāo)記一般不省略，表示正文內(nèi)容的開始。Body的一些屬性鏈接<ahref="資源地址">鏈接文字</a>本地資源鏈接<ahref=“c:\mydoc.html”>文件</a>外部網(wǎng)絡(luò)鏈接<aHref=””>百度</a>文件內(nèi)部鏈接<aname=”標(biāo)簽a”>flag</a> <aHref=”#標(biāo)簽a”>轉(zhuǎn)到flag處</a>郵件鏈接<aHref=””>SAIKO在線</a>圖片鏈接<ahref=""><imgsrc="URL"alt="AlternateText"></a>內(nèi)容標(biāo)題h1黑體，特大字體，居中，上下各有兩行空行。h2黑體，大字體，上下各有一到兩行空行。h3黑體，大字體，左端微縮進(jìn)，上下空行。h4黑體，普通字體，比h3更多縮進(jìn)，上邊空一行。h5黑體，與h4相同縮進(jìn)，上邊空一行。h6黑體，與正文有相同縮進(jìn)，上邊空一行。各式標(biāo)題<hn>可以有對(duì)齊屬性，align＝left/center/right段落<p><p>標(biāo)記，align是left、center、right、justify幾種字體風(fēng)格<b>黑體，<i>斜體，<u>下劃線，<tt>打字機(jī)體<em>強(qiáng)調(diào)<strong>特別強(qiáng)調(diào)<code>源代碼<samp>例子<small>較小<big>較大<sup>上標(biāo)<sub>下標(biāo)物理風(fēng)格邏輯風(fēng)格字體顏色#可以是6位16進(jìn)數(shù)，分別指定紅、綠、藍(lán)的值#可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一字體顏色：<fontcolor=#>滾動(dòng)文字使用<marquee>標(biāo)記默認(rèn)從右向左具有多重屬性常用于顯示滾動(dòng)通知滾動(dòng)文字direction表示滾動(dòng)的方向，值可以是left，right，up，down，默認(rèn)為left

behavior表示滾動(dòng)的方式，值可以是scroll（連續(xù)滾動(dòng)）slide（滑動(dòng)一次）alternate（來回滾動(dòng)）

loop表示循環(huán)的次數(shù)，值是正整數(shù)，默認(rèn)為無限循環(huán)

scrollamount表示運(yùn)動(dòng)速度，值是正整數(shù)，默認(rèn)為6

scrolldelay表示停頓時(shí)間，值是正整數(shù)，默認(rèn)為0，單位是毫秒

valign表示元素的垂直對(duì)齊方式，值可以是top，middle，bottom，默認(rèn)為middle

align表示元素的水平對(duì)齊方式，值可以是left，center，right，默認(rèn)為left

bgcolor表示運(yùn)動(dòng)區(qū)域的背景色，值是16進(jìn)制的RGB顏色，默認(rèn)為白色

height、width表示運(yùn)動(dòng)區(qū)域的高度和寬度，值是正整數(shù)（單位是像素）或百分?jǐn)?shù)，默認(rèn)width=100%height為標(biāo)簽內(nèi)元素的高度

hspace、vspace表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素。

onmouseover=this.stop()onmouseout=this.start()表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候滾動(dòng)停止，當(dāng)鼠標(biāo)移開的時(shí)候又繼續(xù)滾動(dòng)。無序清單<ul>無序清單用<ul>開始，每一個(gè)清單條目用<li>引導(dǎo)，最后是</ul>

輸出時(shí)每一清單條目縮進(jìn)，并且以黑點(diǎn)標(biāo)示

有序清單<ol>與無序清單不同的就是將無序的<ul>換成有序的<ol>有序清單type屬性有序清單缺省值是阿拉伯?dāng)?shù)字<Litype=#>“#”的取值有如下幾種類型：“#”取值為“A”，顯示大寫字母?！?”取值為“a”，顯示小寫字母?！?”取值為“I”，顯示大寫羅馬數(shù)字?！?”取值為“i”，顯示小寫羅馬數(shù)字。定義清單<dl>定義清單用于對(duì)清單條目進(jìn)行簡短說明。用<dl>開始，清單條目用<dt>引導(dǎo)，它的說明用<dd>引導(dǎo)頁面版式控制標(biāo)記描述<!--注解-->注釋標(biāo)記<p>分段標(biāo)記<br/>換行標(biāo)記<center>居中標(biāo)記<hr/>水平線標(biāo)記<pre>預(yù)排版標(biāo)記<div>層定位標(biāo)記注釋標(biāo)記功能：為文中不同的部分加上說明，方便日后修改

用作版權(quán)聲明

<!--注釋內(nèi)容-->開始標(biāo)記結(jié)束標(biāo)記注意:注釋標(biāo)記中沒有任何屬性。開始標(biāo)記和結(jié)束標(biāo)記必須同時(shí)存在。注解內(nèi)容允許為空。其內(nèi)容長度不用被限制在一行內(nèi)，可以為任意長度。結(jié)束標(biāo)識(shí)和開始標(biāo)識(shí)可以不在一行上。分段標(biāo)記功能：實(shí)現(xiàn)類似于文檔中的段落效果<p>也可以有多種屬性，比較常用的屬性是：align＝#還有style屬性，在后面學(xué)習(xí)樣式的時(shí)候會(huì)詳細(xì)介紹注意：HTML不識(shí)別鍵盤的回車換行HTML將多個(gè)空格以及回車等效為一個(gè)空格，HTML的分段完全依賴于分段標(biāo)記換行標(biāo)記<br><br/>標(biāo)記用來創(chuàng)建一個(gè)回車換行如果<br/>標(biāo)記處在<p></p>標(biāo)記對(duì)外面，將創(chuàng)建一個(gè)大的回車換行若處在<p></p>標(biāo)記對(duì)之間，<br/>標(biāo)記前面和后面文本的行與行之間的距離將比較小注意：<br>標(biāo)記只有開始標(biāo)記，沒有結(jié)束標(biāo)記水平線標(biāo)記注意：水平線標(biāo)記<hr/>是單標(biāo)記align=#設(shè)定線條擺放位置

size=#屬性

width=#屬性設(shè)定線條長度color=#屬性

left；right；center

以像素作單位內(nèi)定為2

以像素作單位，可以是絕對(duì)或相對(duì)值，內(nèi)定為100%

設(shè)定線條顏色，內(nèi)定為黑色屬性<hrwidth="400"size="10"align="center"noshade/>居中標(biāo)記比較上面頁面上下兩段詩詞位置有什么不同<center>標(biāo)記是內(nèi)容處于居中位置比較上面頁面上下兩段內(nèi)容格式有什么不同HTML是不識(shí)別空格和回車的如何實(shí)現(xiàn)左側(cè)效果？<pre></pre>定位標(biāo)記<div>定位標(biāo)記多用于在制定分塊顯示內(nèi)容比較重要的屬性是style后續(xù)章節(jié)連同樣式表加深理解總結(jié)什么是HTML，HTML文件的結(jié)構(gòu)設(shè)置HTML文件的背景色及文本色<body><p>標(biāo)簽實(shí)現(xiàn)分段，排版超鏈接分為內(nèi)部，外部，本地，郵件鏈接字體的大小<fontsize>字體的風(fēng)格：物理、邏輯字體的顏色：#000000或red等<marquee>標(biāo)簽實(shí)現(xiàn)文字滾動(dòng)三種清單列表：無序、有序、定義用<p><div><center><hr><br>等標(biāo)簽可以用于HTML頁面排版作業(yè)利用所學(xué)知識(shí)，完成一個(gè)簡單的網(wǎng)頁要求：要有大段的文章，起碼3段以上使頁面出現(xiàn)下拉滾動(dòng)條要有滾動(dòng)的歡迎信息頁面上設(shè)置不同種類的鏈接使用有序和無序清單顯示兩列新聞可以設(shè)置頁面背景色和文字顏色多媒體、表格回顧HTML的地位和作用開發(fā)HTML使用的工具h(yuǎn)ttp協(xié)議HTML文件的結(jié)構(gòu)如何設(shè)置HTML文件的背景色及文本色如何在頁面上添加一個(gè)超鏈接HTML頁面的文字布局HTML頁面的各種字體效果及滾動(dòng)字符頁面版式控制標(biāo)記本章內(nèi)容在HTML頁中插入圖像設(shè)置圖像熱點(diǎn)插入背景音樂插入多媒體文件表格的結(jié)構(gòu)表格的行標(biāo)記和單元格標(biāo)記表格的尺寸顏色跨行跨列的表格表格的美化修飾表格填充屬性用表格實(shí)現(xiàn)頁面布局嵌入圖像網(wǎng)頁之所以被人喜愛，因?yàn)樯厦嬗形寤ò碎T的東西，包括有圖像，視頻，音樂等等網(wǎng)頁上支持的圖片格式：BMPGIF(動(dòng)畫)JPEGPNG（）格式<IMGSRC=“圖形文件地址“/>在網(wǎng)頁中插入圖像如圖所示：頁面中插入了圖片使用<imgsrc=“url”/>src可以是本機(jī)或者遠(yuǎn)程主機(jī)上的圖形設(shè)置圖像如圖顯示的小狗更加美觀通過設(shè)置不同的屬性達(dá)到這樣的效果鼠標(biāo)移動(dòng)到圖片上還有提示注意：圖片最好按照原圖尺寸或者比例顯示alt=""屬性如圖所示：該屬性用于瀏覽器不支持圖片，則在圖片位置會(huì)顯示該文字！圖文混排用align屬性，文字和圖片還可以有不同的排版方式:如left、right，bottom,top,middle圖片鏈接鏈接和圖片的組合構(gòu)成圖片鏈接<AHREF="資源地址"><IMGSRC=“URL"></A>熱點(diǎn)如圖顯示，紅框顯示的位置是某商務(wù)樓鼠標(biāo)點(diǎn)擊該區(qū)域會(huì)鏈接到，該樓的詳細(xì)信息或網(wǎng)站<imgsrc="aaa.png"style="height:288px;width:420px"usemap="#gsw"/><mapname="gsw"id="gsw"><areashape="circle"style="color:red;"coords="50,50,50,50"href=""alt="baidu"/><areashape="rect"style="color:red;"coords="150,150,50,50"href=""alt="baidu"/></map>多媒體效果沒有了視頻、音樂我們的網(wǎng)頁豈不如同報(bào)紙。。。背景音樂多媒體插入背景音樂<bgsound>標(biāo)記是用來插入背景音樂。<bgsoundsrc="042.mp3"autostart=“true”loop=“infinite”/>只適用于IE瀏覽器

音樂文件的位置是否在音樂檔下載完之后自動(dòng)播放。true是(默認(rèn)值)，false否 LOOP=2表示重復(fù)兩次，Infinite表示重復(fù)多次插入多媒體src=#autostart=#loop=#hidden=#starttime="分:秒"volume="0-100"width="整數(shù)"和hight="整數(shù)"屬性<embed>是用來插入各種多媒體格式可以是Midi、Wav、AIFF、AU等等src=#<Body><divalign="center"><embedsrc="file.wmv"></div></Body>src屬性用來設(shè)定多媒體檔案及路徑，可以是相對(duì)或絕對(duì)autostart=# <Body><divalign="center"><embedsrc="file.wmv"autostart=true></div></Body>autostart=#屬性設(shè)定是否在音樂檔下載完之后就自動(dòng)播放true是(默認(rèn)值)，false否hidden=#<Body><divalign="center"> <embedsrc="file.wmv"autostart=trueloop="true"hidden=true></div></Body>是否完全隱藏畫面true為是，no為否(默認(rèn))starttime="分:秒"<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"starttime="00:30"></div></Body>設(shè)定多媒體從網(wǎng)頁打開30秒后開始播放設(shè)定多媒體開始播放的時(shí)間volume="0-100"<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"volume="50"></div></Body>設(shè)定音量的大小，數(shù)值是0到100之間。內(nèi)定則為使用系統(tǒng)本身的設(shè)定調(diào)整視頻尺寸<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"width="400"hight="200"></div></Body>設(shè)定控制面板的高度和寬度

用<img>插入視頻<body><center><palign="center"><imgdynsrc="file.wmv"></p></center></body>格式：<imgdynsrc="avi文件地址"><img>有關(guān)視頻屬性

以下是<img>用于播放視頻可能用到的屬性表格行列單元格在HTML文檔中，廣泛使用表格來存放網(wǎng)頁上的文本和圖像更大的應(yīng)用是可以通過表格進(jìn)行頁面布局表格編碼結(jié)構(gòu)<TABLEborder="1"><TR><TD>

單元格內(nèi)容

</TD> ……</TR>……</TABLE><TABLE>...</TABLE

>定義表格<TD>…</TD>

定義列

<TR>…</TR>

定義行

<td>可以換成<th>，該標(biāo)記標(biāo)記所標(biāo)記的單元格的文字以粗體出現(xiàn)，通常用于表格的標(biāo)題欄

定義表格表格是用<table>元素來定義的<tableborder=“n”align=“alignment”bgcolor=“clr”width=“300/80%”</table>邊框?qū)R方式背景色表格寬度表格尺寸一般情況下，表格的總長度和總寬度自動(dòng)調(diào)整的可以設(shè)置表格寬高

<tablewidth=n1height=n2>n1和n2可以用像素來表示，也可以用百分比設(shè)置用border屬性來體現(xiàn)邊框不同的效果。用style屬性細(xì)致設(shè)置table的樣式表格顏色可以為表格的整體或者部分使用背景色表格的背景色彩<tablebgcolor=#>行的背景色彩<trbgcolor=#>表元的背景色彩<thbgcolor=#>或<tdbgcolor=#>#預(yù)定義色彩名稱：Red,Blue,MaroonRGB六位16進(jìn)制數(shù)：#eeeeee簡單表格實(shí)例<TABLEborder="2"><TR><TD>移動(dòng)</TD><TD>聯(lián)通</TD><TD>鐵通</TD></TR><TR><TD>IBM</TD><TD>惠普</TD><TD>華碩</TD></TR></TABLE><caption><captionalign=top>旅游日程</caption>該屬性：用于設(shè)置表格的標(biāo)題在TR之前設(shè)置<TD>和<TH>

TH效果TD效果比較一下兩個(gè)效果有什么不同跨行跨列的表格跨3列跨3行下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列?跨行、列的表格代碼<TABLEborder="1">…

<TDcolspan="2">辦公設(shè)備、文具</TD>…

<TDrowspan="2">各種卡的總匯</TD>…</TABLE>注意：跨行列的表格盡量不用于網(wǎng)頁布局表格的美化修飾背景圖片背景色表格的高度表格的寬度文字對(duì)齊方式根據(jù)理解,如何進(jìn)行美化修飾？可以將普通的表格變成下面的樣子表格填充屬性border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)border="20"cellpadding="30"cellspacing="40"bordercolor="red">表格的嵌套表格中可以嵌套表格圖中紅色的部分就是在外側(cè)表格的一個(gè)TD中放置的一個(gè)新表格表格的排列表格默認(rèn)情況下會(huì)向下排列右圖排列了三個(gè)顏色的三個(gè)表格，想想它是怎么排列的？表格布局使用表格進(jìn)行布局，分析一下它的布局結(jié)構(gòu)表格的用處簡單用處：在表格中顯示數(shù)據(jù)重要用處：通過不同的樣式，完成頁面的布局實(shí)現(xiàn)方式：嵌套排列跨行列的表格（注：跨行列的表格只可用在最內(nèi)層嵌套的表格中）演示布局使用fireworks或者photoshop，將剛才所見的布局示例圖片切成相應(yīng)的頁面素材在Dreamweaver中創(chuàng)建表格進(jìn)行布局將素材和文字放入相應(yīng)的位置完成頁面布局例子，注意體會(huì)我們見過或是沒有見過的屬性用<img>標(biāo)簽可以在頁面中插入圖像或視頻圖片在網(wǎng)頁中可以被做成按鈕或者是熱點(diǎn)地圖用<embed>標(biāo)簽可以在頁面中插入視頻<table><tr><td>等標(biāo)記構(gòu)成表格<td>和<th>的區(qū)別表格的尺寸顏色（背景、邊框）跨行跨列的表格<colspan><rowspan>表格的美化修飾(背景圖，居中，邊距等)表格填充屬性cellpaddingcellspacing用表格嵌套，排列，填充實(shí)現(xiàn)頁面布局作業(yè)1根據(jù)本章所學(xué)的知識(shí)點(diǎn)，完成一個(gè)內(nèi)容豐富的網(wǎng)頁要求：1、頁面要有圖文混排的效果

2、嘗試使用不同的排版標(biāo)記

3、點(diǎn)擊圖片可以跳轉(zhuǎn)到其他頁面

4、在右下角放置一個(gè)div，顯示一段視頻作業(yè)2分析右側(cè)的頁面的結(jié)構(gòu)

采用table布局完成頁面效果框架與嵌入式框架課程回顧在HTML頁中插入圖像設(shè)置圖像熱點(diǎn)插入背景音樂插入多媒體文件表格的結(jié)構(gòu)表格的行標(biāo)記和單元格標(biāo)記表格的尺寸顏色跨行跨列的表格表格的美化修飾表格填充屬性用表格實(shí)現(xiàn)頁面布局本章要點(diǎn)框架標(biāo)記各窗口尺寸設(shè)置各窗口間相互操作(FrameTarget)IFrame的外觀IFrame的使用表單的基本概念及作用九種寫入標(biāo)記菜單下拉列表的使用框架廣告欄頂部框架(top.htm)導(dǎo)航欄左側(cè)框架(left.htm)詳細(xì)內(nèi)容頁面右側(cè)框架(main.htm)框架的邊框框架集頁面(FrameSet.htm)多窗口頁面(Frames)使用Frames結(jié)構(gòu)，能夠?qū)⒄麄€(gè)窗口分成幾個(gè)獨(dú)立的小窗口每一個(gè)窗口可分別載入不同的文件，每個(gè)窗口是可以相互溝通。Framees結(jié)構(gòu)中的每個(gè)URL值指定了一個(gè)事先做好的文件上中下排列的窗口每個(gè)窗口對(duì)應(yīng)一個(gè)頁面，以及一個(gè)框架集頁面，總共需要幾個(gè)HTML頁面文件？FRAMEFRAMEFRAMEFRAMESET框架標(biāo)記<FRAMESETrows="25%,50%,*"border="5"><FRAMEname=“top"src/target="the_first.html"><FRAMEname="middle"src="the_second.html">

<FRAMEname=“bottom"src="the_third.html"></FRAMESET>將窗口分割成上中下3部分窗口邊框的寬度如果要在瀏覽器中創(chuàng)建左中右三個(gè)窗口,該如何實(shí)現(xiàn)？在上例中主要用到了下列代碼結(jié)構(gòu)簡述出現(xiàn)<Frameset>標(biāo)記的文檔中，將不再使用<Body>標(biāo)記<Html><Head></Head><Frameset> <Framesrc="url"></Frameset></Html>

注意：frame在Frameset中間，沒有BODY三窗口框架top.html效果圖left.html效果圖right.html效果多個(gè)復(fù)雜的窗口<FRAMESETrows="20%,*"frameborder="0"><FRAMEsrc=“top.html”name=“topframe“scrolling=”no”noresize=“noresize”>//邊框大小可否拉伸<FRAMESETcols="20%,*"><FRAMEsrc="left.html"noresize="noresize“scrolling="no"name="leftframe“><FRAMEsrc="right.html"name="rightframe"></FRAMESET></FRAMESET>設(shè)置無框架邊框不顯示滾動(dòng)條禁止調(diào)整框架大小框架名稱，便于超文本鏈接錨標(biāo)簽target屬性所引用各窗口尺寸設(shè)置<framesetcols="100，200，300"><framesetrows="10%，20%，70%">

其中的任何一個(gè)數(shù)字也可以由“*”來代替

如：<framesetcols="100，200，*">

<framesetcols="100，*，*">將100像素以外的窗口平均分配

<framesetcols="*，*，*">將窗口分為三等份s框架可以將窗口分割為幾塊，橫向分用ROWS屬性，縱向分用COLS屬性，每一塊的大小可以由這兩個(gè)屬性的值來實(shí)現(xiàn)可以由數(shù)字或百分比來實(shí)現(xiàn)窗口間相互操作由Frames分出來的幾個(gè)窗口的內(nèi)容并不是靜止不變的，往往一個(gè)窗口的內(nèi)容隨著另一個(gè)窗口的要求而不斷變化我們必須為每一個(gè)窗口起一個(gè)名字，這個(gè)名字用屬性Name來定義<framesrc=urlname=“窗口名”>

例如：<framesrc="frame/a.html"name=“l(fā)eft”>

Target屬性

定義了窗口名稱，還應(yīng)該有Target來配合使用，Target屬性指定了所鏈接的文件出現(xiàn)在哪一窗口。Target的值可以是name定義的名稱，也可以是以下四類值:<ahref=urltarget=_blank>顯示一個(gè)新窗口<ahref=urltarget=_self>顯示在同一個(gè)窗口<ahref=urltarget=_parent>顯示在前一份文件的窗口<ahref=urltarget=_top>顯示在整個(gè)瀏覽器窗口Target示例一<ahref=“right.html”target=“rightframe“>right頁面</A><ahref=“buy.html”target=“rightframe”>buy頁面</A>target屬性指定了所鏈接的文件出現(xiàn)在名稱為“rightframe”的框架窗口里Target示例二<P><Ahref=“right.html”target=“_blank”>right.html</A></P><P><Ahref="buy.html"target="_self">buy.html</A></P><P><Ahref="sale.html"target="_parent">sale.html</A></P><P><Ahref=“all.html"target="_top">person_info.html</A></P>新啟一個(gè)窗口打開文件“right.html”在本身窗口打開文件“buy.html”在前一窗口顯示sale.html在整個(gè)瀏覽器窗口顯示all.html各窗口邊框的設(shè)置<Framesetrows="30%，70%"frameborder=yes>…<Framesetcols="20%，80%"frameborder=no>…</Frameset></Frameset>Frameborder屬性用來設(shè)定各窗口邊框的設(shè)置，yes表示有邊框，no表示沒有邊框邊框色彩<Framesetrows="30%，70%"bordercolor="red">…<Framesetcols="20%，80%"bordercolor="black">…</Frameset></Frameset>bordercolor=#屬性用來設(shè)定邊框色彩邊界寬度<framemarginwidth=#marginheight=#>用來設(shè)定各窗口的上下左右邊界寬度#的值為像素點(diǎn)marginwidth=5marginwidth=10marginheight=50各窗口間空白區(qū)域framespacing=#屬性用來設(shè)定各窗口間空白區(qū)域，其中#為空白區(qū)域的大小如圖所示：紅色和黑色部分表示各窗口的空白區(qū)域framespacing=50卷滾條設(shè)置<framescrolling=#>用來設(shè)定滾動(dòng)條，缺省值是autoyes表示有，no表示沒有，auto表示由瀏覽器自動(dòng)設(shè)置當(dāng)現(xiàn)實(shí)區(qū)域不夠的時(shí)候就會(huì)出現(xiàn)滾動(dòng)條B窗口，設(shè)置了不顯示滾動(dòng)條框架的應(yīng)用領(lǐng)域很少用在網(wǎng)站的頁面顯示中，如果使用，大都也是應(yīng)用在網(wǎng)站后臺(tái)管理系統(tǒng)的頁面上可以應(yīng)用于各種web應(yīng)用系統(tǒng)的使用界面觀察搜狐首頁和一個(gè)網(wǎng)站系統(tǒng)的后臺(tái)頁面體會(huì)效果網(wǎng)站首頁后臺(tái)頁面嵌入式框架如同“畫中畫“電視

Iframe標(biāo)記，又叫浮動(dòng)幀標(biāo)記，你可以用它將一個(gè)HTML文檔嵌入在一個(gè)HTML中顯示Iframe標(biāo)記的使用<Iframesrc="URL"width="x"height="x"frameborder="x"scrolling="[OPTION]"></iframe>格式:文件的路徑，既可是HTML文件，也可以是文本、ASP等

“畫中畫”區(qū)域的寬度是否出現(xiàn)滾動(dòng)條區(qū)域邊框的高度

另外，在<iframe>中還可以添加name=#屬性，屬性后面的文字將出現(xiàn)在不支持FRAMES的瀏覽器中嵌入式框架實(shí)例<bodybgcolor="Lime"><h3align="center">登鸛雀樓</h3><Palign="center">白日依山盡，黃河入海流。<br>欲窮千里目，更上一層樓。</P></body>我們先創(chuàng)建一個(gè)文件名叫a.html文件，其代碼如下主頁面代碼<Html> <Head> <Title>嵌入式框架</Title> </Head> <Iframesrc="a.html"> </iframe></Html>換成如下代碼，大家注意效果的變化，體會(huì)屬性的作用<Iframesrc="a.html"width="250"height="200"frameborder="0"></iframe>Iframe的應(yīng)用領(lǐng)域用于在頁面上動(dòng)態(tài)的顯示其他系統(tǒng)頁面的內(nèi)容嵌入的頁面有更新的話，也會(huì)相應(yīng)的顯示出來將頁面數(shù)據(jù)提交到iframe，可以不讓頁面刷新關(guān)于這點(diǎn)，大家在學(xué)習(xí)了后面知識(shí)“表單”后，才能深刻體會(huì)

體驗(yàn)用于采集和提交用戶輸入的信息表單標(biāo)記<form><formaction＝"url"method="get|post"name="myform"target="_blank">……</form>

表單在Web網(wǎng)頁中用來給訪問者填寫信息，從而能采集客戶端信息，使網(wǎng)頁具有交互的功能表單是由窗體和控件組成的

處理程序的程序名(包括網(wǎng)絡(luò)路徑:網(wǎng)址或相對(duì)路徑)

提交信息的方式MethodGET，顯示提交，數(shù)據(jù)量小POST，隱式提交，數(shù)據(jù)量大（最大4MB）GET|POST平板車搬家大型集裝箱貨車搬家寫入標(biāo)記<input/>標(biāo)記<input/>能夠?qū)g覽器中的控件加載到html文檔中必須放在<form></form>標(biāo)志對(duì)之間<inputtype=“”/>用來定義一個(gè)用戶輸入?yún)^(qū)，用戶可在其中輸入信息。標(biāo)志中共提供了九種類型的輸入?yún)^(qū)域，具體是哪一種類型由type屬性來決定

注意：該標(biāo)記是單標(biāo)記，沒有結(jié)束標(biāo)記<type>的屬性1．單行的文本輸入?yún)^(qū)域2．按鈕3．復(fù)選框4．隱藏區(qū)域5．密碼輸入?yún)^(qū)6．單選按鈕類型7．圖像按鈕<inputtype="text"><inputtype="button"><inputtype="checkbox"<inputtype="hidden"><inputtype="password"><inputtype="radio"><inputtype="image"src="url">8．表單事件處理按鈕<inputtype="submit|reset">9．文件域<inputtype=“file">單行的文本框

(1)name定義控件名稱(2)value指定控件初始值,屬性及說明(3)size指定控件寬度(4)maxlength表示該文本輸入框允許輸入的最大字符數(shù)(5)onchang當(dāng)文本改變時(shí)要執(zhí)行的函數(shù)(6)onselect當(dāng)控件被選中時(shí)要執(zhí)行的函數(shù)(7)onfocus當(dāng)文本接受焦點(diǎn)時(shí)要執(zhí)行的函數(shù)單行文本框?qū)嵗?/p>

<form> <inputtype="text"name="username"value="請(qǐng)輸入用戶名"></form><Input/>必須放在<form></form>之間設(shè)置當(dāng)行文本框的其他屬性，觀察效果輸入密碼的區(qū)域?qū)傩詎ame定義控件名稱。value指定控件初始值,該值就是瀏覽器一開始在文本框中的內(nèi)容。size指定控件寬度,表示該文本輸入框所能顯示的最大字符數(shù)。maxlegnth表示該文本輸入框允許用戶輸入的最大字符數(shù)。當(dāng)用戶輸入密碼時(shí)，區(qū)域內(nèi)將會(huì)顯示“*”號(hào)密碼框?qū)嵗?lt;inputtype=“text”name=“username”value=“請(qǐng)輸入用戶名”/><br/><inputtype="password"name="password"value="請(qǐng)輸入密碼“/>兩者的唯一區(qū)別按鈕

分類普通按鈕提交到服務(wù)器的按鈕重置按鈕<inputtype="button“/><inputtype=“submit”/><inputtype=“reset“/>可將表單內(nèi)容全部清除點(diǎn)擊就會(huì)連接到action指定的url地址按鈕共同的屬性

共同的屬性name指定按鈕名稱value指定按鈕表面顯示的文字onclick指定單擊按鈕后要調(diào)用的函數(shù)onfocus指定按鈕接受焦點(diǎn)時(shí)要調(diào)用的函數(shù)所謂調(diào)用的函數(shù)，是后面章節(jié)學(xué)的JavaScript函數(shù)普通按鈕當(dāng)這個(gè)按鈕被點(diǎn)擊時(shí)，默認(rèn)不會(huì)有任何的效果必須調(diào)用屬性onclick指定的函數(shù)在使用這個(gè)按鈕時(shí)，一般配合使用value指定在它上面顯示的文字用onclick指定一個(gè)函數(shù)，一般為JavaScript的一個(gè)方法按鈕實(shí)例<formid="form1"name="form1"method="post"action=""> <inputtype="button"onclick="msg()"value="點(diǎn)擊我"/></form>msg()就是JavaScript代碼,后面的章節(jié)會(huì)詳細(xì)講解圖像按鈕圖像的源文件名由src屬性指定，用戶點(diǎn)擊后，表單中的信息傳送給服務(wù)器

屬性name指定圖像按鈕名稱。src指定圖像的url地址<inputtype="IMAGE"src="login.gif“/>單選按鈕類型(1)name定義控件名稱*(2)value定義控件的值*(3)checked設(shè)定控件初始狀態(tài)是被選中的checked=checked(4)onclick定義控件被選中時(shí)要執(zhí)行的函數(shù)(5)onfocus定義控件為焦點(diǎn)時(shí)要執(zhí)行的函數(shù)當(dāng)為單選項(xiàng)時(shí)，所有按鈕name屬性必需相同單選按鈕實(shí)例

<INPUTCHECKEDname=R1type=radiovalue="music">音樂checked表示默認(rèn)被選中radio表示單選按鈕復(fù)選框?qū)嵗?lt;inputtype=“checkbox”name=“yinliao”value=“kkkl”>可口可樂注意這里的value值name可以相同也可以不同相同name屬性的復(fù)選框可以看成一組*checked=“checked”表示默認(rèn)被選中文件域?qū)傩裕簄ame控件名稱。例如<inputtype=“file”name=“file”/>用戶可以通過文件域來瀏覽本地文件并選擇。配合服務(wù)端程序，可以實(shí)現(xiàn)本地文件的上傳注意：要實(shí)現(xiàn)文件上傳必須以Post為提交方式

并且設(shè)置表單屬性*（enctype=“multipart/form-data”）隱藏區(qū)域?qū)傩詎ame控件名稱。value控件默認(rèn)值。例如<inputtype="Hidden"name="ss"value="688">用戶不能在其中輸入，用來預(yù)設(shè)某些要傳送的信息對(duì)用戶來說是不可見的下拉列表框?qū)傩詍ultiplenamesize設(shè)置列表的高度缺省時(shí)值為1可多選控件名稱<select></select>標(biāo)志對(duì)用來創(chuàng)建一個(gè)菜單下拉列表框下拉列表框?qū)嵗?lt;selectname="gx2"multiplesize="4"> <optionvalue=“apple”selected>蘋果</option></select>multiple代表多選Selected表示默認(rèn)選項(xiàng)將size改為1，看看效果可以輸入多行的文本框?qū)傩?1)onchange指定控件改變時(shí)要調(diào)用的函數(shù)(2)onfocus當(dāng)控件接受焦點(diǎn)時(shí)要執(zhí)行的函數(shù)(3)onblur當(dāng)控件失去焦點(diǎn)時(shí)要執(zhí)行的函數(shù)(4)onselect當(dāng)控件內(nèi)容被選中時(shí)要執(zhí)行的函數(shù)*(5)name文字區(qū)塊的名稱，作識(shí)別之用，將會(huì)傳至CGI*(6)cols文字區(qū)塊的寬度*(7)rows文字區(qū)塊的列數(shù)，即其高度*(8)wrap屬性定義輸入內(nèi)容大于文本域時(shí)顯示的方式，提交時(shí)把換行符提交<textarea></textarea>用來創(chuàng)建一個(gè)可以輸入多行的文本框

文本域示例

<formaction=""method="post">… <textareaname="yj"clos="20"rows="5">…</form>表單的作用用戶注冊(cè)系統(tǒng)登錄發(fā)表留言或內(nèi)容任何需要用戶填寫內(nèi)容，進(jìn)行交互操作的時(shí)候總結(jié)框架標(biāo)記各窗口尺寸設(shè)置框架邊框和各窗口格式的問題各窗口間相互操作(FrameTarget)框架的應(yīng)用領(lǐng)域IFrame的外觀IFrame的使用IFrame的應(yīng)用領(lǐng)域表單的作用？Actionmethodname屬性<input>中type的不同，決定了表單中不同的控件文本框，密碼框，文本域，隱藏域的區(qū)別單選框和復(fù)選框的區(qū)別下拉列表框不同屬性值，會(huì)有不同的顯示效果作業(yè)使用框架及表單元素實(shí)現(xiàn)左圖的功能。層疊式樣式表CSS

回顧框架標(biāo)記各窗口尺寸設(shè)置各窗口間相互操作(FrameTarget)IFrame的外觀IFrame的使用表單的基本概念及作用九種寫入標(biāo)記菜單下拉列表的使用本章內(nèi)容認(rèn)識(shí)CSSCSS的基本語法CSS選擇器文本樣式背景樣式DIV和布局樣式CSS偽類在HTML中使用CSS的方式認(rèn)識(shí)CSS內(nèi)容相同外觀不同樣式一樣式二CSS的概念CSS就是CascadingStyleSheets，中文翻譯為“層疊樣式表”，簡稱樣式表CSS可以制作好多套頁面的樣式，方便用戶切換風(fēng)格（如上圖）利用CSS可以完成頁面上各元素的樣式效果，是網(wǎng)頁更加美觀CSS基本結(jié)構(gòu)<STYLEtype="text/css"> P{color:red;

font-size:30px;

font-family:隸書;} ……</STYLE>聲明文檔樣式表結(jié)束文檔樣式表開始類型為CSS樣式樣式規(guī)則CSS樣式規(guī)則P{color:red;font-size:30px;font-family:隸書;}選擇器屬性的值屬性Css應(yīng)用所有的段落都采用P樣式，保證風(fēng)格統(tǒng)一P{color:red;font-family:"隸書";font-size:24px;}…<P>床前明月光，</P>本頁面中所有的P標(biāo)簽都應(yīng)用了此樣式選擇器用分號(hào)隔開如何編寫此樣式?字體類型為隸書、大小24pxCSS選擇器標(biāo)記選擇器（可以定義相關(guān)html標(biāo)記的外觀div）類選擇器（可以定義一類html標(biāo)記的外觀.class后面的值）ID選擇器（可以定義某一個(gè)html標(biāo)記的外觀#id后邊的值）復(fù)合選擇器（結(jié)合上述三種選擇器所構(gòu)建的復(fù)雜選擇器，可針對(duì)特定的區(qū)域的特定一類或特定一個(gè)html標(biāo)記設(shè)定外觀）根據(jù)不同選擇器所構(gòu)建的樣式，分別稱之為標(biāo)記樣式，類樣式，ID樣式和復(fù)合樣式類樣式的應(yīng)用….red{color:red;font-family:"隸書";}…<Pclass="red">床前明月光，</P><P>我是郭德剛，</P>…CLASS類選擇器為類選擇器定義的樣式規(guī)則應(yīng)用類選擇器class＝”類名“<H2>和<P>標(biāo)簽的字體和顏色一樣大小不同用同一個(gè)樣式如何實(shí)現(xiàn)？常用樣式屬性文本屬性文本屬性說明font-size字體大小font-family字體類型font-style字體樣式color設(shè)置或檢索文本的顏色text-align文本對(duì)齊使用font-size、font-family、color實(shí)現(xiàn)

宋體，字體大小12px字體大小16px文本間距示例letter-spacing:1em;text-align:justify;text-indent:2em;line-height:30pt；字間距為1em對(duì)齊方式為兩端對(duì)齊縮進(jìn)格為2em行高為30pt上例-樣式代碼詳解…P{font-size:12px; font-family:"宋體"; text-align:left;}.bigFont

{font-size:16px; color:red;}…<Pclass="bigFont">·世錦賽劉翔12秒95奪冠成就大滿貫</P><P>我國實(shí)施不安全食品召回制度遏制非法出口</P>…..聲明P標(biāo)簽樣式聲明名稱為bigFont類樣式,它可被多個(gè)標(biāo)簽共享應(yīng)用類樣式用class＝”類名“Css設(shè)置背景背景屬性說明background-color設(shè)置背景顏色background-image設(shè)置背景圖像background-repeat設(shè)置一個(gè)指定的圖像如何被重復(fù)可取值repeat-x、repeat、no-repeat、repeat-y…table{background-image:url(images/type_back1.jpg);background-repeat:no-repeat;

}…設(shè)置背景圖像為images文件夾下的type_back1.jpg設(shè)置背景圖像不平鋪CSS方框?qū)傩詍argin-right右邊界margin-left左邊界margin-top上邊界margin-bottom下邊界marginborderpaddingborder-width邊框的寬度padding-left左填充padding-bottom下填充方框?qū)傩悦骷?xì)屬性CSS名稱說明邊界屬性margin-top設(shè)置對(duì)象的上邊距margin-right設(shè)置對(duì)象的右邊距margin-bottom設(shè)置對(duì)象的下邊距margin-left設(shè)置對(duì)象的左邊距邊框?qū)傩詁order-style設(shè)置邊框的樣式border-width設(shè)置邊框的寬度border-color設(shè)置邊框的顏色填充屬性padding-top設(shè)置內(nèi)容與上邊框之間的距離padding-right設(shè)置內(nèi)容與右邊框之間的距離padding-bottom設(shè)置內(nèi)容與下邊框之間的距離padding-left設(shè)置內(nèi)容與左邊框之間的距離方框?qū)傩源a示例….tableBorder{ border-right-width:3px; border-right-color:red;

border-right-style:dashed; padding-top:20px;

padding-left:10px; }TR{background:yellow;}…

<TR><TDclass="tableBorder">手機(jī)沖值</TD>…設(shè)置單元格右邊框?qū)挾葹?像素設(shè)置單元格右邊框?yàn)樘摼€框設(shè)置單元格里文字與左邊框的距離為10像素表格行的背景色表單文本框樣式....textBorder{border-width:1px;border-style:solid;

}…<INPUTname="fname"type="text"class="textBorder"></P>...文本框?yàn)閷?shí)線邊框邊框?qū)挾葹?像素看看沒有設(shè)置樣式的文本框的效果對(duì)超鏈接添加樣式…A{ color:blue; text-decoration:none; }A:hover{ color:red; }..<TD><Ahref="#">諾基亞</A>|<Ahref="#">摩托羅拉</A></TD>..超鏈接文本的樣式鼠標(biāo)放在上面的樣式如何編寫此超鏈接樣式？用樣式實(shí)現(xiàn)圖片按鈕.picButton{background-image:url(images/back.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;

font-size:14px;}……<INPUTname="Rt1"type="reset"class="picButton"value="重填">…….背景圖像為images文件夾下的back.jpg按鈕的邊界、邊框、填充均為0像素設(shè)定按鈕寬度、高度和圖片大小一樣設(shè)置按鈕上的字體大小為14像素<body><divid="container"><divid="header"><h1>MainTitleofWebPage</h1></div>

溫馨提示

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

評(píng)論

0/150

提交評(píng)論