项目实战二讲述.ppt

项目实战二： 食味坊官网 本章目标 会使用Photoshop切割网页效果图 会使用DIV+CSS设计网页布局 会使用DIV+CSS制作网页 会制作语义化的表单 本章任务 制作食味坊官网如下12个页面： 首页 美食天地首页 新闻中心首页 健康贴士首页 关于我们首页 购物车模块：首页、订单信息页 招贤纳士首页 帮助中心首页 我的订单页 注册页面、登录页面 介绍食味坊官网 餐饮连锁企业的官方网站 企业简介 商品展示 在线订餐 在线支付功能 页面展示 官网首页 美食天地首页 新闻中心首页 健康贴士首页 关于我们首页 购物车首页 页面展示 购物车订单信息页 招贤纳士首页 帮助中心首页 我的订单页面 注册页面 登录页面 阶段项目划分 第一阶段 制作首页 第二阶段 制作美食天地首页 第三阶段 制作新闻中心首页 第四阶段 制作健康贴士首页 第五阶段 制作关于我们首页 阶段项目划分 第六阶段 制作购物车模块：首页、订单信息页 第七阶段 制作招贤纳士首页 第八阶段 制作帮助中心首页 第九阶段 制作我的订单页 第十阶段 制作注册页面、登录页面 阶段1—制作首页（1） 布局并制作页面顶部 使用DIV+CSS整体布局页面并制作页面顶部 顶部横向导航的登录、注册按钮，使用背景图实现，鼠标移至收藏本站等超链接时显示下划线 主导航的每一个导航项背景使用背景图实现 顶部横向导航 主导航 阶段1—制作首页（1） 实现思路 在body中整体设置页面背景图片，且居中显示 整体布局页面div居中显示，设置页面底部背景图片（带两个小蝴蝶的图片） 在整体页面div中布局页面为上中下结构，然后根据首页效果图制作页面顶部 制作首页主体部分 使用定义列表排版韩式酱汤部分的文本和图片 使用列表制作“促销信息”的Tab切换按钮 使用无序列表制作促销信息的主体列表部分，每个列表前的小圆点使用背景图片实现，下边框为虚线，鼠标移至超链接时显示下划线，日期居右显示 阶段1—制作首页（2） 阶段1—制作首页（2） 实现思路 上面部分的背景及右侧的图片使用背景图片的方式实现，左侧3个大图片和3个小图片及文本使用插入图片的方式实现 下方布局为左中右结构，分别制作韩式酱汤、Tab切换部分和订餐热线部分 阶段1—制作首页（3） 制作首页底部 使用DIV+CSS布局页面底部 使用列表制作网站底部导航链接，鼠标移至超链接上时显示下划线 阶段2—制作美食天地首页（1） 制作页面顶部和左侧菜单 使用DIV+CSS布局页面 制作页面LOGO部分 制作顶部导航 使用列表制作页面主导航和二级菜单 制作页面左侧导航 制作页面主视觉部分 左侧导航 页面LOGO 主视觉 阶段2—制作美食天地首页（1） 实现思路 在body中设置页面背景图片，并且居中显示 页面顶部超链接和主导航可以直接使用前面首页完成的HTML代码和CSS样式，主导航下方的二级菜单使用列表实现 鼠标移至左侧导航时，导航项背景变为红色图片 阶段2—制作美食天地首页（2） 制作页面右侧部分 使用div、列表与float属性相结合的方式制作面包屑、Tab切换按钮、翻页组件、列表内容，并使用背景图美化这些组件中出现的小图标 制作浮在页面之上的菜品简介详情 翻页组件 面包屑 Tab切换按钮 阶段2—制作美食天地首页（2） 实现思路 使用背景属性设置圆角矩形作为精品菜单的背景图片 可以使用无序列表或定义列表排列主体内容的图片、标题、文本、按钮等 使用相对定位和绝对定位相结合的方式制作浮在页面之上的菜品简介详情，其背景是一个圆角矩形 阶段2—制作美食天地首页（3） 制作页面底部 页面底部导航链接和版权部分背景是一个图片 其他要求参见首页底部制作时的需求 小结 阶段3—制作新闻中心首页（1） 制作页面顶部和底部 使用DIV+CSS设置布局并制作如图所示页面 制作页面顶部导航 制作主导航和二级菜单 制作页面底部导航链接和版权声明 制作页面主视觉部分 阶段3—制作新闻中心首页（1） 实现思路 页面布局、背景图片设置、页面顶部和底部的制作可以参考美食天地首页相同或相似的内容，对于相同的内容可以直接使用其HTML代码和CSS样式 使用无序列表制作二级菜单，代码和样式可以参考美食天地首页的二级菜单的代码和样式 阶段3—制作新闻中心首页（2） 制作页面主体部分 使用float属性与div相结合的方式布局页面 制作页面左侧导航部分 制作页面右侧新闻中心主体内容，列表前的小圆点使用背景图的方式实现，日期居右显示 左侧导航 阶段3—制作新闻中心首页（2） 实现思路 页面左侧导航、右侧背景、面包屑、Tab切换按钮与美食天地首页相同部分的样式相同 使用无序列表 制作右侧列表内容，设置li的背景图片为小圆点图片，下边框为虚线；日期可以放在span标签中，统一设置其样式和位置 阶段4—制作健康