《《WEB前端开发实用案例教程》单元2 美丽鲜花网店—HTML标签与CSS样式基础》由会员分享，可在线阅读，更多相关《《WEB前端开发实用案例教程》单元2 美丽鲜花网店—HTML标签与CSS样式基础（34页珍藏版）》请在金锄头文库上搜索。
1、WEB前端开发实用案例教程,第二单元美丽鲜花网店HTML标签与CSSS样式基础,HTML作为网页的骨架，决定了有哪些元素,那么CSS就是网页的血肉，决定了这些元素以什么样的形式展现。HTML的作用就是用来表示一个网页由哪些元素组成，每一个标签都会在网页中渲染出对应的元素。因此，网页主要有3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。我们将要学习的HTML标签和CSS层叠样式表就是网页结构层和表现层的具体体现。教学目标：掌握Dreamweaver中插入文字、图像、列表、超链接等HTML元素方法，以及网页各元素标签的写法，能够编写网页结构层代码
2、掌握CSS样式表语法规则掌握CSS样式表中选择器的使用，能够对网页元素进行修饰掌握在页面中引入CSS样式表的4种方式（内嵌样式、行内样式、链接样式和导入样式），能够根据需要选择合适的方式将CSS样式引入到网页中,目录页/Contents,01,任务1制作鲜花网页结构HTML标签介绍,02,任务2修饰鲜花网页CSS样式基础,知识储备,01,任务1制作鲜花网页结构HTML标签介绍【知识储备】,1.HTML与CSS简介HTML是HyperTextMarkupLanguage（超文本标记语言）的英文缩写，是用于设计网页的主要语言。用HTML编写的超文本文档称为HTML文档，扩展名为“.html”，也就
3、是网页。CSS（CascadingStyleSheets）中文名为“层叠样式表”，用于设置网页中各标签的样式。在网页制作中，HTML属于网页的结构层部分，用来确定网页的内容和结构；CSS属于网页的表现层部分，用于设置网页的样式。2.HTML的标签构成HTML文件是由一系列元素和标签组成的。元素是HTML文件的重要组成部分，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。,任务1制作鲜花网页结构HTML标签介绍【知识储备】,HTML文件是由一系列元素和标签组成的。元素是HTML文件的重要组成部分，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。HTML
4、标签是由尖括号括起来的关键词，绝大多数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）绝对路径绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中的盘符后面用“:”或“:/”分隔，各目录名之间以及目录名与文件名之间用“”或“/”分隔。例如：表示为图像在域名为的服务器中的img目
7、录里；表示为图像在E盘myweb目录下的image子目录里。2）相对路径相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图像或其他文件等的现象。例如：表示为图像位置是当前目录image文件夹里的1.gif图片。,任务1制作鲜花网页结构HTML标签介绍【知识储备】,6.HTML超链接1）超链接基本格式超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点，源端点可以是文字或图像等。HTML超链接主要由标签对和属性href构成。要实现链接的跳转，必须要使用属
8、性href。HTML超链接格式表示为:href=”跳转文件的地址”表示为超链接的目标文件的路径。target属性表示链接目标的打开方式。,源端点（如链接文字）,任务1制作鲜花网页结构HTML标签介绍【知识储备】,target有4种类型打开方式，分别表示是:target=“_blank”表示保留当前窗口，在新窗口中打开链接的网页；target=_parent表示在当前窗口打开链接的网页，如果是框架网页，则在父框架中显示打开的链接网页；target=_self表示在当前窗口打开链接的网页，如果是框架网页，则在当前框架中显示打开的链接网页；target=_top表示在当前窗口打开链接的网页，如果是框
9、架网页，则删除所有框架，显示打开的网页。,任务1制作鲜花网页结构HTML标签介绍【知识储备】,2）超链接分类超链接分为文字链接、图像超链接、空链接、锚点超链接和邮件超链接几种类型。（1）文字超链接表示为链接文字。（2）图像超链接表示为。（3）空链接表示为链接实质是无跳转页面，仅在页面上有链接形式。（4）锚点超链接表示为标题名。（5）邮件超链接表示为。,素材收集,02,创建站点，用DreamweaverCS制作网页(实例图片文字内容见本章素材文件夹)实例素材：第二单元“文字.txt”、image效果文件：第二单元“flower01.html”,任务实施,03,任务1制作鲜花网页结构HTML标签介
10、绍【任务实施】,鲜花网页的结构部分主要包括输入文本、设置段落、设置标题、设置超链接、插入水平线、插入图像等操作。1）构建HTML结构（1）将素材实例文件夹拷贝至创建MyWeb站点的根目录中。（2）启动DreamweaverCS，打开“文件”面板，在拷贝的文件夹中创建一个名为“flower.html”的网页文档，并在文档编辑窗口中打开。（3）添加标题。将文字内容复制粘贴到新建文档的设计视图中，然后依据效果图，查看是否分好段落，如果没有，在设计视图中按Enter键划分段落，并清除空行。,任务1制作鲜花网页结构HTML标签介绍【任务实施】,图2-1页面效果,（4）添加标题标签。在“插入”面板中选择“
11、结构”类别，然后单击“标题H1”按钮。如图2-1所示的页面效果。（5）添加水平线。将标题文字和内容文字进行了形式上的分开。（6）设置超链接。（7）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。,知识归纳,04,HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，Web上的网页是互相连接，单击被称为超链接的文本或图形就可以链接到其他页面。,目录页/Contents,01,任务1制作鲜花网页结构HTML标签介绍,02,任务2修饰鲜花网页CSS样式基础,知识储备,01,任务2修饰鲜花网页CSS样式基础【知识储备】,1.在HTML页面中引入CSS样
12、式表的方法（1）将CSS样式表放置在HTML文件头部，内部样式表中。内部样式表也称嵌入式样式表，是指把对页面各元素的样式设置集中写在标签对中，并且用标签对进行声明，其格式如下：,任务2修饰鲜花网页CSS样式基础【知识储备】,（2）将CSS样式表放置在HTML文件主体：行内样式表。行内样式表是直接对HTML标签使用style属性，然后将CSS代码作为属性值写在其中，其格式如下：（3）将CSS样式表放置在HTML文件外部：链接样式表。要在HTML中链接外部样式表文件，需要在标签对之间添加标签对，具体格式如下：,任务2修饰鲜花网页CSS样式基础【知识储备】,（4）将CSS样式表放置在HTML文件外部
13、：导入样式表。要在HTML文件中导入样式表，需要使用标签对进行声明，并在该标签对中加入importurl（外部样式表文件地址）;语句，具体格式如下：其中，import语句后面的“;”是不可省略的。外部样式表文件的文件扩展名必须为“.css”。外部样式表地址可以是绝对地址，也可以是相对地址。,importurl(外部样式表文件地址);,任务2修饰鲜花网页CSS样式基础【知识储备】,2.选择器的类型选择器用来对HTML文件的不同标签进行控制，从而使CSS可以对不同的网页元素进行修饰。CSS的语法结构由3部分组成：选择器名、属性和属性值。CSS选择器类型，分别是标签选择器、id选择器和类选择器，伪类
14、选择器和通用选择器。1)标签选择器类型用法是“div”，表示为使同一标签的元素拥有相同样式。标签选择器特点是一个HTML文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。例如根据效果要求可以定义标签选择器为：,h1/*设置为h1一级标题*/text-align:center;/*设置文字内容居中*/font-size:42px;/*设置文字为字号42像素*/color:#FF6600;/*设置文字的显示颜色*/,任务2修饰鲜花网页CSS样式基础【知识储备】,2)类选择器类型用法是“.Class”表示为使不用的网页元素拥有相同的样式。类选择器特点是使用类（clas
15、s）选择器可以为相同或不同的标签分类设置不同的样式。使用该选择器时，需要在HTML中为设置同一样式的标签定义相同的类名，即设置标签的类（class）属性，然后在CSS中定义类选择器。定义类选择器时，需要在类名称前面加一个点“.”，语法结构是“.类名”样式属性:取值;样式属性:取值;。例如根据效果要求可以定义类（class）选择器为：,.cont/*设置为cont类名*/Color:red;/*设置文字的显示颜色*/Font-size:18px/*设置文字为字号18像素*/,任务2修饰鲜花网页CSS样式基础【知识储备】,3）ID选择器类型用法是“#id”表示为精确控制某个元素的具体样式。Id选择
16、器特点是用来对单个元素设置单独的样式，在同一HTML文件中，id名不能重复。id选择器的使用方法与类选择器相似，先在HTML中为希望单独设置样式的标签定义id名（使用标签的id属性），然后在CSS中定义id选择器。定义id选择器时，需要在id名称前面加一个“#”号，语法结构是“#id名”样式属性:取值;样式属性:取值;例如根据效果要求可以定义id选择器为：,#main/*设置为main类名*/width:1408px;/*设置宽度为1408像素*/height:536px;/*设置高度为536像素*/,任务2修饰鲜花网页CSS样式基础【知识储备】,4）伪类选择器用法是“:link,:visited,:hover,:active,:”，分别表示是“：link向未被访问的链接添加样式”，“:visited向已被访问的链接添加样式”，“:hover当鼠标悬浮在元素上方时，向元素添加样式”，“:active向被激活的元素添加样式”。伪类选择器特点是伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。之所以
