如何在Frontpage中定义CSS样式

如何在Frontpage中定义CSS样式？

当很多人发现在DW4中定义CSS很方便的时候，开始报怨FP2000不能定义CSS，甚至就此抨击FP2000如何的不好。事实上，在FP2000中定义CSS是很容易的，甚至在某些方面比DW4中定义更方便!

定义HTML标记的样式

在Frontpage2000下，选择菜单“格式/样式”，会弹出一个定义样式的窗口，在CSS列表下拉菜单(位于左下)中，选“所有的HTML标记”， 这时在左边的列中会出现大部分常用的HTML标记，选中一个，然后点右下的“修改”， 会弹出一个“修改样式”窗口，在该窗口左下方有一个“格式”按钮，点击该按钮，会出现一个下拉菜单，一共有五个选项:

字体:顾名思义，这里就是定义字体的地方。

段落:跟“字体”差不多，点进去后根据提示定义就可以了。

边框:定义边框和背景等，根据提示定义就可以了。进入后有有“;边框”和“阴影”两个选项卡，在“边框”中定义边框，在“阴影”中定义前景和背景。

编号方式:共有三个选项卡，根据字面意义去定义就可以了。

定位:这就是CSS定位啦，但一般用在具体的网页元素当中。

是不很容易?当然，定义这些您最好要有一定的CSS的基础，不然您可能不知道定义的是什么。但是您只要了解一些语法规则就可以喽，剩下的就让Frontpage2000去做吧!

有两个较为特殊的:

1、在网页任何位置点击鼠标右键，选“网页属性”，在属性面板的下侧有一个“样式”按钮，在这里可以定义body的样式，这样定义在形式上是内嵌式的，事实上这跟直接定义body是没有什么区别的，因为一个网页中只有一个body。

2、仍然在“网页属性”面板当中，选“背景”选项卡，在中上的位置有一个“启用超链接翻转效果”，选中它前面的复选框，然后点击它下面的“翻转样式”按钮，就可以定义一些字体了，事实上这样定义的是a:hover(即鼠标县停到超链接时的样式 )。

定义class或ID

这个仍然是在菜单“格式/样式”中，在右下的“列表”中选择“用户定义的样式”，这时，你以前定义的标记会出现在右侧的列表中。

下面我们开始定义一个class(伪类)，点击右下的“新建”按钮，在最上面的“名称(选择器)”中输入一个名字，比如“.mycss”，注意，前面有一个“.”表明是定义一个class(如果定义ID前面是“#”)，但在引用时并不算名字的一部分，只有“.”(或“#”)后面的才做为名字“!”名字!

取好名字后，就开始定义格式了，仍然点“格式”按钮，剩下的就跟上面所讲述的方法一样啦!这里就不再赘述。至于如何在网页的具体元素中引用我们接下来就会讲述。

定义内嵌式的样式

在大部分的属性面板的下侧，都会有一个样式按钮，点击后，就可以定义内嵌式的CSS样式了。比如，先建一个表格，在表格的一个单元格中点击左键，选择“单元格属性”，在属性面板中有一个“样式”按钮，点击后，在下侧有一个“格式”按钮，点进去后就可以定义样式喽!笔者认为:Frontpage2000提供的这种方式来定义内嵌式的样式大大方便了我们的工作，是个不错的功能。

接下来我们看看如何引用一个已经定义好了的class(或ID)，仍以单元格为例，在“单元格属性”面板中，点击“样式”，在样式面板的中上部，左侧是“类”下拉菜单，在这里面就可以选择我们定义好了的类了。在右侧是“ID”，不过这里面不是下拉菜单，而是一个单行文本框，需要我们手动的敲进去我们定义好了的ID，注意不要带“#”。

这里我们主要是针对对Frontpage2000和CSS有一定基础的朋友讲的，所以讲得较为粗略，希望在阅读的时候能够结合Frontpage2000的使用来加深理解!

用FrontPage 2000做样式表

Dreamweaver以其强大的功能正在扩张到更多“网虫”的硬盘里，然而Dreamweaver并非每个功能都那么出色。至少，在样式表（CSS)设置方面就显得太专业，让这些英文不好的“虫虫”们大伤脑筋。经过N次下载、安装，到头来我才发现原来最好的早已在自己的手中，那就是被我封存很久的——FrontPage 2000。下面就让我带领大家一块来分享“傻瓜”化软件带来的快乐吧。

