JavaEE物联网云计算系列培训教材HTMLCSSJavascript网页设计.ppt

Chapter 第十三章 训练的技能点 使用DIV+CSS实现整体布局 使用DIV+CSS实现典型的4种局部结构 使用绝对定位和滤镜实现CSS特效 使用CSS实现页面的美化 任务描述 系统概述 六人行网站是目前人气较旺的网络交友平台 模拟制作4个网页 首页 活动页 据点页 注册页 系统角色 网站开发人员、浏览者 问题分析1：网站制作步骤 使用Dreamweaver创建站点、公用文件夹 制作首页 创建网站所有页面共用的全局样式global.css并绑定页面 使用link /标签引用细节风格detail.css 创建页面的顶部、底部模板 应用模板实现多个页面，包括布局实现、涉及的样式实现 页面的兼容性测试 问题分析2：实现页面的整体布局 4个页面均为多行多列的布局 页面整体布局的实现步骤 根据效果图划分区块，编写HTML页面结构 创建各区块的布局样式layout.css，用link /绑定页面 难点分析1：典型局部布局结构4-1 div-dl-dt-dd结构 难点分析1：典型局部布局结构4-2 如何实现页面的效果？ 难点分析1：典型局部布局结构4-3 div-ul-li结构 外层结构 圆角矩形结构 难点分析1：典型局部布局结构4-4 table-tr-td结构 难点分析2：背景修饰技巧3-1 自适应高度的圆角矩形 难点分析2：背景修饰技巧3-2 CSS代码 难点分析2：背景修饰技巧3-3 背景偏移量技术 开发计划 用例1：登录网站 [70分钟] 用例2：发布或参与活动 [240分钟] 用例3：参与或发布据点 [30分钟] 用例4：注册会员 [30分钟] 用例1：登录网站4-1 需求说明 实现功能有 顶部Logo、菜单及有哪些信誉好的足球投注网站条件 底部版权 热门活动与热门据点版块 邻居版块 登录版块 思路分析 实现整体布局 实现页面顶部、底部 实现热门活动和邻居版块 实现登录版块 用例1：登录网站4-2 难点提示 使用dl-dt-dd实现 用例1：登录网站4-3 需求说明 实现整体布局实现 （25分钟） 制作模板 （25分钟） 实现页面顶部 （25分钟） 实现页面底部 （25分钟） 实现热门活动和邻居版块 （25分钟） 实现登录版块 （25分钟） 用例1：登录网站4-4 功能测试 页面布局 页面样式 用例2：发布或参与活动4-1 需求说明 完善第8章完成的活动页 ，要求实现 顶部放置Logo，横幅广告和右侧热门信息 导航条 活动分类 活动日期 活动展示 底部版权 用例2：发布或参与活动4-2 难点提示 使用圆角矩形实现热门活动展示 设置相对定位与绝对定位实现图片上方的效果 实现1行出现2段文字 设左浮动和右浮动实现虚线下方的同行左右对齐 用例2：发布或参与活动4-3 需求说明 完善第8章完成的活动页 ，要求实现 顶部放置Logo，横幅广告和右侧热门信息（10分钟） 导航条 （25分钟） 活动分类 （25分钟） 活动日期 （10分钟） 活动展示 （25分钟） 底部版权 （10分钟） 用例2：发布或参与活动4-4 功能测试 检查点1 （5分钟） 点击首页中导航条进入活动页 检查点2 （5分钟） 导航条 检查点3 （10分钟） 活动分类 检查点4（5分钟） 活动日期 检查点5（10分钟） 活动展示 共性问题集中讲解 用例3：参与或发布据点3-1 需求说明 制作据点页 用例3：参与或发布据点3-2 思路分析 地图用大图片展示效果 采用ul-li实现据点分类列表 数字用span定义特殊风格 难点提示 实现六人行据点页热门据点效果 用例3：参与或发布据点3-3 功能测试 检查点1 （5分钟） 点击首页中导航条进入据点页 检查点2 （10分钟） 热门据点 用例4：注册会员2-1 需求说明 制作会员注册页 难点提示 采用div-ul-li的布局结构 用例4：注册会员2-2 功能测试 检查点1 （5分钟） 点击首页中导航条进入注册页 检查点2 （10分钟） 接收会员信息并提交 页面的兼容性测试 项目总结 技能总结 HTML 与XHTML关系 基本标签 CSS 选择器 常用属性 页面布局 盒子模型 整体布局 局部布局 兼容性 用户体验 辅助开发工具 作业 课后作业 必做 编写《HTML项目感想》，不少于500字 选做 教员备课时在此添加内容 提交时间：xxx 提交形式：xxx 预习作业 背诵英文单词 教员备课