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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第二章靜態(tài)網頁設計靜態(tài)網頁設計全文共32頁，當前為第1頁。學習要求

掌握HTML的基本概念掌握HTML的框架及其基本元素靜態(tài)網頁設計全文共32頁，當前為第2頁。學習重點表格（table）標簽的使用表單（form）的使用Html結合腳本語言的一些常用小技巧靜態(tài)網頁設計全文共32頁，當前為第3頁。HTML-Internet中的語言

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

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

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

HTML編輯器記事本（以html或htm作為文件擴展名保存）可視化網頁編輯器MicrosoftFrontPage2000MacromediaDreamweaver靜態(tài)網頁設計全文共32頁，當前為第7頁。HTML組成

標記

<></>元素（標簽）屬性靜態(tài)網頁設計全文共32頁，當前為第8頁。構建網頁框架

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>靜態(tài)網頁設計全文共32頁，當前為第9頁。<html></html>：標識網頁的開始和結束<head><title></title></head>：頭部字段包含一些不出現在瀏覽器中的網頁信息（除了不可缺省的<title>元素）注：<title>標記用以區(qū)別網頁，當網頁載入瀏覽器之后，其標題出項在標題域中。

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

控制文本顯示的常用標記：換行標記<br>：標記后的正文不另起一行，顯示效果上另起一行。段落標記<p>：標記后面的正文將另起一段。<p>的唯一屬性是align，用以調準文字位置（left，center，right）。添加標題<h1><h2><h3><h4><h5><h6>：所有的標題均以粗體顯示。不同的標記代表不同的標題尺寸：<h1>最大，<h6>最小。標題標記也包含align屬性，使標題文字在水平方向對齊。靜態(tài)網頁設計全文共32頁，當前為第11頁。創(chuàng)建文本

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

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

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

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

<th></th>

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

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

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

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

溫馨提示

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

評論

0/150

提交評論