靜態(tài)網(wǎng)頁設(shè)計(jì)_第1頁
靜態(tài)網(wǎng)頁設(shè)計(jì)_第2頁
靜態(tài)網(wǎng)頁設(shè)計(jì)_第3頁
靜態(tài)網(wǎng)頁設(shè)計(jì)_第4頁
靜態(tài)網(wǎng)頁設(shè)計(jì)_第5頁
已閱讀5頁,還剩27頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第二章靜態(tài)網(wǎng)頁設(shè)計(jì)靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第1頁。學(xué)習(xí)要求

掌握HTML的基本概念掌握HTML的框架及其基本元素靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第2頁。學(xué)習(xí)重點(diǎn)表格(table)標(biāo)簽的使用表單(form)的使用Html結(jié)合腳本語言的一些常用小技巧靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第3頁。HTML-Internet中的語言

HTML(HyperTextMarkupLanguage):超文本標(biāo)記語言(WWW上通用的發(fā)布語言)功能:使用各種基礎(chǔ)的印刷元素例如標(biāo)題、文字、表格、列表、照片、插圖等來發(fā)布在線的文檔。通過超文本鏈接使用戶能夠方便地在各種信息之間切換。設(shè)計(jì)一種表單控件來控制網(wǎng)上的各種傳輸、遠(yuǎn)程服務(wù)等功能,象查詢信息、訂購貨物等。在文檔中可以直接包含視頻剪輯、音效片斷和其他的應(yīng)用程序。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第4頁。HTML簡(jiǎn)史

TimBerners-Lee最初在CERN開發(fā)了HTML,這種語言由于NCSA的Mosaic瀏覽器使用而廣為流傳。20世紀(jì)90年代,Web網(wǎng)絡(luò)的興起,使得HTML空前繁榮,HTML被發(fā)展成了許多個(gè)版本。制作公認(rèn)的HTML語言規(guī)范:IETFHTML2.0W3CHTML3.2HTML4.0Html靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第5頁。HTML文件

純文本文件,以htm或html為擴(kuò)展名,除了一些基本的文字外還包含了一些標(biāo)簽。瀏覽器對(duì)這些標(biāo)簽進(jìn)行解釋,顯示出文字、圖像、動(dòng)畫以及播放出聲音。查看HTML源代碼在瀏覽器中打開一個(gè)網(wǎng)頁點(diǎn)擊“查看”菜單項(xiàng)點(diǎn)擊“源代碼”項(xiàng)一個(gè)獨(dú)立窗口就把創(chuàng)建此網(wǎng)頁的源代碼顯示出來例2_01靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第6頁。使用HTML創(chuàng)建基本網(wǎng)頁

HTML編輯器記事本(以html或htm作為文件擴(kuò)展名保存)可視化網(wǎng)頁編輯器MicrosoftFrontPage2000MacromediaDreamweaver靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第7頁。HTML組成

標(biāo)記

<></>元素(標(biāo)簽)屬性靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第8頁。構(gòu)建網(wǎng)頁框架

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第9頁。<html></html>:標(biāo)識(shí)網(wǎng)頁的開始和結(jié)束<head><title></title></head>:頭部字段包含一些不出現(xiàn)在瀏覽器中的網(wǎng)頁信息(除了不可缺省的<title>元素)注:<title>標(biāo)記用以區(qū)別網(wǎng)頁,當(dāng)網(wǎng)頁載入瀏覽器之后,其標(biāo)題出項(xiàng)在標(biāo)題域中。

<head>標(biāo)記必須出現(xiàn)在<html>標(biāo)記的開始符號(hào)之后,而在主體部分之前<body></body>:主體部分存放頁面的內(nèi)容標(biāo)識(shí)加入HTML注釋:用<!--and-->標(biāo)記將注釋文字括起來,此標(biāo)記可以跨行使用。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第10頁。創(chuàng)建文本

