个人介绍
Web产品设计与开发 王晓轩等
提供学校: 辽宁现代服务职业技术学院
院系: 商业管理系
专业: 电子商务
课程英文名称: Web Product Design & Development
教师团队

王晓轩 讲师

单位:辽宁现代服务职业技术学院

部门:商业管理系

高佳乐 助教

单位:辽宁现代服务职业技术学院

课程综述





本课程是电子商务专业的专业技能课,其目的主要是教授学生应用HTML5CSS3JavaScriptjQuery)等Web前端技术,使用Axure进行交互设计,Dreamweaver开发,建立Web产品开发流程观念,培养从客户体验角度开发Web产品的一门课程。

本课程的先修课程是《计算机基础》、《电子商务概论》,后续课程为《网页制作实训》,《网络营销实务》和《网络媒体应用》。




本课程为理实一体课,按照动态职业能力培养理念设计教学环节,要求学生掌物Web产品设计与开发的相关理论知识,熟练掌握岗位工作流程。因此,结合本课程的教学大纲、授课计划及主要内容把教学环节分为:课堂模块项目教学、课后作业或任务、期末考试三大部分:

1)理论教学

课堂单元教学主要是任课教师按照教学大纲、授课计划和课堂的主要教学内容安排教学环节和内容,主要目的是要让学生通过教师的教授明确教学的知识目标、能力目标,理解和掌握物流项目管理的基本知识及操作流程。在教学过程中,会伴随着课堂复习、课堂小结和课堂提问环节,以巩固学生所掌握的课堂知识。课堂提问是检验学生平时学习成绩和学习状态的指标,因此计入平时成绩,占期末成绩的30%。

2)课后作业或任务

在本课程的教学过程中,除教材各章后所附的作业要按教学要求完成以外,还要根据教学进度和学生的实际情况,通过多媒体课件加上大量的练习题,使学生加深对所学知识的理解和掌握。具体的作业见课后安排或见教学进度计划表,学生必须按要求完成,任课教师要认真批改作业。作业成绩计入平时成绩,占期末成绩的10%。

3)期末考试

本课程采用项目考试。成绩占期末总成绩的60%。



课程主要内容说明

本课程共计6学分,90学时。其中理论教学30学时,实践教学60学时。具体内容如下表:

序号

实训项目

(单元)

实训任务

(教学内容及要求)

活动设计

课内学时安排

1

交互-原型设计

Web产品开发与设计简介

了解Web开发与设计在电子商务中的地位;

了解Web开发与设计的岗位职能;

案例分享;

通过智联招聘、前程无忧等人力资源网站,检索Web产品相关岗位的工作内容和任职要求,并在横向和纵向上对比

6


需求分析与人物角色设定

了解Web项目的流程;

了解项目启动会议的目的,形式和作用;

项目背景介绍;

确定利益相关者;

收集利益相关者的需求,形成PRD

竞争对手的研究;

素材的收集;

2

线框图、原型设计(1)

了解线框图原理和功能;

掌握使用Axure绘制线框图

主页线框图;

细节页线框图;

FTP的使用

6

3

线框图、原型设计(2)

了解线框图原理和功能;

掌握使用Axure绘制线框图

图片页线框图

手册页线框图;

页面互动效果的流程条件判断

动态面板的制作

6

4

线框图、原型设计(3)

了解线框图原理和功能;

掌握使用Axure绘制线框图

变量的使用;

原件的移动;

表单页面线框图;

6

5

视觉设计

视觉图设计(1)

了解FireworksPhotoshop视觉图中的功能;

了解原型的作用;

主页面背景及头部视觉图;

主页产品主图区视觉图;

主页“豆腐块”内容区视觉图;

细节页视觉图;

6

6

视觉图设计(2)

了解FireworksPhotoshop视觉图中的功能;

掌握视觉图的制作;

图片页视觉图;

手册下载页视觉图;

预约表单页视觉图;

视觉图输出;

6

7


阶段考核

阶段考核

6

8

代码设计

背景(background)、头部(<header>)中的logo与导航栏设计(1)

Div区块化的布局方式以及HTML中新增的区块标签

