第七章HTML語(yǔ)言的編寫(xiě)_第1頁(yè)
第七章HTML語(yǔ)言的編寫(xiě)_第2頁(yè)
第七章HTML語(yǔ)言的編寫(xiě)_第3頁(yè)
第七章HTML語(yǔ)言的編寫(xiě)_第4頁(yè)
第七章HTML語(yǔ)言的編寫(xiě)_第5頁(yè)
已閱讀5頁(yè)，還剩23頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作主講：xxx第七章HTML語(yǔ)言應(yīng)用項(xiàng)目展示與項(xiàng)目目標(biāo)1項(xiàng)目展示與項(xiàng)目目標(biāo)

了解HTML語(yǔ)言簡(jiǎn)介掌握HTML的基本結(jié)構(gòu)掌握HTML的常用標(biāo)記掌握使用HTML編寫(xiě)網(wǎng)頁(yè)頁(yè)面的方法能夠熟練瀏覽并修改HTML代碼1．項(xiàng)目需求

2.項(xiàng)目資訊

為迎接國(guó)家教育部高職高專教學(xué)工作水平評(píng)估，要體現(xiàn)“以評(píng)促建，以評(píng)促改，以評(píng)促管，評(píng)建結(jié)合，重在建設(shè)”的方針，實(shí)現(xiàn)評(píng)估倒計(jì)時(shí)，現(xiàn)建設(shè)“淮安信息職業(yè)技術(shù)學(xué)院高職高專教學(xué)工作水平評(píng)估網(wǎng)”，網(wǎng)站主要包括“組織機(jī)構(gòu)”、“評(píng)估文件”、“評(píng)建動(dòng)態(tài)”、“迎評(píng)簡(jiǎn)報(bào)”、“評(píng)建知識(shí)”、“他山之石”等模塊，網(wǎng)站中應(yīng)包含“學(xué)院主頁(yè)”與“教務(wù)在線”鏈接，網(wǎng)站風(fēng)格要簡(jiǎn)介、清爽。

2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)一：HTML語(yǔ)言簡(jiǎn)介

HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言），是用來(lái)描述超文本文檔的標(biāo)記語(yǔ)言。它由HTML標(biāo)記和用來(lái)表示信息的文本組成。使用HTML語(yǔ)言描述的文件，需要通過(guò)瀏覽器顯示效果。

所有的網(wǎng)頁(yè)都可以以HTML格式的文件為基礎(chǔ)，再加上一些其他語(yǔ)言（如Javascript、VBScript等）編寫(xiě)的代碼。這些文件除了一些基本的文字外還包含一些標(biāo)記，這些標(biāo)記均由“<”和“>”符號(hào)以及一個(gè)字符串組成。而瀏覽器的功能是對(duì)這些標(biāo)記進(jìn)行解釋，顯示出文字、圖像、動(dòng)畫(huà)并播放聲音等。

2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)二：HTML的基本結(jié)構(gòu)

1）HTML概述與編寫(xiě)方法

HTML文件是分層組織的，最外層是<html>標(biāo)記，在此標(biāo)記內(nèi)一般有兩層：head層（文檔頭）和body層(文檔體)。這兩部分內(nèi)容都包含在<html>和</html>之間。在這些標(biāo)記內(nèi)可以嵌套其他標(biāo)記。一般情況下文檔頭存儲(chǔ)網(wǎng)頁(yè)的信息，比如網(wǎng)頁(yè)標(biāo)題存放在<title>標(biāo)記中，網(wǎng)頁(yè)關(guān)鍵字存放在<meta>標(biāo)記中。文檔體是網(wǎng)頁(yè)內(nèi)容的顯示部分。主要由表格標(biāo)記、段落標(biāo)記、圖像標(biāo)記等組成。<html><head>

文檔頭部分

</head><body>

文檔主體部分

</body></html>2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)二：HTML的基本結(jié)構(gòu)

<html> <head> <title>歡迎訪問(wèn)俞晨視覺(jué)傳奇網(wǎng)站!</title> </head> <body> <center> <imgsrc="images/index.jpg"width="778"height="430"><br> 2007-2009版權(quán)所有：俞晨建議1024*768以上分辨率瀏覽

</center> </body></html>2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)二：HTML的基本結(jié)構(gòu)

2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)二：HTML的基本結(jié)構(gòu)

