《HTML5+CSS3网页设计与制作实用教程》单元一 站点创建与制作商品简介页面
使用HTML5和CSS3创建现代网站的技巧
使用HTML5和CSS3创建现代网站的技巧章节一：HTML5基础HTML5是用于创建现代网站的标准化语言。
它提供了众多的新特性和标签，使得网页内容更加丰富且易于维护。
本章将介绍一些常用的HTML5特性和标签，并讨论如何合理地应用它们。
1.1 语义化标签HTML5引入了一系列的语义化标签，例如<article>、<header>、<footer>等，它们用于标识网页的结构和内容。
通过使用这些标签，不仅可以提高搜索引擎的识别能力，还可以使代码更具可读性和可维护性。
1.2 表单增强HTML5为表单元素提供了许多新的属性和类型，其中包括<input type="email">、<input type="date">等。
利用这些属性和类型，我们可以更方便地验证用户输入，并提供更好的用户体验。
1.3 多媒体内容嵌入HTML5允许直接在网页中嵌入音频和视频内容，无需使用第三方插件，提高了网页的兼容性和加载速度。
通过使用<video>和<audio>标签，我们可以方便地控制媒体的播放，同时还可以添加字幕、章节和交互功能。
章节二：CSS3技巧CSS3是用于为网页增添样式和交互效果的技术。
本章将介绍一些常用的CSS3特性和技巧，以及如何利用它们来创建现代化的网页设计。
2.1 盒模型和布局CSS3引入了新的盒模型（box-sizing）属性，解决了传统盒模型在计算宽度和高度时的一些问题。
此外，利用弹性布局（flexbox）和网格布局（grid）等新的布局技术，我们可以更方便地实现响应式设计和栅格化布局。
2.2 渐变和阴影效果通过使用CSS3的渐变（gradient）和阴影（box-shadow）效果，我们可以为网页元素添加立体感和层次感，使得设计更加丰富和吸引人。
2.3 过渡和动画CSS3的过渡（transition）和动画（animation）属性使得在网页中添加平滑的过渡效果和动画效果变得轻而易举。
第一章 HTML5+CSS3网页设计概述
超文本标签语 言（第一版）
HTML2.0
HTML3.2
HTML4.0
HTML4.01
在1993年6月作 为互联网工程 工作小组（ IETF）工作草 案发布。
1995年11月作 为RFC 1866发 布，在RFC 2854于2000年 6月发布之后被 宣布过时。
1997年1月14日， W3C推荐标准。
本章将从网页概述、网页制作入门以及常用的制作软件等几个方面详 细讲解网页的基础知识。
✎ 1.1 网页概述
什么是网页？
✎ 1.1 网页概述
浏览新闻
查询信息
说到网页，其
实大家并不陌生
网上购物
网页究竟是什么？
✎ 1.1 网页概述
网页可以看做承载各种网站应用和
信息的容器，所有可视化的内容都会通 过网页展示给用户。
✎ 1.2 网页制作技术入门
1.2.1 HTML
概述 HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”， 主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
超链接
文本 图片
✎ 1.2 网页制作技术入门
1.2.1 HTML
概述 HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”， 主要是通过HTML标签对网页中的文本1.1 认识网页
静态网页
动态网页
➢ 用户无论何时何地访问，网
➢ 显示的内容则会随着用户操
静 动 页都会显示固定的信息，除
作和时间的不同而变化。
非网页源代码被重新修改上
➢ 动态网页可以和服务器数据
传。
混 合 库进行实时的数据交换。
网页设计与制作案例教程(HTML5+CSS3) 第1章网页基础
1.3 基础项目2：制作“陈欧介绍”网页
WEB
11
1.3 基础项目2：制作“陈欧介绍”网页 知识技能目标
（1）了解Dreamweaver工作界面，熟练掌握创建站点及网页的方法。 （2）初识超链接，能够为当前网页添加指向同站点内其它页面的超链接。 （3）了解HTML语言和CSS样式基本书写格式。 （4）掌握<style>标签的使用方法，能够使用<style>标签创建内部样式表。
网站程序开发
1.2.1 网 站 开 发 流 程
后 期 测 试 发 布
页面效果 链接有效性
浏览器兼容性 网站发布
视觉效果、布局、内容、亲 和力、易操作…… 所有链接是否都跳转正常、 所有页面是否均可到达…… 在各主流浏览器下均能正常 显示
本地发布、远程发布
测试过程通常也伴随着优化过程，优化是尽可能地减小网页文件的体积及日后发生错误的机率。
更改界面颜色
1.4.4 使用Dreamweaver CC 2018的几个小技巧 实时预览 快速更改代码（Ctrl+E） 同时编辑多行代码
WEB
13
1.5 提高项目：制作“青春颂歌”网页
14
1.6 拓展项目：制作“支付”网页
15
4
1.2 知识库：网页基础知识
1.2.1 网 站 开 发 流 程
前期准备
中期制作
后期测试 发布
WEB
5
1.2.1 网 站 开 发 流 程
前期准备 需求分析 确定主题 确定网站架构 收集素材 设计页面 导出效果图切片
功能分析、目标用户分析、内容分析等
1.2.1 网 站 开 发 流 程
中期制作
创建站点 静态页面制作
HTML5+CSS3网页设计与制作单元1 站点创建与制作商品简介页面
③ 显示或隐藏【属性】面板的另一种简便方法
双击【属性】面板左上角的“属性”标题，就会隐藏属性面板。属性面板隐藏时，单击 该“属性”标题，就会显示属性面板。
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
（8）面板组 Dreamweaver CC 包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成
了面板组，如图1-12 所示。 ① 显示面板的方法：单击【窗口】菜单选择相应的菜单选项，如图1-13 所示。 ② 显示或隐藏各个面板的另一简便方法：双击面板的标题，如图1-14所示。
▲▲▲
【任务1-1-1】启动Dreamweaver CC与初识其工作界面
任务描述
①启动Dreamweaver CC。 ② Dreamweaver CC 的工作界面主要包括菜单栏、工具栏、文档窗口、属性面板、面板组 等，熟悉Dreamweaver CC 工作界面各个组成部分的主要功能。
任务实施
1．启动Dreamweaver CC 执行【开始】→【所有程序】→【Adobe Dreamweaver CC】菜单命令， 即可启动 Dreamweaver CC。Dreamweaver CC 的启动画面如图1-2 所示。启动成功后，会出现图 1-3 所示的工作界面。
目录导航
渐进训练
任务 1-1 制作电脑版商品简介页面0101.html
探索训练
任务 1-2 制作触屏版商品简介页面0102.html
析疑解惑 单元小结
任务 1-1 制作电脑版商品简介页面0101.html 任务描述
制作电脑版商品简介页面 0101.html，其浏览效果如图1-1 所示。
图1-1 网页0101.html 的浏览效果
（5）【标准】工具栏 【标准】工具栏中包含网页文档的基本操作按钮，例如【新建】【打开】【保存】【剪切】
HTML5+CSS3网站设计实战开发HTML5+CSS3网站设计制作电商网站首页面
第10章实战开发—制作电商网站首页面《HTML5+CSS3网站设计基础教程》学习目地/Target掌握站点地建立,能够建立规范地站点。
了解切图工具,能够运用切片裁切效果图。
完成首页面地制作,并能够实现简单地CSS3动画效果。
网站项目电商网站首页面该怎样开发一个网站项目呢？定义一个存放网站零散文件地文件夹。
这样,可以形成明晰地站点组织结构图。
建立站点对页面进行布局,并添加CSS样式。
搭建页面效果图分析Ø"站点"系统地管理HTML网页文件,图片,CSS样式表等网站文件。
Ø建立站点就是定义一个存放网站零散文件地文件夹。
Ø站点对于网站本身地上传维护,内容地扩充与移植都有着重要地影响。
1.建立站点创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step41.建立站点在电脑本地磁盘任意盘符下创建网站根目录。
这里在D盘"HTML+CSS网页制作"文件夹下新建一个文件夹作为网站根目录,命名为chapter10。
1.建立站点1.建立站点打开网站根目录chapter10,在根目录下新建css与images文件夹,分别用于存放网站所需地CSS样式表与图像文件。
打开Dreamweaver工具,在菜单栏选择站点→新建站点选项,输入站点名称。
然后,浏览并选择站点根目录地存储位置,如图所示。
1.建立站点点击"保存"按钮,这时,在Dreamweaver 工具面板组可查看到站点地信息,表示站点创建成功,如图所示。
1.建立站点1.网站根目录文件夹下创建HTML文件,命名为index.html。
2.在CSS文件夹内创建对应地样式表文件,命名为index.css。
2.站点初始化建立HTML结构分析CSS 样式分析背景颜色均为通栏显示,因此各个模块地宽度都可设置为100%。
精细地分析页面,不难发现大部分字体大小为14px,样式为微软雅黑。
网页设计与制作实践 第5版 模块1 创建站点与制作商品简介网页
【任务1-1-1】启动Dreamweaver与初识其工作界面
7
面 板 组 ： Dreamweaver 包 “文件”面板：网站是多个网页文件、图像文件、程序文件等有机联 括多个面板，这些面板都有 系的整体，要有效地管理这些文件及其联系，需要一个有效的工具， 不同的功能，将它们叠加在 “文件”面板便是这样的工具。 一起便形成了面板组。
5
Dreamweaver工作界面的布局与组成如图所示。
标题栏：显示网页的标题和网页文档 的存储位置。
菜 单 栏 ： Dreamweaver 的 菜 单 栏 包 含10类菜单：“文件”“编辑”“查 看”“插入”“修改”“格式”“命 令”“站点”“窗口”和“帮助”。
“插入”面板：显示“插入”面板的 方法是：选择“窗口”→“插入”， 在 Dreamweaver 主 界 面 的 右 侧 将 显 示“插入”面板。
HTML5+CSS3网页设计与制作实践（项目式）（第5版）
模块1 创建站点与制作商品简介网页
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式 表文件、网页素材进行统一管理。
1 学会新建网页文档和设置网页的页面属性
学习目标
2 学会在网页中插入空格、文本换行符和特殊字符
熟悉浏览器窗口的基本组成元素和网页的基本组成 3
浏览器是用户浏览网页的软件，支持多种具有交互性的网络服 务，是人们通过网络进行交流的主要工具。目前流行的浏览器为 Chrome、Firefox等。
【任务1-1-2】认识浏览器窗口的基本组成和网页的基本组成元素 9
浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成。Internet Explorer（简称IE）浏览器窗口如图1所示，Chrome浏览器窗口如图2所示。
HTML5+CSS3网页设计与制作单元1 站点创建与制作商品简介页面
可以是文本、按钮或图片，鼠标指向超级链接位置时，其指针会变成小手形状。
（5）导航栏 导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方
便地浏览网页。导航栏一般有4 种常见的布局位置：页面的左侧、右侧、顶部和底部。
图1-23 【管理站点】对话框
1．利用【管理站点】对话框创建一个名称为“快乐购”的站点
在【管理站点】对话框中单击右下角的【新建站点】按钮，打开图1-24 所示【站点设置对 象】对话框。参照“任务1-1-3”所述的步骤创建一个名称为“快乐购”的站点，该站点创建完 成后，包含两个站点的【管理站点】对话框如图1-25 所示。
本章导读
The chapter’s introduction
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、 样式表文件、网页素材进行统一管理。如果使用了外部文件，Dreamweaver 就会自 动检测并提示是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹 或文件重新命名，系统会自动更新所有的链接，以保证原有链接关系的正确性。
任务描述
①在本地硬盘（例如D 盘）中创建一个文件夹“网页设计与制作案例”。 ②创建一个名称为“易购网”的站点，保存在文件夹“网页设计与制作案例”中。
任务实施
1．创建所需的文件夹 在本地硬盘（例如D 盘）中创建一个文件夹“网页设计与制作案例”。
2．创建站点“易购网”
在Dreamweaver CC 的主界面中，选择【站点】→【新建站点】菜单命令，如图1-20 所 示，打开图1-21 所示的【站点设置】对话框。
2．认识网页的基本组成元素
HTML5+CSS3网页设计入门
HTML5+CSS3网页设计入门HTML5HTML5是一种网络标准语言，用于编写网页。
它是HTML4的升级版本，具有更多的功能和标签，也更适合多媒体和移动设备。
HTML5 拥有以下重要的新功能：语义化标签语义化标签传达了更多的信息，有助于搜索引擎优化(SEO)。
这些标签清晰、明确地表示页面的内容。
常见的语义化标签有<header>、<nav>、<main>、<article>和<footer>等。
视频、音频标签HTML5引入了<video>和<audio>标签，使得直接在网页中添加视频和音频内容变得更加容易。
而且，这些标签也提供了许多的API，比如跳过、暂停和控制视频的播放速度。
画布标签<canvas>是HTML5中最强大的新标签之一。
它提供了一种2D绘图环境，可以使用脚本来绘制图形、动画、游戏界面等。
地图、位置标签HTML5包含了Geolocation API，可以获取设备的位置信息。
<map>标签可用于创建地图，而<a>、<b>和<i>则可用于在地图上创建链接、突出区域和标记。
这使得创建富媒体应用变得更为容易。
表单标签HTML5拓展了表单标签：新增了日期、时间、搜索、电子邮件、URL等类型的输入框，以及<input type=\"range\">、<input type=\"color\">等新标签。
这大大提高了表单的交互性和用户体验。
CSS3CSS是层叠样式表的缩写，用于描述HTML文档的样式和布局。
CSS3是CSS 的最新版本，引入了许多新的特性。
下面是CSS3中的一些特性：渐变CSS3允许在背景中创建渐变。
可以为一个元素创建径向渐变或线性渐变。
径向渐变从一个点开始，向四周渐变。
线性渐变则是从一个方向过渡到另一个方向。
HTML5+CSS3网页设计案例教程课程设计 (2)
HTML5+CSS3网页设计案例教程课程设计简介本课程设计的主要目的是帮助初学者掌握HTML5和CSS3的基础知识，并通过实际案例的设计来提高其实践能力。
通过本课程设计的学习，学生可以熟悉网页设计的基本流程和开发工具，了解网页设计中的一些常用技术和技巧。
学习内容HTML5基础1.HTML5简介：历史背景、新特性和优势。
2.HTML5语法：标签、属性、注释等基础语法。
3.HTML5标签：文本标签、超链接标签、HTML5表单元素、媒体标签等。
4.HTML5语义化：了解HTML5的语义化，编写具有可读性和可维护性的HTML代码。
5.HTML5实例：通过实例练习HTML5的基本语法和标签使用。
CSS3基础1.CSS3简介：历史背景、新特性和优势。
2.CSS3选择器：元素选择器、ID选择器、类选择器、属性选择器等。
3.CSS3样式：文本样式、字体样式、背景样式、布局样式等。
4.CSS3盒子模型：内容、内边距、边框、外边距的组合和应用。
5.CSS3动画效果：过渡、变换、动画等CSS3新特性。
案例实战通过案例实战来巩固学生的HTML5和CSS3基础知识，并提高其实践能力。
1.公司主页设计：学生根据公司主页需求编写HTML5和CSS3代码，设计主页，包括公司概述、产品介绍、联系方式等模块。
2.个人博客设计：学生根据博客需求编写HTML5和CSS3代码，设计个人博客，包括博客首页、博客文章列表、博客文章详细页面等模块。
3.电商网站设计：学生根据电商需求编写HTML5和CSS3代码，设计电商网站，包括商品列表、商品详情、购物车、收银台等页面。
实验环境1.编辑器：Sublime Text、Atom、Visual Studio Code等。
2.浏览器：Chrome、Firefox、Safari等。
3.网站开发框架：Bootstrap、Vue.js、React等。
4.公共资源库：jQuery、Font Awesome、Animate.css等。
HTML5与CSS3网页设计技巧分析
HTML5与CSS3网页设计技巧分析目录一、HTML5与CSS3的概述二、HTML5网页设计技巧1.语义化制作网页2.响应式设计3.使用新的表单元素三、CSS3网页设计技巧1.变形特效2.渐变与阴影效果3.动画效果四、总结一、HTML5与CSS3的概述HTML5和CSS3是当前网页设计中最常用的两种技术。
HTML5是一种标记语言，用于建立网页，具有语义化、多媒体支持等特点；CSS3是一种样式语言，用于控制网页的样式和布局，具有更加灵活和丰富的样式效果。
HTML5和CSS3的结合使用可以提高网页的视觉效果和用户体验。
下面将介绍HTML5和CSS3在网页设计中的技巧。
二、HTML5网页设计技巧1.语义化制作网页HTML5中引入了一些新的语义化标签，如<header>、<footer>、<nav>、<section>、<article>等。
这些标签用于定义页面的不同部分，使页面的标记更容易理解，也有利于SEO优化。
另外，HTML5中还引入了一些新的属性和元素，例如<video>、<audio>等。
这些元素可以使页面更加多媒体化，提升用户体验。
2.响应式设计响应式设计可以使网页在不同设备上自适应，以满足不同用户的需求。
HTML5中引入了一些新的元素和属性，如<meta>标签和<viewport>属性等，可以方便地实现响应式设计。
另外，HTML5还支持Canvas和SVG等绘图技术，使得网页可以实现更加高级的绘图功能，如3D绘图、动态图形等。
3.使用新的表单元素HTML5中为表单元素引入了一些新的属性和类型，如<datalist>、<keygen>、<color>、<date>、<time>等。
这些新的属性和类型可以使表单更加简洁易懂，用户填写表单更加方便。
HTML5 CSS3网页设计与制作教学大纲
多媒体
27
设计与制作电脑版网站首页0801.html
规划与设计电脑版网站首页的主体布局结构
设计与实现电脑版网站首页的导航结构
设计网站首页的主体布局结构和导航结构
2
计算机
28
设计与制作电脑版网站首页0801.html
设计与实现电脑版网站首页的各个局部版块内容
实现网站首页各个局部版块内容
2
计算机
29
设计与制作电脑版网站首页0801.html
2
计算机
18
设计与制作电脑版商品筛选页面0501.html
布局与美化商品筛选页面的右侧主体内容
对商品筛选页面左侧内容的布局与美化
2
计算机
19
设计与制作电脑版商品推荐页面0601.html
规划与设计商品推荐页面的布局结构
制作用于生成网页模板的网页0601.html
制作用来生成模板的网页
2
计算机
20
制作基于模板的电脑版商品推荐页面0602.html
规划与设计商品筛选页面的布局结构
学会使用使用Div+CSS结构布局页面
2
计算机
16
设计与制作电脑版商品筛选页面0501.html
规划与设计商品筛选页面的布局结构
学会使用使用Div+CSS结构布局页面
2
计算机
17
设计与制作电脑版商品筛选页面0501.html
布局与美化商品筛选页面的左侧列表内容
利用CSS样式美化页面元素
创建帮助导航栏
设置多种文本形式的超链接
2
计算机
7
设计与制作电脑版帮助信息页面0201.html
创建电子邮件链接、图像热点链接等多种形式的超级链接
HTML5+CSS3网页设计基础 第一章 网页设计基础
HTML5+CSS3网页设计HTML5页面
本节主要内容：
案例分析
用记事本编辑网页
用HBuilder编辑网页
HTML5+CSS3网页设计基础
第1章 网页设计基础
第7页
1.3.1 案例分析
【案例展示】设计一个简单的页面，包含了网页标题文字 和一行文本信息，本例文件1-1.html在IE浏览器中的浏览 效果如图1-3所示。 【知识要点】HTML文档的结构、创建网页、保存网页与 浏览网页。 【学习目标】掌握使用记事本和HBuilder创建、保存和 浏览网页的方法。
HTML5+CSS3网页设计基础
第1章 网页设计基础
第13页
1.4.2 CSS的层叠和继承性
1. <!doctype>声明：<!DOCTYPE> 声明必须是 HTML 文档的第一 行，位于 <html> 标签之前。 2. <html>文档标签：<html>标记位于<!doctype>标记之后，也称为 根标记，表示HTML文档的开始。 3. <head>头标签：<head>标签用于定义HTML文档的头部信息，紧 跟在<html>标签之后。 4. 文档编码：HTML5文档使用meta元素的 charset属性指定文档编 码，格式为：<meta charset="UTF-8"> 5. <title>标题标签：<title>标签用来定义文档的标题。 6. <body>主体标签：<body>标记用于定义HTML文档所要显示的内 容。
使用HTML5和CSS3进行现代网页设计入门
使用HTML5和CSS3进行现代网页设计入门一、HTML5的基本概念和作用HTML5（HyperText Markup Language version 5）是一种用于构建和呈现网页内容的标准语言。
相较于之前的HTML版本，HTML5引入了许多新的特性和功能，使得网页设计更加灵活、丰富和交互性更强。
HTML5的作用主要是用于定义网页的结构和内容。
通过使用HTML5标签和元素，开发者可以轻松地将文本、图像、视频、音频等内容插入到网页中，并通过合理的布局和结构使其呈现出吸引人的页面效果。
二、HTML5的主要特性和标签1. 语义化标签：HTML5引入了一系列的语义化标签，用于对网页内容进行结构化定义。
例如，header、nav、section、article、footer等标签使得网页结构更加清晰，有助于搜索引擎的识别和优化。
2. 多媒体支持：HTML5通过video和audio标签，使得在网页中插入视频和音频变得更加便捷。
通过定义相关属性，可以控制媒体的播放、音量、自动播放等行为。
3. Canvas绘图：HTML5的canvas标签可以在网页中创建一个画布，并且通过JavaScript脚本进行绘制。
这使得开发者可以通过编写自定义的绘图代码实现更加灵活和复杂的图形效果。
4. 表单增强功能：HTML5在表单方面也进行了增强，通过引入新的input类型和属性，如email、tel、number、date等，使得用户输入验证和表单处理更加便捷和准确。
5. 本地存储：HTML5提供了localStorage和sessionStorage两种本地存储方式，可以在浏览器端存储和读取数据。
这对于用户在离线状态下依然可以正常访问网页的应用程序非常有益。
三、CSS3的基本概念和作用CSS3（Cascading Style Sheets 3）是用于描述网页样式和布局的标准样式表语言。
与之前的CSS版本相比，CSS3引入了许多新的特性和模块，使得网页设计更加绚丽、多样化和交互性更强。
HTML5+CSS3网页设计与制作案例教程
随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。
在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。
本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。
本章学习目标◎ 了解互联网、因特网、万维网的关系和区别。
◎ 了解网站、网页和HTML的基本概念。
◎ 了解静态网页和动态网页的区别和联系。
◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。
◎ 能够安装并使用浏览器查看网页。
◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。
◎ 了解网页开发所使用的基本技术和工具。
HTML5+CSS3网页设计与制作案例教程在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的认识。
1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)互联网指由若干计算机网络相互连接而成的网络。
进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。
互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。
因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。
因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。
但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。
Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。
万维网是指环球信息网，英文全称为World Wide Web，简称WWW。
HTML5+CSS3网页设计实例教程-第1章-网页设计新时代(2024版)
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第11页
传统HTML与XHTML
标记语言在我们的日常计算中无处不在。在传统的文字处 理文档中，用于描述结构与外观的标记代码常常不是后台 编码的。在Web文档中，传统HTML和XHTML（XHTML 是HTML基于XML语法规则建立的标记语言）的标记代码 是明显可见的。这些非后台的标记语言能够将Web页面的 结构与外观传递给Web浏览器。
设计网页首先要关注不同用户如何使用Web。有些人使用 不同的设备或低速的Web连接；有些人只使用键盘；有些 人使用屏幕阅读器阅读Web页面；有些人听不到音频内容 。因此要熟悉形形色色的Web用户。不要只是假设所有人 都用相同的模式在使用Web。
HTML5给Web网页的可访问性带来的更广泛的便利。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第8页
结构化文档的Web
可以把Web想象成一个由文档组成的大海，文档之间相互 关联，并且与日常生活中遇到的打印文档有着很多相似性
新闻网站中文章的结构与报纸上的文章结构类似。每一篇 文章包含标题、文本段落以及一些图片（有时可能以视频 代替图片）。相同点非常明显，而唯一的不同就是，在报 纸上可以在一个版面上拥有多篇故事，而在网页上每篇故 事则倾向于独占一个页面。新闻网站还经常使用首页显示 新闻头条以及故事梗概。
在编写Web页面时，HTML代码会告知Web浏览器需要显 示的信息结构，即什么文本放在标题、段落或表格中等， 从而浏览器能够恰当地将其呈现给用户。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第9页
主要内容
1.1 WEB网页设计原则 1.2 HTML5概述 1.3 HTML5页面的特征 1.4 WEB网页设计基础 1.5 编写一个简单的Web页面 1.6 本章小结
网页设计与制作案例教程(HTML5 CSS3)素材
网页设计与制作案例教程（HTML5CSS3）素材本文旨在介绍《网页设计与制作案例教程（HTML5 CSS3）素材》的主题和背景。
本教程的主题是网页设计与制作案例教程，重点涵盖HTML5和CSS3素材的使用。
随着互联网的迅速发展，网页设计和制作变得越来越重要。
作为一种应用广泛的技术，HTML5和CSS3提供了丰富的功能和特性，可以使网页呈现出更加精美和交互性强的效果。
因此，研究和掌握HTML5和CSS3的使用对于提高网页设计和制作的质量和效果至关重要。
本教程将为读者提供一系列实际案例，展示如何利用HTML5和CSS3素材设计和制作各种类型的网页。
通过研究这些案例，读者将能够掌握重要的网页设计原理和技巧，提升自己的设计能力，并能够应用到实际项目中。
教程内容涵盖了HTML5和CSS3的基础知识、常用元素和样式以及高级特性的运用。
每个案例都包含了详细的步骤和说明，帮助读者理解和掌握相关的技术和方法。
希望通过本教程，读者可以研究到实用的网页设计和制作技巧，并能够应用到自己的项目中，提升自己的能力和竞争力。
本部分将介绍HTML5的基本概念和语法，包括标签、属性和元素的使用。
HTML5是一种用于构建网页的标记语言，它在HTML4的基础上进行了增强和改进。
HTML标签是HTML文档的基本结构元素，它们用于定义网页的内容和结构。
在HTML5中，标签可以包含属性，用于提供更多的信息和控制网页的呈现方式。
属性可以对标签进行设置，如字体、颜色、大小等。
除了标签和属性，HTML5还引入了一些新的元素，用于创建更丰富和动态的网页内容。
例如，``元素可以用于嵌入视频文件，``元素可以用于绘制图形等。
掌握HTML5的基本概念和语法是网页设计与制作的基础，它将为你提供开发高质量和现代化网页的能力。
待续。
本部分将介绍CSS3的基本概念和语法，包括选择器、属性和样式表的使用。
CSS3（Cascading Style Sheets 3）是一种用于描述网页样式的标记语言，它是CSS的最新版本。
HTML5+CSS3网页设计与制作实用教程单元5 网页布局与制作商品筛选页面
CSS代码
#l_sidebar .pagesort { border:1px solid #ccc; background:#f5f5f5; padding:0 4px 4px 4px; margin-bottom:10px; }
#l_sidebar .recommend { border:1px solid #a0dafe;
探索训练
任务 5-2 制作触屏版促销商品页面0502.html
Байду номын сангаас
析疑解惑 单元小结
任务 5-1 设计与制作电脑版商品筛选页面0501.html
任 务 描 述
设计与制作电脑版商品筛选页面 0501.html，其浏览效果如图5-1 所示。
▲▲▲
图5-1 网页0501.html 的浏览效果
【任务5-1-1】规划与设计商品筛选页面的布局结构
10 11 12 13 14 15 16 17 18
CSS代码
#l_sidebar { float:left; width:190px; }
##r_content { float:right; width:790px;
【任务5-1-1】规划与设计商品筛选页面的布局结构
表5-2 商品筛选页面0501.html 布局结构对应的CSS 样式代码 行号
单元5
网页布局与制作商品筛选页面
HTML5+CSS3网页设计与制作实用教程
本章导读
The chapter’s introduction
CSS 样式能更加方便有效地布局网页结构、控制网页元素。创建CSS 样式文件， 可以实现“创建一次、使用多次”的目的，从而大大提高了网页排版的效率，而且保 证网站具有一致的整体风格。 使用HTML+CSS 进行网页布局，能够真正做到Web 标准所要求的网页内容与表 现相分离，CSS 代码可以更好地控制元素定位，使用外边距、边框、颜色等属性可以
《网页设计与制作案例教程 》教案 第5课 HTML5与CSS3基础(一)
第课HTML5与CSS3基础（一）5课题HTML5与CSS3基础（一）课时2课时（90 min）教学目标知识技能目标：（1）认识HTML5（2）了解HTML5的基本语法（3）熟悉HTML5文档结构（4）能够使用Dreamweaver CC设置网页内容思政育人目标：（1）掌握网页制作语言的基础知识，学习语法规则，养成良好的工作习惯。
（2）练习制作网页，培养自己的钻研精神。
教学重难点教学重点：HTML5文档结构教学难点：使用Dreamweaver CC设置网页内容教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：课前任务→考勤（2 min）→问题导入（5 min）→传授新知（28 min）→课堂抢答（10 min）第2节课：任务实施（25 min）→实践探索（15 min）→课堂小结（3 min）→作业布置（2 min）教学过程主要教学内容及步骤设计意图第一节课课前任务⏹【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解HTML5⏹【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤（2 min）⏹【教师】使用文旌课堂APP进行签到⏹【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5 min）⏹【教师】提出以下问题：你知道什么是HTML吗？HTML5又是什么？⏹【学生】聆听、思考、举手发言通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知（28 min）⏹【教师】通过学生的发言，引入新的知识点，介绍HTML5的基本语法和文档结构一、HTML5简介【教师】展示利用HTML编写的网页，帮助学习理解使用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统。
浏通过讲解、课堂互动等教学方式，让学生了解HTML5的基础知识、基本语法和文档结构第课HTML5与CSS3基础（一）52览器能够识别并解析这些文档。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
▲▲▲ 图1-2 Dreamweaver CC 的启动画面 图1-3 Dreamweaver CC 的工作界面
▲▲▲
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
图1-4 Dreamweaver CC 的界面布局与组成
③ 显示或隐藏【属性】面板的另一种简便方法
双击【属性】面板左上角的“属性”标题，就会隐藏属性面板。属性面板隐藏时，单击 该“属性”标题，就会显示属性面板。
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
（8）面板组 Dreamweaver CC 包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成
单元1
站点创建与制作商品简介页面
HTML5+CSS3网页设计与制作实用教程
工业和信息化人才培养规划教材 高职高专计算机系列 国家精品资源共享课程配套教材
本章导读
The chapter’s introduction
制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、 样式表文件、网页素材进行统一管理。如果使用了外部文件，Dreamweaver 就会自 动检测并提示是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹 或文件重新命名，系统会自动更新所有的链接，以保证原有链接关系的正确性。
图1-9 显示【标准】工具栏的快捷菜单
2．熟悉Dreamweaver CC工作界面的基本组成及其功能 （6）“文档”窗口 “文档”窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的 共同体。用户可以在文档工具栏中单击【代码】【拆分】或者【设计】按钮，切换窗口视图。 （7）【属性】面板 【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。 属性面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，属性面板上将出现 该图像的对应属性，如图1-10 所示。
图1-10 【属性】面板
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
① 关闭【属性】面板
单击【属性】面板右上角的图标，在弹出的下 拉菜单中单击【关闭】菜单命令，如图1-11 所示， 【属性】面板将被关闭。
图1-11 关闭【属性】面板的菜单
② 打开【属性】面板
在Dreamweaver CC 主界面中，选择菜单命令【窗口】→【属性】即可。
图1-5 “常用”插入工具栏按钮
图1-6 【插入】工具栏的类型
2．熟悉Dreamweaver CC工作界面的基本组成及其功能 （4）【文档】工具栏 【文档】工具栏中包含用于切换文档窗口视图的“代码”“拆分”“设计”“实时视图” 按钮和一些常用操作，如图1-7 所示。
图1-7 【文档】工具栏
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
（3）【插入】工具栏
显示【插入】工具 栏的方法是：选择菜单 命令【窗口】→【插 入】，在Dreamweaver CC 的主界面的右侧将显 示【插入】工具栏。通 常情况下会显示“常用” 插入工具栏，如图1-5 所 示。
利用【插入】工具栏可以快速插入多种网页 元素，例如div 标签、图像、表格、表单和表单 控件等。在【插入】工具栏类型列表中单击菜 单选项，即可切换不同类型的插入工具栏，如 图1-6 所示。
目录导航
渐进训练
任务 1-1 制作电脑版商品简介页面0101.html
探索训练
任务 1-2 制作触屏版商品简介页面0102.html
析疑解惑 单元小结
任务 1-1 制作电脑版商品简介页面0101.html 任务描述
制作电脑版商品简介页面 0101.html，其浏览效果如图1-1 所示。
图1-1 网页0101.html 的浏览效果
网页中的基本组成元素有文字、图像和动画等，网页中的信息主要是通过文字来 表达的，文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、 存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。在 Dreamweaver CC中输入文本与在Word 中输入文本很相似，都可以对文本的格式进 行设置。图像也是网页中的主要元素之一，图像不但能美化网页，而且能够更直观地 表达信息。在页面中恰到好处地使用图像，能使网页更加生动、形象和美观。Fra bibliotek▲▲▲
【任务1-1-1】启动Dreamweaver CC与初识其工作界面
任务描述
①启动Dreamweaver CC。 ② Dreamweaver CC 的工作界面主要包括菜单栏、工具栏、文档窗口、属性面板、面板组 等，熟悉Dreamweaver CC 工作界面各个组成部分的主要功能。
任务实施
1．启动Dreamweaver CC 执行【开始】→【所有程序】→【Adobe Dreamweaver CC】菜单命令， 即可启动 Dreamweaver CC。Dreamweaver CC 的启动画面如图1-2 所示。启动成功后，会出现图 1-3 所示的工作界面。
（5）【标准】工具栏 【标准】工具栏中包含网页文档的基本操作按钮，例如【新建】【打开】【保存】【剪切】
【复制】【粘贴】等按钮，如图1-8 所示。
图1-8 【标准】工具栏
【提示】
如果【标准】工具栏处于隐藏状态，可以在已显示工 具栏位置单击右键，弹出图1-9 所示的快捷菜单，在该快捷 菜单中选择【标准】命令即可显示【标准】工具栏。
▲▲▲
2．熟悉Dreamweaver CC工作界面的基本组成及其功能
（1）标题栏 标题栏显示网页的标题和网页文档的存储位置。
（2）菜单栏 Dreamweaver CC 的菜单栏包含10 类菜单：【文件】【编辑】【查看】【插入】
【修改】【格式】【命令】【站点】【窗口】和【帮助】，如图1-4 所示。菜单按功能的不 同进行了合理的分类， 使用起来非常方便，各个菜单的具体作用和操作方法在以后各单元 中将会具体说明。除了菜单栏外，Dreamweaver CC 还提供了多种快捷菜单，可以利用它 们方便地实现相关操作。