第2章 HTML标签及CSS样式基础_第1页
第2章 HTML标签及CSS样式基础_第2页
第2章 HTML标签及CSS样式基础_第3页
第2章 HTML标签及CSS样式基础_第4页
第2章 HTML标签及CSS样式基础_第5页
已阅读5页，还剩58页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计案例教程案例说明网页主要由结构、表现和行为3部分组成，结构是指网页的内容部分，主要通过HTML语言实现，我们可以直接编写HTML代码或在Dreamweaver中进行可视化设计，来制作网页的结构部分。我们在浏览网页时看到的文字、图像、动画等在HTML语言中都是用标签来描述的。案例步骤鲜花导购网页的结构部分主要包括输入文本、设置段落、设置标题、设置超链接、插入水平线、设置列表和插入图像等操作。这些效果大部分可通过两种方式实现，一种是在Dreamweaver的设计视图中进行可视化操作，Dreamweaver会自动将设置的网页结构“翻译”成HTML代码；一种是直接在Dreamweaver的代码视图中编写HTML代码。此处我们主要在Dreamweaver的设计视图中进行操作，然后在代码视图中学习相关的HTML代码。案例步骤步骤01将本书附赠的“第2章”文件夹拷贝至第1章创建的“MyWeb”站点根文件夹中。输入文本并添加段落和标题标签1.步骤02在刚拷贝的文件夹“第2章\task1”中新建一个名为flower-lx.html的网页文档并打开。步骤03创建文本和添加段落标签。打开task1文件夹中名为“文字”的文本文件，将文字内容复制粘贴到flower-lx.html文档代码视图的<body></body>标签对中，然后依据效果图，在设计视图中使用【Enter】键为文字划分段落。案例步骤在Dreamweaver的设计视图中按【Enter】键表示分段，此时在HTML代码中分段的文字被加上了一个段落标签对<p></p>；按【Shift+Enter】组合键表示文字换行，此时将在HTML代码中添加换行标签<br>。提示案例步骤步骤04添加标题标签。回到设计视图，将插入点置于第1行的“花之语”文字左侧，在“插入”面板中选择“结构”类别，然后单击“标题：H1”按钮。步骤05此时在第1行插入1号标题文字“这是布局标题1标签的内容”，并且“花之语”文字自动移到了第2行。将插入点置于第1行文字左侧，多次按【Delete】键删除所有文字，直到“花之语”文字移到第1行，并应用1号标题样式。案例步骤步骤06将插入点置于“花的语言”文字左侧，单击“插入”面板“结构”类别中的“标题：H1”下拉按钮，在其下拉列表中选择“H2”，然后删除自动生成的文字，对“花的语言”文字应用2号标题。步骤07对“鲜花导购”文字应用2号标题。此时在代码视图中可看到这几个段落分别被添加上了<h1></h1>和<h2></h2>标签对。案例步骤步骤01添加超链接标签。首先选中第2行的“鲜花礼品”文字，然后单击“插入”面板“常用”类别中的“Hyperlink”按钮，弹出“Hyperlink”对话框。单击“链接”项右侧的图标，在打开的“选择文件”对话框中选择“img\1.jpg”图像文件，单击“确定”按钮，回到“Hyperlink”对话框，在“目标”下拉列表中选择“_blank”，单击“确定”按钮关闭对话框。添加超链接标签2.案例步骤步骤02分别选择“自助订花”“绿色植物”“花之物语”“会员中心”和“联系我们”文本，打开“Hyperlink”对话框，在“链接”项中输入符号“#”，单击“确定”按钮，为所选文本设置空链接。案例步骤超链接指向网站内部或外部的文档或其他元素，单击它可以使浏览者从一个网页跳转到另一个网页，或打开某个图像，下载某个文件等。在Dreamweaver的设计视图中，除了可以通过“插入”面板设置超链接外，还可以在文档中选中要设置超链接的文本或图像等对象后，利用属性检查器中的“链接”选项设置要链接到的目标对象。知识库案例步骤步骤01插入水平线。将插入点置于“联系我们”超链接文本后面，单击“插入”面板“常用”类别中的“水平线”按钮，即可在插入点所在行下面插入一条水平线，此时在代码视图中可看到水平线标签<hr>。添加水平线、列表和图像标签3.案例步骤步骤02插入列表和列表项标签。为了让文字更好地排列，我们为页面下方的文本添加列表标签。确认已在设计视图中将“鲜花导购”下的每个花名用【Enter】键划分为不同的段落，然后将这些文本全部选中，单击“插入”面板“结构”类别中的“ul项目列表”按钮，插入项目列表标签<ul></ul>和列表项标签<li></li>。案例步骤步骤03插入图像标签。在代码视图中将插入点放在“<h2>花的语言</h2>”后，然后单击“插入”面板“常用”类别中的“图像:图像”选项，在弹出的对话框中选择“img”文件夹中的“flower1.jpg”图像，将其插入到网页文档中。案例步骤步骤01将指定内容放入一个id名为bg的<div>标签中。在设计视图中利用拖动方式选中从“花的语言”到“代表了赠送者的意图”之间的所有内容，然后单击“插入”面板“常用”类别中的“Div”按钮，打开“插入Div”对话框，在ID编辑框中输入bg，然后单击“确定”按钮。添加<div>标签并设置ID和类名称4.案例步骤步骤02使用相同的方法，选中“花之语”下面的一行超链接文字，为这些超链接文字添加<div>标签，并设置id名为“link1”。此时切换到代码视图，可看到添加的<div>标签和为它们设置的id属性。<div>相当于一个容器，由首标签<div>和尾标签</div>构成，在该标签对内可以内嵌表格（table）、文本（text）、图像和其他<div>标签等各种HTML元素。其中所包含的元素属性可以由<div>标签的属性来控制，或使用样式表来控制。提示案例步骤步骤03为部分段落设置类名称。通过案例二的效果图可以看出，网页中有两个段落单独进行了特殊的文字颜色及下划线效果设置。所以我们需要为它们设置相同的类名称，以便使用CSS的类选择器来统一设置它们的外观。为此，在代码视图中找到这两个段落的位置，手动为这两个段落标签设置相同的类名称p1。案例步骤步骤04保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。此时，鲜花导购网页的结构部分便已制作完成。案例步骤本案例中涉及的HTML标签如表2-1所示。表2-1涉及的HTML标签标签描述标签描述<body></body>网页主体标签<ul></ul>无序列表标签<h1></h1>一号标题标签<li></li>无序列表项标签<hr>水平线标签<imgsrc=“图像路径和名称”/>图像标签<p></p>段落标签<ahref=“跳转页面”>超链接文字</a>超链接标签<br>换行标签<div></div>相当于一个容器支撑知识点一、HTML标题、水平线、段落和换行标题的作用是让用户快速了解文档的结构与大致信息，它是通过<h1>～<h6>等标签对进行定义的。<h1>标签对定义最大的一号标题；<h6>标签对定义最小的六号标题。当为文字添加标题标签后，它会独立成一行显示。HTML标题1.HTML标题1.代

