HTML基礎(chǔ)實(shí)例教程_第1頁
HTML基礎(chǔ)實(shí)例教程_第2頁
HTML基礎(chǔ)實(shí)例教程_第3頁
HTML基礎(chǔ)實(shí)例教程_第4頁
HTML基礎(chǔ)實(shí)例教程_第5頁
已閱讀5頁，還剩89頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、一、HTML部分一、實(shí)例名稱：認(rèn)識HTML的基本標(biāo)簽和屬性1、 實(shí)例目標(biāo)及知識點(diǎn)通過制作簡單的HTML頁面，對HTML的標(biāo)簽和屬性有個宏觀的認(rèn)識，激發(fā)學(xué)生對HTML語言的興趣。運(yùn)用了body的屬性：text、background、alink 、 leftmargin、 topmargin熟悉這些屬性的用途和設(shè)置方法。2、 實(shí)例功能說明做出符合以下要求的網(wǎng)頁：(1) 將網(wǎng)頁標(biāo)題設(shè)置為：歡迎來到我的個人網(wǎng)頁；(2) 將網(wǎng)頁背景設(shè)置為指定圖片：(3) 將網(wǎng)頁的文本顏色設(shè)置為：#660033(4) 將網(wǎng)頁的左邊距設(shè)置為：10px ,上邊距設(shè)置為：400px ;(5) 將網(wǎng)頁以文件名為：例1-2.htm

2、l保存。 實(shí)驗(yàn)結(jié)果參照頁面美化效果，如下圖：圖1-13、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入源碼。(2) 將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例1-2.html在d盤根目錄下；(3) 將背景圖片tp.jpg放到相對路徑為images的文件夾下，如果圖片比頁面小，圖片會自動重復(fù)；(4) 用網(wǎng)頁瀏覽器打開此HTML頁面，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼1.1 <html><head><title>歡迎來到我的個人網(wǎng)頁</title></head><body tex

3、t = #660033 background = imagestp.jpg alink = blue leftmargin = 10 topmargin = 400><center>我的第一個HTML頁面</center></body></html> 5、實(shí)例思考與擴(kuò)展 （1）頁面的漢字“我的第一個HTML頁面”在網(wǎng)頁中居左或居右怎么設(shè)置？（2）背景如果不用圖片，用一種顏色，應(yīng)怎樣修改源碼？二、實(shí)例名稱：文字的排版1、 實(shí)例目標(biāo)及知識點(diǎn)綜合練習(xí)HTML網(wǎng)頁的設(shè)計(jì)。注意代碼中對<br>、<p>、<center&g

4、t;、<hr>、<pre>、<address>等標(biāo)簽的運(yùn)用，熟悉并掌握文字排版所涉及的所有標(biāo)簽。2、實(shí)例功能說明 做出符合要求的靜態(tài)HTML網(wǎng)頁，實(shí)驗(yàn)結(jié)果參照如下圖：圖1-23、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼。(2) 將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例2-1.html在d盤根目錄下；(3) 用網(wǎng)頁瀏覽器打開此HTML頁面，即可以看到此頁的頁面效果。3、 實(shí)例參考源碼源碼1.2 <html><head><title>歡迎來到我的個人網(wǎng)頁</title

5、></head><body text = #660066 bgcolor = #FFFF66><p align = center>要<br>在一段<br>里<br>換行<br>請使用<br>br這個Tag。</p><center><pre>這是預(yù)設(shè)(preformatted)文本.在pre這個tag里的文本 保留空格和分行。</pre></center><p align = center>用hr這個Tag可以在HTML文件

6、里加一條橫線。</p><hr width = "60%" size = "3" align = center noshade><p align = center>用hr這個Tag可以在HTML文件里加一條橫線。</p><!-這是代碼注釋-><center><p>代碼注釋是不會顯示在網(wǎng)頁里的。</p><address>北京&nbsp;&lt;&lt;網(wǎng)頁設(shè)計(jì)基礎(chǔ)&gt;&gt;&nbsp;路1000號&

7、lt;br>&amp;&nbsp;老師&nbsp;&copy;<br>郵編:100000<br></address></center></body></html> 5、實(shí)例思考與擴(kuò)展 （1）頁面的背景設(shè)置成圖片應(yīng)該如何做？（2）字體的大小、顏色等屬性如何更改？三、實(shí)例名稱：文字的美化1、 實(shí)例目標(biāo)及知識點(diǎn)利用文字美化所講到的標(biāo)簽，綜合練習(xí)HTML網(wǎng)頁的設(shè)計(jì)。熟悉并掌握文字美化所涉及的標(biāo)簽。如：<hn>、<font>、<del>、<ins>