一、三种添加CSS的方式

在FrontPage 2000里可以通过三种方式给网页增加样式表。

1. 页面链接一个外部的样式表文件，这种方法可以使多个页面使用同一个样式表文件，方便保持页面的主题。步骤：启动FrontPage 2000，然后依次点“文件”、“新建”、“网页”，打开FrontPage 2000的新建对话框，选择“样式表”选项。在这些样式表中有FrontPage 2000自带的很多样式表供你参考和修改。当然如果你对CSS熟悉的话，你也可以使用空白的样式表，自己重新创建一个。

2. 通过在FrontPage 2000中创建一个样式表单，此时样式表就是网页的一部分，直接

位于HTML文档的之间。这个实际上不算创建，只要把已经创建好的样式表直接复制下来，然后选择网页编辑器的“html”选项，然后粘贴到〈HEAD〉之间就可以了。

3. 通过使用内含样式表元素，单独指定样式表。在FrontPage 2000编辑一个页面的时候，只要选中要发生变化的文字，然后点击右键，选择“网页属性”就可以随时随地进行可视化操作了。

二、内含式样式表的使用

下面就以修改美化一个搜索框为例，给大家介绍一下内含式样式表的使用。

现在就开始我们的美化之路。打开FrontPage 2000，然后调入这个页面。接下来就先对输入框进行处理。用鼠标左键选中那个最长的输入框，然后点击右键，选择“表单域属性”，出现文本框属性。

然后点击“样式”，接着选择“格式”中的“边框”按钮，出现边框与阴影对话框。

因为要保持表格的统一，我们在“设置”中选择“自定义”，然后选择“样式”中的“实线”。最重要的就是应用边框的设置。点击方框，四周出现的四个小按钮分别代表着文本输入框的四条边框。为了和文本输入框外面的表格统一，这里的宽度也选择为“1”，然后“确定”。

接着用鼠标左键选中搜索按钮，点鼠标右键，选择“超链接属性”就会出现窗口。

选择“样式”按钮，再选择“浏览”插入我们事先作好的搜索图片。

仍旧用鼠标左键选中那四个字，然后再点击右键，选择“超链接属性”，弹出Windows窗口。

选择“背景”选项，然后选中“启用超链接翻转效果”，然后点“翻转样式”弹出新的Windows窗口。

在这里我们可以一目了然地设置要实现的翻转效果。为了突出“搜索帮助”四个字，我们把字体设置成12pt,这样当鼠标放上去的时候，字体就会从9pt变成12pt,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜色以及其他样式。通过内含式样式表的使用，我们很轻松地美化了搜索框.

FrontPage XP样式表的应用

FrontPage XP可以保证用户设计网页与不同的浏览器兼容，它所提供的样式表(CSS)功能就是其中之一。FrontPage XP使用样式表可以实现网页元素的加宽或紧缩字体间距、设置段落“缩进”和“段落间距”、设置边框和底纹等。FrontPage XP可以创建外部和内嵌式级联样式表，让我们一个一个来做。

创建外部CSS

这是一种可以应用于多个网页的样式表，也就是说，使网站内的页面链接一个外部的样式表文件，其扩展名为CSS，这样就可以使多个页面使用同一个样式表文件，从而保持了整个页面的主题风格，编辑CSS文件可以在任意的文本处理程序中进行。在FrontPage XP中，提供了CSS文件的建立模板，可以根据需要定制自己感兴趣的模板样式。

1、建立样式

执行“文件/新建/网页或站点”命令，在“新建网页或站点”任务窗口中，在“根据模板新建”之下，单击“网页模板”，打开“网页模板”对话框。单击“样式表”选项卡，再单击要创建的CSS类型，比如垂柳样式，然后单击“确定”按钮。

