第三講網(wǎng)頁制作基礎(chǔ)_第1頁
第三講網(wǎng)頁制作基礎(chǔ)_第2頁
第三講網(wǎng)頁制作基礎(chǔ)_第3頁
第三講網(wǎng)頁制作基礎(chǔ)_第4頁
第三講網(wǎng)頁制作基礎(chǔ)_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計

1.建立第一個頁面2.文字與段落排版 3.超鏈接4.圖像5.表格 6.框架7.表單

網(wǎng)頁制作基礎(chǔ)4.1.2XHTML的優(yōu)點

XHTML1.0作為一種語言，它的內(nèi)容既符合XML，并且如果依照一些簡單的指導(dǎo)方針，也能被HTML4.0用戶代理程序識別。開發(fā)者將它們的文檔移植成為XHTML1.0，會得到以下好處。

1．XHTML文檔遵從XML標準XHTML文檔遵從XML標準，用標準的XML工具很容易查看、編輯和檢驗它們。XHTML文檔可以在現(xiàn)有的HTML4.0代理用戶程序中使用，也可以在新的XHTML用戶代理程序中使用，在后者中使用可以達到與前者同樣或更好的效果。

2．在XHTML文檔中可使用更多的應(yīng)用程序XHTML文檔中使用的應(yīng)用程序（如Script和Applet）可以是HTML的文檔對象模型DOM（DocumentObjectModel），也可以是XML的文檔對象模型。4.1XHTML簡介4.1.3XHTML代碼規(guī)范1．所有的標記都必須有一個相應(yīng)的結(jié)束標記以前在HTML中，用戶可以打開許多標簽，如<p>，而不一定寫對應(yīng)的</p>來關(guān)閉它們，但在XHTML中這是不合法的。XHTML要求有嚴謹?shù)慕Y(jié)構(gòu)，所有標簽必須關(guān)閉。如果是單獨不成對的標簽，則在標簽最后加一個“/”來關(guān)閉它，例如，<br/><imgheight="80"alt="網(wǎng)頁設(shè)計師"src="../images/logo_w3cn.gif"width="200"/>2．所有標簽的元素和屬性的名字都必須使用小寫XHTML對大小寫是敏感的，<title>和<TITLE>是不同的標簽。XHTML要求所有的標簽和屬性的名字都必須使用小寫字母。例如，<BODY>必須寫成<body>。大小寫夾雜也是不被認可的，通常在Dreamweaver中自動生成的屬性名onMouseOver也必須修改成onmouseover。4.1XHTML簡介4.1.3XHTML代碼規(guī)范3．所有的標記都必須合理嵌套同樣，因為XHTML要求有嚴謹?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序嵌套，例如，以前用戶可以這樣編寫的代碼：<p><b></p>/b>但按照XHTML要求必須修改為：<p><b></b>/p>就是說，一層一層的嵌套必須是嚴格對稱的。4．所有的屬性必須用引號括起來在HTML中，用戶可以不用給屬性值加引號“"”，但是在XHTML中，它們必須被加引號。例如，在HTML中可寫為：<inputname=guitartype=checkboxvalue=guitar>而按照XHTML要求必須修改為：<inputname="guitar"type="checkbox"value="guitar"/>4.1XHTML簡介4.1.3XHTML代碼規(guī)范

5．特殊符號“<”、“>”和“&”用編碼表示小于（<）號，不是標簽一部分的，必須被編碼為<；大于（>）號，不是標簽一部分的，必須被編碼為>；（&）號，不是實體的一部分的，必須被編碼為&。

6．每個屬性必須賦值

XHTML規(guī)定所有屬性都必須有一個值，沒有值的就重復(fù)本身。例如：<tdnowrap><inputtype="checkbox"name="shirt"value="medium"checked>按照XHTML要求必須修改為：<tdnowrap="nowrap"><inputtype="checkbox"name="shirt"value="medium"checked="checked"/></td>

7．不要在注釋內(nèi)容中使用“--”

“--”只能出現(xiàn)在XHTML注釋的開頭和結(jié)束位置。4.1XHTML簡介

1.標記XHTML文檔由標記和被標記的內(nèi)容組成。標記（tag）能產(chǎn)生所需的各種效果。格式為：

<標記>受標記影響的內(nèi)容</標記>例如，標題標記<title>表示為：

