欢迎进入周励与《曼哈顿的中国女人》读者网站

　　记得98年第七期《新潮电子》个人主页完全制作手册中有这样一句话:“《曼哈顿的中国女人》一书中,作者满怀豪情地写道:‘在那高高的国际金融大厦上密密麻麻的窗户中，总有一天我也要有属于自己的那一扇’，如今看到Internet上令人眼花缭乱的网站，你也可以说:总有一天我也会有一个属于自己的网站”。光说不练是假把式，下面我们就来做一个既简单又漂亮而且动感十足的网站吧！想知道我们将要做的网页的最终效果吗？请看（图1） http://zstudio.soim.net/。

　　在开始制作页面之前我们先来选几件上手的制作工具。现在比较流行的主页制作工具为微软的Frontpage98，很多人都在使用，不过，这个软件产生的无效代码有时候会让你伤透脑筋。这里，我向大家推荐Dreamweaver2，它是一款功能非常强大的主页制作利器，和Frontpage98一样为所见即所得，最让我感慨的是它那方便易用的插件和用层控制页面的排版概念，这主要归功于她对DHTML（DynamicHTML 动态主页）的良好支持！这个软件可以到 http://www.macromedia.com/ 去下载。当然，一个漂亮的网站是少不了漂亮的图片的，所以我们使用Photoshop5来作为我们处理图片的工具。

　　千里之行，始于足下

　　首先我们须要在本地硬盘中创建一个目录来放置网页使用的所有文件，用资源管理器在C盘中新建一名为ZSTUDIO的文件夹（图2）。

　　打开Dreamweaver的编辑器，按F5键（或点击编辑窗口右下部的Show Site FTP按钮（图3））弹出站点管理窗口（图4）。

　　点击“Site/New Site”（图5）创建一个新站点管理器。在弹出的窗口的右中部点击文件夹按钮（图6）浏览寻找本地站点位置,我们选择C盘下刚建好的ZSTUDIO目录作为本地站点。在站点的设置窗口中我们还能在Category选项中对远程服务器进行设置（图7）。设置后点击工具栏的Connect按钮就可以在Remote Site窗口中打开远程站点，这样，你就可以很方便地上传网站了。

　　接下来我们在本地站点窗口中点击右键，在弹出的窗口中选择“NEW FOLDER”或“NEW FILE”命令创建新的文件夹或文件（图8）。我们在这里建一个名为IMG的文件夹用于保存网站所使用的图片和一个名为index.htm超文本的文件作为我们的首页。双击index.htm就会在Dreamweaver的编辑窗口中打开首页进行编辑！OK，我们现在正式开始网站的制作！

　　图片制作

　　一个好的网站一定要有一个漂亮的站标，站标的设计和图形制作都是同样重要的，在这里我向大家重点介绍Zstudio站标的制作过程。　　打开Photoshop5，按下Ctrl+N新建一大小为125×66pixels的图像文件，并将背景色设置为白色。

　　点击层活动面板的新建层按钮(图9)新建一层。

　　使用套索工具在画像中绘出一三角形选区（图10）。

　　将前景色设为黑色，背景色设为红色。

　　用前景色填充选区，并按下CTRL+C、CTRL+V复制选区。

　　在新复制的层中用红色填充，并选择“Edit/Transform/Rotate 180”将红色的层旋转180度(图11)。

　　使用移动工具将红色的三角形移到(图12)所示效果。

　　在层面板中将1号层和2号层用套索连接，点击层面板右上角小三角形菜单中的“Merge Linked”命令将1、2号层合并（图13）。

　　按下CTRL+T，用鼠标将图案旋转一下（图14），到位后按下回车键确定。

　　在层面板中用鼠标右键点击该层，并选择右键菜单中的Effects（图15）。

　　选择Drop Shadow模式，并按图（图16）设置，我们可以发现这时图案下面出现了阴影效果。

　　新建一层，在图案下端用矩形选取工具拉出一矩形选区，将该选区按要求填充颜色。