此时，FrontPage XP会创建一个文件扩展名为CSS的新网页，并在“网页”视图模式中将其打开以供编辑，必须保存该网页才能在以后应用这个样式表文件。

创建CSS后会显示“样式”工具栏，如图1。在此工具栏上单击可以激活“样式”对话框。如果要修改已经保存的样式表文件，可以单击菜单“视图/文件夹”，然后在“文件夹”列表中双击要打开的 CSS文件即可。

图1 样式工具

2、编辑样式

我们再来看看如何编辑样式。单击“样式”工具栏上的“样式”按钮或者在“格式”菜单上单击“样式”命令，进入“样式”对话框，如图2所示。

图2 在此编辑样式表

在样式列表中，包含了多个样式，其中“a:link”表示对链接文本有效，“a:active”表示对激活链接有效，“a:visited”对已访问文本有效，“a:hover”表示当鼠标处于悬停状态时有效。

首先在左侧的“样式”框中，单击要修改的样式类型，比如“a:link”，然后在下方的“列表”中选择“用户定义的样式”选项，需要注意的是，如果此时要修改标准HTML标记，可以选择“HTML 标记”。接着在样式列表中双击“a:link”样式，打开“修改样式”对话框，如图3。如果要设置对齐方式、缩进或段落间距，可以选择“段落”，设置边框和底纹可以选择“边框”，设置项目符号和编号的样式，可以选择“编号”。完成设置后，关闭所有对话框返回到CSS文件。这样我们就完成了一个样式的设置，可以将设置好的样式直接应用到网页文件指定的文字、段落中。

图3 在此设置样式的格式

返回主界面后，执行菜单“文件/保存”命令，将此样式保存为备用。

创建内嵌式CSS

在“网页”视图中，执行“格式/样式”命令，打开样式对话框，然后单击“新建”按钮，在“名称”框中输入新样式的名称为“.pal”，然后在“样式类型”下样式选择为“段落”。然后单击“格式”，再按照前面介绍的方法设置新样式的格式特征，比如字体、段落等。

应用样式

首先我们在“网页”视图中，打开需要应用样式表(CSS)的网页，然后在“格式”菜单上，单击“样式表链接”，打开“链接样式表”对话框，单击“添加”按钮，在打开的“选择样式表”对话框中，选择刚才建立的CSS样式文件，单击“确定”后，即可将其添加在“URL”列表中。如果选中“所有网页”选项，可以将样式文件应用到网站所有网页中，选择“当前网页”只会在当前编辑网页中使用。另外，如果要将样式应用于网页上段落或者文字，首先可以选择要应用样式的文字，然后在工具栏的样式列表框中选择要应用的样式名称即可。

到站提示：样式在网页设计过程中比较常见，巧妙地使用样式不但可以使网页更加美观，而且还可以很好地规范站点中网页的显示效果。下一站，我们将利用FrontPage XP给我们的网页设计表单。

在静态HTM页面中实现无刷新的更换CSS样式！

系统原来的更换CSS模板是要重新刷新一下儿页面的，我一直都对这个功能很不满意，百分之九十五的功能都用AJAX无刷新的实现了，难道要在这个小小的更换页面CSS模板上给用户添点恶心吗？于是，昨天晚上好好考虑了这个功能上的实现，原来发现其实并不难，小改一下就OK了，现在系统上的模板更换是不用刷新页面来完成的，明显在感觉上比原来好得多了，下面谈谈经验吧：

对于一个多页面的网站来说了，CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址，因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去，因此，一定要有一个全局性的变量来记录它，我选用的是SESSION，在用户点击了侧边模板下拉框中的模板时，

触发了下拉框的ONCHANGE事件，执行了一段AJAX程序，程序的功能是将用户选中的模板信息发送给服务器，服务器接收新的模板信息后更新表示模板的SESSION值，然后向客户端返回成功信息，客户端则根据返回的成功信息来改变页面样式，注意：我在页面头中写的CSS链接信息是这样子的:

