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页面中。

　　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中的图文框那样，拖动这两个物件的控制手柄还可修改其尺寸和位置，但现在还不必这样做，除非您知道要输入的文本所要占用的空间有多大

（）

返回顶部

下一篇：GoLive 5教程 1.4 设置Web页面显示尺寸与保存文档和创建模板 >>