8、、<sub>、<sup>等。2、 實(shí)例功能說明按照以下要求完成HTML頁面效果的制作。(1) 將網(wǎng)頁標(biāo)題設(shè)置為：“字體設(shè)置”。(2) 將文字“標(biāo)題一”樣式設(shè)置為：標(biāo)題一，居中對齊。(3) 將文字“具體內(nèi)容一”設(shè)置為：隸書，18px，顏色為紅色。(4) 將文字“具體內(nèi)容二”設(shè)置為：16px，粗體，斜體。(5) 利用字體美化的標(biāo)簽實(shí)現(xiàn)刪除、下劃線、上標(biāo)、下標(biāo)等功能。 實(shí)驗(yàn)結(jié)果參照如下圖：圖1-33、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，注意此段代碼中對<hn>、<font>、<del>、<ins>、<sub&

9、gt;、<sup>等標(biāo)簽的運(yùn)用。(2) 將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例2-2.html在d盤根目錄下；(3) 用網(wǎng)頁瀏覽器打開此HTML頁面，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼1.3<html><head><title>字體設(shè)置</title></head><body text = #660066 bgcolor = #FFFF66><h1 align="center">標(biāo)題一</h1><p&g

10、t;<font face=隸書 size=18 color="#FF0000">具體內(nèi)容一</font></</p><p><font size=16><b><i>具體內(nèi)容二</i></b></font></</p><p><del>芙蓉姐姐</del>這個詞當(dāng)中劃線表示刪除。</p><p><ins>想唱就唱</ins>這個詞下劃線插入。</p&g

11、t;<p>X<sub>2</sub>其中的2是下標(biāo)</p><p>X<sup>2</sup>其中的2是上標(biāo)</p><p><blockquote>好好學(xué)習(xí)，天天向上。這句話縮進(jìn)表示引用</blockquote></p><code>call getOrders</code><p>用code顯示計(jì)算機(jī)代碼，code里顯示的字符是等寬字符。</p></body></html> </ht

12、ml> 5、實(shí)例思考與擴(kuò)展 （1）頁面的背景設(shè)置成圖片應(yīng)該如何做？ （2）還有哪些標(biāo)簽可以實(shí)現(xiàn)文字美化的功能，總結(jié)并綜合運(yùn)用它們在網(wǎng)頁設(shè)計(jì)中。四、實(shí)例名稱：HTML列表(list)實(shí)例1、 實(shí)例目標(biāo)及知識點(diǎn)分別實(shí)現(xiàn)嵌套的列表和用多種類型排序的列表。利用文字美化的有關(guān)列表的標(biāo)簽，例如：<ul>、<li>、<ol>等標(biāo)簽。練習(xí)HTML網(wǎng)頁的設(shè)計(jì)。熟悉并掌握文字美化列表所涉及的標(biāo)簽。2、實(shí)例功能說明 做出符合要求的靜態(tài)HTML網(wǎng)頁，實(shí)驗(yàn)結(jié)果參照如下圖：圖1-43、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)

13、展名，保存到相應(yīng)文件夾下，例如：保存為例2-3.html在d盤根目錄下；(2) 用網(wǎng)頁瀏覽器打開此HTML頁面，即可以看到此頁的頁面效果。4、 實(shí)例參考源碼源碼1.4<html><head><title>字體設(shè)置</title></head><body text = #660066 bgcolor = #FFFF66><h4>嵌套2層的列表：</h4><ul> <li>動物 <ul> <li>兩棲動物</li> <li>哺乳動物

14、 <ul> <li>人</li> <li>猩猩</li> </ul> </li> <li>魚類</li> </ul> </li> <li>植物</li></ul><h4>排序列表，不設(shè)Type屬性：</h4><ol> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li> </ol>

15、 <h4>排序列表，Type屬性設(shè)為A：</h4><ol type="A"> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li></ol> <h4>排序列表，Type屬性設(shè)為a：</h4><ol type="a"> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li>&

16、lt;/ol> <h4>排序列表，Type屬性設(shè)為I：</h4><ol type="I"> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li></ol> <h4>排序列表，Type屬性設(shè)為i：</h4><ol type="i"> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界&l

