|
发信人: 2001asp(ujj) 整理人: eagle(2001-05-19 17:48:01), 站内信件 |
| 第2部分 输入与布局Web页面中的文本
第一讲、创建文本框并输入文本 GoLive 5为制作Web页面提供了功能不同的多种工具，而且使用拖动的方法即可建立并布置Web页面中的相关物件，不用花费好多的精力与时间即可制作好精彩绝纶的Web页面，甚至通过非常轻松地几步操作即可布置好网格线(Grids)、文本框(Text Box)、表格(Table)、浮动框(Floating Box)等物件，创造出图文并茂的Web页面可是弹指一挥间的事情。与DreamWeaver 3/4一样，在开始设计Web页面之前需要确定所要使用的工具，然后使用它来放置相应的物件。对于普通的Web页面来说，GoLive 5与DreamWeaver 3/4都可以直接在文本窗口中输入文本，然后再来确定其位置并选择对齐方式。但在GoLive 5中使用布局网格线 (Layout Grid)与布局文本框(Layout Text Box)，能在放置文本物件时将位置精确至1个象素的距离。对于表格还能控制包围文本的边框距离与样式，以及预先送入电子表格数据或者其它信息至行与列中；运用浮动框可在层中重叠物件，并使用GoLive 5的Timeline Editor(时间线编辑器)创建动画，本教程后面将详述这两部分的内容。 GoLive 5还提供有性能高级的Web页面布局工具，用于制作包括框架(Frames)、信纸(Stationery)、组件(Components)在内的效果。框架用于将一个Web页面划分为几个部分，并让它们各自显示不同的文档。使用信纸则能设计出一种特殊的页面，并以信纸的方式保存它，以便在需要的时候基于信纸制作一个完全可以编辑的Web页面。组件是Web页面中一种特殊物件，通过它能创建您的站点中频繁使用的物件，如可将导航条(Navigation Bar)保存为一个组件，以便在需要的时候快速将它加入进正在设计的Web页面中。 DreamWeaver 3/4也提供了上述功能，但在GoLive 5中做起来却是那样的轻快、方便，读完这一部分的内容后一定会有所体会。下面就将首先讲述如何为输入文本设置一个文本框，以及输入文本的各种操作方法。 在GoLive 5输入文本的工作类似于操作您已经熟悉了的，如Mircosoft Word，与DreamWeaver 3/4一样软件也提供了文字处理功能，它们的差别在于一个更接近于Mircosoft Word，后者要稍差一点，这一点可以由它们的排版功能看出。操作时，这两个软件都可以直接在文档窗口(即Layout视图)中输入文本，或者从另一应用程序中复制与粘贴文本，并且能应用各种文本格式与拼写检查、搜索文本等操作，文本可直接输入在文本框、表格单元 (Table Cell)、浮动框中。不过，这里要指出，操作时，GoLive 5输入外部文本的功能是不太好用的，包括从Windows剪切板中粘贴文本，都可能会产生不可读的乱码，好在您一定不是经常使用此功能，对吧？ 对于Web页面设计与制作人员来说，通常设计一个站点时会首先制作好它的基本内容，然后才会与别的Web页面建立链接，而第一步呢则是要设计好主页，对吧？“主页”与“网页”在设计与制作方面没有什么特殊性，只不过主页是站点中的第一张Web页面而已，它们都是Web页面。而绝大多数网站的主页主要组成物件将是文本，其次在是图像，而绝大多数的学习制作Web页面是从输入文本开始的，如果您已经掌握了在Mircosoft Word中输入文本的方法，现在就可以在Layout视图中输入文本。不过，在GoLive 5中最常用的方法是使用布局网格来输入文本，因为这可以很容易的重新排布文本的位置，而且稍后选定文本框后即将文本拖至任何页面中的一个地方，也方便重新排列段落文本。 下面的操作将首先制定网站的标题文本，请注意本教程是如何运用Object(物件)面板中的Layout Text Box图标来创建文本框的，这是使用此软件工作的第一步操作。 步骤一、从Window下拉菜单中选择Reset Palattes(复位面板)命令，参见图1。 当您进入GoLive 5的操作窗口后是不是很兴奋？有没有动手做过些操作？是不是移动过某些面板，然后又难以将它们恢复原状？这一步操作的就将让各种面板复位，恢复为原始显示状态后Object面板就将显示在各面板的前面，让您在屏幕上一眼就能看见它，以便开始设计和制作网页。 注：其操作时，您将会时学为了看清楚Layout视图中右边部分的内容而将各面板移至别处，或者关闭所有的面板。不过，您也可以从Window下拉菜单中选择Hide Palettes(隐藏面板)命令来快速隐藏所有的面板。此后，再次执行Reset Palattes命令，也就是这里所列的步骤一，恢复原始显示状态后即可继续选择使用其它的面板了。 Object 面板包含有许多工具图标，分别用于创建HTML tags、构造页面的各种元素(如图像、浮动框、下拉列表、更新时间等)，以及其它用途的物件。与其它的Windows应用程序一样，若鼠标指针停留在某一个图标上，稍后即可在该面板的左下角处看看它的名称，只不过全是英文名称，参见图2。什么时候Adobe公司开发出了全中文版的GoLive软件就好了，现在还是将就点吧。 注：各种图标在Object面板中分类放置于不同的标签里。标签的数目取决于该软件的安装操作，或者在Modules Preferences(模块参数选择)对话框中的设置情况。例如，在默认状态下安装程序是不会有包含WebObjects模块的，所以在此面板中也找不到WebObjects标签。 步骤二、在Object面板的Basic标签中选择第一个图标，这就是Layout Grid图标，然后将它拖至当前正在设计制作的Web页面中，如图3所示。 步骤三、在Object面板的Basic标签中选择第二个图标，即Layout Text Box图标，然后将它拖至前面建立的网格中，如图4所示。 完成这三步操作后，布局网格与文本框就创建好了，不过，后还很小，从现面上看容纳不了几个字，如图5所示。此时，若如同使用DreamWeave 3/4，或者Microsoft Word中的图文框那样，拖动这两个物件的控制手柄还可修改其尺寸和位置，但现在还不必这样做，除非您知道要输入的文本所要占用的空间有多大。 第二讲、输入文本并调整位置 创建好了布局网格与文本框就能输入文本了。在一般情况下，Web页面设计与操作人员并不会事先对所要输入的文本内容与将要占用区域大小尺寸了解得非常清楚，因此需要边输入，边调整文本框的尺寸与位置，在GoLive 5中这种操作非常的容易，使用拖动的方法即可完成，下面的操作将说明这一点。 步骤一、参见图5，单击文本框物件中的任何一个地方，让一个如同在Microsoft Word中输入文本那样的插入点光标显示出来，如图6所示。 步骤二、埋头从键盘上的输入一行文本: IT作者稿件自卫术。 当输入文本时，不要看文本框的变化，埋头从键盘上的输入即可，也不必考虑布局网格与文本框有多宽、多高，能否容纳下所输入的内容，让GoLive 5自动按当前操作的结果与需要，即时调整其宽度与高度值就是了，结果应如图7所示。由此图可见文本不是横排的，文本框也是竖着的，若使用图8所示形状的光标单击文本框物件，即可看到此时的文本框大小范围与位置。 步骤三、将各面板隐藏后拖动文本框的手柄，将形状调整为图9所示的模样。 拖动手柄时，文本的排列方式就会做相应变化，图9所示为横排文本，这正是本例所需要。以后当熟悉了输入文本的操作后，就可在输入文本前拖动布局网格与文本框这两种物件的控制手柄来修改其尺寸和位置，然后再输入文本。这种操作方法如同在Windows 98的“画图”程序中输入文本，不过很难一次就拖动到位，最终还是要边修改边输入的。 步骤四、单击属性栏中的Align Center(对齐中心)按钮，然后选定布局网格边框线后，再次单击此按钮。 这一步将让文本框与布局网格框的垂直中心线对齐，而布局网格框又与页面的垂直中心线对齐，如图12所示。您也可以将布局网格框扩大至页面的边缘处，然后将文本框拖至中心处，不过这对计算机硬件系统将是一个不大也不小的考验，如果内存不够大，那么拖动结束后将会等待一分钟，甚至更多的时间才会在屏幕上看到结果。若内存不能满足需要，GoLive 5还可能会自动退出，并提示再次启动它。此后您可以继续设计自己的Web页面，但是先前的操作结果不会自动保存，这是此软件的一大特点，所以应当随时注意保存当前操作结果，这是初学者特别需要注意的问题。 第三讲、格式化处理文本 在众多的可视化Web页面设计与制作软件中，GoLive 5的格式化文本功能可是别具一格，它提供有Physical(物理)与Structural(构造)两种风格,这与Microsoft Word、Dreamweaver 3/4的差别很明显。Physical风格用于设置粗体(Bold)、斜体(Italic)、单空格的电传打字 (Monospaced Teletype) 格式，以及其它的通用字符格式。使用Structural风格能够将文本分为引用语(Quotation)、变量(Variable)、键盘登录(Keyboard Entry)等类别，以便于应用GoLive 5的CSS(Cascading Style Sheet,串连样式表)功能。不过，尽管可以在GoLive 5中设计使用许多种文本格式，但不一定每一台计算机都支持它们。当不支持时，Web浏览器会使用默认的文本格式，您也可以设计一个字体列表，让Web浏览器自动从第一种字体开始选择使用字体。 为了应用一种Physical风格，只需要按操作Microsoft Word的方法使用拖动的方法选定文本，然后通过属性栏即可选择设置三种Physical风格：Bold、Italic、Teletype(电传打字)，它们的在工具栏中分别标记为B、I、T，与Microsoft Word中的标记一样，这里多说了。在选定文本内容的操作中，可以参照这些在Microsoft Word中选定文本的操作：将光标移至文本中某处后，单击此处将把插入点光标放置在此，若连击则选定连续书写的字符串(以标点符号和空格为界线)、连续三次单击此处则选定一行文本(包括标点符号和空格)、连续四次单击此处由选定整个段落。 其实，GoLive 5提供的Physical风格文本格式不止Bold、Italic、Teletype这三种，但若要选择其它可用格式，需要从Type下拉菜单中选择Style命令，进入Style子菜单后才能进行操作。在该子菜单中，可以找到GoLive 5提供的所有Physical风格文本格式，它们所控制的文本格式如下表如列。对于初学者来说，应注意在同一个选定的文本上可以应用多种格式，操作时只需要在Style子菜单后中选择打开想要的文本格式命令即可，不过有些格式是不能同时应用的，如下划线与出局线显然就只能选其一，不可同时选用。此外，不同的Web浏览器，或者不同版本的同种软件，所看到的文本格式将会是不一样的。如较早的Web浏览器就不会支持Physical风格的个别格式，至少是看不到Plain、 Bold、Italic格式的，GoLive 5也无法克服这个问题。 表：Style子菜单中的命令与所控制的格式 命令名 中文意思 格式 Plain Text 无格式文本 移去文本上已经存在的格式 Bold 粗体 在文本上应用粗体格式 Italic 斜体 在本上应用斜体格式 Underline 下划线 在文本上应用下划线格式。 Strikeout 出局线 在文本上应用一条划线。 Superscript 超级脚本 将文本设置为常见的脚注格式 Teletype 电传打字 将文本设置为电传打字格式 Blink 闪亮 为文本加上闪亮，但只能在Netscape Navigator(一个知名的Web浏览器软件)中看到效果。 若在Type下拉菜单中选择Structure命令，进入Structure子菜单后即可选择应用Structure风格的文本格式，各命令所控制的格式如下表所列，您将会发现这些格式真是有点独特！ 表：Structure子菜单中的命令与所控制的格式 命令名 中文意思 格式 Plain Structure 无结构格式 移去已经存在的所有结构格式 Emphasis 强调 加上下划线 Strong 粗体 使文本变粗体 Quotation 引用语 标识文本为来自它处的引用语。大多数的Web浏览器支持将引用语显示为较小的字体或者斜体字。 Sample 样本 标识文本为样本。大多数的Web浏览器支持将样本显示为单空格格式。 Definition 默认 标识选定文本为默认格式。大多数的Web浏览器默认文本为无格式。 Variable 变量 将文本标识为计算机程序代码块中的一个变量名。大多数的Web浏览器将显示该格式为斜体。 Code 代码 将文本标识为计算机程序中的代码。大多数的Web浏览器将显示该格式为单空格格式。 Keyboard 键盘 将文本标识为由键盘输入文本。大多数的Web浏览器将显示该格式为单空格格式。 综上所述，格式化处理一般文本时，可以使用Microsoft Word中的操作方法，而与DreamWeaver 3中的操作方法差异较大，而且在GoLive 5中可以应用的格式更多，选择的余地更大，以致于您需要花费较多的时间才能完全掌握各格式的用途。 顺便说一下，在GoLive 5中可省略文本边框，尽管此做法在Web页面设计中不多见，但还是可以某些网站中见到，因为这能使段落文本中的句子不断行，即无断点地全部写在同一行中。若选定某一个段落中的部分文本，然后从Type下拉菜单中选择Nobreak(无断点)命令，接着就能在屏幕上看到该结果。若要对无断点的一行段落文本设置断点，只需要将插入点光标放置在要断行的地方，然后按下键盘上的Shift + Enter组合键即可。如果需要，从Objects面板中选择使用Line Break(行断点)图标即可设置断点，只是操作要麻烦一些，也不常用。 ---- E网情深国立华侨大学商检95本主页(http://sj95.126.com)  |
|
[关闭][返回] |