单元2美丽鲜花网店—HTML标签与CSS样式基础《WEB前端开发实用案例教程》课件.pptx

1、WEB前端开发实用案例教程 第二单元 美丽鲜花网店 HTML标签与CSSS样式基础 HTML作为网页的骨架，决定了有哪些元素,那么CSS就是网页的血肉，决定了这些元素以什么样的形式展现。HTML的作用就是用来表示一个网页由哪些元素组成，每一个标签都会在网页中渲染出对应的元素。因此，网页主要有3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。我们将要学习的HTML标签和CSS层叠样式表就是网页结构层和表现层的具体体现。教学目标：掌握Dreamweaver中插入文字、图像、列表、超链接等HTML元素方法，以及网页各元素标签的写法，能够编写网页结构层

2、代码 掌握CSS样式表语法规则 掌握CSS样式表中选择器的使用，能够对网页元素进行修饰 掌握在页面中引入CSS样式表的4种方式（内嵌样式、行内样式、链接样式和导入样式），能够根据需要选择合适的方式将CSS样式引入到网页中目录页/Contents01 任务 1 制作鲜花网页结构HTML标签介绍02 任务 2 修饰鲜花网页CSS样式基础知识储备01 任务1 制作鲜花网页结构HTML标签介绍【知识储备】1.HTML与CSS简介 HTML是HyperText Markup Language（超文本标记语言）的英文缩写，是用于设计网页的主要语言。用HTML编写的超文本文档称为HTML文档，扩展名为“.h

3、tml”，也就是网页。CSS（Cascading Style Sheets）中文名为“层叠样式表”，用于设置网页中各标签的样式。在网页制作中，HTML属于网页的结构层部分，用来确定网页的内容和结构；CSS属于网页的表现层部分，用于设置网页的样式。2.HTML的标签构成 HTML文件是由一系列元素和标签组成的。元素是HTML文件的重要组成部分，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。任务1 制作鲜花网页结构HTML标签介绍【知识储备】HTML文件是由一系列元素和标签组成的。元素是HTML文件的重要组成部分，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件

4、中的位置。HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含首标签和尾标签。首标签的格式为，尾标签的格式为，首标签和尾标签的中间为元素内容。标签内容 任务1 制作鲜花网页结构HTML标签介绍【知识储备】成对标签仅对包含在其中的内容起作用，如标题标签和用于界定标题元素的范围。除成对标签外，也存在少量的单标签，其格式为，作用是在相应位置插入元素，如换行标签表示在该标签所在位置插入一个换行符。在HTML文件中，每个标签都有名称、可选择的属性和标签内容，标签的属性都在首标签内标明。首标签的基本语法如下：尾标签的语法格式：在HTML文件中，某个标签的完整定义语法如下：标签内容

5、（文本或超文本）任务1 制作鲜花网页结构HTML标签介绍【知识储备】3.元素 当一段文字被一组HTML标签包含在中间时，则这段文字和包含文字的HTML标签一起被称为一个元素。在所有HTML文件中，最外层的元素是由标签建立的，在标签所建立的元素中，包含了两个主要的子元素，这两个子元素是由标签与标签所建立的。标签所建立的元素的内容为文件头部，而标签所建立的元素内容为文件主体。4.HTML标题、水平线、段落和换行1）HTML标题 标题的作用是让用户快速了解文档的结构与大致信息，它是通过等标签对进行定义的。标签对定义最大的一号标题；标签对定义最小的六号标题。这是一号标题 这是二号标题 这是三号标题 这

6、是四号标题 这是五号标题 这是六号标题 任务1 制作鲜花网页结构HTML标签介绍【知识储备】2）水平线 水平线主要是用来分隔网页中的内容。水平线标签是一个单标签，其作用是在HTML页面中创建水平线。3）段落 HTML段落是通过标签对进行定义的。4）换行 段落中内容情况进行换行，需使用标签。这是段落文字 这是段落文字 这是段落文字 段落中内容 进行换行的使用 段落内容 任务1 制作鲜花网页结构HTML标签介绍【知识储备】5.路径1）绝对路径 绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中的盘符后面用“:”或“:/”分隔，各目录名之间以及目录名与文件名之间用“”或“/”分隔。例如：

7、表示为图像在域名为的服务器中的img目录里；表示为图像在E盘my web目录下的image子目录里。2）相对路径 相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图像或其他文件等的现象。例如：表示为图像位置是当前目录image文件夹里的1.gif图片。任务1 制作鲜花网页结构HTML标签介绍【知识储备】6.HTML超链接1）超链接基本格式 超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点，源端点可以是文字或图像等。HTML超链接主要由标签对和属性h

