实训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所示。2图3page02.html页面点击图3所示页面中的“返回”按钮时，返回至首页面；点击“上一页”按钮时，跳转至“HTML5百科—page01.html”页面。三、案例分析为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。下面，将分别针对首页面、page01页面及page02页面进行分析。1.首页面效果分析观察首页面效果图1可以看出，页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用a标记嵌套img标记布局，使用img/标记插入图像，并通过a标记设置超链接。2.page01页面效果分析观察效果图2可以看出，page01页面中既有文字又有图片。文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用h2标记设置标题，p标记设置段落，strong标记加粗文本。另外，使用水平线标记hr/将标题与内容隔开，并设置水平线的粗细及颜色。此外，需要使用img/标记插入图像，通过a标记设置超链接，并且对img/标记应用align属性和hspace属性控制图像的对齐方式和水平距离。3.page02页面效果分析观察图3可以看出，page02页面中主要包括标题和图片两部分，可以使用h2标记设置标题，img/标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过a标记设置超链接。四、案例实现通过对页面效果的分析，我们已经熟悉了各个页面的结构。下面将通过HTML5标记及其属性来分别制作首页面、page01页面以及page02页面。31.常规准备工作启动Hbuilder，在Hbuilder中新建web项目“实训1-2”，建议建在D盘根目录。将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为“实训文件夹”2.制作首页面在“实训文件夹”中新建HTML页面“HTML5百科-index.html”拷贝网页素材图片到相应Img文件夹。根据对首页面效果的分析，使用相应的HTML5标记来搭制作首页面，参考代码如下。1!doctypehtml2html3head4metacharset=utf-85titleHTML5百科/title6/head7body8palign=center9a10imgsrc=images/html5.jpgalt=传智播客设计学院UI设计师/11/a12/p13/body14/html在以上代码中，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。另外，为了使图片居中对齐，需要通过p标记进行嵌套，并使用align属性设置段落中的内容居中对齐。运行效果如图4所示。图4HTML页面结构效果3.制作page01页面4在“实训文件夹”中新建HTML页面“HTML5百科-page01.html”根据对page01页面的效果分析，使用相应的HTML5标记来制作page01页面，参考代码如下：1!doctypehtml2html3head4metacharset=utf-85titleHTML5百科/title6/head7body8h2align=centerHTML5百科/h29imgsrc=images/a.jpgalt=传智播客设计学院UI设计师align=lefthspace=30/10hrsize=3color=#CCCCCC11p●  strongHTML5/strong是strongHTML/strong即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是strongHTML4.01/strong。/p12p●  strongHTML5/strong草案的前身名为strongWebApplications1.0/strong。/p13p●  em2004/em年被strongWHATWG/strong提出。/p14p●  em2007/em年被strongW3C/strong接纳，并成立了新的strongHTML/strong工作团队。/p15p●  em2008年1月22日/em，第一份正式草案公布。/p16hrsize=3color=#CCCCCC17aimgsrc=images/down.pngalt=下一页vspace=20/a18aimgsrc=images/return.pngalt=返回vspace=20align=right/a19/body20/html在page01.html中，通过align属性设置h2标题居中对齐。其中，第9行代码，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。同时，使用图像的对齐属性align和水平边距属性hspace拉开图像和文字间的距离。第10、16行代码，通过size和color属性设置水平线粗细为3像素，颜色为灰色。另外，在第11~15行代码中，使用strong标记加粗某些文字，使用em标记倾斜某些文字。同时，在●符号后使用多个空格符 实现留白效果。第17、18行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第18行代码，使用图像的对齐属性align设置图片居右对齐。运行page01.html，效果如图5所示。5图5page01.html页面4.制作page02页面在“实训文件夹”中新建HTML页面“HTML5百科-page02.html”根据对page02页面的效果分析，使用HTML5标记来制作page02页面，具体如下：1!doctypehtml2html3head4metacharset=utf-85titleHTML5百科/title6/head7body8h2align=centerHTML5百科/h29imgsrc=images/b.jpgalt=传智播客设计学院UI设计师align=lefthspace=30/10hrsize=3color=#CCCCCC11imgsrc=images/pic01.jpg12imgsrc=images/pic02.jpg13hrsize=3color=#CCCCCC14aimgsrc=images/up.pngalt=上一页vspace=20/a15aimgsrc=images/return.pngalt=返回vspace=20align=right/a16/body17/html在page02.html中，通过align属性设置h2标题居中对齐。其中，第10、13行代码，通过size和color属性设置水平线粗细为3像素，颜色为灰色。另外，第14、15行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第15行代码，通过图像的对齐属性align设置图片居右对齐。运行page02.html，效果如图6所示。6图6page02.html页面5.制作页面链接由于各个页面间存在着链接关系，通过点击页面图片或按钮可以跳转到相应的页面，可以通过添加页面链接来实现。下面，将分别对三个页面添加超链接。制作首页面链接将首页面结构代码中的第9~11行代码替换为：ahref=page01.htmltarget=_selfimgsrc=images/html5.jpgalt=传智播客设计学院UI设计师//a此时，刷新首页面，当点击页面中的图片时，页面将跳转到page01.html页面。制作page01页面链接将page01.html页面中的第17~18行代码替换为：ahref=page02.htmlimgsrc=images/down.pngalt=下一页vspace=20/aahref=index.htmlimgsrc=images/return.pngalt=返回vspace=20align=right/a此时，刷新page01.html页面，当点击page01页面中的“返回”按钮时，页面将返回到首页面；点击“下一页”按钮时，页面将跳转到page02.html页面。制作page02页面链接同样，对page02.html页面添加超链接，将第14~15行代码替换为：ahref=page01.htmlimgsrc=images/up.pngalt=上一页vspace=20/aahref=example21.htmlimgsrc=images/return.pngalt=返回vspace=20align=right/a此时，刷新page02.html页面，当点击page02页面中的“上一页”按钮时，页面将跳转到page01.html页面；点击“返回”按钮时，页面将返回到首页面。至此，我们就通过HTML5标记及其属性实现了HTML5百科页面。76.交作业：将“实训文件夹”压缩打包后上传