網(wǎng)頁設計教學PPT_第1頁
網(wǎng)頁設計教學PPT_第2頁
網(wǎng)頁設計教學PPT_第3頁
網(wǎng)頁設計教學PPT_第4頁
網(wǎng)頁設計教學PPT_第5頁
已閱讀5頁，還剩59頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第二章網(wǎng)頁設計語言HTMLHTML基礎知識頁面基本信息和布局文本修飾超文本鏈接表格圖像表單多媒體什么是HTML？

HTML是HyperTextMarkupLanguage的英文縮寫，翻譯為“超文本標識語言”。它是一種用來制作超文本文檔的簡單標記語言，是WWW上描述網(wǎng)頁內(nèi)容和外觀的標準。HTML是一種標識語言，由一些編碼和標注組成，對網(wǎng)頁的行為作出說明，允許Web瀏覽器解釋它們，以便于理解。HTML如何表示呢？<html><head><title>table示例</title></head><body><tableborder=1><tr><td>第一列</td><td>第二列</td></tr></table></body></html>

HTML包含了一對打開和關閉的標記，在當中并有屬性和值。標記描述了每個網(wǎng)頁上的元素，例如文本段落、表格、或者圖像等。返回例如HTML代碼：

<H1align=“l(fā)eft”>歡迎!</H1><H1>……</H1>標記是描述文本顯示大小。（其中</H1>表示標記結束）其中align=“l(fā)eft”是設置文本顯示的對齊方式，它是這個標記的屬性和值。HTML的特點應用的簡易性可以使用任何一種文字處理工具；語法規(guī)則比其他編程語言簡單的多。功能的強大性幾乎能夠完成所有的設計工作。兼容性幾乎每個軟件都提供了HTML視圖模式。HTML的功能可以設計遠程服務表單，用于商務網(wǎng)頁中的信息檢索和商品訂購等；可以定義標題、文字、表格、列表、圖像、聲音和影視文件等網(wǎng)頁中的各類元素；通過超鏈接功能可以將互聯(lián)網(wǎng)中不同頁面或頁面中的不同位置進行邏輯鏈接，以供用戶進行定位瀏覽；可以將互聯(lián)網(wǎng)上的不同資源進行鏈接，以實現(xiàn)資源共享。HTML文檔結構標記我們先來看一個標準的HTML文檔結構：<html><head><title>標題內(nèi)容</title></head><body>

主要內(nèi)容在這里！</body></html>將以上代碼在瀏覽器上發(fā)布，會是什么結果？在記事本中演示。HTML文檔結構它是以標簽（tag）來標識，而標簽本身則由“<”和“>”號標識，標簽內(nèi)的內(nèi)容稱為元素。絕大多數(shù)元素是由三部分組成的，即起始標記、內(nèi)容和結尾標記。元素的起始標記叫做起始鏈接簽(starttag)，元素結束標記叫做結尾鏈接簽(endtag)。在起始鏈接簽和結尾鏈接簽中間的部分是元素體，即元素內(nèi)容。

例子<bodybgcolor="blue"><p><b>歡迎進入E商網(wǎng)</b></p></body>說明：第一行<bodybgcolor=“blue”>是元素的起始鏈接簽，它表明元素從此開始。起始鏈接簽的形式為<元素名屬性名=屬性值>。第二行是body元素的元素體。第三行</body>是body元素的結尾鏈接簽。結尾鏈接簽的形式為</元素名>。HTML文檔結構<元素名>文件或超文本<／元素名>

<元素名屬性名＝“屬性值…>文本或超文本<／元素名>

<元素名>關于編寫HTML文檔的說明HTML標記包含在<>中，以區(qū)別于在頁面上顯示的文本。大多數(shù)HTML標記都成對出現(xiàn)，只有極少數(shù)單獨出現(xiàn)，例如，<BR>標記。HTML標記不區(qū)分大小寫。HTML文檔的擴展名為htm，也可以為html。HTML文檔是一個純文本的文檔，可以使用任何文本編輯器來編輯它，例如記事本。因為瀏覽器的差異，一些擴充的HTML標記在不同的瀏覽器上可能顯示的結果并不相同。頁面基本信息和布局一、HEAD元素格式：

