《商务网页设计与制作》教学教案.docx
- 文档编号:24870566
- 上传时间:2023-06-02
- 格式:DOCX
- 页数:66
- 大小:697.78KB
《商务网页设计与制作》教学教案.docx
《《商务网页设计与制作》教学教案.docx》由会员分享,可在线阅读,更多相关《《商务网页设计与制作》教学教案.docx(66页珍藏版)》请在冰豆网上搜索。
《商务网页设计与制作》教学教案
《商务网页设计与制作》
教学教案
授课教师:
授课班级:
课程学分:
总学时数:
周学时数:
上课周次:
教学进度计划
章节
项目
计划课时
教学模式
教学环境
第1章
共2节
理实一体化
理实一体化机房
第2章
共3节
理实一体化
理实一体化机房
第3章
共8节
理实一体化
理实一体化机房
第4章
共7节
理实一体化
理实一体化机房
第5章
共2节
理实一体化
理实一体化机房
第6章
共2节
理实一体化
理实一体化机房
课程考评
总计
第1课(1.1-1.2)
第1章
商务网站项目策划与建设
1.1理解传统商务与电子商务
1.2商务网站项目的策划与实施
课时
2学时
教学方法
讲授、启发式
进程
第1次课
教学目的
1.理解电子商务面临的安全问题
2.理解商务网站项目的策划与实施
重点
电子商务与传统商务的关系,商务网站项目策划
难点
商务网站项目设计与开发
实施步骤:
一、熟悉学生情况(3ˊ)
二、课程简介、前期知识储备要求(5ˊ)
三、进入本次课讲授内容(包括课堂练习)(77ˊ)
四、小结巩固(重申教学目的、重点、难点)(5ˊ)
讲授内容:
第1章商务网站项目策划与建设
1.1理解传统商务与电子商务
1.1.1传统商务
介绍传统商务的概念及应用的场景。
1.1.2电子商务
介绍电子商务的概念及应用场景。
1.1.3传统商务与电子商务的关系
介绍两者的区别和联系。
1.1.4电子商务的优势和不足
1.电子商务的优势
(1)交易虚拟化
(2)交易成本低
(3)交易效率高
(4)交易透明化
2.电子商务的不足
(1)缺乏安全性
(2)没有真实的触感
1.1.5电子商务的载体
电子商务的主要载体就是商务网站。
商务网站应当建在哪里?
如何实现商务功能?
1.互联网:
九大功能。
2.万维网:
平时说的上网是啥意思?
万维网的功能很强大,几乎可以实现所有互联网的功能。
所以,平时所说的上网,通常指上万维网,即访问浏览WEB网站。
什么是万维网?
万维网(WWW或Web)就是互联网上所有支持WWW协议和超文本传输协议(HTTP)的客户机与服务器的集合,透过它可以存取世界各地的超媒体文件,内容包括文字、图像、声音、动画、资料库及各式各样的软件。
万维网的核心是什么?
①统一资源定位符(UniformResourceLocator,URL)
②超文本传输协议(HyperTextTransferProtocol,HTTP)
③超文本标记语言(HyperTextMarkupLanguage,HTML)
1.2商务网站项目的策划与实施
1.2.1网站概述
1.网站的概念及构成
什么是网页?
网页是怎么生成的?
什么是静态网页?
什么是动态网页?
2.网站的服务方式与访问方法
网站是通过统一资源定位符提供服务的入口,访问的方法是使用浏览器区访问统一资源定位符。
网站提供web服务的步骤:
Ø完成网站开发,确定首页
Ø部署WEB站点服务器(或租用)
Ø发布网站
Ø申请固定的互联网IP地址,通常也需要申请域名
Ø通过互联网服务商的域名管理服务器,绑定互联网IP地址和域名(内部网络的WEB域名管理服务器有用户自行部署管理)
Ø缴纳费用
统一资源定位符的表达形式:
可以用域名或者网络地址(固定的互联网IP地址)两种方式来表示。
例如人民邮电出版社统一资源定位符为:
网站域名形式:
网络地址形式为:
59.110.9.128
1.2.2商务网站及类型
1.按照商务目的和业务功能分类
(1)基本型商务网站
(2)宣传型商务网站
(3)客户型服务网站
(4)完全电子商务运作型网站
2.按照网站建设的主体分类
(1)行业电子商务网站
(2)企业电子商务网站
(3)政府电子商务网站
(4)服务机构电子商务网站
3.按照电子商务模式分类
(1)B2B商务网站
(2)B2C商务网站
(3)C2C商务网站
1.2.3商务网站功能组成
1.前台系统
(1)商品展示功能
(2)信息检索功能
(3)商品订购功能
(4)网上支付功能
(5)客户服务功能
(6)信息发布功能(根据网站不同,也可能属于后台系统)
2.后台系统
(1)商品管理功能
(2)订单管理功能
(3)库存管理功能
(4)商品促销管理功能
(5)客户管理功能
(6)统计分析功能
(7)系统管理及其他功能
1.2.4商务网站项目建设与管理
1.主要工作范畴
项目策划
项目实施
项目运维
2.项目实施团队
项目实施中主要涉及以下两项工作:
业务相关工作:
主要包括处理哪些业务、业务模式怎么确定、采用何种方式方法、达到什么业务目标等;
技术相关工作:
主要包括采用何种技术解决方案、功能模块如何设计、网站如何开发制作、网站如何维护等。
当然,网站建设与管理过程中还涉及法律、财务等方面的问题,也一并归入业务相关工作中。
(1)业务团队
(2)信息技术团队
(3)业务团队与信息技术团队的负责人
(4)业务团队与信息技术团队的筹建方式
①企业自行策划与建设模式
②企业网站建设实行技术团队外包模式
③企业网站建设全部外包模式
1.2.5商务网站项目策划
商务网站的项目策划非常重要,决定着网站项目是否可行。
商务网站项目策划是根据本企业的实际情况,判断市场变化的趋势,针对客户的需求,对未来的网站服务功能和开发建设进行系统的规划和设计,确定商务网站为什么做、能否做、做什么、何时做、怎么做、谁来做、谁运营、谁维护等问题。
1.项目策划的主要环节
(1)需求调查
网站需求调查是网站策划的第一步,是确定项目建设必要性的重要工作步骤,由业务团队牵头负责。
①用户调查(业务调查)
②市场调研
(2)网站定位
网站定位是最根本的业务需求,决定网站开发建设的方向,由业务团队牵头负责。
(3)编制需求概要
需求概要是明确做什么、怎么做、做到什么程度的。
要求业务目标清晰、业务需求全面、业务边界清楚、业务规则严谨。
需求概要的编制工作应当由业务团队牵头负责,信息技术团队配合。
《项目需求概要》应当由业务团队所在单位签字盖章予以认可。
(4)需求分析与功能规划
需求分析与功能规划将需求概要的内容进一步梳理、归纳、系统化,形成系统功能规划。
该项工作是以及技术为主的,由信息技术团队牵头负责,业务团队协助配合
(5)工作步骤与工作进度
(6)网站开发制作
(7)网站发布与运维
(8)网站运营模式
运营模式
运营说明
搜索引擎+百科知识
以XX为代表,采用竞价排名、广告和点击的运营模式。
XX为客户投放与网页内容相关联的广告,从而实现盈利。
它立足于搜索引擎,建立了一个完善又全面的百科知识库
即时通信+游戏+门户新闻+邮箱
以腾讯为代表,采用会员制、游戏和广告的运营模式。
收入来自互联网增值服务、移动及通信增值服务与网络广告
安全+浏览器+搜索引擎
以奇虎360为代表,采用免费+有偿增值服务的运营模式。
公司主要依靠在线广告及互联网增值业务创收
门户新闻+微博
以新浪为代表,运营模式是广告。
公司收入大部分来自网络广告,少部分来自移动增值服务
邮箱+新闻
代表企业是网易,运营模式为邮箱、游戏、广告。
绝大部分收入来自网络游戏
下载+游戏+视频
代表企业是迅雷,运营模式为会员制、游戏、广告
输入法+地图搜索+游戏
代表企业是搜狐,目前搜狐的收入主要由品牌广告、在线游戏、无线增值3部分组成
(9)投资估算
(10)可行性分析
2.编制商务网站项目策划书
1.2.6商务网站项目设计开发
在《商务网站项目策划书》通过立项审批后,就转入项目实施阶段。
项目实施最重要的工作包括:
1.详细功能设计
编制《系统规格说明书》,由技术团队为主,业务团队配合。
详细功能设计应重点考虑的内容:
(1)栏目与版块的编排
(2)目录结构
(3)网页设计
(4)链接结构
(5)功能设计
(6)数据库设计
2.网站原型设计
网站原型设计的大部分工作都属于网页设计,网站原型设计与网页设计可同时进行。
原型设计方案需要通过项目建设单位组织的评审。
3.网站开发制作
商务网站开发制作是在详细设计的基础上,按照工作计划进度安排和技术路线,组织网站开发。
教学提示:
【课程介绍、课程地位、总体概论】
【以日常商务活动为例进行对比说明】
12306动态网站示例说明
通过大学生运动鞋有用数量调查的意义,启示需求调查的重要性
通过项目策划书模版强化教学
小结巩固
传统商务与电子商务的关系,以及电子商务的优势;商务网站的概念、功能组成;项目策划与建设管理的主要工作内容,商务网站项目建设与管理的实施团队的工作职责,商务网站策划的主要环节及相关事项,编制商务网站项目策划书,商务网站设计与开发制作的工作范畴及工作要求。
课堂练习
重点概念:
电子商务、万维网、网站与商务网站、商务网站项目策划
课后作业
思考:
1.举例说明电子商务和传统商务的关系。
2.编制需求概要应当由信息技术团队还是业务团队牵头负责?
为什么?
3.网站项目策划与建设的主要环节有哪些?
参考资料
教材1章;
“互联网”及期刊杂志的相关内容。
第2课(2.1-2.3)
第2章
商务网页设计
2.1商务网页视觉设计
2.2商务网页创意设计
2.3商务网页原型设计
课时
2学时
教学方法
讲授、启发式
进程
第2次课
教学目的
1.理解商务网页视觉设计
2.理解商务网页创意设计要点
3.掌握商务网页原型设计
重点
商务网页视觉设计对象及要点,商务网页风格与形象创意设计,商务网页原型设计步骤
难点
网页网页风格设计,商务网页原型设计方法
实施步骤:
一、组织教学、课前提问(5ˊ)
二、教学引导(3ˊ)
三、进入本次课讲授内容(77ˊ)
四、小结巩固(重申教学目的、重点、难点)(5ˊ)
讲授内容:
第2章商务网页设计
2.1商务网页视觉设计
2.1.1商务网页赏析
网页布局
网页配色
导航栏设计
主横幅(Banner)设计
企业标志(Logo)设计
按钮、文字、多媒体资料
综合分析网页布局与公司业务的关系
2.1.2网页视觉设计概述
2.1.3网页视觉设计的原则
1.针对性强
2.主题鲜明
3.界面与内容统一
4.美观
5.简洁
6.体验为王
(1)少等于多
(2)合理导航
(3)访问速度
(4)保护用户数据安全
2.1.4网页视觉设计对象
1.文字
(1)文字标题
(2)文字信息
(3)文字链接
2.图像
3.多媒体
(1)音频
(2)视频
(3)动画
2.1.5网页视觉设计要点
1.网页布局
2.网页配色
3.导航栏
4.Logo(企业徽标)
5.Banner(广告条)
6.按钮
7.文字、图片及其他
2.2商务网页创意设计
2.2.1商务网页创意设计概述
2.2.2商务网页创意设计的思路
1.服务于企业的市场策划
2.服务于目标客户
(1)目标客户概念
(2)目标客户市场分类
(3)目标客户的消费分析
(4)吸引目标客户
①放大产品信息去抓住用户。
②用视频代替现场体验。
③提供免运费服务。
④放大折扣信息。
⑤提供尽可能多的支付方式。
⑥钱不是万能的,没有钱是万万不能的!
2.2.3商务网页创意设计
1.商务网页风格创意
2.形象设计
(1)设计企业徽标(Logo)
(2)设计网页字体
(3)设计网页宣传语
(4)设置背景音乐
2.3商务网页原型设计
2.3.1绘制网页草图
1.徒手绘制草图
2.计算机绘制草图
2.3.2绘制网页效果图
2.3.3制作网页原型方案
2.3.4网页原型方案评审
教学提示:
赏析代表性的商务网页,讨论其优点和不足。
小结巩固
商务网站视觉设计的概念、原则、视觉设计对象、商务网页设计要点;商务网站创意设计、网页原型设计。
课堂练习
重点概念:
商务网站视觉设计、创意设计、网页原型设计
课后作业
思考:
1.赏析商务网页,通常从哪些方面入手?
2.网页原型设计有什么作用?
3.绘制网页原型草图。
参考资料
教材2章;
“互联网”及期刊杂志的相关内容。
第3课(3.1-3.2.3)
第3章
HTML网页制作技术
3.1网页基础知识
3.2文本设置方法
3.2.1设置网页标题
3.2.2设置文字属性
3.2.3设置文档标题
课时
2学时
教学方法
讲授、示例讲解
进程
第3次课
教学目的
1.熟悉网页基础知识
2.掌握设置网页文字标题、文字属性和文档标题的设置方法
重点
标签的概念及属性,文字属性、文档标题设置方法。
难点
标签的概念及属性,文字属性设置方法。
实施步骤:
一、组织教学、课前提问(5ˊ)
二、教学引导(3ˊ)
三、进入本次课讲授内容(77ˊ)
四、小结巩固(重申教学目的、重点、难点)(5ˊ)
讲授内容:
第3章HTML网页制作技术
3.1网页基础知识
3.1.1网页源文件
1.网页源文件的概念
2.网页源文件的存储格式
3.网页源文件的运行方式
3.1.2网页解释代码
1.网页解释代码的产生
2.网页解释代码的查看与保存
3.1.3网页制作语言介绍
1.HTML语言
(1)HTML定义
(2)HTML发展
(3)HTML与XML、XHTML的关系
①HTML与XML的关系
②HTML与XHTML的关系
2.CSS语言
3.1.4HTML基础知识
1.网页元素
2.HTML标签的作用和特点
(1)HTML标签的概念
(2)HTML标签的作用
(3)HTML标签的特点
3.HTML标签的种类
基础标签、格式标签、表单标签、框架标签、图像标签、视音频标签、链接标签、列表标签、表格标签、样式标签、元信息标签、编程标签、全局标签
4.HTML标签属性
形象理解:
标签是定义类别的,属性是个性化描述的。
5.HTML事件
6.设置标签及标签属性的方法
<标签标签属性1="属性值"标签属性2="属性值"标签属性3="属性值">
标签内容
标签>
<标签1标签1属性="属性值">
<标签2标签2属性="属性值">
标签实例
标签2>
标签1>
7.HTML基本结构
标记语言
含义
文档头部分
html为标记语言声明的标签,告诉浏览器以下文件为超文本标记语言
是html文档头部的标签,网页头部及头部以上的信息不在网页中显示,主要作用是描述整个网页,定义或声明CSS样式等。如网页标题、字符格式、语言、兼容性、关键字等
指明“网页结构介绍”标题显示在浏览器标题栏中
是文档头部结束的标签
文档体部分
这里是正文内容
是网页文档体正文开始的标签。所有网页需要显示的内容,均应在此标识后面处理。
本例中的正文内容是“这里是正文内容”。
是网页文档体结束的标签