《商务网页设计》教案.pdf

商务网页设计教案陈义文项目项目 1 1网站规划与设计网站规划与设计任务任务 1 1：网站需求分析：网站需求分析学时：学时：1 1任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1.任务展示1能进行网站需求分析设计企业网站需求调查表，收集客户的基本需求信息，了解用户建设网站的目的及功能需求，这是网站建设与实施的根基，也是保证整个项目成功的基础1熟悉商务网页设计课程整体设计；2熟练网站需求分析；计算机基本操作技能多媒体机房、电脑、Dreamweaver教学过程教师展示事先准备的企业网站最终效果，介绍网站与网页的概念，讲授网站需求分析的主要内容1展示企业网站；2网站需求分析；1浏览并分析企业网站的特点；2填写相应调查表格教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法讨论法学时0.12.教师演示0.23.学生实践0.74.总结提高任务任务 2 2：网站策划：网站策划学时：学时：0.50.5任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1能制作网站策划书根据网站需求的调查结果，制作网站策划书，指导网站的建设与实施1 熟悉网站策划书；2 娴熟的计算机基本操作技能计算机基本操作技能。

多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示讲授法学时0.10.41.任务展示教师展示网站策划书的主要内容2.教师演示分析网站策划书的主要内容多媒体演示提问引导法3.学生实践4.总结提高任务任务 3 3：网站总体设计：网站总体设计学时：学时：0.50.5任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1了解网站总体设计的内容根据网站的建设需求进行网站的总体设计，包括网站Logo、目录结构、整体形象、配色方案、页面尺寸及页面版式等方面的设计1 熟悉网站总体设计；2 娴熟的计算机基本操作技能1 计算机基本操作技能多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法学时0.11.任务展示教师展示网站总体设计的主要内容2.教师演示1.教师分析网站总体设计的主要内容3.学生实践4.总结提高0.4能力拓展能力拓展学时：学时：6 6任务目标1掌握 PhotoShop 常用工具的使用方法；2能使用 PhotoShop 设计 Logo 和页面版式1网站 Logo 设计任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1.任务展示2网站首页版式设计3网站子页版式设计1.精通 PhotoShop 操作1.计算机基本操作技能。

多媒体机房、电脑、Dreamweaver教学过程教师展示 LOGO 效果、首页版式效果、子页版式效果1网站 Logo 设计2.教师演示2网站首页版式设计3网站子页版式设计3.学生实践1网站 Logo 设计2网站首页版式设计教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法学时0.1233网站子页版式设计1.PhotoShop 基本操作；4.总结提高2.PhotoShop 图层；3PhotoShop 工具讲授法0.9项目项目 2 2网站开发环境配置网站开发环境配置任务任务 1 1：DreamweaverDreamweaver 软件的安装与设置软件的安装与设置学时：学时：0.20.2任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1能熟练安装 DreamWeaver 软件安装并配置 DreamWeaver1.熟悉 Dreamweaver；2.精通计算机基本操作1.计算机基本操作技能多媒体机房、电脑、Dreamweaver教学过程教学方法讲授法多媒体演示提问引导法练习法学时0.21.任务展示1.下载 DreamWeaver 软件（电子商务专业资源库系电子商务专业资源库系2.教师演示统统-常用软件中下载常用软件中下载）；2.安装 DreamWeaver 软件提示。

3.学生实践1.下载 DreamWeaver 软件；2.安装 DreamWeaver 软件04.总结提高任务任务 2 2：站点的创建与管理：站点的创建与管理学时：学时：0.80.81了解 Dreamweaver 站点的功能任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤2熟练创建站点3了解站点与网页的关系创建及管理站点1.精通 Dreamweaver 操作；2.精通 HTML 语句；3.精通 CSS 语句；1.计算机基本操作技能2.HTML 基础代码3.部分 CSS 代码多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法学时0.11.任务展示教师展示创建后的网站站点1.讲授 Dreamweaver 界面；2.教师演示2.创建网站目录；3.创建网站站点0.33.学生实践1.创建网站目录；2.创建网站站点练习法0.44.总结提高任务任务 3 3：站点文档的创建与编辑：站点文档的创建与编辑学时：学时：1 11熟悉页面属性设置的方法；任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤2能进行 HTML 属性的选择；3掌握 CSS 在网页上的应用方法。

创建网页文档，设置页面属性，编辑网页文档1.精通 Dreamweaver 操作；2.精通 HTML 语句；3.精通 CSS 语句；1.计算机基本操作技能2.熟悉 Dreamweaver 的站点管理多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示学时0.11.任务展示教师展示首页 CSS 排版效果1.创建网页文件；2.设置页面的标题；2.教师演示3.设置页面属性；4.复制文本5设置HTML 属性讲授法多媒体演示提问引导法0.36新建CSS规则1.创建网页文件；2.设置页面的标题；3.学生实践3.设置页面属性；4.复制文本5设置HTML 属性练习法0.46设置CSS规则4.总结提高1.介绍CSS规则讲授法0.2能力拓展能力拓展学时：学时：2 21熟悉 Dreamweaver CS6 工作界面；任务目标2了解 HTML 基础代码3了解 HTML 标记及属性的意义和使用方法任务内容教师知识能力要求学生知识能力准备需要使用的1美化公司简介页面2书写 HTML 代码制作公司介绍网页1.精通 Dreamweaver 操作；2.精通 HTML 语句；3.精通 CSS 语句；1.计算机基本操作技能。

