版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
網頁設計與制作主講：xxx第七章HTML語言應用項目展示與項目目標1項目展示與項目目標
了解HTML語言簡介掌握HTML的基本結構掌握HTML的常用標記掌握使用HTML編寫網頁頁面的方法能夠熟練瀏覽并修改HTML代碼1．項目需求
2.項目資訊
為迎接國家教育部高職高專教學工作水平評估，要體現“以評促建，以評促改，以評促管，評建結合，重在建設”的方針，實現評估倒計時，現建設“淮安信息職業技術學院高職高專教學工作水平評估網”，網站主要包括“組織機構”、“評估文件”、“評建動態”、“迎評簡報”、“評建知識”、“他山之石”等模塊，網站中應包含“學院主頁”與“教務在線”鏈接，網站風格要簡介、清爽。
2.項目資訊關鍵知識點一：HTML語言簡介
HTML（HyperTextMarkupLanguage，超文本標記語言），是用來描述超文本文檔的標記語言。它由HTML標記和用來表示信息的文本組成。使用HTML語言描述的文件，需要通過瀏覽器顯示效果。
所有的網頁都可以以HTML格式的文件為基礎，再加上一些其他語言（如Javascript、VBScript等）編寫的代碼。這些文件除了一些基本的文字外還包含一些標記，這些標記均由“<”和“>”符號以及一個字符串組成。而瀏覽器的功能是對這些標記進行解釋，顯示出文字、圖像、動畫并播放聲音等。
2.項目資訊關鍵知識點二：HTML的基本結構
1）HTML概述與編寫方法
HTML文件是分層組織的，最外層是<html>標記，在此標記內一般有兩層：head層（文檔頭）和body層(文檔體)。這兩部分內容都包含在<html>和</html>之間。在這些標記內可以嵌套其他標記。一般情況下文檔頭存儲網頁的信息，比如網頁標題存放在<title>標記中，網頁關鍵字存放在<meta>標記中。文檔體是網頁內容的顯示部分。主要由表格標記、段落標記、圖像標記等組成。<html><head>
文檔頭部分
</head><body>
文檔主體部分
</body></html>2.項目資訊關鍵知識點二：HTML的基本結構
<html> <head> <title>歡迎訪問俞晨視覺傳奇網站!</title> </head> <body> <center> <imgsrc="images/index.jpg"width="778"height="430"><br> 2007-2009版權所有：俞晨建議1024*768以上分辨率瀏覽
</center> </body></html>2.項目資訊關鍵知識點二：HTML的基本結構
2.項目資訊關鍵知識點二：HTML的基本結構
1）HTML標記在HTML文檔中由許多用“<”和“>”括起來構成的代碼，這種代碼稱它為標記，標記是HTML語言中定義網頁內容格式和顯示的指令。而標記的屬性用于進一步控制網頁內容的顯示效果。（1）單標記<br><hr>（2）雙標記
<標記>內容</標記><strong>第一</strong>（3）標記屬性<標記名稱屬性1=屬性值1屬性2=屬性值2屬性3=屬性值3…>
<hrsize="3"align="center"width="80%"/>2.項目資訊關鍵知識點三：HTML的常用標記
1）基本標記（1）html標記（2）head標記（3）title標記（4）body標記<html> <head> <title>歡迎訪問HTML初級學習網站!</title> </head><body>通過項目鍛煉，網頁設計師是可以速成的，一定要好好學習!</body></html>2.項目資訊關鍵知識點三：HTML的常用標記
2）網頁布局與文字設計（1）標題（2）換行（3）段落標記（4）文字的字體和樣式3）列表
（1）無序號列表（2）序號列表4）TABLE表格（1）表格的基本結構
<table>…</table>定義表格
<caption>…</caption>定義標題
<tr>定義表行
<th>定義表頭
<td>定義表元（表格的具體數據）
2.項目資訊關鍵知識點三：HTML的常用標記
（2）表格的標題
設置標題位于表格上方：
<captionalign="top">…</caption>
（3）表格尺寸設置
<tablewidth="n1"height="n2">
（4）表格內文字的對齊/布局（5）單元格的合并<tablewidth="327"border="1"><tr><tdwidth="76"rowspan="2">學生</td><tdwidth="69">姓名</td><tdwidth="79">學號</td><tdwidth="75"rowspan="2">共青團員</td></tr><tr><td>王剛</td><td>33081001</td></tr></table>2.項目資訊關鍵知識點三：HTML的常用標記
5）文件之間的鏈接超文本鏈接是網頁最重要的特性之一，瀏覽者可以從一個頁面直接跳轉到其它頁面、圖像或者服務器。鏈接標簽的基本格式如下：<ahref="資源地址">鏈接文字</a>說明：（1）標記<a>表示一個鏈接的開始，標記</a>表示鏈接的結束。（2）屬性“href”定義了這個鏈接所指的網頁路徑。（3）通過點擊“鏈接文字”可以鏈接到指定的網頁。例如：<ahref="">新浪網</a>即可給“新浪網”三個字加上鏈接到新浪主頁的鏈接。2.項目資訊關鍵知識點三：HTML的常用標記
6）多媒體效果在網頁中加入多媒體，可使網頁元素更加豐富，更加美觀，使網頁更具吸引力。下面將學習在一個頁面中如何插入圖像。（1）插入圖像超文本支持的圖像格式一般有XBitmap（XBM）、GIF、JPEG三種，所以將圖片處理后要保存為這三種格式的任何一種，這樣才可以在瀏覽器中看到。插入圖像標記是<img>，其格式為：<imgsrc="圖像文件地址">圖像按鈕就是瀏覽者通過在圖像上單擊就能鏈接到某個地址的網頁。很簡單，只要利用前面所學的知識就可以完成了。其基本格式如下：<ahref="資源地址"><imgsrc="圖像文件地址"></a>例如：<ahref="index.html"><imgsrc="html.gif"></a>2.項目資訊關鍵知識點三：HTML的常用標記
2）播放音頻與視頻
HTML除了可以插入圖像之外，還可以播放音樂和視頻等。用瀏覽器可以播放的音樂格式由MIDI音樂、WAV音樂、AU格式。另外，在利用網絡下載的各種音樂格式中，MP3是壓縮率最高、音質最好的的文件格式。點播音樂的方式是將音樂做成一個超鏈接，只需要用鼠標在上面單擊，就可以聽到動人的音樂了，其實這樣做的方法很簡單：<ahref="音樂地址">樂曲名</a>自動載入音樂或視頻是前面借助鏈接來實現網上播放音樂這一功能，還可以讓音樂自動載入，讓它出現控制面板或作為背景音樂來使用。基本語法為：<embedsrc="音樂文件地址">
2.項目資訊關鍵知識點三：HTML的常用標記
<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.項目計劃與決策
為滿足項目需求，體現“以評促建，以評促改，以評促管，評建結合，重在建設”的方針，完成“組織機構”、“評估文件”、“評建動態”、“迎評簡報”、“評建知識”、“他山之石”等模塊的布局，界面清爽的網站風格。整體風格以橙色或天藍色的漸變為背景，主體顏色以橙色或天藍色和黑色、白色、灰色搭配，局部使用草綠色。網站采用虛線對各個模塊實現劃分，使整個網站格調清晰、明朗。
學院名稱與標志“學院主頁”與“教務在線”網站名稱網站導航組織機構評估文件評建動態迎評簡報評建知識他山之石倒計時體現“以評促建，以評促改，以評促管，評建結合，重在建設”二十字方針的動畫評建動態圖片新聞通知公告評估文件評建知識迎評簡報組織機構他山之石友情鏈接版權信息4.項目實施
1）新建網頁文件index.html，編寫框架代碼（并設置背景圖片和左邊距與上邊距為0）：
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>歡迎訪問淮安信息職業技術學院教學工作水平評估評建網！</title></head><bodybackground="images/bg.jpg"leftmargin="0"topmargin="0"></body></html>4.項目實施
2）編寫頁眉部分的代碼，編寫2行8列的表格代碼，然后將第1與2行的第1個單元格合并，將第2行其余7個單元格各并，設置單元格的寬度與高度，插入相應的圖片與文本，代碼如下：<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">學院主頁</div></td><tdwidth="36"><imgsrc="images/top12.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">教務在線</div></td><tdwidth="36"><imgsrc="images/top13.jpg"width="36"height="34"></td><tdwidth="60"><divalign="center">聯系我們</div></td></tr><tr><tdheight="52"colspan="7"><imgsrc="images/top2.jpg"width="480"height="52"></td></tr></table>4.項目實施
3）編寫網頁的導航代碼，編寫1行8列的表格，設置屬性，代碼如下：
<tablewidth="776"height="31"border="0"align="center"cellpadding="0"cellspacing="0"background="images/dhbg.jpg"><tr><tdwidth="84"><divalign="center">網站首頁</div></td><tdwidth="84"><divalign="center">組織機構</div></td><tdwidth="84"><divalign="center">評估文件</div></td><tdwidth="84"><divalign="center">評建動態</div></td><tdwidth="84"><divalign="center">迎評簡報</div></td><tdwidth="84"><divalign="center">評建知識</div></td><tdwidth="84"><divalign="center">它山之石</div></td><td><divalign="center"class="pg">離教學工作評估還有200天</div></td></tr></table>4.項目實施
4）編寫HTML代碼，插入1行1列的表格，然后設置表格的屬性，在單元格<td></td>中編寫插入圖片的代碼，整個代碼如下：
<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.項目實施
5）編寫“評建動態”與“評建通知”兩個欄目，代碼如下（使用了表格的嵌套結構）：
<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.項目實施
<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.項目實施
6）繼續編寫“評估文件”、“評建知識”、“迎評簡報”模塊，代碼如下：
<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.項目實施
</tr><tr><tdheight="160"background="images/midbg.jpg"> </td></tr></table></td>
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論