<DOCTYPE>与文档类型;

YUI重置css脚本的应用;

创建并链接到外部CSS

背景文件:

Fireworks中背景文件的优化与导出;

Dreamweaver中通过CSS导入背景图片;

6

9

背景(background)、头部(<header>)中的logo与导航栏设计(2)

建立头部(<header>)内容区域

<div>“容器”的应用;

CSS ID分别设置logo和导航按钮;

logo和导航按钮分别放置于“容器”中;

对于logo和导航按钮需要注意上边界和定位的设置

6

10

网页内容的复用和网站的发布

掌握Dreamweaver模板的制作;

掌握CSS选择器的应用;

网页的链接;

在Dreamweaver定义远程(FTP)服务器;

发布/上传文件

6

11

主体内容区域(主图区域)设计

主图的导入,margin元素的作用以及负值的使用;

为字体设置颜色:color的使用;

文本块的位置设置:float的使用

Css字体风格的设置以及Fireworks CSS sprites的导入使用;

6

12

主体内容区域(细节区域)设计

对每个区域先建立一个“大容器”,用于容纳属于此区域的所有元素,并设定marginwidth,用于将此容器居中显示;

Float属性的定位功能;

<div>的嵌套

Footer文本块

Html特殊字符;

6

 13

细节页面设计

头部区域的复用;

透明条状栏的使用;

两栏式的分栏式设计;

列表元素的使用;

通过盒子模型元素为文字列表设置边框行间距;

Css选择器的使用;

6

14

图片页面设计

头部区域和透明条状栏的复用;

创建Photo_gallery 容器;

对使用tabledivlist布局的优缺点;

<class="clear">的使用;

使用Lightbox2添加图片弹出效果;

下载;

安装;

代码的载入;

6

15

宣传册和表单页面设计,上线与监测

头部区域和透明条状栏的复用;

使用<div>填充区域;

两栏<div>

添加表单元素

Css圆角属性的使用;

使用placeholder属性,预设文字提示;

使用第三方表单工具收集表单数据;

上线;

数据监测

6

总学时

90








(一)教法设计

本课程教授采用任务驱动教学法、讲授法、练习法、案例法、模拟法、项目教学等方法。

(二)学法设计

本课程采用项目-任务教学法,以一个网站项目的实现过程作为载体,网站设计开发流程为项目管理方法(横向),将各环节所设计的知识和技能(纵向)分解在各流程阶段,通过在完成各任务的同时,让学生系统地完成知识和技能的学习。

由于本课程采用项目-任务教学法,将项目分解成可供实现的任务,学生在学习过程中明确自己的任务目标的前提下,鼓励主动地去探索式学习,培养创新精神和实践能力。

实践教学中,模拟企业真实工作环境,将学生分为项目团队,学生自选team leader,平时由学生自我管理。老师担任项目经理,对各团队工作进度和质量进行监督。

、教学评价方式

1.考核大纲

本考核由过程考核+期末项目考核两种形式组成。

2.考核方式

本课程为考试课,考虑到课程的内容形式,期末将尝试以项目成果物的形式考核,而非传统的卷纸。

平时成绩占40%,期末成绩占60%。

其中,平时成绩构成:出勤占10%,课堂实训项目任务占30%;

3.分数评定

本课程属于考试课,采用过程考核+结果考核,通过实践课程的作业完成和平时表现加上考试,具体分值分配如下表。

 


考核项目

考核内容

分值分配

出勤

点名

10

作业

作业完成

30

期末考核

项目考核

60

总  计

100


扩展阅读与参考资料

参考视频



课程评价

