如何在Frontpage中定义CSS样式

1、L3J如何在Frontpage 中定义CSS样式?当很多人发现在DW4中定义FP2000如何的不好。事实上，在CSS很方便的时候，开始报怨 FP2000不能定义CSS，甚至就此抨击FP2000中定义CSS是很容易的，甚至在某些方面比DW4中定义更方定义HTML标记的样式在Frontpage2000下，选择菜单 格式/样式”会弹出一个定义样式的窗口，在CSS列表下拉菜单（位于左下）中，选所有的HTML标记”这时在左边的列中会出现大部分常用的HTML标记，选中一个，然后点右下的 修改”会弹出一个 修改样式”窗口，在该窗口左下方有一个格式”按钮，点击该按钮，会出现一个下拉菜单，一共有五个选项字体:顾

2、名思义，这里就是定义字体的地方。段落:跟 字体”差不多，点进去后根据提示定义就可以了。边框:定义边框和背景等，根据提示定义就可以了。进入后有有边框”和阴影”两个选项卡，在 边框”中定义边框，在阴影”中定义前景和背景。编号方式：共有三个选项卡，根据字面意义去定义就可以了。定位:这就是CSS定位啦，但一般用在具体的网页元素当中。是不很容易？当然，定义这些您最好要有一定的CSS的基础，不然您可能不知道定义的是什么。但是您只要了解一些语法规则就可以喽，剩下的就让Frontpage2000去做吧!有两个较为特殊的：1、在网页任何位置点击鼠标右键，选网页属性”在属性面板的下侧有一个样式”按钮，在这里可以定

3、义body的样式，这样定义在形式上是内嵌式的，事实上这跟直接定义body是没有什么区别的，因为一个网页中只有一个 body。2、仍然在网页属性”面板当中，选 背景”选项卡，在中上的位置有一个启用超链接翻转效果”选中它前面的复选框，然后点击它下面的 翻转样式”按钮，就可以定义一些字体了,事实上这样定义的是a:hover（即鼠标县停到超链接时的样式）定义class或ID这个仍然是在菜单 格式/样式”中，在右下的 列表”中选择用户定义的样式”这时，你以前定义的标记 会出现在右侧的列表中。下面我们开始定义一个class（伪类），点击右下的 新建”按钮，在最上面的名称（选择器）”中输入一个名 字，比如“

4、.mycss；注意，前面有一个“表明是定义一个class（如果定义ID前面是“#”）但在引用时并不算 名字的一部分，只有 “.或（“#”后面的才做为名字 “名字!取好名字后，就开始定义格式了，仍然点格式”按钮，剩下的就跟上面所讲述的方法一样啦！这里就不 再赘述。至于如何在网页的具体元素中引用我们接下来就会讲述。定义内嵌式的样式在大部分的属性面板的下侧， 都会有一个样式按钮，点击后，就可以定义内嵌式的 CSS样式了。比如,先建一个表格，在表格的一个单元格中点击左键，选择单元格属性”在属性面板中有一个 样式”按钮，点击后，在下侧有一个 格式”按钮，点进去后就可以定义样式喽！笔者认为：Frontpa

5、ge2000提供的这种方式来 定义内嵌式的样式大大方便了我们的工作，是个不错的功能。接下来我们看看如何引用一个已经定义好了的class（或ID），仍以单元格为例，在单元格属性画板中,点击 样式”在样式面板的中上部，左侧是类”下拉菜单，在这里面就可以选择我们定义好了的类了。在右ID，侧是“ID，不过这里面不是下拉菜单，而是一个单行文本框，需要我们手动的敲进去我们定义好了的 注意不要带“#”这里我们主要是针对对Frontpage2000和CSS有一定基础的朋友讲的，所以讲得较为粗略，希望在 阅读的时候能够结合 Frontpage2000的使用来加深理解！ 用Front Page 2000 做样式表

6、Dreamweaver以其强大的功能正在扩张到更多网虫的硬盘里，然而Dreamweaver并非每个功能都那么出色。至少，在样式表（CSS）设置方面就显得太专业，让这些英文不好的虫虫”们大伤脑筋。经过 N次下载、安装，到头来我才发现原来最好的早已在自己的手中，那就是被我封存很久的 一一Front Page 2000。下面就让我带领大家一块来分享傻瓜”化软件带来的快乐吧。一、三种添加CSS的方式在Front Page 2000里可以通过三种方式给网页增加样式表。1. 页面链接一个外部的样式表文件，这种方法可以使多个页面使用同一个样式表文件，方便保持页面 的主题。步骤：启动 Front Page 2

