1.ケースの説明
1.評価の知識ポイント。
基本的なHTML5ドキュメント形式
2.実践の目的
HTML5ドキュメントの基本的な形式の予備的な理解を得る。
HTML5ドキュメントの基本形式を使用してシンプルなページを作成する機能。
3.要件分析
任意の言語を学習するには、最初にその基本形式を習得する必要があります。HTML5マークアップ言語も例外ではありません。カラフルなHTML5Webページを作成するには、最初にHTML5ドキュメントの基本形式を習得する必要があります。この場合、初心者がHTML5ドキュメントの基本的な形式をよりよく理解できるように、簡単なHTML5Webページが作成されます。
4.ケース分析
- その効果を図1-1に示します。
- 具体的な実装手順は次のとおり
です。a）新しいDreamweaverのデフォルトドキュメントを作成します。
b）マークアップにページのタイトルを追加します。
c）マークアップに2つの段落を追加します。
2.ケースの実現
新しいHTMLページを作成します。具体的なコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门案例</title>
</head>
<body>
<p>吾生也有涯 <br>而知也无涯</p>
</body>
</html>
保存後、Google Chromeでプレビューすると、効果が図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.ケースの説明
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.ケースの説明
1.評価の知識ポイント
アンカーリンク
2.実践の目的
ハイパーリンクマークの定義方法を習得します。
アンカーリンクを作成する方法をマスターします。
3.要件分析
Webページに多くのコンテンツがあり、ページが長すぎる場合、Webページを閲覧するときに必要なコンテンツを表示するには、スクロールバーを常にドラッグする必要があります。これは非効率的で不便です。現時点では、アンカーリンクを使用して、ユーザーがターゲットコンテンツをすばやく見つけられるようにする必要があります。初心者の理解と習得を容易にするために、次に、アンカーリンクを作成する方法の具体的なデモンストレーションを行うケースを通して。
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>