基于HTML5的网页设计及应用（第2版）实验指导（全套）.docx
实验一文本和图像标签的联系一、实验学时2学时二、实设目的（一）掌握常见的文本标签：（二）掌握图像标卷的用法（）掌握荷单的图文混持三、实验要求在E盘卜建立一个文件夹，命名为网页设计基实险在网页设计基稿实-文件夹卜建文件央实验一，将本次实验中建立的所有的网页文件都保存在该文件夹下面.四、实设内容：1 .打开记事本.输入如下代码，保存为IJhtm1.运行，熟悉HTM1.文件的基本结构以及<b>标记的含义，（本题1。分，4HHR一处扣5分）<html><hcad><titlc>Wst<title>Vhead><b<xly><b>互联网，我来了！<b><body>vhtml>2 .新建html文档,输入如下代码,熟悉hl-h6标记的含义,保存为I2html.（本IO分，每幡谀一处扣5分）<!D0CTYPEhtnl><htmllang="cn"><hcad>yile）标题标记<ile><head><body><!-以下为标SS样式：><hl>Hl标SS大小bhl><h2>H2标即大小vh2><h3>H3标题大小Dh3><M>H4标四大小vh4><h5>H5标SS大小Dh5>vh6>H6标即大小<h6><.,body>3.Vhtml,新建Zml文档，就入如下代码，熟悉<p>、<i>、<b>标记的作用，注意各标记之间的强食关系，保存为13hml(本JB2O分.4HKft一处扣5分)<!DOCTYPEhlnl><htmllang=cn,*><hcad><netaChaNel="1TTF8”><ii"e>关山月<itle><.,hcad><body><hlalign=cemer>关山月<hl><h3align=center>W   李白VXh3><hralign=ccntcrcolor=blucsizc=,*5,'width=*2W),*><palignccncr><!-<fonCOlor="green"size-118m>-><b>长风几万里，吹度玉门关。<b><br><i>汉下白登道,胡庭声海湾，<ixbr><dd>由来征战地.不见有人还<dcl><br><ins>戍客坐边色，思归多苦颜。<insxbr><stn>ng>高楼当此夜，叹刖未应闲。<slrong><br><p><hralign=ccntcrcolor=bluesizc=M5Mvidth=w2(X),><body><.'himl>效果如图所示：关山月唐李白长风几万里，吹度玉门关。汉下白登道,胡窥青海湾。由来征战地，不见有人还。戍客军功色，思归多苦颜。高楼当此夜，叹息未应闲。4 .新建hlml文档，保存为14hml熟悉<img>标记的作用，理解Vimg>标记的SMM性的路径设冏方法设冏方法。可以自己整图片的大小和，让图片显示在一行）（本!20分,每嫌提一处扣5分）<!DOCTYPEhtml><hmllang=en',><head><mctacha11ic(=*,1.11T-8,*><tilte>图像和路径问题<颂1e><head><body><!一向一个文件夹-><imgSrc="haus1.png"all="河南科技大学校徽“Me='河南科技大学CWidIh="200”>!一下一个文件夹->VimgSrC="images/河南科技大学校门.jpg-alt="河南科技大学校f><!-上一个文件夹-><imgsic="J2O22xuejingl.jpg"alk河湖科技大学雪景"width='50%”><body><.-html>5 .综合练习图文混排定成“卜效果图保存为1.5.hlml,（本意30分，和下图效果差别一处扣5分）<00CrYPEhtl><ht11llan三,en><hpd><netachar$et»MUTF-8*><Ulle>何渤科技大学附介八1口”实验二超链接标记、浮动框架标记的使用一、实验学时2学时二、实验目的（一）掌握利用DfeamWeaVer软件建立站点，方便管理网站中的文件；（二）掌握超琏接标记的使用：（三）掌握HTM1.文档中各种锥接的创建方法：（四）掌握在HTM1.文档中如何使用浮动框架以及浮动框架与超度接页面之间的关系.三、实验内容：（一）在E盘下创建自己的班级姓名文件夹,在DrcamWcaver中把该文件夹创建成站点“实验二”，把本次实监内容都保存在该站点下.（：）在DrCamweaVer中新建NmI文档，利用浮动框架和热点链接等技术制作动物园导览网页，效果如图1所示，其中左边图像中有三个热点区域徒接.链接的页面显示在左边的浮动框架中.es*t。皿m金tnMVYtt2Inm曲;MweM=c3VKMM¾mhw动物园导览图图1图片焦点货接效果图11.W分标准，此页面及IS架内的“默认页面”作正确分W分，有超症物情扣分.eoarC*z11mw5hhmwwum2三ieMW2wt二4<>三ki2mm动物园导笈图图2图片热点链接效果图22.评分标箍I根架内的“非测动物馆页面”制作正确清分10分，有甯疵酌情扣分.-C3WtQmM,三M1.U三三=BGe4二4x-三fE动物园导览图图3图片焦点能接效果图33 .评分标准I标架内的.类动物馆页面”作正确清分10分，有理发的情扣分.C©"WKMhtWKwW"三at>G三g00i二8dvw幢“三三2<m动物园导鉴图图4图片焦点徒接效果图44 .评分标准I根架内的,夜行动物馆页面”一作正确看分10分，有理友酌情扣分.(=)给“篮球基础知识”的网页.页面内添加正确的悔点杨接.OOm。心图5播点链接效果图5 .讦分标准，此页面送分20分，有理疵的情扣分.(四)在DrcamWCaVer中新建html文档,创建一个标题为“普通超链接”的网页,网页上至少有：个超族接，分别能接到动物园导览网页、篮球基础知识、和河南科技大学网站.C文件D:/工作，网页设计课程;实验决验2:超斡接标记及浮动框;甑汩实验二COdeS/index.html:：.ffm0fta三<wwww三w*r*QR.WT""w丽Qw普通超链接河南科技大学国目资篮缥星拙知识图6普通超链接页面6UF分标准I此页面所有超帔接忻!以正IWt转，分I。分，有厦流的情扣分四、提交文件夹结构白礴二日晶片热点卷接bmflcsQ4fn<4ijpgH"MjpgBWfK43.jfGaNEW。QbirdZp9HNghnJPgEi川5t2jpgSfi0OJPQHZOOiJPQB文字IWWQAinu.htmlQtxdMmlQIHmIQ<*9MtmlQzoo.tMfe三6BZskmMhtmlBOdethtml将所有的html文档.图片,按照上图所示的结构存储,并压端提交,所有图片和超琏接使用相对路径（河科大网址除外.评分标准：所有文件存储结构正确1。分.实验3指导书一、实验学时2学时二、实验目的（）掌握利用表格的基本标签及其属性：（二）安握超单元格的合并：（三）掌握表格的嵌隹：（四）掌握CSS简雎的文本样式。三、实验内容：（一）个人H历：最终效果如M个人荷历姓名张三丰性别男照片民族汉籍赛丽出生日期9870326婚姻状况否学历蝌体B身高173cm.70gg专业计算机应用函S状况良好求职意向计算机毕业虢校河南科技大学tK471003CI系电话13836781234林箝11111语言能力首通话：标准英语：熟练主管深楫C.C+.C#.撵作系统.数据结构.数据方个人技能1 .熟母客户道与照务器端的脚本编写2 .熟悉手机app的开发实验步骤如下；I.创建实脸3文件夹，在文件夹下新建个人简历.himl文件,.menu>:hover>backgroundco1.orz<I06;color:red;(9)鼠标经过上航程.显示包含的下拉菜单.menu>:hoverVisibi1.ity:visible;(IO)反标经过卜拉菜单中的超链接，改变样式。.menu:hovercolor:df4136)backgroundco1.or:#2a40bd;到此为止，整个案例效果全部实现.3.制作下拉菜单导航栏注意事项(1) ul设置高度的话，再设置背景色的话，Ii有多个时，超出高度的部分不显示背景色.Ii中如果有子列表.背景色也不能显示,结论：Ul有前度时.背景色列好设置到Ii的样式中。(2) N拉子菜单，是一个子列衣,除微子列表,当梁标獴盖第一层列表的Ii时，显示于列表.方法有三种：displayIDoneIdisplay:block;opacity:0;opacity:1;Visibilityrhiddcn;Visibililyzvisible;小结如下：Wity=O,ttc*Mfi*T.但不会改变血布局，并且，如果域元家巳IS娜定一，件，如。IiOk事件，那么点由兴区域,也帔发点击件的VlsiblIityld<fon,该元索«£来了，但不会改变员布局，但是不会*发该元泰巳舞修定的件dipeom,把元来，并且会改变寅布局，可以理K成在页中Ie该元事霸除掉一样8-2float实现页面布局1. Html结构如下：<'、class="Container”>< class="header*>header</>< class-Ieftside'*>leftside</< class三"rightside">rightside</< class"fter->footer</></></.menu>:hover>backgroundco1.orz<I06;color:red;<19)鼠标经过导航栏，显示包含的下拉菜电.menu>: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