程序代码

是一个的页面，它的作用只是单一的根据SESSION中的当前CSS模板信息来转向所应CSS样式表文件！这样子的处是客户端在接收到了服务器端成功更新SESSION的信息后刚不用考虑其它的东西，直接一句：

mentById("cssLink").href=mentById("cssLink").href;

将cssLink的href重新写一下儿，虽然是前后一模一样子的值，但这会激发页面重新读一下儿，这样子页面就能转到新更新的CSS样式表了！由于网站别的页面的样式表链接信息都是这样写的，所以每个页面加载时都是会应用最新更新的样式表的，这样子，网站无刷新的全局更新样式表就实现了！！

轻松制作自己的信息反馈WEB页

网上的信息反馈，其实就是交互表单，通常表单主要用于信息调查、收集统计数字等方面，在电子商务流行的今天，表单的作用更是不容忽视，我们可以利用表单来轻松完成各种数据的收集、获得用户定单等，对于不懂数据库的我们，还是先学学FP的简单表单制作方法吧，也免的落伍与这个电子商务时代。

首先打开"文件"菜单，选择"新建"，在子菜单中选择"网页"命令。在弹出的对话框中点击"常规"选项卡，然后选择"表单网页向导"，并单击"确定"按钮。

弹表单制作向导对话框后，单击下一步按钮，当我们第一次使用表单网页向导的时候，需要单击"添加"按钮，来添加问题。弹出如图001的对话框后，我们可以在"选择此问题要收集的输入类型"列表框中选择要添加的类型。

单击"下一步"按钮后，会出现关于个人信息的对应项目，对各项内容做好选择后，单击"下一步"按钮。

这样，问题就添加到列表中，如果不想在添加问题，直接单击"下一步"按钮继续制作。

在"如何显示问题列表"下有4个单选钮，是用来调整问题的显示方式，我们在这里采用 "显示为普通段落"的显示方式，然后对其他选项不做改动，单击"下一步"按钮。如图002。

在输出选项中也有3个单选钮供我们选择，我们这里按照系统默认"将结果保存到Web页"，然后在"输入结果文件的基本名称"后输入Web页的名字。

单击"下一步"按钮，然后单击"完成"按钮。

然后我们就可以利用我们原来学的知识，对这个表单的页面进行修饰。

做好这些之后，我们就要设置一下表单的属性了。右键单击表单的任意一处，在弹出的快捷菜单中选择"表单属性"命令，在弹出的对话框中的发送到单选钮后设置填写好的表单发送到的地址。在文件名称后输入保存表单结果的文件名称，在这里要输入一个对应的网页地址，单击"浏览"按钮，选择一个已经存在的网页的话，会将表单结果附加在该网页的最后。如果还希望浏览者提交的表单能通过Email反馈到自己的信箱，就在"电子邮件地址"后的文本框中填写好自己的电子邮件地址，然后单击确定按钮。（在完成好这些设置之后，如果你没有安装FrontPage服务器扩展，系统会自动提示你安装该扩展，如果没安装服务器扩展功能的话，我们所设置的这些表单也将起不到任何作用。）

接下来设置一下按钮，在表单中我们经常用到的按钮功能就是提交和清除功能，如果我们不想对按钮的名称进行修改，利用系统默认的设置即可。如果想对它进行修改，就双击该按钮，弹出对话框后进行设置。在"名称"后输入这个按钮的名称；在"值/标签"后输入按钮标签，也就是在浏览器中显示的按钮字样；按钮类型包括三种，（选择"提交"单选钮，则规定该按钮的作用为提交表单；选择"重置"按钮，规定按钮的作用为清除填写内容；如果选择"普通"单选钮，就可以自己设置该按钮的作用了，如加上超链接等。）完成按钮设置后，单击"确定"按钮。如图003

做好以上这些之后，我们的一个最简单的信息反馈表单就制作完成了。在跟着我们做好这些之后，可能读者们对FP的服务器扩展功能还不是很了解，在以后我们将专门对FP的服务器扩展功能进行讲解。