1）HTML標(biāo)記在HTML文檔中由許多用“<”和“>”括起來(lái)構(gòu)成的代碼，這種代碼稱它為標(biāo)記，標(biāo)記是HTML語(yǔ)言中定義網(wǎng)頁(yè)內(nèi)容格式和顯示的指令。而標(biāo)記的屬性用于進(jìn)一步控制網(wǎng)頁(yè)內(nèi)容的顯示效果。（1）單標(biāo)記<br><hr>（2）雙標(biāo)記

<標(biāo)記>內(nèi)容</標(biāo)記><strong>第一</strong>（3）標(biāo)記屬性<標(biāo)記名稱屬性1=屬性值1屬性2=屬性值2屬性3=屬性值3…>

<hrsize="3"align="center"width="80%"/>2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

1）基本標(biāo)記（1）html標(biāo)記（2）head標(biāo)記（3）title標(biāo)記（4）body標(biāo)記<html> <head> <title>歡迎訪問(wèn)HTML初級(jí)學(xué)習(xí)網(wǎng)站!</title> </head><body>通過(guò)項(xiàng)目鍛煉，網(wǎng)頁(yè)設(shè)計(jì)師是可以速成的，一定要好好學(xué)習(xí)!</body></html>2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

2）網(wǎng)頁(yè)布局與文字設(shè)計(jì)（1）標(biāo)題（2）換行（3）段落標(biāo)記（4）文字的字體和樣式3）列表

（1）無(wú)序號(hào)列表（2）序號(hào)列表4）TABLE表格（1）表格的基本結(jié)構(gòu)

<table>…</table>定義表格

<caption>…</caption>定義標(biāo)題

<tr>定義表行

<th>定義表頭

<td>定義表元（表格的具體數(shù)據(jù)）

2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

（2）表格的標(biāo)題

設(shè)置標(biāo)題位于表格上方：

<captionalign="top">…</caption>

（3）表格尺寸設(shè)置

<tablewidth="n1"height="n2">

（4）表格內(nèi)文字的對(duì)齊/布局（5）單元格的合并<tablewidth="327"border="1"><tr><tdwidth="76"rowspan="2">學(xué)生</td><tdwidth="69">姓名</td><tdwidth="79">學(xué)號(hào)</td><tdwidth="75"rowspan="2">共青團(tuán)員</td></tr><tr><td>王剛</td><td>33081001</td></tr></table>2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

5）文件之間的鏈接超文本鏈接是網(wǎng)頁(yè)最重要的特性之一，瀏覽者可以從一個(gè)頁(yè)面直接跳轉(zhuǎn)到其它頁(yè)面、圖像或者服務(wù)器。鏈接標(biāo)簽的基本格式如下：<ahref="資源地址">鏈接文字</a>說(shuō)明：（1）標(biāo)記<a>表示一個(gè)鏈接的開(kāi)始，標(biāo)記</a>表示鏈接的結(jié)束。（2）屬性“href”定義了這個(gè)鏈接所指的網(wǎng)頁(yè)路徑。（3）通過(guò)點(diǎn)擊“鏈接文字”可以鏈接到指定的網(wǎng)頁(yè)。例如：<ahref="">新浪網(wǎng)</a>即可給“新浪網(wǎng)”三個(gè)字加上鏈接到新浪主頁(yè)的鏈接。2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

6）多媒體效果在網(wǎng)頁(yè)中加入多媒體，可使網(wǎng)頁(yè)元素更加豐富，更加美觀，使網(wǎng)頁(yè)更具吸引力。下面將學(xué)習(xí)在一個(gè)頁(yè)面中如何插入圖像。（1）插入圖像超文本支持的圖像格式一般有XBitmap（XBM）、GIF、JPEG三種，所以將圖片處理后要保存為這三種格式的任何一種，這樣才可以在瀏覽器中看到。插入圖像標(biāo)記是<img>，其格式為：<imgsrc="圖像文件地址">圖像按鈕就是瀏覽者通過(guò)在圖像上單擊就能鏈接到某個(gè)地址的網(wǎng)頁(yè)。很簡(jiǎn)單，只要利用前面所學(xué)的知識(shí)就可以完成了。其基本格式如下：<ahref="資源地址"><imgsrc="圖像文件地址"></a>例如：<ahref="index.html"><imgsrc="html.gif"></a>2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

