不朽情缘4滴血多少倍

書名： Dreamweaver CS6網(wǎng)頁設(shè)計與制作教程
作者名：孟帙穎王寶龍劉靜主編
本章字數(shù)： 2053字
更新時間： 2020-05-07 11:29:12

2.5　項目實訓(xùn)

2.5.1　項目實訓(xùn)一：“第1個HTML”網(wǎng)頁

1．實訓(xùn)目的

通過本案例的學(xué)習(xí)，可以初步了解HTML語言，了解HTML語言中常用標記的書寫格式和作用；掌握輸入HTML代碼、建立HTML文檔和顯示HTML網(wǎng)頁的方法。

2．實訓(xùn)案例效果（圖2-13）

圖　2-13

3．實訓(xùn)設(shè)計過程

（1）輸入HTML代碼。在Windows記事本或Adobe Dreamweaver CS6的代碼視圖中（如圖2-1所示）輸入以下代碼：

<HTML>
<HEAD>
      　<TITLE>我的第1個HTML網(wǎng)頁</TITLE>
</HEAD>
<BODY BGCOLOR=#EEff66>
<CENTER><H1>第1個HTML網(wǎng)頁</H1></CENTER>
<IMG SRC="img/jsj1.GIF" >
<B>制作網(wǎng)頁--HTML語言簡介</B>
<BR>
<PRE>

HTML文件是標準的ASCII文件，它看起來像是加入了許多被稱為鏈接簽(tag)的特殊字符串的普遍文本文件。從結(jié)構(gòu)上講，HTML文件由元素組成，組成HTML文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。大多數(shù)元素是“容器”，即它們有起始標記和結(jié)尾標記。元素的起始標記叫做起始鏈接簽(start tag)，元素的結(jié)束標記叫做結(jié)尾鏈接簽(end tag)，在起始鏈接簽和結(jié)尾鏈接簽之間的部分是元素體。每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標明。

</PRE>
</BODY>
</HTML>

（2）瀏覽網(wǎng)頁。瀏覽網(wǎng)頁有以下三種方法。

方法一：雙擊HTML文檔圖標，可以調(diào)出瀏覽窗口，同時打開該網(wǎng)頁。

方法二：在Adobe Dreamweaver CS6的代碼視圖中，單擊在Ixplore預(yù)覽選項（快捷鍵F12），即可瀏覽網(wǎng)頁。

方法三：打開瀏覽器窗口，在菜單欄中單擊“文件”→“打開”命令。單擊“打開”對話框中的“瀏覽”按鈕，彈出“Microsoft Internet Explorer”對話框，選擇HTML文件，單擊“打開”按鈕，退出“Microsoft Internet Explorer”對話框。此時，在打開的下拉框內(nèi)將出現(xiàn)選中的文件目錄和名稱，單擊“確定”按鈕，即可在瀏覽器中打開所選擇的網(wǎng)頁。

（3）修改和保存網(wǎng)頁代碼。在瀏覽器窗口中，單擊“查看”→“源文件”命令，彈出Windows記事本窗口，并在該窗口中顯示出該網(wǎng)頁的HTML代碼。

提示

也可以在Adobe Dreamweaver CS6的代碼視圖中修改網(wǎng)頁代碼。

修改完代碼之后，在菜單欄中單擊“文件”→“保存”命令，即可保存修改后的代碼?！　　?在網(wǎng)頁上單擊鼠標右鍵，彈出快捷菜單，單擊該菜單的“刷新”命令，即可看到修改后的網(wǎng)頁。

2.5.2　項目實訓(xùn)二：“中國詩詞佳句-作者”網(wǎng)頁

1．實訓(xùn)目的

通過該案例的學(xué)習(xí)，可以進一步了解網(wǎng)頁中其他一些文本標記，合理使用這些標記，可以使網(wǎng)頁的顯示效果更加出色，可以進一步掌握網(wǎng)頁使用文本的方法。

2．實訓(xùn)案例效果（圖2-14）

圖　2-14

3．實訓(xùn)設(shè)計過程

在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：

<HTML>
<HEAD>
<TITLE>中國詩詞佳句-作者</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00">
<H1 ALIGN="CENTER"><FONT COLOR="#FF0000">中國詩詞佳句-作者</FONT></H1>
<P><FONT COLOR="#0000FF">我國是一個詩詞王國，自《詩經(jīng)》以來，詩作有多少？作者有多少？無法回答。只能說如浩海煙云，難以計數(shù)。僅以《全唐詩》而言，作家二千余人，作品五萬余首之多。這是我國的文化瑰寶，民族的奇珍。</FONT>
<!--下面是正文內(nèi)容-->
<P>下面介紹幾句著名的詩句，把鼠標移到詩句之上，可以看到該詩句的作者姓名、朝代和詩句源于的作品名稱。
<P TITLE="趙壹—東漢人，源于《長歌行》">1.少壯不努力，老大徒傷悲
<P TITLE="李白—唐朝人，源于《將進酒》">2.天生我材必有用，千金散盡還復(fù)來
<P TITLE ="王維—唐朝人，源于《九月九日憶山東兄弟》">3.每逢佳節(jié)倍思親
<P TITLE ="陸游—宋朝人，源于《游山西村》">4.山重水復(fù)疑無路，柳暗花明又一村
</BODY>
</HTML>

將該HTML文件保存在站點根文件夾的相應(yīng)文件夾中。用瀏覽器打開該網(wǎng)頁，即可看到“中國詩詞佳句-作者”網(wǎng)頁的顯示效果。