8、ref构成。要实现链接的跳转，必须要使用属性href。HTML超链接格式表示为:href=”跳转文件的地址”表示为超链接的目标文件的路径。target 属性表示链接目标的打开方式。源端点（如链接文字）任务1 制作鲜花网页结构HTML标签介绍【知识储备】target有4种类型打开方式，分别表示是:target=“_blank”表示保留当前窗口，在新窗口中打开链接的网页；target=_parent 表示在当前窗口打开链接的网页，如果是框架网页，则在父框架中显示打开的链接网页；target=_self 表示在当前窗口打开链接的网页，如果是框架网页，则在当前框架中显示打开的链接网页；target=_

9、top 表示在当前窗口打开链接的网页，如果是框架网页，则删除所有框架，显示打开的网页。任务1 制作鲜花网页结构HTML标签介绍【知识储备】2）超链接分类 超链接分为文字链接、图像超链接、空链接、锚点超链接和邮件超链接几种类型。（1）文字超链接表示为链接文字。（2）图像超链接表示为。（3）空链接表示为 链接实质是无跳转页面，仅在页面上有链接形式。（4）锚点超链接表示为标题名。（5）邮件超链接表示为。素材收集02 创建站点，用Dreamweaver CS制作网页 (实例图片文字内容见本章素材文件夹)实例素材：第二单元“文字.txt”、image 效果文件：第二单元“flower01.html”任务

10、实施03 任务1 制作鲜花网页结构HTML标签介绍【任务实施】鲜花网页的结构部分主要包括输入文本、设置段落、设置标题、设置超链接、插入水平线、插入图像等操作。1）构建HTML结构（1）将素材实例文件夹拷贝至创建My Web站点的根目录中。（2）启动Dreamweaver CS，打开“文件”面板，在拷贝的文件夹中创建一个名为“flower.html”的网页文档，并在文档编辑窗口中打开。（3）添加标题。将文字内容复制粘贴到新建文档的设计视图中，然后依据效果图，查看是否分好段落，如果没有，在设计视图中按Enter键划分段落，并清除空行。任务1 制作鲜花网页结构HTML标签介绍【任务实施】图 2-1

11、页面效果（4）添加标题标签。在“插入”面板中选择“结构”类别，然后单击“标题H1”按钮。如图2-1所示的页面效果。（5）添加水平线。将标题文字和内容文字进行了形式上的分开。（6）设置超链接。（7）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。知识归纳04 HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，Web上的网页是互相连接，单击被称为超链接的文本或图形就可以链接到其他页面。目录页/Contents01 任务 1 制作鲜花网页结构HTML标签介绍02 任务 2 修饰鲜花网页CSS样式基础知识储备01 任务 2 修饰鲜花网页CSS样式基

12、础【知识储备】1.在HTML页面中引入CSS样式表的方法（1）将CSS样式表放置在HTML文件头部，内部样式表中。内部样式表也称嵌入式样式表，是指把对页面各元素的样式设置集中写在标签对中，并且用标签对进行声明，其格式如下：任务 2 修饰鲜花网页CSS样式基础【知识储备】（2）将CSS样式表放置在HTML文件主体：行内样式表。行内样式表是直接对HTML标签使用style属性，然后将CSS代码作为属性值写在其中，其格式如下：（3）将CSS样式表放置在HTML文件外部：链接样式表。要在HTML中链接外部样式表文件，需要在标签对之间添加标签对，具体格式如下：任务 2 修饰鲜花网页CSS样式基础【知识储

13、备】（4）将CSS样式表放置在HTML文件外部：导入样式表。要在HTML文件中导入样式表，需要使用标签对进行声明，并在该标签对中加入import url（外部样式表文件地址）;语句，具体格式如下：其中，import语句后面的“;”是不可省略的。外部样式表文件的文件扩展名必须为“.css”。外部样式表地址可以是绝对地址，也可以是相对地址。import url(外部样式表文件地址);任务 2 修饰鲜花网页CSS样式基础【知识储备】2.选择器的类型 选择器用来对HTML文件的不同标签进行控制，从而使CSS可以对不同的网页元素进行修饰。CSS的语法结构由3部分组成：选择器名、属性和属性值。CSS选择器

