CSS在Frontpage XP中的崭新应用

CSS在Frontpage XP中的崭新应用

CSS在网页效果处理中一直比较受关注，一般情况下应用CSS到指定的网页中可以采取两种不同的方法，外部风格页与内部风格定义。
1.外部风格页
所谓的外部风格页也就是独立的扩展名为.CSS的文件，编辑CSS文件可以在任意的文本处理程序中进行，不过不少作网页的新手对CSS源代码的编写还是不太清楚。
或许是出于上面的种种考虑吧，在新的Frontpage XP中提供了CSS文件的建立模板，你可以根据需要定制自己感兴趣的模板样式。
从“视图→工具栏”，调出任务面板，单击上面的“网页模板”项，在随后的“网页模板”窗口中选中“Style 样式表”标签，如图1所示。

列表中提供了12种不同的样式，选中后单击OK即可查看具体的CSS代码信息。建立新的CSS文件，请选中最上的“普通样式表”项，然后进入编辑窗口。关于更多的CSS代码基础知识这里就不说了，大家可以查看一下相关的资料。
不过鉴于直接编写的困难，Frontpage XP在“样式编辑”窗口中提供了一个手动设定的工具按钮，如图2所示。

单击“A Style”按钮，进入“样式”窗口，开始设置不同类型的CSS样式，完成后所有设定项目会自动转化成代码信息，并按先后顺序显示出来。具体的将在内部风格定义中讲到。
完成CSS文件的创建以后，下一步当然就是用它来格式化网页了。
进入待格式网页中，使用菜单“格式→格式表链接”打开链接窗口，如图3所示。
其中“所有网页”单选钮可以将样式文件应用到网站所有网页中，而“所选的网页”只在当前编辑网页中使用，一般我们多选择后者，如图3所示。

单击“添加”，在网站根目录下找到目标CSS文件的位置。当然你也可以为同一个网页添加多个CSS文件对象，不过这时你需要注意他们的前后位置，Frontpage会以优先覆盖的方式来处理其间出现冲突的格式类型。
OK，你会发现当前网页已经按照CSS文件里的设置自动格式化好了,是不是很方便。其实使用外部风格页来格式网页内容，除了可以统一诸多同类页的显示效果外，还有一个重要的原因就是避免了代码编写及浏览显示时的重复性，编写时提高了工作效率，而浏览时又加快了速度。
外部风格页的引入代码也是非常简单，类似下面的形式:
<link rel="stylesheet" type="text/css" href="link.css">
2.内部风格页解析
虽然外部风格页有着前面介绍过的不少好处，但在应用的灵活性上毕竟存在着很多缺点，比如它只能对某一范围(HTML代码，CSS选择器等)的内容进行格式.但有些时候我们需要的不是对同类内容作相同的格式，这时内部风格定义就显得很重要了。
从“格式→样式”进入“样式”窗口，如图4所示。

在Frontpage中，内部样式被分成两大部分:HTML Tags和Use defined styles。
(1)HTML Tags：
对网页中的HTML代码进行定义的样式类型，应用以后所有使用该代码的内容都会被赋予同样的样式效果。
除了一般的HTML标记外，在这里还包括几个常用的CSS样式选择器:
a:link(对链接文本有效)；a:active(激活链接有效)；a:visited(已访问文本有效)；a:hover(鼠标悬停状态有效).其中最后一个在大多网页中是比较常见的。
(2)Use defined styles:
相对HTML Tags ，自定义样式就显得灵活的多了，在“列表”中选择“用户定义的样式”，单击右边的“新建”按钮。如图5所示。

需要注意的是这里的CSS样式有两种不同的类型，即Class属性和ID属性。
建立Class类时，在“名称”输入框键入以“.”开头的名字，比如格式颜色为红色的样式。
建立ID类时，在“名称”输入框键入以“#”号开头的名字。
然后单击下面的“格式”按钮，下拉菜单如图6所示。

选中不同的菜单项，分别进行设置即可。注意所有已建立的自定义样式会自动在“样式”窗口左边的列表中显示出来，单击“修改”按钮可以进行再编辑。
那么如何对不同的选定对象应用内部风格定义呢?很简单，在网页中通过鼠标选中待格式的对象，然后调出样式窗口，在列表中选定要使用的样式名称，单击OK就完成了。

（笨笨熊）