网页制作实训报告.ppt

智能手机操作与应用导引网站 第四小组移设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 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 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 层无法正常居中经常出现层无法正常居中原因一般是 代码书写问题 如果格式是在代码