17、t;/li></ol></body></html> 5、實(shí)例思考與擴(kuò)展（1）思考列表的標(biāo)簽在什么時候需要用到？如果改成抽屜下拉的話需要用到什么標(biāo)簽？要怎么做？五、實(shí)例名稱：插入圖像1、 實(shí)例目標(biāo)及知識點(diǎn)綜合練習(xí)HTML網(wǎng)頁的設(shè)計(jì)。熟悉并掌握插入圖片所涉及的標(biāo)簽，例如：src、 alt 、 border、align等。2、 實(shí)例功能說明按照以下要求完成HTML頁面效果的制作。（1）將網(wǎng)頁標(biāo)題設(shè)置為：“CAI是什么？”。（2）將網(wǎng)頁標(biāo)題格式設(shè)置為：下劃線。（3）將網(wǎng)頁第一段文字格式設(shè)置為：斜體，顏色為紅色。（4）將網(wǎng)頁中的圖片設(shè)置為：左對齊。（5）將網(wǎng)頁最

18、后一段不要排在圖片右邊，排在圖片的下面。 實(shí)驗(yàn)結(jié)果參照如下圖：圖1-53、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例2-4.html在d盤根目錄下；(2) 將此網(wǎng)頁所要插入的圖片CAI.jpg放到相對路徑為images的文件夾下；(3) 用網(wǎng)頁瀏覽器打開此HTML頁面，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼1.5<html><head><title>插入圖像</title></head><body text = #660066

19、bgcolor = #FFFF66><h1 align="center"><ins>CAI是什么？</ins></h1><img src="imagesCAI.jpg" alt = CAI原理圖 border = 1 align = left><p><font color="#FF0000"><i>CAI是計(jì)算機(jī)輔助教學(xué)(Computer Assisted Instructing)的英文名稱首字母縮寫</i></fo

20、nt></</p><p>其含義就是把自己的教學(xué)想法，包括教學(xué)目的，內(nèi)容，實(shí)現(xiàn)教學(xué)活動的策略，教學(xué)的順序，控制方法等，用計(jì)算機(jī)程序進(jìn)行描述，并存入計(jì)算機(jī)，經(jīng)過調(diào)試成為可以運(yùn)行的程序由于計(jì)算機(jī)有著存儲信息，處理信息，工作自動化等功能</p><br clear =left><p>因此，CAI課件可以將大容量的信息非順序地呈現(xiàn)，可以選擇學(xué)習(xí)內(nèi)容和掌握學(xué)習(xí)進(jìn)度，實(shí)現(xiàn)因人施教的原則和及時反饋信息原則等特點(diǎn)集于一身，并因之區(qū)別于其他媒體教學(xué)</p></body></html> 5、實(shí)例思考與擴(kuò)展 （1

21、）頁面的背景設(shè)置成圖片應(yīng)該如何做？六、實(shí)例名稱：幾種超鏈接的綜合應(yīng)用1、 實(shí)例目標(biāo)及知識點(diǎn)綜合運(yùn)用本章所講到的關(guān)于鏈接的知識，進(jìn)一步熟悉多種關(guān)于鏈接的概念。能在今后的html頁面開發(fā)中熟練使用鏈接。涉及到的標(biāo)簽包括：<a href =”></a>2、 實(shí)例功能說明在同一個html頁面中，做多個鏈接，分別符合以下要求：（1）用相對路徑和絕對路徑兩種方法建立超鏈接網(wǎng)頁；（2）運(yùn)用超鏈接的title屬性：（3）將圖片作為一個超鏈接；（4）在新窗口打開一個鏈接;（5）鏈接到一個郵箱地址。 實(shí)驗(yàn)結(jié)果參照如下圖：圖1-6注意此實(shí)驗(yàn)中關(guān)于設(shè)定title屬性的結(jié)果，可以讓鼠標(biāo)懸停在超鏈

22、接上的時候，顯示該超鏈接的文字注釋。點(diǎn)擊寫信給新浪的鏈接后，結(jié)果如圖：圖1-73、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例3-1.html在d盤根目錄下；(2) 將圖片smile.jpg放到相對路徑為images的文件夾下，將html0301.html文件放到相對路徑為html的文件夾下；(3) 用網(wǎng)頁瀏覽器打開此HTML頁面，點(diǎn)擊相應(yīng)鏈接，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼1.6<html><body><p><a href="html

