基于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*Mfi*T.但不会改变血布局，并且，如果域元家巳IS娜定一，件，如。IiOk事件，那么点由兴区域,也帔发点击件的VlsiblIityld<fon,该元索«£来了，但不会改变员布局，但是不会*发该元泰巳舞修定的件dipeom,把元来，并且会改变寅布局，可以理K成在页中Ie该元事霸除掉一样8-2float实现页面布局4. Html结构如下：< '、class="Container”>< class="header*>header</>< class-Ieftside'*>leftside</< class三"rightside">rightside</< class"fter->footer</></></5. CSS样式如下:border:lp>bluesolid;).container(widths8;heightz80;margin:pxauto;.headerheight:200;margin:4：x；).leftsidewidths294;height:S0)|marginzC2；44;float:left;1.rightside(tfidthz49C;height:S6p>margin:0.42;fioat:right;).footerclear:both;height:78;margin:4px;<tyle>6. 特别强调。夫注意在页面布局中，左右浮动的元索之间的margin值为两者之和；。浮动元素和其上的标准流元素的ma*in值也为两者之和，。浮动元素和其下的标准流元素的margin值取决于浮动元素的margin值.实验九定位的应用一、实验学时2学时二、实验目的(一)了解用于定位的PO疝沁nM性值;Uj熟悉定位坐标的设置:(三)掌握相对定位、绝对定位、固定定位的使用:三、实验内容:(一)制作软件学院通知栏目5 .效果如下：(9)打开页面,显示如图1所示:6 .实殴要求和评分如下(共30分(I)使用div布局用外层盒子(width,100Opx).即版心水平居中，同时第二层盒子(WIdthS4(M)PC也相对父元素水平居中(5分图2M0RE>>(2)用h3做标准流的盒子(高度为3()px,字体为12px,虑为底边战，完成图3所示效果，MORE包含在a标签内，用定位实现右.(10分)，学院通知<b(Jy><divclass*,wrappcr"><i11gSrC="./images/StOne,Jpg">左俐武头<spanclass三-pre->Slt<span>左他前头<span<lass三wnext,>>gt<span>我都盒子<divclass三*,ctrl*><spanClasi-wSilder-ctrl-con-><span><spa11clas$sHsil<Jer-ctrl-con-></s(>an><spanclas$«Nsil(Ser*ctrl-con,e></s(xin><spancla$sHsil(Jer-ctrl-con-></s(>an><spanclass三sll<>er-ctrl-con*><s(>an><spa11cla$»w$iIder-Ctrlcon"><sxn><div><div><body>(I)使用div布局最外层盒子，宽度和浏览器相局(WidIh：100%)U。分).图片的宽度和父盒子宽度相同(widih：100%)(5分(3)用定位完成左、右两例盒子的垂直居中(IS分)。(4)用定位完成底部盒子的水平居中(1。分).(5)鼠标羟过左右小盒子字体变红色，鼠标形状为手型(5分).(6)破标经过底部盒子背景变红色，鼠标形状为手里(5分.(=)给图片添加建罩层1 .效果如图6所示图62 .实验要求和评分如下(共20分)：完成R标过前后效果，分别10分，共20分.Ctrlwidth:1CW%;ttallgn:center;.Ctrl.sild«r-ctrl*condisplay:lnll>block;width:4%;height:4px;bccolr:csc2c2;IVargin：10px6p×Ctrlpnzhoverbckground-color:Brd;cursor:pointer;9-3速罩层Html结构如下:<tx>dy><divcl55-bo><img5rc*iz,e5Gudanjpg“alt三*><div><body>2.CsS样式如下3.boxwidth:40Gp×height:40px;rrargin:100pxauto;border:lp×solid*CCC;border-radius:S0%;"强6父相”/position:relative;.boxi11rgwidth:10%;height:1O0%;border-radius:50%;.box:hover:beforedisplay:block;content:*;width：ee%;height:100%;background-color:MfBaOae;opacity:.3;border-radius:5%;position:absolute;left:;top:;实验HCSS3高级应用六、实验学时2学时七、实验目的（）熟练掌握过渡（IransiIon）的各个属性的使用（二）熟练掌握变形OranSform）的各个函数的使用;（三）熟练空握动画的各个屈性的使用和动画的创建过程：八、实验内容（一）过渡和2D转换的综合应用（加分）请利用学生端实验资料包中的图片，应用过渡和2D转换属性，实现效果如图I：牡丹花开真国色科大赏花正当时图10原本页面当取标经过图片时.以左下角为转动的中心,以诗词图片为背景的余子旋转上升井覆盅图片，如图2所示：牡丹花开真国色科大赏花正当时牡丹花开真国色科大赏花正当时图2E标经过效果C2«CAKcEUPOZDeaws绐12CSS泗飒K十二，MSSxag用1«»1/122%2OSMWhcml©<a*M+CO5tnCVw*VlmMA>UWpV*2GSmflm1.二%CSMMfiRHHoC2MCMBBWM日©6*W»*«+-eOll*tOVMn4<XM)MK(*W2CssiwwnwocssiMUUIIm"12220NMKMfWCOMCUMWlmMvmkoc*1ftl2CSaMAmKIH)CSS)MfM(a)l222MM9hM所示的动眄效果.关键实现思想如卜:<&ody>M.,»：f.enbsp4nbspAnbspSnbspH/c;,t<hl>I<divclass*box*><divclss-itnwudanl"><ing6«"wd-ee.jP."*it*><dlv><divclass*itfnudan2N><if<bBeX3002.jp“lt"><div><dlvclf*altet11utfan3"><ing"C'./Eg"Mee3.j"*alt*><div><divclS5*itnfwd*n4>"S"e"E'Mee4jp,“u-w><div><div><body>2.Css样式：pddi:0;argin:O;(I)清楚默认格式：.boxwidth:868×margin:auto;(2)主要盒子样式：hlwidth:868p×IWrgirUauto;text-alig:center;frjrgin-top:15p;lin<-hight:42px;height:42p×font-size:3p×color:B«002b5e;bordtr-bott0:8p×solidrgb(29/220,24;paddi11g-botto:20p×标应：.itemwidth:2px;height:2p×border-radius:5%;margin:2p×2p×p×px;border:IPXsolidblack;overflow:hidden;float:left;(4)食f共性Item*夕*11pln-：bckgro114-color：Bred；left:px;top:x;25%background*color:>*llow;left：IeeeP；top：epx；trnsfocf:rotatY180g;se%!bckgrouM-color：Hblu«；1ft：IeeeP；top：20ep;trnsforw:rottY36g;75%ba<kground-color:Bgrwn;1化：epx;top：2eep;tr*tfor:WY180dg;ee%:background-color:Bred;lft:0px;top:0px;(2)动画序列(三)软件学院欢迎你！I.页面结构：3><M><M<1m«”“evmt”"C“,*，<O4is“小，<S1><»><11><M><M>-M”，<H><：1><¼></«!>(2) CSS样式：*rgin：9；padding:e；(I)清楚格式，ulwidth:780px;margin:lp×uto;(3) UI样式：ulXiflot:lft;rtln:Spx;Midth:12px;height:3p×list-styl:11的;/公我。；要WbOXIcH也二公过程i,'ijfjff/perspectivesepx:(4) Ii的样式:.boxposition:rltiv;width:im；height：ieex；bordr-rdius:51;transform-styl:prQserv-¾transition:all.4$;Box.front,.botto<vposition:bsolute;le*t:e；top:;width:10%;height:iee%;txt-align:cntr;Iint-Ktight:35p×bordr-radius:S%;(三)前后盒子共性F.frontbackground-color:tomato;indx:1;transform:translate!17.5px;,bottombackground-color:fff;这个X轴一定是负tfi/我的如果有移动或齐其他样式,必须先靠我的的移动/transform:translateY：17.5p×)rotateX,-9deg;(7)鼠标经过：.box:hovertransform:rotateX(9deg);实验十二综合案例一、实验学时2学时二、实验目的利用所学习的HTM1.和CSS知识，红到阿里百秀首页，学习综合案例的制作.三、实验内容:10.实验要求和评分如下（I）能根据所提供的本材，完成页面内容的排版.如果1.3所示.（80分）当窗口宽度小于980PX时，灯侧窗口消失，如图4所示（10分）当窗口宽度小于764px时,左侧窗11消失.如图5所示,（10分）04'G411KTQSW口MHR会生活三独立负面«U：«ICO”皿VIfftZlBrrmrfVMBrAflMMM»mtItVAJMUAftf!MiMM阿里百秀MbaMuxomXIU主题m依V½M.参3«S<3t2e<3三ifiCl一周热门海行C。文仲CUsefSlenovoDesktopcopyxiunde×.htmlXlU主题扁平化骸§风.多设得支持.多功故中英文/2栏痂栏/RS式布号XIU主题XlU主题演示一周热门排行你敢聊乎全明BT功雄3D打印任与亮相且你敢晒,全WfSWe3D打卬*除凫相U你S5吗？全族第T全功施3D打印摩JIriMIU你敢哪印全域第T4IW3D打印则扭B<11tSW7全明BT全功族3D打卬JgI1.车亮相g(12345)黄(678)SWd2345)费(678)飒1234S)费(678)WS(12345)«(678)阅读(12345)«(678)卜一、提交文件夹结构名称CSSfontsimagesjsuploadsGindex.html