码效

果<body><h1>这是一号标题</h1><h2>这是二号标题</h2><h3>这是三号标题</h3><h4>这是四号标题</h4><h5>这是五号标题</h5><h6>这是六号标题</h6></body>HTML水平线2.水平线主要是用来分隔网页中的内容。水平线标签<hr>是一个单标签，其作用是在HTML页面中创建水平线。表2-3HTML水平线效果代

码效

果<body><p>这是段落文字</p><hr><p>这是段落文字</p><hr><p>这是段落文字</p></body>HTML段落3.HTML段落是通过<p></p>标签对进行定义的。表2-4HTML段落效果代

码效

果<body><p>这是一个段落</p><p>这是另一个段落</p></body>HTML换行4.要在不产生一个新段落的情况下进行换行，需使用<br>标签。表2-5HTML换行效果代

码效

果<body><p>这是一个段落</p><p>这是另一个段落</p><p>这是<br>一个被换行的<br>段落</p></body>二、HTML列表列表是制作网页时经常使用的HTML元素，它可以使文本内容更加清晰、明了、工整、直观。在HTML中，列表分为无序列表<ul>、有序列表<ol>和定义列表<dl>3类。无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页中的列表均采用无序列表，使用<ul></ul>标签对定义，包含的列表项使用<li></li>标签对定义。列表项的默认符号为小圆点●，要改变符号类型或去除符号，可使用CSS属性进行控制。无序列表1.无序列表1.表2-6无序列表效果代

码效

