移樽就教-水晶先锋打野

XXXXXXX学校
《 电子商务网站建设与维护实训 》课堂教学设计方案

任课教师 教研组长___________
授课班级
授课时间
本次
课题
知识目标
教
学
目
标
2

2


授课学时
课堂类型
1
实训
ABC公司图书销售网站页面制作——首页

掌握图书销售网站首页的制作思路和方法；
进一步掌握用表格布局制作首页的方法。
能力目标
能根据图书销售网站的功能要求制作网站首页。
情感态度
增强执行行业规范的意识；
价值观
目 标
树立胜任工作的信心。
图书销售网站首页的思路和方法
依据行业规范制作图书销售网站首页
任务驱动教学法
投影教学演示
教师活动
1.利用屏幕广播任务书，布置工作任务：
学生活动
时间
分配
教学重点
教学难点
教学方法
教学手段
教学内容

在小王所在的网络公司为ABC公司设计了电
思考：
子商务网站的栏目、风格、连接 结构和目录结构
1.工作任务是什
后，已经完成了首页的设计工作，并准备好了网
么？
页素材，接下来的工作就是制作首页。本节课的
公司的需求
任务：假如你是小王，请为 ABC公司图书销售网
是什么？
3.如何制作ABC公
站制作首页。
2.
司的图书销售网
站首页？

1.信息收集
约3’

1

教学内容 教师活动
1.提出问题：如何完成首页的制作？

2.打开PPT课件，结合学生的工作计划，给出指
导：
重申电子商务网站首页的制作依据：
①满足用户
（即ABC公司）
需求；
②发挥首页的作用
（引导分流作用、信任展示作用）
；
③满足不同首页用户
（网站访问者——“淘”、“逛”）
的使用；
④首页要素完整
（头部形象、搜索、商品分类、推荐
及活动）
；
学生活动
制定工作计划：
1.尽可能独立地制
定出一个工作计
划；
时间
分配
2.制定计划
2.确定所需要的材
料和工具；

3.参考PPT 及教师
指导，完善工作计
备注：教师展示当当网等首页和部分学生设计的首
划。
约4’
页草图，指出其组成要素，并突出重点、强调重点。
⑤布局合理、色彩和谐；
⑥简洁、实用、易实现；
⑦符合行业规范
（见附件）
。
备注：启发学生回顾Logo的设计规格，以 此引导学
生改变依据个人喜好制作网页的习惯，转为按行业规范
制作网页，在“教师导读”指导 下，“剥葱”式实践中，
突破难点。
所需材料：设计好的Logo、banner、网站名 称、
栏目等；准备好的图片、文字、首页效果草图等。
所需工具：Dreamweaver。
给出建议和要求： 决策：
用表格对首页进行布局，完成首页各组成部对工作计划
分的制作工作。 进行审查并决定
下来如何执行。
1.给出评价标准：
序
号
1
2
3
评价项
满足用户需求
布局合理、色彩和谐
简洁、实用、易实现
组成
4
要素
评价
3.决策
约2’
合
格
良
好
优
秀

1进一步.明确任务
的目标要求；

2.参考“任务指导
书”、依据“评价
标准”独立完成工
作任务。
4.执行
发挥首页作用～引导分流作用
发挥首页作用～信任展示作用
约30’
满足不同首页用户的使用
完整
（“淘”、“逛”）
5
符合行业规范（参照“网页制作行业规范”
中的“教师导读”进行评价）
2.巡视指导。

2

教学内容 教师活动 学生活动
检查：
独立进行目
标与实际结果的
比较：工作任务是
否在内容上和 专
业上完成合格？
尽可能独立
地对工作结果进
时间
分配
5.检查 巡视指导 约2’
6.评估

展示部分学生的首页，评估学生的工作成果。

行评估，学会对自
己的行为 进行反
馈：我今后还能在
哪些方面做得更
好？
约3’
小节
结合教学目标、过程及成果，师生共同进行小节。 约1’
课后反思













3

