项目化教学案例：六人行网站.docVIP

项目案例：六人行网站 一、训练的技能点 使用DIV+CSS实现整体布局 使用DIV+CSS实现典型的4种局部结构 使用绝对定位和滤镜实现CSS特效 使用CSS实现页面的美化 二、任务描述 系统概述 六人行网站是目前人气较旺的网络交友平台 模拟制作4个网页 首页 活动页 据点页 注册页 系统角色 网站开发人员、浏览者 三、问题分析 问题分析1：网站制作步骤 使用Dreamweaver创建站点、公用文件夹 制作首页 创建网站所有页面共用的全局样式global.css并绑定页面 使用link /标签引用细节风格detail.css 创建页面的顶部、底部模板 应用模板实现多个页面，包括布局实现、涉及的样式实现 页面的兼容性测试 问题分析2：实现页面的整体布局 4个页面均为多行多列的布局 页面整体布局的实现步骤 根据效果图划分区块，编写HTML页面结构 创建各区块的布局样式layout.css，用link /绑定页面 四、难点分析 难点分析1：典型局部布局结构 div h1参加丰富的span活动/span/h1 dl dtimg src=images/act1.gif alt=活动1 //dt dd[培训] a href=#11月17号婚恋心理工作坊（/a/dd dd p活动介绍婚恋心理工作坊 /p /dd /dl … … /div 难点分析2：背景修饰技巧 div class=round ul class=list lia href=#羽毛球培训班报名/a/li lia href=#六人行免费口语辅导卡申请中/a/li lia href=#“户外”杂志半价征订/a/li /ul ul class=endpnbsp;/p/ul /div CSS代码 .round{line-height:21px;background:url(../images/rounded-right.gif) top right no-repeat;width:195px;} .list{padding:9px 9px 0px 9px; background:url(../images/rounded-left.gif) top left no-repeat;} .end{padding:0 0 0 9px; background:url(../images/rounded-left.gif) bottom left no-repeat;} .end p{line-height:9px;height:9px;margin-top:-9px; padding:0 9px 9px 0; background:url(../images/rounded-right.gif) bottom right no-repeat;} 五、开发计划 用例1：登录网站 [70分钟] 用例2：发布或参与活动 [240分钟] 用例3：参与或发布据点 [30分钟] 用例4：注册会员 [30分钟] 六、技能总结 HTML 与XHTML关系 基本标签 CSS 选择器 常用属性 页面布局 盒子模型 整体布局 局部布局 兼容性 用户体验 辅助开发工具