果<body><ul><li>咖啡</li><li>牛奶</li><li>奶茶</li></ul></body>有序列表2.表2-7有序列表效果有序列表在列表项前都有编号，因此，浏览者可以清晰地了解每项的顺序。其中<ol></ol>标签对用来定义有序列表，包含的列表项用<li></li>标签对定义，默认序号为1、2、3。代码效

果<body><ol><li>咖啡</li><li>牛奶</li><li>奶茶</li></ol></body>定义列表3.表2-8定义列表效果定义列表是项目及其注释的组合。其中<dl></dl>标签对表示定义列表；<dt></dt>标签对表示每个定义的名称（项目名）；<dd></dd>标签对表示每个定义名称的详细内容（注释）。代

码效

果<body><dl><dt>咖啡</dt><dd>黑色的热饮</dd><dt>牛奶</dt><dd>白色的冷饮</dd></dl></body>三、HTML图像认识网页中的图像1..gif格式最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标和徽标等。.jpg格式适于表现色彩丰富，具有连续色调的图像，如各种照片。像素（px）是图像的基本组成单位，它是一个有颜色的小方块，以行和列的方式排列，图像就是由这些小方块组成的。当图像尺寸以像素为单位时，每一厘米等于28像素，如15×15厘米大小的图像，等于420×420像素大小。提示HTML图像标签2.src指“source”，即存储图像的位置（路径和图像名称）。

alt为替换文本属性，用来为图像定义一串预备的替换文本。

width和height指图像的宽度和高度，常用单位为px（像素）。HTML图像分为两类，插入图像和背景图像。插入图像作为HTML实体标签存在；而背景图像则是CSS的修饰内容。HTML插入图像是通过<img/>标签进行定义的。它是一个单标签。由图像标签<img/>和其属性构成。其中src属性用来表示图像的源地址，是必不可少的。表2-9HTML图像标签代

码效果<imgsrc="01.jpg"width="100"height="120"alt="这是幅图像"/>图像路径3.绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中的盘符后面用:\或:/分隔，各目录名之间以及目录名与文件名之间用\或/分隔。文件在电脑中的物理路径。文件为发布在Internet上的文件时，需要该文件的网络路径，即网址。表2-10图像绝对路径应用示例1）绝对路径绝对路径示例含

义<imgsrc="/img/flower.jpg"/>图像在域名为的服务器中的img目录里<imgsrc="E:/myweb/image/flower.jpg"/>图像在E盘myweb目录下的image子目录里相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图像或其他文件等的现象。表2-11图像相对路径应用示例2）相对路径HTML文档位置图像位置和名称相对路径描

述d:\demod:\demo\tad.gif<imgsrc="tad.gif">图像和网页在同一目录d:\demod:\demo\image\tad.gif<imgsrc="image/tad.gif">图像在网页下一层目录d:\demod:\tad.gif<imgsrc="../tad.gif">图像在网页上一层目录d:\demod:\image\tad.gif<imgsrc="image\tad.gif">图像和网页在同一层但不在同一目录四、HTML超链接href=“跳转文件的地址”表示超链接的目标文件的路径。超链接的相对路径写法与图像的相对路径相似。超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点，源端点可以是文字或图像等。HTML超链接主要由标签对<a></a>和属性href构成。要实现链接的跳转，必须要使用属性href。超链接的基本格式1.<ahref="跳转文件的地址"target="窗口打开方式">源端点（如链接文字）</a>target属性表示链接目标的打开方式。超链接的基本格式1.表2-12超链接相对路径应用实例文件位置相对路径在d:\demo文件夹中，即在同一目录href="exm.html"在d:\demo\aaa中，即在子目录中href="aaa/exm.html"在d:\中，即在上一级目录中href="../exm.html"在d:\bbb中，即在上一级子目录中href="../bbb/exm.html"超链接的基本格式1.表2-13target属性值的意义类型描

