FrontPage 98是目前最流行的网站制作和管理工具。利用它提供的样板主题(theme)很多初学者也开发出了专业水平的精美网页。本文帮助大家除了简单地利用FrontPage
98提供的现成的50多种网站样板主题(theme)外,更进一步设计出你自己的、独一无二的网站样板主题,让你的网站更具个性与魅力。
一、样板主题(theme)在网站中的使用
FrontPage 98 为用户提供了50多种设计精美的网站样板主题,样板主题一般用来定义网页的以下属性:
* 颜色 (文本、 标题、 背景、 表格边框及超级链接)
* 图案 (项目符号、 页面标题、导航图标、导航按钮、水平分隔线)
你可以在FrontPage 的浏览器(Explorer)和FrontPage 的编辑器(Editor)中利用基本相同的界面来选择你喜爱的样板主题,应用于你的网页中,见图1。
在FrontPage 的浏览器应用样板主题选择“查看”菜单(view)下的样板主题,显示出样板主题菜单,菜单左边排列着50多种网站样板主题的名称,右边是预览窗口,你可在左边点击样板主题的名称,在右边预览窗口看效果,选好中意的样板主题后,按“套用”(Apply)按钮,你的网站上的所有网页都会自动具有与你在预览窗口看到的完全相同的颜色、字体、图案等属性。
在FrontPage 的编辑器中可选择 “格式”(Format)菜单下“主题”(Theme)。这两种应用的方式步骤基本相同,结果却不大相同:在浏览器应用样板主题是针对当前的FrontPage网站的所有网页的,而在编辑器应用样板主题只针对当前编辑的一个网页,对网站中的其他网页没有影响。
在图1样板主题菜单中的主题列表下,有三个非常重要的复选框:
* 使用活泼的色彩(Vivid Colors)
*使用更漂亮的图案(Active Graphics)
*使用背景图片(Background Image)
通过这三个选项可以更进一步定义你选择的样板主题,从而帮助你更细致地定义网站的具体风格,是轻松活泼还是庄重严肃。
1. 使用活泼的色彩
选中这一复选框,网页上的文本、标题、超级链接、表格等会套用更丰富鲜艳的色彩,会给你的网站带来轻松活泼印象。而不选这个复选框,网页会套用较为基本的彩色表,标题超级链接也会采用较为温和的颜色,适用于严肃而专业的网站。
2. 使用更漂亮的图案
不选这个复选框,页网上的页面标题、项目符号、水平分隔线和导航按钮所采用的图案都非常简单明快。这些图案下载速度快,适合各种版本的浏览器。而选中这个复选框,取而代之,页网会采用较为复杂的图案,页面标题、项目符号、水平分隔线可能是动画的,而导航按钮则可以是那种鼠标一经过就会变的“动态按钮”(hover
buttons)。
3. 使用背景图片
这个选项决定你的网页是采用单色背景还是图像背景。
样板主题是用来定义页网的背景以及页网上的页面标题、项目符号、水平分隔线和导航按钮的图案,页网上各种文本的字体和颜色的,它不能定义网页上导航按钮具体位置、页面的安排、网页采用的模板或是网站的结构。它是定义网页的形式而不是内容。
各类导航按钮的个数和按钮上的文字内容均由FrontPage 浏览器(Explorer)中网站的组织图安排,组织图中每一个方框代表一个网页,方框里的文字就是出现在网页导航按钮上的文字。在网页中插入导航按钮,可在FrontPage
的编辑器(Editor)的“插入”菜单下选择“导航栏”,在出现的“导航栏属性”菜单选择插入何种导航按钮。网页导航按钮上的文字也只能在FrontPage
浏览器(Explorer)的网站组织图中修改,未在组织图中出现的网页,也就没有对应的导航按钮。
样板主题的组成成员的外观和属性在使用过程中是不能修改的,虽然大家可以利用样板主题轻松地设计出外观精美的有专业水平的网站,但如果大家都从这50种样板主题选择自己的网站风格,在Internet上会有多少似曾相识的面孔呀?!好在FrontPage
98 CD-ROM中还为不甘平庸的设计人员准备了一个小工具FrontPage Theme Designer,利用它你就可以轻轻松松地设计和修改只属于你自己、天下独一份的主题样式了。
在开始设计自己样板主题之前,我们还需深入地了解一下样板主题的组成。
二、样板主题(theme)的组成
图2给出了在一个网页上具体应用中显示出来的样板主题(theme)主要组成成员,而实际一个样板主题(theme)的组成远远不止这些。
虽然在每个网站在具体应用样板主题时,都不会用到样板主题中的所有组成成员,但每个样板主题都必须全面包括以下几组配置:
1. 基本配置—应用于整个样板主题设置
* 样板主题的名称
* 标题和正文的字型字体
* 全站导航按钮的图案
* 背景图案
2. 简单图案-在未选“使用更漂亮的图案”(Active Graphics)复选框时使用的样板主题成员
* 一个网页标题图案
* 一个水平分隔线的图案
* 三个级别 GIF项目符号、
* 一个水平导航按钮的图案
* 一个垂直导航按钮的图案
* 一组Home, Next, Previous, 和 Up 导航按钮的图案
3. 活泼图案
Active Graphics在选中“使用更漂亮的图案”(Active Graphics)复选框时使用的样板主题成员。
* 一个网页标题图案(可以是动画)
* 一个水平分隔线的图案(可以是动画)
* 三个级别 GIF项目符号(可以是动画)
* 三个用来建“动态按钮”的水平导航按钮的图案 (平常时、 变化时、 按下后)
* 三个用来建“动态按钮”的垂直导航按钮的图案 (平常时、 变化时、按下后)
* 三组用来建“动态按钮”的Home, Next, Previous 和 Up 导航按钮的图案(平常时、 变化时、 按下后)
4. 基本颜色-在未选“使用活泼的色彩(Vivid Colors)”复选框时使用的样板主题成员
* 默认文本颜色—通常是黑色或深色
* 三种超级链接的颜色:当前的、平常的和访问过的
* 三维表格边框的颜色— 通常是automatic/gray
* 网页背景颜色—通常是浅色或白色
5. 活泼颜色-在选中“使用活泼的色彩(Vivid Colors)”复选框时使用的样板主题成员
* 默认文本颜色
* 三种超级链接的颜色
* 三维表格边框的颜色
* 网页背景颜色
必需注意的是:所有样板主题中的每一类图案的大小应保持一致,以保证在应用各种样板主题时网页的布局不会改变。
三、样板主题(Theme)的设计
1. 字体的设置
与Microsoft Word等文字处理软件不同,在HTML语言中你无法精确定义每种字体大小,它只提供七种设置,而这七种设置具体大小是由Web浏览器而非网页设计者来控制的。默认的字型大小如下表:
在为一个样板主题选择字体时,你还必须考虑到你所采用的字体的通用性,如果你为样板主题的标题安排了“琥珀”字体,在网页上应用这个样板主题很有可能达不到预期的效果,因为很多浏览你的网页的用户很有可能恰好没有安装这种字体!如果你使用了不太常见的字体,除了少数几种Windows系统字型如Arial,
Times New Roman ,Courier New,宋体和黑体之外的字体,你还必须为你所选的字体准备一个或几个替代字体,以备用户机器中没有安装你的首选字体时,可以采用你的第二选、第三选字体。
2. 图案的设计
合适的图案会为你的网页锦上添花,标题和按钮的图案质量直接影响着网页的美观。在为样板主题设计图案时,应考虑以下问题:
* 色彩的和谐
* 图案的通用性
* 动画的趣味性
图3是一个很好的设计范例。
这个样本主题的设计以温暖的棕黄色为基调,以秋天的树叶为主题,简洁而又高雅,又有较好的通用性。
3. 文字的安排
在样本主题中的图案上一般是没有文字的, 标题与按钮上的文字是在具体应用于某个网站时,根据用户安排填写的。在设计样本主题时,我们需要为标题与按钮上的文字指定字体、颜色等属性。
在设计一个上面要安排文字的图案时,我们需说明下面这些属性:
* 文字的字体
* 文字的颜色
* 水平对齐方式
* 垂直对齐方式
样本主题中上面安排有文字的图案必须以GIF格式保存。
4. 透明像素的使用
在样本主题中每个图案的具体大小是固定的,当你为样本主题准备的图案的尺寸较小时,需在四周填上透明的像素,以保证你所设计的样本主题在具体应用中不会改变网页的页面布局和安排。
所有的导航按钮(顶层、水平和垂直)是被紧密地排列在一起的,如果你喜欢它们之间有一定间隔,也可通过填上一些透明的像素来实现。
5. 动态效果的使用
网页上的动态效果主要包括两种实现方式: GIF动画和动态按钮。合理地应用动态效果会使你的网页更加活泼而有生气,但也会由于文件较大而影响网页下载的速度。所以每个样本主题的网页标题、水平分隔线、标目符号中最好只有一个采用GIF动画,
图像采用GIF89a 格式。
配置一个动态按钮时,除了像配置其他普通按钮一样,给按钮定义相应文本属性和一个按钮图案外,还需给它再额外定义两个图案,一个在鼠标指针在按钮经过时,按钮图案变化时使用;另一个是表示按钮巳被按下的图案。
6. 样本主题的INF文件
每个样本主题都由两个扩展名为INF 的文件来管理和控制。一个是每个样本主题特定的INF文件<theme>.inf,这个文件的指令只控制这一个样本主题,另外,还有一个顶层的文件themes.inf
,它的指令控制着安装于计算机上的所有样本主题。当然,文件<theme>.inf的指令较文件themes.inf的指令具有较高优先级。
7. <theme>.inf 文件
每个样本主题特定的INF文件<theme>.inf 包括以下信息:
例如 arcs.inf 文件的内容如下:
[info]
title=Arcs
codepage=1252
version=01.01
readonly=true
8. Themes.inf与文本的处理
FrontPage 样本主题中定义的文字字型均默认是Windows-1252字符集中的,如果网页保存在其他字符集中,需在themes.inf
文件中加以说明。
代码段名: [Fonts]
<charset>,<font1>=<font1>
指定特定字符
集中的
<font1> 作为
网页的第一字
型
<charset>,<font1>=<font2>
指定特定字符
集中的
<font2> 作为
网页的第一字
型的替代字型
<charset1>=<charset2>
指定字符集
<charset2>替
代字符集
<charset1>
themes.inf 文件中没有指定字符集,将在浏览时使用浏览器默认的字型。
代码段名: [Families]
<font>=<pitch>,<family> 描述文本的间
距和字型分类
属性
文本的间距属性<pitch>的值可以是 "variable" 或 "fixed."
,<family>的值如下表:
字型分类 描述
Decorative 一些新奇的字型,如Old
English
Modern 固定
Roman 可变间距并有细字体的字型,
如MS Serif
Script 类似手写的字型
Swiss 可变间距且无细字体的字型,
如 MS Sans Serif
这组信息让FrontPage知道在设计人员的机器上没有安装某种字型时,在保持风格的前提下以何种字型来替代这种字型。
三、样板主题设计工具DESIGNER的使用
当你希望自己的主页充满个性、与众不同时,FrontPage 98 提供的五十多种预设计好的样板主题可能就无法满足你的需要了。你希望既充分利用FrontPage
98在设计网页时提供的种种便利,又给网页增加一些个性化的东西,只好自己动手,从头开始,遵照上一节介绍的设计方法和原则,设计自己样板主题。当然,将现有的样板主题加以修改,也是一个不错的办法,能节约不少精力。
FrontPage 98 CD-ROM中,为大家准备了一个小工具FrontPage Theme Designer,利用这个工具,再结合一些图像设计软件,如Photoshop、Image
Composer等,你就可以轻松地设计和修改你自己的主题样式。
1. 安装
要安装Theme Designer, 首先要退出FrontPage Explorer 和 FrontPage Editor
(如果它们正在运行的话) ,然后运行FrontPage 98光盘上\SDK\THEMES\DESIGNER 文件夹下的tdsetup.exe
即可开始安装。当安装完成后,再调用FrontPage Explorer,可在FrontPage Explore的工具(Tools)菜单下找到Show
Theme Designer 命令,选中该命令就可开始主题样式的设计和修改了。Theme Designer的安装程序 tdsetup.exe
还安装了一个小工具:FrontPage Theme Verifier。这个程序thmveras.exe 被安装在FrontPage
安装的目录的\bin 子目录下, 它用来测试你自行设计的主题样式能否正常工作。这个工具用于你不想借助Theme Designer的帮助而完全依靠自己来设计主题样式时使用。当你的设计完成后,可利用FrontPage
Theme Verifier来分析测试你的主题样式,并产生一个分析报告。
2. 设计一个新的主题样式
设计新主题样式的捷径是从学习和修改现有的主题样式开始。我们从File 菜单中选择Open Theme,从巳安装的主题样式列表中选择一个,如图4中打开
"Network Blitz"。这个主题样式列表与我们在FrontPage Explorer' 的主题样式列表相一致。当然,你也可在File
菜单中选择New Theme 命令开始你的设计。
在主题样式设计窗口中将显示这个主题样式的所有成员:
* 主题样式的名称
* 网页标题
* 顶层导航按钮
* 水平导航按钮
* 垂直导航按钮
* 文本字型
* 平常的超级链接文本
* 当前的超级链接文本
* 访问过的超级链接文本
* 一个水平分隔线
* 表格边框的颜色
* 标题
* 三级项目符号
* Home,Up,Previous及Next pages导航按钮
* 水平排列方式
* 垂直排列方式
当你的鼠标经过某个主题样式的成员时,鼠标指针图案会变为一个手的图案,这个成员名称会显示在状态条上。双击一个主题样式的成员,将打开相应的属性表,在这个表中你可以修改这个成员的属性,并立刻看到预览效果。通过单击右键,然后从快捷菜单中选择属性这一项,也可修改成员的属性。
3. 显示方式选择
在使用Theme Designer时,对应于样板主题菜单中的三个复选框:使用活泼的色彩(Vivid Colors);使用更漂亮的图案(Active
Graphics);使用背景图片(Background Image)。
4. 对新的主题样式的保存
完成了新主题样式的建立和老主题样式的修改工作后,选择File 菜单下的Save As 命令保存到一个新文件中, 或选择Save
命令覆盖老的主题样式。
5. 自定义主题样式的使用
当你用Theme Designer编辑修改一个主题样式后,若想使用该主题样式的网站巳在FrontPage Explorer中打开,网站会自动改变。如网站没打开,则需在主题样式菜单中对该网站重新套用。
你利用Theme Designer生成和修改的新主题样式,也和其他主题样式一样,可以在FrontPage 的浏览器(Explorer)和FrontPage
的编辑器(Editor)中使用,但对某个主题样式修改并不会影响以前使用这个主题样式的网站。要想使用新版本的主题样式,你必须打开该网站,对该网站重新套用一次这个主题样式;如果你的网站中只有某些页面使用了这个主题样式,你就得在FrontPage
的编辑器(Editor)中打开这些页,把这些页面重新套用一次这个主题样式。
6. 与其他用户共享你的成果
若你想与其他用户分享你自己设计的主题样式也很容易。当一个FrontPage 98用户在FrontPage的浏览器(Explorer)打开一个使用着你的主题样式的FrontPage
网站时,新的或较高版本的主题样式会自动下载到他的机器上。如果你出于安全性考虑,不希望授权给其他用户随意修改你的网站,你也可以专门建立一个网站,用来发布你的最新设计成果,其他用户可以从这个网站下载你最新设计的主题样式。
FrontPage主题样式的应用是有赖于FrontPage组件,在网站上自动实现的。由于FrontPage组件是在服务器网站端运行的,所以要使用FrontPage组件,Web服务器必须是FrontPage兼容的服务器,需安装了FrontPage服务器扩展(FrontPage
Extension Server),对于非兼容FrontPage的服务器以及未安装FrontPage服务器扩展的来说,所有服务器驱动的FrontPage
组件都将被忽略,FrontPage主题样式中除背景图案等简单信息外其他的应用会被一概忽略。
在众多Web制作工具中,FrontPage 98以其功能强大、易学易用而备受欢迎,它为广大网友创建和管理高质量的Web站点提供了妥善的解决方案,号称“无需编程即可拥有极具专业水准的Web站点”。它既适用于初学者,也同样适用于专业技术人员,堪称为建设专业品质的Internet和Intranet网站的最佳工具。
|