项目一 创建网站“绿色家园”(网页初识)…………1
一、项目简介 …………1
二、项目目标 …………1
三、工作任务 …………1
任务一 初识 Dreamweaver 2021…………1
(一)任务描述 …………1
(二)任务目标 …………1
(三)知识准备 …………2
知识准备一 了解网页和网站的基础知识…………2
知识准备二 Dreamweaver 2021 软件介绍 …………11
(四)任务实施…………14
(五)任务评价 …………20
(六)思考练习 …………20
(七)任务拓展…………20
任务二 创建网站“绿色家园” …………21
(一)任务描述 …………21
(二)任务目标…………21
(三)知识准备 …………21
知识准备 创建和管理站点的基础知识 …………21
(四)任务实施…………24
(五)任务评价 …………32
(六)思考练习 …………32
(七)任务拓展…………33
项目二 创建网站“太湖之美”(HTML入门)…………34
一、项目简介 …………34
二、项目目标 …………34
三、工作任务 …………34
任务一 初识 HTML …………34
(一)任务描述 …………34
(二)任务目标…………35
(三)知识准备 …………35
知识准备一 HTML的基本概念 …………35
知识准备二 HTML的常用标签介绍(1)…………41
(四)任务实施…………47
(五)任务评价…………53
(六)思考练习 …………53
(七)任务拓展 …………53
任务二 编辑代码、丰富页面 …………53
(一)任务描述 …………53
(二)任务目标…………54
(三)知识准备 …………54
知识准备 HTML的常用标签介绍(2)…………54
(四)任务实施…………56
(五)任务评价 …………62
(六)思考练习 …………62
(七)任务拓展…………63
项目三 创建网站“姑苏美食”(样式入门) …………64
一、项目简介 …………64
二、项目目标…………64
三、工作任务 …………64
任务一 编辑文本和图像 …………64
(一)任务描述 …………64
(二)任务目标…………65
(三)知识准备 …………65
知识准备一 CSS样式 …………65
知识准备二 字体属性 …………71
知识准备三 文本属性 …………74
(四)任务实施…………77
(五)任务评价 …………87
(六)思考练习 …………87
(七)任务拓展 …………88
任务二 创建超级链接 …………88
(一)任务描述 …………88
(二)任务目标 …………89
(三)知识准备…………89
知识准备一 超链接的样式 …………89
知识准备二 超链接的类型 …………89
知识准备三 列表标签 …………91
知识准备四 列表属性 …………92
(四)任务实施…………95
(五)任务评价 …………105
(六)思考练习 …………105
(七)任务拓展 …………106
项目四 创建网站“古诗文网”(页面布局)…………107
一、项目简介 …………107
二、项目目标 …………107
三、工作任务 …………107
任务一 构建网页结构…………107
(一)任务描述 …………107
(二)任务目标 …………108
(三)知识准备 …………108
知识准备一 了解Web标准化 …………108
知识准备二 认识 DIV和 DIV布局 …………108
知识准备三 理解 CSS盒模型 …………110
知识准备四 认识 HTML5中结构化元素 …………111
(四)任务实施 …………112
(五)任务评价 …………115
(六)思考练习 …………116
(七)任务拓展 …………116
任务二 定义网页布局样式…………117
(一)任务描述 …………117
(二)任务目标 …………117
(三)知识准备 …………117
知识准备一 了解 CSS的继承性 …………117
知识准备二 熟悉网页布局中的常用CSS样式属性 …………118
知识准备三 网页布局的基本形式…………120
知识准备四 float 属性…………120
(四)任务实施 …………123
(五)任务评价 …………141
(六)思考练习 …………141
(七)任务拓展 …………142
项目五 创建网站“个人博客”(样式应用)…………143
一、项目简介 …………143
二、项目目标 …………143
三、工作任务 …………143
任务一 个人博客之简约商务风…………143
(一)任务描述 …………143
(二)任务目标 …………145
(三)知识准备 …………145
知识准备一 在网页中插入 CSS 样式表的几种方法 …………145
知识准备二 DIV+CSS的id与class …………146
知识准备三 DIV+CSS命名规则 …………147
(四)任务实施 …………147
(五)任务评价 …………160
(六)思考练习 …………160
(七)任务拓展 …………161
任务二 个人博客之中国风…………161
(一)任务描述 …………161
(二)任务目标 …………162
(三)知识准备 …………162
知识准备 CSS的优先级机制…………162
(四)任务实施 …………163
(五)任务评价 …………168
(六)思考练习 …………168
(七)任务拓展 …………169
项目六 创建网站“美食交流”(表单应用)…………171
一、项目简介 …………171
二、项目目标 …………171
三、工作任务 …………171
任务一 创建表单…………171
(一)任务描述 …………171
(二)任务目标 …………171
(三)知识准备 …………172
知识准备一 表单…………172
知识准备二 表单控件…………174
(四)任务实施 …………184
(五)任务评价 …………193
(六)思考练习 …………194
(七)任务拓展 …………194
任务二 验证表单…………195
(一)任务描述 …………195
(二)任务目标 …………195
(三)知识准备 …………195
知识准备一 JavaScript常用全局对象 …………195
知识准备二 Windows常用对象方法…………197
知识准备三 JavaScript 表单验证典型案例 …………198
(四)任务实施 …………201
(五)任务评价 …………203
(六)思考练习 …………203
(七)任务拓展 …………204
项目七 创建网站“快乐花店”(模板应用)…………205
一、项目简介 …………205
二、项目目标 …………205
三、工作任务 …………205
任务一 制作模板网页…………205
(一)任务描述 …………205
(二)任务目标 …………206
(三)知识准备 …………206
知识准备一 了解模板的概念和作用…………206
知识准备二 Dreamweaver 2021中4种模板区域…………207
知识准备三 模板网页的制作方式…………208
知识准备四 模板网页制作要点…………209
(四)任务实施 …………210
(五)任务评价 …………215
(六)思考练习 …………215
(七)任务拓展 …………216
任务二 基于模板制作网站首页和子页…………216
(一)任务描述 …………216
(二)任务目标 …………217
(三)知识准备 …………217
知识准备一 创建基于模板的网页方式…………217
知识准备二 模板管理的要点…………218
(四)任务实施 …………219
(五)任务评价 …………224
(六)思考问题 …………224
(七)任务拓展 …………225
项目八 创建网站“全瀚通信”(综合实训)…………226
一、项目简介 …………226
二、项目目标 …………226
三、工作任务 …………226
任务一 DIV+CSS布局完成网站首页及分页 …………228
(一)任务描述 …………228
(二)任务目标 …………228
(三)知识准备 …………230
知识准备一 网站规划及制作流程…………230
知识准备二 快速获取美工图的颜色及布局大小…………230
知识准备三 DIV 和表格…………231
知识准备四 溢出文本隐藏并显示为省略号…………232
(四)任务实施 …………233
(五)任务评价 …………239
(六)思考练习 …………239
(七)任务拓展 …………239
任务二 应用模板完成网站子栏目…………239
(一)任务描述 …………239
(二)任务目标 …………240
(三)知识准备 …………240
知识准备一 block、inline 和 inline -block 的概念和区别…………240
知识准备二 清除浮动使 DIV高度自适应 …………241
知识准备三 Bootstrap 模态框(Modal)插件 …………242
知识准备四 百度地图 API…………243
(四)任务实施 …………243
(五)任务评价 …………253
(六)思考练习 …………254
(七)任务拓展 …………254
任务三 浮动框架完成网站后台…………254
(一)任务描述 …………254
(二)任务目标 …………254
(三)知识准备 …………255
知识准备一 CSS position 的绝对定位与相对定位 …………255
知识准备二 DIV水平居中且垂直居中…………255
知识准备三 浮动框架 iframe …………256
(四)任务实施 …………257
(五)任务评价 …………263
(六)思考练习 …………263
(七)任务拓展 …………264
项目九 创建网站“菲菲服饰”(Bootstrap 应用) …………266
一、项目简介 …………266
二、项目目标 …………266
三、工作任务 …………266
任务一 制作网站首页…………267
(一)任务描述 …………267
(二)任务目标 …………267
(三)知识准备 …………268
知识准备一 了解 Bootstrap的概念和作用 …………268
知识准备二 Bootstrap栅格系统和文字排版…………269
知识准备三 重要组件：按钮(Button)…………273
知识准备四 重要组件：导航条(Navbar)…………274
知识准备五 重要插件：图片轮播(Carousel)…………275
(四)任务实施 …………276
(五)任务评价 …………284
(六)思考练习 …………285
(七)任务拓展 …………285
任务二 制作“设计师”网页 …………285
(一)任务描述 …………285
(二)任务目标 …………286
(三)知识准备 …………286
知识准备一 重要组件：标签(Label) …………286
知识准备二 重要组件：小图标(Glyphicons)…………286
(四)任务实施 …………288
(五)任务评价 …………291
(六)思考练习 …………291
(七)任务拓展 …………292
任务三 制作“产品展示”网页 …………292
(一)任务描述 …………292
(二)任务目标 …………292
(三)知识准备 …………292
知识准备一 重要插件：标签页(Tab) …………292
知识准备二 重要组件：缩略图(Thumbnails)…………294
知识准备三 重要插件：模态框(Modal) …………296
(四)任务实施 …………297
(五)任务评价 …………303
(六)思考问题 …………303
(七)任务拓展 …………304
附录…………305

徐云晴，女，无锡旅游商贸高等职业技术学校信息系主任，主编《网页设计与制作》《计算机英语》《第三方电子商务平台应用-独立网店建设与管理》《中小企业网站建设静态篇》《中小企业网站建设动态篇》等教材。