《HTML5网页设计》补充案例1【精选推荐】
下面是小编为大家整理的《HTML5网页设计》补充案例1【精选推荐】,供大家参考。
补充案例 — “ 电影时间 网 ” 首页 面制作 一、案例描述
1、 、 考核知识点 HTML 文本控制标记 HTML 图像标记 2、 、 练习目标 熟悉 HTML 文本控制标记。
掌握 HTML 图像标记。
3、 、 需求分析 HTML 作为一门标记语言，主要用来描述网页中的文字和图像等信息。但是怎样书写 HTML 代码，又该如何使用 HTML 标记制作网页呢？通过学习本案例可以使初学者学会图文混排页面的制作技巧以及如何使用 HTML 文本和图像标记制作图文混排页面。
4、 、 案例 展示 效果如图 2-1 所示。
图 2-1 “电影时间网”效果展示 二、 布局及定义基础样式 1、 、 效果分析 （ （1 ）HTML 结构分析 “电影时间网”首页面从上到下可以分为 6 个模块，如图 2-2 所示。
底部网友评论热门电影介绍最新电影banner头部 图 2-2 “电影时间网”结构分析 2、 、 页面布局 新建 index02.html 文件，在 index02.html 文件内书写 HTML 结构代码，具体代码如下。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>电影时间网</title>
7 </head>
8 <body>
9 <div style="width:960px; margin:0 auto">
10 <!--header begin-->
11
<div></div>
12 <!--header end-->
13 <!--banner begin-->
14 <div></div>
15 <!--banner end-->
16 <!--newmovie begin-->
17 <div></div>
18 <!--newmovie end-->
19 <!--hotmovie begin-->
20 <div></div>
21 <!--hotmovie end-->
22 <!--comment begin-->
23 <div></div>
24 <!--comment end-->
25 <!--footer begin-->
26 <div></div>
27 <!--footer end-->
28 </div>
29 </body>
30 </html> 在上面的代码中，最外层<div>用于定义页面版心，其中第 9 行代码中的“style="width:980px; margin:0 auto"”用于定义页面的宽度为“960px”且水平居中显示。
三、案例制作 1、 、 制作头部模块 （ （1）
）
效果 分析 “头部”模块可以分为左右两部分，左边为 Logo 图片，可通过<img/>标记定义。右边为页面的导航，可通过<p>标记定义。下面的水平线由<hr/>标记定义。具体结构如图 2-3 所示。
<img><p><font> 图 2-3 “头部”模块结构图 （ （2）
）
模块制作 作 在 index02.html 文件内书写“头部”模块的 HTML 结构代码。具体如下：
1 <!--header begin-->
2 <div style="height:63px;">
3
<img src="images/logo.jpg" alt="电影时间" align="left"/>
4
<p align="right">电影时间首页 | 登陆 | 注册 | <font color="red">收藏</font></p>
5 </div>
6 <hr color="#23aaea" />
7 <!--header end--> 保存 index02.html 文件，刷新页面，效果如图 2-4 所示。
图 2-4 “头部”模块效果图 2、 、作 制作 banner 和最新电影 模块 （ （1）
）
效果 分析 “banner”模块整体由一张电影海报图片构成，由<img>标记定义。“最新电影”模块标题使用<h2>定义，9 张小图片由<img>标记定义。“banner 和最新电影”模块的具体结构如图 2-5 所示。
<img><img><img> <img> <img> <img><img> <img> <img> <img><h2> 图 2-5 “banner 和最新电影”模块结构图 （ （2 ）模块制作 在 index02.html 文件内书写“banner 和最新电影”模块的 HTML 结构代码。具体如下：
1 <!--banner begin-->
2 <div><img src="images/banner.jpg" /></div>
3 <!--banner end-->
4 <!--newmovie begin-->
5 <div>
6
<h2>最新电影</h2>
7
<hr color="#23aaea" />
8
<img src="images/img_01.jpg" width="92" height="130" />
9
<img src="images/img_02.jpg" width="92" height="130" />
10
<img src="images/img_03.jpg" width="92" height="130" />
11
<img src="images/img_04.jpg" width="92" height="130" />
12
<img src="images/img_05.jpg" width="92" height="130" />
13
<img src="images/img_06.jpg" width="92" height="130" />
14
<img src="images/img_07.jpg" width="92" height="130" />
15
<img src="images/img_08.jpg" width="92" height="130" />
16
<img src="images/img_09.jpg" width="92" height="130" />
17 </div>
18 <!--newmovie end--> 保存 index02.html 文件，刷新页面，效果如图 2-6 所示。
图 2-6 “banner 和最新电影”模块效果图 3、 、 制作 热门电影介绍 模块 （ （1）
）
效果 分析 “热门电影介绍”模块整体由一个大盒子<div>进行控制。左侧使用段落<p>标记定义，右侧使用<img>标记定义。其中，左侧的段落主要使用<font>标记嵌套<ins>、<em>、<strong>标记定义不同的文本样式。“热门电影介绍”模块的具体结构如图 2-7 所示。
<h2> <hr/><font>嵌套<ins>标记<img><p><font><font>嵌套<font><font><font>嵌套<ins><font><font>嵌套<em><font>嵌套<strong><font> <hr/> 图 2-7
“热门电影介绍”模块结构图 （ （2 ）模块制作 在 index02.html 文件内书写“热门电影介绍”模块的 HTML 结构代码。具体如下：
1 <!--hotmovie begin-->
2 <div style="height:358px;">
3
<h2>热门电影介绍</h2>
4
<hr color="#CCC" size="3"
/>
5
<font
size="4" color="red">
6
<ins>西游降魔篇</ins>
7
</font>
8
<font size="4" color="blue">
9
<ins>高清视频在线观看 爱奇艺</ins>
10
</font>
11
<img src="images/moviebanner.jpg" alt="电影时间" align="right"/>
12
<p align="left">
13
<font>上映时间：2013 年 2 月 10 日</font><br />
14
<font>导演：<font color="red">周星驰 郭子健</font></font><br />
15
<font>发行公司：安乐影片</font><br />
16
<font color="blue">主演：<ins>黄渤</ins> <ins>文章</ins> <ins>舒淇</ins> <ins>周秀娜</ins> <ins>释行宇</ins> <ins>罗志祥</ins> <ins>何文辉</ins> <ins>李尚正</ins></font><br />
17
<font>片长：110 分钟</font><br />
18
<font color="red">类型：<em>冒险 奇幻 喜剧</em></font><br />
19
<font>定价：<font color="red"><strong>150 元</strong></font></font><br />
20
<font>简介 ：受气的唐僧、暴戾的孙悟空、帅气的猪八戒、妩媚的沙僧，完全颠覆<br />版西游记，周星驰时隔 15 年自编自导再战西游。
这是个妖魔横行的世界，百<br />姓苦不堪言。年轻的驱魔人玄奘以“舍小我，成大我”的大无畏精神，历尽<br />艰难险阻，依次收复水妖、猪妖以及妖王之王孙悟空为徒，并用“爱”将他<br />们感化......</font>
21
</p>
22 </div>
23 <hr color="#23aaea" />
24 <!--hotmovie end--> 保存 index02.html 文件，刷新页面，效果如图 2-8 所示。
图 2-8 “热门电影介绍”模块效果图 4、 、 制作 网友评论 模块 （ （1）
）
效果 分析 “网友评论”模块整体由一个大盒子<div>进行控制。内部嵌套<img>和<div>分别用来搭建左侧 logo和右侧文字内容部分。
“网友评论”模块由标题和评论构成。其中，标题通过<img/>标记定义。评论通过<div>标记布局，可以分为左边的图片（通过<img/>标记定义）、右边的文本和下方的水平分割线（通过 hr 标记定义）。其中右方的文本可以通过在<div>标记中嵌套<p>标记定义，对于特殊的文本字体，通过<font>标记进行定义。“网友评论”模块的具体结构如图 2-9 所示。
<hr/><div><hr/>img<div><p><font></font></p>...</div><img> 图 2-9
“网友评论”模块结构图 （ （2 ）模块制作 在 index02.html 文件内书写“网友评论”模块的 HTML 结构代码。具体如下：
1 <!--comment begin-->
2 <div>
3
<img src="images/comment.jpg" alt="网友评论" />
4
<hr color="#CCC" size="1" />
5
<div>
6
<img src="images/pic01.jpg" alt="" align="left" hspace="10" />
7
<div>
8
<p>
9
<font color="#F60">影迷无敌 001</font> <font size="2" color="#999">2016-6-12 15:38:37</font>
10
</p>
11
<p>
12
<font size="2">请剧情党们不要太较真电影对魔兽历史的更改，毕竟翻拍的电影，多少会有些出入，我们看的是情怀，哈哈。。。</font>
13
<br />
14
<font color="#F60" size="2">
15
来自:大众点评网友
16
</font>
17
</p>
18
</div>
19
<hr color="#CCC" size="1" />
20
</div>
21
<div>
22
<img src="images/pic02.jpg" alt="" align="left" hspace="10" />
23
<div>
24
<p>
25
<font color="#F60">时光不老</font> <font size="2" color="#999">2015-3-2 15:05:37</font>
26
</p>
27
<p>
28
<font size="2">个人认为小时代毫无看点，看了不到半小时就要睡着了，我已无力吐槽，建议大家还是去读原著吧！！！</font>
29
<br />
30
<font color="#F60" size="2">
31
来自：星光影院网友
32
</font>
33
</p>
34
</div>
35
<hr color="#CCC" size="1" />
36
</div>
37
<div>
38
<img src="images/pic03.jpg" alt="" align="left" hspace="10" />
39
<div>
40
<p>
41
<font color="#F60">cocoke</font> <font size="2" color="#999">2016-2-14 10:38:36</font>
42
</p>
43
<p>
44
<font size="2">星爷的每一部电影都很经典，重复地看过很多遍，每次都有更深刻的理解和更深的感悟，同样期待《美人鱼》。</font>
45
<br />
46
<font color="#F60" size="2">
47
来自：美团网网友
48
</font>
49
</p>
50
</div>
51
<hr color="#CCC" />
52
</div>
53 </div>
54 <!--comment end-->
保存 index02.html 文件，刷新页面，效果如图 2-10 所示。
图 2-10 “网友评论”模块效果图 5、 、 制作底部 模块 （ （1）
）
效果 分析 “底部”水平居中排列，且由多行文本构成，可通过在<div>中嵌套多个<p>标记来定义，对于段落中特殊显示的文本可通过<font>标记进行定义。“底部”模块的具体结构如图 2-11 所示。
<p>嵌套<font><p><font><p> 图 2-11 “底部”模块结构图 （ （2 ）模块制作 在 index02.html 文件内书写“底部”模块的 HTML 结构代码。具体如下：
1 <!--footer begin-->
2 <div>
3 <p align="center">
4 <font color="blue">公司简介 | 关于我们 | 联系我们 | 友情链接 | 招聘信息 | 产品答疑</font>
5 </p>
6 <p align="center"><font color="red">免责声明：</font>本网站内容收集于互联网，电影时光网不承担任何由于内容的合法性及健康性所引起的争议和法律责任。</p>
7 <p align="center">欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。</p>
8 </div>
9 <!--footer end--> 保存 index02.html 文件，刷新页面，效果如图 2-12 所示。
图 2-12 “底部”模块效果图