《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"><span>联系我们<span>l<span>加为首页<span>|<span> 收藏本站</span></di> <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"/> </dv> div class="Logo"><img src="Images/Logo. png"width="278" height=48"alt= /></div> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第2页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 2 页 图 9-1 设计效果 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> <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> </div> <div style="clear:both;"></div> <div class="MiddleContent"> <div class="LogoNav"> <div class="Logo"><img src="Images/Logo.png" width="278" height="48" alt="" /></div> 图 9-2 结构分析
《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 <div class="Nav"> <l>< a href="#">网站首页</a></l> < li class=" Nav child>< a href="#">本所介绍<a> <i>< a href="#">本所介绍</a></li <i>< a href="#>团队介绍</a></l> ><ahef="#>团队成员</a></i> <l>< a href="#">日常动态<a></> >< a href="#">荣誉成绩</a></i> < i class="Nav1 Nay Child_ Short"stye="wdth60px"><ahef="#">成员说 <i><ahef="#>博客<a></> <i>< a href="#>微博</a></i> <li><a href="#">lOFTER</a></li> <l>< a href="#">寻求合作<a></> <l>< a href="#">招贤纳士</a></li> div class="Lunzhua <div id="slider"> <li id="first" class="firstanimation"> href="#”><img src="images/Lunzhuan png"alt="/></a> </ <li id="second" class="secondanimation"> <a href="#"><img src="images/Lunzhuan 1 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="p></a> </i> <div class="Bottom Content"> <div class="ContentLeft'"> div class="IndexNews Content"> div class="News Title "id="news title"><a href="#"></a></div> div class="News Author"><span id="news_author">w ffi </span><span style="margin-left: 13px margin-right: 8px; id=news_time></span><span></span></div> diy class="News Text" id="news cont,> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第3页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 3 页 <div class="Nav"> <ul> <li><a href="#">网站首页</a></li> <li class="NavChild"><a href="#">本所介绍</a> <ul> <li><a href="#">本所介绍</a></li> <li><a href="#">团队介绍</a></li> <li><a href="#">团队成员</a></li> </ul> </li> <li><a href="#">日常动态</a></li> <li><a href="#">荣誉成绩</a></li> <li class="Nav1 NavChild_Short" style="width:60px;"><a href="#">成员说 </a> <ul> <li><a href="#">博客</a></li> <li><a href="#">微博</a></li> <li><a href="#">LOFTER</a></li> </ul> </li> <li><a href="#">寻求合作</a></li> <li><a href="#">招贤纳士</a></li> </ul> </div> </div> <div class="Lunzhuan"> <div id="slider"> <div id="mask"> <ul> <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> </ul> </div> </div> </div> </div> <div class="BottomContent"> <div class="ContentLeft"> <div class="IndexNewsContent"> <div class="NewsTitle" id="news_title"><a href="#"></a></div> <div class="NewsAuthor"><span id="news_author"> 发 布 </span><span style="margin-left:13px;margin-right:8px;" id=news_time></span><span></span></div> <div class="NewsText" id="news_cont">
b前墙开发)》实验教学指导/实验九:使用CS进行网页布局4 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></di> </div <div class="Team Content"> div class="TeamTitle"><a href="Talk. html"><img src="Images/Team. png wdh="126" height="20at="/<a>已聚合博客18个,已聚合微博14个<div> div class="TeamText2"id="microblog"> </div> div class="WorkT itle"><a href="Project. html"><img src="Images/ork. png width=163" height=20"/></a></div> < div class==" ndexIndexProjectTitle">河南中医学院音乐网<div> < div style=" float: left;">项目进展:</div> class="proj_progress id="prog value="50 diy class=" ProjectTec">技术路线:C# ASP. net/SQL Server/Ajax<ldiv> <div class="Projectitem"> div class=" ndex ProjectTitle">河南中医学院网络信息中心网站</dv> div class="ProjectStatu 项目进展 ≤ progress class="proL_progress va|ue="80" max=100"></progress> cass=" ProjectTec">技术路线C# ASP. net/SQL Server/Ajax</div div class=" ndexProjectT itle">河南中医学院软件网</div> div class="ProjectStatus"> 进展: ≤ progress class="pro _progress max=100"></progress> </diy> diy class=" ProjectRed">技术路线:C# ASP. net/SQL Server/Ajax<ldiv> </dv> div class=" ndex itle">河南中医学院安全计划</dv div class="ProjectStatus < div style=" float: left;">项目进展:<liv> ≤ progress class="pro_progress id="prog max="100"></progress> div class=" ProjectTec">技术路线:C# ASP. net/SQL Server/Ajax<ldiv> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第4页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 4 页 <p></p> </div> <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> </div> <div class="TeamContent"> <div class="TeamTitle"><a href="Talk.html"><img src="Images/Team.png" width="126" height="20" alt="" /></a>已聚合博客 18 个，已聚合微博 14 个</div> <div class="TeamText2" id="microblog"> </div> </div> </div> <div class="ContentRight"> <div class="WorkTitle"><a href="Project.html"><img src="Images/Work.png" width="163" height="20" /></a></div> <div class="ProjectItem"> <div class="IndexIndexProjectTitle">河南中医学院音乐网</div> <div class="ProjectStatus"> <div style="float:left;">项目进展：</div> <progress class="proj_progress" id="prog" value="50" max="100" ></progress> </div> <div class="ProjectTec">技术路线:C#/ASP.net/SQL Server/Ajax</div> </div> <div class="ProjectItem"> <div class="IndexProjectTitle">河南中医学院网络信息中心网站</div> <div class="ProjectStatus"> <div style="float:left;">项目进展：</div> <progress class="proj_progress" id="prog" value="80" max="100" ></progress> </div> <div class="ProjectTec">技术路线:C#/ASP.net/SQL Server/Ajax</div> </div> <div class="ProjectItem"> <div class="IndexProjectTitle">河南中医学院软件网</div> <div class="ProjectStatus"> <div style="float:left;">项目进展：</div> <progress class="proj_progress" id="prog" value="50" max="100" ></progress> </div> <div class="ProjectTec">技术路线:C#/ASP.net/SQL Server/Ajax</div> </div> <div class="ProjectItem"> <div class="IndexProjectTitle">河南中医学院安全计划</div> <div class="ProjectStatus"> <div style="float:left;">项目进展：</div> <progress class="proj_progress" id="prog" value="71" max="100" ></progress> </div> <div class="ProjectTec">技术路线:C#/ASP.net/SQL Server/Ajax</div>
《Web前端开发》实验教学指导/实验九:使用CSS进行网页布局 < div class=" Copy Righ">河南中医学院互联网应用技术研究所版权所有<div> <div style="clear: both; " ></div> 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主要代码: <script type="text/javascript"src="js/jquery js"><script> 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< MBLength; i++M MBStr +=<div class="TextItem"> 河南中医学院互联网应用技术研究所 本讲共计7页|当前第5页
《Web 前端开发》实验教学指导 / 实验九：使用 CSS 进行网页布局 河南中医学院互联网应用技术研究所 本讲共计 7 页 | 当前第 5 页 </div> </div> <div style="clear:both;"></div> </div> <div class="CopyRight">河南中医学院互联网应用技术研究所版权所有</div> <div style="clear:both;"></div> </div> </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">';