PPT
【文档说明】HTML5+CSS3任务驱动教程课件.pptx，共(322)页，12.028 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-92597.html
以下为本文档部分文字说明：
模块一网页设计基础知识HTML5+CSS3任务驱动教程目录任务一任务二任务三DreamweaverCC2017的安装网站的建立网页的基本知识HTML5+CSS3任务驱动教程引入知识点任务1DreamweaverCC2017的安装1.1Dreamweav
erCC2017的新增功能HTML5+CSS3任务驱动教程1.1DreamweaverCC2017的新增功能1．全新的代码编辑器2．开发人员工作区3．CSS预处理器支持4．实时浏览器预览5．HTML文档中的快速CSS编辑任务1DreamweaverCC2017的安装HTM
L5+CSS3任务驱动教程1.1DreamweaverCC2017的新增功能6．快速CSS文档7．用于重复任务的多个光标8．新式UI（UserInterface，用户界面）9．UI颜色主题任务1DreamweaverCC2017的安装HTML5+CSS3任务驱动教程任务实现（1）下载
AdobeDreamweaverCC2017安装文件压缩包，进行解压，双击里面的Set-up.exe文件。（2）双击后，开始安装任务1DreamweaverCC2017的安装HTML5+CSS3任务驱动教程任务实现（3）安装后，打开DreamweaverCC2017软件，出现其操作界
面，执行“文件”→“新建”命令，创建一个HTML5模板任务1DreamweaverCC2017的安装HTML5+CSS3任务驱动教程任务实现（4）单击“创建”按钮，即可创建成功任务1DreamweaverCC2017的安装HTML5+CSS3任务驱动教程引入知识点任务2网站的建立1.2网页
、网站、首页1.3静态网页和动态网页1.4IP地址、域名和URLHTML5+CSS3任务驱动教程任务2网站的建立1.2网页、网站、首页1．网页网页（WebPage）是一种网络信息传递的载体，是构成网站的基本元素，同时是
承载各种网站应用的平台，可以简单地认为：网站就是由网页组成的。用户需要通过浏览器来浏览网页，从网页中获得相关信息。网页本身就是一个文件，网页中可以有文字、图像、音频及视频等信息，它存放在世界某个角落的某台计算机中，如果想访问或者浏览它，这台计算机必须与互联网相
连。HTML5+CSS3任务驱动教程任务2网站的建立1.2网页、网站、首页2．网站网站（WebSite）由网页组成，因此，网站就是一个存放网络服务器上的完整信息的集合体。它是由单个或者多个网页组成的集合，如Google、新浪，以及一些政府机关、企事业单位和个人网站等。
HTML5+CSS3任务驱动教程任务2网站的建立1.2网页、网站、首页3．首页首页（HomePage）是一个特殊的网页，它作为一个单独的网页时，和一般网页一样，可以存放一些相关信息，同时，它也可以作为整个网站的起始点和汇总点。首页和主页的区别
在于：在建立网站时，通常会将信息分类并建立一个网页，放置网站相关信息的目录，也就是主页。但是，不是所有的网站都会将主页设置为首页，一些网站还会将动画放在首页上，并将主页链接放在首页上，用户需要单击链接进而进入主页。HTML5+CSS3任务驱动教程任务2网站的建立1.3静态网页和动态网
页1．静态网页静态网页也称平面页，其文件名通常以.htm、.html、.shtml、.xml（可扩展标记语言）等为后缀。用户只能被动地浏览网页设计者提供的网页内容，网页内容不会发生变化（除非网页设计者修改了网页的内容）。静态网页不能实现和浏览网页的用户之间的交互，其
信息流向是单向的。HTML5+CSS3任务驱动教程任务2网站的建立1.3静态网页和动态网页静态网页的特点如下：（1）静态网页的每个页面都有一个固定的URL（UniformResourceLocator，统一资源定位符），且网
页的URL以.htm、.html、.shtml等常见的形式为后缀；（2）静态网页内容一经发布到网站服务器上，无论是否有用户访问，都是保存在网站服务器上的，也就是说，静态网页是保存在服务器上的文件，每个静态网页都是一个独立的文件；（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；H
TML5+CSS3任务驱动教程任务2网站的建立1.3静态网页和动态网页（4）静态网页没有数据库的支持，在网站维护方面比较麻烦，因此当网站信息量很大时，完全依靠静态网页的网站制作方式比较困难；（5）静态网页的交互性较差
，在功能方面有很大的限制；（6）静态网页页面浏览速度很快，整个过程无须链接数据库，开启页面的速度快于动态页面；（7）静态网页减轻了服务器的负担，工作量较少，降低了数据库的成本。HTML5+CSS3任务驱动教程任务2网站的建立1.3静态网页和动态网页2．动态网页动态网页，
是指与静态网页相对应的一种网页编程技术。动态网页显示的内容是可以随着时间、环境或者数据库操作的结果而发生改变的。从某种意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程生成的网页都是动态网页。动态网页能与后台
数据库进行交互和数据传递，动态网页的URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见格式，而是.aspx、.asp、.jsp、.php、.perl、.cgi等形式。在动态网页网址中有一个标志性的符号——“?”。动态网页一般由服务器端和客户端实现交互。HTML5+CS
S3任务驱动教程任务2网站的建立1.3静态网页和动态网页服务器端是一个在Web服务器上运行的程序（服务器端脚本），用来改变不同网页上的网页内容，或调节序列，或重新加载网页。服务器端的响应用来确定各种情况，例如，超文本标记语言表单里面的数据，URL中的参数，所使用的浏览器类型，数
据库、服务器的状态等。客户端就是浏览器端，客户端脚本完全在浏览器中运行，并控制着用户与浏览器之间的交互，同时，客户端的源代码一般都可以看到，其对最终访问用户相对公开。HTML5+CSS3任务驱动教程任务2网站的建立1.3静态网
页和动态网页动态网页的特点如下：（1）动态网页一般以数据库技术为基础，可以大大降低维护网站的工作量；（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理等；（3）动态网页实际上并不是独立存在于服务器的网页文件，只有当用户请求时，服务器才返回
一个完整的网页；（4）动态网页中的“?”，在搜索引擎检索时存在一定问题。搜索引擎一般不可能从一个网站的数据库中访问全部网页，出于技术方面的考虑，搜索时其不会抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时，需要进行一定的技术处理
才能适应搜索引擎的要求。HTML5+CSS3任务驱动教程任务2网站的建立1.4IP地址、域名和URL1．IP地址每个连接到互联网上的主机都会被分配一个IP地址，IP地址是用来唯一标识互联网上计算机的逻辑地址，机器之间
的访问就是通过IP地址来进行的。目前IPv4版本的IP地址采用32位二进制数的形式表示。为了便于使用，IP地址经常被写成十进制数的形式，每8位二进制数用“.”分开，称为“点分十进制表示法”，如192.168.0.1。HTML5+CSS3任务驱动教程任务2网站的建立1.
4IP地址、域名和URL2．域名IP地址毕竟是数字标识，使用时不好记忆和书写，因此在IP地址的基础上又发展出一种符号化的地址方案，来代替数字型的IP地址。域名是由一串用点分隔的名字组成的互联网上某一台计算机或计算机组的
名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。网域名称系统（DomainNameSystem，DNS）简称域名系统，是互联网中的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使用户更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址
数串，如www.baidu.com。HTML5+CSS3任务驱动教程任务2网站的建立1.4IP地址、域名和URL3．URL统一资源定位符（URL），俗称网址。网址格式为：<协议>://<域名或IP>:<端口>/<路径>。其中，<协议>://<域名或IP>是必需的，<端口>/<路
径>有时可省略。如https://www.baidu.com/。HTML5+CSS3任务驱动教程任务2网站的建立1.5HTTP和FTP1．HTTPHTTP（HyperTextTransferProtocol）即超文本传输协议，它是Web的核心。HTTP是一种为了将
位于全球各个地方的Web服务器中的内容发送给不特定的多数用户而制定的协议。HTTP用于从服务器端读取Web页面内容，从Web浏览器下载Web服务器中的HTML文档及图像文件等，并临时保存在个人计算机硬盘及内存中以供显示。2．FTPFTP（FileTra
nsferProtocol）即文件传输协议，它是互联网上使用非常广泛的一种通信协议，是为了互联网上的用户进行文件传输（包括文件的上传和下载）而制定的。HTML5+CSS3任务驱动教程任务实现任务2网站的建立（1）打开DreamweaverCC2017，执行“站点”→“新建站
点”命令HTML5+CSS3任务驱动教程任务实现任务2网站的建立（2）在弹出的“站点设置对象test”对话框中，根据个人喜好设置站点名称和本地站点文件夹的路径，然后单击“保存”按钮，新建本地站点文件夹H
TML5+CSS3任务驱动教程任务实现任务2网站的建立（3）新建站点后，若没有显示面板，可以执行“窗口”→“显示面板”命令。打开“文件”选项卡，可以看到新建的本地站点文件夹。HTML5+CSS3任务驱动教程任务实现任务2网
站的建立（4）成功创建一个站点，效果如图所示。HTML5+CSS3任务驱动教程1.6网页的基本结构任务3网页的基本知识1．导航栏导航栏是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单。导航栏设计的目的是将站点内的信息分类处理，然后放在网页中以帮助用户快速查找站内信息。同
时，导航栏的形式多种多样，包括文本导航栏、图像导航栏及动画导航栏等。2．栏目栏目是指网页中存放相同性质内容的区域。在对网页内容进行布局时，把性质相同的内容安排在网页的相同区域，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。3．正文内容正文内容
是指网页中的主体内容。例如，对于文章类的网页，正文内容就是文章本身；而对于展示产品的网页，正文内容就是产品信息。HTML5+CSS3任务驱动教程1.7网页的基本内容任务3网页的基本知识1．网站logo2．Banner3．内容模块4．版尾或版权模块5．文本6．图片7．超链接8．动画9．声音1
0．表格11．表单HTML5+CSS3任务驱动教程1.8网页的表现任务3网页的基本知识网页的表现是指网页对信息在显示上的控制，如版式、颜色、大小等样式上的控制。好的表现会使用户在浏览页面时更加舒适。HTML5+CSS3任务驱动教程1.9网页的行为任务3网页的基本知识网页的行为也就是网
页的交互操作，既可以从网页上获得所需的信息，也可以把自己的一些观念信息、见解和意见传递出去与其他人交流。HTML5+CSS3任务驱动教程1.10网页的Web标准任务3网页的基本知识网页的Web标准不是某一个标准，而是一系
列标准的集合。Web标准由万维网联盟（W3C）制定，分为结构标准、表现标准、行为标准和代码标准。HTML5+CSS3任务驱动教程1.10网页的Web标准任务3网页的基本知识1．结构标准（1）可扩展标记语言（ExtensibleMar
kupLanguage，XML）和HTML一样，XML同样来源于标准通用标记语言，可扩展标记语言和标准通用标记语言都是能定义其他语言的语言。XML设计的最初目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述
。（2）可扩展超文本标记语言（ExtensibleHyperTextMarkupLanguage，XHTML）虽然XML的数据转换能力强大，大多数情况下完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在
HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单地说，建立XHTML的目的就是实现HTML向XML的过渡。HTML5+CSS3任务驱动教程1.10网页的Web标准任务3网页的基本知识2．表现标准层叠样式表（CSS）：W
3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现语言。纯CSS布局与结构式XHTML相结合能帮助网页设计者分离外观与结构，使站点的访问及维护更加容易。HTML5+CSS3任务驱动教程1.10网页的Web标准任务3网
页的基本知识3．行为标准文档对象模型（DocumentObjectModel，DOM）：根据W3C的DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器、平台、语言的接口，使用户可以访问页面上其他的标准组件。简单地说，DOM解决了Netscape的JavaScri
pt和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们能访问他们站点中的数据、脚本和表现层对象。4．代码标准代码标准包括结束标记、大小写元素、嵌套、属性、特殊符号、属性赋值以及注释等。HTML5+CSS3任务驱动教程谢
谢模块二HTML5开发基础HTML5+CSS3任务驱动教程目录任务一任务二任务三写一个简单的HTML5页面设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程引入知识点2.1HTML简介2.2HTM
L文件的基本结构任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.1HTML简介HTML是一切网页实现的基础，在网络中浏览的网页都是一个个由HTML标记构成的文件。浏览器只要看到HTML源代码，就能解析成网页。HTML文
件本身是一种纯文本文件，我们可以使用任意一种文本编辑工具进行编写。比如，使用最简单的记事本工具，或Editplus、HBuilder、Sublime、InterlliJIDEA等文本编辑工具，或Dreamweaver可视化编辑工具编写。目前，最新的HTML文件是HTML5。任务1
编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.1HTML简介2.1.1HTML的定义HTML（HyperTextMarkupLanguage，超文本标记语言）是由W3C（WorldWideWebConsortium，万维网联盟）所提出的，是用于描述网页文档的一种标记语言，其主
要用途是制作网页。用HTML编写的超文本文档称为HTML文档，也叫网页。它能独立于各种操作系统平台。任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.1HTML简介2.1.2HTML的发展历史HTML（第一版）：在1993年6月作为互联网工程工作小组（IETF）工
作草案发布，并非标准。HTML2.0：1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时。HTML3.2：1996年1月14日，W3C推荐标准。HTML4.0：1997年12月18日，W3C推荐标准。HTML4.01（
微小改进）：1999年12月24日，W3C推荐标准。HTML5：2014年10月29日，W3C宣布，经过接近8年的艰苦努力，HTML5标准规范终于制定完成。任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.2HTML文件的基本结构
HTML文档包含标记和纯文本，它被Web浏览器读取并解析后以网页的形式显示出来。每个网页都有其基本的结构，包括HTML文档的结构，标记的语法格式，语法规范等。2.2.1HTML的语法格式HTML的语法结构
主要有标记、属性和元素组成，其基本语法格式如下：<标记名属性1=“属性值1”属性2=“属性值2”…>内容</标记名>任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.2HTML文件的基本结构1.标记HTML标记组成HTML文档的元素，每一个标记描述了一个功能。标记分为单标记
，双标记两种。（1）单标记：只需单独使用就能完整地表达意思，这类标记的基本语法格式如下：<标记名>（2）双标记：这类标记的基本语法格式如下：<标记名>内容</标记名>任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.2HTM
L文件的基本结构2.标记的属性使用HTML制作网页时，如果想让HTML标记提供更多的信息，可以使用HTML标记的属性来实现，许多单标记和双标记的始标记内可以包含一些属性。在HTML中，属性要在开始标记中指定，用来表示该标记的性质和特性。基本语法格式如下：<标记名属性1=“属性值1”属
性2=“属性值2”…>任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.2HTML文件的基本结构3.元素HTML（element）元素是由“标记（tag）”和“属性（attribute）”所组成，指的是从开始标记到结束标记的所有代码。
没有内容的HTML元素被称为空元素，空元素是在开始标记中关闭的。例如，以下代码片段所示：<p>欢迎来到广东创新科技职业学院信息工程学院</p><!--该p元素为有内容的元素-->任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.2HTML文件的
基本结构2.2.2HTML的文档结构HTML5文件的基本结构如下：<!doctypehtml><!--文档类型的声明--><html><!--文档的开始--><head><!--文档头部的开始--><title>此处是网
页标题</title><!--文档标题信息的开始和结束--></head><!--文档头部的结束--><body><!--文档主体的开始-->此处是网页文件内容</body><!--文档主体的结束--></h
tml><!--文档的结束-->任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程2.2HTML文件的基本结构2.2.3HTML的常用标记HTML5文档核心是HTML5标记，标记是用来实现网页元素的最小单位。学习HTML语言时，除要知道
HTML语言结构外，更多是学习掌握这些标记的使用方法。HTML语言的常用标记包含文件结构标记、文本段落标记、链接标记、表格标记、列表标记等等任务1编写一个简单的HTML5页面HTML5+CSS3任务驱动教程任务1编写一个简单的HTML5页面任务实现（1）创建一个HTML5页面。（3）该网页页
面显示的内容为“让我们开始HTML语言的新旅程！”。（2）该网页页面标题为“第一个HTML页面”。HTML5+CSS3任务驱动教程引入知识点任务2设置“在线学习网”的首页文件头部信息2.3页面的头部摘要信息HTML5+CSS3任务驱动教程
2.3页面的头部摘要信息在网页的头部<head>和</head>标记所包含的部分中，通常存放一些介绍页面内容的信息，例如页面标题、关键字、描述、页面大小，更新日期和网页快照等。其中，网页标题及页面描述称为网
页的摘要信息。如果希望自己发布的网页能被百度、谷歌等搜索引擎搜索到，在制作网页时就需要注意编写网页的摘要信息。接下来就介绍一下网页的摘要信息，<meta>标记如何去使用。任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.1<m
eta>标记元数据（metadata）是关于数据的信息。<meta>标记是页面头部部分中的一个辅助性标记，提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。任务2设置“在线学习网”的首页文件
头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.2<meta>标记属性<meta>设置的内容包括字符集、网页关键字、网页描述信息、页面的刷新及跳转等，这些内容都是通过设置meta标记的相应属性来实现。
任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.3使用<meta>设置页面字符集在HTML5中，有一个新的charset属性，它使字符集的设置更加简化。基本语法格式如下：<metacharset="字符集">例如
，下列代码告诉浏览器，网页使用字符集为utf-8，代码如下：<metacharset="utf-8">任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.4使用<meta>设置作者信息基本语法格式如下：<metaname="author
"content="作者的姓名">例如，将作者的姓名“李小茗”添加到网页的源代码中，代码如下：<metaname="author"content="李小茗">任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2
.3.5使用<meta>设置网页搜索关键字基本语法格式如下：<metaname="keywords"content="关键字1,关键字2,关键字3,…">例如，定义针对搜索引擎的关键字，代码如下：<metaname="keywords"content="网页制作,HTM
L,Dreamweaver">任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.6使用<meta>设置网页描述信息基本语法格式如下：<metaname="discription"
content="描述内容">例如，在网页中设置为网站设计者提供网页制作的说明信息，代码如下：<metaname="discription"content="这是一个网页制作等在线学习平台，拥有系统的前端和移动开发等课程。">任务2设置“在线学习网”
的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.7使用<meta>设置网页刷新时间基本语法格式如下：<metahttp-equiv="refresh"content="刷新间隔时间">例如，将网页设置为每隔10秒自动刷新，代码如下：<
metahttp-equiv="refresh"content="10">任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程2.3页面的头部摘要信息2.3.8使用<meta>设置网页自动跳转基本语法格式如下：<metahttp-equiv="re
fresh"content="刷新间隔时间";url="页面地址">例如，将网页设置10秒之后，网页自动跳转到中国大学慕课网站首页，代码如下：<metahttp-equiv="refresh"content="10";url="https://www.icourse16
3.org">任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程任务实现（1）设置制作的study.html页面的头部内容，该网页文档的标题为“在线学习网”。（3）添加页面作者信息，作者为“李小茗”。（2）设定网页字符集为“utf-8”。（4）设定页面关键字“
IT在线学习，IT在线教育，IT在线培训，IT精品课，移动端学习，HTML学习，PHP学习，Web前端学习，Python学习，数字媒体软件学习，多媒体软件培训”。任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教
程谢谢模块三文本与段落HTML5+CSS3任务驱动教程目录任务一任务二任务三文字的基本排版对文字进行加强描述使用块级元素和行内元素制作专业信息页面任务四任务五特殊符号的使用添加注释HTML5+CSS3任务驱动教程引入知识点任务1文字的基本排版3.2换行3.3预格式化3.
4水平线3.5各级标题3.1段落HTML5+CSS3任务驱动教程3.1段落在将页面中的文字标记为段落时，通常会使用<p>…</p>对文字进行标记，浏览器会自动地在段落的前后添加空行。并且这个标记必须要成对出现，在段落开始
处添加<p>，结束处添加</p>。例如：任务1文字的基本排版<p>这是一个段落</p>HTML5+CSS3任务驱动教程3.2换行任务1文字的基本排版在对HTML文档进行编辑时，回车键是不能实现换行功能的，若要实现
换行，则需要使用<br/>标记，在需要换行的位置添加<br/>即可。一个<br/>标记表示换一行，要实现换多行需要使用多个<br/>。虽然两个<br/>标记效果上和<p>标记类似，但是从文档结构上分析还是有所不同的，换行标
记不能视为描述文档结构的行为，若要实现段落，还应使用<p>标记。例如，对一段文字强制换行的代码如下：<p>截止至2014年8月底，我院图书馆纸质图书的馆藏量已经达到61.58万册，其中图书种类达104000余种，纸质报刊170余种。<br
/>随着学院规模的发展,根据《普通高等学校基本办学条件指标(试行)》中规定的生均图书册数的相关指标要求,我们将继续逐步分阶段地进行馆藏资源建设。同时图书馆正着手建设各种数据库资源，并探求馆际合作，为学院教学以及科研提供良好的信息资源保障。</p>HTML5+CSS3
任务驱动教程3.3预格式化任务1文字的基本排版在对HTML文档进行编辑时，有时会希望一些文本在浏览器中显示的效果就是在HTML文档中编辑的格式，这个时候我们可以使用<pre>来进行标记，这个标记也是成对出现的<pre></pre>，被这对标签括起来的文本通常会保留其空
格及一些换行等格式。我们以一段文字为例，具体使用方法如下：<pre>9月2日，2018级新生报到的日子，创新校园装扮一新，喜气洋洋。学校教务处、学生处、招生就业办等职能部门与7个二级院系在四大教学楼架空层集中设摊位供新生注册报到。校领导、工作
人员和志愿者周到热情地为前来报到的新生和家长亲友服务，确保每一个环节都畅通无阻。</pre>HTML5+CSS3任务驱动教程3.4水平线任务1文字的基本排版在浏览网页时会经常看到用水平线来分割文字类别或内容，在编辑HTML文档时我们可以使用<hr>来标记出一条横线，它和<br>一样
是一个空标记。我们以信工学院简介的样式为例来看一下横线标记的用法：<pre>信工学院简介</pre><hr/><pre>广东创新科技职业学院信息工程学院于2015年9月在计算机与通信系基础上组建。从2011年开始招生，经过五年的发展，现有在校学生2200多
名，已开设计算机应用技术、通信技术、计算机网络技术、软件技术、电子信息工程技术、动漫制作技术6个专业14个专业方向，2016年招收电信服务与营销专业。</pre>HTML5+CSS3任务驱动教程3.5各级标题任务1文字的基本排版在使用Word软件编辑文档时，经常会使用标题样式直接创建
不同样式的标题。在一段文字中，最基本的文本结构通常会分为不同等级的标题和正文，利用不同等级的标题使文字的结构更加清晰。HTML文档中包含6级标题，分别用<h1>~<h6>来标记，数字越大，字号越小，即<h1>标记字号最大的标题，<h6>标记字号最小的标题。设置这几个级别的标题的
代码如下：<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>HTML5+CSS3任务驱动教程具体任务任务1文字的基本排版（1）创建一个HTML5页面，为文档各个标题
添加不同级别的标题标记；（2）添加水平线分隔题目和主体内容；（3）使内容保留文档原有格式。HTML5+CSS3任务驱动教程任务实现任务1文字的基本排版（1）在DreamweaverCC2017中创建一个空白HTML5页面，保存为test.html，文档中包含<head>、<body>
等基本的HTML结构。代码如下：<!doctypehtml><html><head><metacharset="utf-8"/><title>文字基本样式设计</title></head><body></body></html>HTML5+CSS3任务驱动教程任务实现
任务1文字的基本排版（2）在<body>标记中，使用标题标记<h1>将标题名设置为一级标题，并利用<h3>将作者名等信息设置为三级标题：<h1align="center">报刊资源建设</h1><h3ali
gn="center"><b>时间：2018-04-08来源：作者：点击量：</b></h3>HTML5+CSS3任务驱动教程任务实现任务1文字的基本排版（3）添加一条水平线，使用<pre>标记添加原有格式的内（4）运行代码，得到如图所
示的效果。<hr/><pre>目前我馆征订有中外文报刊达520种，其中纸质报刊170余种，电子报刊350余种，免费报刊1307种。配置有触摸屏阅报机，同时开通试用博看期刊数据库，该数据库收录有3600多种40000多本人文类畅销报刊,每天更新期刊80-200种,可以较大程度地满足我院师生的相关信息
需求。</pre>HTML5+CSS3任务驱动教程3.6强调文本任务2对文字进行加强描述在对文本信息进行强调时，可以使用<b>、<strong>、<i>和<em>标记，其中<b>和<strong>对文本进行加粗处理，<i>和<em>对文本进行倾斜处理。1．<b>标记<b>标记能对文字进行加粗处理，
用来突出文字。此标记也是成对出现的，中间的文本即为要加粗处理的文本，其语法格式如下：<b>加粗突出文本</b>2．<strong>标记<strong>标记在HTML4.0中为加强强调文本（strongemphasizedtext），在HTML5中变为重
要文本（importanttext）。其语法格式如下：<strong>重要文本</strong>HTML5+CSS3任务驱动教程3.6强调文本任务2对文字进行加强描述3．<i>标记<i>标记原本用于使文本倾斜，现在主要用其来表
示一些与文本不同的部分内容。例如，外文及一些专业术语等，其语法格式如下：<i>斜体文本</i>4．<em>标记<em>标记在HTML5中表示强调文本（emphasizedtext），其语法格式如下<em>强调文本</em
>这4个突出文档内容的标记，从视觉上看，<b>和<strong>呈现出了文字加粗的效果，<em>和<i>呈现出了文字倾斜的效果，但从定义上看，四者存在着一定的区别。HTML5+CSS3任务驱动教程3.7作品标题任务2对文字进行加强描述在一段文字中有时会涉及一些作品名、书籍名、歌曲名及电视节目
名等标题，这时可以使用<cite>标记来处理。其语法格式如下：<p><cite>《高等数学》</cite>是大学生的必修课。</p>HTML5+CSS3任务驱动教程3.8小型文本任务2对文字进行加强描述在浏览网页时，会发现
在有的网页下方有一些注解或者版权等信息用小型文本进行呈现，一般使用<small>来标记小型文本，小型文本不会忽略文本的强调也不会降低重要性。其语法格式如下：<small>举报电话：010-XXXXXXX<
/small>HTML5+CSS3任务驱动教程3.9标记文本的更改任务2对文字进行加强描述在编辑HTML文档时，可以使用<ins>和<del>标记来描述文档的更新和修正。通常情况下两者会一起使用，<del>表示删除的文本，呈现出删除线，<i
ns>表示更改的文本，呈现出下画线。其语法格式如下：<del>删除的文本</del><ins>插入的更改文本</ins>HTML5+CSS3任务驱动教程3.10文本的上下标任务2对文字进行加强描述在对HTML文本编辑时，会
遇到设置文本上下标的情况。当然，上下标的设置在数学相关公式的编辑上比较常用，一般使用<sub>来标记文本下标，<sup>来标记文本上标。其语法格式如下：<sub>文本下标</sub><sup>文本上标</sup>HTM
L5+CSS3任务驱动教程3.11时间和日期任务2对文字进行加强描述日期标记是HTML5的新增标记，网页中会经常出现关于日期的信息，但是一直没有标准的方式去标记，<time>标记就是用来解决这个问题的，这个标记可以使其他搜索引擎较快、较便捷地获取到相关的时间信息。其语法格式如下：<ti
medatetime=""pubdate="">元素内容</time>其中，datetime属性用来定义元素的日期和时间，如果没有定义此属性，那么就要在元素内容中给出时间信息。pubdate属性是一个逻辑值，表示<time>元
素中的日期和时间是否就是文档的发布时间。此标记不会使不同的日期和时间元素有不同的显示形式，仅是方便其他搜索引擎获取相关的日期和时间信息。HTML5+CSS3任务驱动教程3.12其他相关元素任务2对文字进行加强描述除了上面提到的相关强调文本标记，还有一些标记可以使文本信息产生一定的效果，如表所
示。标记功能描述<dfn>定义一个定义项目<code>定义计算机代码文本<samp>定义样本文本<kbd>定义键盘文本<var>定义变量<blockquote>定义另一个源的块引用<q>定义一个短引用<
address>定义文档作者或者作者的联系信息<abbr>定义缩写形式<mark>定义带记号文本<m>定义突出显示文本HTML5+CSS3任务驱动教程具体任务任务2对文字进行加强描述（1）创建一个HTML页面，添加特定文
章中的相关文本内容；（2）对简介中的不同内容添加不同的强调标记以达到突出的效果。HTML5+CSS3任务驱动教程任务实现任务2对文字进行加强描述（1）在DreamweaverCC2017中创建一个空白的HTML5页面，保存为test.html，文档中包含<head>、<body>等基本
的HTML结构，并添加相关文本内容。<!doctypehtml><html><head><metacharset="utf-8"/><title>文本强调</title></head><body><palign="center">在大学
有个明确的目标很重要</p><palign="center">期次：第1期</p><p>大学是一个能锻炼自己、培养自己、证明自己的地方。但并非每个人都能得偿所愿，在大学里，我们会遇到来自五湖四海的老师和同学。大学里也充满了许多诱惑，一不小心就会堕落和迷失自己，在大学里，有个明确的目标很重要！在
平时看《时代》杂志时会希望自己也可以有个美丽的未来。</p></body></html>HTML5+CSS3任务驱动教程任务实现任务2对文字进行加强描述（2）对正文段落中的文本信息进行不同形式的突出，具体实现如下
：<body><palign="center"><b>在大学有个明确的目标很重要</b></p><palign="center"><em>期次：第1期</em></p><small><strong>大学</strong><i>是
一个能锻炼自己、培养自己、证明自己的地方。</i>但并非每个人都能得偿所愿，在大学里，我们会遇到来自五湖四海的老师和同学。大学里也充满了许多诱惑，一不小心就会堕落和迷失自己，在大学里，有个明确的目标很重要！在平时看<cite>《时代》</ci
te>杂志时会希望自己也可以有个美丽的未来。</small></body>其中，<b>和<strong>为文本加粗突出，<i>和<em>为文本倾斜突出，<cite>表示作品名称，<small>表示小型文本。HTML5+CSS3任务驱动教程任务
实现任务2对文字进行加强描述（3）运行代码，最终得到如图所示的效果。HTML5+CSS3任务驱动教程3.13块级元素任务3使用块级元素和行内元素制作专业信息页面块级（block）元素在浏览器中的显示就
像在其首尾部都有一个换行符一样，常见的块级元素如表所示。文档节div段落p围绕元素边框fieldset表格行tr视频video文档节section无序列表ul边框上标题legend表格单元格th媒介源source导航nav有序列表ol选择列表s
elect表格单元td文本轨道track页眉header项目li组合选择列表optgroup表格列属性col声音内容audio文章article列表dl选择列表选项option表格格式化列组colgroup换行br文章侧栏
aside列表项目dt下拉列表datalist内联框架iframe水平分割线hr页脚footer项目描述dd表格table媒介内容分组figure格式文本pre元素的细节details命令菜单menu表格
标题captionfigure标题figcaption块引用blockquotedetails元素可见标题summary菜单项目menuitem组合表内容thead图像映射map文档联系信息address对话窗口dialog命令按钮command组合主题内容tbody图像区域area居中文本
center标题h1~h6表单form组合表注内容tfoot图形容器canvas水平垂直方向插入空间spacerHTML5+CSS3任务驱动教程3.13块级元素任务3使用块级元素和行内元素制作专业信息页面块级
元素的特点如下：（1）总是在新行上开始；（2）高度、行高及外边距和内边距都可控制；（3）宽度默认是其容器的全部（除非设定一个宽度）；（4）可以容纳行内元素和其他块元素。HTML5新增的块级元素包括：header、section、footer、aside、nav、article、figure。HT
ML5+CSS3任务驱动教程3.14行内元素任务3使用块级元素和行内元素制作专业信息页面行内元素（inline，又称内联元素）可以出现在某一行句子中，并且不用新起一行，常见的行内元素如表所示。内联容器span大字体big禁止换行nobr锚点a注音rt缩写abbr小字体small单词换行时机w
br图片img进度条progress强调em上标sup打字机文本tt内嵌embed度量meter粗体强调strong下标sub键盘文本kbdinput标记label定义变量var突出显示的文本mark删除文本del时间日期time输入框input计算机代码文本code加粗b
删除线strike引用cite按钮button计算机代码样本samp斜体i删除线s短引用q生成密钥keygen字段dfn文本方向bdi插入更改的文本ins字体设置font多行文本输入框textarea输出结果output文字方向bdo下划
线uHTML5+CSS3任务驱动教程3.14行内元素任务3使用块级元素和行内元素制作专业信息页面行内元素的特点如下：（1）和其他元素都在一行上；（2）高、行高及外边距和内边距不可改变；（3）宽度就是其文字或图片的宽度，不可改变；（4）只能容纳文本或者其他行内元素
。HTML5+CSS3任务驱动教程3.15<span>标记任务3使用块级元素和行内元素制作专业信息页面一般使用<span>标记来组合文档中的行内元素，如果不对<span>应用样式，那么span元素中的文本与其他文本不会有任何视觉上的差异
。尽管如此，span元素仍然可为p元素增加额外的结构。其语法格式如下：<p><span>文本1</span>文本2</p>HTML5+CSS3任务驱动教程具体任务任务3使用块级元素和行内元素制作专业信息页面（1）创建一个HTML5页面，添加关于计算机应用专业的信息文本；（2）利
用块级元素和行内元素对这些文本信息进行修饰。HTML5+CSS3任务驱动教程任务实现任务3使用块级元素和行内元素制作专业信息页面（1）在DreamweaverCC2017中创建一个空白的HTML5页面，保存为test.html，文档中包含<head>、
<body>等基本的HTML结构，添加专业信息文本，代码如下：HTML5+CSS3任务驱动教程任务实现任务3使用块级元素和行内元素制作专业信息页面<!doctypehtml><html><head><metacharset
="utf-8"/><title>招聘信息</title></head><body><h1>计算机应用技术</h1><pre>专业名称：计算机应用技术专业代码：610201招生对象：高中毕业或3+证书（文理科）</pre><pre>专业培养目标本专业以服务广东和珠三角地区经济
社会发展为宗旨，面向各类企事业单位，培养德、智、体、美全面发展，具有良好的综合素质，系统地掌握计算机专业领域必备的基本理论知识和基本技能，能够完成职业典型工作任务，具备团队合作能力、沟通能力和社会责任感，能够直接进入相应工作岗位，熟练运用一到两种程序设计语言，掌握网络技术和计算机系统维护技术；
能从事程序设计、数据库应用、计算机系统维护、网页制作与网站设计、技术支持与IT产品销售等工作，具有创新精神、实践精神和良好职业道德的的高等应用型技术人才。</pre><pre>专业核心能力1．具备编程开发能力，掌握PHP+MySQL或Jsp网络编程技术。2．具有使用Photoshop、
Flash进行网页美工UI设计开发能力。3．具有使用HTML、Javascript、AJAX、jQuery等技术进行特效网页设计能力。4．具备移动互联网HTML5、CSS3响应式移动互联网开发能力。5．具备精通使用PHP+MySQL或Js
p编程技术进行编码能力。6．具有基于B/S架构的系统开发能力。7．具有Windows和Linux操作系统下软件布署和优化能力。</pre><small>学校地址</small><small>广东省东莞市厚街镇教育园区学府路</small></body></html>HT
ML5+CSS3任务驱动教程任务实现任务3使用块级元素和行内元素制作专业信息页面（2）利用块级元素和行内元素对文本信息进行修饰，使其更有助于用户获取信息，具体实现如下：其中，<b>为文本加粗突出，<add
ress>表示地址，<br/>表示换行，<h1>表示一级标题。<body><h1>计算机应用技术</h1><pre>专业名称：计算机应用技术专业代码：610201招生对象：高中毕业或3+证书（文理科）</pre><pre><b>专业培养目标</b><br/>本专业以服务<b
>广东</b>和<b>珠三角地区</b>经济社会发展为宗旨，面向各类企事业单位，培养德、智、体、美全面发展，具有良好的综合素质，系统地掌握计算机专业领域必备的基本理论知识和基本技能，能够完成职业典型工作任务，具备团队合作能力、沟通能力和社会责
任感，能够直接进入相应工作岗位，熟练运用一到两种程序设计语言，掌握网络技术和计算机系统维护技术；能从事程序设计、数据库应用、计算机系统维护、网页制作与网站设计、技术支持与IT产品销售等工作，具有创新精
神、实践精神和良好职业道德的的高等应用型技术人才。<br/></pre><pre><b>专业核心能力</b><br/>1．具备编程开发能力，掌握PHP+MySQL或Jsp网络编程技术。<br/>2．具有使用Photoshop、Flash进行网页美工UI设计开发
能力。<br/>3．具有使用HTML、Javascript、AJAX、jQuery等技术进行特效网页设计能力。<br/>4．具备移动互联网HTML5、CSS3响应式移动互联网开发能力。<br/>5．具备精通使用PHP+MySQL或Jsp编程技术进行编码能力。<br/>6．具有基于B/
S架构的系统开发能力。<br/>7．具有Windows和Linux操作系统下软件布署和优化能力。<br/></pre><small>学校地址</small><small><address>广东省东莞市厚街镇教育园区学府路</address></s
mall></body>HTML5+CSS3任务驱动教程任务实现任务3使用块级元素和行内元素制作专业信息页面（3）运行代码，最终得到如图所示的效果。HTML5+CSS3任务驱动教程3.16字符实体任务4特殊符号的使用如果要正确地插入
一些特殊符号，或者在插入多个空格时能够正确显示，那么就一定要插入字符实体（characterentities）。字符实体的语法格式一般如下:&实体名或者&#实体号常用的字符实体如表所示。HTML5+CSS3任务驱动教程3.16字符实体任务4特殊符号的使用显示结果描述实体名称实体编号
空格<小于号<<>大于号>>&和号&&"引号""'撇号'(IE不支持)'￠分（cent）¢¢£镑（pound）££¥元（yen）¥¥€欧元（euro）€€§小节§§©版权（copyright）©©®注册商标®®™商标™™×乘号××÷除号÷÷HTML5+CSS3任务驱
动教程具体任务任务4特殊符号的使用（1）创建一个HTML5页面，添加反比例函数单调区间文本；（2）对特殊符号进行修饰。HTML5+CSS3任务驱动教程任务实现任务4特殊符号的使用（1）在DreamweaverCC2017中创建一个空白HTML5页面，保存为test.html，文
档中包含<head>、<body>等基本的HTML结构，添加文本信息，并对其中特殊符号的书写进行修改：<html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>特殊符号添加</titl
e><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head><body><p><strong>反比例函数单调性</strong><br/>当k&g
t;0时，图象分别位于第一、三象限，每一个象限内，从左往右，y随x的增大而减小；<br/>当k<0时，图象分别位于第二、四象限，每一个象限内，从左往右，y随x的增大而增大。<br/>k>0时，函数在x<0
上同为减函数、在x>0上同为减函数；k<0时，函数在x<0上为增函数、在x>0上同为增函数。</p></body></html>HTML5+CSS3任务驱动教程任务实现任务4特殊符号的使用（2）运行代码，最终得到
如图所示的效果。HTML5+CSS3任务驱动教程3.17旁注任务5添加注释HTML5新增了<ruby>、<rt>和<rp>标记，<ruby>用来标记需要被旁注的文本，如拼音或解释。<rt>标记定义文本的拼音或解释，还包括可选的<rp>元素，定义当浏览器不支持<ruby>元素时显示的内容。
其语法格式如下：<ruby>文本<rt>文本的拼音或解释</rt></ruby>或者<ruby>文本<rt><rp>(</rp>文本的拼音或解释<rp>)</rp></rt></ruby>HTML5+CSS3任务驱动教程3.18注释任务5添加注释为了提升代码的可读性，方便他人理解代码和对代码
进行维护，通常对代码添加注释说明。添加注释的语法格式如下：<!--注释内容-->HTML5+CSS3任务驱动教程具体任务任务5添加注释（1）创建一个HTML5页面，给汉字添加拼音旁注；（2）在网页源代码中添加注释。HTML5+CSS3任务驱动教
程任务实现任务5添加注释（1）在DreamweaverCC2017中创建一个空白的HTML5页面，保存为test.html，文档中包含<head>、<body>等基本的HTML结构，添加汉字以及旁注。<!doctype
html><html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>旁注</title><!--TemplateEndEditable--><!--TemplateBeginEdi
tablename="head"--><!--TemplateEndEditable--></head><body><ruby>燚<rt>yì</rt></ruby><br/><ruby>燚<rt><rp>(</rp>yì<
rp>)</rp></rt></ruby></body></html>HTML5+CSS3任务驱动教程任务实现任务5添加注释（2）为代码添加注释。（3）运行代码，最终得到如图所示的效果。<!doctypehtm
l><html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>旁注</title><!--TemplateEndEditable--><!--Templa
teBeginEditablename="head"--><!--TemplateEndEditable--></head><body><!--汉字上方添加拼音旁注--><ruby>燚<rt>yì</rt></ruby><br/><!--汉字右侧添加拼
音旁注--><ruby>燚<rt><rp>(</rp>yì<rp>)</rp></rt></ruby></body></html>HTML5+CSS3任务驱动教程谢谢模块四网页中的图像与多媒体技术HTML
5+CSS3任务驱动教程目录任务一制作“在线学习网”的平面作品展示页面任务二任务三制作“在线学习网”的广告作品展示页面制作“在线学习网”的多媒体作品展示页面HTML5+CSS3任务驱动教程引入知识点4.1认识网页中
的图像4.2使用<img>标记插入图像任务1制作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程4.1认识网页中的图像在网络带宽的不断提升以及人们的审美情趣越来越高的今天，图像已经成为网页中必不可少的重要元素之一。网页图像运用的
好坏，决定了网页设计的成败。任务1制作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程4.1认识网页中的图像4.1.1网页常用图像格式了解网页图像的类型和格式是在网页中合理使用图像的基础。图像的文件格式有很多种，但由于受到网络带宽和浏览器的限制，通常在网页中使
用的有JPEG、GIF和PNG三种。其中JPEG和GIF图像格式在网页上使用最广，能支持大多数浏览器。任务1制作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程4.1认识网页中的图像4.1.2网页图像使用原则目前
，虽然宽带在国内普及，但在制作网页时也要在速度和美观之间取得较好地结合点。一般普通的首页应该限制在100KB以内，其他页面最好控制在500KB以内。因为，如果一个网页很大，在浏览器里超过30秒还没有打开，大部分浏览者都会选择放弃。任务1制作“在线
学习网”的平面作品展示页面HTML5+CSS3任务驱动教程4.2使用<img>标记插入图像在网页中插入图像可以起到美化页面的作用。HTML提供了<img>标记来插入图像。基本语法格式如下：<imgsrc="图像文件路径">任务1制作“在线学习网”的平面作品
展示页面HTML5+CSS3任务驱动教程4.2使用<img>标记插入图像4.2.1使用标记属性设置图像大小使用<img>标记插入图像，默认情况下将插入原始大小的图像，如果想在插入时修改图像的大小，可以使用hei
ght和width属性来实现。基本语法格式如下：<imgsrc="图像文件路径"width="图像的宽度"height="图像的高度">任务1制作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程4.2使用<img>
标记插入图像4.2.2使用标记属性设置图像描述信息和替换信息设置图像提示信息使用title属性，设置图像的替换信息使用alt属性。基本语法格式如下：<imgsrc="图像文件的路径"title="图像描述信息"alt="图像替换信息">任务1制作“在线学习网”的平面作品展示页面HTML5+
CSS3任务驱动教程4.2使用<img>标记插入图像4.2.3使用标记属性设置图像的边框默认情况下，插入图像是没有边框的，有时在我们设计网页时为了获得某种效果，需要让图像显示边框。设置图像的边框可以使用图像
的border属性。基本语法如下：<imgsrc="图像文件的路径"border="边框宽度">语法说明："边框宽度"的单位为像素，最小值是1。任务1制作“在线学习网”的平面作品展示页面HTML5+CSS3任务
驱动教程4.2使用<img>标记插入图像4.2.4使用标记属性设置图像的对齐方式默认情况下，插入图像在水平方向放置在对象的左边，在垂直方向则与baseline（基线）对齐。我们可以使用图像的align属性修改它的对齐方式。
基本语法如下：<imgsrc="图像文件的路径"align="对齐方式">任务1制作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程4.2使用<img>标记插入图像4.2.5使用标记属性设置图像与周围对象的间距默认情况下，图像与周围对象的水平间距和垂
直间距都比较紧凑，显得较为拥挤。这样的间距，很多时候都不符合我们的设计需要。使用图像的hspace属性和vspace属性可以分别设置图像与周围对象的间距。基本语法格式如下：<imgsrc="图像文件的路径"vspace="水平间距数值"hspace="垂直间距数值">任务1
制作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程任务实现（1）在“在线学习网”平面作品展示页面中插入文字和4张平面作品的图像。（2）设置文字和图像的属性，让网页页面更加美观。任务1制
作“在线学习网”的平面作品展示页面HTML5+CSS3任务驱动教程引入知识点任务2制作在“在线学习网”的广告作品展示页面4.3使用<object>标记在网页中插入Flash动画4.4使用<embed>标记在网页中插入多
媒体内容HTML5+CSS3任务驱动教程4.3使用<object>标记在网页中插入Flash动画<object>标记用于包含音频、视频、Javaapplets、ActiveX、PDF以及Flash等对象。<obj
ect>标记设计的初衷是取代<img>和<applet>标记。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。<object>标记可用于WindowsIE3.0及以后浏览器或者其他支持ActiveX控件的浏览器。针对不同的浏览器，<object>标记的语法也有所不同，下面分别对
它们进行介绍。任务2制作在“在线学习网”的广告作品展示页面HTML5+CSS3任务驱动教程1．针对IE9/IE8/IE7/IE6等低版本，基本语法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramna
me="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…</object>任务2制作在“在线学习网
”的广告作品展示页面4.3使用<object>标记在网页中插入Flash动画HTML5+CSS3任务驱动教程2．针对IE10/IE11和非IE浏览器，基本语法格式如下：<objectclassid="clsid_value"codebase="url"width="val
ue"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--><
objecttype="application/x-shockwave-flash"data="media/star.swf"width="value"height="value"><!--<![endif]-
-><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--></object><!--<![endif]-
-></object>任务2制作在“在线学习网”的广告作品展示页面4.3使用<object>标记在网页中插入Flash动画HTML5+CSS3任务驱动教程<embed>标记和<object>标记一样，也可以在网页
中插入Flash动画、音频、视频等多媒体内容。不同于<object>标记的是，<embed>标记用于NetscapeNavigator2.0及以后的浏览器或者其它支持Netscape插件的浏览器，其中包括IE和Chrome浏览器
。Firefox浏览器目前还不支持<embed>标记。基本语法格式如下：<embedsrc="路径"属性1=value1属性2=value2…></embed>任务2制作在“在线学习网”的广告作品展示页面4.4使
用<embed>标记在网页中插入多媒体内容HTML5+CSS3任务驱动教程任务实现（1）使用<object>在“在线学习网”广告作品展示页面的顶部位置插入Flash动画片头。（2）使用<embed>在“在线学习网”广
告作品展示页面中插入“vivo智能手机广告”视频作品。任务2设置“在线学习网”的首页文件头部信息HTML5+CSS3任务驱动教程引入知识点任务3制作“在线学习网”的多媒体作品展示页面4.5认识网页中的多媒体内容4.6使用<video>标记在网页中插
入多媒体内容4.7使用<audio>标记在网页中插入音频HTML5+CSS3任务驱动教程4.5认识网页中的多媒体内容HTML5提供的视频、音频插入方式简单易用，主要通过<video>标记和<audio>标记在页面中插入视频和音频文件，这需要
正确选择视频和音频格式。任务3制作“在线学习网”的多媒体作品展示页面HTML5+CSS3任务驱动教程4.5.1网页常用视频格式随着网速的大幅提高，越来越多的设计者喜欢在网页中加入视频文件。视频不但使网页越来越精彩及富有动感，同时也越来越受到浏览者的欢迎，像在线影视、视频教程等。在HTML5中插
入的视频格式常用的包括MPEG4、Ogg、WebM等。任务3制作“在线学习网”的多媒体作品展示页面4.5认识网页中的多媒体内容HTML5+CSS3任务驱动教程4.5.2网页常用音频格式人类获取信息的方式，除了视觉以外就是听觉了。为满足
人们听觉的需求，有时需要在网页中插入声音元素，包括插入背景音乐和插入音频文件等。在HTML5中插入的音频格式常用的包括MP3、WAV、OggVorbis等，任务3制作“在线学习网”的多媒体作品展示页面4.5认识网页中的多媒
体内容HTML5+CSS3任务驱动教程4.6使用<video>标记在网页中插入多媒体内容<video>标记用于在网页中插入视频和音频。基本语法格式如下：<videosrc="视频文件或音频文件的路径"controls="controls
">替代内容</video>语法说明：src属性指定多媒体文件，这是一个必设属性。在<video>与</video>之间插入的内容是提供不支持<video>标记的浏览器显示的。任务3制作“在线学习网”的多媒体作品展示页面HTML5+CSS3任务驱动教程4.7使用<audio>标记在网页中插入音频<
audio>用于在网页中插入音频。基本语法格式如下：<audiosrc="音频的路径"controls="controls">替代内容</audio>语法说明：src属性指定多媒体文件，这是一个必设属性。在<audio>与</au
dio>之间插入的内容是提供不支持<audio>标记的浏览器显示的。任务3制作“在线学习网”的多媒体作品展示页面HTML5+CSS3任务驱动教程任务实现（1）使用<video>标记在“在线学习网”多媒体作品展示页面中插入视频作品。（3）使用<audio>标记在“在线学习网
”多媒体作品展示页面中插入音频作品（2）使用<video>标记在“在线学习网”多媒体作品展示页面中插入音频作品。任务3制作“在线学习网”的多媒体作品展示页面HTML5+CSS3任务驱动教程谢谢模块五应用表格布局页面HTML5+CSS3任务驱动
教程目录任务一任务二任务三图书借阅详情页面的制作课程表的制作学院首页页面的制作HTML5+CSS3任务驱动教程引入知识点任务1图书借阅详情页面的制作5.1表格的基本结构5.2创建表格5.3表格的其他元素HTML5+CSS3任务驱动教程任务1图书借
阅详情页面的制作5.1表格的基本结构表格是由行和列构成的，类似于Excel中的表格，每个表格均有若干行，每行均有若干列，行和列交叉所围起来的区域称为单元格，单元格用于存放数据，可以存放文本、图片、水平线、列表、段落、表单、表格等。HTML5+CS
S3任务驱动教程任务1图书借阅详情页面的制作5.1表格的基本结构表格的基本结构HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.2创建表格<table><tr><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td><
/tr>...</table>基本语法格式表格一般由table元素及一个或者多个tr、td元素组成，tr代表表格的行，td代表表格的单元格。HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.2创建表格1、t
able元素able元素用来在HTML文件中插入一个表格，它是一对双标签，有开始也有结束，<table>标记代表表格的开始，</table>标记代表表格的结束，在开始和结束标记之间的所有内容都属于这个表格。HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.2创建表格table元素
的常用属性HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.2创建表格2、tr元素在表格里定义一行，由tr元素来完成。表行以<tr>标记作为开始，以</tr>标记作为结束。在设置表格的整体属性之后，还可以单独对表格中的某一行进行属性设置。HTML5+CSS3
任务驱动教程任务1图书借阅详情页面的制作5.2创建表格tr元素的常用属性HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.2创建表格3、td元素表格中的每一行都由若干个单元格组成，单元格由td
元素来定义，单元格中的数据存放在开始标记<td>和结束标记</td>之间。HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.2创建表格td元素的常用属性HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制
作5.3表格的其他元素1、表头元素th表头单元格由th元素来定义，<th>标记也是一对双标记，表头的内容置于开始标记<th>和结束标记</th>之间。常见的表头分为垂直和水平两种，一般用在表格的第一行或者第一列。表头单元格是特殊的单元格，表头中的内容通常会呈现为居
中和加粗的样式。<th>表头内容</th>HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.3表格的其他元素2、表格标题元素caption表格标题由caption元素来定义。表格的标题一般位于整
个表格的第一行，默认居中显示。<caption>标题内容</caption>HTML5+CSS3任务驱动教程任务1图书借阅详情页面的制作5.3表格的其他元素3、表格的结构标记从表格的结构来看，可以把表格划分
为表头、主体和脚注三部分。在HTML文档中，规定使用<thead>标记表示表头，<tbody>标记表示主体，<tfoot>标记表示脚注。<table><thead>…</thead><tfoot>…</tfoot><tbody>…</tbody></table>HTML5
+CSS3任务驱动教程任务1图书借阅详情页面的制作任务实现（1）创建一个HTML5页面，用于显示图书借阅详情表；（2）创建表格，用于存放图书借阅信息图书借阅详情HTML5+CSS3任务驱动教程引入知识点任务2课程表的制作5.4跨行跨列设置5.5背景颜色设置HTML
5+CSS3任务驱动教程任务2课程表的制作5.4跨行跨列设置单元格的合并分为两种，一种是水平方向的合并，另一种是垂直方向的合并，而这两种合并方式只需要对td元素或者th元素中的colspan和rowspan两个属性进行设置即可。HTML5+CSS3任务驱动教程任务2课程表的
制作5.4跨行跨列设置1、colspan属性colspan属性表示的是单元格在水平方向上合并，语法格式如下：<tdcolspan="数值">单元格内容</td>HTML5+CSS3任务驱动教程任务2课程表的制作5.4跨行跨列设置2、rowspan
属性rowspan属性表示的是单元格在垂直方向上合并，语法格式如下：<tdrowspan="数值">单元格内容</td>HTML5+CSS3任务驱动教程任务2课程表的制作5.5背景颜色设置1、整个表格的背景颜色进行设置<tablebgcolor="颜色值">2、某行的
背景颜色进行设置<trbgcolor="颜色值">3、某个单元格的背景颜色进行设置<tdbgcolor="颜色值">HTML5+CSS3任务驱动教程任务实现（1）创建一个HTML5页面，进行课程表的制作；（3）在对应单元格中填入数据；（2）分析表格的结构并给出结构
代码的设计；任务2课程表的制作（4）对表格结构进行调整。HTML5+CSS3任务驱动教程任务2课程表的制作HTML5+CSS3任务驱动教程引入知识点任务3学院首页页面的制作5.6对齐方式的设置5.7宽度、高度的设置5.8背景图片的设置HTML5+CSS3任务驱动教程任务
3学院首页页面的制作5.6对齐方式的设置1、设置表格的对齐方式<tablealign="对齐方式">设置整个表格在页面中的对齐方式，其中，对齐方式的取值为left、center或right。HTML5+CSS3任务驱动教程任务3学院首页页面的制作
5.6对齐方式的设置2、设置行的对齐方式行的对齐方式分为水平方向上的对齐和垂直方向上的对齐，由align属性控制水平方向上的对齐，valign属性控制垂直方向上的对齐。<tralign="对齐方式">其中，对齐方式取值为lef
t、center或right。<trvalign="对齐方式">其中，对齐方式取值为top、middle或bottom。HTML5+CSS3任务驱动教程任务3学院首页页面的制作5.7宽度、高度的设置宽度、高度的设置分别使用的是width属性和height属性，这两个属性属
于公用属性，前面已经介绍过，这里不再赘述。HTML5+CSS3任务驱动教程任务3学院首页页面的制作5.8背景图片的设置1、对整个表格设置背景图片<tablebackground="图片的地址">2、对某个单元格设置背景图片<tdbackground
="图片的地址">HTML5+CSS3任务驱动教程任务实现（1）创建一个HTML5页面，进行“创新学院首页”的页面制作；（3）在对应的单元格中填入数据；（2）分析结构草图并给出结构代码的设计；任务3学院首页页面的制作（4）对表格结构
进行调整。HTML5+CSS3任务驱动教程任务3学院首页页面的制作HTML5+CSS3任务驱动教程谢谢模块六创建网页中的超链接HTML5+CSS3任务驱动教程目录任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程引入知识点6.1创建超链接6.2超链接的类型任务创建“在线学习网”页
面的超链接HTML5+CSS3任务驱动教程6.1创建超链接超文本链接（HyperTextLink）通常简称为超链接（HyperLink），或者简称为链接（Link）。超链接就是从一个网页转到另一个网页的途径。链接是
HTML的一个最强大和最有价值的功能。任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.1创建超链接6.1.1超链接a元素的语法格式创建超链接使用的标记是<a>。超链接要能正确地进行链接跳转，需要同时存在两个端点，即源端点和目标端点。源
端点是指网页中提供链接单击的对象，如链接文本或链接图像；目标端点是指链接跳转过去的页面或位置，如某个网页、锚记等。超链接的目标端点使用<a>标记的href属性来指定，源端点则通过<a>标记的内容来指定。除了需要使用href属性外，还经常需要用到其他一些相关的属性。任务创建“在线学
习网”页面的超链接HTML5+CSS3任务驱动教程6.1创建超链接6.1.2设置超链接的路径在网站中，每一个网页都有一个唯一的地址与之对应，这个地址称为统一资源定位符，即URL（UniformResourceLocator），它的功能就是提供在Internet上查找资源的标准方法。而
对于一般的文件则是它的路径，即所在的目录和文件名。链接路径就是在超链接中用于标识目标端点的位置标识。常见的链接路径主要有以下两种类型。1.绝对路径2.相对路径任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型1.根据超链接目标端点的位置不同划分（1）内部超链接：
指在同一站点内部，不同页面之间的超链接。（2）外部超链接：是站点外部的链接，是网页与因特网中某个目标网页的链接。（3）锚记超链接：是同一网页内部的链接。通常情况下，锚记链接用于链接到网页内部某个特定的位置。（4）电子邮件超链接：指链接到电子邮箱的链接。单击该链接可以发送电子邮件。
（5）可执行文件超链接：通常又称文件下载链接，单击该链接可以运行可执行文件，可以用于下载文件或在线运行可执行文件。任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型2.根据链接源端点的内容不同划分（1）文本超链接：以文本作为超链接源端点。（2）图像超链接：
以图像作为超链接源端点。（3）图像热点超链接：以图像热区作为超链接源端点。任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型3.根据链接目标端点的内容不同划分（1）网页超链接：链接到HTML、ASP、PHP等网页
文档的链接，这是网站中最常见的链接。（2）文件下载超链接：链接到图像、音频、影片、Word文档、Excel文档、PowerPoint文档、PDF文档等资源文件或RAR、ZIP等压缩文件的链接。（3）电子邮件超链接：链接到电子邮件的超链接形式，将会启动邮件客户端程序，浏览者可以写邮件
并发送到链接的邮箱中。（4）空链接：链接目标形式上为“#”，主要用于在对象上附加行为等（5）脚本超链接：链接目标为一段JavaScript脚本代码，用于执行某项操作（6）锚记超链接：链接目标为网页文档中的某一位置，这一位置可以位于当前网页或其他网页中，这个网页可以位于
当前站点内，也可以位于其他站点内任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型1内部超链接内部超链接是指在同一个网站内部，不同网页之间的链接关系。基本语法格式如下：<ahref=“链接文件的路径”>源端点</a>任务创建“在线学习网”页
面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型2外部超链接外部超链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系。基本语法格式如下：<ahref=“URL”>源端点</a>任务创建“在线学习网
”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型3锚记超链接锚记超链接又称书签链接。在浏览网页的时候，如果页面内容过长，需要不断地拖动滚动条才能看到所有内容，这时可以在该网页上建立锚记目录，单击目录上的某一项就能自动跳到该目录项对应的网页位置。任务
创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型第一步：创建锚记基本语法格式如下：HTML5：<aid=“锚记名称”>源端点</a>HTML5以前版本：<aname=“锚记名称”>源端点</a>语法说明：锚记名称就是对第二步跳
转所创建的锚记，“源端点”则是设置链接后跳转的位置，可以是文本或图片。任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型第二步：建立锚记链接基本语法格式如下：（1）链接到同一个页面中的锚记，称为内部锚记超链接。<ahref=“#锚记
名称”>源端点</a>（2）链接到其他页面中的锚记，称为外部锚记超链接。<ahref=“锚记所在页面的文件路径#锚记名称”>源端点</a>任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型4电子邮件超链接在页面上创建电子邮件链接，可以让浏览者快速地与网站负
责人联系。当鼠标单击链接对象时，浏览者的计算机系统中默认的电子邮件客户端软件将自动打开。基本语法格式如下：<ahref=”mailto:电子邮件”>源端点</a>任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型5文件下载超链
接目标端点为某个需下载的文件的链接称为文件下载链接。当用户单击该链接后，浏览器会自动判断文件类型，以做出不同情况的处理，如直接打开，或弹出下载对话框供下载可用于下载的文件类型有.doc、.rar、.mp3、.zip、.exe等。基本语法格式如下：<ahref=“链接文件的路径”>下载文件链接</a
>任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型6脚本超链接目标端点为脚本代码的链接称为脚本链接。通过脚本可以实现HTML语言完成不了的功能。基本语法格式如下：<ahref=“JavaScri
pt:…”>源端点</a>任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型7文本超链接文本超链接是指源端点为文本的链接。基本语法格式如下：<ahref=“目标端点”>链接文本<
/a>任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程6.2超链接的类型8图像超链接图像超链接是指源端点为图像文件的超链接。基本语法格式如下：<ahref=“目标端点”><imgsrc=“图像文件路径”></a>任务创建“在线学习网”页面的超链接HTML5+CSS3任务
驱动教程6.2超链接的类型9图像热点超链接图像映射是指源端点为图片热点的链接。一幅图像可以被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。基本语法格式如下：<imgsrc="图片文件路径"usemap="#Map_name"><mapname="#
Map_name"><areashape="rect"coords="x1,y1,x2,y2"href="链接地址1"><areashape="circle"coords="x,y,r"href="链接地址2"><areashape="p
oly"coords="x1,y1,x2,y2,x3,y3,…"href="链接地址3">…</map>任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程任务实现（1）通过文本超链接实现页面链接。（2）通过图像热点超链接实现首页到子页面的链接。（3）过锚记超链接实现子
页面各部分内容的链接。（4）通过电子邮件超链接实现“联系我们”链接到邮箱：843118486@qq.com任务创建“在线学习网”页面的超链接HTML5+CSS3任务驱动教程任务实现（5）通过脚本超链接关闭“在线学习网站”中的数
字媒体技术概述课程子页面文件course_multimedia.html。（6）通过外部超链接和图像超链接实现首页“友情链接”到“广东创新科技职业学院”网站。（7）通过文件下载超链接可以下载资源文件“download.rar”。任务创建“在线学习网”页面的超链接HTML5+CSS3任务
驱动教程谢谢模块五网页表单设计HTML5+CSS3任务驱动教程目录任务一任务二任务三注册页面的设计读者留言板的设计HTML5+CSS3任务驱动教程引入知识点任务1注册页面的设计7.1了解表单7.2输入元素inputHTML5+CSS3任务驱动教程任务1注册页面的设计7.1了解表单一个表
单由三部分组成：（1）表单标记：包括处理表单数据所用的CGI程序（通用网关接口）的URL和数据提交到服务器的方法。（2）表单域：包括文本框、密码框、复选框、单选框、下拉选择框、文件上传框、多行文本框和
隐藏域等。（3）表单按钮：包括提交按钮、重置按钮和普通按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用来控制其他定义了处理脚本的处理工作。HTML5+CSS3任务驱动教程任务1注册页面的设计7.1了解表单1
、表单的作用表单在网页中的主要作用是采集用户数据，它提供一个页面，一个入口。表单处理信息的一般过程为：用户在表单中完成信息的填写后，单击表单中的提交按钮时，用户所输入的信息就会提交到服务器，服务器中的应用程序
会对这些信息进行处理和响应，完成用户和服务器之间的交互。HTML5+CSS3任务驱动教程任务1注册页面的设计7.1了解表单2、表单元素form表单是网页上一个特定的区域，这个区域是由<form>标记定义的，它是一对双标记，<form>标
记代表表单区域的开始，</form>标记代表表单区域的结束，在<form>和</form>标记之间的所有内容都属于表单内容。<form>标记的基本语法格式如下：<formname="表单名称"action="表单提交地址"method="数据传输方式">…</form>HTML5
+CSS3任务驱动教程任务1注册页面的设计7.1了解表单表单常用属性HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input基本语法格式<inputtype="输入控件类型"name="控件名字">HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入
元素input根据type属性值的不同可以得到不同的控件类型type常用的属性值HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input1、文本框text基本语法格式：<inputtype="text"name="field_nam
e"value="field_value"size="size_value"maxlength="max_value">文本框属性HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input2、密码框password基本语法格式：<inputtype="p
assword"name="field_name"value="field_value"size="size_value"maxlength="max_value">密码框属性HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input单选按钮属性3、单选按钮r
adio基本语法格式：<inputtype="radio"name="field_name"value="value"checked>HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input复选框属性4、复选框checkbox基本语法格式：<inputty
pe="checkbox"name="field_name"value="value"checked>HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input普通按钮属性5、普通按钮button基本语法格式：<inputtype="button"n
ame="field_name"value="button_text">HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input提交按钮属性6、提交按钮submit基本语法格式：<inputtype="submit"name="field_name"value="
submit_text">HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input重置按钮属性7、重置按钮reset基本语法格式：<inputtype="reset"name="field_name"value="reset
_text">HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input图片按钮属性8、图片按钮image基本语法格式：<inputtype="image"name="field_name"src="image_url">HTML5+CSS
3任务驱动教程任务1注册页面的设计7.2输入元素input文本域属性9、文本域file基本语法格式：<inputtype="file"name="field_name">HTML5+CSS3任务驱动教程任务1注册页面的设计7.2输入元素input隐藏域属性10、隐藏
域hidden基本语法格式：<inputtype="hidden"name="field_name">HTML5+CSS3任务驱动教程任务1注册页面的设计任务实现（1）创建一个HTML5页面，制作注册页面；（3）使用表格对注册页面的结构进行控制；
（2）在页面中插入一个form元素；（4）在表格相对应的位置放入表单输入元素。HTML5+CSS3任务驱动教程任务1注册页面的设计注册界面HTML5+CSS3任务驱动教程引入知识点任务2读者留言板的设计7.3下拉选择框元素sel
ect7.4多行文本域textareaHTML5+CSS3任务驱动教程任务2读者留言板的设计7.3下拉选择框元素select下拉选择框也是页面中常用的表单元素，它由<select>标记定义，是一对双标记，<select>标记定义了下拉选择框的开始，</select
>标记定义了下拉选择框的结束。可以通过属性设置要显示的选项数量，以及是否允许多项选择等内容。HTML5+CSS3任务驱动教程任务2读者留言板的设计7.3下拉选择框元素selectselect元素的常用属性基本语法格式：<selectname=
"field_name"size="size_value"multiple>…</select>HTML5+CSS3任务驱动教程任务2读者留言板的设计7.3下拉选择框元素selectselect元素相当于一个容器，标记当前的下拉选择框是菜单还是列表，而它所包含的
菜单或列表中的每一项都是由option元素定义的。option元素定义了下拉选择框里的选项，它也是一对双标记，选项的内容包含在开始标记<option>和结束标记</option>之间。option元素要定义在<select>和</s
elect>标记里面才能发挥作用。HTML5+CSS3任务驱动教程任务2读者留言板的设计7.3下拉选择框元素selectoption元素的常用属性option元素基本语法格式：<selectname="field_name"><optionvalue="string"selected
>选项1</option><option>选项2</option><option>选项3</option>…</select>HTML5+CSS3任务驱动教程任务2读者留言板的设计7.4多行文本域textarea基本语法格式：<textareaname="fie
ld_name"cols="number"rows="number"></textarea>textarea元素也是在页面中经常使用的表单元素，它是一对双标记，<textarea>标记为开始标记，</textarea>标记为结束标记，需要在页面显示的初始文本内容放置于<te
xtarea>与</textarea>标记之间。HTML5+CSS3任务驱动教程任务2读者留言板的设计7.4多行文本域textareatextarea元素的常用属性HTML5+CSS3任务驱动教程任务实现（1）创建一个HTML5页面，制作“读者留
言板”页面；（3）使用表格对“读者留言板”页面的结构进行控制；（2）在HTML页面中插入一个form元素；任务2读者留言板的设计（4）在表格相对应的位置放入表单输入元素、下拉选择框元素及多行文本域元素。HTML5+CSS3任务驱动教程任务2读者留言板的设计读者留言板HTML
5+CSS3任务驱动教程谢谢模块八网页的CSS样式设计HTML5+CSS3任务驱动教程目录任务一任务二任务三网页大标题的样式设计网页中的文字排版制作新闻排行榜HTML5+CSS3任务驱动教程引入知识点任务1网页大标题的样式设计8.1什么是CSS8.2CSS的应用HTML5
+CSS3任务驱动教程任务1网页大标题的样式设计8.1什么是CSSCSS是层叠样式表(CascadingStyleSheets)的简称，是用来表现HTML或XML的标记语言，运用CSS样式与HTML所描述的信息结
构相结合，能够帮助设计师将网页内容与表现相分离，使网站更加容易构建与维护。HTML5+CSS3任务驱动教程任务1网页大标题的样式设计8.1什么是CSSCSS的语法结构HTML5+CSS3任务驱动教程任务1网页大标题的样式设计8.2CSS的应用1、行间样式行间样式
，也叫内联样式，由HTML标记中的style属性所支持，要使用行间样式，你需要在相关的标签内使用样式（style）属性。行间样式将表现和内容混杂在一起。<pstyle="color:#f00;padding-left:20px">这是一
个段落。</p>HTML5+CSS3任务驱动教程任务1网页大标题的样式设计8.2CSS的应用2、内部样式内部样式是CSS样式编码的初级应用形式，样式表作为页面的一个单独部分，由<style></style>标记定位在<head></head>之中。只能针对当前页面有效，不能
跨页面执行。<head><styletype="text/CSS">hr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}</style></head>HTML5+CS
S3任务驱动教程任务1网页大标题的样式设计8.2CSS的应用3、外部样式外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。而且多个网页可以调用同一个样式表文件，这样能够实现代码的最大限度重用及网站文件的最优化配置。
当样式需要应用于很多页面时，外部样式表将是理想的选择。<head><linkrel="stylesheet"type="text/CSS"href="mystyle.CSS"/></head>HTML5+CSS3任务驱动教程
任务1网页大标题的样式设计8.2CSS的应用CSS的文本属性属性描述属性值的范围color设置文本颜色十六进制值-如:＃ff0000，或简写为#f00一个RGB值-如:rgb(255,0,0)颜色的名称-如:redletter-spa
cing设置字符间距通常以px、em为单位，正数为增加字符间的间距，负数则减少。如letter-spacing:5px;line-height设置行高通常以px、em为单位，通常用来设置行与行之间的距离，如line-height:1.6em;text-align对齐元素中的
文本通常为三个值：left,center,righttext-decoration向文本添加修饰none标准文本，常用于去掉超链接的下划线underline定义文本下的一条线overline定义文本上的一条线line-through定义穿过文本下的一条线text-indent缩进元素中文本的首行通
过以em为单位，表示缩进的字符个数，如：text-indent:2em;text-shadow设置文本阴影CSS3的属性，语法格式为text-shadow:h-shadowv-shadowblurcol
or;h-shadow：必需，水平阴影的位置v-shadow：必需，垂直阴影的位置blur：可选,模糊的距离color：可选，阴影的颜色text-transform控制元素中的英文字母capitalize文本中的每个单词以大写字母开头up
percase定义仅有大写字母。lowercase定义无大写字母，仅有小写字母。white-space设置元素中空白的处理方式用得较多的属性为nowrap，使文本不换行，文本会在在同一行上继续，直到遇到<br>标签为止。word-
spacing设置字间距主要用于英文单词之间的间距增加与减少HTML5+CSS3任务驱动教程任务1网页大标题的样式设计任务实现（1）在DreamweaverCC中创建一个空白HTML5页面，保存为index.html（3）使用CSS设计器，在页面中创建CSS，并给h1标记设计CSS属性（2）
在body标记中，使用标题标记<h1>将内容进行语义化标记HTML5+CSS3任务驱动教程引入知识点任务2网页中的文字排版8.3CSS字体样式HTML5+CSS3任务驱动教程任务2网页中的文字排版8.3CSS字体样式属性描述
font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。HTML5+C
SS3任务驱动教程任务实现（1）在DreamweaverCC中创建一个空白HTML5页面，保存为new1.html，使用<div>、<h2>、<p>标记对网页内容进行结构定义（3）采用外部样式表的方式，将CSS与ht
ml链接（2）新建CSS文件，保存于与html文件同一目录下，输入文件名称news.css进行保存任务2网页中的文字排版body{font-size:100%;}div{width:600px;font-family:Microsof
tYahei;/*字体为微软雅黑*/}h2{text-indent:2em;/*首行缩进2个字符*/font-style:italic;/*设置倾斜字体*/}p{font-size:1.2em;/*字体放大0.2倍*/line-
height:1.8em;/*行高为原来的1.8倍*/text-indent:2em;/*首行缩进*/color:#333;}HTML5+CSS3任务驱动教程效果图任务2网页中的文字排版HTML5+CSS3任务驱动教程效果图任务2
网页中的文字排版按相同方法完成new2.html页面，采用外部样式表，实现相同的外观。HTML5+CSS3任务驱动教程效果图任务3制作新闻排行榜按相同方法完成new2.html页面，采用外部样式表，实现相同的外观。HTML5+CSS3任
务驱动教程引入知识点任务3制作新闻排行榜8.4列表元素HTML5+CSS3任务驱动教程列表HTML标记任务3制作新闻排行榜1、ul无序列表2、ol有序列表3、自定义列表dl<h3>无序列表:</h3><ul><li>循环制</li>
<li>淘汰制</li><li>混合制</li></ul><h3>有序列表:</h3><ol><li>一等奖</li><li>二等奖</li><li>三等奖</li></ol><dl><dt>欢迎来学习HTML+CSS</dt><dd>这里有，html教程
</dd><dd>这里有，css模块</dd><dd>这里有，css教程</dd></dl>HTML5+CSS3任务驱动教程列表的CSS属性任务3制作新闻排行榜属性描述list-style简写属性，按list-style-type,list-style-position,li
st-style-image的列表属性顺序设置于一个声明中list-style-image将url形式的图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置
列表项标志的类型。HTML5+CSS3任务驱动教程任务实现任务3制作新闻排行榜（1）启动DreamweaverCC，打开新建文档面板，选择HTML，标题中输入“新闻排行榜”，类型选择“HTML5”，创建一个空白HTML5页面，保存为list.html，将文档内容写入body标记中。（
2）选择“排行榜”三个字，点击“插入”菜单的“标题”，然后选择“标题1”，即为标题内容设置了一级标题<h1>标记（亦可手动用代码实现）。（3）选择“排行榜”下方的文字内容，点击“插入”菜单的“编号列表(O)”，即为列表内容添加有序列表标记<ol>。（
4）分别选择每一条列表文字，通过“插入”菜单的“列表项(L)”添加列表标记<li>。（5）参考步骤（3）、（4）、（5）为“看广东”添加“标题3”、“项目列表”及“列表项”，以上步骤完成后，调整一下代码的换行与缩进，HTML结
构如下：HTML5+CSS3任务驱动教程任务实现任务3制作新闻排行榜<h1>排行榜</h1><ol><li>微视频：爱国是首奋斗的歌</li><li>金句来习：天地英雄气千秋尚凛然</li><li>东北振兴习近平是这样要求的</li><li>我爱你中国！我爱你五星红旗！国庆专题</
li><li>视频：出彩新时代80秒精编天安门国庆升国旗仪式</li><li>习声回响:把我们的人民共和国建设得更加繁荣富强</li><li>《我爱你中国》天池快闪奏响厦门海滩灯光秀</li><li>让中国发展惠及世界11
月1日起降部分商品最惠国税率</li><li>他们驻守在鹰都飞不过去的地方中医将纳WHO医学纲要</li><li>诺贝尔生理学或医学奖揭晓美日两位免疫学家获奖</li></ol><h3>看广东</h3><ul><li>可别去了！国庆期间广东这些景区仍不宜游玩</li><li>专题：国庆首
日出行广州白云机场高速路段肯定堵</li><li>广州一幼儿园教师粗暴推搡学生园方:涉事教师已停职</li><li>广州警方通报健康猫、礼德财富和新联在线案件进展</li><li>不能用计算机？2021年起广州中考课目改为“4+4”</li><li>广
州地铁发布节前大客流预警30日客流或突破千万</li><li>长假出境游广州海关：注意切勿违规携带黄金进出境</li><li>国庆出行高峰提前29日已有服务区车流接近饱和状态</li><li>“最强大
脑”同台竞技首个博士博士后创新赛落幕</li><li>港珠澳大桥开展三地联合试运行40分钟驶完全程</li></ul>HTML5+CSS3任务驱动教程任务实现任务3制作新闻排行榜（6）新建CSS样式表文件，以“list.css
”命名保存，并使用<link>标记与HTML页面关联。应用标记选择器编写CSS代码，将所有列表表li设置行高为1.6em，加大行与行之间的距离，使内容显示更加宽松；设置有序列表ol的列表样式为“以0开头的数字”；设置无序列表ul的列
表样式为图片，在Dw的代码界面中输入CSS代码时，会有代码提示，选择url后，单击“浏览”，选择需要的列表的图像。注意：在选择图像前，必须将图片放到站点文件夹，以免图像无法正常显示。其他外观效果，可根据前面的任务中的知识相应的加入一些CSS样式，如文档背景颜色、文本颜色、字体大小等，
使页面更加美化。CSS代码如下：HTML5+CSS3任务驱动教程任务实现任务3制作新闻排行榜body{font-size:100%;background-color:#D4EDF7;/*给页面设置背景颜色*/}li{line-height:1.6em;/*设置所有列表项的行高*/font-
size:1.2em;/*给所有列表项设置字体大小*/}h1{color:#3A8803;}ol{list-style-type:decimal-leading-zero;/*设置为0开头的数字标记*/l
ist-style-position:inside;/**列表符号向内缩进*/color:#3A8803;}h3{color:#BC6107;}ul{list-style-image:url(icon1.g
if);/*将图片作为列表符号*/color:#BC6107;HTML5+CSS3任务驱动教程效果图任务3制作新闻排行榜HTML5+CSS3任务驱动教程谢谢模块九使用DIV+CSS布局页面HTML5+CSS3任务驱动教程目录任务一任务二任务三网页中的图文混排网页中的全图排版
多行多列式布局HTML5+CSS3任务驱动教程任务描述任务1网页中的图文混排在现代网页中，纯文字的网页显得过于单调，为吸引用户浏览，通常在文字中会插入适当的相关图片，以更好地展现要表达的意思。在传统的表格式布局中，往往通过插入一个表格，
再在表格中插入图片，并对表格应用align属性来控制图片居中、居左还是居右来显示。而本任务中利用块状元素的盒子模型特性，应用CSS块状元素的更多属性，实现更多图文混排效果。任务1浏览效果如图9-1所示。HTML5+CSS3任务驱动教程引入知识点任务1网页中的图文混排
9.1CSS盒模型9.2CSS浮动与定位HTML5+CSS3任务驱动教程任务1网页中的图文混排9.1CSS盒模型HTML5+CSS3任务驱动教程任务1网页中的图文混排9.1CSS盒模型1．外边框margin可以单
独改变元素的上、下、左、右边距（顺时针）。也可以一次改变所有的属性。外边距设置属性有margin、margin-top、margin-bottom、margin-right、margin-left。2．边
框元素外边距内就是元素的边框（border）,每个边框有3个方面：宽度、样式，以及颜色。常用的边框属性有7项:border-top（上边框）、border-right（有边框）、border-bottom（下边框）、bord
er-left（左边框）、border-width（边框宽度）、border-color（边框颜色）、border-style（边框样式）。其中border-width可以一次性设置所有的边框宽度，border-c
olor同时设置四面边框的颜色时，可以连续写上4种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序（顺时针）。HTML5+CSS3任务驱动教程任务1网
页中的图文混排9.1CSS盒模型3．内边距元素的内边距在边框和内容区之间为paddingpadding属性与外边距类似，格式也大致相同，可以单独设置四内边距，也可使用padding一次性设置4．CSS3圆角在CSS3之前，
要实现圆角的效果主要通过图片辅助实现，实现起来不是很方便，使用CSS3的border-radius很方便实现圆角边框，但要注意部分旧版本的浏览器不直接CSS3的属性border-radius和前面介绍的
border的参数个数和用法基本相同HTML5+CSS3任务驱动教程任务1网页中的图文混排9.2CSS浮动与定位float是CSS样式中的布局属性，float属性的left和right值分别能够让元素向左和向右浮动。比如当元素向左浮动之后，对象的右侧将清空出一块区域，以
便让剩下的文档元素能够贴在右侧。利用这个特性可以方便地设计出需要的块状元素排版布局效果。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear属性指定元素两侧不能出现浮动元素，主要有三个属性值：both
、left、right，分别表示清除两边的浮动、清除元素左边的浮动、清除元素右边的浮动。采用position:absolute;之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bot
tom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在使用position:relative;进行相对定位，通过left和top来设置偏离原来位置左侧和上侧的距离。
HTML5+CSS3任务驱动教程任务1网页中的图文混排任务实现（1）在DreamweaverCC中创建一个空白创建一个HTML页面，保存为index.html，在body标记中插入<div>标记，给<div>标记定义一个类名为.container的类，将网页所有的内容放入<d
iv>标记中，对标题使用<h2>标记、段落使用<p>标记、加粗的文字使用<strong>标记进行描述，在第一段插入图片1.jpg，在文档中间位置，单独添加一个段落，在此段落插入图片2.jpg，部分HTML
代码如下：<divclass="container"><h2>“舍得”是一种处世的哲学也是做人做事的艺术</h2><p><imgsrc="images/1.jpg"width="400"height="300"alt=""/>“舍得”最早出自《了凡
四训》，“舍”是一种人生态度，也是一种基于现有资源对未来进行决断的智慧。相比之下，“得”只是一种因果，一种印证。人生百年、功名富贵，不过就是一舍一得的重复。所差异者，无非是你付出的是金钱、时间、努力、或者是真心，对芸芸众生而言，“舍得”是
一种雅俗共赏，启迪心智的“生活禅”。</p>…………………<p><imgsrc="images/2.jpg"width="640"height="427"alt=""/></p>…………………</div>HTML5+CSS3任务驱动教程任务1网页中的图文混排任务实
现（2）在本页面中给body、container类、h2、p、img等标记添加内部样式表，示例代码如下：<style>body{background-image:url(images/bg.gif);font-size:100%;}.container{width:800px;m
argin:0auto;/*设置布局元素div在水平方向居中对齐*/background-color:#F5E4E4;padding:20px;font-size:1.2em;border:6px#000double;/*设置
边框为双实线*/}.containerh2{text-align:center;/*标题文本居中对齐*/color:#f30;font-family:"黑体";}.containerp{text-indent:2em;line-height:1.6
em;}.containerimg{border:2px#F79597dashed;border-radius:20px;float:left;margin-right:10px;padding:8px;}p.pic{text-align:center;text-in
dent:0}.picimg{float:none;border-width:0;}</style>HTML5+CSS3任务驱动教程任务1网页中的图文混排任务实现（3）在网页所保存的文件夹中打开index.html，直接在浏览器中浏览网页的效果.HTML5+CSS3任务驱动教程任务描述
任务2网页中的全图排版网页中全是图片的排版布局也不少见，图片排版常被用在相册类、产品展示类的网页中，这类页面往往有大量的图片在同一页中进行展示，使用CSS布局进行全图排版的核心在于，对浮动定位的控制，并且具有较好的灵活性。对于具有相同尺寸的图片进行排版
，用CSS进行浮动定位是比较好控制的，若对于各个图片的尺寸规格不相同的图片进行直接排版，也可以采用流式布局，使图片错落排列。sohu.com网站的图片新闻，采用了相同大小的图片，此时只需要设置好一张图片的样式，其他图片用相同的元素进行设置并产生浮动即可，外层元素的整体宽
度也很容易通过盒模型计算得知。HTML5+CSS3任务驱动教程引入知识点任务2网页中的全图排版9.3CSS背景控制HTML5+CSS3任务驱动教程任务2网页中的全图排版9.3CSS背景控制属性描述background简写属性，将背景属性设置在一个声明中。back
ground-attachment设置背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position定位背景图像的起始位置。background-repeat设
置背景图像是否及如何重复。HTML5+CSS3任务驱动教程任务2网页中的全图排版9.3CSS背景控制属性描述background简写属性，将背景属性设置在一个声明中。background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。backgr
ound-color设置元素的背景颜色。background-image把图像设置为背景。background-position定位背景图像的起始位置。background-repeat设置背景图像是否及如何重复。backgro
und:#f09url(bg.png)repeat-xfixed20px40px;HTML5+CSS3任务驱动教程任务2网页中的全图排版任务实现（1）在DreamweaverCC中创建一个空白HTML5页面，在标题处输入“校园风光”，保存为index.html。选用<div>标记对页面进行整
理布局，给<div>标记设置一个类layout，选用无序列表ul对图片进行结构定义，每一个列表项中包含图片和段落文字，HTML代码如下：<divclass="layout"><h2>美丽校园</h2><ul><li><imgsr
c="images/hu.png"/><p>湖相依、楼相伴</p></li><li><imgsrc="images/huguang.jpg"/><p>湖光倒影</p></li><li><imgsrc="images/biye
zhao.jpg"/><p>毕业照</p></li><li><imgsrc="images/kongzi.png"/><p>孔子像</p></li><li><imgsrc="images/menlou.png"/><p>学校正门门楼</p></li><li><imgsrc="images/
qiao.png"/><p>创新桥</p></li><li><imgsrc="images/shiguang.jpg"/><p>快乐时光</p></li><li><imgsrc="images/xiaoyuan.jpg"/><p>美丽校
园</p></li><li><imgsrc="images/yundonghui.jpg"/><p>运动会</p></li></ul></div>HTML5+CSS3任务驱动教程任务2网页中的全图排版任务实现（2）为显示更加直观，本任务选用内部样式表的
方式编写CSS代码，直接在<head>中写入<style>标记来编写CSS，首先编写CSSReset可以清除一些标记的特性，如ul、li的边距等，然后编写布局元素layout类，主要是给它固定宽度，水平方向居中对齐。注意：根据之前介绍的盒模型原理，此时layout的宽度应该等于一个li占
据的宽度，再乘以3即可，layout的width=(图片宽度270px+左右外边距20px+li左右边框2px)*3=876px。（3）给图片固定大小为，宽度为270px，高度为160px。并给li标记进行向左浮动，
即可让元素共处同一行，当每显示完3个li元素后，剩余的没有空间显示，自动会进入下一行显示。（4）给<h2>标题内容设置图标进行视觉美化。因此时的图片并不是网页的内容，只是显示效果的辅助，因此此时给<h2>设置背景图像为宜，并且不平铺，加入背景后要
让背景显示在文字的左侧，此时应给<h2>标记添加一些填充留白，以为背景让出摆放的位置。然后给背景图片进行适当的定位，使之显示到合适的位置。最后给元素添加一些边框、字体等属性，CSS代码如下：HTML5+CSS3任务驱动教程任务2网页
中的全图排版任务实现<style>ul,li{margin:0;padding:0;list-style:none;}.layout{width:876px;margin:20pxauto;}.layouth
2{background:url(images/titlebj.jpg)no-repeatleftcenter;line-height:2em;padding-left:66px;font-family:MicrosoftYahei;border-bottom:solid#
31C4F91px;letter-spacing:0.8em;}.layoutli{float:left;border:solid1px#DEF4FC;margin:10px;text-align:center;}.layoutlii
mg{width:270px;height:160px;}HTML5+CSS3任务驱动教程任务2网页中的全图排版最终效果HTML5+CSS3任务驱动教程任务描述任务3多行多列式布局PC上的网站元素越来越多，为使各元素美观大方的呈现出来，通过需要对页面进行排版。通常采用多行或多列的方式去复杂
页面进行整体布局，从而使内容井然有序。本任务通过实现如图9-11所示的多行多列排版布局效果，来学习CSS的背景定位、图标管理及代码优化等知识。HTML5+CSS3任务驱动教程引入知识点任务3多行多列式布局9.4CSS代码优化HTM
L5+CSS3任务驱动教程任务3多行多列式布局9.4CSS代码优化1、网页中的小图标管理网页中的小图标通常是UI设计师为提升网页美观度而添加的网页元素，通常是一种视觉设计上的美化，一般设计得比较小巧精细，完成此部分的网页效果时，通常使用背景图片进行背景定位来辅助完成。通常会将
这些小图标收集起来，用图像处理工具添加在一张图片上，并有明确的尺寸，需要用到各个小图标时，再进行精确定位即可定位到指定的图标了。HTML5+CSS3任务驱动教程任务3多行多列式布局9.4CSS代码优化2、增加
CSS代码重用率主要的代码的改进方法是使用群组选择器，将大部分的公共代码进行集合在群组中，同时也可以使用CSS覆盖，得到代码的重用3、容器高度不扩展的问题在制作CSS网页过程中，在默认情况下，容器的高度默认情况下，会随着容器的内容进行自动扩展
，但在CSS布局中常常会碰到容器不扩展的问题。可以在子容器的最末处添加了一个清除浮动的div容器<divclass="clear"></div>HTML5+CSS3任务驱动教程任务3多行多列式布局任务实现（1）创建HTML文件，添加一个固定宽度、页面居中的主容器<div>标记，作为全页的框架，其
class为content。（2）仔细观察任务效果图，最外层的主容器是固定宽度的，再确定容器中整体的布局结构。本任务可采用两种不同的方式布局，第一种可以采用三列式、固定宽度的布局，再在每一列中分成多行；第二种可以采用右侧方块固定，左侧4个方块固定宽度并自由浮动的布
局。（3）在content所在div中，添加5个<div>标记，并分别设置类名称为service、about、info、resource、news，为优化代码，将5个方块的公共代码抽出来，放入box类中，主要包括边框、浮动等属性，完成div布局元素的HTML代码（4）创建CS
S样式表，为类选择器设置相关布局属性进行定位，其CSS样式代码如下：.content{width:990px;margin:0auto;padding:10px025px0;background:#fff;}.box
{float:left;border:solid1px#e9e9e9;}.service{width:238px;height:233px;}.about{width:488px;height:233px;margin:010px;}.news{widt
h:238px;height:428px;float:right;}.info{width:238px;height:183px;margin:10px010px0;}.resource{width:488px;height:183px;margin:10p
x;}HTML5+CSS3任务驱动教程任务3多行多列式布局任务实现（5）接下来完成每个盒子公共部分的效果，主要体现在标题栏基本相同，此处采用图标管理，将图标放在一张图片上，设置相同的背景图片，主要的CSS代码如下：/*每个盒子
公共部分的CSS*/.box{float:left;border:solid1px#e9e9e9;}.box.top{height:32px;position:relative;border-bottom:solid1px#9ab1b8;}.box.toph2{width
:70px;height:15px;margin:10px000;padding:00035px;border-right:solid1px#7c8d90;background:url("../img/icon.gif")no-repeat;overflow:hidde
n;float:left;font:normal14px"微软雅黑";color:#37585e;line-height:15px;}.box.topa{width:30px;height:15px;background:url("../img/icon.gif")no-re
peat0-105px;overflow:hidden;display:block;position:absolute;top:8px;right:20px;text-indent:-999em;}.box.topa:hover{backgroun
d:url("../img/icon.gif")no-repeat0-120px;}HTML5+CSS3任务驱动教程任务3多行多列式布局任务实现（6）在每个不同的方块中对应应用h2、a、ul、li等标记做好元素的结构，完成的HTML（7）在每个不同的方块中，
利用各自的类来定位不同的背景位置，设置好图标的精确位置，再对各个部分的内容进行细节设计，具体CSS代码（8）此时在浏览器中浏览效果时，发现内容区域背景颜色并不是白色，此问题是由于外层容器content的高度未能实现自动扩展，在HTML结构中添加一个清
除浮动即可解决此问题。HTML5+CSS3任务驱动教程谢谢模块十使用CSS3美化网站元素HTML5+CSS3任务驱动教程目录任务一任务二任务三用CSS3设计网站导航用CSS3美化表格用CSS3美化表单HTML5+CSS3任务驱动教程任务描述任
务1用CSS3设计网站导航网站导航是网站中最重要的元素，也是网站提供给用户简便、快捷的访问内容的入口，帮助用户快速地找到网页中的内容。从形式上看，网站导航主要分横向导航、纵向导航、下拉及多级菜单导航等形式。HTML5+CSS3任务驱动教程引入知识点任务1用CSS3设计网
站导航10.1CSS3背景渐变及阴影10.2CSS超链接样式HTML5+CSS3任务驱动教程任务1用CSS3设计网站导航10.1CSS3背景渐变及阴影1、CSS3渐变CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用
图像来实现这些效果。但是，通过使用CSS3渐变，你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3定义了两种类型的渐变（gradients）：线性渐变（LinearGradients）-向下/向上/向左/向
右/对角方向径向渐变（RadialGradients）-由它们的中心定义本文主要介绍线性渐变的应用。为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色，其语法格式为：background:linear-gradient(direction,co
lor-stop1,color-stop2,...);HTML5+CSS3任务驱动教程任务1用CSS3设计网站导航10.1CSS3背景渐变及阴影2、CSS3阴影阴影在CSS3中可以应用在盒状元素的边框和文字上，就像图片的阴影效果一样。一般可以分为box-shadow盒子阴
影和textshadow文字阴影两类。例如CSS3的box-shadow可以写做：box-shadow:ApxBpxCpx#xxx;Apx指定了水平阴影的距离，Bpx为垂直阴影的距离，Cpx为模糊的距离，#xxx表示阴影的颜色。例如：box-shadow:5px10
px10px#999;即可为盒状元素产生阴影。HTML5+CSS3任务驱动教程任务1用CSS3设计网站导航10.2CSS超链接样式HTML文档最大的特点是，通过超链接打破了传统的一般从上至下的阅读顺序。整个网站可以由超链接串连而成，无论从首页到每个栏目，还是进入其他网站都由无数超链接来实现页面
跳转。CSS对链接的样式控制主要通过伪类来实现，链接的特殊性在于能够根据它们所处的状态来设置它们的样式，链接的四种状态：a:link-普通的、未被访问的链接a:visited-用户已访问的链接a:hov
er-鼠标指针位于链接的上方a:active-链接被点击的时刻超链接的四种状态控制，为我们的链接样式设计提供了良好的接口，特别是通过鼠标经过时的链接样式设计，可以实现丰富的交互效果，接下来在任务中的导
航设计即可体会到其中的好处。HTML5+CSS3任务驱动教程任务1用CSS3设计网站导航任务实现（1）在DreamweaverCC中创建一个空白创建一个HTML5页面，保存为index.html，为使HTML简洁，直接使用<a>标记进行块状化对每一个导航项进行浮动布局，并使用一个<div>容器作
为总容器居中显示。HTML结构如下：<divclass="nav"><ahref="#">首页</a><ahref="#">学院概况</a><ahref="#">管理机构</a><ahref="#">教学部门</a><
ahref="#">招生就业</a><ahref="#">创新创业</a><ahref="#">教辅部门</a><ahref="#">教辅部门</a></div>HTML5+CSS3任务驱动教程任务1用CSS3设计网站导航任务实现（2）接下来设计CSS样式，首先将div容器进行固定，
居中显示，再完成导航的布局，因为<a>标记是行间元素，一般无法实现布局效果，所以需要对<a>标记进行display:block块状化，这样<a>标记具有了盒模型的特性，并可以进行浮动定位。（3）给链接添加一些文本、字体属性
，为有更好的显示效果，为整个导航条添加背景渐变、阴影、圆角效果，添加渐变时，如要考虑到不同浏览器内核问题，需要针对不同内核的前缀，对应添加样式，CSS代码HTML5+CSS3任务驱动教程任务1用CSS3设计网站导航任务实现（4）添加鼠标经过超链接时的a:hover效果增强交互性，这里可
以设置变换背景颜色等效果，完成后在浏览器中预览其效果，效果见图10-2所示。浏览时若无法显示出CSS3的效果，请更换最新版的浏览器测试其效果。HTML5+CSS3任务驱动教程任务描述任务2用CSS3美化表格表
格作为一种非常特殊而实用的数据表达方式，是网页中经常使用的元素，一般用来显示从后台读取出的数据，也可以用表格进行布局操作。同其他HTML标记一样，我们也可以使用CSS对表格进行美化，例如制作细线表格、隔行变色表格、鼠标经过时变色的表格等。
本任务主要通过使用CSS来控制表格的样式，完成一个“隔行变色”的表格效果。表格数据展示效果如图10-3所示。HTML5+CSS3任务驱动教程引入知识点任务2用CSS3美化表格10.3HTML表格HTML5+CSS3任务驱动教程任务2用CSS3美化
表格10.3HTML表格1、表格相关的标记表格由<table>标记来定义。每个表格均有若干行（由<tr>标记定义），每行被分割为若干单元格（由<td>标记定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元
格可以包含文本、图片、列表、段落、表单、水平线、表格等等。除此之处，还有几个专用标记，如<caption>定义表格的名称，<thead>定义表格的表头，<tbody>定义表格的主体，<th>定义表头的单元格，这些标记都有各
自的语义。在应用表格排版时，应充分使用各个标记之间的嵌套来减少CSS类的定义，提升代码的可阅读性。2、CSS3中的nth-child()选择器表格往往用来显示多行的数据，每一行的位置都是平等的，若要设置其中某一行的样式，不是那么方便。如要本次任务中要设置隔行变色，涉及到基数行和偶数行的样式不同
的问题。CSS3中的nth-child选择器为此提供了便利，:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型，其语法格式为：:nth-child(n|even|odd|formula)，各参数的作用见表所示。除IE8及更早的版本以外，所有主流浏览器均支持:n
th-child()选择器。HTML5+CSS3任务驱动教程任务2用CSS3美化表格10.3HTML表格3、hover选择器在前面一个任务中，鼠标经过超链接时，使用:hover在鼠标移到链接上时添加的特殊样式。其实::hover选择器可用于所有元素，不仅是链接。所有主流浏览器都
支持:hover选择器。做表格隔行变色，高亮显示时，可以通过设置CSS中的tr:hover伪类选择器达到效果，一个表格中，要求是当鼠标滑过每一行时，该行就有高亮显示，就是在表格里面的tr加上一个hover样式就行，例如tr:hover{backg
round:yellow;}，这样可以更换行的背景色，但是如果给td加上了背景色，tr:hovertd{...}这样才能出现背景色的变换效果。HTML5+CSS3任务驱动教程任务2用CSS3美化表格任务实现（1）在DreamweaverCC中创建一个空白HTML5页面，在标题处输入“CSS3表格
美化”，保存为index.html。充分选用表格的语义化标记，进行表格内容的结构定义，主要包括表格的标题、表头、主体等，HTML代码参考如下：<table><caption>第九届蓝桥杯全国软件省赛获奖名单</caption><thead><tr><th>考生姓名</th><th>科目名称
</th><th>奖项</th><th>是否进入国赛</th><th>专业班级</th></tr></thead><tbody><tr><td>张景廉</td><td>C/C++程序设计大学C组</td><td>一等奖</td><td>是</td
><td>16计应8班</td></tr>……</tbody></table>HTML5+CSS3任务驱动教程任务2用CSS3美化表格任务实现（2）为显示更加直观，本任务选用内部样式表的方式编写CSS代码，直接在<head>中
写入<style>标记来编写CSS，为使代码简洁，本任务直接使用标记选择器来控制表格各元素的属性。（3）设置表格的边框，表格的边框主要是对table、td、th这三个标记进行设置，table负责表格外边框，对重复的线条，使用b
order-collapse:collapse属性进行重合，适当设置一些内容的填充，表格会按所在单元格的内容自动扩充容器而占据宽度。（4）设置表头的背景颜色，此处有两种设置方法，一种是对th进行设置，一种是对thead设置。显然thead是外层元素，表示整个表头，选
择thead更加合适一些。（5）设置隔行变色效果，注意此处针对的行，是表格主体内容的行，因此选择器应该选择tbody下面的偶数个tr进行样式设计，代码格式为：tbodytr:nth-child(even){}
。HTML5+CSS3任务驱动教程任务2用CSS3美化表格任务实现（6）设置鼠标经过时，高亮显示效果，此时使用hover伪类，即可方便实现，代码格式为：tbodytr:hover｛｝。最后给元素添加字体、文本等属性，CSS代码如下：<style>captio
n{/*设置表格标题的样式*/font-family:"黑体";font-size:1.6em;line-height:1.8em;}table{border:solid4px#829B7E;}td,th{border:dashed1px#829B7E;tex
t-align:center;}table,td,th{border-collapse:collapse;/*将边框进行重合*/}td,th{padding:10px20px;}thead{background:#D7FBDF}tbodytr:nth-c
hild(even){background:#eee;/*对表格内容区域设置偶数行变色*/}tbodytr:hover{background:#033805;/*鼠标经过时高亮显示*/color:#fff;}<
/style>HTML5+CSS3任务驱动教程任务2用CSS3美化表格任务实现（7）在浏览器中浏览网页效果，效果如图10-4所示，若部分CSS3的效果无法显示，请使用新版的浏览器测试。HTML5+CSS3任务驱
动教程任务描述任务3用CSS3美化表单表单(form)在功能型网站中，是网页浏览者与网站服务器之间进行信息传递的重要工具，也是网站交互中重要的元素。在网页中，小到搜索框，大到注册表单，用户控制面板，都需要使用表单及表单元
素进行设计。用户在网页上进行注册、登陆、留言等操作时，都是通过表单向网站数据库提交或读取数据的。本任务中，我们通过模仿QQ注册表单页面，来学习CSS3对表单的美化方法，浏览效果如图10-5所示，部分交互
效果可通过网址https://ssl.zc.qq.com在QQ官方网站浏览。HTML5+CSS3任务驱动教程引入知识点任务3用CSS3美化表单10.4CSS属性选择器HTML5+CSS3任务驱动教程任务3用CSS3美化表单10.4CSS属性选择器CSS
选择器中，比较常用的是标记选择器、类选择器、ID选择器、伪类选择器等，而属性选择器是一种特殊类型的选择器。属性选择器可以指定具有特定属性的HTML元素样式，具有特定属性的HTML元素样式不仅仅是class和id。例如，给表单元素设置样式时，可以通过以下代码设置相同类型的元素，但拥有
的属性不同的CSS样式：参数描述[attribute]用于选取带有指定属性的元素。[attribute=value]用于选取带有指定属性和值的元素。[attribute~=value]用于选取属性值中包含指定词汇的元素。[attribute|=value]用于选取带有以指定值开头的
属性值的元素，该值必须是整个单词。[attribute^=value]匹配属性值以指定值开头的每个元素。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值中包含指定值的每个元素。HTML5+CSS3任务驱动
教程任务3用CSS3美化表单任务实现（1）创建HTML文件，添加布局元素，左侧放图片，右侧放表单，并保持一定的距离。（2）在右侧的表单中，加入各表单元素，主要有文本输入框、密码框、下拉列表、电话号码输入框，以及提交按钮，主要的HTML代码如下：<divclas
s="left"><imgsrc="01-4.jpg"/></div><divclass="zc"><h1>欢迎注册QQ</h1><h3>每一天，乐在沟通。</h3><form><p><inputtype="text"placehol
der="昵称"autofocus="autofocus"/></p><p><inputtype="password"placeholder="密码"/></p><p><select><option>+86</option><option>中国+86</option><option>中国香
港特别行政区+852</option><option>中国澳门特别行政区+853</option></select><inputtype="tel"placeholder="手机号码"/></p><p><inputtype="submit"valu
e="立即注册"/></p></form></div>HTML5+CSS3任务驱动教程任务3用CSS3美化表单任务实现（3）编写CSS样式，首先可以编写布局控制好页面，及浮动效果，然后对表单元素进行样式设计，此处可先写公共的样式，即所有元素都具有的外观，这里有
两种类型，一种是input，一种是select，可合并在一组来写，属性主要有宽度、高度、行高、填充、圆角、边框、字体大小等。（4）下拉列表及电话号码输入框，因为要处同一行，所以需要进行浮动，此时，对select元素及input[t
ype='tel']这两个元素分别设置不同的宽度及浮动。（5）对提交按钮进行样式设计，采用属性选择器input[type='submit']，因提交按钮没有边框和填充，因此需要给它添加一点宽度，这样才能与上面的元素宽度对齐，并给
提交按展示设置背景颜色、文字颜色、外边距，同时需要清除浮动（因上面的元素进行了浮动）。（6）给所有表单元素input和select，使用伪类:hover和:focus添加交互效果，主要设置其边框颜色等。注意：:focu
s选择器用于选取输入获得焦点的元素，此属性之前较少使用，主要用在表单元素中。最后，对一些细节的字体、宽度、边距等做一些细节设置，完成CSS代码HTML5+CSS3任务驱动教程任务3用CSS3美化表单任务实现（8）完成后在浏览器中浏览效果，若有没有达到的效果，再次进行修正，最终浏览效果如图10-6所
示。HTML5+CSS3任务驱动教程谢谢模块十一综合案例HTML5+CSS3任务驱动教程具体任务学校网站页面设计HTML5+CSS3任务驱动教程具体任务学校网站页面设计本任务设计一个完整的学校网站页面，包括网站和网页的建立、CSS样式的设计和网页相关信息功能的设计，网页效果如图所示。我
们能够清晰地看到页面的整体结构分布，其顶部为导航信息栏，中间是关于学校的相关介绍及学校、学院的最新消息展示等，底部为网站信息、版权声明等内容。整个页面的设计涵盖了本书各个模块的知识，通过实现本任务，可以较好地将理论知识转化为实践能力。HTML5+CSS3任务驱动教程任务实现学校网站页
面设计（1）启动DreamweaverCC2017软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点HTML5+CSS3任务驱动教程任务实现学校网站页面设
计（1）启动DreamweaverCC2017软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点学校网站文件夹下包含网站的index.html主页文件、course.h
tml子页文件，以及style和images两个文件夹，分别用于存放网站需要的CSS样式文件和图片文件。HTML5+CSS3任务驱动教程任务实现学校网站页面设计（2）建立CSS样式文件，如图所示。编辑层级样式表内容，然后保存到style文件夹下，方便整体管理网站的代码。
HTML5+CSS3任务驱动教程任务实现学校网站页面设计（3）导航的代码设计与分析。①导航页面设计的代码如下：<divclass="header"><divclass="header-top"><divclass="container"><divclass="detail"><ul
><li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li><li><iclass="glyphiconglyphicon-time"aria
-hidden="true"></i>周一到周五9:00到18:00</li></ul></div><divclass="indicate"><p><iclass="glyphiconglyphicon-map-m
arker"aria-hidden="true"></i>学校路666号</p></div><divclass="clearfix"></div></div></div><divclass="container"><navclass="navbarnavbar-
default"><divclass="container-fluid"><!---Brandandtogglegetgroupedforbettermobiledisplay---><divclass="navbar-header"><butt
ontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-
expanded="false"><spanclass="sr-only">Togglenavigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></spa
n><spanclass="icon-bar"></span></button><divclass="navbar-brand"><h1><ahref="index.html">学校<span>主页</span></a></h1></div></d
iv><!--Collectthenavlinks,forms,andothercontentfortoggling--><divclass="collapsenavbar-collapse"id="bs-
example-navbar-collapse-1"><navclass="link-effect-2"id="link-effect-2"><ulclass="navnavbar-nav"><liclass
="active"><ahref="index.html"><spandata-hover="Home">主页</span></a></li><li><ahref="about.html"><spandata-hover="About">关于我们</span></a></
li><li><ahref="services.html"><spandata-hover="Services">提供服务</span></a></li><li><ahref="projects.html"><spandata-hover="Projects">计划与
安排</span></a></li><li><ahref="courses.html"><spandata-hover="Courses">课程</span></a></li><li><ahref="codes.html"><span
data-hover="Codes">资源库</span></a></li><li><ahref="contact.html"><spandata-hover="Contact">联系我们</span></a></li></ul></nav></div></div
></nav></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计（3）导航的代码设计与分析。通过使用<ul>和<li>标记，可以实现网站导航栏列表，对于导航中的各个条目，
填入需要表现的导航信息，展示导航内容。通过<nav>标记定义导航中的链接部分，将导航中的各条目内容转化为链接，实现不同内容主页的跳转。HTML5+CSS3任务驱动教程任务实现学校网站页面设计②导航CS
S样式设计的代码如下：定义<nav>标签的样式，通过position，display等属性控制导航栏内位置显示等属性。对于每个条目，通过background属性，设置整个header内的背景颜色，进一步还可通过padding属性设置对应区域内边距。nava{position:relative;d
isplay:inline-block;outline:none;text-decoration:none;}nava:hover,nava:focus{outline:none;}.header{background:#49872E;}.header-top{padding:1e
m0;background:#2e353f;}HTML5+CSS3任务驱动教程任务实现学校网站页面设计通过上述代码可以得到如图所示的效果。HTML5+CSS3任务驱动教程任务实现学校网站页面设计（4）主体部分的代码设计与分析。①学校宣传信息的代码如下：通过<img>
标记设置区块背景，用于展示学校风景。<divclass="banner"><div><imgsrc="image/1.jpg"alt=""width="100%"/></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计②学校宣传信息底部条幅页面设计的代码如下：通过<h
4>标记设置标题，通过<i>标记设置文本斜体。<divclass="banner-bottom"><divclass="col-md-3ban-grid"><divclass="ban-left"><h4>师资力量</h4></div><divclass="ban-ri
ght"><iclass="glyphiconglyphicon-user"></i></div><divclass="clearfix"></div></div><divclass="col-md-3
ban-grid"><divclass="ban-left"><h4>视频课程</h4></div><divclass="ban-right"><iclass="glyphiconglyphicon-facetime-video"></
i></div><divclass="clearfix"></div></div><divclass="col-md-3ban-grid"><divclass="ban-left"><h4>图书馆</h4></div><divclass="ban-right"><ic
lass="glyphiconglyphicon-book"></i></div><divclass="clearfix"></div></div><divclass="col-md-3ban-grid"><divclas
s="ban-left"><h4>在线课程</h4></div><divclass="ban-right"><iclass="glyphiconglyphicon-blackboard"></i></div><di
vclass="clearfix"></div></div><divclass="clearfix"></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计③学校宣传信息底部条幅CSS设计的代码如下：.banner-bottom
{text-align:center;background:#EDF7FF;}.ban-gridi{font-size:2.5em;color:#373737;transition:0.5sall;-webkit-transit
ion:0.5sall;-moz-transition:0.5sall;-o-transition:0.5sall;-ms-transition:0.5sall;}.ban-gridh4{font-size:2em;color:#F58703;text-transfor
m:capitalize;}.ban-gridp{font-size:1em;line-height:1.8em;margin-top:0.5em}.ban-grid:hoverdiv.ban-righti{color:#49872E;}.
ban-left{float:left;width:70%;}.ban-right{float:left;width:30%;}.ban-grid{padding:2em0;}HTML5+CSS3任务驱动教程任务实现学校网站页面设计该部分主要用于底部条幅的样式设
计，通过text-align设置文本对齐方式，通过background设置背景颜色，通过width设置元素宽度，通过float设置元素浮动等。通过上述代码可以得到如图所示的效果。HTML5+CSS3任务驱动教程任务实
现学校网站页面设计④欢迎展示部分页面设计的代码如下：通过<div>标记合理划分显示区域，通过<h4>标记显示标题信息。<divclass="welcome-w3"><divclass="container"><h2class="tittle">欢迎加入我们学校</h2><divcl
ass="wel-grids"><divclass="col-md-4wel-grid"><divclass="port-7effect-2"><divclass="image-box"><imgsrc="图片/8.jpg"class="img-responsive"a
lt="Image-2"></div><divclass="text-desc"><h4>学习生活</h4></div></div><divclass="port-7effect-2"><divclass="image-box"><imgsrc="图片/6.
jpg"class="img-responsive"alt="Image-2"></div><divclass="text-desc"><h4>学习生活</h4></div></div></div><divclass="col-md-4wel
-grid"><imgsrc="图片/7.jpg"class="img-responsive"alt="Image-2"><divclass="text-grid"><h4>学习生活</h4></div></div><divclass="col-md-4wel-grid"><di
vclass="port-7effect-2"><divclass="image-box"><imgsrc="图片/9.jpg"class="img-responsive"alt="Image-2"></div><divclass="text-desc"><h4>学习生活</h4></div></
div><divclass="port-7effect-2"><divclass="image-box"><imgsrc="图片/10.jpg"class="img-responsive"alt="Image-2"></div><divclass="text-d
esc"><h4>学习生活</h4></div></div></div><divclass="clearfix"></div></div></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计⑤欢迎展示部分CSS设计的代码如下：通过上述代码可以得到如图所示的效果。
.welcome-w3,.new-w3agile,.about-w3,.services-w3l,.projects-agile,.courses-w3ls,.statistics-w3,.typo-w3,.contact-w3l{padding:
5em0;}.wel-grids,.student-grids,.about-grids,.what-grids,.staff-grids,.statistics-grids,.services-grids,.ourser-grids,.course-grids{ma
rgin-top:4em;}HTML5+CSS3任务驱动教程任务实现学校网站页面设计⑥学生风貌展示部分页面设计的代码如下：通过<ul>和<li>标记展示学生获得的荣誉列表，通过<p>标记和<h4>标记
展示段落和标题信息。<divclass="student-w3ls"><divclass="container"><h3class="tittle">我们的学生</h3><divclass="student-grids">
<divclass="col-md-6student-grid"><h4>学生荣誉墙</h4><p>学生在校期间可参加社团活动、专业竞赛、人文比赛、公益活动等有趣的校园活动，同时学校为优秀学生提供相应的学校
、企业以及国家等奖学金，同时提供一些国内外大学的交流。</p><p>在每年都有很多学生在不同领域取得优异的成果。</p><ulclass="grid-part"><li><iclass="glyphicongly
phicon-ok-sign"></i>2018年10月小明同学获得机器人比赛一等奖</li><li><iclass="glyphiconglyphicon-ok-sign"></i>2018年9月小红同学获得校园唱歌比赛二等奖</li><li><ic
lass="glyphiconglyphicon-ok-sign"></i>2018年9月小张同学获得国家奖学金</li><li><iclass="glyphiconglyphicon-ok-sign"></i>2018年7月小王同学
获赴美交流机会</li><li><iclass="glyphiconglyphicon-ok-sign"></i>2018年6月小杨同学获得田径、100米等多项比赛一等奖</li></ul></div
><divclass="col-md-6student-grid"><imgsrc="图片/20.jpg"class="img-responsive"alt="Image-2"></div><divclass="clea
rfix"></div></div></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计⑦学生风貌展示部分CSS样式设计的代码如下：通过上述代码可以得到如图所示的效果。.student-w3ls{padding:5em0;ba
ckground:#EDF7FF}.student-gridh4{font-size:2em;color:#F58703;}.student-gridp{font-size:1em;padding-top:1e
m;}HTML5+CSS3任务驱动教程任务实现学校网站页面设计⑧名人名言展示部分页面设计的代码如下：通过<p>标记和<h5>标记展示段落和标题信息，凸显文字内容。<divclass="testimonials-w3"><divclass="container"><
h3class="tittle2">名人名言</h3><divclass="test-grid"><imgsrc="images/quote.png"alt=""/><h5>人生就是学校。在那里，与其是幸福，毋宁是不幸才是好的教师。因为，生存是在深渊的孤独里。</h5><p><i>海德
格尔</i></p></div></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计⑨名人名言展示部分CSS样式设计的代码如下：通过上述代码可以得到如图所示的效果。.tes
timonials-w3{background:url(../images/ba.jpg)no-repeat0px0px;background-size:cover;-webkit-background
-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover;min-height:500px;text-align:center;
padding:5em00;}.testimonials-w3h5{font-size:2.5em;color:#fff;width:66%;margin:.5emauto0;line-height:1.5em;}.testimonials-w3p{colo
r:#fff;font-size:1.2em;text-align:right;}HTML5+CSS3任务驱动教程任务实现学校网站页面设计⑩新闻动态展示部分页面设计的代码如下：通过<p>标记和<h5>标记展示段落和标题信息，凸显文字内容。<divclass="ne
w-w3agile"><divclass="container"><divclass="new-grids"><divclass="col-md-4new-left"><h3class="tittle1">学院要闻</h3><div
class="new-top"><h5>9月14日</h5><p>计算机学院开展计算机技能比赛</p></div><divclass="new-top1"><h5>9月13日</h5><p>计算机学院邀请张教授进行专家讲座</p></div><divclass="new-top"
><h5>9月12日</h5><p>人文学院开展读书月活动</p></div><divclass="new-top1"><h5>9月11日</h5><p>外语学院开设英语角</p></div><divclass="new-top"><h5>9月10日</h5><p>自动化学院师
生代表下企业交流</p></div></div><divclass="col-md-8new-right"><h3class="tittle1">校园动态</h3><h4>我校联合五个企业组织交流学习</h4><p>我校与9日和创新科技,创新银行,创新互
联,创新网络，创新金融五家企业达成联合培养方案，我校计算机专业学生会在大二下学期选择其中一家企业进行实习，提供交流学习机会。</p><divclass="new-bottom"><divclass="new-bottom-left"><imgsrc="图片/11.jpg"class="i
mg-responsive"alt=""></div><divclass="new-bottom-right"><h5>新生军训圆满结束</h5><p>我校新生经过15天的军训，在12日进行汇报演出，在汇报
演出中，新生们朝气蓬勃展现了学生们的良好精神状态，此次军训汇报圆满落幕，他们即将开启全新的大学生活。</p></div><divclass="clearfix"></div></div><h4>第5届校园招聘会召开</h4><p>此次校园招聘会一
共有58家企业参加，其中计算机类40家，自动化专业企业12家，人文类外语类6家。</p></div><divclass="clearfix"></div></div></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计11新闻动态展
示部分CSS样式设计的代码如下：通过上述代码可以得到如图所示的效果。.welcome-w3,.student-w3ls,.new-w3agile,.about-w3,.what-w3,.staff-w3l,.services-w3l,.our-services-w3,.pr
ojects-agile,.courses-w3ls,.statistics-w3,.typo-w3,.contact-w3l{padding:4em0;}.wel-grids,.student-grids,.about-grids,.test-grid
,.what-grids,.staff-grids,.statistics-grids,.services-grids,.ourser-grids,.course-grids{margin-top:3em;}HTML5
+CSS3任务驱动教程任务实现学校网站页面设计（5）底部信息展示部分的代码设计与分析。①底部信息展示部分页面设计的代码如下：<divclass="footer-w3"><divclass="container"><divclass=
"footer-grids"><divclass="col-md-4footer-grid"><h4>关于我们</h4><p>希望你可以加入我们，创造属于你的美丽明天。<span>如果你对我们感兴趣欢迎前来咨询</span></p></div><divclass="col-md
-4footer-grid"><h4>美丽校园</h4><divclass="footer-grid1"><imgsrc="图片/14.jpg"alt=""class="img-responsive"></div><divclass="footer-grid1"><imgsrc=
"图片/13.jpg"alt=""class="img-responsive"></div><divclass="footer-grid1"><imgsrc="图片/20.jpg"alt=""class="img-re
sponsive"></div><divclass="footer-grid1"><imgsrc="图片/12.jpg"alt=""class="img-responsive"></div><divclass="footer-gr
id1"><imgsrc="图片/11.jpg"alt=""class="img-responsive"></div><divclass="footer-grid1"><imgsrc="图片/10.jpg"alt=""class="img-responsiv
e"></div><divclass="clearfix"></div></div><divclass="col-md-4footer-grid"><h4>学校信息</h4><ul><li><iclass="glyphiconglyphicon-map-marker"aria-hi
dden="true"></i>学校路666号</li><li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>66666666666</li
><li><iclass="glyphiconglyphicon-envelope"aria-hidden="true"></i><ahref="mailto:example@mail.com">666666@mail.
com</a></li><li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五09:00到18:00</li></ul></div><d
ivclass="clearfix"></div></div></div></div>HTML5+CSS3任务驱动教程任务实现学校网站页面设计②底部信息展示部分CSS样式设计的代码如下：通过上述代码可以实现如图11-10所示的底部信息
显示效果。.footer-w3{background:#212121;padding:4em0;}.footer-gridh4{font-size:2em;color:#fff;margin-bottom:1em;}.footer-gridulli{list-style
:none;color:#BBB9B9;line-height:2em;font-size:1em;}.footer-gridullii{color:#BBB9B9;line-height:2em;font-size:1em;margin-right:1em;}.foot
er-gridullia{color:#999;text-decoration:none;}.footer-grid1{float:left;width:31.45%;margin:00.3em.3em0em;}.footer-gridp{font-size:1em;color:
#BBB9B9;}.footer-gridpspan{display:block;margin:1em00;}HTML5+CSS3任务驱动教程任务实现学校网站页面设计（6）子页面代码的设计与分析。根据主页用到的标记和CSS样式，我们可以设计各个子页面，展示不同角度的学校风
采，下面以课程展示子页面的设计为例。①课程展示子页面设计的代码如下：HTML5+CSS3任务驱动教程任务实现学校网站页面设计<!DOCTYPEhtml><html><head><title>Courses</title><!--css--><linkhref="css/bootstrap
.css"rel="stylesheet"type="text/css"media="all"/><linkhref="css/style.css"rel="stylesheet"type="text/css"media="all"/><!--css--><metaname="view
port"content="width=device-width,initial-scale=1"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content="
"/><scripttype="application/x-javascript">addEventListener("load",function(){setTimeout(hideURLbar,0);},false);functionhideURLbar()
{window.scrollTo(0,1);}</script><!--webfonts--><linkhref="http://fonts.googleapis.com/css?family=Cagliostro"rel="stylesheet"type="text/css"><lin
khref="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic"rel
="stylesheet"type="text/css"><!--webfonts--></head><body><!--header--><divclass="header"><divclass="header-top"><divclass="containe
r"><divclass="detail"><ul><li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li><li><iclass="glyphiconglyphicon-time"ari
a-hidden="true"></i>周一到周五9:00到18:00</li></ul></div><divclass="indicate"><p><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>学校路666号</p>
</div><divclass="clearfix"></div></div></div><divclass="container"><navclass="navbarnavbar-default">
<divclass="container-fluid"><!---Brandandtogglegetgroupedforbettermobiledisplay---><divclass="navbar-header"><buttontype="button"c
lass="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><spanclass="sr-only">Togglenav
igation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><
divclass="navbar-brand"><h1><ahref="index.html">学校<span>主页</span></a></h1></div></div><!--Collectthenavlinks,forms,andothercontentfortoggling--><divc
lass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"><navclass="link-effect-2"id="link-effect-2"><ulclass="navnavbar-nav"><liclass="ac
tive"><ahref="index.html"><spandata-hover="Home">主页</span></a></li><li><ahref="about.html"><spandata-hover="About">关
于我们</span></a></li><li><ahref="services.html"><spandata-hover="Services">提供服务</span></a></li><li><ahref="projects.htm
l"><spandata-hover="Projects">计划与安排</span></a></li><li><ahref="courses.html"><spandata-hover="Courses">课程</span></a></li><li><
ahref="codes.html"><spandata-hover="Codes">资源库</span></a></li><li><ahref="contact.html"><spandata-hove
r="Contact">联系我们</span></a></li></ul></nav></div></div></nav></div></div><!--header--><divclass="banner-w3agile"><divclass="container"><h3
><ahref="index.html">主页</a>/<span>课程</span></h3></div></div><divclass="serach-w3agile"><divclass="contai
ner"><h3class="tittle2">查找课程</h3><divclass="place-grids"><divclass="col-md-2place-grid"><selectclass="sel"><
optionvalue="">专业</option></select></div><divclass="col-md-2place-grid"><selectclass="sel"><optionvalue="
">年级</option></select></div><divclass="col-md-2place-grid"><selectclass="sel"><optionvalue="">开课学期</option></select></d
iv><divclass="col-md-2place-grid"><selectclass="sel"><optionvalue="">课程名</option></select></div><divclass="col-md
-4place-grid"><formaction="#"method="post"><inputtype="submit"value="查找"></form></div><divclass="clearfix"></div></div></div></div><!--co
ntent--><divclass="content"><divclass="courses-w3ls"><divclass="container"><h2class="tittle">主要课程</h2><divclass="course-grids
"><divclass="col-md-6course-grid"><divclass="mask"><imgsrc="图片/15.jpg"class="img-responsivezoom-img"/></div><
/div><divclass="col-md-6course-grid1gri"><h4>高等数学</h4><p>广义地说，初等数学之外的数学都是高等数学，也有将中学较深入的代数、几何以及简单的集合论初步、逻辑初步称为中等数学的，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。</p>
<p>通常认为，高等数学是由微积分学，较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科。</p><ulclass="grid-part"><li><iclass="glyphiconglyphicon-ok-sign"></i>微积分</
li><li><iclass="glyphiconglyphicon-ok-sign"></i>线性代数</li></ul></div><divclass="clearfix"></div></div><divclass="course-grids"><divcl
ass="col-md-6course-grid1"><h4>编程语言</h4><p>编程语言（programminglanguage），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计
算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。</p><p>编程语言（programminglanguage），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，
用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。</p><ulclass="grid-part"><li><iclass="glyphiconglyphicon-ok-sign"></i>机器语言</l
i><li><iclass="glyphiconglyphicon-ok-sign"></i>汇编语言</li><li><iclass="glyphiconglyphicon-ok-sign"></i>高级语言</li></ul></div><divclass="col-md-6co
urse-gridgri"><divclass="mask"><imgsrc="图片/16.jpg"class="img-responsivezoom-img"/></div></div><divclass="clearfix"
></div></div><divclass="course-grids"><divclass="col-md-6course-grid"><divclass="mask"><imgsrc="图片/18.jpg"class="img-responsivezoom-img"/></div></di
v><divclass="col-md-6course-grid1gri"><h4>大学英语</h4><p>随着英语的普及，大学生对于英语的掌握程度也要有所提升，所以在大学我们开设了两学期的英语课程。</p><p>第一学期的英
语课主要培养读和写的能力，第二学期的英语可主要培养听和说的能力。</p><ulclass="grid-part"><li><iclass="glyphiconglyphicon-ok-sign"></i>听</li><li><iclass="glyphicongl
yphicon-ok-sign"></i>说</li><li><iclass="glyphiconglyphicon-ok-sign"></i>读</li><li><iclass="glyphicon
glyphicon-ok-sign"></i>写</li></ul></div><divclass="clearfix"></div></div></div></div></div><!--content--><!--footer--><divclass="fo
oter-w3"><divclass="container"><divclass="footer-grids"><divclass="col-md-4footer-grid"><h4>关于我们</h4><p>希望你可以
加入我们，创造属于你的美丽明天。<span>如果你对我们感兴趣欢迎前来咨询</span></p></div><divclass="col-md-4footer-grid"><h4>美丽校园</h4><divclass="footer-
grid1"><imgsrc="images/w1.jpg"alt=""class="img-responsive"></div><divclass="footer-grid1"><imgsrc="images/
w2.jpg"alt=""class="img-responsive"></div><divclass="footer-grid1"><imgsrc="images/w4.jpg"alt=""class="img-responsive"></div><divclass=
"footer-grid1"><imgsrc="images/w5.jpg"alt=""class="img-responsive"></div><divclass="footer-grid1"><imgsrc="images/w6.jpg"alt=""class="im
g-responsive"></div><divclass="footer-grid1"><imgsrc="images/w2.jpg"alt=""class="img-responsive"></div><divclass="
clearfix"></div></div><divclass="col-md-4footer-grid"><h4>学校信息</h4><ul><li><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>学校路6
66号</li><li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>66666666666</li><li><iclass="glyphiconglyphico
n-envelope"aria-hidden="true"></i><ahref="mailto:example@mail.com">666666@mail.com</a></li><li><iclass="gly
phiconglyphicon-time"aria-hidden="true"></i>周一到周五09:00到18:00</li></ul></div><divclass="clearfix"></div></div></di
v></div><!--footer--><!---copy---><divclass="copy-section"><divclass="container"><divclass="social-icons"><ahref="#"><iclass="icon1"></i></a><
ahref="#"><iclass="icon2"></i></a><ahref="#"><iclass="icon3"></i></a><ahref="#"><iclass="icon4"></i></a></div>
<divclass="copy"><p>Copyright©2018@<ahref="http://www.cssmoban.com/"target="_blank"title="学校网站">学校网站</a>-Collectfrom<ahref
="http://www.cssmoban.com/"title="学校网站"target="_blank">学校网站</a></p></div></div></div><!---copy---></body></html>HTML5+CSS3任务驱动教程任务实现学校网
站页面设计通过上述代码可以实现如图所示的课程展示页面效果。HTML5+CSS3任务驱动教程谢谢
辽公网安备 21102102000191号
营业执照