2.熟悉 Dreamweaver 的基本操作多媒体机房、电脑、Dreamweaver工具步骤教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法讲授法学时0.11.任务展示教师展示首页 CSS 排版效果1.编写并讲解 HTML 基础代码；2.教师演示2.编写并讲解 CSS 常见代码；3.编写并讲解 HTML 常见代码3.学生实践4.总结提高1.编写 HTML 基础代码；2.编写 HTML 常见代码1.讲解 HTML 基础代码；2.讲解 CSS 基础代码0.50.90.5项目项目 3 3网站制作前期准备网站制作前期准备任务任务 1 1：网站首页版式切片：网站首页版式切片学时：学时：2 2任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1利用 Photoshop 软件的切片工具对版式图像进行切割2利用 Photoshop 软件对图像素材进行后期的处理利用 Photoshop 软件的切片工具对首页版式进行合理的切片1.精通 Photoshop 操作；1.熟练操作 Photoshop多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法讲授法学时0.11.任务展示教师展示首页版式切片效果。

1.分析切片规格2.教师演示2.设置参考线3.切片1设置参考线3.学生实践2切片区块属性3切片4.总结提高1.Photoshop 切片工具0.51.20.2任务任务 2 2：网站子页版式切片：网站子页版式切片学时：学时：2 2任务目标任务内容教师知识能力要求学生知识能力准备需要使用的1利用 Photoshop 软件的切片工具对版式图像进行切割2利用 Photoshop 软件对图像素材进行后期的处理利用 Photoshop 软件的切片工具对子页版式进行合理的切片1.精通 Photoshop 操作；1.熟练操作 Photoshop多媒体机房、电脑、Dreamweaver工具步骤教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法学时0.11.任务展示教师展示子页版式切片效果1.分析切片规格2.教师演示2.设置参考线3.切片1设置参考线3.学生实践2切片区块属性3切片4.总结提高0.41.5任务任务 3 3：整理网站素材：整理网站素材学时：学时：0 0任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1正确进行图像的命名及归类2能通过互联网收集相关素材将图像归类存放，并通过互联网收集相关素材1.精通 Dreamweaver 操作；1.熟练操作 Dreamweaver。

多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示讲授法2.教师演示1.整理网站素材3.学生实践1.整理网站素材4.总结提高多媒体演示提问引导法练习法学时01.任务展示教师展示网站整理后的效果00任务任务 4 4：制作公司简介页面：制作公司简介页面学时：学时：2 2任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1能使用表格进行页面布局2能进行图文混排使用表格进行网页布局，进行图文混排1.精通 Dreamweaver 操作；2.精通 HTML 语句；3.精通 CSS 语句；4.精通 JavaScript 语句.1.熟练操作 Dreamweaver2.简单 CSS 的使用多媒体机房、电脑、Dreamweaver教学过程教学方法学时1.任务展示教师展示公司简介页面效果1.使用表格排版；2.教师演示2.设置 CSS 效果；3.插入图片，实现图文混排3.学生实践1.制作公司简介页面4.总结提高1.常用 CSS 语句案例法多媒体演示讲授法多媒体演示提问引导法练习法讲授法0.10.510.4任务任务 5 5：制作客户咨询页面：制作客户咨询页面学时：学时：2 2任务目标任务内容教师知识能力要求学生知识能力准备需要使用的工具步骤1了解表单及表单元素的基本属性2能合理选择表单元素。

利用表单技术制作客户咨询页面1.精通 Dreamweaver 操作；2.精通 HTML 语句；3.精通 CSS 语句；4.精通 JavaScript 语句.1.熟练操作 Dreamweaver2.简单 HTML 和 CSS 的使用多媒体机房、电脑、Dreamweaver教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法讲授法学时0.11.任务展示教师展示客户咨询页面效果1.使用表格排版；2.教师演示2.添加表单，设置属性；3.添加表格和表单控件，并设置属性1.使用表格排版；3.学生实践2.添加表单，设置属性；3.添加表格和表单控件，并设置属性4.总结提高1.表单及其元素的功能和属性0.510.4能力拓展能力拓展学时：学时：4 41熟练插入网页多媒体任务目标2能设置各种类型超链接3理解 Spry 验证表单的制作方法任务内容1.使用超链接技术制作服务网点查询页面2.利用百度地图生成器制作联系我们页面1.精通 Dreamweaver 操作；2.精通 HTML 语句；3.精通 CSS 语句；4.精通 JavaScript 语句.1.熟练操作 Dreamweaver2.了解 JavaScript 的基本使用。

多媒体机房、电脑、Dreamweaver教师知识能力要求学生知识能力准备需要使用的工具步骤教学过程教学方法案例法多媒体演示讲授法多媒体演示提问引导法练习法学时0.31.任务展示教师展示相关素材1.使用超链接技术制作服务网点查询页面2.教师演示2.利用百度地图生。