2.5.3　項目實訓(xùn)三：“圖像邊框”網(wǎng)頁

1．實訓(xùn)目的

通過該案例的學(xué)習(xí)，可以進一步了解網(wǎng)頁中插入GIF動畫和圖像的方法，給圖像和GIF動畫添加邊框的方法，背景平鋪圖像和給圖像添加文字說明的方法，以及調(diào)整圖像和文本相對位置的方法。

2．實訓(xùn)案例效果（圖2-15）

圖　2-15

3．實訓(xùn)設(shè)計過程

在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文件保存在站點根文件夾的相應(yīng)文件夾中。用瀏覽器打開該網(wǎng)頁，即可看到“圖像邊框”網(wǎng)頁的顯示效果。

2.5.4　項目實訓(xùn)四：“鏈接技術(shù)演示”網(wǎng)頁

1．實訓(xùn)目的

通過該案例的學(xué)習(xí)，可以掌握在網(wǎng)頁中加入超文本鏈接的方法，創(chuàng)建圖像或動畫鏈接的方法。

2．實訓(xùn)案例效果（圖2-16）

圖　2-16

3．實訓(xùn)設(shè)計過程

在Adobe Dreamweaver CS6代碼視圖中，輸入以下代碼：

<HTML>
<HEAD>
<TITLE> 文字、圖像和動畫鏈接</TITLE>
</HEAD >
<BODY>
<H3 ALIGN=CENTER>文字、圖像和動畫鏈接</H3>
<P ALIGN="CENTER"><A HREF="HTML1.HTM">鏈接到“第1個HTML網(wǎng)頁” </A>
<P ALIGN="CENTER"><A HREF="HTML2-1.HTM">鏈接到“中國詩詞佳句-作者”網(wǎng)頁 </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文件保存在站點根文件夾的相應(yīng)文件夾中。用瀏覽器打開該網(wǎng)頁，即可看到“鏈接技術(shù)演示”網(wǎng)頁的顯示效果。

2.5.5　項目實訓(xùn)五：“最新消息公告”網(wǎng)頁

1．實訓(xùn)目的

通過該案例的學(xué)習(xí)，掌握表格標記和滾動標記的基本運用方法和技巧，學(xué)會制作公告牌、公告文字向上滾動、當鼠標經(jīng)過時停止?jié)L動、當鼠標移開時繼續(xù)滾動的方法。

2．實訓(xùn)案例效果（圖2-17）

圖　2-17

3．實訓(xùn)設(shè)計過程

在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.“網(wǎng)頁制作”成績已經(jīng)在網(wǎng)上公布</a></font>
<P>
<font style="font-size:14px"><a href="#">3.“多媒體技術(shù)”課程于2012年4月7日上午10:30開始</a></font>
<P>
<font style="font-size:14px"><a href="#">4.“網(wǎng)絡(luò)技術(shù)最新動向”講座在2012年4月7日上午11:00開始</a></font>
<P>
<font style="font-size:14px"><a href="#">5.“VB程序設(shè)計”備課會在2012年4月7日下午2:00開始</a></font><P>
<font style="font-size:14px"><a href="#">6.請教師將教學(xué)計劃于2012年4月7日以前交教務(wù)處</a></font><P>
</marquee>
</table>

</HTML>將該HTML文件保存在站點根文件夾的相應(yīng)文件夾中。用瀏覽器打開該網(wǎng)頁，即可看到“最新消息公告”網(wǎng)頁的顯示效果。

2.5.6　項目實訓(xùn)六：“圖像切換”網(wǎng)頁

1．實訓(xùn)目的

通過該案例的學(xué)習(xí)，可以掌握在網(wǎng)頁中插入Flash動畫和其他視頻、音頻的方法。

2．實訓(xùn)案例效果（圖2-18）

圖　2-18

3．實訓(xùn)設(shè)計過程

在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文件保存在站點根文件夾的相應(yīng)文件夾中。用瀏覽器打開該網(wǎng)頁，即可看到“圖像切換”網(wǎng)頁的顯示效果。

官术网_书友最值得收藏!

Dreamweaver CS6網(wǎng)頁設(shè)計與制作教程

2.5 項目實訓(xùn)

2.5.1 項目實訓(xùn)一：“第1個HTML”網(wǎng)頁

2.5.2 項目實訓(xùn)二：“中國詩詞佳句-作者”網(wǎng)頁

2.5.3 項目實訓(xùn)三：“圖像邊框”網(wǎng)頁

2.5.4 項目實訓(xùn)四：“鏈接技術(shù)演示”網(wǎng)頁

2.5.5 項目實訓(xùn)五：“最新消息公告”網(wǎng)頁

2.5.6 項目實訓(xùn)六：“圖像切換”網(wǎng)頁

2.5　項目實訓(xùn)

2.5.1　項目實訓(xùn)一：“第1個HTML”網(wǎng)頁

2.5.2　項目實訓(xùn)二：“中國詩詞佳句-作者”網(wǎng)頁

2.5.3　項目實訓(xùn)三：“圖像邊框”網(wǎng)頁

2.5.4　項目實訓(xùn)四：“鏈接技術(shù)演示”網(wǎng)頁

2.5.5　項目實訓(xùn)五：“最新消息公告”網(wǎng)頁

2.5.6　項目實訓(xùn)六：“圖像切換”網(wǎng)頁