项目案例：六人行网站

　一、训练的技能点

　使用DIV+CSS实现整体布局

　使用DIV+CSS实现典型的4种局部结构

　使用绝对定位和滤镜实现CSS特效

　使用CSS实现页面的美化

　二、任务描述

　系统概述

　六人行网站是目前人气较旺的网络交友平台

　模拟制作4个网页

　首页

　活动页

　据点页

　注册页

　系统角色

　网站开发人员、浏览者

　三、问题分析

　问题分析1：网站制作步骤

　使用Dreamweaver创建站点、公用文件夹

　制作首页

　创建网站所有页面共用的全局样式global.css并绑定页面

　使用

　创建页面的顶部、底部模板

　应用模板实现多个页面，包括布局实现、涉及的样式实现

　页面的兼容性测试

　问题分析2：实现页面的整体布局

　4个页面均为多行多列的布局

　页面整体布局的实现步骤

　根据效果图划分区块，编写HTML页面结构

　创建各区块的布局样式layout.css，用

　四、难点分析

　难点分析1：典型局部布局结构

　难点分析2：背景修饰技巧

　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

　选择器

　常用属性

　页面布局

　盒子模型

　整体布局

　局部布局

　兼容性

　用户体验

　辅助开发工具