项目化教学案例:六人行网站

来源:二年级 发布时间:2020-09-22 点击:

  项目案例:六人行网站

 一、训练的技能点

 使用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>

  <dt><img 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">

  <li><a href="#">羽毛球培训班报名</a></li>

  <li><a href="#">六人行免费口语辅导卡申请中</a></li>

  <li><a href="#">“户外”杂志半价征订</a></li>

  </ul>

  <ul class="end"><p>&nbsp;</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

 选择器

 常用属性

 页面布局

 盒子模型

 整体布局

 局部布局

 兼容性

 用户体验

 辅助开发工具

推荐访问:项目化教学案例 教学案例 六人行 项目
上一篇:中国STEM教育创业及其商业模式
下一篇:论保险代位求偿权制度

Copyright @ 2013 - 2018 优秀啊教育网 All Rights Reserved

优秀啊教育网 版权所有