2）播放音頻與視頻

HTML除了可以插入圖像之外，還可以播放音樂(lè)和視頻等。用瀏覽器可以播放的音樂(lè)格式由MIDI音樂(lè)、WAV音樂(lè)、AU格式。另外，在利用網(wǎng)絡(luò)下載的各種音樂(lè)格式中，MP3是壓縮率最高、音質(zhì)最好的的文件格式。點(diǎn)播音樂(lè)的方式是將音樂(lè)做成一個(gè)超鏈接，只需要用鼠標(biāo)在上面單擊，就可以聽(tīng)到動(dòng)人的音樂(lè)了，其實(shí)這樣做的方法很簡(jiǎn)單：<ahref="音樂(lè)地址">樂(lè)曲名</a>自動(dòng)載入音樂(lè)或視頻是前面借助鏈接來(lái)實(shí)現(xiàn)網(wǎng)上播放音樂(lè)這一功能，還可以讓音樂(lè)自動(dòng)載入，讓它出現(xiàn)控制面板或作為背景音樂(lè)來(lái)使用?；菊Z(yǔ)法為：<embedsrc="音樂(lè)文件地址">

2.項(xiàng)目資訊關(guān)鍵知識(shí)點(diǎn)三：HTML的常用標(biāo)記

<body><embedsrc="sound/gsls.mp3"loop=truewidth="145"height="60"></embed></body></html>如果將<embedsrc=“sound/gsls.mp3”loop=“true”width=“145”height=“60”></embed>改為以下代碼：<embedsrc="video/dog.wmv"width="218"height="208"></embed>已保存為example6.html，效果如圖

3.項(xiàng)目計(jì)劃與決策

為滿足項(xiàng)目需求，體現(xiàn)“以評(píng)促建，以評(píng)促改，以評(píng)促管，評(píng)建結(jié)合，重在建設(shè)”的方針，完成“組織機(jī)構(gòu)”、“評(píng)估文件”、“評(píng)建動(dòng)態(tài)”、“迎評(píng)簡(jiǎn)報(bào)”、“評(píng)建知識(shí)”、“他山之石”等模塊的布局，界面清爽的網(wǎng)站風(fēng)格。整體風(fēng)格以橙色或天藍(lán)色的漸變?yōu)楸尘?，主體顏色以橙色或天藍(lán)色和黑色、白色、灰色搭配，局部使用草綠色。網(wǎng)站采用虛線對(duì)各個(gè)模塊實(shí)現(xiàn)劃分，使整個(gè)網(wǎng)站格調(diào)清晰、明朗。

學(xué)院名稱與標(biāo)志“學(xué)院主頁(yè)”與“教務(wù)在線”網(wǎng)站名稱網(wǎng)站導(dǎo)航組織機(jī)構(gòu)評(píng)估文件評(píng)建動(dòng)態(tài)迎評(píng)簡(jiǎn)報(bào)評(píng)建知識(shí)他山之石倒計(jì)時(shí)體現(xiàn)“以評(píng)促建，以評(píng)促改，以評(píng)促管，評(píng)建結(jié)合，重在建設(shè)”二十字方針的動(dòng)畫(huà)評(píng)建動(dòng)態(tài)圖片新聞通知公告評(píng)估文件評(píng)建知識(shí)迎評(píng)簡(jiǎn)報(bào)組織機(jī)構(gòu)他山之石友情鏈接版權(quán)信息4.項(xiàng)目實(shí)施

1）新建網(wǎng)頁(yè)文件index.html，編寫(xiě)框架代碼（并設(shè)置背景圖片和左邊距與上邊距為0）：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>歡迎訪問(wèn)淮安信息職業(yè)技術(shù)學(xué)院教學(xué)工作水平評(píng)估評(píng)建網(wǎng)！</title></head><bodybackground="images/bg.jpg"leftmargin="0"topmargin="0"></body></html>4.項(xiàng)目實(shí)施