正文：css学习:

css是“cascading style sheets”的简称，中文翻译为“串接样式表”，也有人翻译 为“样式表”。css用以作为网页的排版和风格设计，在web标准建站中，对css的熟悉和使用 是相当重要的一个内容。css的作用是弥补html的不足，让网页的设计更为灵活。

这个文章只是为您介绍css的基础应用，指引您的一个入门的基础教程，主要目的是为

推进web标准贡献自己的微薄之力。

说点我自己的体会，现在有好多人都在推广web标准，其实对初学者来说，不需要刚学 的时候就学标准，学点简单的还是容易入门的，因为现在html还在照样用啊，所以我希望初学 者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就 该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个 人的实际来行动吧。下面开始学习了

一、如何在html中应用css。

您可以利用下列 3 种方式将 css 指定的格式加入到html中：

1. 在 html 文件里加一个超级连结，连接到外部的 css 文档。(外部连结 css)

这个方法最方便管理整个网站的网页风格，它让网页的文字内容与版面设计分开。您 只要在一个 css 文档内（扩展名为 .css）定义好网页的风格，然后在网页中加一个超级连接

连接到该文档，那么你的网页会按在css文档内定义好的风格显示出来了。

具体的使用防范是：

注意：文件的位置。

2. 在 html 文件内的 ....... 标签之间，加一段 css 的描述内容。(内定义css)

这个方法适用于指定某个网页，除了表现外部的 css 文档定义好的网页风格外，同时

还要表现本身 html 文档内指定的 css 。

如果内在添加的 css 描述与外部连接的 css 描述相冲突的话，网页的表现将以内在

添加的 css 描述为主，也就是外部的描述就不再起作用了。

具体使用方法是：

网页内容…

值得注意的是，为了防止不支持 css 的浏览器误将标签间的 css 风格描述当成普通

字串，而表现于网页上，您最好将 css 的叙述文字插入在之间。

3. 在 html 文件的文本内容中，随时有需要，随时加一小段 css 的描述指定风格。( 文本间css)

这个方法适用于指定网页内的某一小段文字的呈现风格。

外部css与内定义css如果和此定义有相同的项，那么以此定义的 css 风格表现，外部 css文档与内定义css和此定义的没相同的项时那么还会正常显示，同时还会显示文本内容间的 css 风格。

具体使用方法是：

本页内容…

上述的 3 种 css，可以同时并用，也可以择您所好，单一或成双地使用。如果各 css

间的叙述相冲突，则内在定义的 css 会覆盖外部连结的 css ，文本间的 css 会覆盖内在定 义的 css 。

二、挑选者、属性和值。

先举个例子：h3{ color : blue }表示在文本中只要使用h3标签的文字的颜色都是绿 色。其中h3为挑选者，color为属性，blue为color属性的值。挑选者是套用样式的元件，通常

为外部css或内定义css定义的风格的一个名字，在这个初级教程里理解为一个标签的名字也可 以。属性是用语描述挑选者的特性，相当于html语法中的标签的属性。值就是属性的具体内容 。

在css中当我们使用到属性值的时候，通常值是有一个度量依据的，也就是说值是有单

位的。比如我们通常说你从家到学校走1，1什么呢？米，公里，还是走1小时。通常在css中的 单位有：相对单位与绝对单位两种单位具体如下：

“em” (比如 font-size: 2em) ：相对于字母高度的比例因子。

“%” (比如 font-size: 80%)： 相对于长度单位（通常是目前字型的大小）的百分 比例。

px (比如 font-size: 12px) ：像素（系统预设单位）。

pt (比如 font-size: 12pt)： 像点。

此外还有 pc (印刷活字单位), cm (公分), mm (公厘) 和 in (英寸)等单位 。

当值为0时，我们就不需要设置单位了，比如你不想要边框那么我们直接设置border=0 。