7、000，然后依次点 文件”新建”、网页”打开Front Page 2000的新建对话框，选择样式表”选项。在这些样式表中有Front Page 2000自带的很多样式表供你参考和修改。当然 如果你对CSS熟悉的话，你也可以使用空白的样式表，自己重新创建一个。2. 通过在Front Page 2000中创建一个样式表单，此时样式表就是网页的一部分，直接 位于HTML文档的之间。这个实际上不算创建，只要把已经创建好的样式表直接复制下来，然后选择网页 编辑器的“html选项，然后粘贴到HEAD之间就可以了。3. 通过使用内含样式表元素，单独指定样式表。在Front Page 2000 编辑一个页面的

8、时候，只要选中要发生变化的文字，然后点击右键，选择网页属性”就可以随时随地进行可视化操作了。二、内含式样式表的使用下面就以修改美化一个搜索框为例,给大家介绍一下内含式样式表的使用。现在就开始我们的美化之路。打开Front Page 2000，然后调入这个页面。接下来就先对输入框进行处理。用鼠标左键选中那个最长的输入框,然后点击右键，选择表单域属性”，出现文本框属性。然后点击 样式”，接着选择 格式”中的 边框”按钮，出现边框与阴影对话框。因为要保持表格的统一，我们在设置”中选择 自定义”，然后选择 样式”中的实线”最重要的就是应 用边框的设置。点击方框，四周出现的四个小按钮分别代表着文本输入框

9、的四条边框。为了和文本输入框外面的表格统一，这里的宽度也选择为“1,然后确定”接着用鼠标左键选中搜索按钮，点鼠标右键，选择超链接属性就会出现窗口。选择样式”按钮，再选择浏览”插入我们事先作好的搜索图片。仍旧用鼠标左键选中那四个字，然后再点击右键，选择超链接属性”弹出Windows窗口。选择背景”选项，然后选中 启用超链接翻转效果”，然后点翻转样式”弹出新的Windows窗口。在这里我们可以一目了然地设置要实现的翻转效果。为了突出搜索帮助”四个字，我们把字体设置成12pt,这样当鼠标放上去的时候，字体就会从9pt变成12pt,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜色以

10、及其他样式。通过内含式样式表的使用，我们很轻松地美化了搜索框Front Page XP样式表的应用Front Page XP。Front Page XP设置边框和底纹等。可以保证用户设计网页与不同的浏览器兼容，它所提供的样式表 使用样式表可以实现网页元素的加宽或紧缩字体间距、设置段落(CSS)功能就是其中之缩进”和段落间距”、Front Page XP可以创建外部和内嵌式级联样式表，让我们一个一个来做。创建外部CSS这是一种可以应用于多个网页的样式表，也就是说，使网站内的页面链接一个外部的样式表文件，其扩展名为CSS，这样就可以使多个页面使用同一个样式表文件，从而保持了整个页面的主题风格，编辑

11、CSS文件可以在任意的文本处理程序中进行。在Front Page XP中，提供了 CSS文件的建立模板，可以根据需要定制自己感兴趣的模板样式。1、建立样式执行文件/新建/网页或站点”命令，在新建网页或站点”任务窗口中，在 根据模板新建”之下，单击网 页模板”打开网页模板”对话框。单击 样式表”选项卡，再单击要创建的 CSS类型，比如垂柳样式，然后 单击确定”按钮。此时，Front Page XP会创建一个文件扩展名为 CSS的新网页，并在网页”视图模式中将其打开以供 编辑，必须保存该网页才能在以后应用这个样式表文件。创建CSS后会显示 样式”工具栏，如图1。在此工具栏上单击可以激活 经保存的样

