一、案例描述
1、 考核知识点
HTML5文档基本格式
2、 练习目标
初步了解HTML5文档基本格式。
能够运用HTML5文档基本格式制作简单的页面。
3、 需求分析
学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。
4、 案例分析
- 效果如图1-1所示。
- 具体实现步骤如下：
a) 新建Dreamweaver默认文档。
b) 在标记中添加网页标题。
c) 在标记中添加两个段落。
二、案例实现
新建HTML页面，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门案例</title>
</head>
<body>
<p>吾生也有涯 <br>而知也无涯</p>
</body>
</html>
保存后，在谷歌浏览器中预览，效果如图1-2所示。
【案例1-2】 标题标记的应用
一、案例描述
1、 考核知识点
HTML标记、标记的属性
2、 练习目标
掌握<hr />标记及其属性的应用。
熟练掌握<h1>到<h6>标记的使用。
3、 需求分析
在搜索引擎的文本分析中，标题的信息权重要比正文的大，所以标题的样式非常重要。本案例通过把标题标记和常规文本进行对比输出各种样式的标题。
4、 案例分析
1) 效果如图1-3所示。
2) 具体实现步骤如下所示：
a) 首先在Dreamweaver中添加一段无格式文本作为参照文本。
b) 添加水平线，并为水平线设置颜色、宽高、左对齐属性。
c) 依次添加标题标记<h1>、<h2>、<h3>、<h4>样式文本。
二、案例实现
新建HMTL文件，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标记的应用</title>
</head>
<body>
<p>我是普通的文本<hr size="5" align="left" width="1080px"color="aqua"/></p>
<h1>我是h1标记的文本</h1>
<h2>我是h2标记的文本</h2>
<h3>我是h3标记的文本</h3>
<h4>我是h4标记的文本</h4>
</body>
</html>
保存后，在谷歌浏览器中预览，效果如图1-4所示。
【案例1-3】 城东早春
一、案例描述
1、 考核知识点
段落标记、文本格式化标记
2、 练习目标
了解斜体、粗体、下划线、删除线等文本格式化标记。
掌握<p>标记及其属性的应用。
3、 需求分析
在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记。本案例通过使用文本格式化标记输出特殊格式的文本。
4、 案例分析
1) 效果如图1-5所示。
2) 具体实现步骤如下：
a) 在Dreamweaver默认文档中写好6个段落。
b) 在每个段落中分别使用不同的文本格式化标记：
第一个段落即题目设置为粗体；
第二个段落即作者设置为斜体；
第四个段落添加下划线效果；
第六个段落添加删除线效果。
c) 其他段落使用普通的文本格式输出。
二、案例实现
新建HTML页面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城东早春</title>
</head>
<body>
<p align="center" ><b> 城东早春</b></p>
<p align="right"><i>作者：杨巨源 </i></p>
<p align="left"><font color="blue" >诗家清景在新春， </font></p>
<p align="left"><u>绿柳才黄未匀。 </u></p>
<p align="left"><font color="blue">若待上林花似锦。</font></p>
<p align="left"><del>出门俱是看花人。</del></p>
</body>
</html>
保存后，在谷歌浏览器中预览，效果如图1-6所示。
【案例1-4】 如何插入特殊字符
一、案例描述
1、 考核知识点
特殊字符标记
2、 练习目标
掌握常用特殊字符标记的使用。
3、 需求分析
制作网页时，为了让数学符号、版权信息等符号正常显示，就需要了解插入特殊字符的方法。本案例将通过插入特殊字符的方法在页面输出各种各样的特殊字符。
4、 案例分析
1) 效果如图1-7所示。
2) 具体实现步骤如下：
a) 在Dreamweaver默认文档中添加5个段落。
b) 在每个段落中分别使用不同的代码插入相应的特殊字符。
c)
二、案例实现
新建HTML页面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>如何插入特殊字符</title>
</head>
<body>
<p>我是特殊字符空 格</p>
<p>我是特殊字符小于号 <</p>
<p>我是特殊字符大于号 ></p>
<p>我是版权符号 ©</p>
<p>我是注册商标®</p>
</body>
</html>
保存后，在谷歌浏览器中预览，效果如图1-8所示。
【案例1-5】 <img />标记的应用
一、案例描述
1、 考核知识点
图像标记<img />
2、 练习目标
掌握在网页中插入图像的方法。
掌握图像的src、width、height、border等属性的应用。
3、 需求分析
为了使网页传达的信息更加形象直观，就需要插入图像。图像不但可以减少文本的使用，还能使网页更加美观。本案例通过对图像设置不同属性使图像显示不同的样式。
4、 案例分析
1) 效果如图1-9所示。
2) 具体实现步骤如下所示：
a) 在Dreamweaver中插入一个普通的图像作为参照。
b) 对比参照图像，分别给图像标记添加不同的属性。
二、案例实现
新建HTML页面，代码如下：
保存后，在谷歌浏览器中预览，效果如图1-10所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img标记的使用</title>
</head>
<body>
<p>常规的图案</p><br />
<img src="images/spring.jpg" alt="常规的图案"/><br />
<p>带有边框的图案</p><br />
<img src="images/spring.jpg" alt="带有边框的图案" border="2"/><br />
<p>等比缩放的图像</p><br />
<img src="images/spring.jpg" alt="等比缩放的图像" width="100" height="100"/>
</body>
</html>
【案例1-6】 相对路径和绝对路径
一、案例描述
1、 考核知识点
相对路径和绝对路径
2、 练习目标
理解相对路径和绝对路径的含义。
掌握如何使用相对路径指定图像文件的位置，使浏览器能够正常的显示图像。
掌握怎样使用绝对路径指定图像文件的位置，使浏览器能够正常的显示图像。
3、 需求分析
当引入图像时使用了错误的路径，就会导致引用失效(无法正常插入图片)。为了避免这个问题的出现，初学者需要学习一下HTML相对路径和绝对路径。本案例通过使用不同的图像路径来观察图像在页面中的显示效果。
4、 案例分析
1) 效果如图1-11所示。
2) 具体实现步骤如下所示：
a) 把一个图片放到电脑的指定位置，它的路径记为路径1。
b) 把这个图片放到指定位置的下一级目录，它的路径记为路径2。
c) 分别在Dreamweaver中引入路径1下图片的相对路径和路径2下图片的相对路径，观察页面显示效果。
d) 引入路径1下图片的相对路径，观察页面显示效果。
二、案例实现
新建HTML页面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对路径和绝对路径</title>
</head>
<body>
<img src="pic.jpg" />
<img src="images/pic.jpg" /><br />
<img src="images/img/pic.jpg" />
<img src="F:\zpw\第一章补充案例\images\img" />
</body>
</html>
【案例1-8】 制作电影宣传效果一、案例描述
1、 考核知识点
创建超链接
2、 练习目标
熟练掌握超链接标记的应用。
掌握文本标记和图像标记的混合应用。
3、 需求分析
纯文本看着会很枯燥，而图片和超链接标记的加入能够刺激读者的感官，引发阅读兴趣。这就体现了图像与文本以及超链接标记配合的重要性。本案例通过图像和超链接标记制作一个电影宣传的展示效果。
4、 案例分析
- 效果如图1-15所示。
2) 具体实现步骤如下所示：
a) 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的上半部分。
b) 在Dreamweaver中添加<h2>标题内容、水平线、图像、段落文本，整体作为网页的下半部分。
c) 分别给两部分文本和图像添加样式，并通过超链接标记为图像设置不同的链接地址。
二、案例实现
新建HTML页面，代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>西游降魔篇</h2>
<hr color="aqua" width="1500px" align="left"/>
<p align="left">2013年2月10日</p>
<img src="images/xy.jpg" align="right" width="300px"/>
<p align="left">导演：周星驰</p>
<p align="left">主演：黄渤 文章 舒淇 周秀娜 释行宇 罗志祥 何文辉 李尚正</p>
<p align="left">片长：110分钟</p>
<p align="left">类型：冒险 奇幻 喜剧</p>
<p align="left">定价：5$</p>
<h2>101次求婚</h2>
<hr />
<img src="images/www.itcast.jpg" align="right" width="300px"/>
<p align="left">导演：周星驰</p>
<p align="left">主演：黄渤/秦海璐/林志玲/高以翔</p>
<p align="left">片长：104分钟</p>
<p align="left">类型：爱情 剧情</p>
<p align="left">定价：5$</p>
<p align="left"><u>上映时间：02月12日</u></p>
</body>
</html>
【案例1-9】 锚点的使用
一、案例描述
1、 考核知识点
锚点链接
2、 练习目标
掌握超链接标记的定义方法。
掌握锚点链接的创建方法。
3、 需求分析
如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低，且不方便。这时就需要使用锚点链接，使用户能够快速定位到目标内容。为了便于初学者的理解和掌握，接下来，通过一个案例对锚点链接的创建方法做具体演示。
4、 案例分析
- 效果如图1-18所示。
2) 具体实现步骤如下：
a) 定义锚点链接“1楼”“2楼”“3楼”时，跳转目标的位置。
b) 定义一楼、二楼、三楼的内容部分。
c) 标注点击“2楼”时，跳转目标的位置。
d) 标注点击“返回”时，跳转目标位置。
二、案例实现
新建HTML页面，代码如下：
在上面的代码中，“href="#名称1"”用于指定链接目标的名称，“name=”名称1””用于标注跳转目标的位置。
保存后，在谷歌浏览器中预览，效果如图1-19所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="a0">
<a href="#a1">1楼</a>
<a href="#a2">2楼</a>
<a href="#a3">3楼</a>
</p>
<p><img id="a1" src="images/01.jpg" /></p>
<p><a href="#a0">顶部</a></p>
<p><img id="a2" src="images/02.jpg" /></p>
<p><a href="#a0">顶部</a></p>
<p><img id="a3" src="images/03.jpg" /></p>
<p><a href="#a0">顶部</a></p>
</body>
</html>