html5 做的实训作品,实训1-2制作HTML5百科页面.doc

博学谷——让IT教学更简单，让IT学习更有效

PAGE 2

PAGE 7

实训1-2 制作HTML5百科页面

实训目的

熟悉HBuilder,熟悉HTML5文档基本格式

能够运用HTML5语法基本格式及标记、文本控制标记以及图像标记制作简单的页面。

案例描述

制作一个HTML5百科页面“HTML5百科—首页.html”，默认效果如图1所示。

图1 HTML5百科页面默认效果

当在图1所示的页面区域单击时，跳转至“HTML5百科—page01.html”页面，效果如图2所示。

图2 page01.html页面

点击图2所示页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳转至“HTML5百科—page02.html”页面，效果如图3所示。

图 3 page02.html页面

点击图3所示页面中的“返回”按钮时，返回至首页面；点击 “上一页”按钮时，跳转至“HTML5百科—page01.html”页面。

案例分析

为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。下面，将分别针对首页面、page01页面及page02页面进行分析。

首页面效果分析

观察首页面效果图1可以看出，页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用标记嵌套标记布局，使用标记插入图像，并通过标记设置超链接。

page01页面效果分析

观察效果图2可以看出，page01页面中既有文字又有图片。文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用

标记设置标题，

标记设置段落，标记加粗文本。另外，使用水平线标记将标题与内容隔开，并设置水平线的粗细及颜色。

此外，需要使用标记插入图像，通过标记设置超链接，并且对标记应用align属性和hspace属性控制图像的对齐方式和水平距离。

page02页面效果分析

观察图3可以看出，page02页面中主要包括标题和图片两部分，可以使用

标记设置标题，标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过标记设置超链接。

案例实现

通过对页面效果的分析，我们已经熟悉了各个页面的结构。下面将通过HTML5标记及其属性来分别制作首页面、page01页面以及page02页面。

常规准备工作

启动Hbuilder，在Hbuilder中新建web项目“实训1-2”，建议建在D盘根目录。

将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为 “实训文件夹”

制作首页面

在“实训文件夹”中新建HTML页面“HTML5百科-index.html”

拷贝网页素材图片到相应Img文件夹。

根据对首页面效果的分析，使用相应的HTML5标记来搭制作首页面，参考代码如下。

HTML5百科

在以上代码中，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。另外，为了使图片居中对齐，需要通过

标记进行嵌套，并使用align属性设置段落中的内容居中对齐。运行效果如图4所示。

图4 HTML页面结构效果

制作page01页面

?在“实训文件夹”中新建HTML页面“HTML5百科.html”

根据对page01页面的效果分析，使用相应的HTML5标记来制作page01页面，参考代码如下：

HTML5百科

HTML5百科

---

●&nbsp&nbspHTML5是HTML即超文本标记语言或超文本链接标示语言的第五个版本.