电子商务网页设计与制作微课版

项目一 赏析规划电子商务网站 ——了解电子商务网站
知识链接：　1
1、网页的构成元素　1
2、电子商务网站的概念和特点　5
3、电子商务网站的分类　5
4、电商网站的视觉营销　6
5、电子商务网站的开发流程　8
任务一　赏析电子商务网站　11
任务描述——分析电子商务网站首页　11
技术引进——分析页面结构与色彩　12
任务实施——提高用户体验的要素　15
新手试炼——赏析电子商务页面　18
任务二　规划“学设计吧”电子商务网站　19
任务描述——分析电子商务网站结构　19
技术引进——完成电子商务网站线框图　21
任务实施——设计电子商务网站　24
新手试炼——电子商务网站会员页面设计　26
项目小结　26
课后习题　26
项目二　创建并管理电商网站站点——掌握网站搭建基础
知识链接：　28
1、电子商务网站制作相关术语　28
2、远程站点和本地站点　30
3、统一资源定位器URL　30
4、站点规划　31
任务一　创建网站文件结构　32
任务描述——创建本地静态站点　32
技术引进——了解“站点设置对象”对话框　33
任务实施——站点文件的优化与管理　36
新手试炼——创建个人网站站点　37
任务二　设置远程站点服务器信息　38
任务描述——设置“服务器”选项　38
技术引入——设置“站点设置对象”对话框　39
任务实施——设置远程服务器　41
新手试炼——站点中的操作　43
项目小结　43
课后习题　43
项目三　使用HTML编写页面——搭建页面底层的基础
知识链接：　45
1、电子商务网站设计建设原则　45
2、电子商务页面设计规则　46
3、了解HTML　5　48
4、HTML的基本结构　48
5、掌握HTML的标签　49
任务一　布局学设计吧“关于我们”页面　52
任务描述——了解页面基本结构　53
技术引进——在Dreamweaver中编写HTML　53
任务实施——制作关于我们页面结构　56
新手试炼——制作社区生活页面　59
任务二　制作学设计吧“关于我们”页面　60
任务描述——了解关于我们页面结构　60
技术引入——Div+CSS盒模型　60
任务实施——完成关于我们页面制作　64
新手试炼——制作蓝色企业网站　66
项目小结　67
课后习题　67
项目四　使用CSS样式美化页面——简单快捷规范制作页面
知识链接：　69
1、电子商务网页常用术语　69
2、CSS样式基础　72
3、CSS样式的基本语法　74
4、CSS样式的使用方法　75
任务一　美化“关于我们”页面导航　77
任务描述——了解页面导航的结构　77
技术引进——了解id选择符　77
任务实施——美化关于我们页面导航　80
新手试炼——制作个人作品网站页面　81
任务二　美化“关于我们”文本内容　82
任务描述——分析“关于我们”页面结构　82
技术引入——使用CSS控制字体　82
任务实施——美化页面文字　86
新手试炼——制作网站公告　88
项目小结　89
课后习题　89
项目五　使用CSS控制列表样式——制作商品列表页面
知识链接：　91
1、电子商务网站常用商品列表页布局　91
2、商品展示页设计要点　94
3、网页中的列表控制　96
4、列表的类型及使用　97
任务一　制作商品列表索引导航　100
任务描述——商品列表索引导航结构分析　101
技术引进——有序列表和无序列表　101
任务实施——制作商品列表索引　104
新手试炼——制作个人作品网站页面　106
任务二　美化商品列表页面　107
任务描述——商品列表页面结构分析　107
技术引入——使用定义列表　108
任务实施——制作页面中商品列表　109
新手试炼——制作纵向导航菜单　111
项目小结　112
课后习题　112
项目六　使用CSS控制页面文字样式——制作商品详情页面
知识链接：　114
1、商品详情页设计原则　114
2、如何做好商品详情页　118
3、CSS控制字体与大小　119
4、CSS控制颜色和粗细　122
任务一　制作商品详情页头部　124
任务描述——了解文字标签　124
技术引进——掌握文字装饰标签　124
任务实施——制作商品详情页头部　127
新手试炼——网页文字修饰　130
任务二　制作商品详情页文本介绍　130
任务描述——了解分区标签的使用　131
技术引入——使用CSS控制段落　131
任务实施——制作商品详情页底部　134
新手试炼——应用多个类样式　135
项目小结　136
课后习题　136
项目七　在页面中使用多媒体——制作视频播放页面
知识链接：　138
1、打造具有说服力的商品页面　138
2、电商网站中多媒体视频的使用　141
3、使用标签嵌入音频和视频　142
4、HTML　5中多媒体的应用　143
任务一　制作商品列表索引导航　143
任务描述——商品列表导航页面结构　144
技术引进——在页面中嵌入音频或视频　144
任务实施——制作视频播放页面　148
新手试炼——在网页中嵌入视频　151
任务二　制作视频播放页详情部分　152
任务描述——使用标签　152
技术引入——与标签的属性　153
任务实施——制作商品详情页底部　156
新手试炼——实现网页中视频的播放与暂停　158
项目小结　159
课后习题　159
项目八　使用CSS控制表单——制作会员注册页面
知识链接：　161
1、注册登录界面的设计要求　161
2、如何设计人性化的登录界面　164
3、表单与表单属性　165
4、表单中的其他元素　166
任务一　制作会员注册页面　170
任务描述——会员注册页结构分析　170
技术引进——在Dreamweaver中使用表单元素　170
任务实施——制作网站会员注册页面　174
新手试炼——制作多彩下拉列表　176
任务二　制作会员信息完善页面　177
任务描述——会员信息完善页结构分析　177
技术引入——与标签的属性　178
任务实施——制作会员信息完善页面　179
新手试炼——制作舞动会员登录界面　182
项目小结　183
课后习题　183
项目九　使用CSS控制超链接——制作电子商务网站首页
知识链接：　185
1、电商网站导航设计技巧　185
2、电商网站首屏设计要点　189
3、认识超链接　192
4、了解超链接路径　193
任务一　制作电商网站首屏　195
任务描述——分析电商网站首页结构　196
技术引进——了解超链接属性控制　196
任务实施——制作电商网站首屏　201
新手试炼——制作活动公告　203
任务二　制作电网网站版底信息　204
任务描述——分析电商网站版底结构　204
技术引入——使用CSS控制鼠标指针特效　205
任务实施——制作电商网站首页版底　207
新手试炼——制作图片式超链接　210
项目小结　210
课后习题　210
项目十　使用JavaScript脚本丰富页面——制作页面交互动画
知识链接：　212
1、电商网站交换设计技巧　212
2、交互设计需要考虑的内容　215
3、JavaScript的应用范围　216
4、jQuery和jQuery事件　217
任务一　制作电商网站轮播图动画　220
任务描述——分析网页轮播图的作用　220
技术引进——了解Javascript的使用方法　221
任务实施——制作电商网站首页轮播图　223
新手试炼——使用JavaScript实现图像滑动切换　225
任务二　制作电网网站弹出页面　226
任务描述——分析电商网站版底结构　226
技术引入——jQuery　Mobile和jQuery UI　226
任务实施——使用JavaScript实现弹出页面　229
新手试炼——使用JavaScript制作动态网站相册　230
项目小结　231
课后习题　231
知识链接：　185
1、电商网站导航设计技巧　185
2、电商网站首屏设计要点　189
3、认识超链接　192
4、了解超链接路径　193
任务一　制作电商网站首屏　195
任务描述——分析电商网站首页结构　196
技术引进——了解超链接属性控制　196
任务实施——制作电商网站首屏　201
新手试炼——制作活动公告　203
任务二　制作电网网站版底信息　204
任务描述——分析电商网站版底结构　204
技术引入——使用CSS控制鼠标指针特效　205
任务实施——制作电商网站首页版底　207
新手试炼——制作图片式超链接　210
项目小结　210
课后习题　210
项目十一　电子商务网站综合实例——睿欧电子商务网站搭建
知识链接：　233
电子商务网站的发展局势　233
电子商务网站产品原型　235
电子商务网站浏览器兼容性测试　237
电子商务网站的上传与管理　239
任务一　设计睿欧电子商务网站的原型　242
任务描述——睿欧电子商务网站结构和层级　242
技术引进——了解产品原型软件Axure　243
基本工具　244
任务实施——制作睿欧电子商务网站原型　248
新手试炼——根据电子商务网站原型设计页面　250
任务二　睿欧电子商务网站的设计与制作　251
任务描述——电子商务网站页面设计与制作　251
技术引入——浏览器适配的方法　252
任务实施——设计睿欧电子商务网站　253
新手试炼——使用FTP维护电子商务网站　256
项目小结　256
课后习题　256