述target="_blank"保留当前窗口，在新窗口中打开链接的网页target="_parent"在当前窗口打开链接的网页，如果是框架网页，则在父框架中显示打开的链接网页target="_self"在当前窗口打开链接的网页，如果是框架网页，则在当前框架中显示打开的链接网页target="_top"在当前窗口打开链接的网页，如果是框架网页，则删除所有框架，显示打开的网页超链接的分类2.超链接分为文字超链接、图像超链接、锚点超链接和邮件超链接几种类型。1）文字超链接<ahref="跳转文件的地址">链接文字</a>2）图像超链接<ahref="跳转文件的地址"><imgsrc="1.jpg"></a>在制作一些内容较长的网页时，可以让浏览者从头到尾地阅读，也可以选择自己感兴趣的部分阅读。方法是在文章的起始处列出几个小标题，相当于文章的目录，然后为每个标题建立一个链接，并为要链接到的目标位置打上一个定位标记，这个标记通常称为锚点。3）锚点超链接（同一页面跳转）锚点的地方采用：<aname="锚点名称">目标位置</a>；标题的链接表示为：<ahref=#锚点名称>标题名</a>。表2-14锚点超链接使用示例链接文字第一步骤：定位标记第二步骤：建立链接链接文字一<aname="m1">欲跳转的位置</a><ahref="#m1">链接文字一</a>链接文字二<aname="m2">欲跳转的位置</a><ahref="#m2">链接文字二</a>链接文字三<aname="m3">欲跳转的位置</a><ahref="#m3">链接文字三</a>案例说明本案例中我们将学习如何使用层叠样式表CSS来修饰该页面，即制作该网页的表现部分。案例步骤步骤01在HTML中添加CSS样式声明。使用DreamweaverCC打开案例一制作的flower-lx.html页面。切换到代码视图，在<head></head>标签对中添加<styletype="text/css"></style>标签对。<head><metacharset="utf-8"><title>无标题文档</title><styletype="text/css"></style></head>案例步骤步骤02案例一中已经搭建好了网页的HTML结构，现在开始设置各个部分的具体样式。相关样式的设置内容都需要放在步骤1添加的<styletype=“text/css”></style>标签对中。这里我们首先使用标签选择器对整体页面和1号标题进行设置。在CSS样式表中，每个样式的内容都存放在选择器这种容器中，它由“选择器名{具体的样式代码}”组成。步骤2中设置的选择器为标签选择器，它用标签来代表想要修饰的内容，无需提前为相关标签设置id或类名称。选择器里面的具体样式代码被称为CSS属性，它由“属性:属性值;”组成。提示案例步骤步骤03继续在<styletype="text/css"></style>标签对中加入以下代码，从而设置超链接导航栏的样式。#link1{text-align:center; /*设置id名为link1的div容器中的文字居中对齐*/}#link1a{color:#de4eaf; /*设置超链接文字颜色*/font-size:14px; /*设置超链接文字大小*/text-decoration:none; /*取消超链接标签带来的下划线*/margin-right:35px; /*设置各个超链接之间的距离*/}案例步骤步骤04设置“花的语言”～“随着时代的发展”段落和图像的样式。#bg{background:#b3375c; /*为id名为bg的div容器设置背景颜色*/padding:10px; /*设置div容器中包含的元素同容器边框之间的距离*/color:#FFF; /*设置文字颜色*/}#bgimg{float:left; /*用浮动实现文字环绕图像效果*/margin:10px; /*设置图像与文字之间的距离为10像素*/}案例步骤步骤05为在案例一中设置了类名称p1的两个段落设置样式。.p1{text-decoration:underline; /*设置文字下划线*/font-style:oblique; /*设置文字倾斜*/color:#FF9; /*设置文字颜色*/}步骤06保存文件。此时鲜花导购网页的样式部分制作完成，按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。支撑知识点一、在HTML页面中引入CSS样式表的方法将CSS样式表放置在HTML文件头部：内部样式表。将CSS样式表放置在HTML文件主体：行内样式表。将CSS样式表放置在HTML文件外部：链接样式表与导入样式表。内部样式表1.内部样式表也称嵌入式样式表，是指把对页面各元素的样式设置集中写在<head></head>标签对中，并且用<style></style>标签对进行声明，其格式如下。<head><styletype=＂text/css＂><!--选择器{样式属性:取值;样式属性:取值;…}选择器{样式属性:取值;样式属性:取值;…}……--></style></head><style>标签用来声明使用内部样式表，各样式代码需要写在该标签对之间。type=“text/css”属性用来声明这是一段CSS样式表代码。<!--与-->标记的加入是为了防止一些不支持CSS的浏览器，将<style>与</style>之间的CSS代码当成普通的字符串显示在网页中。选择器也就是样式的名称。行内样式表2.行内样式表是直接对HTML标签使用style属性，然后将CSS代码作为属性值写在其中，其格式如下。<body><HTML标签style="样式属性:取值;样式属性:取值;…"></HTML标签></body>

