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

下載本文檔

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

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

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

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

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

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

scrollamount表示運動速度，值是正整數(shù)，默認為6

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

valign表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle

align表示元素的水平對齊方式，值可以是left，center，right，默認為left

bgcolor表示運動區(qū)域的背景色，值是16進制的RGB顏色，默認為白色

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

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

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

輸出時每一清單條目縮進，并且以黑點標示

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

用作版權(quán)聲明

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

size=#屬性

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

left；right；center

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

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

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

音樂文件的位置是否在音樂檔下載完之后自動播放。true是(默認值)，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è)定多媒體檔案及路徑，可以是相對或絕對autostart=# <Body><divalign="center"><embedsrc="file.wmv"autostart=true></div></Body>autostart=#屬性設(shè)定是否在音樂檔下載完之后就自動播放true是(默認值)，false否hidden=#<Body><divalign="center"> <embedsrc="file.wmv"autostart=trueloop="true"hidden=true></div></Body>是否完全隱藏畫面true為是，no為否(默認)starttime="分:秒"<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"starttime="00:30"></div></Body>設(shè)定多媒體從網(wǎng)頁打開30秒后開始播放設(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)用是可以通過表格進行頁面布局表格編碼結(jié)構(gòu)<TABLEborder="1"><TR><TD>

單元格內(nèi)容

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

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

定義列

<TR>…</TR>

定義行

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

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

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

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

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

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

2、嘗試使用不同的排版標記

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

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

采用table布局完成頁面效果框架與嵌入式框架課程回顧在HTML頁中插入圖像設(shè)置圖像熱點插入背景音樂插入多媒體文件表格的結(jié)構(gòu)表格的行標記和單元格標記表格的尺寸顏色跨行跨列的表格表格的美化修飾表格填充屬性用表格實現(xiàn)頁面布局本章要點框架標記各窗口尺寸設(shè)置各窗口間相互操作(FrameTarget)IFrame的外觀IFrame的使用表單的基本概念及作用九種寫入標記菜單下拉列表的使用框架廣告欄頂部框架(top.htm)導(dǎo)航欄左側(cè)框架(left.htm)詳細內(nèi)容頁面右側(cè)框架(main.htm)框架的邊框框架集頁面(FrameSet.htm)多窗口頁面(Frames)使用Frames結(jié)構(gòu)，能夠?qū)⒄麄€窗口分成幾個獨立的小窗口每一個窗口可分別載入不同的文件，每個窗口是可以相互溝通。Framees結(jié)構(gòu)中的每個URL值指定了一個事先做好的文件上中下排列的窗口每個窗口對應(yīng)一個頁面，以及一個框架集頁面，總共需要幾個HTML頁面文件？FRAMEFRAMEFRAMEFRAMESET框架標記<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)建左中右三個窗口,該如何實現(xiàn)？在上例中主要用到了下列代碼結(jié)構(gòu)簡述出現(xiàn)<Frameset>標記的文檔中，將不再使用<Body>標記<Html><Head></Head><Frameset> <Framesrc="url"></Frameset></Html>

注意：frame在Frameset中間，沒有BODY三窗口框架top.html效果圖left.html效果圖right.html效果多個復(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è)置無框架邊框不顯示滾動條禁止調(diào)整框架大小框架名稱，便于超文本鏈接錨標簽target屬性所引用各窗口尺寸設(shè)置<framesetcols="100，200，300"><framesetrows="10%，20%，70%">

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

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

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

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

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

Target屬性

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

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

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

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

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

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

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

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

注意：該標記是單標記，沒有結(jié)束標記<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當文本改變時要執(zhí)行的函數(shù)(6)onselect當控件被選中時要執(zhí)行的函數(shù)(7)onfocus當文本接受焦點時要執(zhí)行的函數(shù)單行文本框?qū)嵗?/p>

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

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

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

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

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

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

文本域示例

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

回顧框架標記各窗口尺寸設(shè)置各窗口間相互操作(FrameTarget)IFrame的外觀IFrame的使用表單的基本概念及作用九種寫入標記菜單下拉列表的使用本章內(nèi)容認識CSSCSS的基本語法CSS選擇器文本樣式背景樣式DIV和布局樣式CSS偽類在HTML中使用CSS的方式認識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標簽都應(yīng)用了此樣式選擇器用分號隔開如何編寫此樣式?字體類型為隸書、大小24pxCSS選擇器標記選擇器（可以定義相關(guān)html標記的外觀div）類選擇器（可以定義一類html標記的外觀.class后面的值）ID選擇器（可以定義某一個html標記的外觀#id后邊的值）復(fù)合選擇器（結(jié)合上述三種選擇器所構(gòu)建的復(fù)雜選擇器，可針對特定的區(qū)域的特定一類或特定一個html標記設(shè)定外觀）根據(jù)不同選擇器所構(gòu)建的樣式，分別稱之為標記樣式，類樣式，ID樣式和復(fù)合樣式類樣式的應(yīng)用….red{color:red;font-family:"隸書";}…<Pclass="red">床前明月光，</P><P>我是郭德剛，</P>…CLASS類選擇器為類選擇器定義的樣式規(guī)則應(yīng)用類選擇器class＝”類名“<H2>和<P>標簽的字體和顏色一樣大小不同用同一個樣式如何實現(xiàn)？常用樣式屬性文本屬性文本屬性說明font-size字體大小font-family字體類型font-style字體樣式color設(shè)置或檢索文本的顏色text-align文本對齊使用font-size、font-family、color實現(xiàn)

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

{font-size:16px; color:red;}…<Pclass="bigFont">·世錦賽劉翔12秒95奪冠成就大滿貫</P><P>我國實施不安全食品召回制度遏制非法出口</P>…..聲明P標簽樣式聲明名稱為bigFont類樣式,它可被多個標簽共享應(yīng)用類樣式用class＝”類名“Css設(shè)置背景背景屬性說明background-color設(shè)置背景顏色background-image設(shè)置背景圖像background-repeat設(shè)置一個指定的圖像如何被重復(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ū)傩悦骷殞傩訡SS名稱說明邊界屬性margin-top設(shè)置對象的上邊距margin-right設(shè)置對象的右邊距margin-bottom設(shè)置對象的下邊距margin-left設(shè)置對象的左邊距邊框?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">手機沖值</TD>…設(shè)置單元格右邊框?qū)挾葹?像素設(shè)置單元格右邊框為虛線框設(shè)置單元格里文字與左邊框的距離為10像素表格行的背景色表單文本框樣式....textBorder{border-width:1px;border-style:solid;

}…<INPUTname="fname"type="text"class="textBorder"></P>...文本框為實線邊框邊框?qū)挾葹?像素看看沒有設(shè)置樣式的文本框的效果對超鏈接添加樣式…A{ color:blue; text-decoration:none; }A:hover{ color:red; }..<TD><Ahref="#">諾基亞</A>|<Ahref="#">摩托羅拉</A></TD>..超鏈接文本的樣式鼠標放在上面的樣式如何編寫此超鏈接樣式？用樣式實現(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等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論