ABC公司图书销售网站首页制作
任 务 书
一．任务描述
在小王所在的网络公司为ABC公司设计了电子商务网站的栏目、风格、连接结 构和目录
结构后，已经完成了首页的设计工作，并准备好了网页素材，接下来的工作就是制作首页。本节课的任务：假如你是小王，请为ABC公司图书销售网站制作首页。
二．任务要求
按照自己设计的首页草图，使用准备好的网页素材，参阅“任务指导书”完成首页
（）制作。
作业提交：将站点文件夹压缩上传到FTP服务器（ftp:192.168.6.90）。
„„„„„„„„„„„„„„„„„„„„„„„„„„„„
任务指导书
一．ABC图书销售网站首页制作依据：
① 满足用户（即ABC公司）需求；
② 发挥首页的作用（引导分流作用、信任展示作用）；
③ 满足不同首页用户（网站访问者——“淘”、“逛”）的使用；
④ 首页要素完整（头部形象、搜索、商品分类、推荐及活动）；
⑤ 布局合理、色彩协调；
⑥ 简洁、实用、易实现；
⑦ 符合行业规范（见后面的附件）。
二．ABC图书销售网站首页制作所需材料及工具
所需材料：设计好的Logo、banne r、网站名称、栏目等；准备好的图片、文字、首页效
果草图等。
所需工具：Dreamweaver。
三．依据评价标准进行工作
（一）评价标准
序号
1
2
3
4

评价项
满足用户需求
布局合理、色彩协调
简洁、实用、易实现
组成
发挥首页作用～引导分流作用
要素
发挥首页作用～信任展示作用
（“淘”、“逛”）
完整
满足不同首页用户的使用
合
格
评价
良优
好 秀
4

5
符合行业规范（参照下面的附件“网页制作行业规
范”中的“教师导读”进行评价）
（二）任务执行步骤
1. 启动Dreamweaver，创建站点，站点文件夹为你所设计的目录结构中的根目录。
2. 插入表格，注意表格的宽为778 px，高为434 px。
3. 根据上次课设计的首页效果草图，确定表格的行数和列数。
4. 在表格相应位置插入头部、导航等。
5. 保存文件名为。
6. 检查评估自己的工作。
 你的首页发挥了引导分流作用和信任展示作用吗？
 你的首页布局是否合理？色彩是否协调？
 你的首页是否简洁、实用、易实现？
 你的首页要素（头部、搜索、商品分类、推荐及活动）完整吗？
 你的首页大小、图片规格、文件命名等是否执行了行业规范？
依据上面的评价标准，给出你的自评成绩：
7. 上交你的工作成果。
„„„„„„„„„„„„„„„„„„„„„„„„„„„„
附件：网页制作行业规范（节选）
（一）、网页设计标准尺寸
 页面标准按800*600分辨率制作，实际尺寸为778*434px。
教师导读：例如用一个表格布局，则用该表格设定页面的大小，宽为778 px，高为434 px。
 页面长度原则上不超过3屏，宽度不超过1屏。
（二）、标准网页Logo尺寸规格
 88*31，主要用于网页链接，或网站小型Logo。
 120*60，这种广告规格主要用于做Logo使用。
 120*90，主要应用于产品演示或大型Logo。
教师导读：你的Logo是做什么用的？
如果是一个链接，尺寸应为88*31；
如果是一个广告，尺寸应为120*60；
如果是宣传企业或网站的，尺寸应为120*90。
（三）、标准网页广告尺寸规格
 234*60，这种规格适用于框架或左右形式主页的广告链接。
 392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
 468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
教师导读：如果你的网页中有广告，首 先明确你的主页是哪种布局。如果是“同”“国”“T”型的布

5

局，广告尺寸可选择为392*72（适用于图片式广告）或468*60，其它型的布局，可用234*60。

（四）、文件命名原则
 每一个目录中应该包含一个缺省的html 文件，文件名统一用。
 文件名称统一用小写的英文字母、数字和下划线的组合。
教师导 读：网站首页如果是静态页面，命名为（ABC公司图书销售网站首页暂设计为静态
页面）；动态的则根 据所使用的语言命名，如、等。
（五）、图片的命名原则
 名称分为头尾两两部分，用下划线隔开。
 名称的头部表示图片的大类性质（例如广告、标志、菜单、按钮等）。
教师导读：
⑴放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；
⑵标志性的图片我们取名为：logo；
⑶在页面上位置不固定并且带有链接的小图片我们取名为button；
⑷在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu；
⑸装饰用的照片我们取名：pic；
⑹不带链接表示标题的图片我们取名：title。
 名称的尾部用来表示图片的具体含义。
教师导读：例如banner_，可以作为ABC 图书公司顶部的广告或装饰图片名称；banner_
新浪网的头部广告或装饰图片名称。




6