在这我多说一句，就是强调单位的使用时，当我自己制作的网页想在分辨率改变时， 字体大小也随着改变那么我们就使用单位%和em，如果你想时你的网页不管怎么调分辨率都是 固定大小的那么我们使用px、pt等元素了。呵呵！

三、颜色的设置和使用。

css提供了16,777,216种颜色可以供我们来使用，通常表现颜色的方式有三种：颜色名 字、rgb(red/green/blue) 数值和十六进制数形式，具体表现如下：

红色可以表示为：red、rgb(255,0,0)、rgb(100%,0%,0%)、#ff0000 和 #f00 五种方 式。

#rrggbb：以三个00到ff的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数 值。

#rgb：简略表示法，只用三个0到f的十六进位值分别表示红、绿、蓝三原色数值。而

事实上，浏览器会自动扩展为六个十六进位的值，如『#abc』将变为『#aabbcc』。但是，显 见这样的 表示法并不精确。

rgb(r,g,b)：以0到255十进位值的红、绿、蓝三原色数值来表示颜色。

rgb(r%,g%,b%)：以红、绿、蓝彼此相对的数值比例来表示颜色，如rgb

(60%,100%,75%)。

color_name： 直接以颜色名称来表示颜色，共有141种标准的颜色名称。

通常我们在设置颜色的时候通常是设置文字的颜色还有一个就是背景色。如按下图进

行设置：

我们可以保存一下文荡然后浏览你就可以看到效果了。

四、关于文本的设置。

我们可以使用多种属性来改变网页文本的大小和形状,以使网页文本内容看起来更加美

观。

font-family：设定文字字型 可以取family-name值，范例：span { family-name : " 楷体" }或范例：。

font-style：设定字体样式，可以取的值有normal 普通字、italic 斜体字；范例： span

{ font-style : italic }。

font-weight：设定字型份量；可以取的值有normal 普通字 、bold 粗体字 、bolder 相对于父元素稍粗 、lighter 相对于父元素稍细 、100,200,300,400,500,600,700,800,900 数字由小到大代表笔画由细到粗，例如：normal=400 bold=700 ；范例：span { font- weight :

bolder }。

font-size：设定文字大小。

text-decoration：设定文字修饰，可能值有 none 普通字 、underline 文字加底线 、overline 文字加顶线 、line-through 文字加删除线 、blink 设定文字闪烁 ；范例： span

{ text-decoration : blink }

text-transform：设定文字转换 ；可能值有none 普通字 、capitalize 将英文单字 地一个字母转换为大写 、uppercase 将所有文字转换为大写 、lowercase 将所有文字转换为 小写 ；范例：span { text-transform : uppercase }。

五、边缘和区块的设置。

margin：边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位 置调整的目的。padding：补白，也就是内容元素与框架之间的这段距离与空间，也可以利用

css指令去控制大小。

把代码改为如图：

他们的属性有：margin-top(上边缘宽度), margin-right(右边缘宽度), margin- bottom(下边缘宽度), margin-left(左边缘宽度), padding-top(上方补白宽度), padding- right(右方补白宽度), padding-bottom(下方补白宽度) 和 padding-left(左方补白宽度)。

下面通过一个图来给大家说明：

看看上图理解点了吧！下面我们开始讲讲边框。

六、边框border性质设定。

边框也能应用到大多数的html标签中，可以来使网页更加美观，边框的具体属性有

border-top：综合设定上边框性质 、border-right：综合设定右边框性质 、border-bottom ：综合设定下边框性质、 border-left：综合设定左边框性质。

border-style 综合设定边框样式 ，可能值：solid(实线), dotted(虚线), dashed( 短直线), double(双直线), groove (3d凹线), ridge (3d凸线), inset (3d嵌入) 和 outset (3d隆起)。

border-width 综合设定边框宽度,可以设置的有 border-top-width(设定上边框宽度 ),

border-right-width(设定右边框宽度), border-bottom-width(设定下边框宽度) 和

border-left-width(设定左边框宽度).

border-color 综合设定边框颜色。

把下面代码加到你的网页中可以看到效果了：