《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 《Web前端开发》实验教学指导 实验九:使用CSS进行网页布局 实验目的 1、掌握网页布局的基本原理 2、掌握网页布局的常用方法; 3、体会HIML、CSS、JS、 jQuery等多种技术结合进行Web设计开发过程 二、实验环境 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址 3、支持互联网访问 4、 Adobe Cs6组件支持 5、Web服务器支持 三、实验要求 1、通过实验提供的PSD文件获得Web开发需要的图片: 2、实现实验案例的基本效果,包括:下拉菜单、POP动画 3、实现实验案例中“成员说”的数据展示,所有的数据存放到XML文件中; 4、全部案例要求使用HIML5+CSS3+JS+ jQuery的技术路线实现; 5、案例要进行浏览器兼容性测试,并完成兼容性测试报告的撰写 四、实验原理 1、HTML5+CSS3进行Web开发的基本方法 2、CSS动画开发的基本方法; 3、 jQuery读取XML数据的基本方法 4、Web兼容性测试的原理和测试方法。 五、实验步骤 1、Web设计 (1)Web设计使用 Adobe Photoshop进行。 )Web设计效果如下图9-1所示。 (3)Web开发中需要的图片,可以通过访问实验素材中的【12实验设计山 ndex. psd】文件 通过原始的设计文档获得 2、Web结构分析 (1)对Web设计图进行结构分析,规划该Web的基本结构。 (2)对Web进行结构分析,分析结构图如下图9-2所示。根据分析的结果设计web的基 本代码 河南中医学院互联网应用技术研究所 本讲共计7页|当前第1页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 1 页 《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 的基 本代码
《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 技不梨 互联网应用技术研究所2013年春游活动纪实 正在开圆的究工作 图9-1设计效果 图9-2结构分析 3、Web开发 (1)在计算机硬盘上创建目录,并创建网站的子目录。 (2) Adobe Dreamweaver中创建网站,并完成配置。 (3)按照框架、表现和交互的顺序进行Web开发 HIML5主要代码 div class="TopContent'> div class==" TopLink">联系我们l加为首页| 收藏本站 div class="Logo"> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第2页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 2 页 图 9-1 设计效果 3、Web 开发 （1）在计算机硬盘上创建目录，并创建网站的子目录。 （2）Adobe Dreamweaver 中创建网站，并完成配置。 （3）按照框架、表现和交互的顺序进行 Web 开发。 HTML 5 主要代码： 联系我们|加为首页| 收藏本站 图 9-2 结构分析
《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 网站首页 本所介绍 本所介绍团队介绍 >团队成员 日常动态 >荣誉成绩 成员说 博客 微博 lOFTER 寻求合作 招贤纳士 div class="Lunzhua href="#”> div class="IndexNews Content"> div class="News Title "id="news title"> div class="News Author">w ffi diy class="News Text" id="news cont,> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第3页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 3 页 网站首页 本所介绍 本所介绍 团队介绍 团队成员 日常动态 荣誉成绩 成员说 博客 微博 LOFTER 寻求合作 招贤纳士 发 布
b前墙开发)》实验教学指导/实验九:使用CS进行网页布局4 p> div class="Imgicon">打印此消息阅读消息全文 div class="TeamTitle">已聚合博客18个,已聚合微博14个 div class="TeamText2"id="microblog"> div class="WorkT itle"> 河南中医学院音乐网 项目进展: class="proj_progress id="prog value="50 diy class=" ProjectTec">技术路线:C# ASP. net/SQL Server/Ajax div class=" ndex ProjectTitle">河南中医学院网络信息中心网站 div class="ProjectStatu 项目进展 ≤ progress class="proL_progress va|ue="80" max=100"> cass=" ProjectTec">技术路线C# ASP. net/SQL Server/Ajax河南中医学院软件网 div class="ProjectStatus"> 进展: ≤ progress class="pro _progress max=100"> diy class=" ProjectRed">技术路线:C# ASP. net/SQL Server/Ajax div class=" ndex itle">河南中医学院安全计划项目进展: ≤ progress class="pro_progress id="prog max="100"> div class=" ProjectTec">技术路线:C# ASP. net/SQL Server/Ajax 河南中医学院互联网应用技术研究所 本讲共计7页|当前第4页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 4 页 打 印 此 消 息 阅读消息全文 已聚合博客 18 个，已聚合微博 14 个 河南中医学院音乐网 项目进展： 技术路线:C#/ASP.net/SQL Server/Ajax 河南中医学院网络信息中心网站 项目进展： 技术路线:C#/ASP.net/SQL Server/Ajax 河南中医学院软件网 项目进展： 技术路线:C#/ASP.net/SQL Server/Ajax 河南中医学院安全计划 项目进展： 技术路线:C#/ASP.net/SQL Server/Ajax
《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 河南中医学院互联网应用技术研究所版权所有 CSS主要代码 LogoNavi background: url(/ images/LogoBanner Bg png) repeat-X; width: 980px Logo I float: left; margin-top: 13px; margin-left: 46px; 1 导航” Nav( margin-top: 10px; width: 475px; text-align: left; float: right; padding-top: 12px;) Nav ul li i position: relative; float: left; width: 68px; height: 28px; line-height: 28px; text-align: center; 1 Nav child[ background: url(/ images/Nav Child_bg png )no-repeat 60px 12px;] Nav child_short( background: url( /images/Nav Child_bg. png)no-repeat 50px 12px; 1 Nav ul li: hover i background: url( /images/NavBg. png) no-repeat; 1 Nav ul li: hover a( color #FFF Nav ul li ul i display: none; 1 Nav ul li: hover ul i display: block; 1 Nav ul ulI position: absolute: Z- index: 5: top: 27px; left: Opx; width: 120px background: #333: 1 Nav ul li Nav1 ul i width: 100px; text-align: center: 1 Nav ul li ul li float: left; width: 100%; height: 28px; line- height: 28px; 1 Nav ul li ul li a( color: #FFF: 1 Nav ul li ul li hover background: none; text-decoration: underline; 1 BottomContent I width: 980px; padding-bottom: 80px; border: 4px #707070 solid ackground: #FFF url(/images/ContentBg png) repeat-X; margin-top: 14px; JS主要代码: Sget(data/news.xml, function(xmlIData) ar news Title=S(xmlData) find("Contents").find"Title"). texto) var news Author=S(xmlData)find(Contents").find("Author"). texto) S#new ( time,). html(S(xmlData) find("Contents"). find("Time").text o) S#news_cont p). html(S(xmlData) find"Contents").find(News"). textO) ) 6.get( var MBLength=S(xmlData) find("Contents"). find("MicroBlog"). length; MBStr r(var i=0; i 河南中医学院互联网应用技术研究所 本讲共计7页|当前第5页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 5 页 河南中医学院互联网应用技术研究所版权所有 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 主要代码： $(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 ';
b前墙开发)》实验教学指导/实验九:使用CS进行网页布局6 MBStr class="TextContent">'+S(xmlData) find("Contents").find(MicroBlog").eq(). find("MBCo ABStr class="TextAuthor'>'+S(xmlData) find(Contents").find("MicroBlog").eq().find(MBTim e"). text(+' +S(xmlData)find("Contents"). find("MicroBlog"). find(MBAuthor)eq(i +S(xmlData) find ("Contents"). find("MicroBlog"). eq(O). find(MBSource"). text+ S#microblog,).html(MBStr) 4、Web兼容性测试 (1)请通过多种浏览器进行web兼容性测试 (2)请撰写web兼容性测试报告,并填写兼容性测试表,具体如表9-1所示。 表91web兼容性测试结果 浏览器 网页总体HML5cs3 航菜单成员说成员展示 Firefox 21 Firefox 20 Maxthon 4.0 Maxthon 3.X Opera 12.10 Opera 12.00 Safari 6.0 Safina 5.1 Chrome 27 Chrome 26 360 baidu QQ Browser 要求: 请完整实现该案例,并将web的结构设计的分析结果填写到实验报告册中 河南中医学院互联网应用技术研究所 本讲共计7页|当前第6页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 6 页 MBStr +=''+$(xmlData).find("Contents").find("MicroBlog").eq(i).find("MBCo ntent").text()+''; MBStr +=''+$(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()+'' MBStr +=''; } $('#microblog').html(MBStr) }); }); 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 的结构设计的分析结果填写到实验报告册中
《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 六、自主实验步骤 1、互联网应用技术研究所的手机版本网站 (1)结合上述Web案例,为互联网应用技术研究所设计手机版本的网站首页。设计工具 使用 Adobe Photoshop (2)请依据设计进行手机版本的网站首页开发。 (3)“成员说”栏目的数据,要使用Web版本的数据 要求: 请实现该网站,并将设计思路、开发过程填写到实验报告册中 请完成该网站首页的开发,并提交结果。 请实现上述效果,并将结果填写到实验报告册中。 七、思考及问答 1、网站开发全过程 (1)网站的开发团队应该包含哪些角色?如何进行分工。 (2)网站开发过程分为哪几个阶段?各个阶段的工作重点分别是什么? (3)网站开发的周期和进度,除了积极的工作外,应该如何做好进度保障? 河南中医学院互联网应用技术研究所 本讲共计7页|当前第7页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 7 页 六、自主实验步骤 1、互联网应用技术研究所的手机版本网站 （1）结合上述 Web 案例，为互联网应用技术研究所设计手机版本的网站首页。设计工具 使用 Adobe Photoshop。 （2）请依据设计进行手机版本的网站首页开发。 （3）“成员说”栏目的数据，要使用 Web 版本的数据。 要求： 请实现该网站，并将设计思路、开发过程填写到实验报告册中。 请完成该网站首页的开发，并提交结果。 请实现上述效果，并将结果填写到实验报告册中。 七、思考及问答 1、网站开发全过程 （1）网站的开发团队应该包含哪些角色？如何进行分工。 （2）网站开发过程分为哪几个阶段？各个阶段的工作重点分别是什么？ （3）网站开发的周期和进度，除了积极的工作外，应该如何做好进度保障？