网页制作实训报告

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,智能手机操作与应用导引网站,第四小组,移设,1213,网站项目概况：,为了以下目的安排这次实训：,掌握网站开发从规划到构建、维护的方法；,精通Dreanmweaver制作静态网页的方法，掌握一定的动态网页设计方法；,具有HTML语言编程的能力和CSS+DIV的运用能力,对网站涉及的主要内容进行文字的提炼、压缩和再加工以适合用户快速扫读的要求；,掌握按钮、图片等修饰、再加工的方法；（利用“美图秀秀”PHOTOSHOP等工具进行处理）,掌握智能手机相关信息。,实训内容：,智能手机操作与应用导引。,小组成员及分工：,学生姓名,工作任务,角色,首页 部分页面制作,组长,美工,策划 部分页面制作,组员,美工，部分页面制作,组员,材料搜集，布局 部分页面制作,组员,这是由组长丁鹏制作的首页。,图片展示,草图,这是我制作的网页，主要采用上标题加导航下面是文字图片的内容结构。,-,组员钱星烨,网站结构图,：,主页展示,：,主页配色方案,：,白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光，因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色具有洁白明快纯真和清洁的意象。白色是网页设计中通用的颜色，它具有容易突出彩度的特性，当一个页面设计未使用白色时，往往会感觉空间减弱，容易造成猜度不够明确、页面沉闷等反应。,在以白色为基调的同时，我们增加了蓝色的导航。这种颜色用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。而我们的网站是以宣传手机和手机app为中心的，所以这个色系更能体现出我们网站的中心。,主页布局框架图：,主页,Html,核心代码,：,主页,Css,核心代码：,.box_skitter.next_button,position:absolute;,top:50%;,right:-5px;,z-index:100;,width:57px;,height:62px;,overflow:hidden;,text-indent:-9999em;,margin-top:-25px;,background:url(./Img/index-img/next.png)no-repeat left top!important;,loading,position:absolute;,top:50%;,right:50%;,z-index:10000;,margin:-16px-16px;,color:#fff;,text-indent:-9999em;,overflow:hidden;,background:url(./Img/index-img/ajax-loader.gif)no-repeat left top;,width:31px;,height:31px;,charset utf-8,*,margin:0px;,padding:0px;,典型页面,：,典型页面,Html,核心代码,：,IOS,易惹人爱 所以得众人所爱,首页,百科,手机操作,用,ios,娱乐,用,ios,学习,玩转,ios,硬件,ios,技巧,越狱教程,典型页面,Css,核心代码：,body,background-repeat:no-repeat;,background-color:#FFFFFF;,padding:0;,margin:0;,a,outline:none;,p,padding:0;,margin:0;,img,border:0;,#iphone-scrollcontainer,height:461px;,width:320px;,position:absolute;,top:140px;,left:400px;,background-color:#FFFFFF;,overflow:hidden;,.row,clear:both;,.icon,测试报告与记录,：,1),代码验证(,Html,和,Css),2),兼容性测试,3),可用性测试,系 统 效 果 预 览 图,DIV,（）,我们用了大量的DIV，基本每个网页都有DIV，运用能使整个网页的布局得到很好的控制，但这个DIV一定要用到该用的地方，因为一点误差就会导致在预览的时候可能就会不协调，不是之前设计的那样，可能在编辑的时候你设计很好，但预览的时候网页就崩溃了。所以要好好掌握DIV以及DIV的运用，在结合Css，这两者的结合就能使呈现不一样的网页。,实训中遇到的问题及解决方法：,1.预览网页达不到预期效果,解决方法：调节层大小，使其更加合理。更改层的CSS样式里面的z-index属性，因为z-index后面跟着的数字越小 层的优先级越高。,2.层无法正常居中,经常出现层无法正常居中原因一般是：代码书写问题，如果格式是在代码中写的，应该是如果在CSS 样式中写是margin:0 auto;另一种原件是前一个层阻碍了现有层。导致无法正常居中。,3.HTML代码问题,现象：无法返回上一页。,解决方法用命令,谢 谢 欣 赏！,