项目化教学整体设计《制作企业网站》.docx
《项目化教学整体设计《制作企业网站》.docx》由会员分享，可在线阅读，更多相关《项目化教学整体设计《制作企业网站》.docx（66页珍藏版）》请在冰豆网上搜索。
项目化教学整体设计《制作企业网站》
《制作企业网站》课程整体设计
课程名称：
制作企业网站
课程代码：
制定人：
合作人：
修订人：
批准人：
版次：
时间：
2011年7月22日
课程性质：
专业核心课
学分：
学时：
授课对象：
计算机应用专业学生二年级学生
性质：
先修课：
计算机基础、计算机美术基础、PhotoShop、Flash、DreamWeaver
后续课：
数据库、动态网页
课程整体设计
1、课程目标设计
总体目标：
本项目从实用学习的角度出发，通过一个生动清晰的项目案例，使学生能够根据客户的实际需求，对企业网站的定位进行分析，独立完成企业网站的规划与布局，利用CSS+DIV进行网页的布局与美化技术，制作出美观大方、实用性强的静态网站，并对网站进行发布和更新，同时培养学生的团队协作意识和岗位责任意识。
具体目标：
能力目标：
（1）能对企业网站的定位进行分析，明确企业网站的目的。
（2）能分解用户需求，进行功能设置。
（3）能够利用CSS+DIV技术进行页面的布局。
（4）能够利用CSS的方式对网页的链接样式进行控制。
（5）能够利用position和float属性对DIV进行定位。
（6）能利用CSS的样式对页面的元素进行美化。
（7）能够利用CSS+DIV的方式对列表进行特殊处理，形成各种类型的导航。
（8）能够利用事件和行为制作网页的各种特效。
（9）能够运用IIS对网站进行发布和更新。
（10）能够运用网络的各种手段对网站进行推广。
知识目标：
（1）理解什么CSS+DIV，有什么优势。
（2）掌握多种网页的布局能力，加强CSS+DIV布局的能力。
（3）掌握CSS外观效果的设计。
（4）掌握盒子模型的原理和运用。
（5）掌握position及float属性的运用。
（6）掌握编程的思想。
（7）掌所致CS对页面的外观进行控制。
（8）掌握以布局框架为基础，添加各种网页元素的方法。
（9）理解样式表的作用，掌握样式表的使用方法。
（10）理解事件与行为，并熟练掌握各种网页特效的使用方法。
（11）理解WEB站点的工作原理，并能熟练设置IIS。
素质目标：
（1）培养学生对网站的开发、测试及发布流程的综合能力。
（2）培养学生网站整体设计的能力。
（3）培养学生分析问题和解决问题的能力。
（4）培养学生的审美能力和创新能力。
（5）培养学生自学能力。
（6）培养学生与人交流和沟通的能力。
（7）培养学生工作态度和纪律意识。
（8）培养学生的团队协作意识。
（9）培养学生的岗位责任意识。
（10）培养学生的英语学习能力。
2、课程内容设计：
课程内容
序号
课程内容
项目
学时
入门项目A
主导项目A
自主项目B
1
CSS+DIV的特点及优势
√
√
√
2
2
企业网站的定位功能布局分析
√
√
√
4
3
盒子模型
√
√
√
6
4
位置控制属性
√
√
√
4
5
浮动属性
√
√
√
4
6
CSS选择器
√
√
√
4
7
CSS属性
√
√
√
4
8
链接样式
√
√
√
4
9
导航制作
√
√
√
6
10
表单的美化
√
4
11
网页特效
√
√
√
4
12
事件与行为
√
√
√
2
13
网站的测试与发布
√
√
4
14
专业英语
√
√
√
4
合计
56
项目设计
项目名称
项目编号
任务
任务编号
课时
课次
第一次课
课程介绍和情景设计
1
1
入门项目：
华夏银行首页制作（A线）
1
项目需求分析
1.1
3
1
网页界面的设计
1.2
4
2
网页界面的布局制作
1.3
4
3
图片、文字、动画等网页元素的添加
1.4
4
4
网站主体导航和按钮式导航制作
1.5
4
5
制作部分网页特效。
1.6
4
6
网站的测试与发布
1.7
4
7
主导项目：
网上银行登录页（A线）
2
项目的需求分析
2.1
4
8
网页的设计与制作
2.2
8
9、10
表单的设计与制作
2.3
4
11
表单的美化与验证
2.4
4
12
网站的发布与项目验收
2.5
4
13
自主项目：
信用卡介绍页（B线）
3
课外项目的开发与验收
3
4
14
本课程是利用CSS+DIV制作网页的入门课程，以华夏银行网站设计与制作为载体，将课程中的每个知识点融入到每个项目中，每个项目为一个网页，其中前一个项目为后一个基础，各个项目由浅入深，循序渐进，克服了学生的畏难情绪。
由于学生刚刚入门，故而网页基本架构要由教师指导制作。
3、能力训练项目设计
编号
能力训练项目名称
任务名称
拟实现的能力目标
相关支撑知识
训练方式手段及步骤
结果
（可展示）
1
项目一：
华夏银行首页制作
1.1项目需求分析
1.能建立企业实际工作场景的模拟情境,师生角色确定.
2.能客户的需求并制定出网站的建设方案.
3.能根据规划设计出草图.
4.能制定网站的开发进程表
5.能够利用PPT制作出汇报演示文稿.
1．技术服务合同书的规范。
2．需求分析调研表的制作。
3．网站项目建设方案的书写规范。
1．拟定企业情境，角色定位：
成立临沂高技科技公司，学生按4-5人自由组合（原则上男女和成绩程度搭配合理），作为高技科技有限公司网站设计部的项目开发组，组内成员包括：
一个项目经理，3-4个设计开发人员。
教师作为高技科技有限公司的网站设计的项目总监。
2．任务布置：
与华夏银行项目代表就华夏银行网站建设项目的相关事宜进行洽谈，签订技术服务合同书，并根据需求制定网站建设方案和设计草图。
以下由教师代表华夏银行提出几点意见，没涉及到的内容由学生根据各组调查意见自由发挥。
（1）要存在横向导航和按钮式竖向导航。
（2）主导航要有二级菜单。
3．以下步骤在课外完成：
（1）华夏银行项目代表提出建设意见，高技科技有限公司项目经理与其进行接洽，进行初步的需求分析。
（2）根据要求进行深层次的建站定位分析。
（3）以小组为单位，查阅相关资料，分工写出技术服务合同书、网站建设方案、网页设计草图和网站建设的汇报PPT。
4．项目进展会议：
（1）项目总监主持项目建设会议，列出解决的问题。
（2）由各组选派代表汇报此次任务完成情况，说明组内分工，并展示结果，时间5分钟左右。
（3）项目总监根据各组汇报情况进行提问和点评。
（4）组间互评。
（5）项目总监总评，解决疑难问题并串讲本任务的知识要点。
（6）根据考核标准确定本次任务的初步分数。
（7）完善设计方案和草图。
（8）布置下一任务
根据草图在PS中设计出网页界面，并运用切图技术切出所需素材并保存，同时根据需要制作Flash动画素材。
1．技术服务合同
2．需求分析登记表
3．网站项目建设方案
4．网页草图
2
1.2网页界面的设计
1．能够根据草图在PS中设计出网页界面。
2．能够根据需要制作Flash动画素材。
3．能够运用切图技术将PS效果图切图并保存成素材。
1．Photoshop的运用。
（1）图像的格式、大小和分辨率。
（2）参考线的使用。
2．Flash的运用。
（1）各种元件的使用方法。
（2）颜色、动画等与整个页面的协调和搭配。
1．各组分工协作，应用Photoshop将各网页的草图制作出效果图。
2．将原始效果图根据需要切出素材并保存。
3．运用Flash制作Flash动画素材。
4．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题并串讲本任务的知识要点，并重点展示设计好的作品。
（4）根据考核标准确定本次任务的初步分数。
（5）布置下一任务
利用Dreamweaver布局网页
1．展示网页的PS效果图
2．展示网页的素材（包括静态图片和Flash动画。
3
1.3网页界面的布局制作
1．能使用CSS+DIV布局网页
2．能使用float（浮动）技术控制DIV位置
3．能够根据需求和分析，设置出网站功能
1．Dreamweaver的常规使用
2．盒子模型：
页面上的每个元素都被看做一个矩形，这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。
3．位置控制属性-position：
定位属性position用以确定元素在网页中的位置。
（1）position可选择的值
static（静态定位）
relative（相对定位）
absolute（绝对定位）
（2）语法规则
position：
static|relative|absolute
4．位置控制属性浮动-float：
浮动（float）属性用于控制元素的左右移动。
（1）float可选择的值
none（不浮动）
left（左浮动）
right（右浮动）
（2）语法规则：
float：
none|left|right
1．各组分工协作，应用Dreamweaver中的DIV和CSS的知识将各网页布局出来。
2．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题、串讲本任务的知识要点，并重点展示设计好的作品。
（4）根据考核标准确定本次任务的初步分数。
（5）布置下一任务
利用Dreamweaver工具将网页的内容添加进去。
展示用CSS+DIV制作出的网页布局
4
1．4图片、文字、动画等网页元素的添加
1．能以布局框架为基础在DIV中添加图片、文字、动画等网页元素。
2.能使用CSS样式表中的选择器对网页元素进行美化。
1、超链接、图像和多媒体等网页元素的使用。
2．CSS样式表中的选择器：
HTML标签选择器
类选择器
ID选择器
3．常用CSS属性
字体属性、背景属性、边框属性、边距属性、填充属性、列表属性
4．通用超链接的设置
1．项目组内角色轮换。
2．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题、串讲本任务的知识要点，并重点展示设计好的作品。
（4）布置下一任务
利用列表制作网页主体导航。
展示网页作品
5
1．5网站主体导航和按钮式导航制作
1.能用列表制作横向主体导航。
2．能用列表制作纵向按钮式导航。
3.能对导航设置样式
2、1.Css的列表、边框、背景、方框等属性
3、2.DIV的定位和浮动属性
1．项目组内角色轮换。
2．项目进展会议
（1）项目总监主持项目网站建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题、串讲本任务的知识要点，并重点展示设计好的作品。
（4）布置下一任务
利用列表制作网页特效。
展示网页作品
6
1．6制作部分网页特效。
弹出式广告
1．能利用行为制作弹出页面
2．能对弹出的页面进行设计
1．正确理解弹出式页面的效果。
2．理解事件和行为
3．理解行为的激活方式
团体协作制作弹出式广告特效
展示网页作品
Tab切换层
1．能利用行为制作Tab切换层
2．能正确利用空链接
1．Tab导航的制作
2．制作下部DIV的制作
3．添加链接的行为
团体协作制作Tab切换层特效
日期显示
1．能利用行为制作日期显示特效
2．会利用日期时间函数。
3．会编写简单的JS代码
1．制作放置时间的框架
2．编写JS代码
3．附加触发行为
团体协作制作日期显示特效
下拉式菜单
能制作出鼠标移上元素，出现详细的下拉菜单
（1）设置FLASH动画透明显示
（2）制作下拉菜单
设置#nav的定位方式
定位下拉菜单框架
（3）添加行为
添加下拉菜单行为
添加下拉菜单链接的行为
（4）设置下拉菜单初始显示状态
1．团体协作制作下拉式菜单特效
2．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题并串讲本任务的知识要点，并重点展示设计好的作品。
（4）根据考核标准确定本次任务的初步分数。
（5）布置下一任务
利用Dreamweaver布局网页
7
1．7网站的测试与发布
1.会利用各种方法对整个网站进行测试和检查
2.会安装IIS并设置
3.利用Dreamweaver自带的上传工具上传和更新
4.会利用各种方法对网站进行推广
1．网页的整体外观、链接、功能检查及验证在不同浏览器的兼容性
2.IIS的设置
3．创建放置网站的文件夹、配置远程信息、浏览本地文件、连接到远端主机、启动上传过程
上传网站
分组互相上传并互相访问
网站的访问
8
项目二：
网上银行登陆页
2.1项目的需求分析
1.能根据客户的需求，结合上一项目的制作方案，确定出网页实现的功能。
2.能根据网页的功能画出网页的草图。
3.根据需要制定出制作方案。
4.能独立完成项目进程表。
5.能独立完成PPT的制作。
1.需求分析的方法。
2.草图的绘制方法。
3.方案的书写。
4.PPT的制作。
1.根据项目一的情景，每个项目组内进行角色转换。
2.任务布置：
网上银行登录页面的需求分析与规划。
3.项目进展会议：
（1）项目总监主持项目建设会议，列出解决的问题。
（2）由各组选派代表汇报此次任务完成情况，并展示结果，时间5分钟左右。
（3）项目总监根据各组汇报情况进行提问和点评。
（4）组间互评。
（5）项目总监总评。
（6）根据考核标准确定本次任务的初步分数。
（7）完善设计方案和草图。
（8）布置下一任务
根据草图设计并制作出页面。
展示网页方案及草图效果
9
2.2网页的设计与制作
1.根据需要获取或制作网页素材。
2.能运用PS设计网页。
3.能切图。
4.能运用DIV+CSS的方法在DW中制作出图文混排的页面。
1.PS的应用
2.站点的创建。
3.文本的编辑
4.图像与多媒体的应用。
5.链接的使用。
1．项目组内角色轮换。
2．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题重点展示设计好的作品。
（4）根据考核标准确定本次任务的初步分数。
（5）各项目根据制作的方案进入下一个任务。
展示网页作品
10
2.3表单的设计与制作
1.能在网页中插入表单。
2.能在表单域中插入文本域和密码域。
3.会使用单选按钮和复选框。
4.会使用列表
1.表单元素的使用方法。
2.表单元素属性的设置
1．项目组内角色轮换。
2．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题重点展示设计好的作品。
（4）各项目根据制作的方案进入下一个任务。
展示具备表单功能的网页作品
11
2.4表单的美化与验证
1.会改变文本边框颜色
2.能改变按钮背景
3.会对表单输入的内容进行验证
1.表单行为的设置方法。
2.改变文本边框的颜色和按钮的背景。
3.表单验证中javascript代码的编写。
4.函数的应用。
1．项目组内角色轮换。
2．项目进展会议
（1）项目总监主持项目建设会议，由各组选派代表汇报此次任务完成情况，并展示结果，项目总监根据各组汇报情况进行提问和点评。
（2）组间互评。
（3）项目总监总评，解决疑难问题重点展示设计好的作品。
（4）根据考核标准确定本次任务的初步分数。
（5）各项目根据制作的方案进入下一个任务。
展示具备表单功能的网页作品
12
2.5网站的发布与项目验收
1.会使用IIS对网站进行发布的测试。
2．能制作全景展示效果
3．能根据用户要求开发网站
4．能进行项目成果汇报
1.IIS的安装与使用。
2．项目完成报告的书写
3．PPT的制作流程
4．汇报技巧及语言表达能力
1．任务布置
完成网站开发，并运行网站，根据合同要求对网站项目进行验收。
2．验收现场
（1）项目总监主持验收会议。
（2）由各组选派代表汇报此次项目完成情况，并展示结果。
（3）由公司项目代表提问，项目组代表答辩，并填写验收报告等。
（4）项目总监根据各组汇报情况进行提问和点评。
（5）组间互相提问。
（6）项目总监根据考核标准确定本项目的初步分数。
最终成绩还要根据审核报告和成果的情况确定。
（7）教师归纳总结，并将优秀的作品展示。
汇报并展示
13
项目三：
信用卡介绍页
课外项目的建设与验收
1.能根据客户的需要对网页进行全面设计。
2.能对项目进行全方位展示。
3.能进行项目成果汇报与展示，表达有条理。
1.项目的调研、规划和制作
2.项目成果的展示
1．任务布置
完成网页的开发，并运行网站，根据合同要求对网站项目进行验收。
2．实施步骤、
以下内容在课外完成：
项目的调研、规划和制作
以下内容在课内完成：
（1）项目总监主持验收会议。
（2）由各组选派代表汇报此次项目完成情况，并展示结果。
（3）由公司项目代表提问，项目组代表答辩，并填写验收报告等。
（4）项目总监根据各组汇报情况进行提问和点评。
（5）组间互相提问。
（6）项目总监根据考核标准确定本项目的初步分数。
最终成绩还要根据审核报告和成果的情况确定。
（7）教师归纳总结，并将优秀的作品交付建设方。
1.网站项目作品
2.项目验收报告
4、进程表设计
课
次
学
时
教学目标和主要内容
单元标题
能力目标
项目编号
知识目标
其他内容
（课程主要内容）
考核内容方法
1
4
1.1项目需求分析
1.能建立企业实际工作场景的模拟情境,师生角色确定.
2.能客户的需求并制定出网站的建设方案.
3.能根据规划设计出草图.
4.能制定网站的开发进程表
5.能够利用PPT制作出汇报演示文稿.
1．1
1．熟悉技术服务合同。
2．听懂客户的要求，并依据需求写出分析调研表。
3．掌握网站项目建设方案的书写规范。
课前动员：
1．对学生进行教学情况的调查
2．对学生介绍项目化教学法的意义、组织过程
3．利用多媒体向学生展示优秀网站及数字媒体作品，介绍本专业的发展现状及趋势，对学生进行专业教育，让学生明确本门课程的能力目标和知识目标
4．介绍教材的使用及参考书、参考网站的使用方法
5，拟定企业情境，进行角色定位
6．任务布置：
与华夏银行项目代表洽谈相关速写，签订技术服务合同，并根据公司业务情况为其提供网站建设方案和设计草图
7．公布教师课堂教学中本项目的注意事项
8．公布项目考核方法
9．项目实施过程
重点解决以下问题：
1．如何引导客户填写调研登记表
2．如何根据需求分析，撰写网站建设方案
3．如何设计草图
4．引导学生如何建立项目组，进行团队管理
工作任务情况评价表
2
4
1.2网页界面的设计
1.能够根据草图在PS中设计出网页界面。
2．能够根据需要制作Flash动画素材。
3．能够运用切图技术将PS效果图切图并保存成素材。
1．2
1．熟练掌握Photoshop的运用。
2．熟练掌Flash的运用。
1．任务布置
（1）根据草图在PS中制作出原始网页效果图。
（2）根据方案制作所需要的FLASH动画素材。
2．项目实施过程
3．注意事项：
（1）图像的格式、大小和分辨率。
（2）参考线的使用。
（3）注意各种元件的使用方法。
（4）注意颜色、动画等与整个页面的协调和搭配。
（5）图层与图层组的使用方法
（6）两种导航的设计。
（7）Logo的设计。
（8）头部、导航、Banner、主体、foot部分的设计。
（9）切图，保存
工作任务情况评价表
3
4
1.3网页界面的布局制作
1．能使用CSS+DIV布局网页
2．能使用float（浮动）技术控制DIV位置
3．能够根据需求和分析，设置出网站功能
1．3
1．理解CSS+DIV的设计思路和方法
2．熟练掌握利用CSS对DIV进行定位
3熟练掌握DIV的浮动技术
4．理解盒子模型的基本原理
1．任务布置
根据PS效果图，在Dreamweaver中对网页进行布局。
2．项目实施过程
3．注意事项：
（1）Dreamweaver的常规使用
（2）盒子模型：
页面上的每个元素都被看做一个矩形，这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。
（3）位置控制属性-position：
定位属性position用以确定元素在网页中的位置。
static（静态定位）、relative（相对定位）、absolute（绝对定位），其语法规则
position：
static|relative|absolute
（4）位置控制属性浮动-float：
浮动（float）属性用于控制元素的左右移动。
float可选择的值
none（不浮动）、left（左浮动）、right（右浮动）其语法规则：
float：
none|left|right
同上
4
4
1．4图片、文字、动画等网页元素的添加
1．能以布局框架为基础在DIV中添加图片、文字、动画等网页元素。
2.能使用CSS样式表中的选择器对网页元素进行美化。
1.4
1.熟练掌握在DIV中添加图片、文字、动画等网页元素。
2．熟练掌握对DIV等块元素应用不同种CSS样式的方法。
3．理解不同种类CSS的优先级别
4．理解相对地址和绝对地址的方法
1．任务布置
根据PS效果图，在网页的布局中添加图片、文字、动画等网页元素。
2．项目实施过程
3．注意事项：
（1）超链接、图像和多媒体等网页元素的使用。
（2）CSS样式表中的选择器：
HTML标签选择器
类选择器
ID选择器
（3）常用CSS属性
字体属性、背景属性、边框属性、边距属性、填充属性、列表属性
（4）通用超链接的设置
同上
5
4
1．5网站主体导航和按钮式导航制作
1.能用列表制作横向主体导航。
2能用列表制作纵向按钮式导航。
3．能对导航设置样式
4、1.5
5、1.熟练掌握运用列表制作横向主体导航。
6、2.熟练掌握对导航设置样式
7、3.熟练掌握对导航链接设置样式
1．任务布置
根据P
升级会员 