搜索
智能手机操作与应用导引网站•第四小组•移设1213网站项目概况：•为了以下目的安排这次实训：•掌握网站开发从规划到构建、维护的方法；•精通Dreanmweaver制作静态网页的方法，掌握一定的动态网页设计方法；•具有HTML语言编程的能力和CSS+DIV的运用能力•对网站涉及的主要内容进行文字的提炼、压缩和再加工以适合用户快速扫读的要求；•掌握按钮、图片等修饰、再加工的方法；（利用“美图秀秀”PHOTOSHOP等工具进行处理）•掌握智能手机相关信息。•实训内容：•智能手机操作与应用导引。小组成员及分工：学生姓名工作任务角色首页部分页面制作组长美工,策划部分页面制作组员美工，部分页面制作组员材料搜集，布局部分页面制作组员这是由组长丁鹏制作的首页。图片展示草图这是我制作的网页，主要采用上标题加导航下面是文字图片的内容结构。--------组员钱星烨网站结构图：主页展示：主页配色方案：白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光，因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色具有洁白明快纯真和清洁的意象。白色是网页设计中通用的颜色，它具有容易突出彩度的特性，当一个页面设计未使用白色时，往往会感觉空间减弱，容易造成猜度不够明确、页面沉闷等反应。在以白色为基调的同时，我们增加了蓝色的导航。这种颜色用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。而我们的网站是以宣传手机和手机app为中心的，所以这个色系更能体现出我们网站的中心。主页布局框架图：主页Html核心代码：divid=yc-mod-sliderdivclass=wrapperdivid=slideshowclass=box_skitterfn-clearulliimgclass=cubeRandomsrc=../Img/index-img/slider1.jpg//liliimgclass=cubeRandomsrc=../Img/index-img/slider2.jpg//liliimgclass=cubeRandomsrc=../Img/index-img/slider3.jpg//li/ul/divscripttype=text/javascriptsrc=../js/index/slideshow.js/script/div/div主页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-repeatlefttop!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-repeatlefttop;width:31px;height:31px;}@charsetutf-8*{margin:0px;padding:0px;}典型页面：典型页面Html核心代码：divid=wrapperh1IOSsmall易惹人爱所以得众人所爱/small/h1divid=contentulid=appleNavliahref=../../Index/index.html首页/a/liliahref=ios百科.html百科/a/liliahref=ios操作.html手机操作/a/liliahref=用ios娱乐.html用ios娱乐/a/liliahref=用ios学习.html用ios学习/a/liliahref=玩转ios.html玩转ios/a/liliahref=硬件.html硬件/a/liliahref=ios使用技巧.htmlios技巧/a/liliahref=越狱教程.html越狱教程/a/li/ul/div典型页面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.层无法正常居中经常出现层无法正常居中原因一般是：代码书写问题，如果格式是在代码中写的，应该是divstyle=margin:0auto……/div如果在CSS样式中写是margin:0auto;另一种原件是前一个层阻碍了现有层。导致无法正常居中。3.HTML代码问题现象：无法返回上一页。解决方法用命令aonClick=javascript:window.history.back(-1);谢谢欣赏！