控制文本顯示的常用標(biāo)記:換行標(biāo)記<br>:標(biāo)記后的正文不另起一行,顯示效果上另起一行。段落標(biāo)記<p>:標(biāo)記后面的正文將另起一段。<p>的唯一屬性是align,用以調(diào)準(zhǔn)文字位置(left,center,right)。添加標(biāo)題<h1><h2><h3><h4><h5><h6>:所有的標(biāo)題均以粗體顯示。不同的標(biāo)記代表不同的標(biāo)題尺寸:<h1>最大,<h6>最小。標(biāo)題標(biāo)記也包含align屬性,使標(biāo)題文字在水平方向?qū)R。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第11頁。創(chuàng)建文本

改變文字外觀<font>:size屬性:定義域是從1到7,7最大。也可以在尺寸標(biāo)示符前加“+”、“-”號(hào)以從默認(rèn)位置的尺寸開始來增減現(xiàn)有尺寸。color屬性:規(guī)定了文本的顏色。face屬性:改變文字的顯示方式。給出了一個(gè)用逗號(hào)分割的字體樣式列表,各種字體是按作者的喜好程度排列的。如果瀏覽器沒有列表中的第一種字體,則會(huì)依次選用第二種,第三種……。應(yīng)用粗體和斜體<b><i>靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第12頁。加入圖像

