基于HTML5的网页设计及应用（第2版）实验指导（全套）.docx

《基于HTML5的网页设计及应用（第2版）实验指导（全套）.docx》由会员分享，可在线阅读，更多相关《基于HTML5的网页设计及应用（第2版）实验指导（全套）.docx（27页珍藏版）》请在优知文库上搜索。

1、实验一文本和图像标签的联系一、实验学时2学时二、实设目的（一）掌握常见的文本标签：（二）掌握图像标卷的用法（）掌握荷单的图文混持三、实验要求在E盘卜建立一个文件夹，命名为网页设计基实险在网页设计基稿实-文件夹卜建文件央实验一，将本次实验中建立的所有的网页文件都保存在该文件夹下面.四、实设内容：1 .打开记事本.输入如下代码，保存为IJhtm1.运行，熟悉HTM1.文件的基本结构以及标记的含义，（本题1。分，4HHR一处扣5分）WstVheadb互联网，我来了！vhtml2 .新建html文档,输入如下代码,熟悉hl-h6标记的含义,保存为I2html.（本IO分，每幡谀一处扣5分）yile）标

2、题标记Hl标SS大小bhlH2标即大小vh2H3标题大小Dh3H4标四大小vh4H5标SS大小Dh5vh6H6标即大小3.Vhtml,新建Zml文档，就入如下代码，熟悉、标记的作用，注意各标记之间的强食关系，保存为13hml(本JB2O分.4HKft一处扣5分)关山月关山月W   李白VXh3!-长风几万里，吹度玉门关。汉下白登道,胡庭声海湾，由来征战地.不见有人还戍客坐边色，思归多苦颜。ng高楼当此夜，叹刖未应闲。效果如图所示：关山月唐李白长风几万里，吹度玉门关。汉下白登道,胡窥青海湾。由来征战地，不见有人还。戍客军功色，思归多苦颜。高楼当此夜，叹息未应闲。4 .新建

3、hlml文档，保存为14hml熟悉标记的作用，理解Vimg标记的SMM性的路径设冏方法设冏方法。可以自己整图片的大小和，让图片显示在一行）（本!20分,每嫌提一处扣5分）图像和路径问题!一下一个文件夹-VimgSrC=images/河南科技大学校门.jpg-alt=河南科技大学校f5 .综合练习图文混排定成“卜效果图保存为1.5.hlml,（本意30分，和下图效果差别一处扣5分）何渤科技大学附介八1口”实验二超链接标记、浮动框架标记的使用一、实验学时2学时二、实验目的（一）掌握利用DfeamWeaVer软件建立站点，方便管理网站中的文件；（二）掌握超琏接标记的使用：（三）掌握HTM1.文档中各

4、种锥接的创建方法：（四）掌握在HTM1.文档中如何使用浮动框架以及浮动框架与超度接页面之间的关系.三、实验内容：（一）在E盘下创建自己的班级姓名文件夹,在DrcamWcaver中把该文件夹创建成站点“实验二”，把本次实监内容都保存在该站点下.（：）在DrCamweaVer中新建NmI文档，利用浮动框架和热点链接等技术制作动物园导览网页，效果如图1所示，其中左边图像中有三个热点区域徒接.链接的页面显示在左边的浮动框架中.es*t。皿m金tnMVYtt2Inm曲;MweM=c3VKMMmhw动物园导览图图1图片焦点货接效果图11.W分标准，此页面及IS架内的“默认页面”作正确分W分，有超症物情扣分

5、.eoarC*z11mw5hhmwwum2三ieMW2wt二4三ki2mm动物园导笈图图2图片热点链接效果图22.评分标箍I根架内的“非测动物馆页面”制作正确清分10分，有甯疵酌情扣分.-C3WtQmM,三M1.U三三=BGe4二4x-三fE动物园导览图图3图片焦点能接效果图33 .评分标准I标架内的.类动物馆页面”作正确清分10分，有理发的情扣分.CWKMhtWKwW三atG三g00i二8dvw幢“三三2m动物园导鉴图图4图片焦点徒接效果图44 .评分标准I根架内的,夜行动物馆页面”一作正确看分10分，有理友酌情扣分.(=)给“篮球基础知识”的网页.页面内添加正确的悔点杨接.OOm。心图5播

6、点链接效果图5 .讦分标准，此页面送分20分，有理疵的情扣分.(四)在DrcamWCaVer中新建html文档,创建一个标题为“普通超链接”的网页,网页上至少有：个超族接，分别能接到动物园导览网页、篮球基础知识、和河南科技大学网站.C文件D:/工作，网页设计课程;实验决验2:超斡接标记及浮动框;甑汩实验二COdeS/index.html:：.ffm0fta三wwww三w*r*QR.WTw丽Qw普通超链接河南科技大学国目资篮缥星拙知识图6普通超链接页面6UF分标准I此页面所有超帔接忻!以正IWt转，分I。分，有厦流的情扣分四、提交文件夹结构白礴二日晶片热点卷接bmflcsQ4fn4ijpgHMj

7、pgBWfK43.jfGaNEW。QbirdZp9HNghnJPgEi川5t2jpgSfi0OJPQHZOOiJPQB文字IWWQAinu.htmlQtxdMmlQIHmIQ:hoverbackgroundco1.orz:hoverVisibi1.ity:visible;(IO)反标经过卜拉菜单中的超链接，改变样式。.menu:hovercolor:df4136)backgroundco1.or:#2a40bd;到此为止，整个案例效果全部实现.3.制作下拉菜单导航栏注意事项(1) ul设置高度的话，再设置背景色的话，Ii有多个时，超出高度的部分不显示背景色.Ii中如果有子列表.背景色也不能显示

8、,结论：Ul有前度时.背景色列好设置到Ii的样式中。(2) N拉子菜单，是一个子列衣,除微子列表,当梁标獴盖第一层列表的Ii时，显示于列表.方法有三种：displayIDoneIdisplay:block;opacity:0;opacity:1;Visibilityrhiddcn;Visibililyzvisible;小结如下：Wity=O,ttc*Mfi*T.但不会改变血布局，并且，如果域元家巳IS娜定一，件，如。IiOk事件，那么点由兴区域,也帔发点击件的VlsiblIityldfon,该元索来了，但不会改变员布局，但是不会*发该元泰巳舞修定的件dipeom,把元来，并且会改变寅布局，可以

9、理K成在页中Ie该元事霸除掉一样8-2float实现页面布局1. Html结构如下：headerleftside/rightside/footer:hoverbackgroundco1.orzI06;color:red;:hoverVisibi1.ity:visible;(20)反标经过卜拉菜单中的超链接，改变样式。.menu:hovercolor:df4136)backgroundco1.or:#2a40bd;到此为止，整个案例效果全部实现.6.制作下拉菜单导航栏注意事项(3) ul设置高度的话，再设置背景色的话，Ii有多个时，超出高度的部分不显示背景色.Ii中如果有子列表.背景色也不能显示,结论：Ul有前度时.背景色列好设置到Ii的样式中。(4) N拉子菜单，是一个子列衣,除微子列表,当梁标獴盖第一层列表的Ii时，显示于列表.方法有三种：displayIDoneIdisplay:block;opacity:0;opacity:1;Visibilityrhiddcn;Visibililyzvisible;小结如下：Wity=O,ttc*Mf