GoLive 5教程 2.1 创建文本框并输入文本

第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页面中。 45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

　　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。



　　　　　图1　选择Reset Palattes命令

　

　　当您进入GoLive 5的操作窗口后是不是很兴奋？有没有动手做过些操作？是不是移动过某些面板，然后又难以将它们恢复原状？这一步操作的就将让各种面板复位，恢复为原始显示状态后Object面板就将显示在各面板的前面，让您在屏幕上一眼就能看见它，以便开始设计和制作网页。

注：其操作时，您将会时学为了看清楚Layout视图中右边部分的内容而将各面板移至别处，或者关闭所有的面板。不过，您也可以从Window下拉菜单中选择Hide Palettes(隐藏面板)命令来快速隐藏所有的面板。此后，再次执行Reset Palattes命令，也就是这里所列的步骤一，恢复原始显示状态后即可继续选择使用其它的面板了。

　　Object 面板包含有许多工具图标，分别用于创建HTML tags、构造页面的各种元素(如图像、浮动框、下拉列表、更新时间等)，以及其它用途的物件。与其它的Windows应用程序一样，若鼠标指针停留在某一个图标上，稍后即可在该面板的左下角处看看它的名称，只不过全是英文名称，参见图2。什么时候Adobe公司开发出了全中文版的GoLive软件就好了，现在还是将就点吧。

　

　　　图2　显示当前光标所指处的图标名称

注：各种图标在Object面板中分类放置于不同的标签里。标签的数目取决于该软件的安装操作，或者在Modules Preferences(模块参数选择)对话框中的设置情况。例如，在默认状态下安装程序是不会有包含WebObjects模块的，所以在此面板中也找不到WebObjects标签。

步骤二、在Object面板的Basic标签中选择第一个图标，这就是Layout Grid图标，然后将它拖至当前正在设计制作的Web页面中，如图3所示。

　　　　

　　　　　图3　拖动Layout Grid图标至此处



　　　　图4　拖动Layout Text Box图标至此处

步骤三、在Object面板的Basic标签中选择第二个图标，即Layout Text Box图标，然后将它拖至前面建立的网格中，如图4所示。

　　完成这三步操作后，布局网格与文本框就创建好了，不过，后还很小，从现面上看容纳不了几个字，如图5所示。此时，若如同使用DreamWeave 3/4，或者Microsoft word中的图文框那样，拖动这两个物件的控制手柄还可修改其尺寸和位置，但现在还不必这样做，除非您知道要输入的文本所要占用的空间有多大。

（阅读次数：）