项目一 构建电子商务网站....1
任务一 电子商务网站设计基础知识..................................... 2
一、初识电子商务网站.........................2
二、电子商务网站设计准则 .................5
任务二 电子商务网站结构设计 ......... 7
一、网站的物理结构 ............................7
二、网站的逻辑结构 ............................8
三、网站的构成 ....................................8
四、网页的空间结构 ............................9
五、网页的布局结构 ......................... 10
任务三 电子商务网站色彩搭配 ....... 13
一、色彩基础知识 ..............................13
二、确定网站的主色调.......................14
三、网页的色彩搭配技巧...................14
任务四 课堂练习——使用 HTML5制作简单页面 ..................... 16
一、初识 HTML5 ...............................16
二、HTML5 基本结构 .......................17
三、HTML5 常用标签 .......................17
四、制作滚动图片链接网页 ...............21
任务五 课堂练习——使用Dreamweaver 创建站点...... 22
一、初识 Dreamweaver.....................22
二、创建站点的准备 ..........................23
三、创建与设置站点 ..........................24
项目小结.......................................... 28
课后实训.......................................... 29
项目二 使用 Dreamweaver 添加网页元素 .......30
任务一 认识 Dreamweaver CC 2018工作界面 ............................31
一、菜单栏......................................... 31
二、工具栏......................................... 32
三、文档窗口 ..................................... 32
四、“属性”面板 ............................... 32
五、面板组......................................... 32
任务二 课堂练习——在网页中添加文本和图像.........................33
一、添加文本 ..................................... 33
二、设置文本属性.............................. 35
三、添加其他特殊文本 ...................... 36
四、添加图像 ..................................... 37
五、添加其他图像元素 ...................... 39
任务三 课堂练习——为“新品上市”页面添加商品列表 ..............41
一、添加无序列表.............................. 41
二、添加有序列表.............................. 42
任务四 课堂练习——为商品详情页添加表格 ............................43
一、认识表格 ..................................... 43
二、表格“属性”面板 ...................... 44
三、插入并编辑表格.......................... 44
四、使用表格布局商品详情页........... 46
任务五 课堂练习——添加超链接创建链接页面 .....................48 II
一、认识路径......................................48
二、添加文档链接 ..............................48
三、添加锚记链接 ............................. 50
四、添加空链接 ..................................51
项目小结.......................................... 52
课后实训.......................................... 52
项目三 使用 CSS 美化网页 ..................54
任务一 认识 CSS........................... 55
一、了解 CSS 的基本语法..................55
二、在网页中引用 CSS 的方式 ..........55
任务二 课堂练习——在 Dreamweaver 中创建 CSS 规则和文件......... 57
一、创建 CSS 规则 .............................57
二、创建 CSS 文件 .............................58
任务三 课堂练习——使用 CSS选择器美化文本 ................. 60
一、应用元素选择器 ......................... 60
二、应用群组选择器 ..........................61
三、应用类选择器 ..............................62
四、应用 ID 选择器 ............................63
五、应用后代选择器 ..........................63
六、应用通配符选择器.......................64
任务四 课堂练习——CSS 特性的应用................................... 65
一、应用继承性 ..................................65
二、应用特殊性 ..................................66
三、应用层叠性 ..................................67
四、应用重要性 ..................................68
任务五 课堂练习——使用 CSS 美化童装网站 ............................68
一、文字排版 ..................................... 68
二、段落排版 ..................................... 70
三、CSS 背景..................................... 70
四、列表排版 ..................................... 75
五、表格排版 ..................................... 75
六、链接样式 ..................................... 76
项目小结 ..........................................77
课后实训 ..........................................77
项目四 使用 DIV+CSS布局网页 .............78
任务一 使用 CSS 盒子模型.............79
一、认识 CSS 盒子模型..................... 79
二、CSS 盒子模型的边框、内边距和外边距......................................... 79
任务二 标准流和<div>标签.............81
一、标准流......................................... 81
二、<div>标签................................... 82
三、盒子在标准流中的定位 .............. 83
任务三 课堂练习——使用盒子模型设计“商品分类”网页 .......84
一、盒子浮动 ..................................... 84
二、清除浮动影响和盒子定位........... 86
任务四 课堂练习——使用 DIV+CSS布局电子商务网站首页 .......89
一、使用 DIV 布局页面结构 ............. 89
二、对网页顶部布局.......................... 89
三、对网页主体布局.......................... 91
四、对网页底部布局.......................... 92
五、组合首页布局.............................. 93 电子商务网站建 目 录
项目小结.......................................... 94
课后实训.......................................... 94
项目五 使用行为和表单创建网页特效 .......95
任务一 使用行为............................ 96
一、认识行为和事件 ..........................96
二、“行为”面板 ................................97
任务二 使用表单............................ 99
一、了解表单......................................99
二、创建表单......................................99
三、设置表单属性 ........................... 100
任务三 课堂练习——制作“新用户注册”网页表单 ............... 100
一、插入文本域 ............................... 101
二、插入单选按钮 ........................... 102
三、插入下拉菜单和滚动列表 ........ 103
四、插入文件域 ............................... 105
五、插入复选框 ............................... 106
六、插入按钮................................... 107
七、插入图像按钮 ........................... 108
任务四 课堂练习——使用行为制作“数码商城”网页特效 ....... 109
一、制作打开浏览器窗口特效 ........ 109
二、制作交换图像特效.................... 110
三、制作跳转菜单特效.....................111
任务五 课堂练习——使用行为验证用户注册.......................... 113
一、检查表单....................................113
二、设置密码仅为数字.....................114
三、检查邮箱格式............................ 114
项目小结 ........................................ 115
课后实训 ........................................ 116
项目六 使用 Animate 制作网页广告动画 ..... 118
任务一 认识 Animate CC 2018 工作界面 ................................. 119
一、菜单栏....................................... 119
二、基本功能区 ............................... 120
三、窗口选项卡 ............................... 120
四、编辑栏....................................... 120
五、舞台........................................... 121
六、“时间轴”面板.......................... 121
七、“属性”面板 ............................. 121
八、工具栏....................................... 122
任务二 Animate 工具的应用 ......... 123
一、文本工具 ................................... 123
二、绘图工具 ................................... 126
三、填充工具 ................................... 131
任务三 课堂练习——制作家居网站导航菜单 .......................... 133
一、认识导航菜单............................ 134
二、导航菜单设计............................ 135
任务四 课堂练习——制作水果促销横幅广告 .......................... 139
一、认识横幅广告............................ 139
二、横幅广告设计............................ 139
项目小结 ........................................ 142
课后实训 ........................................ 142 IV
项目七 使用 JavaScript实现网页交互特效 ................ 144
任务一 认识 JavaScript 脚本语言................................. 145
一、JavaScript 简介 ........................145
二、JavaScript 的基本结构 .............145
三、使用 JavaScript 向页面输出信息 ...........................................146
任务二 课堂练习——使用 JavaScript制作网页交互特效 ............ 147
一、制作文字滚动特效.....................147
二、制作日期特效 ............................148
三、制作对联广告特效.....................148
四、制作下拉菜单特效.....................149
任务三 课堂练习——使用 JavaScript 验证表单.......................... 150
一、设置表单非空验证.................... 150
二、验证密码长度和密码一致性 .....152
三、验证电子邮箱地址.....................152
任务四 课堂练习——为首页添加“焦点图”代码 ................. 153
一、下载“焦点图”代码.................153
二、添加“焦点图”代码.................154
项目小结........................................ 156
课后实训........................................ 156
项目八 电子商务网站建设案例——搭建家具商城网站 ........... 158
任务一 申请域名与空间................ 159
一、注册域名 ................................... 159
二、选择虚拟主机与申请空间......... 161
任务二 设计家具商城网站原型 ..... 164
一、分析网站需求............................ 164
二、制作网站原型............................ 165
三、创建站点 ................................... 167
任务三 制作家具商城网站首页 ..... 167
一、使用 DIV+CSS 布局网页.......... 167
二、制作页面顶部............................ 168
三、制作焦点图 ............................... 170
四、制作产品分类区........................ 171
五、制作产品展示区........................ 174
六、制作页面底部............................ 175
七、使用 JavaScript 制作焦点图交互效果........................................... 177
任务四 测试与发布网站................ 179
一、网站的测试 ............................... 179
二、网站的发布 ............................... 185
项目小结 ........................................ 187
课后实训 ........................................ 188