网页设计时的框架合成-盈岚科技

网页设计时的框架合成

2019-08-15 10:00:01
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

之前重点介绍了网页设计时的两个关键页面的制作。完成框架分页的设计工作后，下面只需要创建一个框架集页面把这些分页面合成在一起即可。

【操作步骤】

第1步，启动Dreamweaver，新建文档，保存为index.html。

第2步，切换到【代码】视图，输入下面代码，创建一个嵌套框架集。

<html >

<head>

content="text/html; charset=gb2312" />

<title>框架网页制作</title>

</head>

<frameset rows="94,*" framespacing="0"

frameborder="no" border="0" bordercolor="0">

<frame src="top.html" frameborder="no"

scrolling="no" noresize="noresize"

marginwidth="0" marginheight="0" id="top">

<frameset cols="160,*" framespacing="0"

frameborder="no" border="0" bordercolor="0">

</frameset>

<body>

<h1>当前浏览器不支持框架页。

</h1></body>

</noframes>

</html>

第3步，保存框架页，按F12键即可预览页面。

定义链接的普通样式

在网页设计时，对链接应用样式最容易的方式是使用类型选择器。

例如，以下规则将使所有链接显示为红色。

color:red;

}

但是，在网页制作时，锚可以作为内部引用，也可以作为外部链接，所以使用类型选择器不总是理想的。例如，下面的第一个锚包含一个片段标识符，当用户单击这个锚时，页面将跳到第二个锚的位置。

<p><a href="#mainContent">跳转到标题位置</a></p>

虽然只想让真正的链接变成红色，但是标题的内容也成了红色的。为了避免这个问题，CSS提供了两个特殊的选择器，即链接伪类选择器。 •:link伪类选择器用来寻找没有被访问过的链接。

•:visited伪类选择器用来寻找被访问过的链接。

【示例】在下面的示例中定义两个样式，设置所有没有被访问过的链接将是蓝色的，所有被访问过的链接将是绿色的。

a:link{ color:blue;}

a:visited{ color:green;}

可以用来对链接应用样式的另外两个选择器是:hover和:active动态伪类选择器。

•:hover动态伪类选择器用来寻找鼠标停留处的元素。

•:active动态伪类选择器用来寻找被激活的元素。对于链接来说，激活发生在链接被单击时。所以，在下面的示例中，当鼠标停留在链接上或单击链接时链接将变成红色。

a:hover,a:active { color:red;}

很多设计师最初使用这些选择器的目的之一是去掉链接的下划线，然后在鼠标停留在链接上或单击链接时打开下划线。实现的方法是将未访问和已访问的链接的text-decoration属性设置为none，将鼠标停留和激活的链接的text-decoration属性设置为underline。

a:link,a:visited { text-decoration:none;}

a:hover,a:acriove { text-decoration:undexline;}

在上面示例中，选择器的排列是非常重要的。如果顺序反过来，鼠标停留和激活样式就不起作用了。

a:hover,a:active { text-decoration:undexline;}

a:link,a:visited { text-decoration:none;}

这是由层叠造成的，当两个规则具有相同的特殊性时，后定义的规则优先。在这个示例中，两个规则具有相同的特殊性，所以:link和visited样式将覆盖:hover和:active样式。为了确保不会发生这种情况，最好按照以下顺序应用链接样式。

•a:link

•a:visited

•a:hover

•a:active

当前文章标题：网页设计时的框架合成
当前URL：http://www.lyjtt.cn/news/wzzz/3075.html

上一篇：框架网页设计

下一篇：网页设计中如何定义下划线样式