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

下載本文檔

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

文檔簡介

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

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

2.項(xiàng)目資訊

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

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

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

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

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

1）HTML概述與編寫方法

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

文檔頭部分

</head><body>

文檔主體部分

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

<html> <head> <title>歡迎訪問俞晨視覺傳奇網(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)鍵知識點(diǎn)二：HTML的基本結(jié)構(gòu)

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

1）HTML標(biāo)記在HTML文檔中由許多用“<”和“>”括起來構(gòu)成的代碼，這種代碼稱它為標(biāo)記，標(biāo)記是HTML語言中定義網(wǎng)頁內(nèi)容格式和顯示的指令。而標(biāo)記的屬性用于進(jìn)一步控制網(wǎng)頁內(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)鍵知識點(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>歡迎訪問HTML初級學(xué)習(xí)網(wǎng)站!</title> </head><body>通過項(xiàng)目鍛煉，網(wǎng)頁設(shè)計(jì)師是可以速成的，一定要好好學(xué)習(xí)!</body></html>2.項(xiàng)目資訊關(guān)鍵知識點(diǎn)三：HTML的常用標(biāo)記

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

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

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

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

<tr>定義表行

<th>定義表頭

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

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

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

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

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

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

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

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

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

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

2）播放音頻與視頻

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

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

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

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

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

2）編寫頁眉部分的代碼，編寫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é)院主頁</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）編寫網(wǎng)頁的導(dǎo)航代碼，編寫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)站首頁</div></td><tdwidth="84"><divalign="center">組織機(jī)構(gòu)</div></td><tdwidth="84"><divalign="center">評估文件</div></td><tdwidth="84"><divalign="center">評建動態(tài)</div></td><tdwidth="84"><divalign="center">迎評簡報(bào)</div></td><tdwidth="84"><divalign="center">評建知識</div></td><tdwidth="84"><divalign="center">它山之石</div></td><td><divalign="center"class="pg">離教學(xué)工作評估還有200天</div></td></tr></table>4.項(xiàng)目實(shí)施

4）編寫HTML代碼，插入1行1列的表格，然后設(shè)置表格的屬性，在單元格<td></td>中編寫插入圖片的代碼，整個(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）編寫“評建動態(tài)”與“評建通知”兩個(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ù)編寫“評估文件”、“評建知識”、“迎評簡報(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. 本站所有資源如無特殊說明，都需要本地電腦安裝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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論