图片下载：
glteach01.zip
Lesson 1 ——页面排版
在开始练习前，我们需要做一点准备工作：下载上面的zip包，是我们在教程中将用到的，如果你没有同样的可以用其它的图来代替，但是请注意确保文件名与文中的一致，以和下面的过程保持名称一致，方便你的学习，然后在你的桌面上建立一个叫glteac01的文件夹，把你准备好的图片放进去，好了，我们可以开始了！
选择菜单中的新站点>由现存目录创建。将出现对话框，图1-2。
按下Browse按钮，在桌面上选择glteac01目录(使用Win98的用户路径会和图示不同，但没有影响)。第二行的内容是确定主文件的位置，如果没有，勾选下方的选项，GoLive 将会建立一个内容为空的主文件。确认好后按下Import按钮。系统还会要求确认一个文件存放地，此文件即是站点管理文件，可直接回车确认。
图1-3是刚才所建立站点的管理器，这个看似简单的界面里面包含着非常强大的功能，我们在以后会逐渐感受到。
现在，双击index.html以对其进行编辑。
图形化代码是GoLive的首创，使网页内容有条有理一目了然。图1-4是编辑窗口，左上方的JS意思是JavaScript，一种网络语言。CSS的意思是层叠样式单，用来控制网页中文字和图像的一些特征(如大小、颜色等)。对象视图是GoLive中的WebObject窗口，这将在以后介绍。
现在正式开始,首先如图1-5在Inspector面板(如没有，按Ctrl+1)。点击标题区左边的页面标志。
输入图1-6所示的内容，主页标题(即Title)也可以直接在上图的网页标题区更改。
此时注意编辑窗口的左上角，页面名称的后面出现了一个*号(图1-7)。这表示页面内容已经更改且还没有保存。提醒各位一定要时刻注意保存，以免意外发生丢失数据。
参照图1-8的样子，从Object面板将Layout Grid(定位网格)图标拖进空白区域，并拖动蓝色的小点将网格拉大一些。
再用同样的方法拉进一个Image(图片)图标，将它放置于网格的左上角(图1-9)。
现在我们要给刚刚添加的图片图标指定图片名称，这是一个非常有趣的步骤。在Inspector面板的Basic页中点中红圈中的那个点，并拖动，有一条线会像卷尺一样伸展出来，我们将线的末端指到站点管理器的文件列表中的glteac01_01.gif上，松开手就可以了。同时注意Source栏也出现了此名称。这根线名叫shoot，在这里我们暂时称为拉索(图1-10)。
这是GoLive的一大特色。这个功能使得在站点之间指定文件名，或是处理各种连接的工作变得十分简明方便，感觉也很舒服。无聊时经常拉着线溜来溜去，说不定会发现一两个彩蛋呢(说笑)。
还有，也可以直接由管理器列表中将图片拖进编辑页面。直接双击图片，将会启动Windows默认的图片浏览器(如ACD See)来显示这张图片。
按照上面的方法将其它几张图片放入编辑区，然后重新排列图片。可以单一将图片移动，也可以框选多个一起移动，甚至还可以将多个对象组群(菜单Edit > Group)，组群后可作为一个物件来看待。
另：移动的时候，按住shift键可保持水平或竖直方向的移动，按住Ctrl键将会复制图片。
参照图1-11使用Layout Text Box(网格文字框)图标，并在其中输入文字。注意在使用了定位网格后，只能用这个功能才能输入文字，而网格上是不能直接输入文字的。
按图1-12至图1-13的过程改变文字颜色(先选择文字，然后单击色彩窗口，在弹出的对话框中选择你想要的颜色)。
最后在编辑区点击定位网格，在Inspector面板中点击Optimize 按钮(图1-14)，这个按钮是将网格压缩至版面所需的最小范围，这样在最初定义网格大小的时候就不用计算太精确。
如果在移动的时候发现锁定的位移量不合适，可以改变网格宽度，或者取消移动锁定，取消后就可以以1像素为单位进行移动。如果觉得网格不好看，可以取消网格可见选项，此时网格消失，但仍然起作用。注意以上选项都包含横向和纵向两类。
GoLive的定位网格实际上就是一个自动判断生成单元格的表格，只不过我们感觉不到其生成过程。若用FrontPage等工具打开本页，就会看到其复杂的表格结构。注意复杂的表格架构会增加网页的加载时间。
最后将网格背景改为黑色。
通过上面的练习，大家可以了解到GoLive排版的工作方式，就是将你所想要的对象功能图标拖进页中，然后在面板中做一些参数设定，事实上在GoLive中大多数过程也是如此。许多看似复杂的效果制作起来都很简单。
用户评论