- Dreamweaver CS6網頁設計與制作教程
- 孟帙穎 王寶龍 劉靜主編
- 2053字
- 2020-05-07 11:29:12
2.5 項目實訓
2.5.1 項目實訓一：“第1個HTML”網頁
1．實訓目的
通過本案例的學習，可以初步了解HTML語言，了解HTML語言中常用標記的書寫格式和作用；掌握輸入HTML代碼、建立HTML文檔和顯示HTML網頁的方法。
2．實訓案例效果（圖2-13）
圖 2-13
3．實訓設計過程
（1）輸入HTML代碼。在Windows記事本或Adobe Dreamweaver CS6的代碼視圖中（如圖2-1所示）輸入以下代碼：
<HTML>
<HEAD>
<TITLE>我的第1個HTML網頁</TITLE>
</HEAD>
<BODY BGCOLOR=#EEff66>
<CENTER><H1>第1個HTML網頁</H1></CENTER>
<IMG SRC="img/jsj1.GIF" >
<B>制作網頁--HTML語言簡介</B>
<BR>
<PRE>
HTML文件是標準的ASCII文件，它看起來像是加入了許多被稱為鏈接簽(tag)的特殊字符串的普遍文本文件。從結構上講，HTML文件由元素組成，組成HTML文件的元素有許多種，用于組織文件的內容和指導文件的輸出格式。大多數元素是“容器”，即它們有起始標記和結尾標記。元素的起始標記叫做起始鏈接簽(start tag)，元素的結束標記叫做結尾鏈接簽(end tag)，在起始鏈接簽和結尾鏈接簽之間的部分是元素體。每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內標明。
</PRE> </BODY> </HTML>
（2）瀏覽網頁。瀏覽網頁有以下三種方法。
方法一：雙擊HTML文檔圖標，可以調出瀏覽窗口，同時打開該網頁。
方法二：在Adobe Dreamweaver CS6的代碼視圖中，單擊在Ixplore預覽選項（快捷鍵F12），即可瀏覽網頁。
方法三：打開瀏覽器窗口，在菜單欄中單擊“文件”→“打開”命令。單擊“打開”對話框中的“瀏覽”按鈕，彈出“Microsoft Internet Explorer”對話框，選擇HTML文件，單擊“打開”按鈕，退出“Microsoft Internet Explorer”對話框。此時，在打開的下拉框內將出現選中的文件目錄和名稱，單擊“確定”按鈕，即可在瀏覽器中打開所選擇的網頁。
（3）修改和保存網頁代碼。在瀏覽器窗口中，單擊“查看”→“源文件”命令，彈出Windows記事本窗口，并在該窗口中顯示出該網頁的HTML代碼。
提示
也可以在Adobe Dreamweaver CS6的代碼視圖中修改網頁代碼。
修改完代碼之后，在菜單欄中單擊“文件”→“保存”命令，即可保存修改后的代碼。 在網頁上單擊鼠標右鍵，彈出快捷菜單，單擊該菜單的“刷新”命令，即可看到修改后的網頁。
2.5.2 項目實訓二：“中國詩詞佳句-作者”網頁
1．實訓目的
通過該案例的學習，可以進一步了解網頁中其他一些文本標記，合理使用這些標記，可以使網頁的顯示效果更加出色，可以進一步掌握網頁使用文本的方法。
2．實訓案例效果（圖2-14）
圖 2-14
3．實訓設計過程
在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：
<HTML> <HEAD> <TITLE>中國詩詞佳句-作者</TITLE> </HEAD> <BODY BGCOLOR="#FFFF00"> <H1 ALIGN="CENTER"><FONT COLOR="#FF0000">中國詩詞佳句-作者</FONT></H1> <P><FONT COLOR="#0000FF">我國是一個詩詞王國，自《詩經》以來，詩作有多少？作者有多少？無法回答。只能說如浩海煙云，難以計數。僅以《全唐詩》而言，作家二千余人，作品五萬余首之多。這是我國的文化瑰寶，民族的奇珍。</FONT> <!--下面是正文內容--> <P>下面介紹幾句著名的詩句，把鼠標移到詩句之上，可以看到該詩句的作者姓名、朝代和詩句源于的作品名稱。 <P TITLE="趙壹—東漢人，源于《長歌行》">1.少壯不努力，老大徒傷悲 <P TITLE="李白—唐朝人，源于《將進酒》">2.天生我材必有用，千金散盡還復來 <P TITLE ="王維—唐朝人，源于《九月九日憶山東兄弟》">3.每逢佳節倍思親 <P TITLE ="陸游—宋朝人，源于《游山西村》">4.山重水復疑無路，柳暗花明又一村 </BODY> </HTML>
將該HTML文件保存在站點根文件夾的相應文件夾中。用瀏覽器打開該網頁，即可看到“中國詩詞佳句-作者”網頁的顯示效果。
2.5.3 項目實訓三：“圖像邊框”網頁
1．實訓目的
通過該案例的學習，可以進一步了解網頁中插入GIF動畫和圖像的方法，給圖像和GIF動畫添加邊框的方法，背景平鋪圖像和給圖像添加文字說明的方法，以及調整圖像和文本相對位置的方法。
2．實訓案例效果（圖2-15）
圖 2-15
3．實訓設計過程
在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：
<HTML> <READ> <TITLE>圖像的大小和邊框</TITLE> </HEAD> <BODY BACKGROUND="img/BJT1.gif"> <IMG SRC="img/M3.gif" HEIGHT=120 WIDTH=120 BORDER=6> <IMG SRC="img/M3.gif" HEIGHT=90 WIDTH=90 BORDER=4> <IMG SRC="img/M3.gif" HEIGHT=50 WIDTH=50 BORDER=2> <IMG SRC="img/M1.jpg" HEIGHT=120 WIDTH=120 BORDER=6> <IMG SRC="img/M1.jpg" HEIGHT=90 WIDTH=90 BORDER=4> <IMG SRC="img/M1.jpg" HEIGHT=50 WIDTH=50 BORDER=2 > </BODY> </HTML>
將該HTML文件保存在站點根文件夾的相應文件夾中。用瀏覽器打開該網頁，即可看到“圖像邊框”網頁的顯示效果。
2.5.4 項目實訓四：“鏈接技術演示”網頁
1．實訓目的
通過該案例的學習，可以掌握在網頁中加入超文本鏈接的方法，創建圖像或動畫鏈接的方法。
2．實訓案例效果（圖2-16）
圖 2-16
3．實訓設計過程
在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：
<HTML> <HEAD> <TITLE> 文字、圖像和動畫鏈接</TITLE> </HEAD > <BODY> <H3 ALIGN=CENTER>文字、圖像和動畫鏈接</H3> <P ALIGN="CENTER"><A HREF="HTML1.HTM">鏈接到“第1個HTML網頁” </A> <P ALIGN="CENTER"><A HREF="HTML2-1.HTM">鏈接到“中國詩詞佳句-作者”網頁 </A> <P ALIGN="CENTER"><A HREF="HTML3-1.htm">鏈接到“圖像邊框” </A> <P ALIGN="CENTER"><A HREF="HTML4-1.html">鏈接到“圖像切換” </A> <A HREF="HTML2-1.HTM"><IMG SRC="img/L2.JPG"></A> <A HREF="HTML3-1.HTM"><IMG SRC="img/L3.GIF"></A> </BODY> </HTML>
將該HTML文件保存在站點根文件夾的相應文件夾中。用瀏覽器打開該網頁，即可看到“鏈接技術演示”網頁的顯示效果。
2.5.5 項目實訓五：“最新消息公告”網頁
1．實訓目的
通過該案例的學習，掌握表格標記和滾動標記的基本運用方法和技巧，學會制作公告牌、公告文字向上滾動、當鼠標經過時停止滾動、當鼠標移開時繼續滾動的方法。
2．實訓案例效果（圖2-17）
圖 2-17
3．實訓設計過程
在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：
<HTML> <head> <TITLE>最新消息公告</TITLE> </head> <table width="400" height="220" cellspacing="3" cellpadding="8" bgcolor="#CCCCFF" align="center"> <tr> <td height="36" bgcolor="#CCFFFF" align="center"> <font style="font-size:16px" face="黑體"><b>最新消息公告</b></font> <tr> <td valign="top" bgcolor="#FFFFFF"> <marquee scrollamount=2 direction="up" id="gonggao" onMouseOver= "gonggao.stop()" onMouseOut="gonggao.start()"> <font style="font-size:14px"><a href="#">1.Java補考在2012年4月7日上午10:00進行</a></font> <P> <font style="font-size:14px"><a href="#">2.“網頁制作”成績已經在網上公布</a></font> <P> <font style="font-size:14px"><a href="#">3.“多媒體技術”課程于2012年4月7日上午10:30開始</a></font> <P> <font style="font-size:14px"><a href="#">4.“網絡技術最新動向”講座在2012年4月7日上午11:00開始</a></font> <P> <font style="font-size:14px"><a href="#">5.“VB程序設計”備課會在2012年4月7日下午2:00開始</a></font><P> <font style="font-size:14px"><a href="#">6.請教師將教學計劃于2012年4月7日以前交教務處</a></font><P> </marquee> </table>
</HTML>將該HTML文件保存在站點根文件夾的相應文件夾中。用瀏覽器打開該網頁，即可看到“最新消息公告”網頁的顯示效果。
2.5.6 項目實訓六：“圖像切換”網頁
1．實訓目的
通過該案例的學習，可以掌握在網頁中插入Flash動畫和其他視頻、音頻的方法。
2．實訓案例效果（圖2-18）
圖 2-18
3．實訓設計過程
在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：
<html> <head> <title>圖像切換</title> </head> <body> <h3 align=center>圖像切換</h3>. < embed src ="flash/圖像切換.SWF" width="300" height="200"></embed> <embed src="flash/圖像切換.SWF" width="300" height="200"></embed> </body> </html>
將該HTML文件保存在站點根文件夾的相應文件夾中。用瀏覽器打開該網頁，即可看到“圖像切換”網頁的顯示效果。
- 網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop＋HTML+CSS+JavaScript
- Dreamweaver CS5+ASP動態網站設計實用手冊
- Dreamweaver CS6網頁設計與制作教程
- 全能網頁設計師精煉手冊
- HTML+CSS+JavaScript網頁制作案例教程（第2版）
- Photoshop電商網頁廣告設計實戰從入門到精通
- JavaScript網頁游戲制作輕松學
- Linux系統與網絡服務管理技術大全（第二版）
- Dreamweaver CC網頁設計從入門到精通（微課精編版）
- 在實戰中成長：JSP開發之路
- Dreamweaver CS5網頁制作
- 別具光芒：CSS網頁布局案例剖析
- 眾妙之門：JavaScript與jQuery技術精粹
- 移動優先與響應式Web設計(2冊)
- 動態網頁設計與開發：JavaScript + jQuery