《网页设计与制作项目式教程：HTML5+CSS3+ Bootstrap》简介
《网页设计与制作项目式教程：HTML5+CSS3+ Bootstrap》这本书是由.周礼萍，刘开芬，曹小平主编创作的,《网页设计与制作项目式教程：HTML5+CSS3+ Bootstrap》共有104章节
1
前言
PREFACE 自进入Web 2.0以来，各类Web应用大量涌现，极大地提升了各行业的信息化水平，为人们的日常生活提供了更多便利。伴随着Web应用的发展，Web...
2
目录
目 录 前言 第一章 网页设计概述及基础知识 项目一 制作第一个简单的网页 任务一 用Word制作自己的第一个网站 任务二 用Excel制作自己的第一个网站 项...
3
第一章 网页设计概述及基础知识
(https://www.daowen.com)...
4
项目一 制作第一个简单的网页
项目要求 项目展示 Word制作的网页如图1.1所示，Excel制作的网页如图1.2所示。 图1.1 Word制作的网页 图1.2 Excel制作的网页 ...
5
任务一 用Word制作自己的第一个网站
任务要求 （1）使用“插入表格”按钮。 （2）使用“表格”菜单下“插入表格”命令。 （3）取消表格边框线。(https://www.daowen.com) （4...
6
任务二 用Excel制作自己的第一个网站
任务要求 （1）使用Office 2010 Excel新建文档，命名“我的第一个网页”。 （2）在sheet1做出班级名册，并命名为“课程表”。 （3）在she...
7
项目二 局域网发布网站
项目要求 项目展示 在局域网中发布网站预览如图2.1所示。(https://www.daowen.com) 图2.1 在局域网中发布网站预览 项目训练...
8
任务一 通过IIS在局域网中发布网页
方法： （1）启动IIS（Internet信息服务管理器），如图2.1.1所示。在Internet信息服务窗口中选取“网站”，右击鼠标之后在弹出的菜单里选择“添...
9
任务二 运用WebServer在局域网中发布网页
方法： （1）打开Quick’n Easy Web Server工具，启动Web Server，如图2.2.1所示。 图2.2.1 启动Quick’n Eas...
10
项目三 互联网发布网站
项目要求 教学内容(https://www.daowen.com) 要把网站发布到互联网上，首先需要有空间和域名，而且要知道空间的IP、FTP账号和密码，有了...
11
任务一 在互联网上发布网站
方法： （1）进入网站http://free.3v.do，点击免费空间申请，进行注册，如图3.1.1、3.1.2所示。 图3.1.1 free.3v.do网站...
12
第二章 HTML基础
(https://www.daowen.com)...
13
项目四 HTML文档结构
项目要求 项目展示 用记事本编写网页如图4.1所示。记事本编写个人简历如图4.2所示。 图4.1 记事本编写网页 图4.2 记事本编写个人简历 教学内容 ...
14
任务一 打开记事本编写html文件
任务要求 （1）用记事本书写我们的第一个HTML 页面！ （2）新建一个401.TXT文件。 （3）里面写入刚才的HTML 骨架。(https://www.da...
15
任务二 使用编辑器编辑html文件
任务要求 （1）打开HBuilder，新建—— 文件，保存为402.html。 （2）title里面内容为“自我介绍”。 （3）在HBuilder界面输入如图4...
16
项目五 文字排版标签
项目展示 文本排版作品展示如图5.1所示。 VS Code安装 图5.1 文本排版作品展示 教学内容 常用标签 1. 标题标签 HTML提供了6个等级的标...
17
任务一 使用常见标签进行文字排版
任务要求 （1）新建501.html文件。 （2）运用常见标签〈p〉、〈h〉、〈hr〉对文字进行排版，如图5.1.1所示。 （3）保存并预览效果。(https:...
18
任务二 运用文本格式化标签进行文字排版
任务要求 （1）打开501.html制作的网页文件，另存为502.html。 （2）运用〈strong〉〈/strong〉〈b〉〈/b〉〈del〉〈/del〉〈...
19
项目六 图像标签和路径
项目要求 项目展示 作品展示如图6.1、6.2所示。 图6.1 作品展示一 图6.2 作品展示 二 教学内容 1. 常用图像格式 （1）GIF格式。GIF最...
20
任务一 图像标签及属性练习
任务要求 （1）新建601.html文件。 （2）根据提供的图片素材，制作成品，如图6.1.1所示。 （3）在页面中插入指定图片。(https://www.da...
21
任务二 相对路径练习
任务要求 （1）新建文件602.html。 （2）图片和HTML为同级目录时插入图像。 （3）图片为HTML下一级文件夹内时插入图像。 （4）图片为HTML上一...
22
任务三 绝对路径练习
任务要求 （1）使用绝对路径定位链接目标。 （2）学会在网上找到喜欢的图片的链接地址。 方法： （1）打开百度网站，搜索“中国国产党建党100周年”。 （2）找...
23
项目七 链接标签
项目要求 项目展示 部分作品展示如图7.1、7.2所示。 图7.1 部分作品展示一 图7.2 部分作品展示二 教学内容 1. 超链接的概念 链接标签 一...
24
任务一 链接标签及属性练习
任务要求 （1）新建文件701.html。 （2）输入文字：“百度一下（外部链接地址：http://www.baidu.com）搜狐新浪（外部链接地址：http...
25
任务二 制作“永川周末好去处”页面
任务要求 （1）新建文件702.html，复制素材。 （2）运用图片相对地址进行插图，要求图02、图002、图06～09设置宽度500px、高度280px。 （...
26
任务三 制作工匠人物介绍页面
任务要求 （1）新建703.html文档。 （2）输入〈h1〉标签文字“致敬，大国工匠！”。 （3）用链接标签分别插入文字“高凤林”“李万君”“夏立”“王进”。...
27
任务四 扩展练习—— 东京奥运会冠军介绍
任务要求 （1）参考任务三完成下列东京奥运会冠军介绍案例。 （2）首页结构如图7.4.1所示。 （3）链接子页面，要求当前页人物名字体加粗，对应人物小图片加上像...
28
项目八 锚点链接
项目展示 页面展示如图8.1、8.2所示。 图8.1 仿百度百科钱学森页面 图8.2 影视剧剧情介绍 教学内容 1. 锚点的概念 (https://www....
29
任务一 制作锚点链接
任务要求 （1）打开702.html，另存为801.html。(https://www.daowen.com) （2）对主要景点与景点介绍创建锚点链接。 设置锚...
30
任务二 制作仿百度百科，钱学森专栏
任务要求 （1）新建文件802.html。 （2）运用素材进行文字语义化排版。 （3）插入图片“qxs.jpg”，设置图片“水平左对齐”、高度为“170像素”。...