<title>我的第一個網(wǎng)頁</title>需要注意以下3點。①每個標記都要用“<”（小于號）和“>”（大于號）括起來，如<p>，<table>，以表示這是XHTML代碼而非普通文本?！?lt;”、“>”與標記名之間不能留有空格或其他字符。②在標記名前加上符號“/”便是其結(jié)束標記，表示該標記內(nèi)容的結(jié)束，如</h1>。標記也有不用</標記>結(jié)尾的，稱之為單標記。③Dreamweaver8中文版中，標記被翻譯為標簽。

4.2XHTML文檔的基本結(jié)構(gòu)4.2.1標記及其屬性2.標記的屬性

標記只是規(guī)定這是什么信息，或是文本，或是圖片，但怎樣顯示或控制這些信息，就需要在標記后面加上相關(guān)的屬性來表示，每個標記有一系列的屬性。格式為：<標記屬性1="屬性值1"屬性2="屬性值2"…>受影響的內(nèi)容</標記>例如，一級標題標記<h1>有屬性align，align表示文字的對齊方式，表示為：<h1align="left">歡迎！</h1>4.2XHTML文檔的基本結(jié)構(gòu)4.2.1標記及其屬性

XHTML文檔是一種純文本格式的文件，XHTML文檔的基本結(jié)構(gòu)為：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>網(wǎng)頁的標題</title></head><body>網(wǎng)頁的內(nèi)容</body></html>【例4-1】

4.2XHTML文檔的基本結(jié)構(gòu)

4.2.2XHTML的基本結(jié)構(gòu)【說明】①結(jié)構(gòu)的第1、2行代碼稱為DOCTYPE聲明，DOCTYPE是documenttype（文檔類型）的簡寫，用來聲明使用的XHTML是什么版本。DOCTYPE必須為大寫。其中的DTD叫做文檔類型定義，里面包含了文檔的規(guī)則。瀏覽器根據(jù)定義的DTD來解釋頁面的標記，并顯示出來。要建立符合標準的網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分。DOCTYPE聲明必須放在每一個XHTML文檔的最頂部，在所有代碼和標記之前。4.2XHTML文檔的基本結(jié)構(gòu)

4.2.2XHTML的基本結(jié)構(gòu)【說明】②結(jié)構(gòu)的第3行的作用是聲明網(wǎng)頁使用的名字空間。“xmlns”是XHTMLnamespace的縮寫，稱為“名字空間”。由于XHTML是HTML向XML過渡的標記語言，它需要符合XML文檔規(guī)則，因此也需要定義名字空間。又因為XHTML1.0不能自定義標記，所以它的名字空間都相同，就是/1999/xhtml。③第5行定義語言編碼。為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言。一般使用gb2312（簡體中文）。4.2XHTML文檔的基本結(jié)構(gòu)

4.2.2XHTML的基本結(jié)構(gòu)用最簡單的“記事本”來編輯網(wǎng)頁。①打開記事本。單擊Windows的“開始”按鈕，在“程序”菜單中的“附件”子菜單中單擊“記事本”。②創(chuàng)建新文件，并按HTML語言規(guī)則編輯。在“記事本”窗口中輸入HTML語言，輸入的內(nèi)容。③保存網(wǎng)頁。打開“記事本”的“文件”菜單，選擇“保存”。此時將出現(xiàn)“另存為”對話框，在“保存在”下拉列表框中選擇文件要存放的路徑；在“文件名”文本框輸入以.html或.htm為后綴的文件名，如welcome.html；在“保存類型”下拉列表框中選擇“文本文檔”。最后單擊“保存”按鈕，將記事本中的內(nèi)容保存在磁盤中。

如果希望這一頁是網(wǎng)站的首頁（主頁），想讓瀏覽者輸入網(wǎng)址后，就顯示這一頁的內(nèi)容，可以把這個文件設(shè)為默認文檔，文件名為index.html或index.htm。4.3網(wǎng)頁文件的創(chuàng)建過程

4.3.1編輯和保存網(wǎng)頁

通過編輯可以得到一個.html文件，要想使這個文檔顯示出網(wǎng)頁的樣子，就要使用瀏覽器進行預(yù)覽。有兩種方法可以打開.html網(wǎng)頁文件。1.用瀏覽器打開