23、/html0301.html" title = "網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)頁教程與代碼的中文站點(diǎn)">這是一個相對路徑的鏈接</a></p><p><a href="" target=_blank title = "網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)頁教程與代碼的中文站點(diǎn)">這是一個絕對路徑的鏈接</a></p><p>你可以將一張圖片作為一個鏈接，點(diǎn)擊這個圖片。<a href="html/html0301.html"><img sr

24、c="images/smile.jpg" ></a></p><p>這個郵箱地址鏈接寫了to, cc, bcc, subject, body的內(nèi)容：<a href="mailto:info?cc=webmaster&bcc=media&subject=I%20like%20your%20site&body=真是個好站點(diǎn)！">寫信給新浪</a></p><p><b>注:</b>空格請用%20表示。</p><

25、/body></html> 5、實(shí)例思考與擴(kuò)展 （1）對相對路徑和絕對路徑有清晰的認(rèn)識，舉例說明什么是相對路徑，什么是絕對路徑。（2）思考超鏈接的字體在點(diǎn)擊前，點(diǎn)擊后的顏色如何設(shè)置？七、實(shí)例名稱：在HTML文件里跳轉(zhuǎn)1、 實(shí)例目標(biāo)及知識點(diǎn)在同一個html頁面中，使用name屬性，可以跳轉(zhuǎn)到此頁面的指定部位。掌握關(guān)于在同一個HTML頁面里實(shí)現(xiàn)跳轉(zhuǎn)的超鏈接處理方法2、實(shí)例功能說明 實(shí)驗(yàn)結(jié)果如下圖：圖1-8 點(diǎn)擊參見第六章鏈接后，網(wǎng)頁跳轉(zhuǎn)的頁面如下圖所示： 圖1-93、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文

26、件夾下，例如：保存為例3-2.html在d盤根目錄下；(2) 用網(wǎng)頁瀏覽器打開此HTML頁面，點(diǎn)擊鏈接，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼1.7<html><head><title>站內(nèi)鏈接示例</title></head><body><p><a href="#C6">參見第六章</a></p><p><a name="C1"><h2>第1章</h2></a><

27、p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C2"><h2>第2章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C3"><h2>第3章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C4"><h2>第4章</h2>

28、;</a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C5"><h2>第5章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C6"><h2>第6章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C7"><h2&g

29、t;第7章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C8"><h2>第8章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C9"><h2>第9章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C10&q

30、uot;><h2>第10章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C11"><h2>第11章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C12"><h2>第12章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p>&

31、lt;a name="C13"><h2>第13章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C14"><h2>第14章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C15"><h2>第15章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教

32、程與代碼的中文站點(diǎn)。</p><a name="C16"><h2>第16章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p><a name="C17"><h2>第17章</h2></a><p>這是網(wǎng)頁設(shè)計(jì)基礎(chǔ)- 網(wǎng)頁教程與代碼的中文站點(diǎn)。</p></body></html> 5、實(shí)例思考與擴(kuò)展 （1）總結(jié)在同一頁的跳轉(zhuǎn)鏈接和在不同頁的跳轉(zhuǎn)鏈接的區(qū)別。八

33、、實(shí)例名稱：運(yùn)用border屬性對表格進(jìn)行修飾1、 實(shí)例目標(biāo)及知識點(diǎn)在同一個html頁面中，做多個表格，分別把表格的邊框設(shè)為0、1、15，認(rèn)識border屬性對表格的影響，達(dá)到能夠熟練運(yùn)用border屬性對表格進(jìn)行修飾。2、實(shí)例功能說明實(shí)驗(yàn)結(jié)果如下圖：圖2-03、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例4-1.html在d盤根目錄下；(2) 用網(wǎng)頁瀏覽器打開此HTML頁面，點(diǎn)擊相應(yīng)鏈接，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼1.8<html><head><tit

34、le>運(yùn)用border屬性對表格進(jìn)行修飾</title></head><body><h4>缺省情況下，表格沒有邊界。</h4><table><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr>

35、;</table><h4>表格Border設(shè)為0，也不顯示邊界：</h4><table border="0"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table><h

36、4>表格的邊界值設(shè)為1：</h4> <table border="1"><tr> <td>第一</td> <td>行</td></tr> <tr> <td>第二</td> <td>行</td></tr></table><h4>表格的邊界值設(shè)為15，邊界更粗：</h4> <table border="15"><tr> <