12、式表文件，可以单击菜单样式”对话框。如果要修改已 视图/文件夹”然后在 文件夹列表中双击要打开的 CSS文件即可。图1样式工具2、编辑样式我们再来看看如何编辑样式。单击 进入 样式”对话框，如图2所示。样式”工具栏上的 样式”按钮或者在 格式”菜单上单击 样式”命令,图2在此编辑样式表在样式列表中，包含了多个样式，其中“ a:link表示对链接文本有效，“ a:active表示对激活链接有效,a:visited对已访问文本有效,“ a:hover表示当鼠标处于悬停状态时有效。单击要修改的样式类型，比如 “ a:link，然后在下方的 列表”中选择 用户定 如果此时要修改标准 HTML标记，可以

13、选择“ HTML标记”。接着在样式列首先在左侧的样式”框中，义的样式”选项，需要注意的是，表中双击“a:link样式，打开修改样式”对话框，如图3。如果要设置对齐方式、缩进或段落间距，可以选择段落”，设置边框和底纹可以选择边框”，设置项目符号和编号的样式，可以选择编号”。完成设置后，关闭所有对话框返回到 CSS文件。这样我们就完成了一个样式的设置，可以将设置好的样式直接应用到网页文件指定的文字、段落中。图3在此设置样式的格式返回主界面后，执行菜单文件/保存”命令，将此样式保存为link.css备用。创建内嵌式CSS在网页”视图中，执行 格式/样式”命令，打开样式对话框，然后单击新建”按钮，在名

14、称”框中输入新样式的名称为“ .pal,”然后在 样式类型”下样式选择为 段落”。然后单击 格式”，再按照前面介绍的方法设置 新样式的格式特征，比如字体、段落等。应用样式首先我们在 网页”视图中，打开需要应用样式表（CSS）的网页，然后在 格式菜单上，单击 样式表链接”, 打开链接样式表对话框，单击添加”按钮，在打开的选择样式表”对话框中，选择刚才建立的CSS样式文 件，单击 确定”后，即可将其添加在 “ URL列表中。如果选中 所有网页”选项，可以将样式文件应用到网站 所有网页中，选择 当前网页”只会在当前编辑网页中使用。另外，如果要将样式应用于网页上段落或者文 字，首先可以选择要应用样式的

15、文字，然后在工具栏的样式列表框中选择要应用的样式名称即可。到站提示：样式在网页设计过程中比较常见，巧妙地使用样式不但可以使网页更加美观，而且还可以 很好地规范站点中网页的显示效果。下一站，我们将利用Front Page XP给我们的网页设计表单。在静态HTM页面中实现无刷新的更换 CSS样式!系统原来的更换CSS模板是要重新刷新一下儿页面的，我一直都对这个功能很不满意，百分之九十五的功能都用AJAX无刷新的实现了，难道要在这个小小的更换页面CSS模板上给用户添点恶心吗？于是,OK 了，现在系统上的模板更昨天晚上好好考虑了这个功能上的实现，原来发现其实并不难，小改一下就 换是不用刷新页面来完成的

16、，明显在感觉上比原来好得多了，下面谈谈经验吧:对于一个多页面的网站来说了，CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页 面头上链接的CSS地址，因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去，因此,一定要有一个全局性的变量来记录它，我选用的是SESSION，在用户点击了侧边模板下拉框中的模板时,触发了下拉框的ONCHANGE事件，执行了一段 AJAX程序，程序的功能是将用户选中的模板信息发送给服务器，服务器接收新的模板信息后更新表示模板的SESSION值，然后向客户端返回成功信息，客户端则根据返回的成功信息来改变页面样式，注意：我在页面头中写的CSS链接信息

17、是这样子的：程序代码vLINK id=cssLink href=css.as px typ e=text/css rel=stylesheetcss.aspx是一个ASP.net的页面，它的作用只是单一的根据SESSION中的当前CSS模板信息来转向所应CSS样式表文件！这样子的处是客户端在接收到了服务器端成功更新SESSION的信息后刚不用考虑其它的东西，直接一句:document.getElementByld(cssLink).href=document.getElementByld(cssLink).href;将cssLink的href重新写一下儿，虽然是前后一模一样子的值，但这会激发C

