新页设计与制作(第3版)——Web前端开发杨艳 编9787302583158

项目1网页制作基础知识1

1.1项目描述及分析1

1.2任务1赏析2

1.3任务2网页基础知识4

1.3.1网页和的基本概念4

1.3.2网页的组成元素5

1.3.3网页相关名词7

1.3.4Web标准10

1.3.5响应式Web设计11

1.4任务3建设的般程12

1.4.1确定主题12

1.4.2规划结构12

1.4.3收集资料与素材14

1.4.4确定版面布局方式14

1.4.5制作网页17

1.4.6测试与发布18

1.4.7推广18

1.4.8的后期维护18

1.5网页制作入门18

1.5.1HTML5简介18

1.5.2CSS3简介19

1.5.3JavaScript简介19

1.5.4常见浏览器19

1.6网页制作常用开发工具简介21

1.6.1网页制作与编辑工具21

1.6.2页面设计与美化工具22

1.7知识链接22

1.7.1网页制作的基本原则22

1.7.2认识图像

1.7.3常见的建站方式25

实训26

项目2制作简单网页27

2.1项目描述及分析27

2.2任务1进行功能设计29

.任务2设计首页原型29

..1认识Photoshop29

..2制作首页原型32

..首页原型的切片与导出33

2.4任务3网页的制作与上传35

2.4.1认识HBuilder35

2.4.2HBuilder入门37

2.4.3域名和空间的申请39

2..站文件的上传41

2.5知识链接42

2.5.1网页中的色彩42

2.5.2网页基本元素的标准和使用技巧44

实训45

项目3“太阳岛”旅游制作47

3.1项目描述及分析47

3.2任务1添加文本49

3.3任务2认识HTML51

3.3.1HTML文档基本格式51

3.3.2认识HTML标签52

3.3.3HTML常用标签54

3.4任务3编辑文本57

3.4.1全国免费电话文本设置57

3.4.2近期新动态行文本编辑58

3.5任务4认识CSS.59

3.5.1认识CSS样式表60

3.5.2创建并使用CSS样式优化网页源码63

3.6任务5设计子页66

3.7知识链接——CSS控制文本样式68

3.8拓展学——类的设计要点70

3.8.1旅游类的类型70

3.8.2旅游类的设计要点74

实训75

项目4“盟院合作”专题制作76

4.1项目描述及分析76

4.2任务1认识盒子模型77

4.3盒子模型相关属7

4.3.1盒子边框属7

4.3.2内边距属1

4.3.3外边距属2

4.3.4背景属4

4.3.5盒子的宽与高86

4.4浮动与定位87

4.4.1元素的浮动87

4.4.2元素的定位95

4.5项目制作99

4.5.1页面布局及定义基础样式99

4.5.2页眉制作101

4.5.3“主体”模块制作104

4.5.4页脚制作109

4.6知识链接——补充CSS选择器111

4.7拓展学习——专题制

作的设计要点113

实训114

项目5“艾上乐品”制作116

5.1项目描述及分析116

5.2任务1列表标记及嵌套117

5.2.1列表标记117

5.2.2列表的嵌套121

5.3任务2CSS控制列表样式122

5.4任务3认识表格标记124

5.4.1表格标记124

5.4.2CSS控制表格样式126

5.5项目制作129

5.5.1页面布局及定义基础样式129

5.5.2制作“头部”导航模块130

5.5.3制作banner模块和“精品展示”模块131

5.5.4制作“版权信息”模块135

5.6知识链接——浏览器兼容135

5.7拓展学习——流行时尚类的设计要点137

实训139

项目6影音制作141

6.1任务1了解HTML5多媒体的特141

6.2任务2了解HTML5常用的多媒体格式142

6.2.1音频格式142

6.2.2视频格式142

6.3任务3HTML5多媒体的实现143

6.3.1audi标签43

6.3.2vide标签44

6.3.3source标签144

6.4任务4HTML5表单的应用146

6.4.1认识表单146

6.4.2HTML5新增的表单属147

6.4.3HTML5标签147

6.5任务5影音项目描述及分析148

6.6任务6添加多媒体文件150

6.6.1添加音频文件150

6.6.2添加视频文件153

6.6.3添加留言模块154

6.7知识链接——音频/视频DOM参考手册156

实训158

项目7“我要回家网”页面制作159

7.1项目描述及分析159

7.2任务1JavaScript概述161

7.2.1JavaScript简介161

7.2.2JavaScript引入方式163

7..JavaScript基本语法165

7.2.4一个简单的JavaScript程序165

7.3任务2JavaScript语言基础166

7.3.1关键字和标识符166

7.3.2变量和数据类型167

7.3.3运算符和表达式171

7.4任务3程序流程控制178