<head>……</head>

標記說明：HEAD標記是頁面的第二層標記，用于包含頁面的標題信息。提示：

HEAD標記必須在BODY標記開始之前結束，即</head>必須放在<body>之前）。一、HEAD元素標題<title>網(wǎng)頁標題</title>基本屬性網(wǎng)頁的基本屬性通常利用meta（元信息），例如字符編碼、作者、版權和關鍵字等。（1）keywords<metaname=“keywords”content=“關鍵字具體內(nèi)容”>（2）description<metaname=“description”content=“網(wǎng)頁描述的具體內(nèi)容”>（3）refresh<metahttp-equiv=“refresh”content=“10;URL=index.htm”>(4)Content-Type<metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”>(5)Link,Base,Target,ID等等。Body元素及語法規(guī)則用于定義網(wǎng)頁的頁面信息，如背景、鏈接等。頁面顏色<bodybgcolor=#text=#link=#alink=#vlink=#>背景色彩非可鏈接文字的色彩可鏈接文字的色彩正被點擊的可鏈接文字的色彩已經(jīng)被點擊過的可鏈接文字的色彩#代表色彩值，可以用6位十六進制的數(shù)值表示，也可以用各種顏色的英文單詞表示。如下例所示：<bodybgcolor=“FF0000”><bodybgcolor=“red“>FFFFFF：白色white000000：黑色blackBody元素及語法規(guī)則設置網(wǎng)頁背景圖片<bodybackgroud=“image-URL”>設置頁面左邊的空白語法<bodyleftmargin=#>設置頁面上方的空白語法<bodytopmargin=#>#=marginamount，通常設置成默認值。

1、FONT標記標記的格式：

<fontface=“字體名稱1,字體名稱2,…字體名稱n,”size=“字號”color=“字體顏色”>…</font>標記說明：FONT標記是專門對文本進行設置的標記，該標記共有三個參數(shù)：face指定字體的名稱，可以設置一種，也可以設置多種，字體名稱之間用逗號隔開。Size參數(shù)指定字體的大?。ㄗ痔枺瑪?shù)值范圍在7~(-7)之間。Color參數(shù)用于指定文本的顏色。2、H標記P29標記的格式：<H1>文本內(nèi)容</H1>…….

<H6>文本內(nèi)容</H6>標記說明：實際H標記是一系列以H開頭的標記，使用H標記指定標記之間的文本的大小（共分為6級，數(shù)值越大字越小）。(專門用作標題)H標記有一個參數(shù)：align,它用于設置文本的對齊方式，取值為center(居中對齊)、left(左對齊)、right(右對齊)。<fontface="幼圓"size="7"color="#FF0000">e5</font>4、B標記、I標記、U標記、S標記這四個標記的格式為：

<B>文本</B><U>文本</U>

<I>文本</I><S>文本</S>標記說明：B標記用于將標記之間的文本設置成粗體。I標記用于將標記之間的文本設置成斜體。U標記用于將標記之間的文本加下劃線。S標記用于將標記之間的文本添加刪除線。list元素及語法規(guī)則

（1）無序列表<ul>

<li>列表內(nèi)容1<li>列表內(nèi)容2

</ul>（2）有序列表<ol>

<li>列表內(nèi)容1

<li>列表內(nèi)容2

</ol>例子<ol><li>財經(jīng)</li><li>體育<ul><li>足球</li><li>籃球</li><li>其它</li></ul></li><li>娛樂</li></ol>文字布局行控制<p>回車符，表示一個段落的結束，可以單獨使用，不用成對出現(xiàn)。<p>標記后面的正文將另起一段落。（演示）<br>換行符，僅表示另起一行，不表示段落的結束，也可以單獨使用。<br>標記后面的正文將另起一行。（演示）(2)

