《linux从入门到精通》实验指导第三讲：文件及目录操作

Size: px

Start display at page:

Download "《linux从入门到精通》实验指导第三讲：文件及目录操作"

屐麓卢
5 years ago
Views:

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 的基本代码河南中医学院互联网应用技术研究所本讲共计 7 页当前第 1 页

name="q" value="search:" onfocus="if (value =='Search:'){value =''}" onblur="if (value ==''){value='search:'}" /> <input type="submit" value=" " id="searchsubmit"/> </form>

2 图 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 页

3 </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 页

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> <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 页

5 <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 # 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 页

6 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 Opera Safari 6.0 Safira 5.1 Chrome 27 Chrome baidu QQ Browser 要求 : 请完整实现该案例, 并将 Web 的结构设计的分析结果填写到实验报告册中河南中医学院互联网应用技术研究所本讲共计 7 页当前第 6 页

7 六自主实验步骤 1 互联网应用技术研究所的手机版本网站 (1) 结合上述 Web 案例, 为互联网应用技术研究所设计手机版本的网站首页设计工具使用 Adobe Photoshop (2) 请依据设计进行手机版本的网站首页开发 (3) 成员说栏目的数据, 要使用 Web 版本的数据要求 : 请实现该网站, 并将设计思路开发过程填写到实验报告册中请完成该网站首页的开发, 并提交结果请实现上述效果, 并将结果填写到实验报告册中七思考及问答 1 网站开发全过程 (1) 网站的开发团队应该包含哪些角色? 如何进行分工 (2) 网站开发过程分为哪几个阶段? 各个阶段的工作重点分别是什么? (3) 网站开发的周期和进度, 除了积极的工作外, 应该如何做好进度保障? 河南中医学院互联网应用技术研究所本讲共计 7 页当前第 7 页

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05