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

第 1章　电子商务网页制作与网站建设基础　1

1.1　了解电子商务网站　2

1.1.1　网页的基本构成元素　2

1.1.2　电子商务网站的概念　4

1.1.3　电子商务网站的视觉营销　5

1.1.4　电子商务网站的主要内容　6

1.2　电子商务网页制作相关软件和技术　7

1.2.1　Dreamweaver　7

1.2.2　Photoshop　8

1.2.3　HTML5　8

1.2.4　JavaScript　9

1.2.5　CSS3　10

1.2.6　ASP　10

1.3　创建和管理站点　11

1.3.1　创建本地站点　11

1.3.2　管理站点　12

【单元小结】　13

【综合实训】规划并创建“祥和家居”网站站点　13

【理论练习】　15

【实战演练】创建“宝盛首饰”站点　16



第　2章 使用Photoshop处理商品图片　17

2.1　Photoshop工作界面　18

2.2　调整与美化商品图片　19

2.2.1　调整图片大小　20

2.2.2　使用“色阶”命令　20

2.2.3　使用“曲线”命令　21

2.2.4　调整图片亮度与对比度　22

2.2.5　调整图片色相与饱和度　22

2.3　创建文字　24

2.3.1　输入文字并设置文字属性　24

2.3.2　为商品图片添加立体文字　25

2.4　修饰商品图片　27

2.4.1　去除背景中多余的物品　27

2.4.2　提高图片的清晰度　29

2.5　添加图片特效　30

2.5.1　虚化背景　30

2.5.2　添加精美边框　31

【单元小结】　32

【综合实训】处理“祥和家居”商品图片　32

【理论练习】　35

【实战演练】处理“宝盛首饰”商品图片　36



第3章　使用Photoshop设计网页中的图片元素　38

3.1　设计网站Logo　39

3.1.1　网站Logo的分类　39

3.1.2　网站Logo的设计策略和技巧　40

3.1.3　网站Logo的制作方法　41

3.1.4　设计网站Logo　41

3.2　设计商品主图　44

3.2.1　商品主图的设计规范　44

3.2.2　商品主图的设计形式　44

3.3　设计商品促销海报　45

3.3.1　商品促销海报的设计标准　45

3.3.2　商品促销海报的设计思路　47

3.4　设计网站首页　49

3.4.1　设计分类导航模块　49

3.4.2　设计宣传海报模块　53

3.4.3　设计商品展示区　56

3.5　切割网站首页　60

【单元小结】　62

【综合实训】设计“祥和家居”网页促销海报　62

【理论练习】　64

【实战演练】设计“宝盛首饰”网页促销海报　65



第4章　使用Dreamweaver制作基本网页　67

4.1　添加文本元素　68

4.1.1　在网页中添加文本并设置文本属性　68

4.1.2　插入特殊字符　70

4.1.3　插入水平线　71

4.2　创建超链接　72

4.2.1　超链接的基本概念　72

4.2.2　创建E-mail链接　73

4.2.3　创建下载文件的链接　74

4.2.4　创建图像热点链接　75

4.2.5　创建脚本链接　76

4.3　在网页中插入图像与背景音乐　77

4.3.1　插入图像　77

4.3.2　插入背景图像　79

4.3.3　创建鼠标经过图像　80

4.3.4　使用代码提示添加背景音乐　83

【单元小结】　84

【综合实训】制作“祥和家居”图文混排网页　84

【理论练习】　87

【实战演练】制作“宝盛首饰”图文混排网页　88



第5章　使用CSS美化和布局网页　90

5.1　CSS的使用　91

5.1.1　CSS基本语法　91

5.1.2　添加CSS的方法　91

5.2　使用CSS美化网页　93

5.2.1　使用CSS美化文本　93

5.2.2　使用CSS美化图片　94

5.3　CSS布局理念　96

5.3.1　将页面用DIV分块　97

5.3.2　设计各个板块的位置　97

5.3.3　用CSS定位　98

5.4　CSS定位　98

5.4.1　盒子模型的概念　99

5.4.2　float定位　99

5.4.3　position定位　101

【单元小结】　102

【综合实训】应用CSS样式美化“祥和家居”网页　103

【理论练习】　105

【实战演练】应用CSS样式美化“宝盛首饰”网页　106



第6章　使用表格布局网页　108

6.1　在网页中插入表格　109

6.1.1　插入表格　109

6.1.2　添加内容到单元格　112

6.2　表格的基本操作　115

6.2.1　选择表格元素　115

6.2.2　添加、删除行或列　116

6.2.3　拆分单元格　117

6.3　排序表格内容　118

6.3.1　导入表格式数据　118

6.3.2　排序表格　120

【单元小结】　122

【综合实训】使用表格布局“祥和家居”主页　122

【理论练习】　126

【实战演练】使用表格创建“宝盛首饰”网页　127



第7章　使用模板和库快速制作网页　129

7.1　使用模板　130

7.1.1　认识模板　130

7.1.2　创建模板　130

7.1.3　创建可编辑区域　132

7.1.4　创建基于模板的网页　133

7.2　管理站点中的模板　137

7.2.1　从模板中分离　137

7.2.2　修改模板　137

7.3　创建与应用库项目　138

7.3.1　创建库项目　138

7.3.2　应用库项目　140

7.3.3　更新库项目　141

【单元小结】　142

【综合实训】创建“祥和家居”模板网页　142

【理论练习】　146

【实战演练】创建“宝盛首饰”模板网页　146



第8章　使用行为创建特效网页　149

8.1　行为概述　150

8.1.1　行为的概念　150

8.1.2　行为面板　150

8.2　调用JavaScript行为　151

8.2.1　利用JavaScript实现打印功能　151

8.2.2　利用JavaScript实现关闭网页　152

8.3　设置浏览器行为　153

8.3.1　设置状态栏文本　153

8.3.2　设置转到URL　155

8.3.3　打开浏览器窗口　156

8.4　设置图像行为　158

8.4.1　预先载入图像　158

8.4.2　交换图像　160

8.5　设置效果行为　161

8.5.1　Blind、Clip、Slide、Fold　161

8.5.2　Fade、Highlight、Drop　162

8.5.3　Puff、Scale　162

8.5.4　Bounce、Pulsate、Shake　163

【单元小结】　163

【综合实训】制作“祥和家居”网页特效　163

【理论练习】　166

【实战演练】制作“宝盛首饰”网页特效　167



第9章　使用JavaScript制作交互页面　169

9.1　JavaScript简介　170

9.2　JavaScript基本语法　170

9.2.1　常量和变量　170

9.2.2　基本语句　171

9.2.3　函数　174

9.3　JavaScript的事件　175

9.3.1　事件与事件驱动　175

9.3.2　调用函数的事件　177

9.3.3　调用代码的事件　177

9.4　JavaScript对象的声明和引用　178

9.4.1　声明和实例化　178

9.4.2　对象的引用　180

9.5　使用JavaScript制作网页特效　180

9.5.1　制作欢迎提示信息　181

9.5.2　禁止鼠标右键　182

9.6　使用jQuery制作网页特效　183

9.6.1　使用Tabs制作选项卡　183

9.6.2　使用Accordion制作折叠面板　185

【单元小结】　186

【综合实训】使用JavaScript创建“祥和家居”网页特效　187

【理论练习】　191

【实战演练】使用jQuery创建“宝盛首饰”网页Tab选项卡　191