1. Case description
1. Assessment knowledge points.
Basic HTML5 document format
2. Practice objectives
Get a preliminary understanding of the basic format of HTML5 document.
Ability to make simple pages using the basic format of HTML5 documents.
3. Requirement analysis To
learn any language, you must first master its basic format, and HTML5 markup language is no exception. To make colorful HTML5 web pages, you first need to master the basic format of HTML5 documents. In this case, a simple HTML5 web page is written to enable beginners to better understand the basic format of HTML5 documents.
4. Case analysis
- The effect is shown in Figure 1-1.
- The specific implementation steps are as follows:
a) Create a new Dreamweaver default document.
b)Add the title of the page in the markup.
c) Add two paragraphs in the markup.
2. Case realization
Create a new HTML page, the specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门案例</title>
</head>
<body>
<p>吾生也有涯 <br>而知也无涯</p>
</body>
</html>
After saving, preview in Google Chrome, the effect is shown in Figure 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>
[Case 1-8] Propaganda effect of making a movie 1. Case description
1. Assessment knowledge points
Create hyperlink
2. Practice objectives
Be proficient in the application of hyperlink marks.
Master the mixed application of text mark and image mark.
3. Requirement analysis
Plain text can be boring to look at, while the addition of pictures and hyperlink tags can stimulate readers' senses and arouse interest in reading. This reflects the importance of matching images with text and hyperlink tags. This case uses images and hyperlinks to mark the display effect of a movie promotion.
4. Case analysis
- The effect is shown in Figure 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>
[Case 1-9] The use of anchors
1. Case description
1. Knowledge points for assessment
Anchor links
2. Practice objectives
Master the definition method of hyperlink marks.
Master the method of creating anchor links.
3. Requirement analysis
If the webpage has a lot of content and the page is too long, you need to constantly drag the scroll bar to view the required content when browsing the webpage, which is inefficient and inconvenient. At this time, you need to use anchor links to enable users to quickly locate the target content. In order to facilitate the understanding and mastery of beginners, next, through a case to make a concrete demonstration of the method of creating anchor links.
4. Case analysis
- The effect is shown in Figure 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>