【實例13】HTML案例教學網(wǎng)頁 (2).doc

“HTML案例教學”網(wǎng)頁【實例1】第1個HTML網(wǎng)頁制作的第1個HTML網(wǎng)頁在瀏覽器中的顯示效果如圖1-1-1所示?？梢钥吹?，它有一級標題“第1個HTML網(wǎng)頁”、二級標題和段落文字，在二級標題文字的左邊還有一個學生操作計算機的動畫，段落文字是介紹關(guān)于HTML基本常識的文字。通過本實例的學習，可以初步了解HTML語言，了解HTML語言中常用標記的書寫格式和作用；掌握輸入HTML代碼、建立HTML文檔和顯示HTML網(wǎng)頁的方法。1輸入HTML代碼編寫HTML語言程序可以在Windows記事本內(nèi)書寫，在存盤輸入文件名時，一定要輸入HTML語言文件的擴展名：.htm或.html。下面給出一個用記事本編寫的簡單的HTML網(wǎng)頁文檔（名字為“【實例1】第1個HTML網(wǎng)頁.htm”），如圖1-1-2所示。在瀏覽器IE中觀察HTML網(wǎng)頁文檔，可以看到如圖1-1-1所示的網(wǎng)頁。 圖1-1-1 在瀏覽器IE中觀察網(wǎng)頁 圖1-1-2 記事本編寫的“【實例1】第1個HTML網(wǎng)頁.htm”網(wǎng)頁文檔注意：HTML文檔中的各種英文標記要在英文輸入方式下輸入，不分大小寫。為了便于管理，可在磁盤根目錄下建立一個文件夾（例如名字為“TDZYF”的文件夾），用來存儲編寫的HTML語言程序文檔。再在該文件夾下建立名字為“JPG”和“GIF”的兩個文件夾，用來保存網(wǎng)頁中的圖像文件和GIF格式文件。2瀏覽網(wǎng)頁 圖1-1-3 “打開”對話框雙擊HTML文檔圖標，可以調(diào)出瀏覽器窗口，同時打開該網(wǎng)頁。另外還可以采用如下方法來瀏覽網(wǎng)頁。（1）雙擊瀏覽器圖標，調(diào)出瀏覽器窗口。然后，單擊瀏覽器窗口內(nèi)的“文件”“打開”菜單命令，調(diào)出“打開”對話框，如圖1-1-3所示（“打開”文本框內(nèi)還沒有內(nèi)容）。（2）單擊“打開”對話框中的“瀏覽”按鈕，調(diào)出“Microsoft Internet Explorer”對話框，選擇HTML文件，單擊“打開”按鈕，退出“Microsoft Internet Explorer”對話框，回到“打開”對話框，此時在其“打開”下拉列表框內(nèi)已有選中的文件目錄與名字，如圖1-1-3所示。（3）單擊“打開”對話框中的“確定”按鈕，即可在瀏覽器中打開選擇的網(wǎng)頁了。3修改和保存網(wǎng)頁（1）單擊“Microsoft Internet Explorer”瀏覽器窗口中的“查看”“源文件”菜單命令，調(diào)出Windows記事本窗口，并在該窗口中顯示出該網(wǎng)頁的HTML代碼。此時可以修改網(wǎng)頁程序。（2）修改完程序之后，單擊Windows記事本窗口內(nèi)的“文件”“保存”菜單命令，即可將修改后的程序保存。然后，將鼠標指針移到圖1-1-1所示的網(wǎng)頁之上，單擊鼠標右鍵，調(diào)出其快捷菜單，再單擊該菜單中的“刷新”菜單命令，即可看到修改后的網(wǎng)頁。也可以單擊“查看”“刷新”菜單命令來刷新網(wǎng)頁?！緦嵗?】“成語解釋”網(wǎng)頁 “成語解釋”網(wǎng)頁在瀏覽器中顯示了幾句著名的成語，當鼠標移到成語文字之上時，會顯示該成語的解釋，如圖1-2-6所示。文本屬于網(wǎng)頁中的基本元素，在【實例1】中已經(jīng)介紹了部分文本標記。通過本實例的學習，可以進一步了解網(wǎng)頁中其他的一些文本標記，合理使用這些標記，可以使網(wǎng)頁的顯示效果更加出色，可以進一步掌握網(wǎng)頁使用文本的方法。該實例的制作方法如下。打開記事本程序，輸入如下HTML代碼。 中國詩詞佳句-作者下面介紹幾句著名的成語，把鼠標移到成語文字之上，可以看到該成語的解釋。 1.人心如面 2.亡羊補牢 3.天之驕子 4.鳥盡弓藏5.好逸惡勞將該HTML文件以名字“【實例2】成語解釋網(wǎng)頁.htm”保存在“TDZYF”目錄下。用瀏覽器打開該網(wǎng)頁，即可看到“成語解釋”網(wǎng)頁的顯示效果，如圖1-2-6所示。圖1-2-6 “成語解釋”網(wǎng)頁的顯示效果【實例3】“蜜蜂和小魚”網(wǎng)頁“蜜蜂和小魚”網(wǎng)頁在瀏覽器中的顯示效果如圖1-2-7所示。網(wǎng)頁中的蜜蜂和小魚圖像除了大小不同以外，圖像周圍邊框的粗細程度也不同。通過本實例的學習，可以進一步了解網(wǎng)頁中插入GIF動畫和圖像的方法，給GIF動畫和圖像添加邊框的方法，背景平鋪圖像的方法。該實例的制作方法如下。圖1-2-7 “蜜蜂和小魚”網(wǎng)頁在網(wǎng)頁所在的文件夾內(nèi)的GIF文件夾內(nèi)有“T2.gif”和“TU1.gif”兩個動畫文件，JPG文件夾內(nèi)有“M3.jpg” 圖像文件。打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例3】蜜蜂和小魚.htm”保存在“TDZYF”目錄下。用瀏覽器打開該網(wǎng)頁，即可看到“蜜蜂和小魚”網(wǎng)頁的顯示效果，如圖1-2-7所示。圖像的大小和邊框【實例4】光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動網(wǎng)頁“光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動”網(wǎng)頁在瀏覽器中的顯示效果如圖1-3-1所示?？梢钥吹絻蓚€“光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動”動畫在不斷播放，同時網(wǎng)頁中也在播放MIDI音樂?！肮猸h(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動”動畫是插入的兩個相同的Flash動畫。在網(wǎng)頁中插入Flash動畫和MIDI音樂等多媒體后，可以使網(wǎng)頁的多媒體效果更加出色?，F(xiàn)在的網(wǎng)頁中經(jīng)常會使用Flash動畫和MIDI音樂，最主要的原因是Flash動畫可以實現(xiàn)復雜的動畫效果，而且Flash動畫和MIDI音樂的文件很小，非常利于在網(wǎng)絡上傳輸。圖1-3-1 “光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動”網(wǎng)頁的顯示效果在瀏覽器中顯示Flash動畫的前提是電腦中已經(jīng)安裝了播放Flash的插件。如果沒有安裝該插件，可以在/Flash/網(wǎng)站中下載。通過本實例的學習，可以掌握在網(wǎng)頁中插入Flash動畫和MIDI音樂的方法。該實例的制作方法如下。（1）在網(wǎng)頁所在的文件夾內(nèi)的MIDI文件夾內(nèi)存放“MIDI0.MID”文件，在FLASH文件夾內(nèi)存放“光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動.SWF”Flash文件。（2）打開記事本程序，輸入如下HTML代碼。光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動 （3）將該HTML文件以名字“【實例4】光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動網(wǎng)頁.htm”保存在“TDZYF”目錄下。用瀏覽器打開該網(wǎng)頁，即可看到“光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動”網(wǎng)頁的顯示效果，如圖1-3-1所示?！緦嵗?】“文字、圖像和動畫鏈接”網(wǎng)頁“文字、圖像和動畫鏈接”網(wǎng)頁在瀏覽器中的顯示效果如圖1-4-1所示。在該網(wǎng)頁中列出了前面制作的各個網(wǎng)頁的鏈接，以及兩個動畫。單擊其中任意一個鏈接即可調(diào)出相應的頁面，單擊圖像可以調(diào)出相應的網(wǎng)頁。通過本實例的學習，可以掌握在網(wǎng)頁中加入超文本鏈接的方法，創(chuàng)建圖像或動畫鏈接的方法。該實例的制作方法如下。 圖1-4-1 “文字、圖像和動畫鏈接”網(wǎng)頁顯示效果打開記事本程序，輸入如下HTML代碼。 文字、圖像和動畫鏈接文字、圖像和動畫鏈接鏈接到“【實例1】第1個HTML網(wǎng)頁” 鏈接到“【實例2】成語解釋網(wǎng)頁”網(wǎng)頁 鏈接到“【實例3】蜜蜂和小魚網(wǎng)頁” 鏈接到“【實例4】光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動” 將該HTML文件以名字“【實例5】文字、圖像和動畫鏈接.htm”保存在“TDZYF”目錄下。用瀏覽器打開該網(wǎng)頁，即可看到“文字、圖像和動畫鏈接”網(wǎng)頁的顯示效果，如圖1-4-1所示。【實例6】“中國名勝古跡”網(wǎng)頁在“中國名勝古跡”網(wǎng)頁中顯示了我國的部分名勝古跡，如圖1-5-2所示。由于網(wǎng)頁中的內(nèi)容比較多，在一個窗口內(nèi)不能完全顯示，所以在網(wǎng)頁中增加了“錨點”的鏈接。在標題下面列出了網(wǎng)頁中的遺產(chǎn)名稱，單擊其中任意一個文字即可鏈接到相應的位置。單擊“天壇”文字后，網(wǎng)頁的顯示效果如圖1-5-3所示。該實例的制作方法如下。 圖1-5-2 “中國名勝古跡”網(wǎng)頁的顯示效果之一 圖1-5-3 “中國名勝古跡”網(wǎng)頁的顯示效果之二單擊“郵箱地址：”超級鏈接文字后，系統(tǒng)將自動啟動郵件客戶程序（默認時啟動Outlook Express），并將指定的郵件地址填寫到“收件人”欄中，用戶可以編輯并發(fā)送該郵件，如圖1-5-1所示。通過本實例的學習，可以掌握在同一個網(wǎng)頁中建立鏈接的方法，以及建立電子郵件鏈接的方法和鏈接到其他頁面錨點地方法。打開記事本程序，輸入如下HTML代碼。中國名勝古跡網(wǎng)頁中國名勝古跡網(wǎng)頁故宮長城頤和園天壇龍門石窟郵箱地址： 故宮故宮位于北京市中心，也稱“紫禁城”。這里曾居住過24個皇帝，是明清兩代（公元13681911年）的皇宮，現(xiàn)辟為“故宮博物院”。故宮的整個建筑金碧輝煌，莊嚴絢麗，被譽為世界五大宮之一（北京故宮、法國凡爾賽宮、英國白金漢宮、美國白宮、俄羅斯克里姆林宮），并被聯(lián)合國科教文組織列為“世界文化遺產(chǎn)”。長城約公元前220年，一統(tǒng)天下的秦始皇，將修建于早些時候的一些斷續(xù)的防御工事連接成一個完整的防御系統(tǒng)，用以抵抗來自北方的侵略。在明代（公元13681644年），又繼續(xù)加以修筑，使長城成為世界上最長的軍事設(shè)施。它在文化藝術(shù)上的價值，足以與其在歷史和戰(zhàn)略上的重要性相媲美。頤和園北京頤和園始建于公元1750年，1860年在戰(zhàn)火中嚴重損毀，1886年在原址上重新進行了修繕。其亭臺、長廊、殿堂、廟宇和小橋等人工景觀與自然山巒和開闊的湖面相互和諧、藝術(shù)地融為一體，堪稱中國風景園林設(shè)計中的杰作。天壇天壇建于公元15世紀上半葉，座落在皇家園林當中，四周古松環(huán)抱，是保存完好的壇廟建筑群，無論在整體布局還是單一建筑上，都反映出天地之間的關(guān)系，而這一關(guān)系在中國古代宇宙觀中占據(jù)著核心位置。同時，這些建筑還體現(xiàn)出帝王將相在這一關(guān)系中所起的獨特作用。龍門石窟龍門地區(qū)的石窟和佛龕展現(xiàn)了中國北魏晚期至唐代（公元493907年）期間，最具規(guī)模和最為優(yōu)秀的造型藝術(shù)。這些詳實描述佛教中宗教題材的藝術(shù)作品，代表了中國石刻藝術(shù)的最高峰。將該HTML文件以名字“【實例6】中國名勝古跡網(wǎng)頁.htm”保存在“TDZYF”目錄下。用瀏覽器打開該網(wǎng)頁，即可看到“中國名勝古跡網(wǎng)頁”網(wǎng)頁的顯示效果，如圖1-5-2所示?！緦嵗?】“HTML網(wǎng)頁瀏覽”網(wǎng)頁“HTML網(wǎng)頁瀏覽”網(wǎng)頁的顯示效果如圖1-6-6上圖所示。該網(wǎng)頁被分為了3部分，其中，網(wǎng)頁的頂部顯示了網(wǎng)頁的標題，左邊顯示了一些技術(shù)名稱，右邊顯示了一段引導用戶的文字。單擊頁面左邊列出的技術(shù)名稱文字，即可在右面的頁面中顯示出相應的技術(shù)說明，如圖1-6-6下圖所示。通過本實例的學習，可以掌握創(chuàng)建框架和框架窗口之間鏈接的有關(guān)知識。該實例的制作方法如下。 圖1-6-6 “HTML網(wǎng)頁瀏覽”網(wǎng)頁的顯示效果（1）打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例7】TOP.htm”保存在“TDZYF” 文件夾內(nèi)。HTML網(wǎng)頁瀏覽單擊左邊的網(wǎng)頁名稱，即可在右邊觀察到網(wǎng)頁效果（2）打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例7】RIGHT.htm”保存在“TDZYF”文件夾內(nèi)。<-請單擊左面的網(wǎng)頁名稱（3）打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例7】LEFT.htm”保存在“TDZYF”文件夾內(nèi)。網(wǎng)頁名稱【實例1】第1個HTML網(wǎng)頁【實例2】成語解釋網(wǎng)頁【實例3】蜜蜂和小魚網(wǎng)頁【實例4】光環(huán)繞自轉(zhuǎn)地球轉(zhuǎn)動（4）打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例7】HTML網(wǎng)頁瀏覽網(wǎng)頁.htm”保存在“TDZYF”文件夾內(nèi)。 用瀏覽器打開“【實例7】HTML網(wǎng)頁瀏覽網(wǎng)頁.htm”網(wǎng)頁，即可看到“【實例7】HTML網(wǎng)頁瀏覽網(wǎng)頁”網(wǎng)頁的顯示效果，如圖1-6-6上圖所示?！緦嵗?】“計算機硬件和軟件”網(wǎng)頁 “計算機硬件和軟件”網(wǎng)頁的顯示效果如圖1-7-10所示。從圖1-7-10中可以看到，表格設(shè)置了邊框顏色和背景圖像（花紋紙圖像），但在表頭標簽中又設(shè)置背景顏色，所以，表頭部分的花紋圖像被單元格背景色覆蓋了。通過本實例的學習，可以掌握有關(guān)制作表格德方法。該實例的制作方法如下。圖1-7-10 “計算機硬件和軟件2”網(wǎng)頁的顯示效果打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例8】計算機硬件和軟件.htm”保存在“TDZYF” 文件夾內(nèi)。表格顏色與背景-計算機硬件和軟件計算機硬件和軟件 計算機硬件 計算機軟件 CPU和內(nèi)存 硬盤和光驅(qū) Dreamweaver 8 Flash 8 Photoshop CS2 【實例9】“課程表”網(wǎng)頁“課程表”網(wǎng)頁的顯示效果如圖1-7-9所示。從圖1-7-9中可以看到。通過本實例的學習，可以進一步掌握有關(guān)制作表格的一些方法。該實例的制作方法如下。圖1-7-9 “課程表”網(wǎng)頁的顯示效果打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字“【實例9】課程表網(wǎng)頁.htm”保存在“TDZYF” 文件夾內(nèi)。課程表課程表 星期一