37、td>第一</td> <td>行</td></tr> <tr> <td>第二</td> <td>行</td></tr></table></body></html>5、實(shí)例思考與擴(kuò)展 （1）對表格進(jìn)行修飾，做出不同邊框的表格效果。 （2）邊框可否設(shè)成不同的美化效果？如果可以，如何設(shè)置？九、實(shí)例名稱：運(yùn)用多種屬性分別對多個表格進(jìn)行修飾1、 實(shí)例目標(biāo)及知識點(diǎn)學(xué)會設(shè)置表格的標(biāo)題和表頭，認(rèn)識colpsan屬性和rowspan屬性對表格的影響，達(dá)

38、到能夠熟練運(yùn)用這些屬性對表格進(jìn)行修飾。2、 實(shí)例功能說明在同一個html頁面中，做多個表格，分別實(shí)現(xiàn)以下要求：（1）做兩個有標(biāo)題的表格，要求這兩個表格的表頭分別是水平方向和垂直方向；（2）設(shè)置包含多列的單元格：（3）設(shè)置包含多行的單元格；實(shí)驗(yàn)結(jié)果如下圖：圖2-13、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例4-3.html在d盤根目錄下；(2) 用網(wǎng)頁瀏覽器打開此HTML頁面，點(diǎn)擊相應(yīng)鏈接，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼2.0<html><head><ti

39、tle>聯(lián)系表</title></head><body><table width="535" height="142" border="1" align="center"> <caption> 聯(lián)系表 </caption> <tr bgcolor="#CCFF66"> <td width="61">姓名</td> <td width="110&qu

40、ot;>&nbsp;</td> <td width="67">性別</td> <td width="95">&nbsp;</td> <td width="65">出生年月</td> <td width="97">&nbsp;</td> </tr> <tr bgcolor="#FFFF99"> <td>住址</td>

41、; <td colspan="5">&nbsp;</td> </tr> <tr bgcolor="#CCFF66"> <td height="38">籍貫</td> <td>&nbsp;</td> <td>專業(yè)</td> <td>&nbsp;</td> <td>聯(lián)系電話</td> <td>&nbsp;</td> &

42、lt;/tr></table></body></html> 5、實(shí)例思考與擴(kuò)展 （1）思考如何才能對表格的不同格設(shè)置顏色或者圖片背景？（2）舉例說明在網(wǎng)頁設(shè)計(jì)的何種情況需要用到此種效果。十、實(shí)例名稱：運(yùn)用多種屬性對表格進(jìn)行修飾1、 實(shí)例目標(biāo)及知識點(diǎn)達(dá)到能夠靈活熟練運(yùn)用多種屬性對表格進(jìn)行修飾。例如：width、 height、 border、cellpadding、 cellspacing等2、 實(shí)例功能說明在同一個html頁面中，做一個表格，分別實(shí)現(xiàn)以下要求：（1）設(shè)置表格為3行3列；（2）表格寬度為：300像素；高度為：100像素；（3）設(shè)置表格的三

43、個表頭：表頭一，表頭二，表頭三；表頭一跨三列，頂端對齊；（4）設(shè)置表格邊距為：0；間距為：0;（5）設(shè)置表格邊框?yàn)椋杭t色。實(shí)驗(yàn)結(jié)果如下圖：圖2-23、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼，將此HTML代碼以.html或者.htm作為擴(kuò)展名，保存到相應(yīng)文件夾下，例如：保存為例4-4.html在d盤根目錄下；(2) 用網(wǎng)頁瀏覽器打開此HTML頁面，點(diǎn)擊相應(yīng)鏈接，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼2.1<html><head><title>表格</title></head><body><table

44、width="300" height="100" border="1" cellpadding="0" cellspacing="0"> <tr bordercolor="#FF0000"> <td rowspan="3" valign="top"><div align="center">表頭一</div></td> <td><div

45、 align="center">表頭二</div></td> <td><div align="center">表頭三</div></td> </tr> <tr bordercolor="#FF0000"> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr bordercolor="#FF0000"&g