網(wǎng)頁在瀏覽后會有不滿意的地方，此時可重新在“記事本”中打開該.html文件修改；或者在瀏覽器中直接打開源文件（在IE中，從“查看”菜單中的“源文件”中打開）。修改后，單擊“文件”菜單中的“保存”命令。如果瀏覽器沒有關(guān)閉，要在瀏覽器中看到修改后的效果，不必重新打開該文件，直接單擊瀏覽器工具欄上的“刷新”按鈕。2.在“Windows資源管理器”或“我的電腦”中打開在“Windows資源管理器”或“我的電腦”中雙擊要打開的.html文件，這時將直接在默認的瀏覽器中打開該.html文件。

4.3建立第一個頁面4.3.2預(yù)覽網(wǎng)頁

注釋標記的格式為：<!--注釋內(nèi)容-->注釋并不局限于一行，長度不受限制。結(jié)束標記與開始標記可以不在一行上。

2強制換行和不換行標記<br/>、<nobr>...</nobr>要用HTML的標記來強制換行、分段。<br>放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強制文本換行。強制換行標記的格式為：文字<br/>不換行標記可令文字不能因太長使瀏覽器無法顯示而換行，它對住址、數(shù)學(xué)公式、一行數(shù)字等尤其有用。其格式為：<nobr>文字</nobr>

4.4文字與段落排版1注釋標記<!--...-->

段落標記放在一個段落的頭尾，用于定義一個段落。<p>...</p>標記不但能使后面的文字換到下一行，還可以使兩段之間多一空行，相當(dāng)于兩個<br/><br/>標記。段落標記的格式為：<palign="left|center|right">文字</p>一個段落標記<p>可以看作是兩個<br/>標記，即<br/><br/>。其中屬性align用來設(shè)置段落文字在網(wǎng)頁上的對齊方式：left（左對齊）、center（居中）和right（右對齊）。缺省時默認為left。格式中的“|”表示“或者”，即多中選一。4.4段落標記3段落標記<p>...</p>

設(shè)定文字、圖像、表格的擺放位置。當(dāng)在許多段落中設(shè)置對齊方式時，常使用<div>…</div>標記。定位標記的格式為：<divalign="left|center|right">文本、圖像或表格</div>其中屬性align用來設(shè)置文本塊、一段文字或標題在網(wǎng)頁上的對齊方式：left、center和right。缺省時默認為left。4.4段落標記4定位標記<div>…</div>

在頁面中插入一條水平標尺線，可以使不同功能的文字分隔開，看起來整齊、明了。當(dāng)瀏覽器解釋到HTML文檔中的<hr/>標記時，會在此處換行，并加入一條水平線段。線段的樣式由標記的參數(shù)決定。水平線標記的格式為：<hralign="left|center|right"size="橫線粗細"width="橫線長度"color="橫線色彩"noshade/>

size設(shè)定線條粗細，以像素為單位，默認為2。width設(shè)定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當(dāng)前窗口的百分比）。

color設(shè)定線條色彩，默認為黑色?？梢圆捎蒙实拿Q。色彩可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個十六進制數(shù)代碼來表示。4.4段落標記5水平線標記<hr/>

【例4-2】本例文件ex4-2.htm在瀏覽器中的顯示效果如圖4-4所示。4.4段落標記6．段落標記綜合實例圖4-4段落標記綜合實例【例4-2】

超鏈接（Hyperlink）是網(wǎng)頁互相聯(lián)系的橋梁，超鏈接可以看作是一個“熱點”，它可以從當(dāng)前網(wǎng)頁定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁的某個位置、Internet或本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。瀏覽網(wǎng)頁是超鏈接最普遍的一種應(yīng)用，通過超鏈接還可以獲得不同形態(tài)的服務(wù)，如文件傳輸、資料查詢、電子郵件、遠程訪問等。當(dāng)網(wǎng)頁包含超鏈接時，網(wǎng)頁中的外觀形式為彩色（一般為藍色）且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標指針指向超鏈接的顯示文本或圖片時，將變成手形。超文本鏈接使用錨點標記<a>來定義。

4.5超鏈接

錨點（anchor）標記由<a>定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個詞、句或圖片，可從此處轉(zhuǎn)到另一個鏈接資源（目標資源），這個目標資源有惟一的地址（URL）。具有以上特點的詞、句或圖片就稱為熱點。<a>標記的格式為：<ahref="URL"target="打開窗口方式">熱點</a>href屬性為超文本引用，它的值為一個URL，是目標資源的有效地址。如果要創(chuàng)建一個不鏈接到其他位置的空超鏈接，可用“#”代替URL，即<ahref="#">熱點</a>。target屬性設(shè)定鏈接被單擊后結(jié)果所要開始窗口的方式?？蛇x值為：_blank，_parent，_self，_top。