7.4.1条件语句178

7.4.2循环语句185

7.4.3跳转语句189

7.5任务4函数191

7.5.1初识函数191

7.5.2函数的调用191

7.5.3函数中变量的作用域193

7.6任务5结构布局及样式定义194

7.6.1准备工作194

7.6.2制作思路分析195

7.6.3页面结构设计196

7.6.4基础样式定义196

7.6.5CSS/JS文件引入197

7.7任务6制作“头部”版块197

7.7.1“头部”版块效果分析197

7.7.2“头部”版块制作198

7.8任务7制作“导航”版块202

7.8.1“导航”版块效果分析202

7.8.2“导航”版块制作202

7.9任务8制作banner版块和“时间”版块204

7.9.1banner版块和“时间”版块效果分析204

7.9.2banner版块和“时间”版块制作205

7.10任务9制作“客运信息”版块207

7.10.1“客运信息”版块效果分析2077

10.2“客运信息”版块制作207

7.11任务10制作“底部”版块210

7.11.1“底部”版块效果分析210

7.11.2“底部”版块制作211

7.12拓展学习——业务类的设计要点212

7.12.1业务类的类型212

7.12.2业务类的设计要点213

实训214

项目8“延庆外国语学校”页面制作215

8.1项目描述及分析215

8.2任务1认识对象217

8.2.1什么是对象217

8.2.2对象的属和方法218

8..创建和删除对象218

8.2.4内置对象220

8.3任务2数组对象225

8.3.1初识数组225

8.3.2数组的常见操作226

8.3.3数组的常用属和方法1

8.3.4二维数组4

8.4任务3BOM和DOM对象5

8.4.1BOM对象5

8.4.2DOM对象242

8.5任务4事件处理248

8.5.1什么是事件248

8.5.2事件处理程序的调用249

8.5.3鼠标事件251

8.5.4键盘事件252

8.5.5表单事件254

8.5.6页面事件256

8.6任务5布局及定义基础样式257

8.6.1准备工作258

8.6.2制作思路分析259

8.6.3页面结构设计260

8.6.4基础样式定义261

8.6.5CSS/JS文件引入261

8.7任务6制作“头部及导航”版块261

8.7.1“头部”版块效果分析261

8.7.2“头部”版块制作262

8.8任务7制作banner版块264

8.8.1banner版块效果分析264

8.8.2banner版块制作264

8.9任务8制作“学校简介”版块268

8.9.1“学校简介”版块效果分析268

8.9.2“学校简介”版块制作269

8.10任务9制作“课程特色”版块272

8.10.1“课程特色”版块效果分析272

8.10.2“课程特色”版块制作273

8.11任务10制作“页脚”版块279

8.11.1“页脚”版块效果分析279

8.11.2“页脚”版块制作279

8.12拓展学习——教育类的设计要点280

8.12.1教育类的类型280

8.12.2教育类的设计要点282

实训283

项目9动态化284

9.1项目描述及分析284

9.2任务1认识CMS286

9.2.1静态网页与动态网页286

9.2.2CMS287

9.3任务2静态页面模板导入288

9.3.1DedeCMS的安装和环境配置288

9.3.2静态页面模板导入295

9.3.3模板的相关概念297

9.4任务3DedeCMS常用标签298

9.4.1了解DedeCMS中的标签298

9.4.2DedeCMS中的常用标签298

9.5任务4首页动态化302

9.5.1栏目管理302

9.5.2首页动态化305

9.6任务5页面动态化313

9.6.1列表页（栏目页）动态化313

9.6.2内容页动态化315

9.7任务6生成静态页面319

9.8知识链接——数据备份与还原320

实训322

项目10响应式Web设计3

10.1项目描述及分析3

10.2任务1认识响应式布局325

10.2.1设计理念325

10.2.2响应式的实现326

10.3任务2响应式布局基础知识327

10.3.1响应式设计相关概念327

10.3.2响应式布局的实现330

10.4任务3响应式布局框架332

10.4.1常见的响应式布局框架332

10.4.2Bootstrap简介333

10.5任务4认识Bootstrap337

10.5.1相关概念337

10.5.2CSS布局339

10.5.3组件341

10.6任务5页面响应式布局346

10.6.1项目需求346

10.6.2头部响应式布局348

10.6.3主体部分响应式布局350

10.6.4页脚部分响应式布局353

10.6.5测试页面353

10.7知识链接——Bootstrap中的组件354

10.7.1表单354

10.7.2复选框和单选按钮355

10.7.3卡片356

实训357

参考文献358

随着Web前端开发在近年来迅速崛起，从Web前端开发企业实战的角度，以项目式的教学方式讲解HTML5、CSS3、响应式设计等新技术实用更强 ；同时配备相应的微课资源。