教学资源
课程章节 | 文件类型   | 修改时间 | 大小 | 备注
1.1 用研与卡片排序
视频
.mp4
2018-09-16 153.08MB
2.1 人物角色
视频
.mp4
2017-09-22 102.38MB
3.1 Axure的安装与汉化
视频
.mp4
2018-03-15 157.70MB
3.2 Dreamweaver的安装
视频
.mp4
2018-09-20 184.77MB
3.3 header区域的第一部分
视频
.mp4
2018-04-04 151.92MB
3.4 鼠标滑过样式
视频
.mp4
2017-09-22 103.90MB
3.5 图片轮播-1
视频
.mp4
2017-09-22 74.73MB
3.6 图片轮播-2
视频
.mp4
2017-09-22 93.73MB
3.7 图片轮播-3
视频
.mp4
2017-09-22 79.87MB
3.8 图片轮播-4
视频
.mp4
2017-09-22 84.18MB
3.9 主要内容区域.
视频
.mp4
2017-09-22 101.83MB
3.10 footer区域
视频
.mp4
2017-09-22 129.32MB
4.1 发布并安装Chrome扩展
视频
.mp4
2017-09-22 126.46MB
4.2 FTP的使用
视频
.mp4
2018-09-08 154.71MB
4.3 FTP的访问路径和Chrome扩展的问题
视频
.mp4
2017-09-22 87.80MB
4.4 母版的制作
视频
.mp4
2017-09-22 121.26MB
4.5 给母版添加链接
视频
.mp4
2017-09-22 91.24MB
4.6 下拉菜单-1
视频
.mp4
2017-09-22 99.84MB
4.7 下拉菜单-2
视频
.mp4
2017-09-22 130.95MB
4.8 下拉菜单-3
视频
.mp4
2017-09-22 113.90MB
5.1 灯箱效果-1
视频
.mp4
2017-09-22 124.01MB
5.2 灯箱效果-2
视频
.mp4
2017-09-22 61.75MB
5.3 表单-1
视频
.mp4
2017-09-22 120.66MB
5.4 表单-2
视频
.mp4
2017-09-22 105.62MB
5.5 表单-3
视频
.mp4
2017-09-22 84.12MB
5.6 表单验证
视频
.mp4
2017-09-22 69.70MB
5.7 王东旭同学的表单验证
视频
.mp4
2017-09-22 53.39MB
5.8 表单验证-2
视频
.mp4
2017-09-22 127.20MB
5.9 表单验证-3
视频
.mp4
2017-09-22 72.30MB
6.1 平板端的自适应视图
视频
.mp4
2017-09-22 215.89MB
6.2 手机端1-布局的调整
视频
.mp4
2017-09-22 120.87MB
6.3 手机端2-三道杠
视频
.mp4
2017-09-22 59.72MB
6.4 手机端3-弹开收回子菜单
视频
.mp4
2017-09-22 129.30MB
6.5 手机端4-footer
视频
.mp4
2017-09-22 99.61MB
7.1 footer区域
视频
.mp4
2017-09-22 165.88MB
7.2 HTML的语法结构
视频
.mp4
2017-12-05 83.61MB
7.3 HTML结构
视频
.mp4
2017-09-22 138.58MB
7.4 HTML元素的lang属性
视频
.mp4
2017-09-22 53.21MB
7.5 meta元素及其属性
视频
.mp4
2017-09-22 115.14MB
7.6 title元素与浏览器的设置
视频
.mp4
2017-09-22 61.41MB
7.7 导航栏
视频
.mp4
2018-04-24 146.73MB
7.8 建立本地站点
视频
.mp4
2017-09-22 92.06MB
7.9 建立远程站点和上传
视频
.mp4
2017-09-22 178.79MB
7.10 前端开发介绍
视频
.mp4
2017-09-22 191.46MB
7.11 图片与链接
视频
.mp4
2017-09-22 251.30MB
7.12 图文快速链接区域
视频
.mp4
2017-09-22 145.64MB
7.13 语义vs.非语义.
视频
.mp4
2017-09-22 72.80MB
7.14 主图区域的结构
视频
.mp4
2017-09-22 80.93MB
7.15 主图区域的图片制作
视频
.mp4
2017-09-22 159.20MB
7.16 注释的使用
视频
.mp4
2017-09-22 79.91MB
7.17 字符实体
视频
.mp4
2017-09-22 74.00MB
8.1 样式表的引用方式
视频
.mp4
2017-09-22 241.53MB
8.2 背景渐变色
视频
.mp4
2017-09-22 143.06MB
8.3 文字颜色和字体
视频
.mp4
2018-06-11 123.47MB
8.4 header区域的背景图片制作和设置
视频
.mp4
2017-09-22 150.31MB
 