4.5超鏈接1錨點標記<a>...</a>(1)

鏈接到同一目錄內(nèi)的網(wǎng)頁文件鏈接到同一目錄內(nèi)的網(wǎng)頁文件的格式為：<ahref="目標文件名.html">熱點文本</a>(2)鏈接到下一級目錄中的網(wǎng)頁文件鏈接到下一級目錄中網(wǎng)頁文件的格式為：

<ahref="子目錄名/目標文件名.html">熱點文本</a>(3)鏈接到上一級目錄中的網(wǎng)頁文件鏈接到上一級目錄中網(wǎng)頁文件的格式為：<ahref="../目標文件名.html">熱點文本</a>其中“../表示退到上一級目錄中。(4)鏈接到同級目錄中的網(wǎng)頁文件鏈接到同級目錄中網(wǎng)頁文件的格式為：<ahref="../子目錄名/目標文件名.html">熱點文本</a>

4.5超鏈接2指向其他頁面的鏈接

要在當(dāng)前頁面內(nèi)實現(xiàn)超鏈接，需要定義兩個標記：一個為超鏈接標記，另一個為書簽標記。超鏈接標記的格式為：<ahref="#記號名">熱點文本</a>書簽就是用<a>標記對該文本作一個記號。格式為：<aname="記號名">目標文本附近的字符串</a>如果要建立指向其他頁面某處的文本，格式為：<ahref="URL#記號名">熱點文本</a>要在跳轉(zhuǎn)到的位置處加上鏈接標記：<aname="記號名">文字串</a>如果鏈接指向其他文件的某一部分，格式為：<ahref="目標文件路徑/文件名#記號名">熱點文本</a>4.5超鏈接3指向本頁中的鏈接

如果鏈接到的文件不是HTML文件，則該文件將作為下載文件，其格式為：<ahref="下載文件名">熱點文本</a>5指向電子郵件的鏈接

單擊指向電子郵件的鏈接，將打開缺省的電子郵件程序，如FoxMail、OutlookExpress，并自動填寫郵件地址。指向電子郵件鏈接的格式為：<ahref="mailto:E-mail地址">熱點文本</a>

例如，E-mail地址是goodlook@，建立如下鏈接：免費電話:80012345678信箱:<ahref="mailto:goodlook@">goodlook@</a>4.5超鏈接4指向下載文件的鏈接（1）設(shè)置背景色格式為：<bodybgcolor="色彩值">“色彩值”可以為色彩的英文名或相應(yīng)十六進制值。（2）用圖片作為背景使用<body>標記的background屬性，可為網(wǎng)頁鋪上背景圖片。格式為：<bodybackground="圖片文件名">background取值為一個圖片文件名，并且要指出文件存放的路徑，可以是相對路徑，也可以是絕對路徑。圖片文件可為GIF格式或JPEG格式的文件。在瀏覽器中，作為背景的圖片將按原來的大小復(fù)制，重復(fù)鋪滿整個網(wǎng)頁。4.6圖像1網(wǎng)頁的背景

使用圖片標記，可以把一幅圖片加入到網(wǎng)頁中。用圖片標記還可以設(shè)置圖片的替代文本、尺寸、布局等屬性。圖片標記的格式為：<imgsrc="圖片文件名"alt="簡單說明"width="圖片寬度"height="圖片高度"border="邊框?qū)挾?hspace="水平方向空白"vspace="垂直方向空白"align="環(huán)繞方式|對齊方式“/>

如果不設(shè)定圖片的尺寸，圖片將按照其本身的大小顯示。可使用<img>標記的width和height屬性來設(shè)置圖片的大小。width和height屬性的屬性值可取像素數(shù)，也可取百分數(shù)。4.6圖片2圖片標記<img>

如果不設(shè)置文本對圖片的環(huán)繞，圖片在頁面會占一片空白。利用<img>標記的屬性，可以使文本環(huán)繞圖片。使用該標記設(shè)置文本環(huán)繞方式后，將一直有效，直到遇到下一個設(shè)置標記。如果想取消文本環(huán)繞圖片，可使用<brclear>標記，其后的文本將不再環(huán)繞圖片。格式為：<brclear="left|right|all">其中clear的取值可為：left（解除在圖片左側(cè)放置的文本）、right（解除在圖片右側(cè)放置的文本）或all（解除在圖片左、右側(cè)放置的文本）。4.6圖片2圖片標記<img>