18、SS.ASPX页面重新读一下儿,这样子CSS.ASPX页面就能转到新更新的 CSS样式表了！由于网站别的页面的样式表链接信息都是这样写的，所以每个页面加载时都是会应用最新更新的样式表的，这样子，网站无刷新的全局更新样式表就实现了！轻松制作自己的信息反馈 WEB页网上的信息反馈，其实就是交互表单，通常表单主要用于信息调查、收集统计数字等方面，在电子商务流行的今天，表单的作用更是不容忽视，我们可以利用表单来轻松完成各种数据的收集、获得用户定单等,对于不懂数据库的我们，还是先学学FP的简单表单制作方法吧，也免的落伍与这个电子商务时代。首先打开文件菜单，选择新建，在子菜单中选择网页命令。在弹出的对话框

19、中点击 常规选项卡,然后选择表单网页向导-，并单击确定按钮。弹表单制作向导对话框后，单击下一步按钮，当我们第一次使用表单网页向导的时候，需要单击添加按钮，来添加问题。弹出如图001的对话框后，我们可以在选择此问题要收集的输入类型列表框中选择要添加的类型。单击下一步按钮后，会出现关于个人信息的对应项目，对各项内容做好选择后，单击下一步按钮。这样，问题就添加到列表中，如果不想在添加问题，直接单击下一步按钮继续制作。在如何显示问题列表-下有4个单选钮，是用来调整问题的显示方式， 我们在这里采用显示为普通段落的显示方式，然后对其他选项不做改动，单击-下一步按钮。如图002。在输出选项中也有 3个单选钮

20、供我们选择，我们这里按照系统默认”将结果保存到Web页，然后在输入结果文件的基本名称”后输入 Web页的名字。单击下一步按钮，然后单击”完成按钮。然后我们就可以利用我们原来学的知识，对这个表单的页面进行修饰。做好这些之后，我们就要设置一下表单的属性了。右键单击表单的任意一处， 在弹出的快捷菜单中选择表单属性命令，在弹出的对话框中的发送到单选钮后设置填写好的表单发送到的地址。在文件名称后输入保存表单结果的文件名称，在这里要输入一个对应的网页地址，单击浏览按钮，选择一个已经存在的网页的话，会将表单结果附加在该网页的最后。如果还希望浏览者提交的表单能通过Email反馈到自己的信箱， 就在电子邮件地址

21、”后的文本框中填写好自己的电子邮件地址，然后单击确定按钮。（在完成好这些设置之后，如果你没有安装FrontPage服务器扩展，系统会自动提示你安装该扩展，如果没安装服务器扩展 功能的话，我们所设置的这些表单也将起不到任何作用。）接下来设置一下按钮， 在表单中我们经常用到的按钮功能就是提交和清除功能,如果我们不想对按钮的名称进行修改，利用系统默认的设置即可。 如果想对它进行修改， 就双击该按钮，弹出对话框后进行设置。在 ”名称后输入这个按钮的名称；在 ”值/标签”后输入按钮标签，也就是在浏览器中显示的按钮字样；按钮类型包括三种，（选择提交单选钮，则规定该按钮的作用为提交表单；选择 ”重置按钮，规

22、定按钮的作用为清除填写内容；如果选择 ”普通单选钮，就可以自己设置该按钮的作用了，如加上超链接等。）完成按钮设置后，单击”确定按钮。如图003做好以上这些之后，我们的一个最简单的信息反馈表单就制作完成了。在跟着我们做好这些之后，可能读者们对 FP的服务器扩展功能还不是很了解，在以后我们将专门对FP的服务器扩展功能进行讲解。正文：css学习:css 是 “ cascading style sheets 的简称，css用以作为网页的排版和风格设计，在 要的一个内容。css的作用是弥补html中文翻译为串接样式表”，也有人翻译为样式表”。web标准建站中，对 css的熟悉和使用 是相当重 的不足，让

23、网页的设计更为灵活。这个文章只是为您介绍 css的基础应用，指引您的一个入门的基础教程，主要目的是为推进web标准贡献自己的微薄之力。说点我自己的体会，现在有好多人都在推广web标准，其实对初学者来说，不需要刚学 的时候就学标准，学点简单的还是容易入门的,因为现在html还在照样用啊，所以我希望初学 者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就 该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个人的实际来行动吧。下面开始学习了一、如何在html中应用css 。您可以利用下列3种方式将css指定的格式加入到html中:1.在h