视频
.mp4
2017-09-22 110.29MB
8.5 header中容器的位置
视频
.mp4
2017-09-22 224.39MB
8.6 导航栏的设置1-当前页的背景色
视频
.mp4
2017-09-22 182.50MB
8.7 导航栏的设置2-导航项文字的效果
视频
.mp4
2017-09-22 159.22MB
8.8 主图区域的设置-float&clear
视频
.mp4
2017-09-22 128.28MB
8.9 快速链接区域1-图片
视频
.mp4
2017-09-22 98.59MB
8.10 快速链接区域2
视频
.mp4
2017-09-22 113.33MB
8.11 快速链接区域3
视频
.mp4
2017-09-22 205.80MB
8.12 快速链接区域4
视频
.mp4
2017-09-22 138.21MB
8.13 footer区域1
视频
.mp4
2017-09-22 118.00MB
8.14 footer区域2
视频
.mp4
2017-09-22 84.91MB
12.1 CSS的重置和正常化
视频
.mp4
2017-09-22 159.40MB
12.2 页面模板的复用
视频
.mp4
2017-09-22 78.70MB
12.3 gallery区域的建立
视频
.mp4
2017-09-22 119.38MB
12.4 单元格中的透明背景
视频
.mp4
2017-09-22 119.32MB
12.5 缩略图的制作
视频
.mp4
2017-09-22 86.55MB
12.6 缩略图的插入和单元格背景的调整
视频
.mp4
2017-09-22 105.51MB
12.7 缩略图单元格边距的调整
视频
.mp4
2018-06-11 124.72MB
12.8 Lightbox文件的安装
视频
.mp4
2017-12-05 125.39MB
12.9 Lightbox的配置
视频
.mp4
2017-09-22 94.97MB
13.1 建立页面结构
视频
.mp4
2017-09-22 200.62MB
13.2 左侧图片容器的创建
视频
.mp4
2017-09-22 102.55MB
13.3 右侧表单容器的创建
视频
.mp4
2017-09-22 105.04MB
13.4 表单标题文字的样式
视频
.mp4
2017-09-22 83.41MB
13.5 input样式调整-1
视频
.mp4
2017-09-22 194.95MB
13.6 块元素和内联元素
视频
.mp4
2017-09-22 132.94MB
13.7 按钮的设计和制作
视频
.mp4
2017-09-22 181.00MB
13.8 HTML5表单属性
视频
.mp4
2017-09-22 154.55MB
14.1 了解RWD和Bootstrap
视频
.mp4
2018-06-04 168.44MB
14.2 导入站点、创建文件
视频
.mp4
2017-09-22 188.62MB
14.3 修改导航栏内容
视频
.mp4
2018-06-11 103.68MB
14.4 导航栏的样式化
视频
.mp4
2018-06-11 82.62MB
14.5 设置logo
视频
.mp4
2018-06-11 71.77MB
14.6 页码内容容器和插入首焦图
视频
.mp4
2017-09-22 95.19MB
14.7 首焦图标题文字的设置
视频
.mp4
2017-09-22 181.98MB
14.8 内容列的制作
视频
.mp4
2017-09-22 134.98MB
14.9 内容列的调整
视频
.mp4
2017-09-22 88.53MB
14.10 内容列样式的调整
视频
.mp4
2017-09-22 60.21MB
14.11 课程区域的创建和样式的调整
视频
.mp4
2017-09-22 177.75MB
14.12 footer区域的制作
视频
.mp4
2017-09-22 100.47MB
15.1 域名、主机和FTP
视频
.mp4
2017-09-22 212.80MB
15.2 数据统计服务的申请和代码安装
视频
.mp4
2017-09-22 212.07MB
16.1 标题栏和按钮
视频
.wmv
2017-11-21 23.52MB
16.2 页面数据展示
视频
.wmv
2017-11-21 20.16MB
课程章节
提示框
提示框
确定要报名此课程吗?
确定取消