2）編寫(xiě)頁(yè)眉部分的代碼，編寫(xiě)2行8列的表格代碼，然后將第1與2行的第1個(gè)單元格合并，將第2行其余7個(gè)單元格各并，設(shè)置單元格的寬度與高度，插入相應(yīng)的圖片與文本，代碼如下：<tablewidth="776"height="86"border="0"align="center"cellpadding="0"cellspacing="0"><trbgcolor="#FFFFFF"><tdwidth="296"rowspan="2"><imgsrc="images/top1.jpg"width="296"height="86"></td><tdwidth="192"height="34"bgcolor="#FFFFFF"> </td><tdwidth="36"><imgsrc="images/top11.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">學(xué)院主頁(yè)</div></td><tdwidth="36"><imgsrc="images/top12.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">教務(wù)在線</div></td><tdwidth="36"><imgsrc="images/top13.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">聯(lián)系我們</div></td></tr><tr><tdheight="52"colspan="7"><imgsrc="images/top2.jpg"width="480"height="52"></td></tr></table>4.項(xiàng)目實(shí)施

3）編寫(xiě)網(wǎng)頁(yè)的導(dǎo)航代碼，編寫(xiě)1行8列的表格，設(shè)置屬性，代碼如下：

<tablewidth="776"height="31"border="0"align="center"cellpadding="0"cellspacing="0"background="images/dhbg.jpg"><tr><tdwidth="84"><divalign="center">網(wǎng)站首頁(yè)</div></td><tdwidth="84"><divalign="center">組織機(jī)構(gòu)</div></td><tdwidth="84"><divalign="center">評(píng)估文件</div></td><tdwidth="84"><divalign="center">評(píng)建動(dòng)態(tài)</div></td><tdwidth="84"><divalign="center">迎評(píng)簡(jiǎn)報(bào)</div></td><tdwidth="84"><divalign="center">評(píng)建知識(shí)</div></td><tdwidth="84"><divalign="center">它山之石</div></td><td><divalign="center"class="pg">離教學(xué)工作評(píng)估還有200天</div></td></tr></table>4.項(xiàng)目實(shí)施

4）編寫(xiě)HTML代碼，插入1行1列的表格，然后設(shè)置表格的屬性，在單元格<td></td>中編寫(xiě)插入圖片的代碼，整個(gè)代碼如下：

<tablewidth="776"height="149"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdbgcolor="#FFFFFF"><imgsrc="images/dhtest4.jpg"width="776"height="149"></td></tr></table>4.項(xiàng)目實(shí)施

5）編寫(xiě)“評(píng)建動(dòng)態(tài)”與“評(píng)建通知”兩個(gè)欄目，代碼如下（使用了表格的嵌套結(jié)構(gòu)）：

<tablewidth="776"height="200"border="0"align="center"cellpadding="0"cellspacing="0"><trvalign="top"><tdwidth="590"bgcolor="#FFFFFF"><tablewidth="590"border="0"cellspacing="0"cellpadding="0"><tr><tdcolspan="2"><imgsrc="images/left1.jpg"width="590"height="26"></td></tr><tr><tdwidth="242"align="center"valign="middle"> </td><tdwidth="348"height="172"valign="top"> </td></tr></table></td><tdwidth="186"background="images/rightbg.jpg"bgcolor="#FFFFFF"><tablewidth="186"border="0"cellspacing="0"cellpadding="0"><tr>4.項(xiàng)目實(shí)施

<tdheight="26"colspan="3"><imgsrc="images/right1.jpg"width="186"height="26"></td></tr><tr><tdheight="150"> </td><tdwidth="170"height="150"valign="middle"> </td><tdheight="150"> </td></tr><tr><td> </td><td><divalign="right"><imgsrc="images/more.jpg"width="40"height="18"></div></td><td> </td></tr></table></td></tr></table>4.項(xiàng)目實(shí)施

6）繼續(xù)編寫(xiě)“評(píng)估文件”、“評(píng)建知識(shí)”、“迎評(píng)簡(jiǎn)報(bào)”模塊，代碼如下：

<tablewidth="776"border="0"align="center"cellpadding="0"cellspacing="0"><trvalign="top"><tdwidth="300"bgcolor="#FFFFFF"><tablewidth="300"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="29"background="images/midleft.jpg"> </td></tr><tr><tdheight="160"> </td></tr></table></td><tdwidth="290"bgcolor="#FFFFFF"><tablewidth="290"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="29"background="images/midright.jpg"> </td>4.項(xiàng)目實(shí)施

</tr><tr><tdheight="160"background="images/midbg.jpg"> </td></tr></table></td>

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論