46、t; <td>&nbsp;</td> <td>&nbsp;</td> </tr></table></body></html>5、實(shí)例思考與擴(kuò)展（1）如何用表格對網(wǎng)頁布局？可以表格中嵌套表格嗎？什么情況需要這么做？這種布局格式有什么優(yōu)缺點(diǎn)呢？十一、實(shí)例名稱：嵌套分割框架1、 實(shí)例目標(biāo)及知識點(diǎn)熟練掌握框架的基本結(jié)構(gòu)和分割方式，為以后網(wǎng)頁的制作打下良好的基礎(chǔ)。掌握框架的標(biāo)簽<frameset>、<frame>等2、 實(shí)例功能說明運(yùn)用本章所講到的框架的知識按照以下要求

47、制作html頁面：（1）窗口水平方向上分割成兩部分，分別占：30%和70%；（2）右邊框架垂直方向上分別占：20%和80%；（3）左邊框架的內(nèi)容是嵌入的，是left.htm網(wǎng)頁的內(nèi)容；（4）在left.htm中分別插入圖片1.jpg、2.jpg和3.jpg，并且要圖片居中顯示;（5）右邊上部分框架內(nèi)容嵌入的是right1.htm網(wǎng)頁的內(nèi)容；（6）right1.htm網(wǎng)頁中“陽光總在風(fēng)雨后”的文字大小為“7號”，顏色為“藍(lán)色”，字體為“華文新魏”，加粗顯示；（7）右邊下部分框架內(nèi)容嵌入的是right2.htm的內(nèi)容；（8）right2.htm網(wǎng)頁中文字大小為“4號”，顏色為“藍(lán)色”，字體為“楷體

48、”。實(shí)驗(yàn)結(jié)果如下圖：圖2-33、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼,將此HTML代碼以left.htm命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；(2) 新建HTML頁，在HTML的編輯頁面輸入代碼,將此HTML代碼以right1.htm命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；(3) 新建HTML頁，在HTML的編輯頁面輸入代碼,將此HTML代碼以right2.htm命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；(4) 新建HTML頁，在HTML的編輯頁面輸入代碼,將此HTML代碼以“例5-1.htm”命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；

49、(5) 用網(wǎng)頁瀏覽器打開“例5-1.htm”頁面，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼 left.html<html><head><title>smile</title></head><body><table width="338" height="702" border="0" align="center" cellpadding="0" cellspacing="0"> <

50、tr> <td width="338" height="256"><div align="center"><img src="images/smile.jpg" width="180" height="120"></div></td> </tr> <tr> <td height="223"><div align="center"&

51、gt;<img src="images/smile.jpg" width="180" height="120"></div></td> </tr> <tr> <td height="223"><div align="center"><img src="images/smile.jpg" width="180" height="120"><

52、;/div></td> </tr></table></body></html>源碼 right1.html<html><head><title>陽光總在風(fēng)雨后</title></head><body><div align="center"> <font face = 華文新魏 size = 7 color = "#0000FF"><b>陽光總在風(fēng)雨后</b></fo

53、nt> </div></body></html>源碼 right2.html<html><head><title>歌詞</title></head><body><font face = 楷體 size = 4 color = "blue">人生路上甜苦和喜憂愿意與你分擔(dān)所有難免曾經(jīng)跌到和等候要勇敢的抬頭誰愿藏躲在避風(fēng)的港口寧有波濤洶涌的自由愿是你心中燈塔的守候在迷霧中讓你看透陽光總在風(fēng)雨后烏云上有晴空珍惜所有的感動每一份希望在你手中陽光總在風(fēng)雨后請相

54、信有彩虹風(fēng)風(fēng)雨雨都接受我一直會在你的左右</font> </body></html>源碼 例5-1.htm<html><head><title>嵌套框架</title></head><frameset rows="*" cols="30%,*"> <frame src="left.htm" name="leftFrame" scrolling="NO" noresize> &l

55、t;frameset rows="20%,*"> <frame src="right1.htm" name="topFrame" scrolling="NO" noresize> <frame src="right2.htm" name="mainFrame"> </frameset></frameset> </html>5、實(shí)例思考與擴(kuò)展 （1）對比用框架對網(wǎng)頁布局，和用表格對網(wǎng)頁布局有什么不同。 （2）可以