對齊<palign=#>...</p>其中#=left,center,right，分別表示左對齊，居中和右對齊。（演示）(3)預格式化所謂預格式化，就是保留文字在源代碼中的格式，頁面中顯示的和源代碼中的效果完全一致。瀏覽器在顯示其中的內(nèi)容時，會完全按照其真正的文本格式來顯示。例如原封不動地保留文檔中的空白，如空格、制表符等。<pre>…...</pre>

marquee元素及語法規(guī)則

滾動字幕是網(wǎng)頁中常用的文字特效，它通過marquee語句實現(xiàn)，具體的語法規(guī)則如下。<marqueedirection=#bihavior=#loop=#scrollamount=#scrolldelay=#bgcolor=#height=#width=#onmouseover=this.stop()onmouseout=this.start()>滾動文本內(nèi)容</marquee>表示滾動方向，包括left、right、up、down，如direction=up表示向上滾動。表示滾動方式，包括scroll、slide、alternate，分別為普通、一次性滑動和雙向交替式。

表示循環(huán)次數(shù)，默認的為無限循環(huán)，當把#值設置成-1時也表示無限循環(huán)。

表示一次滾動的距離表示兩次滾動之間的延遲，以毫秒為單位。

表示將鼠標放在字幕上時，停止?jié)L動，鼠標移開時繼續(xù)滾動。普通鏈接

<ahref="URL"target="Window_Name">……</a>說明：（1）href="URL"表示鏈接的目標文件。（2）target="Window_Name"目標文件的打開窗口，默認的是在當前窗口打開，在新窗口打開為target="_blank"。普通鏈接注意Ⅰ如果是內(nèi)部鏈接，則直接使用目標文件在網(wǎng)站中的相對地址。如果是外部鏈接，則一定要寫上協(xié)議名稱，如鏈接到網(wǎng)易，則語法為href=。Ⅱ如果將鏈接的地址設為mailto:電子郵件地址，則可通過單擊此鏈接自動調(diào)用計算機默認的電子郵件程序發(fā)送E-mail。書簽在網(wǎng)頁的不同位置定位，提高了瀏覽效果,書簽在DreamWeaver中也被稱為錨點。書簽在使用時，首先要定義書簽，然后再設置書簽鏈接。（1）定義書簽的語法<aname="書簽名稱">...</a>例如：<aname=“aaa”>導航</a>，意為將文本“導航”處設置名為aaa的書簽。書簽（2）書簽鏈接的語法<ahref="URL#書簽名稱">...</a>例如：<ahref=“index.htm#aaa”>返回導航處</a>

意為將文本“返回導航處”設置成鏈接，鏈接的目標位置為index.htm網(wǎng)頁中的書簽aaa處。如果是在本頁中進行書簽鏈接，則URL也可以省略，但#千萬不能丟掉。表格表格是網(wǎng)頁中常見的元素，設計者通常都使用表格進行網(wǎng)頁的布局定位，由此得到的網(wǎng)頁中的各元素顯得更整齊、更美觀。

主標題：表明了這個表格的主要內(nèi)容；表欄：

是表格中用來存放數(shù)據(jù)的矩形區(qū)域；表頭：

表示數(shù)據(jù)項所對應的名稱，

數(shù)據(jù)：

就是存放在表欄中的文字、數(shù)字和圖像等信息。

基本表格標記表格的始末標記為<table>…</table>，意為定義一個表格。其中表格的屬性在起始標記中設定，具體包括如下屬性。

屬性用途<tablebgcolor="">設置表格的背景色<tableborder="">設置邊框寬度，若不設置此屬性，則默認值為0<tablebordercolor="">設置邊框的顏色<tablebordercolorlight="">設置邊框明亮部分的顏色<tablebordercolordark="">設置邊框昏暗部分的顏色<tablecellspacing="">設置表格中單元格之間的距離<tablecellpadding="">設置表格中單元格邊框與其內(nèi)部內(nèi)容之間的距離<tablewidth="">設置表格寬度，單位用絕對像素值或總寬度的百分比<tablecols="">設置表格的列數(shù)<tablerows="">設置表格的行數(shù)<tablealign=left/right/center>設置表格的對齊方式以上各個屬性的設定可以結合使用，如<tablebgcolor=“#00FFFF”border=0width=“100%”>，指將表格背景色設置成淺藍色，不顯示邊框，表格寬度占滿整個頁面。

