《HTML5网页设计》补充案例1.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 10 PAGE 1 补充案例—“电影时间网”首页面制作 一、案例描述 1、考核知识点 HTML文本控制标记 HTML图像标记 2、练习目标 熟悉HTML文本控制标记。 掌握HTML图像标记。 3、需求分析 HTML作为一门标记语言，主要用来描述网页中的文字和图像等信息。但是怎样书写HTML代码，又该如何使用HTML标记制作网页呢？通过学习本案例可以使初学者学会图文混排页面的制作技巧以及如何使用HTML文本和图像标记制作图文混排页面。 4、案例展示 效果如图2-1所示。 “电影时间网”效果展示 二、布局及定义基础样式 1、效果分析 （1）HTML结构分析 “电影时间网”首页面从上到下可以分为6个模块，如图2-2所示。 “电影时间网”结构分析 2、页面布局 新建index02.html文件，在index02.html文件内书写HTML结构代码，具体代码如下。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title电影时间网/title /head body div style=width:960px; margin:0 auto !--header begin-- div/div !--header end-- !--banner begin-- div/div !--banner end-- !--newmovie begin-- div/div !--newmovie end-- !--hotmovie begin-- div/div !--hotmovie end-- !--comment begin-- div/div !--comment end-- !--footer begin-- div/div !--footer end-- /div /body /html 在上面的代码中，最外层div用于定义页面版心，其中第9行代码中的“style=width:980px; margin:0 auto”用于定义页面的宽度为“960px”且水平居中显示。 三、案例制作 1、制作头部模块 （1）效果分析 “头部”模块可以分为左右两部分，左边为Logo图片，可通过img/标记定义。右边为页面的导航，可通过p标记定义。下面的水平线由hr/标记定义。具体结构如图2-3所示。 “头部”模块结构图 （2）模块制作 在index02.html文件内书写“头部”模块的HTML结构代码。具体如下： !--header begin-- div style=height:63px; img src=images/logo.jpg alt=电影时间 align=left/ p align=right电影时间首页nbsp;nbsp;|nbsp;nbsp;登陆nbsp;nbsp;|nbsp;nbsp;注册nbsp;nbsp;|nbsp;nbsp;font color=red收藏/font/p /div hr color=#23aaea / !--header end-- 保存index02.html文件，刷新页面，效果如图2-4所示。 “头部”模块效果图 2、制作banner和最新电影模块 （1）效果分析 “banner”模块整体由一张电影海报图片构成，由img标记定义。“最新电影”模块标题使用h2定义，9张小图片由img标记定义。“banner和最新电影”模块的具体结构如图2-5所示。 “banner和最新电影”模块结构图 （2）模块制作 在index02.html文件内书写“banner和最新电影”模块的HTML结构代码。具体如下： !--banner begin-- divimg src=images/banner.jpg //div !--banner end-- !--newmovie begin-- div h2最新电影/h2 hr color=#23aaea / img src=images/img_01.jpg width=92 height=130 / img src=images/img_02.jpg width=92 height=130 / img src=images/img_03.jpg width=92 height=130 /