56、實(shí)現(xiàn)點(diǎn)擊一個框架里的鏈接，對另一個框架里的頁面影響嗎？怎么實(shí)現(xiàn)？十二、實(shí)例名稱：用框架導(dǎo)航1、 實(shí)例目標(biāo)及知識點(diǎn)熟練掌握框架的基本結(jié)構(gòu)和分割方式，能夠運(yùn)用框架實(shí)現(xiàn)導(dǎo)航的功能。2、 實(shí)例功能說明運(yùn)用框架的知識按照以下要求制作含有框架的html頁面：（1）窗口水平方向上分割成兩部分，分別占：20%和80%；（2）上部分框架的內(nèi)容是嵌入的是top.htm網(wǎng)頁的內(nèi)容；（3）top.htm網(wǎng)頁中“精彩呈現(xiàn)”文字的大小為7，字體為“華文行楷”，顏色為“綠色”；（4）下部分框架在垂直方向分割成兩部分，分別占30%和70%，其中右邊部分框架的名稱命名為right;（5）下部分框架的左邊部分嵌入的是left.h

57、tm網(wǎng)頁的內(nèi)容；（6）left.htm網(wǎng)頁中文字的字體為“華文新魏”，大小為5，顏色為“綠色”；并且這些文字均要分別進(jìn)行超鏈接；其中“走進(jìn)科學(xué)”超級鏈接到right2-1.htm，“音樂賞析”超級鏈接到right2-2.htm,它們鏈接后的內(nèi)容均顯示在下部分框架的右邊部分框架中。（7）right2-1.htm和right2-2.htm網(wǎng)頁中標(biāo)題文字居中顯示，字體為“楷體”，大小為，顏色為“綠色”，加粗顯示；正文字體也為“楷體”，大小為，顏色為“綠色”；實(shí)驗(yàn)結(jié)果如下圖：圖2-4點(diǎn)擊框架左邊的鏈接可以使框架右邊變換相應(yīng)內(nèi)容。3、實(shí)例操作步驟(1) 在HTML的編輯頁面輸入代碼,將此HTML代碼以t

58、op.htm命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；(2) 新建HTML頁，在HTML的編輯頁面輸入代碼,將此HTML代碼以left_5-2.htm命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；(3) 新建HTML頁，在HTML的編輯頁面輸入代碼,將此HTML代碼以right_5-2-1.html命名，保存到相應(yīng)文件夾下，例如：保存在d盤根目錄下；(4) 依照文件right_5-2-1.html的標(biāo)準(zhǔn)，做多個文件分別為文件left_5-2.html文件中目錄所對應(yīng)的鏈接。(5) 新建HTML頁，在HTML的編輯頁面輸入代碼,將此HTML代碼以“例5-2.html”命名，保存到

59、相應(yīng)文件夾下，例如：保存在d盤根目錄下；(6) 用網(wǎng)頁瀏覽器打開“例5-2.html”頁面，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼 top.htm<html><head><title>精彩呈現(xiàn)</title></head><body><div align="center"> <font face = 華文行楷 size = 7 color = "#00FF00">精彩呈現(xiàn)</font> </div></body>&l

60、t;/html>源碼 left_5-2.htm<html><head><title>目錄</title></head><body><table width="300" height="310" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="80"

61、><div align="center"><a href = "right_5-2-1.html" target = "mainFrame"><font face = 華文行楷 size = 5 color = "#00FF00">走進(jìn)科學(xué)</font></a></div></td> </tr> <tr> <td height="80"><div align=&qu

62、ot;center"><a href = "right_5-2-2.html" target = "mainFrame"><font face = 華文行楷 size = 5 color = "#00FF00">音樂賞析</font></a></div></td> </tr> <tr> <td height="80"><div align="center">&l

63、t;a href = "right_5-2-3.html" target = "mainFrame"><font face = 華文行楷 size = 5 color = "#00FF00">電腦天地</font></a></div></td> </tr> <tr> <td height="80"><div align="center"><a href = "righ

64、t_5-2-4.html" target = "mainFrame"><font face = 華文行楷 size = 5 color = "#00FF00">健康指南</font></a></div></td> </tr> <tr> <td height="80"><div align="center"><a href = "right_5-2-5.html" ta

65、rget = "mainFrame"><font face = 華文行楷 size = 5 color = "#00FF00">體育世界</font></a></div></td> </tr> <tr> <td height="80"><div align="center"><a href = "right_5-2-6.html" target = "mainFram

66、e"><font face = 華文行楷 size = 5 color = "#00FF00">心情有約</font></a></div></td> </tr></table></body></html>源碼 right_5-2-1.html<html><head><title>走進(jìn)科學(xué)</title></head><body><h1 align="center&q