<tr></tr>、<td></td>標記對

<tr></tr>標記對：用來創(chuàng)建表格中的每一行。此標記對只能放<table></table>標記對之間使用，而在此標記對之間加入文本將是無用的；<td></td>標記對：用來創(chuàng)建表格中一行中的每一個單元格，此標記對也只有放在<tr></tr>標記對之間才是有效的，用戶想要輸入的文本也只有放在<td></td>標記對中才能夠顯示出來。align是水平對齊方式，取值為left(左對齊)、center(居中)、right(右對齊)；valign是垂直對齊方式，取值為top(靠頂端對齊)、middle(居中間對齊)或bottom(靠底部對齊)；<td>具有width、colspan、rowspan和nowrap屬性。width是單元格的寬度，單位用絕對像素值或總寬度的百分比，colspan表示設置一個單元格跨占的列數(shù)(缺省值為1)，rowspan表示設置一個單元格跨占的行數(shù)(缺省值為1)，nowrap表示禁止單元格內(nèi)的內(nèi)容自動斷行。

<tr></tr>、<td></td>標記對

<th></th>標記對

<th></th>標志對用來設置表頭，通常是黑體居中文字。<caption></caption>

用于設置表格的標題，即表格上方顯示的內(nèi)容。2.5.6.實例圖像的基本語法<imgsrc=#alt=#align=top/middle/bottom/left/right/border=#class=typeid=Valuename=valueborder=nheight=nwidth=nhspace=nvspace=n>⑴src：規(guī)定插入圖像的url地址及文件名；⑵align：指定圖像的位置是靠左、靠右、居中、靠上或者是靠底。默認情況下是靠上，align=top；⑶class和id：分別指定圖像所屬的類型和圖像的id號；⑷name：設定圖像的標題。⑸alt：設定圖像的替代字，主要用于在瀏覽器還沒有裝入圖像（或關閉圖像顯示）的時候，先顯示有關此圖像的替代字；⑹border：設定圖片的邊框。；⑺height和width：分別用于指定圖像的高度和寬度；⑻hspace和vspace：分別用于設定圖像的左右邊框大小和上下邊框大小。

圖像熱點

把圖像劃分成多個作用區(qū)域，并鏈接到不同網(wǎng)頁的標記，那就是<area>地圖作用區(qū)域標記。標記主要用于圖像地圖，通過該標記可以在圖像地圖中設定作用區(qū)域（又稱為熱點）<areaclass=typeid＝Valuehref＝urlalt＝textshape＝area-shapecoods＝value>

class和id是分別指定熱點的類型和id號。用于設定熱點的替代性文字用于設定該熱點所鏈接的url地址shape和coords：是兩個主要的參數(shù)，用于設定熱點的形狀和大小。1、<areashape="rect"coords="x1,y1,x2,y2"href=url>表示設定熱點的形狀為矩形，左上角頂點坐標為（x1,y1），右下角頂點坐標為（x2,y2）。

2、<areashape="circle"coords="x1,y1,r"href=url>

表示設定熱點的形狀為圓形，圓心坐標為（x1,y1），半徑為r。3、<areashape="poligon"coords="x1,y1,x2,y2......"href=url>

表示設定熱點的形狀為多邊形，各頂點坐標依次為（x1,y1）、（x2,y2）、（x3,y3）......。表單

<form></form>用來創(chuàng)建一個表單，具有action、method和target屬性；action的值是處理程序的程序名(包括網(wǎng)址或相對路徑)；method屬性用來定義處理程序從表單中獲得信息的方式，可取值為GET和POST的其中一個；target屬性用來指定目標窗口或目標幀。<inputtype="…"name="…">用來定義一個用戶輸入?yún)^(qū)，用戶可在其中輸入信息。此標志必須放在<form></form>標志對之間。共提供了八種常見的輸入?yún)^(qū)域，分別為text,password,checkbox,radio,image,hidden,submit,reset；八種類型的輸入?yún)^(qū)域有一個公共的屬性name，此屬性用于定義每一個輸入?yún)^(qū)域的名稱。value屬性是另一個公共屬性，它可用來指定輸入?yún)^(qū)域的缺省值。表單

