项目实战三讲述.ppt

第三章 制作开心网 本章目标 会使用Photoshop切割网页效果图 会使用DIV+CSS实现网页布局 会使用DIV+CSS制作网页 本章任务 制作开心网如下13个页面： 首页 注册页面 登录页面 公共主页 游戏大厅页面 社交游戏页面，包括开心城市的官方首页、建筑大全、新闻公告、游戏攻略、论坛热贴、常见问题共6个页面，以及开心餐厅和开心庄园2个页面 介绍开心网 组成部分 公共主页 SNS服务 手机服务 社交游戏 介绍开心网 组成部分 网页游戏 小游戏 周边产品 开心网制作页面 首页 注册、登录页面 公共主页 游戏大厅页面 社交游戏页面 开心城市——官方首页、建筑大全、新闻公告、游戏攻略、论坛热贴、常见问题 开心餐厅 开心庄园 阶段项目划分 第一阶段 制作首页 第二阶段 制作注册页面 第三阶段 制作登录页面 第四阶段 制作公共主页 阶段项目划分 第五阶段 制作游戏大厅页面 第六阶段 制作开心城市——官方首页 第七阶段 制作建筑大全、新闻公告、游戏攻略、论坛热贴、常见问题共5个页面 第八阶段 制作开心餐厅页面 第九阶段 制作开心庄园页面 阶段1—制作首页（1） 制作页面顶部和底部 使用DIV+CSS布局 右上角导航超链接颜色为白色，鼠标移至超链接上时，字体颜色为白色且无下划线 当鼠标移至底部的超链接文本上时，超链接有下划线，字体大小、颜色不变 阶段1—制作首页（1） 实现思路 根据提供的首页效果图进行切图 页面分为上中下三部分布局 顶部背景设置为图片背景 可使用复合选择器实现顶部和底部的超链接样式 阶段1—制作首页（2） 制作中间部分内容 左侧部分背景为灰色 右侧部分背景为白色，并且有边框 登录部分的文本输入框为细边框样式 登录按钮使用图片作为按钮背景 中间主体部分 阶段1-制作首页（2） 实现思路 页面整体背景设为灰色，右侧部分内容背景设计白色 登录部分账号和密码输入框使用盒子模型属性设置文本框的边框 登录按钮使用背景属性设置按钮的背景图片 阶段2—制作注册页面（1） 制作注册页面左侧部分 使用DIV+CSS布局 文本输入框设置为细边框样式 注册按钮使用CSS设置背景图片，并且当鼠标移至注册按钮上时，鼠标变为手状 阶段2—制作注册页面（1） 实现思路 使用盒子模型属性设置文本输入框的细边框样式 注册按钮设置为背景图片 阶段2—制作注册页面（2） 制作注册页面右侧部分 标题字体颜色偏红色 背景颜色为浅蓝色 最热主页和最热组件两部分内容使用列表实现 阶段2—制作注册页面（2） 实现思路 标题文本可以放在P标签内，然后设置其样式 最热主页和最热组件图片增加空链接，可使用无序列表实现，使用CSS控制每个li的宽度，并设置其中文本位置居中和字体颜色 阶段3—制作登录页面 使用DIV+CSS布局并制作网页 文本输入框使为细边框样式，登录按钮使用CSS设置按钮的背景图片 实现思路 登录部分整体使用背景颜色实现 制作语义化的表单 文本框使用盒子模型属性设置边框的样式 使用背景属性设置登录按钮的背景图片 阶段4—制作公共主页（1） 制作页面顶部 使用DIV+CSS整体布局页面 顶部超链接字体颜色为白色，鼠标移至超链接文本时字体颜色为白色，并且无下划线，中间“首页”等超链接字体为粗体 字体加粗显示 阶段4—制作公共主页（1） 实现思路 超链接样式整体设置，对加粗的超链接文本重新编写专属的超链接样式 制作顶部时，要先设计好页面的整体布局 前面制作页面时能够应用的样式，要直接应用 阶段4—制作公共主页（2） 制作左侧部分 使用定义列表实现页面左侧菜单列表 列表前的小图标使用背景图的形式实现 添加和管理按钮设置为图片超链接 鼠标移至超链接上时字体颜色不变，且无下划线 阶段4—制作公共主页（2） 实现思路 使用dl定义列表，dt放标题，dd放列表菜单内容，统一设置dt和dd中内容距左侧边框距离 按钮使用背景图片的形式实现 阶段4—制作公共主页（3） 制作右侧内容 全部、名人等分类使用列表实现 最受欢迎等切换超链接使用列表实现 其他字体、背景样式、颜色等如图所示 阶段4—制作公共主页（3） 实现思路 动态汇总一行两个链接使用dl实现，两个样式分别直接修饰dt和dd即可 全部、名人分类链接使用ul实现 最受欢迎3个链接使用dl实现，3个样式分别直接修饰dt和dd即可 具体列表内容可以使用ul实现 最后翻页可以使用span或其他任意标签实现 小结 阶段5—制作游戏大厅页面（1） 制作页面顶部 使用DIV+CSS整体布局页面 当鼠标经过“首页”超链接时字体样式不变 阶段5—制作游戏大厅页面（1） 实现思路 页面布局为上中下三部分，整体布局页面 游戏大厅4个字白色加粗显示 首页所在区域设置背景图像，鼠标移出超链接和移至超链接上的样式一样 阶段5—制作游戏大厅页面（2