GoLive 5教程 2.2 输入文本并调整位置
第二讲、输入文本并调整位置
创建好了布局网格与文本框就能输入文本了。在一般情况下,Web页面设计与操作人员并不会事先对所要输入的文本内容与将要占用区域大小尺寸了解得非常清楚,因此需要边输入,边调整文本框的尺寸与位置,在GoLive 5中这种操作非常的容易,使用拖动的方法即可完成,下面的操作将说明这一点。
步骤一、参见图5,单击文本框物件中的任何一个地方,让一个如同在Microsoft word中输入文本那样的插入点光标显示出来,如图6所示。
图5 单击此处 图6 让插入点光标显示出来
步骤二、埋头从键盘上的输入一行文本: IT作者稿件自卫术。
当输入文本时,不要看文本框的变化,埋头从键盘上的输入即可,也不必考虑布局网格与文本框有多宽、多高,能否容纳下所输入的内容,让GoLive 5自动按当前操作的结果与需要,即时调整其宽度与高度值就是了,结果应如图7所示。由此图可见文本不是横排的,文本框也是竖着的,若使用图8所示形状的光标单击文本框物件,即可看到此时的文本框大小范围与位置。
图7 输入一行文本
图8 使用这种光标单击此处
步骤三、将各面板隐藏后拖动文本框的手柄,将形状调整为图9所示的模样。
图9 调整文本框的形状与尺寸
拖动手柄时,文本的排列方式就会做相应变化,图9所示为横排文本,这正是本例所需要。以后当熟悉了输入文本的操作后,就可在输入文本前拖动布局网格与文本框这两种物件的控制手柄来修改其尺寸和位置,然后再输入文本。这种操作方法如同在Windows 98的“画图”程序中输入文本,不过很难一次就拖动到位,最终还是要边修改边输入的。
图10 单击此按钮
步骤四、单击属性栏中的Align Center(对齐中心)按钮,然后选定布局网格边框线后,再次单击此按钮,参见图11。
图11单击属性栏中的Align Center按钮
这一步将让文本框与布局网格框的垂直中心线对齐,而布局网格框又与页面的垂直中心线对齐,如图12所示。您也可以将布局网格框扩大至页面的边缘处,然后将文本框拖至中心处,不过这对计算机硬件系统将是一个不大也不小的考验,如果内存不够大,那么拖动结束后将会等待一分钟,甚至更多的时间才会在屏幕上看到结果。若内存不能满足需要,GoLive 5还可能会自动退出,并提示再次启动它。此后您可以继续设计自己的Web页面,但是先前的操作结果不会自动保存,这是此软件的一大特点,所以应当随时注意保存当前操作结果,这是初学者特别需要注意的问题。
上述操作说明了使用文本框输入文本的基本方法,操作不算很复杂!但可能与您所熟悉文本输入与排版操作大相径庭,不过如果您有操作Photoshop的经历,或者使用过Windows 98“画图”程序,那就能很好的理解这些操作了。至于修改已经输入的文本内容的操作,与输入文本的操作相比可就简单多了,GoLive 5与Photoshop 6都能如同使用Microsoft word那样,将插入点光标移至所要修改的地方,然后在此输入新的文字,或者删除已有文字,而且也能使用覆盖、拖动文字块、复制与剪切和粘贴文本块等操作。
最后说一句,与直接在Layout视图中输入文本一样,在文本框中也能对段落文本的首行缩进,以便符合中文规范,参见图12。而这在Dreamweaver 3中不允许的。当然了,如果您高兴也可采用首字大写的方式,或者插入图像等手段来表示段落的开始处。这些都是使用Microsoft word处理文本时常用的手法,但在GoLive 5中做起来可是有些麻烦的,参阅本课程后面的内容,您就掌握各操作方法。
请继续进行操作。
图12 在此输入数值4
步骤五、选定文本框后单击属性栏上的Align Top(对齐顶部)按钮,接着在图12中手势所指处的文本编辑框中输入数值4,让结果如图13所示。
这一步操作将先使文本框与布局网格的顶部对齐,然后再下移4个象素单位。这是网页排版操作,也是GoLive 5的一大特点。
图13这是网页排版操作
步骤六、按住键盘上的Ctrl键后向下拖动文本框,以便复制并创建一个新的文本框。接着参照上面的内容输入您想要输入的任何文字。
这一步操作用于说明复制文本框的方法,如果你的网站需要这样做,就可以随后输入一段网站内容文本,参见图14。
图14 本教程将要创建的网站主页部分文本
最后顺便说一下,如上所述那样对文本框、布局网格,等各种能在Layout视图中可见的物件来说,都可以应用工具栏中的各种对齐工具来确定它在页面、或者布局网格中的位置,上面的操作就说明了这一点。此工具栏中提供的各控件中,与控制文本框、布局网格框物件相关的那些如下表所列。
最后说一句,与别的Windows应用程序一样,如果要取消刚才所做的操作,只需要按下键盘上的Ctrl + Z组合键,或者从Edit下拉菜单中选择相应的命令,但要回退多步操作,则需要进入History面板进行操作了,此面板的功能与使用方法同Photoshop软件,而且使用方法也类似,这里就不多说了。
- 最新文章
- GoLive 5教程 2.1 创建文本框并输入文本[01-11]
- GoLive 5教程 1.4 设置Web页面显示尺寸与保存文..[01-11]
- GoLive 5教程 1.3 设置Web页面属性[01-11]
- GoLive 5教程 1.2 建立本地站点[01-11]
- GoLive 5教程 1.1 设置中文运行环境[01-11]
- 利用GOLIVE5.0轻松创建并定义样式表[01-11]
- 相关文章