1）單行文本框和密碼框

單行文字框的標志如下：<inputtype=textname=""size=""maxlength=""value="">密碼框的標志如下：<inputtype=passwordname=""size=""maxlength=""value="">例2.5在網(wǎng)頁的html狀態(tài)下輸入如下語言。<form><p>姓名：<inputtype="text"name="姓名"size="20"value="請在此處輸入您的姓名"></p><p>密碼：<inputtype="password"name="密碼"size="20"></p></form>單選框和復選框

單選框的語法如下：<inputtype=radiovalue=""checkedname="">復選框的語法如下：<inputtype=checkboxvalue=""checkedname="">例2.6

<form><p>性別：男<inputtype="radio"value="男"checkedname="性別">女<inputtype="radio"name="性別"value="女"></p><p>興趣愛好：電影<inputtype="checkbox"name="C1"value="電影">  旅游<inputtype="checkbox"name="C2"value="旅游">  音樂<inputtype="checkbox"name="C3"value="音樂">   體育<inputtype="checkbox"name="C4"value="體育"></p></form>3）隱藏域

<inputtype=hiddenvalue=*>

4）圖像

<inputtype=imagesrc=url>

5）按鈕表單中的按鈕通常有三種類型，分別為提交、重置和一般按鈕。①提交按鈕表示將表單內(nèi)容提交給服務器，語句為<inputtype="SUBMIT">。②重置按鈕表示將表單內(nèi)容全部清除,重新填寫，語句為<inputtype="RESET">。③一般按鈕可以設置特殊指令，實現(xiàn)特殊效果，如下語句。<inputtype="button"name="謝謝"value="點我試試"onclick="alert('謝謝點擊')">

列表框

<select></select>標記對用來創(chuàng)建一個下拉列表框或可以復選的列表框。此標記對用于<form></form>標記對之間。multiple屬性不用賦值，直接加入標志中即可使用，加入了此屬性后列表框就成了可多選式列表。若沒有設置multiple屬性，顯示的將是一個彈出式的列表框。name是此列表框的名字。size屬性用來設置列表的高度，缺省時值為1。<option>標記

用來指定列表框中的一個選項，它放在<select></select>標志對之間。Selected屬性：用來指定默認的被選項；value屬性：用來給<option>指定的某一個選項賦值，這個值是要傳送到服務器上的，服務器正是通過調(diào)用<select>區(qū)域的選項的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項。例2.7

<form><selectsize="1"name="下拉菜單"><optionvalue="北京大學"selected>北京大學</option><option>清華大學</option><option>南開大學</option><option>天津大學</option></select></form>例2.8

<form>

<selectsize="1"name="下拉菜單"multiple><optionvalue="北京大學"selected>北京大學</option><option>清華大學</option><option>南開大學</option><option>天津大學</option></select></form>多行文本框

語法為<textarea></textarea>，此標記對用于<form></form>標記對之間。<textarea>具有name、cols和rows屬性。cols和rows屬性分別用來設置文本框的列數(shù)和行數(shù)，這里列與行是以字符數(shù)為單位的。例2.9

<form><p>意見欄：</p><p><textarearows="10"name="意見欄"cols="20">您的意見對我們很重要</textarea></p></form>多媒體多媒體的種類多媒體文件多為音樂、視頻、動畫等，其中音樂主要屬于REAL、AU、MIDI文件格式；WAV文件屬于波形原始聲音文件，體積相對較大，盡量不要使用；MP3文件屬于壓縮文件，不同的軟件其兼容性不盡相同，使用時應該注意；MIDI屬于合成音樂，體積較小，在網(wǎng)頁中應用較為廣泛；

溫馨提示

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

評論

0/150

提交評論