　　在矩形图像层中使用Effects中的“Bevel and Emboss”选项，并按照（图17）设置。

　　使用文字工具输入“studio”。

　　将图像层合并，存为JPG格式的文件，完成图标制作。

　　站标右边那幅图的制作方法同上，如有兴趣，大家可以自已动手去试试。

　　主页上另外两幅漂亮的图片（Photoshop和Dreamweaver的开机画面图）是通过抓图软件抓来的，具体的抓图方法，大家可以去看看这方面的相关软件，这里就不一一介绍了。

　　统一页面风格

　　　　我们现在开始制作页面。首先，我们对页面属性进行设置，在编辑窗口中点击右键，并在弹出的右键下拉菜单中选择“Page Properties”命令（图18），在弹出的窗口中设置页面属性（图10）。在这里我们把页面标题设为“Z工作室”，页面背景色使用编辑器默认的白色（#FFFFFF），而对文字和链接的颜色我们都暂不设置。接下来点击编辑窗口右下方的“Show html source”按钮（图20）打开源代码窗口（图21）。这时，我们在和标签之间加入以下代码

FONT-SIZE: 12px; LINE-HEIGHT: 17px } BR BODY { FONT-SIZE: 12px; LINE-HEIGHT: 17px } BR A:link { COLOR: blue; TEXT-DECORATION: none } BR A:visited { COLOR: blue; TEXT-DECORATION: none } BR A:active { TEXT-DECORATION: none } BR A:hover { COLOR: blue; TEXT-DECORATION: underline }

知道这段代码的作用吗？它就是用来控制页面中文字的大小、文字链接的颜色和鼠标接触链接文字时的动态效果。

　　为风格样式标签，它的作用是统一整个页面的风格。代码td和body两行分别用来控制在表格中和不在表格中的文字的大小，在这里我们把一个全角文字的大小设为12PX，这是在目前的网页中非常流行的一种字体。而line-height则是用来控制行距的变量。下面以A开头的几行是用来控制链接文字的风格的。OK!关闭源代码窗口，回到编辑状态。

　　用表格设计版面

　　我们知道在制作主页时，一般都是通过表格和框架来控制页面的布局。
　　我们现在使用表格来大致划分一下版面。插入表格的方法有3种，你可以点击“Insert/table”命令或点击“Objects”面板中的插入表按钮（图22）（各活动面板可以通过点击“windows”菜单中的命令调出）来调出插入表窗口（图23），最简单的是直接使用快捷键Ctrl+Alt+T。按照图23设置好表格属性，确定后，编辑窗口的顶部会出现一表框。按照我们的要求，须要将表格放置在页面的中间位置，这时我们就须要在表格属性面板中进行设置。如果现在表格没有被选中，就在表框中点击鼠标右键，并在右键菜单中选择“Select table”命令将表选中。按照图24设置好表格属性。确定后在编辑窗口就会出现一个被分割为两列的排列在页面中间的表。我们将在这张表中放置网站的图标（就是前面我们用Photoshop5制作的站标）和一个广告板。拖拉表格中间的分栏线，将表格的两列调整到合适宽度，然后分别在两栏中插入两张已准备好的图片。由于编辑器默认将插入的对象放置在表单元的左部，如果我们需要调整表单元中元素的摆放位置则可在单元属性活动面板中进行调节（图25）（图26）。
　　将光标移到表格外面，再插入一张表（图27），同样将其放置在该行的正中。为了使这张表呈现出一定的立体效果我们还须对这张表和它的表单元做一些设定（图28）。然后分别在两个单元中填入相应的背景色（图29）。但这种立体样式的表格在Netscape中并不支持。

　　让页面每天都是“新”的

　　现在将光标移到第二张表格的左边单元中，然后点击显示源代码按钮，在当前光标处插入以下代码:

　　想知道这段代码是干什么用的吗？点击“File/prveiew in browser”预览一下吧。这是一段JAVAScript代码，通过它将读出你的系统时间中的日期和星期，并在当前位置显示出来。这样不管你当日是否更新页面，你的网站看上去总是“新”的，呵呵（图30）。