24、tml文件里加一个超级连结，连接到外部的css文档。（外部连结css）这个方法最方便管理整个网站的网页风格，它让网页的文字内容与版面设计分开。您 只 要在一个css文档内（扩展名为.CSS ）定义好网页的风格，然后在网页中加一个超级连接连接到该文档，那么你的网页会按在css文档内定义好的风格显示出来了。具体的使用防范是:网页文件的标题注意：style.css文件的位置。2.在html文件内的 标签之间，加一段 css的描述内容。（内定义css）这个方法适用于指定某个网页，除了表现外部的css文档定义好的网页风格外，同时还要表现本身 html文档内指定的 css 。如果内在添加的 css描述与外

25、部连接的css描述相冲突的话，网页的表现将以内在添加的css描述为主，也就是外部的描述就不再起作用了。具体使用方法是: 网页标题 !-body font: 12pth1 font: 16ptp fon t-weight: bold;color: gree n网页内容值得注意的是，为了防止不支持css的浏览器误将标签间的css风格描述当成普通字串，而表现于网页上，您最好将css的叙述文字插入在 之间。3.在html文件的文本内容中,随时有需要，随时加一小段 css的描述指定风格。(文本间css)这个方法适用于指定网页内的某一小段文字的呈现风格。外部css与内定义css如果和此定义有相同的项，那么

26、以此定义的css风格表现，外部css文档与内定义css和此定义的没相同的项时那么还会正常显示，同时还会显示文本内容间的css风格。具体使用方法是: 网页标题 本页内容css上述的3种css，可以同时并用，也可以择您所好，单一或成双地使用。如果各间的叙述相冲突，则内在定义的css会覆盖外部连结的css，文本间的css会覆盖内在定义的 css。二、挑选者、属性和值。色。先举个例子：h3 color : blue 表示在文本中只要使用h3标签的文字的颜色都是绿其中h3为挑选者，color为属性，blue为color属性的值。挑选者是套用样式的元件，通常为外部css或内定义css定义的风格的一个名字，

27、在这个初级教程里理解为一个标签的名字也可以。属性是用语描述挑选者的特性,相当于html语法中的标签的属性。值就是属性的具体内容 。在css中当我们使用到属性值的时候,通常值是有一个度量依据的，也就是说值是有单位的。比如我们通常说你从家到学校走 1,1什么呢？米，公里，还是走1小时。通常在css中的 单位有：相对单位与绝对单位两种单位具体如下:em”比如font-size: 2em）:相对于字母高度的比例因子。比例。“比如font-size: 80%）:相对于长度单位（通常是目前字型的大小）的百分px （比如font-size: 12px）:像素（系统预设单位）。pt (比如 font-size

28、: 12pt): 像点。此外还有pc （印刷活字单位）,cm （公分）,mm （公厘）和in （英寸）等单位。当值为0时，我们就不需要设置单位了，比如你不想要边框那么我们直接设置border=0 。在这我多说一句，就是强调单位的使用时，当我自己制作的网页想在分辨率改变时,体大小也随着改变那么我们就使用单位和em，如果你想时你的网页不管怎么调分辨率都是固定大小的那么我们使用px、pt等元素了。呵呵!三、颜色的设置和使用。css 提供了 16,777,216种颜色可以供我们来使用，通常表现颜色的方式有三种：颜色名 字、rgb(red/green/blue)数值和十六进制数形式，具体表现如下:红色可

29、以表示为：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十进位值的红、绿、蓝三原色数值来表示颜色。rgbrgb(r%,g%,b%):以红、绿、蓝彼此相对的数值比例来表示颜色，如141种标准的颜色名称。(60%,

30、100%,75%)。color_name :直接以颜色名称来表示颜色，共有通常我们在设置颜色的时候通常是设置文字的颜色还有一个就是背景色。如按下图进 行设置:我们可以保存一下文荡然后浏览你就可以看到效果了。四、关于文本的设置。观。我们可以使用多种属性来改变网页文本的大小和形状，以使网页文本内容看起来更加美font-family :设定文字字型 可以取family-name 值，范例:span family-n ame : 楷体或范例：span style=family-name: 楷体。font-style :设定字体样式，可以取的值有 normal普通字、italic斜体字；范例： span fon t-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 :设定文字修饰，可能