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

下載本文檔

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

文檔簡介

第二章靜態(tài)網(wǎng)頁設(shè)計學(xué)習(xí)要求

掌握HTML的基本概念掌握HTML的框架及其基本元素學(xué)習(xí)重點表格（table）標(biāo)簽的使用表單（form）的使用Html結(jié)合腳本語言的一些常用小技巧HTML-Internet中的語言

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

TimBerners-Lee最初在CERN開發(fā)了HTML，這種語言由于NCSA的Mosaic瀏覽器使用而廣為流傳。20世紀(jì)90年代，Web網(wǎng)絡(luò)的興起，使得HTML空前繁榮，HTML被發(fā)展成了許多個版本。制作公認(rèn)的HTML語言規(guī)范：IETFHTML2.0W3CHTML3.2HTML4.0HtmlHTML文件

純文本文件，以htm或html為擴展名，除了一些基本的文字外還包含了一些標(biāo)簽。瀏覽器對這些標(biāo)簽進行解釋，顯示出文字、圖像、動畫以及播放出聲音。查看HTML源代碼在瀏覽器中打開一個網(wǎng)頁點擊“查看”菜單項點擊“源代碼”項一個獨立窗口就把創(chuàng)建此網(wǎng)頁的源代碼顯示出來例2_01使用HTML創(chuàng)建基本網(wǎng)頁

HTML編輯器記事本（以html或htm作為文件擴展名保存）可視化網(wǎng)頁編輯器MicrosoftFrontPage2000MacromediaDreamweaver

HTML組成

標(biāo)記

<></>元素（標(biāo)簽）屬性構(gòu)建網(wǎng)頁框架

<html>

<head>

<title></title>

</head>

<body>

</body>

</html><html></html>：標(biāo)識網(wǎng)頁的開始和結(jié)束<head><title></title></head>：頭部字段包含一些不出現(xiàn)在瀏覽器中的網(wǎng)頁信息（除了不可缺省的<title>元素）注：<title>標(biāo)記用以區(qū)別網(wǎng)頁，當(dāng)網(wǎng)頁載入瀏覽器之后，其標(biāo)題出項在標(biāo)題域中。

<head>標(biāo)記必須出現(xiàn)在<html>標(biāo)記的開始符號之后，而在主體部分之前<body></body>：主體部分存放頁面的內(nèi)容標(biāo)識加入HTML注釋：用<!--and-->標(biāo)記將注釋文字括起來，此標(biāo)記可以跨行使用。創(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。創(chuàng)建文本

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

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

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

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

<th></th>

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

<!--定義單元格></table>創(chuàng)建表單表單：是瀏覽器用來收集用戶的信息，實現(xiàn)與用戶交互的場所。表單的處理過程：當(dāng)用戶單擊提交按鈕時，輸入在表單中的信息就會上傳到服務(wù)器中，然后由服務(wù)器的有關(guān)程序進行處理，處理后將用戶提交的信息存儲在服務(wù)器端的數(shù)據(jù)庫中，或者將有關(guān)信息返回到瀏覽器上。表單FORM的語法：<formaction=活動method=方法>各種表單域……<inputtype=submit><inputtype=reset></form>表單的發(fā)送方法：決定表單的輸入如何發(fā)送到服務(wù)器get方法（缺省值）：把表單信息合并成一個字符串放在“action”所規(guī)定的URL的末尾發(fā)送給服務(wù)器。post方法：將表單數(shù)據(jù)作為http請求的一部分，表單輸入在請求體中。創(chuàng)建表單表單的輸入域input語法：<inputtype=類型name="名稱">其中：type為輸入框的類型，name用來命名該輸入框。type類型：text（單行文本框）：用戶可以在其中輸入字符或者單行文本。value屬性：設(shè)置初始時顯示在文本域中的文本，但是用戶可以更改這些文本。size屬性：設(shè)置文本域的寬度（字符為單位）例2_10password（密碼域）：與文本域不同的是輸入文本時，以"*"顯示。textarea（文本區(qū)）：可以輸入多行文本?？梢允褂胷ows和cols屬性來設(shè)置文本區(qū)域的行數(shù)和字符寬度。創(chuàng)建表單checkbox（復(fù)選框）：一般以分組的形式出現(xiàn)，具有相同name屬性的復(fù)選框?qū)儆谙嗤慕M。默認(rèn)時不被選中。為了在初始時將復(fù)選框標(biāo)記為選中，可以使用checked屬性。當(dāng)數(shù)據(jù)被傳到服務(wù)器時，value屬性用來幫助識別相應(yīng)的復(fù)選框。radio（單選框）：具有相同name屬性的單選框?qū)儆谙嗤慕M。選項互斥。創(chuàng)建表單submit（提交按鈕）：用來在點擊時將數(shù)據(jù)發(fā)送出去處理。value屬性值為按鈕提供了文本。reset（重置按鈕）：清除所有的文本域并且將所有其它的表單元素復(fù)位到相應(yīng)的默認(rèn)值。button（按鈕）：定義了一個用于客戶端編程的按鈕。"value"給出了按鈕的文本標(biāo)簽，"onclick"事件通常用于定義按鈕被激活時所采取的行為。<inputtype=buttonvalue="ChangeCase"onClick=window.open…………">hidden（隱藏域）：允許我們在表單中包含數(shù)據(jù)，但又不向用戶顯示。這在跨越幾個HTML文檔的表單應(yīng)用中特別有用。用戶的輸入可以被隱藏<input>從一個表單送到另一個表單。注：域的隱藏是指它不在瀏覽器中顯示出來，但是任何人還是可以通過查閱HTML文檔的源文件來找到隱藏域的。塊級元素的使用DIV：定義了一個通用塊級容器，使作者能夠為塊的內(nèi)容提供樣式或語言的信息。SPAN：在段和行內(nèi)元素中，文本級的<SPAN>就相當(dāng)于<DIV>。塊級元素的使用address：為文檔提供聯(lián)系信息。包括文檔維護者的名字、連向該維護者主頁的鏈接、E-mail地址、通信地址和電話號碼等。所有這些信息都將使用戶可以方便地與文檔維護者聯(lián)系。塊級元素的使用應(yīng)用中劃線<strike>：標(biāo)記插入和刪除文字<ins>標(biāo)記用于在原文中插入文字。<del>標(biāo)記用于在原文中刪除文字。塊級元素的使用

pre（預(yù)排版）的使用瀏覽器遇到HTML中幾個連續(xù)的空格字符，會刪去其它空格而只保留一個空格的位置。使用<pre>可維持鍵入的空格數(shù)。包含在pre標(biāo)記中的字符會按照HTML源碼的格式輸出到瀏覽器上。組件的使用JavaApplet的使用語法：<appletcode=""></applet>Marquee的使用語法：<marquee>xx</marquee>效果：xx會從屏幕一邊跑到另外一邊。組件的使用Embed的使用

溫馨提示

  • 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)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論