网页设计与制作项目教程(HTML+CSS+Bootstrap)(第2版)

目 录

项目一创建网站“绿色家园”（网页初识）

一、项目简介

二、项目目标

三、工作任务

任务一 初识Dreamweaver 2021.

（一）任务描述

（二）任务目标

（三）知识准备

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

知识准备二 Dreamweaver 2021软件介绍

（四）任务实施·

（五）任务评价

（六）思考练习

（七）任务拓展

任务二创建网站“绿色家园”

（一）任务描述

（二）任务目标

（三）知识准备

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

（四）任务实施

（五）任务评价

（六）思考练习

（七）任务拓展

项目二创建网站“太湖之美”（HTML入门）

一、项目简介

二、项目目标

三、工作任务·

任务一初识HTML

（一）任务描述

（二）任务目标

（三）知识准备

知识准备一HTML的基本概念

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

（四）任务实施

（五）任务评价

（六）思考练习

（七）任务拓展

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

（一）任务描述·

（二）任务目标

（三）知识准备

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

（四）任务实施

（五）任务评价

（六）思考练习

（七）任务拓展

项目三创建网站“姑苏美食”（样式入门）

一、项目简介

二、项目目标

三、工作任务

任务一 编辑文本和图像

（一）任务描述

（二）任务目标

（三）知识准备

知识准备一 CSS样式

知识准备三字体属性

知识准备三文本属性

（四）任务实施

（五）任务评价·

（六）思考练习

（七）任务拓展

任务二创建超级链接

（一）任务描述

（二）任务目标

（三）知识准备

知识准备一超链接的样式

知识准备二超链接的类型

知识准备三列表标签

知识准备四 列表属性

（四）任务实施

……

项目九 创建网站“菲菲服饰”（Bootstrap 应用）

一、项目简介

二、项目目标

三、工作任务

任务一制作网站首页

（一）任务描述

（二）任务目标

（三）知识准备

知识准备一了解Bootstrap的概念和作用

知识准备二 Bootstrap栅格系统和文字排版

知识准备三 重要组件：按钮（Button）

知识准备四重要组件：导航条（Navbar)

知识准备五 重要插件：图片轮播（Carousel)

（四）任务实施

（五）任务评价

（六）思考练习

（七）任务拓展

任务二制作“设计师”网页

（一）任务描述

（二）任务目标

（三）知识准备

知识准备一 重要组件：标签（Label)

知识准备二 重要组件：小图标(Glyphicons)

（四）任务实施

（五）任务评价

（六）思考练习

（七）任务拓展

任务三制作“产品展示”网页

(一）任务描述

(二）任务目标

（三）知识准备

知识准备一 重要插件：标签页（Tab）

知识准备二 重要组件：缩略图（Thumbnails)

知识准备三重要插件：模态框（Modal）

（四）任务实施

（五）任务评价

（六）思考问题

（七）任务拓展

附录

本教程主要面向网页设计与制作的入门者，尽量选择了贴近当前市场上网站前端开发的主流技术，以Dreamweaver 2021作为学习平台，以项目为教材内容的组织形式，以网站前端开发的一般流程作为项目主线编写而成。本教程共9个项目和3个附录。通过每个项目的学习，读者都能创建一个完整的网站。每一个项目都是以网站开发的完整流程展开的，同时，项目的设计又突出体现了各个项目的学习重点，前后项目既相对独立，又相互联系。