語法:<img>屬性:<src>:規(guī)定了圖像的位置。<alt>=text:替換文本。目前,大部分瀏覽器支持.gif和.jpg文件。alt屬性給出了不可裝載圖像的替換文本。有效的替換文本應(yīng)給出圖像的功能而不是圖像的描述。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第13頁。width和height:如果不使用這些尺寸,瀏覽器將以默認(rèn)尺寸(圖像初始保存時(shí)的大?。╋@示圖像。<align>對(duì)齊圖像:改變圖像水平(left、right)和垂直(top、middle、bottom)的對(duì)齊方式。hspace和vspace:定義在文字和圖像之間的空格數(shù)目(與空格象素的數(shù)目有關(guān))。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第14頁。創(chuàng)建超級(jí)鏈接語法:<a>...</a>屬性href:保存了鏈接所聯(lián)系的地址。創(chuàng)建文字鏈接是通過在<a>標(biāo)記種插入文字來完成的。<ahref="">Thisisalinktosohu</a>target="_blank"<a></a>標(biāo)簽和Jscript和Vbscript結(jié)合使用的一些小技巧靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第15頁。創(chuàng)建列表無序列表:語法:<ul>...</ul>內(nèi)容:包含一個(gè)或多個(gè)<li>元素來定義列表項(xiàng)。type屬性:編號(hào)樣式。取值disc|square|circle(實(shí)心圓|方框|空心圓)。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第16頁。有序列表:每個(gè)元素按數(shù)字順序標(biāo)號(hào)。語法:<ol>...</ol>內(nèi)容:包含一個(gè)或多個(gè)<li>元素來定義列表項(xiàng)。type屬性:編號(hào)樣式。取值1|a|A|i|I(十進(jìn)制數(shù)|小寫字母|大寫字母|小寫羅馬數(shù)字|大寫羅馬數(shù)字)靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第17頁。創(chuàng)建表格<table>

<!--定義表格><tr>

<!--定義表行><th></th>

<th></th>

<!--定義表頭><tr><td></td><td></td>

<!--定義單元格></table>靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第18頁。創(chuàng)建表單表單:是瀏覽器用來收集用戶的信息,實(shí)現(xiàn)與用戶交互的場(chǎng)所。表單的處理過程:當(dāng)用戶單擊提交按鈕時(shí),輸入在表單中的信息就會(huì)上傳到服務(wù)器中,然后由服務(wù)器的有關(guān)程序進(jìn)行處理,處理后將用戶提交的信息存儲(chǔ)在服務(wù)器端的數(shù)據(jù)庫中,或者將有關(guān)信息返回到瀏覽器上。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第19頁。表單FORM的語法:<formaction=活動(dòng)method=方法>各種表單域……<inputtype=submit><inputtype=reset></form>表單的發(fā)送方法:決定表單的輸入如何發(fā)送到服務(wù)器get方法(缺省值):把表單信息合并成一個(gè)字符串放在“action”所規(guī)定的URL的末尾發(fā)送給服務(wù)器。post方法:將表單數(shù)據(jù)作為http請(qǐng)求的一部分,表單輸入在請(qǐng)求體中。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第20頁。創(chuàng)建表單

表單的輸入域input語法:<inputtype=類型name="名稱">其中:type為輸入框的類型,name用來命名該輸入框。type類型:text(單行文本框):用戶可以在其中輸入字符或者單行文本。value屬性:設(shè)置初始時(shí)顯示在文本域中的文本,但是用戶可以更改這些文本。size屬性:設(shè)置文本域的寬度(字符為單位)例2_10靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第21頁。password(密碼域):與文本域不同的是輸入文本時(shí),以"*"顯示。textarea(文本區(qū)):可以輸入多行文本??梢允褂胷ows和cols屬性來設(shè)置文本區(qū)域的行數(shù)和字符寬度。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第22頁。創(chuàng)建表單checkbox(復(fù)選框):一般以分組的形式出現(xiàn),具有相同name屬性的復(fù)選框?qū)儆谙嗤慕M。默認(rèn)時(shí)不被選中。為了在初始時(shí)將復(fù)選框標(biāo)記為選中,可以使用checked屬性。當(dāng)數(shù)據(jù)被傳到服務(wù)器時(shí),value屬性用來幫助識(shí)別相應(yīng)的復(fù)選框。radio(單選框):具有相同name屬性的單選框?qū)儆谙嗤慕M。選項(xiàng)互斥。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第23頁。創(chuàng)建表單submit(提交按鈕):用來在點(diǎn)擊時(shí)將數(shù)據(jù)發(fā)送出去處理。value屬性值為按鈕提供了文本。reset(重置按鈕):清除所有的文本域并且將所有其它的表單元素復(fù)位到相應(yīng)的默認(rèn)值。button(按鈕):定義了一個(gè)用于客戶端編程的按鈕。"value"給出了按鈕的文本標(biāo)簽,"onclick"事件通常用于定義按鈕被激活時(shí)所采取的行為。<inputtype=buttonvalue="ChangeCase"onClick=window.open…………">靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第24頁。hidden(隱藏域):允許我們?cè)诒韱沃邪瑪?shù)據(jù),但又不向用戶顯示。這在跨越幾個(gè)HTML文檔的表單應(yīng)用中特別有用。用戶的輸入可以被隱藏<input>從一個(gè)表單送到另一個(gè)表單。注:域的隱藏是指它不在瀏覽器中顯示出來,但是任何人還是可以通過查閱HTML文檔的源文件來找到隱藏域的。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第25頁。塊級(jí)元素的使用DIV:定義了一個(gè)通用塊級(jí)容器,使作者能夠?yàn)閴K的內(nèi)容提供樣式或語言的信息。SPAN:在段和行內(nèi)元素中,文本級(jí)的<SPAN>就相當(dāng)于<DIV>。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第26頁。塊級(jí)元素的使用address:為文檔提供聯(lián)系信息。包括文檔維護(hù)者的名字、連向該維護(hù)者主頁的鏈接、E-mail地址、通信地址和電話號(hào)碼等。所有這些信息都將使用戶可以方便地與文檔維護(hù)者聯(lián)系。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第27頁。塊級(jí)元素的使用應(yīng)用中劃線<strike>:標(biāo)記插入和刪除文字<ins>標(biāo)記用于在原文中插入文字。<del>標(biāo)記用于在原文中刪除文字。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第28頁。塊級(jí)元素的使用

pre(預(yù)排版)的使用瀏覽器遇到HTML中幾個(gè)連續(xù)的空格字符,會(huì)刪去其它空格而只保留一個(gè)空格的位置。使用<pre>可維持鍵入的空格數(shù)。包含在pre標(biāo)記中的字符會(huì)按照HTML源碼的格式輸出到瀏覽器上。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第29頁。組件的使用JavaApplet的使用語法:<appletcode=""></applet>Marquee的使用語法:<marquee>xx</marquee>效果:xx會(huì)從屏幕一邊跑到另外一邊。靜態(tài)網(wǎng)頁設(shè)計(jì)全文共32頁,當(dāng)前為第30頁。組件的使用Embed的使用用來插入Flash

溫馨提示

  • 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)論