electric翻译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”页⾯。
案例分析ps怎么把图切成两半
html个人网页制作代码范列为了提⾼⽹页制作的效率，每拿到⼀个页⾯的效果图时，都应当对其结构和样式进⾏分析。下⾯，将分别针对⾸页⾯、page01页⾯及page02页⾯进⾏分析。
⾸页⾯效果分析
观察⾸页⾯效果图1可以看出，页⾯中只有⼀张图像，点击图像可以跳转到“page01.html”页⾯，可以使⽤标记嵌套标记布局，使⽤标记
linux是一个分时操作系统插⼊图像，并通过标记设置超链接。
page01页⾯效果分析
观察效果图2可以看出，page01页⾯中既有⽂字⼜有图⽚。⽂字由标题和段落⽂本组成，并且⽔平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落⽂本中的某些⽂字加粗显⽰。所以，可以使⽤
标记设置标题，
标记设置段落，标记加粗⽂本。另外，使⽤⽔平线标记将标题与内容隔开，并设置⽔平线的粗细及颜⾊。
此外，需要使⽤标记插⼊图像，通过标记设置超链接，并且对标记应⽤align属性和hspace属性控制图像的对齐⽅式和⽔平距离。
page02页⾯效果分析
观察图3可以看出，page02页⾯中主要包括标题和图⽚两部分，可以使⽤
标记设置标题，标记插⼊图像。另外，图⽚需要应⽤align属性和hspace属性设置对齐⽅式和垂直距离，并通过标记设置超链接。
private penthouse
案例实现
通过对页⾯效果的分析，我们已经熟悉了各个页⾯的结构。下⾯将通过HTML5标记及其属性来分别制作⾸页⾯、page01页⾯以及page02页⾯。
常规准备⼯作
启动Hbuilder，在Hbuilder中新建web项⽬“实训1-2”，建议建在D盘根⽬录。
将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为 “实训⽂件夹”
制作⾸页⾯
在“实训⽂件夹”中新建HTML页⾯“HTML5百科-index.html”
c语言scanf返回值是什么拷贝⽹页素材图⽚到相应Img⽂件夹。
根据对⾸页⾯效果的分析，使⽤相应的HTML5标记来搭制作⾸页⾯，参考代码如下。
HTML5百科
在以上代码中，通过src属性插⼊图像，并使⽤alt属性指定图像不能显⽰时的替代⽂本。另外，为了使图⽚居中对齐，需要通过标记进⾏嵌套，并使⽤align属性设置段落中的内容居中对齐。运⾏效果如图4所⽰。
图4 HTML页⾯结构效果
制作page01页⾯
在“实训⽂件夹”中新建HTML页⾯“HTML5百科.html”
根据对page01页⾯的效果分析，使⽤相应的HTML5标记来制作page01页⾯，参考代码如下：
HTML5百科
HTML5百科
●  HTML5是HTML即超⽂本标记语⾔或超⽂本链接标⽰语⾔的第五个版本.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。