实训1-2制作HTML5百科页面(共7页).doc

《实训1-2制作HTML5百科页面(共7页).doc》由会员分享，可在线阅读，更多相关《实训1-2制作HTML5百科页面(共7页).doc（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

3、片。文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用标记设置标题，标记设置段落，标记加粗文本。另外，使用水平线标记将标题与内容隔开，并设置水平线的粗细及颜色。此外，需要使用标记插入图像，通过标记设置超链接，并且对标记应用align属性和hspace属性控制图像的对齐方式和水平距离。3. page02页面效果分析观察图3可以看出，page02页面中主要包括标题和图片两部分，可以使用标记设置标题，标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过标记设置超链接。四

4、、 案例实现通过对页面效果的分析，我们已经熟悉了各个页面的结构。下面将通过HTML5标记及其属性来分别制作首页面、page01页面以及page02页面。1. 常规准备工作 启动Hbuilder，在Hbuilder中新建web项目“实训1-2”，建议建在D盘根目录。 将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为 “实训文件夹”2. 制作首页面 在“实训文件夹”中新建HTML页面“HTML5百科-index.html” 拷贝网页素材图片到相应Img文件夹。根据对首页面效果的分析，使用相应的HTML5标记来搭制作首页面，参考代码如下。 1 2 3 4 5 HTML5百科 6 7 8 9

5、 10 11 12 13 14 在以上代码中，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。另外，为了使图片居中对齐，需要通过标记进行嵌套，并使用align属性设置段落中的内容居中对齐。运行效果如图4所示。图4 HTML页面结构效果3. 制作page01页面 在“实训文件夹”中新建HTML页面“HTML5百科-page01.html”根据对page01页面的效果分析，使用相应的HTML5标记来制作page01页面，参考代码如下： 1 2 3 4 5 HTML5百科 6 7 8 HTML5百科 9 10 11   HTML5是HTML即超文本标记语言或超文

6、本链接标示语言的第五个版本.目前广泛使用的是HTML4.01。 12   HTML5草案的前身名为Web Applications 1.0。 13   2004年被WHATWG提出。 14   2007年被W3C接纳，并成立了新的HTML工作团队。 15   2008年1月22日，第一份正式草案公布。 16 17 18 19 20 在page01.html中，通过align属性设置标题居中对齐。其中，第9行代码，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。同时，使用图像的对齐属性align和水平边距属性h

7、space拉开图像和文字间的距离。第10、16行代码，通过size和color属性设置水平线粗细为3像素，颜色为灰色。另外，在第1115行代码中，使用标记加粗某些文字，使用标记倾斜某些文字。同时，在符号后使用多个空格符 实现留白效果。第17、18行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第18行代码，使用图像的对齐属性align设置图片居右对齐。运行page01.html，效果如图5所示。图5 page01.html页面4. 制作page02页面 在“实训文件夹”中新建HTML页面“HTML5百科-page02.html”根据对page02页面的效果分析，使

8、用HTML5标记来制作page02页面，具体如下： 1 2 3 4 5 HTML5百科 6 7 8 HTML5百科 9 10 11 12 13 14 15 16 17 在page02.html中，通过align属性设置标题居中对齐。其中，第10、13行代码，通过size和color属性设置水平线粗细为3像素，颜色为灰色。另外，第14、15行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第15行代码，通过图像的对齐属性align设置图片居右对齐。运行page02.html，效果如图6所示。图6 page02.html页面5. 制作页面链接由于各个页面间存在着链接关系，通过点击

9、页面图片或按钮可以跳转到相应的页面，可以通过添加页面链接来实现。下面，将分别对三个页面添加超链接。 制作首页面链接将首页面结构代码中的第911行代码替换为： 此时，刷新首页面，当点击页面中的图片时，页面将跳转到page01.html页面。 制作page01页面链接将page01.html页面中的第1718行代码替换为：此时，刷新page01.html页面，当点击page01页面中的“返回”按钮时，页面将返回到首页面；点击 “下一页”按钮时，页面将跳转到page02.html页面。 制作page02页面链接同样，对page02.html页面添加超链接，将第1415行代码替换为：此时，刷新page02.html页面，当点击page02页面中的“上一页”按钮时，页面将跳转到page01.html页面；点击“返回”按钮时，页面将返回到首页面。至此，我们就通过HTML5标记及其属性实现了HTML5百科页面。6. 交作业： 将“实训文件夹”压缩打包后上传专心-专注-专业