如何在Frontpage中定义CSS样式?
当很多人发现在DW4中定义CSS很方便的时候,开始报怨FP2000不能定义CSS,甚至就此抨击FP2000如何的不好。事实上,在FP2000中定义CSS是很容易的,甚至在某些方面比DW4中定义更方便!
定义HTML标记的样式
在Frontpage2000下,选择菜单“格式/样式”,会弹出一个定义样式的窗口,在CSS列表下拉菜单(位于左下)中,选“所有的HTML标记”, 这时在左边的列中会出现大部分常用的HTML标记,选中一个,然后点右下的“修改”, 会弹出一个“修改样式”窗口,在该窗口左下方有一个“格式”按钮,点击该按钮,会出现一个下拉菜单,一共有五个选项:
字体:顾名思义,这里就是定义字体的地方。
段落:跟“字体”差不多,点进去后根据提示定义就可以了。
定义HTML标记的样式
在Frontpage2000下,选择菜单“格式/样式”,会弹出一个定义样式的窗口,在CSS列表下拉菜单(位于左下)中,选“所有的HTML标记”, 这时在左边的列中会出现大部分常用的HTML标记,选中一个,然后点右下的“修改”, 会弹出一个“修改样式”窗口,在该窗口左下方有一个“格式”按钮,点击该按钮,会出现一个下拉菜单,一共有五个选项:
字体:顾名思义,这里就是定义字体的地方。
段落:跟“字体”差不多,点进去后根据提示定义就可以了。
边框:定义边框和背景等,根据提示定义就可以了。进入后有有“;边框”和“阴影”两个选项卡,在“边框”中定义边框,在“阴影”中定义前景和背景。
编号方式:共有三个选项卡,根据字面意义去定义就可以了。
定位:这就是CSS定位啦,但一般用在具体的网页元素当中。
是不很容易?当然,定义这些您最好要有一定的CSS的基础,不然您可能不知道定义的是什么。但是您只要了解一些语法规则就可以喽,剩下的就让Frontpage2000去做吧!
有两个较为特殊的:
1、在网页任何位置点击鼠标右键,选“网页属性”,在属性面板的下侧有一个“样式”按钮,在这里可以定义body的样式,这样定义在形式上是内嵌式的,事实上这跟直接定义body是
没有什么区别的,因为一个网页中只有一个body。
2、仍然在“网页属性”面板当中,选“背景”选项卡,在中上的位置有一个“启用超链接翻转效果”,选中它前面的复选框,然后点击它下面的“翻转样式”按钮,就可以定义一些字体了,事实上这样定义的是a:hover(即鼠标县停到超链接时的样式 )。
定义class或ID
这个仍然是在菜单“格式/样式”中,在右下的“列表”中选择“用户定义的样式”,这时,你以前定义的标记会出现在右侧的列表中。
下面我们开始定义一个class(伪类),点击右下的“新建”按钮,在最上面的“名称(选择器)”中输入一个名字,比如“.mycss”,注意,前面有一个“.”表明是定义一个class(如果定义ID前面是“#”),但在引用时并不算名字的一部分,只有“.”(或“#”)后面的才做为名字“!”名字!
2、仍然在“网页属性”面板当中,选“背景”选项卡,在中上的位置有一个“启用超链接翻转效果”,选中它前面的复选框,然后点击它下面的“翻转样式”按钮,就可以定义一些字体了,事实上这样定义的是a:hover(即鼠标县停到超链接时的样式 )。
定义class或ID
这个仍然是在菜单“格式/样式”中,在右下的“列表”中选择“用户定义的样式”,这时,你以前定义的标记会出现在右侧的列表中。
下面我们开始定义一个class(伪类),点击右下的“新建”按钮,在最上面的“名称(选择器)”中输入一个名字,比如“.mycss”,注意,前面有一个“.”表明是定义一个class(如果定义ID前面是“#”),但在引用时并不算名字的一部分,只有“.”(或“#”)后面的才做为名字“!”名字!
取好名字后,就开始定义格式了,仍然点“格式”按钮,剩下的就跟上面所讲述的方法一样啦!这里就不再赘述。至于如何在网页的具体元素中引用我们接下来就会讲述。
定义内嵌式的样式
在大部分的属性面板的下侧,都会有一个样式按钮,点击后,就可以定义内嵌式的CSS样式了。比如,先建一个表格,在表格的一个单元格中点击左键,选择“单元格属性”,在属性面板中有一个“样式”按钮,点击后,在下侧有一个“格式”按钮,点进去后就可以定义样式喽!笔者认为:Frontpage2000提供的这种方式来定义内嵌式的样式大大方便了我们的工作,是个不错的功能。
接下来我们看看如何引用一个已经定义好了的class(或ID),仍以单元格为例,在“单元格属性”面板中,点击“样式”,在样式面板的中上部,左侧是“类”下拉菜单,在这里面就可以选择我们定义好了的类了。在右侧是“ID”,不过这里面不是下拉菜单,而是一个单行文本框,需要我们手动的敲进去我们定义好了的ID,注意不要带“#”。
定义内嵌式的样式
在大部分的属性面板的下侧,都会有一个样式按钮,点击后,就可以定义内嵌式的CSS样式了。比如,先建一个表格,在表格的一个单元格中点击左键,选择“单元格属性”,在属性面板中有一个“样式”按钮,点击后,在下侧有一个“格式”按钮,点进去后就可以定义样式喽!笔者认为:Frontpage2000提供的这种方式来定义内嵌式的样式大大方便了我们的工作,是个不错的功能。
接下来我们看看如何引用一个已经定义好了的class(或ID),仍以单元格为例,在“单元格属性”面板中,点击“样式”,在样式面板的中上部,左侧是“类”下拉菜单,在这里面就可以选择我们定义好了的类了。在右侧是“ID”,不过这里面不是下拉菜单,而是一个单行文本框,需要我们手动的敲进去我们定义好了的ID,注意不要带“#”。
这里我们主要是针对对Frontpage2000和CSS有一定基础的朋友讲的,所以讲得较为粗略,希望在阅读的时候能够结合Frontpage2000的使用来加深理解!
用FrontPage 2000做样式表
Dreamweaver以其强大的功能正在扩张到更多“网虫”的硬盘里,然而Dreamweaver并非每个功能都那么出。至少,在样式表(CSS)设置方面就显得太专业,让这些英文不好的“虫虫”们大伤脑筋。经过N次下载、安装,到头来我才发现原来最好的早已在自己的手中,那就是被我封存很久的——FrontPage 2000。下面就让我带领大家一块来分享“傻瓜”化软件带来的快乐吧。
一、三种添加CSS的方式
在FrontPage 2000里可以通过三种方式给网页增加样式表。
一、三种添加CSS的方式
在FrontPage 2000里可以通过三种方式给网页增加样式表。
1. 页面链接一个外部的样式表文件,这种方法可以使多个页面使用同一个样式表文件,方便保持页面的主题。步骤:启动FrontPage 2000,然后依次点“文件”、“新建”、“网页”,打开FrontPage 2000的新建对话框,选择“样式表”选项。在这些样式表中有FrontPage 2000自带的很多样式表供你参考和修改。当然如果你对CSS熟悉的话,你也可以使用空白的样式表,自己重新创建一个。
2. 通过在FrontPage 2000中创建一个样式表单,此时样式表就是网页的一部分,直接
位于HTML文档的之间。这个实际上不算创建,只要把已经创建好的样式表直接复制下来,然后选择网页编辑器的“html”选项,然后粘贴到〈HEAD〉之间就可以了。
3. 通过使用内含样式表元素,单独指定样式表。在FrontPage 2000编辑一个页面的时候,只要选中要发生变化的文字,然后点击右键,选择“网页属性”就可以随时随地进行可视化操作了。
二、内含式样式表的使用
2. 通过在FrontPage 2000中创建一个样式表单,此时样式表就是网页的一部分,直接
位于HTML文档的之间。这个实际上不算创建,只要把已经创建好的样式表直接复制下来,然后选择网页编辑器的“html”选项,然后粘贴到〈HEAD〉之间就可以了。
3. 通过使用内含样式表元素,单独指定样式表。在FrontPage 2000编辑一个页面的时候,只要选中要发生变化的文字,然后点击右键,选择“网页属性”就可以随时随地进行可视化操作了。
二、内含式样式表的使用
下面就以修改美化一个搜索框为例,给大家介绍一下内含式样式表的使用。
现在就开始我们的美化之路。打开FrontPage 2000,然后调入这个页面。接下来就先对输入框进行处理。用鼠标左键选中那个最长的输入框,然后点击右键,选择“表单域属性”,出现文本框属性。
然后点击“样式”,接着选择“格式”中的“边框”按钮,出现边框与阴影对话框。
因为要保持表格的统一,我们在“设置”中选择“自定义”,然后选择“样式”中的“实线”。最重要的就是应用边框的设置。点击方框,四周出现的四个小按钮分别代表着文本输入框的四条边框。为了和文本输入框外面的表格统一,这里的宽度也选择为“1”,然后“确定”。
接着用鼠标左键选中搜索按钮,点鼠标右键,选择“超链接属性”就会出现窗口。
选择“样式”按钮,再选择“浏览”插入我们事先作好的搜索图片。
仍旧用鼠标左键选中那四个字,然后再点击右键,选择“超链接属性”,弹出Windows窗口。
选择“背景”选项,然后选中“启用超链接翻转效果”,然后点“翻转样式”弹出新的Windows窗口。
在这里我们可以一目了然地设置要实现的翻转效果。为了突出“搜索帮助”四个字,我们把字体设置成12pt,这样当鼠标放上去的时候,字体就会从9pt变成12pt,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜以及其他样式。通过内含式样式表的使用,我们很轻松地美化了搜索框.
仍旧用鼠标左键选中那四个字,然后再点击右键,选择“超链接属性”,弹出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 在此设置样式的格式 返回主界面后,执行菜单“文件/保存”命令,将此样式保存为link.css备用。 创建内嵌式CSS 在“网页”视图中,执行“格式/样式”命令,打开样式对话框,然后单击“新建”按钮,在“名称”框中输入新样式的名称为“.pal”,然后在“样式类型”下样式选择为“段落”。然后单击“格式”,再按照前面介绍的方法设置新样式的格式特征,比如字体、段落等。 应用样式 首先我们在“网页”视图中,打开需要应用样式表(CSS)的网页,然后在“格式”菜单上,单击“样式表链接”,打开“链接样式表”对话框,单击“添加”按钮,在打开的“选择样式表”对话框中,选择刚才建立的CSS样式文件,单击“确定”后,即可将其添加在“URL”列表中。如果选中“所有网页”选项,可以将样式文件应用到网站所有网页中,选择“当前网页”只会在当前编辑网页中使用。另外,如果要将样式应用于网页上段落或者文字,首先可以选择要应用样式的文字,然后在工具栏的样式列表框中选择要应用的样式名称即可。 到站提示:样式在网页设计过程中比较常见,巧妙地使用样式不但可以使网页更加美观,而且还可以很好地规范站点中网页的显示效果。下一站,我们将利用FrontPage XP给我们的网页设计表单。 |
在静态HTM页面中实现无刷新的更换CSS样式!
系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更换页面CSS模板上给用户添点恶心吗?于是,昨天晚上好好考虑了这个功能上的实现,原来发现其实并不难,小改一下就OK了,现在系统上的模板更换是不用刷新页面来完成的,明显在感觉上比原来好得多了,下面谈谈经验吧:
对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址,因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去,因此,一定要有一个全局性的变量来记录它,我选用的是SESSION,在用户点击了侧边模板下拉框中的模板时,触发了下拉框的ONCHANGE事件,执行了一段AJAX程序,程序的功能是将用户选中的模板信息发送给服务器,服务器接收新的模板信息后更新表示模板的SESSION值,然后向客户端返回成功信息,客户端则根据返回的成功信息来改变页面样式,注意:我在页面头中写的CSS链接信息是这样子的:
系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更换页面CSS模板上给用户添点恶心吗?于是,昨天晚上好好考虑了这个功能上的实现,原来发现其实并不难,小改一下就OK了,现在系统上的模板更换是不用刷新页面来完成的,明显在感觉上比原来好得多了,下面谈谈经验吧:
对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址,因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去,因此,一定要有一个全局性的变量来记录它,我选用的是SESSION,在用户点击了侧边模板下拉框中的模板时,触发了下拉框的ONCHANGE事件,执行了一段AJAX程序,程序的功能是将用户选中的模板信息发送给服务器,服务器接收新的模板信息后更新表示模板的SESSION值,然后向客户端返回成功信息,客户端则根据返回的成功信息来改变页面样式,注意:我在页面头中写的CSS链接信息是这样子的:
程序代码
<LINK id=cssLink href="css.aspx" type=text/css rel=stylesheet>
css.aspx是一个ASP的页面,它的作用只是单一的根据SESSION中的当前CSS模板信息来转向所应CSS样式表文件!这样子的处是客户端在接收到了服务器端成功更新SESSIONcss鼠标点击样式的信息后刚不用考虑其它的东西,直接一句:
ElementById("cssLink").ElementById("cssLink").href;
将cssLink的href重新写一下儿,虽然是前后一模一样子的值,但这会激发CSS.ASPX页面重新读一下儿,这样子CSS.ASPX页面就能转到新更新的CSS样式表了!由于网站别的页面的样式表链接信息都是这样写的,所以每个页面加载时都是会应用最新更新的样式表的,这样子,网站无刷新的全局更新样式表就实现了!!
轻松制作自己的信息反馈WEB页
网上的信息反馈,其实就是交互表单,通常表单主要用于信息调查、收集统计数字等方面,在电子商务流行的今天,表单的作用更是不容忽视,我们可以利用表单来轻松完成各种数据的收集、获得用户定单等,对于不懂数据库的我们,还是先学学FP的简单表单制作方法吧,也免的落伍与这个电子商务时代。
首先打开"文件"菜单,选择"新建",在子菜单中选择"网页"命令。在弹出的对话框中点击"常规"选项卡,然后选择"表单网页向导",并单击"确定"按钮。
弹表单制作向导对话框后,单击下一步按钮,当我们第一次使用表单网页向导的时候,需要单击"添加"按钮,来添加问题。弹出如图001的对话框后,我们可以在"选择此问题要收集的输入类型"列表框中选择要添加的类型。
单击"下一步"按钮后,会出现关于个人信息的对应项目,对各项内容做好选择后,单击"下一步"按钮。
首先打开"文件"菜单,选择"新建",在子菜单中选择"网页"命令。在弹出的对话框中点击"常规"选项卡,然后选择"表单网页向导",并单击"确定"按钮。
弹表单制作向导对话框后,单击下一步按钮,当我们第一次使用表单网页向导的时候,需要单击"添加"按钮,来添加问题。弹出如图001的对话框后,我们可以在"选择此问题要收集的输入类型"列表框中选择要添加的类型。
单击"下一步"按钮后,会出现关于个人信息的对应项目,对各项内容做好选择后,单击"下一步"按钮。
这样,问题就添加到列表中,如果不想在添加问题,直接单击"下一步"按钮继续制作。
在"如何显示问题列表"下有4个单选钮,是用来调整问题的显示方式,我们在这里采用 "显示为普通段落"的显示方式,然后对其他选项不做改动,单击"下一步"按钮。如图002。
在输出选项中也有3个单选钮供我们选择,我们这里按照系统默认"将结果保存到Web页",然后在"输入结果文件的基本名称"后输入Web页的名字。
单击"下一步"按钮,然后单击"完成"按钮。
然后我们就可以利用我们原来学的知识,对这个表单的页面进行修饰。
做好这些之后,我们就要设置一下表单的属性了。右键单击表单的任意一处,在弹出的快捷菜单中选择"表单属性"命令,在弹出的对话框中的发送到单选钮后设置填写好的表单发送到的地址。在文件名称后输入保存表单结果的文件名称,在这里要输入一个对应的网页地址,单击"浏览"按钮,选择一个已经存在的网页的话,会将表单结果附加在该网页的最后。
在"如何显示问题列表"下有4个单选钮,是用来调整问题的显示方式,我们在这里采用 "显示为普通段落"的显示方式,然后对其他选项不做改动,单击"下一步"按钮。如图002。
在输出选项中也有3个单选钮供我们选择,我们这里按照系统默认"将结果保存到Web页",然后在"输入结果文件的基本名称"后输入Web页的名字。
单击"下一步"按钮,然后单击"完成"按钮。
然后我们就可以利用我们原来学的知识,对这个表单的页面进行修饰。
做好这些之后,我们就要设置一下表单的属性了。右键单击表单的任意一处,在弹出的快捷菜单中选择"表单属性"命令,在弹出的对话框中的发送到单选钮后设置填写好的表单发送到的地址。在文件名称后输入保存表单结果的文件名称,在这里要输入一个对应的网页地址,单击"浏览"按钮,选择一个已经存在的网页的话,会将表单结果附加在该网页的最后。
如果还希望浏览者提交的表单能通过Email反馈到自己的信箱,就在"地址"后的文本框中填写好自己的地址,然后单击确定按钮。(在完成好这些设置之后,如果你没有安装FrontPage服务器扩展,系统会自动提示你安装该扩展,如果没安装服务器扩展功能的话,我们所设置的这些表单也将起不到任何作用。)
接下来设置一下按钮,在表单中我们经常用到的按钮功能就是提交和清除功能,如果我们不想对按钮的名称进行修改,利用系统默认的设置即可。如果想对它进行修改,就双击该按钮,弹出对话框后进行设置。在"名称"后输入这个按钮的名称;在"值/标签"后输入按钮标签,也就是在浏览器中显示的按钮字样;按钮类型包括三种,(选择"提交"单选钮,则规定该按钮的作用为提交表单;选择"重置"按钮,规定按钮的作用为清除填写内容;如果选择"普通"单选钮,就可以自己设置该按钮的作用了,如加上超链接等。)完成按钮设置后,单击"确定"按钮。如图003
做好以上这些之后,我们的一个最简单的信息反馈表单就制作完成了。在跟着我们做好这些之后,可能读者们对FP的服务器扩展功能还不是很了解,在以后我们将专门对FP的服务器扩展功能进行讲解。
接下来设置一下按钮,在表单中我们经常用到的按钮功能就是提交和清除功能,如果我们不想对按钮的名称进行修改,利用系统默认的设置即可。如果想对它进行修改,就双击该按钮,弹出对话框后进行设置。在"名称"后输入这个按钮的名称;在"值/标签"后输入按钮标签,也就是在浏览器中显示的按钮字样;按钮类型包括三种,(选择"提交"单选钮,则规定该按钮的作用为提交表单;选择"重置"按钮,规定按钮的作用为清除填写内容;如果选择"普通"单选钮,就可以自己设置该按钮的作用了,如加上超链接等。)完成按钮设置后,单击"确定"按钮。如图003
做好以上这些之后,我们的一个最简单的信息反馈表单就制作完成了。在跟着我们做好这些之后,可能读者们对FP的服务器扩展功能还不是很了解,在以后我们将专门对FP的服务器扩展功能进行讲解。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论