网页设计与制作项目教程 HTML＋CSS＋BootstrapPDF电子书下载

项目一 创建我的第一个网站 1

一、项目简介 1

二、项目目标 1

三、工作任务 1

任务一 初识Dreamweaver CC 2015 1

（一）任务描述 1

（二）任务目标 1

（三）知识准备 2

知识准备一 了解网页和网站的基础知识 2

知识准备二 Dreamweaver CC 2015软件介绍 12

（四）任务实施 15

（五）任务评价 20

（六）思考练习 20

（七）任务拓展 21

任务二 创建我的第一个网站 21

（一）任务描述 21

（二）任务目标 21

（三）知识准备 22

知识准备 创建和管理站点的基础知识 22

（四）任务实施 24

（五）任务评价 32

（六）思考练习 32

（七）任务拓展 33

项目二 创建“太湖美”网站 34

一、项目简介 34

二、项目目标 34

三、工作任务 34

任务一 初识HTML 34

（一）任务描述 34

（二）任务目标 35

（三）知识准备 35

知识准备一 HTML的基本概念 35

知识准备二 HTML的常用标签介绍（1） 41

（四）任务实施 47

（五）任务评价 53

（六）思考练习 54

（七）任务拓展 54

任务二 编辑代码、丰富页面 54

（一）任务描述 54

（二）任务目标 54

（三）知识准备 55

知识准备 HTML的常用标签介绍（2） 55

（四）任务实施 57

（五）任务评价 63

（六）思考练习 63

（七）任务拓展 64

项目三 创建“姑苏美食”网站（一） 65

一、项目简介 65

二、项目目标 65

三、工作任务 65

任务一 编辑文本和图像 65

（一）任务描述 65

（二）任务目标 66

（三）知识准备 66

知识准备一 CSS样式 66

知识准备二 字体属性 72

知识准备三 文本属性 76

（四）任务实施 78

（五）任务评价 91

（六）思考练习 92

（七）任务拓展 92

任务二 创建超级链接 93

（一）任务描述 93

（二）任务目标 94

（三）知识准备 94

知识准备一 超链接的样式 94

知识准备二 超链接的类型 94

知识准备三 列表标签 96

知识准备四 列表属性 97

（四）任务实施 101

（五）任务评价 110

（六）思考练习 110

（七）任务拓展 111

项目四 创建“古诗文网” 112

一、项目简介 112

二、项目目标 112

三、工作任务 112

任务一 构建网页结构 112

（一）任务描述 112

（二）任务目标 113

（三）知识准备 113

知识准备一 了解Web标准化 113

知识准备二 认识DIV和DIV布局 114

知识准备三 理解CSS盒模型 115

知识准备四 认识HTML5中结构化元素 117

（四）任务实施 117

（五）任务评价 122

（六）思考练习 122

（七）任务拓展 123

任务二 定义网页布局样式 123

（一）任务描述 123

（二）任务目标 124

（三）知识准备 124

知识准备一 了解CSS的继承性 124

知识准备二 熟悉网页布局中的常用CSS样式属性 124

知识准备三 网页布局的基本形式 126

知识准备四 float属性 126

（四）任务实施 130

（五）任务评价 149

（六）思考练习 149

（七）任务拓展 150

项目五 变换的CSS之个人博客 151

一、项目简介 151

二、项目目标 151

三、工作任务 151

任务一 个人博客之简约商务风 151

（一）任务描述 151

（二）任务目标 153

（三）知识准备 153

知识准备一 在网页中插入CSS样式表的几种方法 153

知识准备二 DIV＋CSS之id与class 155

知识准备三 DIV＋CSS命名规则 155

（四）任务实施 156

（五）任务评价 170

（六）思考练习 170

（七）任务拓展 170

任务二 个人博客之中国风 171

（一）任务描述 171

（二）任务目标 172

（三）知识准备 172

知识准备 CSS的优先级机制 172

（四）任务实施 173

（五）任务评价 179

（六）思考练习 179

（七）任务拓展 180

项目六 创建“美食交流”网站 182

一、项目简介 182

二、项目目标 182

三、工作任务 182

任务一 创建表单 182

（一）任务描述 182

（二）任务目标 182

（三）知识准备 183

知识准备一 表单 183

知识准备二 表单控件 185

（四）任务实施 195

（五）任务评价 205

（六）思考练习 206

（七）任务拓展 206

任务二 验证表单 207

（一）任务描述 207

（二）任务目标 207

（三）知识准备 208

知识准备一 JavaScript常用全局对象 208

知识准备二 Windows常用对象方法 209

知识准备三 JavaScript表单验证典型案例 210

（四）任务实施 212

（五）任务评价 215

（六）思考练习 215

（七）任务拓展 216

项目七 建设“快乐花店”网站（模板应用） 217

一、项目简介 217

二、项目目标 217

三、工作任务 217

任务一 制作模板网页 217

（一）任务描述 217

（二）任务目标 218

（三）知识准备 218

知识准备一 了解模板的概念和作用 218

知识准备二 Dreamweaver CC中4种模板区域 219

知识准备三 模板网页的制作方式 220

知识准备四 模板网页制作要点 221

（四）任务实施 223

（五）任务评价 228

（六）思考练习 228

（七）任务拓展 228

任务二 基于模板制作网站首页和子页 229

（一）任务描述 229

（二）任务目标 230

（三）知识准备 230

知识准备一 创建基于模板的网页方式 230

知识准备二 模板管理的要点 231

（四）任务实施 233

（五）任务评价 239

（六）思考问题 239

（七）任务拓展 239

项目八 创建“全瀚通信”网站 240

一、项目简介 240

二、项目目标 240

三、工作任务 240

任务一 DIV＋CSS布局完成网站首页及分页 243

（一）任务描述 243

（二）任务目标 243

（三）知识准备 244

知识准备一 网站规划及制作流程 244

知识准备二 快速获取美工图的颜色及布局大小 245

知识准备三 DIV和Table 246

知识准备四 溢出文本隐藏并显示为省略号 247

（四）任务实施 248

（五）任务评价 264

（六）思考练习 264

（七）任务拓展 264

任务二 应用模板完成网站子栏目 264

（一）任务描述 264

（二）任务目标 265

（三）知识准备 265

知识准备一 block、inline和inline-block概念和区别 265

知识准备二 清除浮动使DIV高度自适应 266

知识准备三 Bootstrap模态框（Modal）插件 267

知识准备四 百度地图API 268

（四）任务实施 268

（五）任务评价 281

（六）思考练习 282

（七）任务拓展 282

任务三 浮动框架完成网站后台 282

（一）任务描述 282

（二）任务目标 283

（三）知识准备 283

知识准备一 CSS position的绝对定位与相对定位 283

知识准备二 DIV水平居中且垂直居中 283

知识准备三 浮动框架iframe 285

（四）任务实施 285

（五）任务评价 301

（六）思考练习 302

（七）任务拓展 302

附录 304