67、uot;><strong><font color="#00FF00" size = 4 face="楷體_GB2312">走進(jìn)科學(xué)</font></strong></h1><font face = 楷體_GB2312 size = 3 color = "#00FF00">主持人：現(xiàn)在我們看到的，這是一條體長超過四米的一條網(wǎng)蟒，它是所有蟒類當(dāng)中體型最大的，在野外甚至能與鱷魚、鹿等大動物搏斗，并且把它們順利給吞下去變成自己的腹中大餐。但是，我們看如此兇猛的一個動

68、物，過一會，一場滅頂之災(zāi)就在等著它了.寧環(huán)是武漢動物園的蟒蛇飼養(yǎng)員，這天她像往常一樣打開熟悉的兩棲館蟒蛇展廳的大門，開始一天的工作。她忽然覺得有些異樣：往常一開門就盤踞在樹梢咝咝做響的最大的一條蟒蛇，卻突然不見了蹤影。四處尋找之下，寧環(huán)發(fā)現(xiàn)了蜷縮在角落里的巨蟒。她小心翼翼的靠近巨蟒，想把它放回樹上。就在這個時候，巨蟒的一個動作讓她大吃一驚。飼養(yǎng)員寧環(huán)：那個蟒蛇吐痰的時候，就像我們?nèi)送绿狄粯?，猛地一咳，咯！蟒蛇竟然會吐痰？這種以前聽都沒聽過的事情，今天竟然發(fā)生在眼前?？墒蔷掾譃槭裁磿绿的?？難道是它生病了么？</font> </body></html>源碼

69、例5-2.htm<html><head><title>框架導(dǎo)航</title></head><frameset rows="20%,*" cols="*"> <frame src="top.htm" name="topFrame"> <frameset cols="30%,*"> <frame src="left_5-2.html" name="leftFrame&

70、quot;> <frame src="right_5-2-2.html" name="mainFrame"> </frameset></frameset></html>5、實(shí)例思考與擴(kuò)展 （1）如果把布局變換成上下兩部分，上部分是菜單鏈接，怎么做？ （2）是否可以框架布局內(nèi)再嵌套框架布局？十三、實(shí)例名稱：設(shè)計(jì)用戶登記表單1、 實(shí)例目標(biāo)及知識點(diǎn)熟練掌握基本表單的設(shè)計(jì)，為以后網(wǎng)頁的制作打下良好的基礎(chǔ)。表單設(shè)計(jì)到的標(biāo)簽主要有<form></form>2、 實(shí)例功能說明運(yùn)用表單的知識按

71、照以下要求制作html頁面：(1) 表單包含于一個一行一列的表格之中，表格的邊框?yàn)?，寬度為1000,高度為600,邊框顏色為“#336699”,表格居中顯示；(2) “用戶登記”居中顯示，字體大小為7，顏色為“綠色”，字體為“幼圓”；(3) “親愛的用戶便于我們及時與你聯(lián)系。”居中顯示；(4) 性別后的下拉菜單選項(xiàng)依次為“男”、“女”;(5) 文化程度后的下拉菜單選項(xiàng)依次為“小學(xué)”、“初中”、“高中”、“大學(xué)”、“研究生”；(6) 職業(yè)后的下拉菜單選項(xiàng)依次為“教育業(yè)”、“商業(yè)”、“公務(wù)員”、“醫(yī)療”、“法律”、“軍人”、“在讀學(xué)生”；實(shí)驗(yàn)結(jié)果如下圖：圖2-53、實(shí)例操作步驟(1) 在HTML

72、的編輯頁面輸入代碼，將此HTML代碼以后綴html或者h(yuǎn)tm命名，保存到相應(yīng)文件夾下，例如：命名為 例6-1.htm保存在d盤根目錄下；(2) 用網(wǎng)頁瀏覽器打開“例6-1.htm”頁面，即可以看到此頁的頁面效果。4、實(shí)例參考源碼源碼2.4 <html><head><title>用戶登記</title></head><body><form><table width="1000" height="600" border="3" align="

73、;center" cellpadding="0" cellspacing="0" bordercolor="#336699"> <tr> <td bordercolor="#336699"><div align="center"><font face = 幼圓 size = 7 color = "#00FF00"> <p>用戶登記</p></font> <p>親愛的用戶，歡迎您訪問我們的網(wǎng)站，請?zhí)顚懩膫€人信息，便于我們及時與您聯(lián)系</p> <p align="le

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論