圖片也可作為熱點，單擊圖片則跳轉(zhuǎn)到被鏈接的文本或其他文件。格式為：<ahref="URL"><imgsrc="圖片文件名"></a>例如，下面代碼：<ahref="vb_book.html"><imgsrc="vb.jpg"alt="VB封面"width="140"height="190"hspace="10"vspace="5“/></a>4.6圖片3用圖片作為熱點

最簡單的表格僅包括行和列。表格的標記為<table>，行的標記為<tr>，表項的標記為<td>。格式為：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><tr><th>表頭1</th><th>表頭2</th><th>…</th><th>表頭n</th><tr><td>表項1</td><td>表項2</td><td>…</td><td>表項n</td>…<tr><td>表項1</td><td>表項2</td><td>…</td><td>表項n</td></table>4.7表格

1簡單表格

在缺省下，表項居于單元格的左端?？捎昧?、行的屬性設(shè)置表項數(shù)據(jù)在單元格中的位置。(1)水平對齊表項數(shù)據(jù)的水平對齊用標記<th>、<td>和<tr>的align屬性。align的屬性值分別為：center（表項數(shù)據(jù)的居中）、left（左對齊）、right（右對齊）或justify（左右調(diào)整）。(2)垂直對齊

表項數(shù)據(jù)的垂直對齊用標記<th>、<td>和<tr>的valign屬性。valign的屬性值分別為：top（靠單元格頂）、bottom（靠單元格底）、middle（靠單元格中）或baseline（同行單元數(shù)據(jù)項位置一致）。4.7表格

2表格內(nèi)文字的對齊方式

前面介紹的是表格中的各個單元格的屬性?，F(xiàn)在，把表格作為一個整體，介紹表格在頁面中的位置及背景的設(shè)置。與圖片一樣，表格在瀏覽器窗口中的位置也有三種：居左、居中和居右。使用<table>標記的align屬性。格式為：<tablealign="left|center|right">當(dāng)表格位于頁面的左側(cè)或右側(cè)時，文本填充在另一側(cè)。當(dāng)表格居中時，表格兩邊沒有文本。當(dāng)align屬性缺省時，文本在表格的下面。4.7表格

3表格在頁面中的對齊方式

在<table>、<th>、<tr>、<td>標記中，使用下面屬性可以改變表格的背景和邊框的色彩、添加背景圖片，也可以為行和單元格改變色彩、添加背景圖片。

bgcolor=""色彩或色彩值" 設(shè)置背景色彩background="圖片文件名" 設(shè)置背景圖片bordercolor="色彩" 設(shè)置表格邊框的色彩bordercolorlight="色彩" 設(shè)置表格邊框亮部的色彩rules="row,cols或none" 設(shè)置表內(nèi)線的顯示方法，none為無內(nèi)線如果把屬性放到<table>中，其作用范圍為整個表格，如果把屬性放到<th>中，則作用范圍為整個行，如果把屬性放到<tr>、<td>中，則作用范圍為該單元格。

4.7表格

4表格的色彩和圖片背景

網(wǎng)頁上具有可輸入表項及項目選擇等控制所組成的欄目稱為表單。在網(wǎng)頁中，通過表單交流和反饋信息。格式為：

<formname="表單名"action="URL"method="get|post"><inputtype="表項類型"name="表項名"value="缺省值"size="x"maxlength="y“/>…</form>name屬性:表單的名字，在一個網(wǎng)頁中用于惟一識別一個表單action屬性:表單處理的方式，往往是E-mail地址或網(wǎng)址method屬性:表單數(shù)據(jù)的傳送方向，是獲得（GET）表單還是送出（POST）表單4.9表單

1表單的標記<form>...</form>

使用<input>標記的type屬性，可以在表單中加入表項，并控制表項的風(fēng)格。type屬性值為text，則輸入的文本以標準的字符顯示；type屬性值為password，則輸入的文本顯示為“*”。在表項前應(yīng)加入表項的名稱，如“您的姓名”等，以告訴瀏覽者在隨后的表項中輸入的內(nèi)容。4.9表單

2文字和密碼的輸入

如果瀏覽者想清除輸入到表單中的全部內(nèi)容，可以使用<input>標記中的type屬性所設(shè)的重置（reset）按鈕，當(dāng)瀏覽者完成表單的填寫，想要發(fā)送時，可使用<input>標記的屬性type所設(shè)的提交（submit）按鈕，將

溫馨提示

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

評論

0/150

提交評論