　　添加计数器

　　接下来再添加一个表来放置网站的主要内容和计数器，并按照图31设置该表的属性。根据需要我们可以调节合表单元的栏宽并将两边两栏的背景色填充为蓝色得到如图32的效果。
　　分别将三个表单元的属性面板中的Vert的值都设为“Top”，这样在表单元中插入的元素都将自动排放在单元的顶部。
　　在最左边的单元中再插入一表作为网站的目录索引，并按照图33所示设置表属性。
　　接下来我们要做的是添加一个计数器。一般地，计数器是通过在服务器上运行一段程序后并将结果以图片的形式通过浏览器打开。我们在源代码中只需要添加一段script的代码即可。申请免费的计数器的网址有很多，http://www.fast-counter.com就很不错。申请后它会给你一段代码，我们只须将其放置在主页源代码中的相应位置即可。
　　在填写完目录索引后，就可以在中间的单元中添加主要内容了。这里没什么技术含量，唯一值得说的就是如何实现图文混排。当我们在文中插入一张图片时，图片会作为插入当前行中的一个元素于其它文字共处一行，如图34所示，这样就不太美观了。为了不出现这种情况，我们可以在图片上点击鼠标右键，然后选择Align命令中的LEFT或RIGHT（图35）就可以将图片放置在当前行的最左端或最右端，而所有文字将围绕图片排放。

　　用“层”装点页面
　　在使用表格时我们会发现有时很难将一幅图片或一段文字放到满意的位置，而新一代DHTML规则为我们提供了一个全新的概念--Layer（层）。通过层我们就可以随心所欲地在页面中放置所有的对象！我们可以在页面的任意位置添加任意大小的层，层与层之间是可以相互重叠，并且我们可以将层定义为隐藏而通过一些特定的事件将其显示出来。这就是在我们页面右边的动态效果！
　　在右边的表单元中我们先填写需要添加的文字，注意:这时先不要修改文字的颜色。用鼠标在编辑窗口的左上部点击一下，然后点击Insert菜单中的layer命令，页面中将出现如图36所示的层。点击层左上角的方形手柄，并将层拖放到页面的右面，拖拉其顶部可改变层的大小，直到满意为止，如图37所示。
　　这时我们在层Layer1中写入一些文字。为了以后的动态效果更加明显，我们先在层中插入一个表，并将表属性按照图38设置。
　　在输入文字后按下F11键调出层控制面板，点击眼睛图标下面的Layer1前面的空白处，使出现如图39所示状态，这样该层将被隐藏。
　　选中层Layer1，然后按下Ctrl+C，再按下Ctrl+V，复制出一个层。在层属性面板中可以将名字改为Layer2，这样我们就在同一位置放置了两个大小一致的层对象Layer1和Layer2。
　　选中需要加链接的文字，在属性面板中的Link栏中输入链接地址。按下F8键，打开Behaviors面板，点击加号，选择“Show-Hide Layers”命令（图40），然后在出现的对话框中选择Layer1，并点击Show按钮，这时在Behaviors面板中就会出现一条事件。按照图41将事件设为“on Mouse over”（鼠标接触时），这样在浏览器窗口中当鼠标移到该链接处就会将层调出。然后再添加事件，这次我们选择“Hide”，并把事件设置为“on Mouse out”。这样在浏览器窗口中当鼠标从链接处移走后，该层就被自动隐藏了！很简单是吧！快自己动手把剩下的几个层完成吧！
　　最后我们来修改链接文字的颜色。选中链接文字，在属性面板中将文字颜色值设为#FFFFFF，这样被选中的链接文字就被修改为白色了！
　　好了，一个简单、漂亮、动感实足的网页就完成了，剩下的工作就是充实网站内容了。现在你可以说:“在浩瀚的INTERNET中也有了一个属于我自己的网站了！” 　　

《新潮电子》1999年第6期