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

《实训1-2制作HTML5百科页面》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实训1-2制作HTML5百科页面一、实训目的1.熟悉HBuilder,熟悉HTML5文档基本格式2.能够运用HTML5语法基本格式及标记、文本控制标记以及图像标记制作简单的页面。二、案例描述制作一个HTML5百科页面“HTML5百科—首页.html”，默认效果如图1所示。图1HTML5百科页面默认效果当在图1所示的页面区域单击时，跳转至“HTML5百科—page01.html”页面，效果如图2所示。图2page01.html页面点击图2所示页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳转至“HTML5百科—page02.html”页面，效果如图3所示。7图3page02.h

2、tml页面点击图3所示页面中的“返回”按钮时，返回至首页面；点击“上一页”按钮时，跳转至“HTML5百科—page01.html”页面。一、案例分析为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。下面，将分别针对首页面、page01页面及page02页面进行分析。1.首页面效果分析观察首页面效果图1可以看出，页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用标记嵌套标记布局，使用标记插入图像，并通过标记设置超链接。2.page01页面效果分析观察效果图2可以看出，page01页面中既有文字又有图片

3、。文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用

标记设置标题，

标记设置段落，标记加粗文本。另外，使用水平线标记

---

将标题与内容隔开，并设置水平线的粗细及颜色。此外，需要使用标记插入图像，通过标记设置超链接，并且对标记应用align属性和hspace属性控制图像的对齐方式和水平距离。3.page02页面效果分析观察图3可以看出，page02页面中主要包括标题和图片两部分，可以使用

标记设置标题，标记插入图像。另外，图

4、片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过标记设置超链接。二、案例实现通过对页面效果的分析，我们已经熟悉了各个页面的结构。下面将通过HTML5标记及其属性来分别制作首页面、page01页面以及page02页面。71.常规准备工作Ø启动Hbuilder，在Hbuilder中新建web项目“实训1-2”，建议建在D盘根目录。Ø将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为“实训文件夹”2.制作首页面Ø在“实训文件夹”中新建HTML页面“HTML5百科-index.html”Ø拷贝网页素材图片到相应Img文件夹。根据对首页面效果的分析，使用相应的H

5、TML5标记来搭制作首页面，参考代码如下。123456789101112

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

标记进行嵌套，并使用align属性设置段落中的内容

6、居中对齐。运行效果如图4所示。图4HTML页面结构效果3.制作page01页面7ØØ在“实训文件夹”中新建HTML页面“HTML5百科-page01.html”根据对page01页面的效果分析，使用相应的HTML5标记来制作page01页面，参考代码如下：12345678HTML5百科

91011

●  HTML5是HTML即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是HTML4.01。

12

●  HTML5草案的前身