14、类型，分别是标签选择器、id选择器和类选择器，伪类选择器和通用选择器。1)标签选择器类型 用法是“div ”，表示为使同一标签的元素拥有相同样式。标签选择器特点是一个HTML文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。例如根据效果要求可以定义标签选择器为：h1 /*设置为h1一级标题*/text-align:center;/*设置文字内容居中*/font-size:42px;/*设置文字为字号42像素*/color:#FF6600;/*设置文字的显示颜色*/任务 2 修饰鲜花网页CSS样式基础【知识储备】2)类选择器类型 用法是“.Class ”表示为使不

15、用的网页元素拥有相同的样式。类选择器特点是使用类（class）选择器可以为相同或不同的标签分类设置不同的样式。使用该选择器时，需要在HTML中为设置同一样式的标签定义相同的类名，即设置标签的类（class）属性，然后在CSS中定义类选择器。定义类选择器时，需要在类名称前面加一个点“.”，语法结构是“.类名”样式属性:取值;样式属性:取值;。例如根据效果要求可以定义类（class）选择器为：.cont /*设置为cont类名*/Color:red;/*设置文字的显示颜色*/Font-size:18px /*设置文字为字号18像素*/任务 2 修饰鲜花网页CSS样式基础【知识储备】3）ID选择器类

16、型 用法是“#id ”表示为精确控制某个元素的具体样式。Id选择器特点是用来对单个元素设置单独的样式，在同一HTML文件中，id名不能重复。id选择器的使用方法与类选择器相似，先在HTML中为希望单独设置样式的标签定义id名（使用标签的id属性），然后在CSS中定义id选择器。定义id选择器时，需要在id名称前面加一个“#”号，语法结构是“#id名”样式属性:取值;样式属性:取值;例如根据效果要求可以定义id选择器为：#main /*设置为main类名*/width:1408px;/*设置宽度为1408像素*/height:536px;/*设置高度为536像素*/任务 2 修饰鲜花网页CSS样

17、式基础【知识储备】4）伪类选择器 用法是“:link,:visited,:hover,:active,:”，分别表示是“：link向未被访问的链接添加样式”，“:visited向已被访问的链接添加样式”，“:hover当鼠标悬浮在元素上方时，向元素添加样式”，“:active向被激活的元素添加样式”。伪类选择器特点是伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它指定的是元素的某种状态。例如根据效果要求定义伪类选择器为：.demo a:linkcolor:gray;/*链接没有被访问前景色为灰色*/.demo a:visited

18、color:yellow;/*链接被访问过后前景色为黄色*/.demo a:hovercolor:green;/*鼠标悬浮在链接上时前景色为绿色*/.demo a:activecolor:blue;/*鼠标点中激活链接那一下前景色为蓝色*/任务 2 修饰鲜花网页CSS样式基础【知识储备】5）通用选择器 用法是“*”表示定义所有网页元素的显示格式，匹配Html中所有标签元素。通用选择器特点是一种特殊类型的选择器，因为涉及范围较广，一般常用于清除页面中元素的边距。例如根据效果要求定义通用选择器为：3.选择器的优先级 选择器的优先级是指当有多个选择器作用于同一HTML文档的同一元素时，即多个选择器的

19、作用范围发生了重叠时，CSS的处理方式。CSS规定选择器的优先级从高到低为：行内样式 id选择器 类选择器 标签选择器。若在同一HTML文档中引入了不同类型的CSS样式文件，则各CSS样式文件的选择器优先级别为：行内样式表 内嵌样式表 链接样式表 导入样式表*margin:0;/*设置页面外边距为0像素*/padding:0;/*设置页面内边距为0像素*/素材收集02创建站点，用Dreamweaver CS制作网页（实例图片文字内容见本章素材文件夹）实例素材：第二单元“文字.txt”、image 效果文件：第二单元“flower.html”任务实施03 任务 2 修饰鲜花网页CSS样式基础【任

20、务实施】1）构建CSS样式（1）页面中引入CSS样式属性方法。在标签之间输入如下代码：（2）设置CSS样式属性整体页面中文字、图像元素代码 pcolor:#9C0;font-size:18px;font-weight:bolder;body background-image:url(image/flower.png);background-repeat:no-repeat;a:linkcolor:#FC3;h1color:#F09;.onefont-size:24px;color:#FC3;font-weight:bolder;任务 2 修饰鲜花网页CSS样式基础【任务实施】（3）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。可见如图所示:图2-2 预览效果页面 知识归纳04 为避免浏览器的不兼容问题，我们应尽量规范化选择器的命名规则，包括：一律小写；以字母开头，由字母和数字组成；尽量不加中杠和下划线；尽量用英文，尽量见名知意等。谢 谢 观 看