《项目实战三剖析》由会员分享，可在线阅读，更多相关《项目实战三剖析（57页珍藏版）》请在金锄头文库上搜索。
1、第三章 制作开心网 本章目标标 n会使用Photoshop切割网页页效果图图 n会使用DIV+CSS实现实现 网页页布局 n会使用DIV+CSS制作网页页 教师讲解本章目标 本章任务务 n制作开心网如下13个页页面： 首页页 注册页页面 登录页录页 面 公共主页页 游戏戏大厅页厅页 面 社交游戏页戏页 面，包括开心城市的官方首页页、建筑 大全、新闻闻公告、游戏戏攻略、论坛热贴论坛热贴 、常见问见问 题题共6个页页面，以及开心餐厅厅和开心庄园2个页页面 介绍绍开心网 n组组成部分 公共主页页 SNS服务务 手机服务务 社交游戏戏 介绍绍开心网 n组组成部分 网页页游戏戏 小游戏戏 周边产边产 品
2、 开心网制作页页面 n首页页 n注册、登录页录页 面 n公共主页页 n游戏戏大厅页厅页 面 n社交游戏页戏页 面 开心城市官方首页页、建筑大全、新闻闻公告、 游戏戏攻略、论坛热贴论坛热贴 、常见问题见问题 开心餐厅厅 开心庄园 阶阶段项项目划分 n第一阶阶段 制作首页页 n第二阶阶段 制作注册页页面 n第三阶阶段 制作登录页录页 面 n第四阶阶段 制作公共主页页 阶阶段项项目划分 n第五阶阶段 制作游戏戏大厅页厅页 面 n第六阶阶段 制作开心城市官方首页页 n第七阶阶段 制作建筑大全、新闻闻公告、游戏戏攻略、论坛热贴论坛热贴 、 常见问题见问题 共5个页页面 n第八阶阶段 制作开心餐厅页厅页
3、面 n第九阶阶段 制作开心庄园页页面 阶阶段1制作首页页（1） n制作页页面顶顶部和底部 使用DIV+CSS布局 右上角导导航超链链接颜颜色为为白色，鼠标标移至超链链接 上时时，字体颜颜色为为白色且无下划线线 当鼠标标移至底部的超链链接文本上时时，超链链接有下 划线线，字体大小、颜颜色不变变 阶阶段1制作首页页（1） n实现实现 思路 根据提供的首页页效果图进图进 行切图图 页页面分为为上中下三部分布局 顶顶部背景设设置为图为图 片背景 可使用复合选择选择 器实现顶实现顶 部和底部的超链链接样样式 教师讲解实现思路 阶阶段1制作首页页（2） n制作中间间部分内容 左侧侧部分背景为为灰色 右侧侧
4、部分背景为为白色，并且有边边框 登录录部分的文本输输入框为细边为细边 框样样式 登录录按钮钮使用图图片作为为按钮钮背景 中间主体部分 阶阶段1-制作首页页（2） n实现实现 思路 页页面整体背景设为设为 灰色，右侧侧部分内容背景设计设计 白色 登录录部分账账号和密码输码输 入框使用盒子模型属性设设 置文本框的边边框 登录录按钮钮使用背景属性设设置按钮钮的背景图图片 教师讲解实现思路 阶阶段2制作注册页页面（1） n制作注册页页面左侧侧部分 使用DIV+CSS布局 文本输输入框设设置为细边为细边 框样样 式 注册按钮钮使用CSS设设置背景图图 片，并且当鼠标标移至注册按钮钮 上时时，鼠标变为标变
5、为 手状 阶阶段2制作注册页页面（1） n实现实现 思路 使用盒子模型属性设设置文本输输入框的细边细边 框样样式 注册按钮设钮设 置为为背景图图片 教师讲解实现思路 阶阶段2制作注册页页面（2） n制作注册页页面右侧侧部分 标题标题 字体颜颜色偏红红色 背景颜颜色为为浅蓝蓝色 最热热主页页和最热组热组 件两部 分内容使用列表实现实现 阶阶段2制作注册页页面（2） n实现实现 思路 标题标题 文本可以放在标签标签 内，然后设设置其样样式 最热热主页页和最热组热组 件图图片增加空链链接，可使用无序 列表实现实现 ，使用CSS控制每个的宽宽度，并设设置 其中文本位置居中和字体颜颜色 教师讲解实现思路
6、 阶阶段3制作登录页录页 面 n使用DIV+CSS布局并制作网页页 n文本输输入框使为细边为细边 框样样式，登录录按钮钮使用 CSS设设置按钮钮的背景图图片 n实现实现 思路 登录录部分整体使用背景颜颜色实现实现 制作语义语义 化的表单单 文本框使用盒子模型属性设设置边边框的样样式 使用背景属性设设置登录录按钮钮的背景图图片 教师讲解实现思路 阶阶段4制作公共主页页（1） n制作页页面顶顶部 使用DIV+CSS整体布局页页面 顶顶部超链链接字体颜颜色为为白色，鼠标标移至超链链接文本 时时字体颜颜色为为白色，并且无下划线线，中间间“首页页”等 超链链接字体为为粗体 字体加粗显示 阶阶段4制作公共
7、主页页（1） n实现实现 思路 超链链接样样式整体设设置，对对加粗的超链链接文本重新 编编写专专属的超链链接样样式 制作顶顶部时时，要先设计设计 好页页面的整体布局 前面制作页页面时时能够应够应 用的样样式，要直接应应用 教师讲解实现思路 阶阶段4制作公共主页页（2） n制作左侧侧部分 使用定义义列表实现页实现页 面左侧侧菜单单列表 列表前的小图标图标 使用背景图图的形式实实 现现 添加和管理按钮设钮设 置为图为图 片超链链接 鼠标标移至超链链接上时时字体颜颜色不变变， 且无下划线线 阶阶段4制作公共主页页（2） n实现实现 思路 使用定义义列表，放标题标题 ，放列表菜 单单内容，统统一设设置
8、dt和dd中内容距左侧边侧边 框距离 按钮钮使用背景图图片的形式实现实现 教师讲解实现思路 阶阶段4制作公共主页页（3） n制作右侧侧内容 全部、名人等分类类使用列 表实现实现 最受欢欢迎等切换换超链链接 使用列表实现实现 其他字体、背景样样式、 颜颜色等如图图所示 阶阶段4制作公共主页页（3） n实现实现 思路 动态汇总动态汇总 一行两个链链接使用实现实现 ，两个样样式 分别别直接修饰饰和即可 全部、名人分类链类链 接使用实现实现 最受欢欢迎3个链链接使用实现实现 ，3个样样式分别别直 接修饰饰和即可 具体列表内容可以使用实现实现 最后翻页页可以使用或其他任意标签实现标签实现 教师讲解实现思
9、路 小结结 共性问题讲解 阶阶段5制作游戏戏大厅页厅页 面（1） n制作页页面顶顶部 使用DIV+CSS整体布局页页面 当鼠标经过标经过 “首页页”超链链接时时字体样样式不变变 阶阶段5制作游戏戏大厅页厅页 面（1） n实现实现 思路 页页面布局为为上中下三部分，整体布局页页面 游戏戏大厅厅4个字白色加粗显显示 首页页所在区域设设置背景图图像，鼠标标移出超链链接和 移至超链链接上的样样式一样样 教师讲解实现思路 阶阶段5制作游戏戏大厅页厅页 面（2） n制作页页面上部 鼠标标移至左侧侧超链链接上时时，背景变为红变为红 色图图像， 字体颜颜色为为白色 登录录部分输输入框为细边为细边 框样样式，使
10、用CSS设设置登 录录按钮钮的背景图图片，背景颜颜色为为灰色 三部分高度相同 阶阶段5制作游戏戏大厅页厅页 面（2） n实现实现 思路 左侧侧菜单单使用列表实现实现 ，鼠标标移至超链链接时时 改变变背景图图片和文本颜颜色，并且超链链接无下划线线 登录录部分的文本输输入框使用盒子模型属性设设置边边 框样样式，登录录按钮设钮设 置为为背景图图片 三部分高度设设置为为相同，并且边边框样样式相同 教师讲解实现思路 阶阶段5制作游戏戏大厅页厅页 面（3） n制作“全部游戏戏”部分 “全部游戏戏”一行标题标题 使用列表实现实现 进进入游戏戏、新手资资料使用图图片超链链接，且链链接为为 空 图图片和游戏标题
11、链戏标题链 接均为为空，当鼠标标移至游戏标戏标 题题超链链上时时，超链链接样样式不变变 阶阶段5制作游戏戏大厅页厅页 面（3） n实现实现 思路 使用div布局页页面主体各部分，为为后续续制作其他部 分内容留下位置 标题标题 背景使用图图片背景 主体内容使用布局，图图片和文本内容分别别放 在和中 教师讲解实现思路 阶阶段5制作游戏戏大厅页厅页 面（4） n制作“角色扮演”部分 使用DIV+CSS布局 标题标题 字体颜颜色为为褐红红色 使用列表制作主体内容 图图片和图图片标题链标题链 接均 为为空 进进入游戏戏、新手资资料使 用图图片超链链接，且链链接 为为空 阶阶段5制作游戏戏大厅页厅页 面（
12、4） n实现实现 思路 标题样标题样 式和边边框样样式与“全部游戏戏”部分一样样，可 以直接使用其样样式 图图片和对应对应 的文本内容使用列表实现实现 ，固定 每个的宽宽度和高度，统统一对对中的超链链接、 图图片、文本等页页面元素定义样义样 式 教师讲解实现思路 阶阶段5制作游戏戏大厅页厅页 面（5） n制作新闻闻公告和游戏视频戏视频 部分 新闻闻公告主体部分使用列表实现实现 每条列表下有一条虚线线 鼠标标移至超链链接上时时，出现现下划线线 ，字体颜颜色不变变 游戏视频戏视频 中超链链接有下划线线，字体 颜颜色为蓝为蓝 色，图图片链链接为为空，两个 视频视频 以一个虚线线隔开 阶阶段5制作游戏
13、戏大厅页厅页 面（5） n实现实现 思路 新闻闻公告和游戏视频戏视频 的标题样标题样 式和边边框样样式直接 使用前面已完成的样样式 新闻闻公告内容使用列表实现实现 ，每个下边边 框设设置为为虚线线，最后一个单单独设设置为为无下边边 框或下边边框宽宽度为为0px 游戏视频戏视频 使用布局，图图片和文本内容分别别在 和中，然后设设置标签选择标签选择 器样样式 教师讲解实现思路 小结结 共性问题讲解 阶阶段6制作开心城市官方首页页（1） n制作顶顶部和底部 导导航菜单单字体颜颜色为为白色，右上角超链链接字体颜颜 色为为褐色，鼠标标移至超链链接上时样时样 式不变变 “官方首页页”导导航菜单单背景与其他
14、导导航不同 底部超链链接字体颜颜色为为灰色，鼠标标移至超链链接时时 字体颜颜色不变变，出现现下划线线 阶阶段6制作开心城市官方首页页（1） n实现实现 思路 页页面布局为为上中下三部分，页页面背景设为设为 灰色； 中间间部分水平居中显显示，且设设置四周边边框；底部 背景设为设为 白色 顶顶部使用背景图图片，“官方首页页”背景图图要单单独设设 置 左上角“注册”等部分底部使用背景图实现图实现 教师讲解实现思路 阶阶段6制作开心城市官方首页页（2） n制作“开始游戏戏”图图片和“精彩截图图”部分 使用DIV+CSS布局 两侧侧箭头图头图 片垂直居中显显示 “精彩截图图”中的图图片为圆为圆 角矩形，
15、并且边边框颜颜色 为为浅黄色 阶阶段6制作开心城市官方首页页（2） n实现实现 思路 “开始游戏戏”图图片直接插入即可，超链链接为为空 “精彩截图图”背景使用图图片作为为背景，图图片使用 列表布局，两侧侧的箭头图标单头图标单 独设设置样样式 图图片所在的白色背景可以使用图图片背景 教师讲解实现思路 阶阶段6制作开心城市官方首页页（3） n制作页页面左侧侧 使用DIV+CSS和列表相结结合的方式制 作“游戏戏介绍绍”、“论坛热贴论坛热贴 ”、“常见见 问题问题 ”和图图片广告 “论坛热贴论坛热贴 ”和“常见问题见问题 ”列表前的小 圆圆点使用背景图图片实现实现 ，主题题内容在 左侧侧，日期居右显
16、显示 列表主题题下方为为虚线线，并且最后一个 主题题下方无虚线线 阶阶段6制作开心城市官方首页页（3） n实现实现 思路 各部分标题标题 和背景都使用图图片作为为背景 列表前的小圆圆点可以对对每个设设置背景 时间时间 可以单单独放在一个标签标签 中，对标题设对标题设 置居右 样样式；也可以设设置中的文本居右位置，然后设设 置标题标题 超链链接样样式，使其居左显显示 教师讲解实现思路 阶阶段6制作开心城市官方首页页（4） n制作新闻闻公告、新手入门门和游戏戏攻略三部分 新闻闻公告、新手入门门列表背景为为白色，游戏戏攻略 列表背景为为黄色 所有列表前的小圆圆点使用图图片背景实现实现 ，列表下 方为为虚线线，日期居右显显示 阶阶段6制作开心城市官方首页页（4） n实现实现 思路
