Web 前端开发 实验教学指导 实验九 : 使用 CSS 进行网页布局 一 实验目的 1 掌握网页布局的基本原理; 2 掌握网页布局的常用方法; 3 体会 HTML CSS JS jquery 等多种技术结合进行 Web 设计开发过程 二 实验环境 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 ; 3 支持互联网访问; 4 Adobe CS 6 组件支持 ; 5 Web 服务器支持 三 实验要求 1 通过实验提供的 PSD 文件获得 Web 开发需要的图片 ; 2 实现实验案例的基本效果, 包括 : 下拉菜单 POP 动画 ; 3 实现实验案例中 成员说 的数据展示, 所有的数据存放到 XML 文件中 ; 4 全部案例要求使用 HTML5+CSS3+JS+jQuery 的技术路线实现 ; 5 案例要进行浏览器兼容性测试, 并完成兼容性测试报告的撰写 四 实验原理 1 HTML5+CSS3 进行 Web 开发的基本方法 ; 2 CSS 动画开发的基本方法 ; 3 jquery 读取 XML 数据的基本方法 ; 4 Web 兼容性测试的原理和测试方法 五 实验步骤 1 Web 设计 (1)Web 设计使用 Adobe Photoshop 进行 (2)Web 设计效果如下图 9-1 所示 (3)Web 开发中需要的图片, 可以通过访问实验素材中的 12. 实验设计 \Index.psd 文件, 通过原始的设计文档获得 2 Web 结构分析 (1) 对 Web 设计图进行结构分析, 规划该 Web 的基本结构 (2) 对 Web 进行结构分析, 分析结构图如下图 9-2 所示 根据分析的结果设计 Web 的基本代码 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 1 页
图 9-1 设计效果 图 9-2 结构分析 3 Web 开发 (1) 在计算机硬盘上创建目录, 并创建网站的子目录 (2)Adobe Dreamweaver 中创建网站, 并完成配置 (3) 按照框架 表现和交互的顺序进行 Web 开发 HTML 5 主要代码 : <body> <div id="warp"> <div class="topcontent"> <div class="toplink"> <span> 联系我们 </span> <span> 加为首页 </span> <span> 收藏本站 </span> <div class="topsearch"> <form action=""> <input type="text" id="s" name="q" value="search:" onfocus="if (value =='Search:'){value =''}" onblur="if (value ==''){value='search:'}" /> <input type="submit" value=" " id="searchsubmit"/> </form> <div style="clear:both;"> <div class="middlecontent"> /> <div class="logonav"> <div class="logo"><img src="images/logo.png" width="278" height="48" alt="" 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 2 页
</a> <div class="nav"> <li><a href="#"> 网站首页 </a></li> <li class="navchild"><a href="#"> 本所介绍 </a> </li> <li><a href="#"> 本所介绍 </a></li> <li><a href="#"> 团队介绍 </a></li> <li><a href="#"> 团队成员 </a></li> <li><a href="#"> 日常动态 </a></li> <li><a href="#"> 荣誉成绩 </a></li> <li class="nav1 NavChild_Short" style="width:60px;"><a href="#"> 成员说 </li> <li><a href="#"> 博客 </a></li> <li><a href="#"> 微博 </a></li> <li><a href="#">lofter</a></li> <li><a href="#"> 寻求合作 </a></li> <li><a href="#"> 招贤纳士 </a></li> <div class="lunzhuan"> <div id="slider"> <div id="mask"> <li id="first" class="firstanimation"> <a href="#"><img src="images/lunzhuan.png" alt=""/></a> </li> <li id="second" class="secondanimation"> <a href="#"><img src="images/lunzhuan1.png" alt=""/></a> </li> <li id="third" class="thirdanimation"> <a href="#"><img src="images/lunzhuan2.png" alt=""/></a> </li> <li id="fourth" class="fourthanimation"> <a href="#"><img src="images/lunzhuan3.png" alt=""/></a> </li> <div class="bottomcontent"> <div class="contentleft"> <div class="indexnewscontent"> <div class="newstitle" id="news_title"><a href="#"></a> <div class="newsauthor"><span id="news_author"> 发布 </span><span style="margin-left:13px;margin-right:8px;" id=news_time></span><span></span> <div class="newstext" id="news_cont"> 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 3 页
<p></p> <div class="imgicon"><span id="s1"></span><span id="s2"></span><span id="s3"></span><span id="s4"></span><span id="s5"> 打印此消息 </span><span id="s6"> 阅读消息全文 </span> <div class="teamcontent"> <div class="teamtitle"><a href="talk.html"><img src="images/team.png" width="126" height="20" alt="" /></a> 已聚合博客 18 个, 已聚合微博 14 个 <div class="teamtext2" id="microblog"> <div class="contentright"> <div class="worktitle"><a href="project.html"><img src="images/work.png" width="163" height="20" /></a> <div class="indexindexprojecttitle"> 河南中医学院音乐网 <div style="float:left;"> 项目进展 : <progress class="proj_progress" id="prog" value="50" <div class="projecttec"> 技术路线 :C#/ASP.net/SQL Server/Ajax <div class="indexprojecttitle"> 河南中医学院网络信息中心网站 <div style="float:left;"> 项目进展 : <progress class="proj_progress" id="prog" value="80" <div class="projecttec"> 技术路线 :C#/ASP.net/SQL Server/Ajax <div class="indexprojecttitle"> 河南中医学院软件网 <div style="float:left;"> 项目进展 : <progress class="proj_progress" id="prog" value="50" <div class="projecttec"> 技术路线 :C#/ASP.net/SQL Server/Ajax <div class="indexprojecttitle"> 河南中医学院安全计划 <div style="float:left;"> 项目进展 : <progress class="proj_progress" id="prog" value="71" <div class="projecttec"> 技术路线 :C#/ASP.net/SQL Server/Ajax 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 4 页
<div style="clear:both;"> <div class="copyright"> 河南中医学院互联网应用技术研究所版权所有 <div style="clear:both;"> </body> CSS 主要代码 : /*Logo*/.LogoNav { background: url(../images/logobannerbg.png) repeat-x; width: 980px; height: 73px; }.Logo { float: left; margin-top: 13px; margin-left: 46px; } /* 导航 */.Nav { margin-top: 10px; width: 475px; text-align: left; float: right; padding-top: 12px; }.Nav ul li { position: relative; float: left; width: 68px; height: 28px; line-height: 28px; text-align: center; }.NavChild { background: url(../images/navchild_bg.png) no-repeat 60px 12px; }.NavChild_Short { background: url(../images/navchild_bg.png) no-repeat 50px 12px; }.Nav ul li:hover { background: url(../images/navbg.png) no-repeat; }.Nav ul li:hover a { color: #FFF; }.Nav ul li ul { display: none; }.Nav ul li:hover ul { display: block; }.Nav ul ul { position: absolute; z-index: 5; top: 27px; left: 0px; width: 120px; background: #333; }.Nav ul li.nav1 ul { width: 100px; text-align: center; }.Nav ul li ul li { float: left; width: 100%; height: 28px; line-height: 28px; }.Nav ul li ul li a { color: #FFF; }.Nav ul li ul li:hover { background: none; text-decoration: underline; }.BottomContent { width: 980px; padding-bottom: 80px; border: 4px #707070 solid; background: #FFF url(../images/contentbg.png) repeat-x; margin-top: 14px; } JS 主要代码 : <script type="text/javascript" src="js/jquery.js"></script> <script> $(function(){ $.get('data/news.xml', function(xmldata){ }); var newstitle=$(xmldata).find("contents").find("title").text(); $('#news_title a').html(newstitle); var newsauthor=$(xmldata).find("contents").find("author").text(); $('#news_author').html(newsauthor); $('#news_time').html($(xmldata).find("contents").find("time").text()); $('#news_cont p').html($(xmldata).find("contents").find("news").text()); $.get('data/microblog.xml', function(xmldata){ var MBLength=$(xmlData).find("Contents").find("MicroBlog").length;MBStr = ''; for(var i = 0; i < MBLength; i++){ MBStr +='<div class="textitem">'; 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 5 页
MBStr +='<div class="textcontent">'+$(xmldata).find("contents").find("microblog").eq(i).find("mbco ntent").text()+''; MBStr +='<div class="textauthor">'+$(xmldata).find("contents").find("microblog").eq(i).find("mbtim e").text()+' '+$(xmldata).find("contents").find("microblog").find("mbauthor").eq(i ).text()+' '+$(xmldata).find("contents").find("microblog").eq(i).find("mbsource").text()+'< /div>' MBStr +=''; } $('#microblog').html(mbstr) }); }); </script> 4 Web 兼容性测试 (1) 请通过多种浏览器进行 Web 兼容性测试 (2) 请撰写 Web 兼容性测试报告, 并填写兼容性测试表, 具体如表 9-1 所示 表 9-1 Web 兼容性测试结果浏览器网页总体 HTML 5 CSS 3 jquery 导航菜单成员说成员展示 IE 7 IE 8 IE 9 IE 10 Firefox 21 Firefox 20 Maxthon 4.0 Maxthon 3.X Opera 12.10 Opera 12.00 Safari 6.0 Safira 5.1 Chrome 27 Chrome 26 360 baidu QQ Browser 要求 : 请完整实现该案例, 并将 Web 的结构设计的分析结果填写到实验报告册中 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 6 页
六 自主实验步骤 1 互联网应用技术研究所的手机版本网站 (1) 结合上述 Web 案例, 为互联网应用技术研究所设计手机版本的网站首页 设计工具使用 Adobe Photoshop (2) 请依据设计进行手机版本的网站首页开发 (3) 成员说 栏目的数据, 要使用 Web 版本的数据 要求 : 请实现该网站, 并将设计思路 开发过程填写到实验报告册中 请完成该网站首页的开发, 并提交结果 请实现上述效果, 并将结果填写到实验报告册中 七 思考及问答 1 网站开发全过程 (1) 网站的开发团队应该包含哪些角色? 如何进行分工 (2) 网站开发过程分为哪几个阶段? 各个阶段的工作重点分别是什么? (3) 网站开发的周期和进度, 除了积极的工作外, 应该如何做好进度保障? 河南中医学院互联网应用技术研究所本讲共计 7 页 当前第 7 页