HTML标签就是页面中HTML元素的标签，例如<body>、<p>、<div>等。

style参数后面引号中的内容相当于样式表大括号里的内容。链接样式表3.这种方式是将一个独立的样式表文件引入到HTML文件中，样式表文件就是我们常说的CSS文件，扩展名为.css。要在HTML中链接外部样式表文件，需要在<head></head>标签对之间添加<link></link>标签对，具体格式如下。<head><linkrel="stylesheet"type="text/css"href="样式表文件的地址"></head>

rel="stylesheet"属性用来声明在HTML文件中使用外部样式表。

type="text/css"属性用来指明该文件的类型是样式表文件。

href属性用来指定样式表文件的路径和名称，可以为绝对路径或相对路径。导入样式表4.要在HTML文件中导入样式表，需要使用<styletype="text/css"></style>标签对进行声明，并在该标签对中加入@importurl（外部样式表文件地址）;语句，具体格式如下。<head><styletype="text/css">@importurl(外部样式表文件地址);</stytle></head>import语句后面的;是不可省略的。外部样式表文件的文件扩展名必须为“.css”。外部样式表地址可以是绝对地址，也可以是相对地址。二、选择器的类型选择器用来对HTML文件的不同标签进行控制，从而使CSS可以对不同的网页元素进行修饰。CSS的语法结构由3部分组成：选择器名、属性和属性值。selector{property:value;property:value……property:value}其中selector为选择器名，property为属性，value为属性值。一个选择器可以有多个属性和属性值，从而对一个选择器声明多种样式风格。在实际编写CSS代码时，可以将不同的属性写在不同的行中。常用的CSS选择器有3种类型，分别是标签选择器、id选择器和类选择器。表2-15选择器的3种类型类

型用

法说

明标签选择器p{}使同一标签的元素拥有相同的样式类选择器.class{}使不同的网页元素拥有相同的样式id选择器#id{}精确控制某个元素的具体样式标签选择器1.一个HTML文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。h1{text-align:center;font-size:42px;color:#FF6600;}标题文字居中对齐。字体大小为42像素。字体颜色为橙色。若希望1号标题标签<h1>的文本有以下效果。则根据效果要求可以定义如下的标签选择器。类选择器和id选择器2.使用类（class）选择器可以为相同或不同的标签分类设置不同的样式。使用该选择器时，需要在HTML中为希望设置同一样式的标签定义相同的类名，即设置标签的class属性，然后在CSS中定义类选择器。定义类选择器时，需要在类名称前面加一个点“.”，语法如下。1）类选择器.类名{样式属性:取值;样式属性:取值;…}为避免浏览器的不兼容问题，我们应尽量规范化选择器的命名规则，包括：一律小写；以字母开头，由字母和数字组成；尽量不加中杠和下划线；尽量用英文，尽量见名知意等。提示类选择器和id选择器2.id选择器用来对单个元素设置单独的样式，在同一HTML文件中，id名不能重复。id选择器的使用方法与类选择器相似，先在HTML中为希望单独设置样式的标签定义id名（使用标签的id属性），然后在CSS中定义id选择器。定义id选择器时，需要在id名称前面加一个#号，语法如下。2）id选择器#id名{样式属性:取值;样式属性:取值;…}CSS的各种选择器可以配合使用。例如，很多时候页面中几乎所有的<p>标签都使用相同的样式风格，只有个别<p>标签需要使用不同的风格来突出显示，此时就可以使用class或id选择器与标签选择器配合，即先使用标签选择器p定义全局方案，然后使用id或class选择器设置个别<p>标签。提示伪类选择器3.伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它指定的是元素的某种状态，如表2-16所示。表2-16伪类选择器伪类名用

途a:link设置超链接未被访问时的样式a:active设置超链接被用户激活（在鼠标点击与释放之间）时的样式a:visited设置超链接被访问后的样式a:hover设置将鼠标指针移到超链接上时的样式通用选择器4.通用选择器是一种特殊类型的选择器，它用星号*来表示选择器的名称，可以定义所有网页元素的显示格式。通用选择

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论