个人网站制作全接触(中)
时间：2007-02-17 来源：PHP爱好者
三、网站的制作
在完成上面的两部分之后，我们就要进入真正的施工期了。在这一阶段我们要把所有的思想都转化为真实的网页。在以前制作网页是一件非常麻烦的事，因为那个时候的设计师必须得背一大堆HTML程序语法，制作的内容必须一个个字母的输进去。这还是其次，编写者无法及时看到自己的操作是何种结果，所以很是烦琐。现在我们大多采用新一代的“所见即所得”网页编辑软件，这些软件强大的功能提升了工作效率，更能够及时了解自己网页制作的效果。目前这类软件使用最多的就是Dreamweaver和FrontPage这两个软件。他们各有自己的特点，下面我们将向大家分别简单介绍一下这两种软件，以便让初学者有一个好的选择。
1、Dreamweaver
Dreamweaver是美国Macromedia公司出品的专业网页编辑软件，它与Flash、Fireworks合称网页制作三剑客。通过这三剑客我们可以完成网页编辑、动画制作、网页图像处理这三大方便的工作，并且这三个软件能够非常好的结合在一起，所以赢得了众多网页设计师的首选之作。
定义本地站点
为了使用的方便，我们首先对Dreamweaver的界面进行一些简单的介绍（如图1）。从图中我们可以看出，Dreamweaver和其它的常见软件有很多相似之处，菜单栏、左侧的对象栏、以及属性状态栏等。了解了这些界面之后，我们就能进行网页的制作了。不过在在制作网页之前，我们首先得定义一个本地站点。这样就可以在本地硬盘上模拟出一个网络空间，这样做的好处就是避免了文件链接路径的错误。
打开“站点”菜单，执行其中的“新建站点”就会打开如图2所示的站点信息对话框，首先输入我们要制作的站点的名称，然后在本地根文件夹中输入网页文件要存放的位置，并且选中“启用缓存”选项框，点“确定”按钮就会弹出如图所示的站点资源列表框。这样我们就完成了一个本地站点的定义了。
制作一个网页
开工啦！是不是有一种很兴奋的感觉，现在你就跟着我一起来制作一个网页吧。
和文字处理软件相似，我们可以在Dreamweaver中直接输入汉字。例如我们先输入我们要制作的网站的“浩亮工作室”，输入之后你是不是感觉这些字有点小呢？没关系，我们可以对这几个字进行一些格式的设置，选中这几个字，这个时候我们就可以在下面的文字属性栏( 如图3)中对选中的文字进行一些格式化了。首先设置文字的字体为黑体，大小为“7”，颜色为红色，如果想文字居中显示，那么我们还可以点击“居中显示”按钮让选中的文字显示在行中。怎么样，对文字的格式设置是不是和其它的文字处理软件很相似呢？
做好了标题，下面我们就可以在正文处输入网页的其它内容。输入内容就离不了要链接到其它网页，那么如何实现网页之间的相互链接呢？其实这非常好办，选中要链接文字，然后在文字属性对话框中点击链接文本框后面的文件夹小图标，选取中要链接的文件，并且在目标中选择“_blank”（如图4）这样当我们的浏览我们的网页时，把鼠标移到有链接的字上点击一下就能够在一个新的页面中浏览链接到的网页。在这里我们是链接到本地站点上的其它文件的，如果我们要链接打开其它网站上的某一个文件，那么我们只需要在链接后的文本框中输入其相应的网址就可以了。
现在都讲究图文并茂，如果只有文字肯定是不行的，下面我们就来插入一张图片。把鼠标定位在文中合适的位置，然后点击对象工具框中的第一个按钮“插入图像”（如图5）就会弹出选择图像源对话框，在这里我们选择自己要插入的文件，对于插入的图像我们还要对之进行一些个性化的修改。选中插入的图片，首先得对图片大小进行一些设置，至于图片的位置我们可以根据页面的布局在对齐框中设置具体的方式（如图6）。如果想看看网页具体的浏览效果，按下F12键就会自动打开默认的浏览器来观看我们制作的网页了。
图５
图６
到这里我们就可以把我们制作的网页保存起来了。点击文件菜单，执行“保存”命令，选择文件保存的位置为刚刚定义的站点文件夹，如果你想把我们刚刚制作的这个页面作为访问者一进入我们的网页就看到的内容，那么你保存的文件名必须为“index.htm”，并且要注意大小写，另外要记住的是不要以中文命名我们的网页文件。
千变万化的表格应用
在我们刚刚成功的制作出第一个网页之后，你是不是有一种很喜悦的感觉。但是在这种喜悦之余，我又发现在这种情况下排版比较烦琐，不能够很好的协调页面效果。下面我们就向大家讲解如何利用表格来制作网页。
在Dreamweaver中插入表格和Word中一样简单。点击插入---表格命令，就会弹出插入表格对话框，（如图7）在这里我们输入要插入要行数以及列数，对于单元格边距、单元格间距、宽度、边框等，各位读者可以根据自己的不同要求进行设置，如果是想应用单元格来实现排版的方便，那么建议把边框设置为0，这样在编辑模式下，表格将以虚线表示，而在真正浏览时我们就不能看见表格。
在插入的表格中，我们可以在单元格中任意地加入文字、图片、动画等资料，对于表格里的内容的格式设置和格式单元格外的内容是一样的。
在我们插入表格之后我们还可以对表格进行背景色或背景图片的设置，选中相应的单元格或表格，属性面板就显示有关表格设置的相关选项，我们只需要选择相应的颜色或图片就可以应用到选中的单元格中去了。这样就可以省去你构思的麻烦（如图8）。
图层的应用
用过Photoshop的朋友都知道里面有一个图层的说法，其实在Dreamweaver中也有一个图层，在这个图层里，你可以将网页中的任何对象，包括文字、图片、动画等都放到到图层中去。而且应用图层你可以很轻易的把图层放在网页的任何一个地方，图层之间还可以彼此重叠，让你的网页显得更有层次。执行“插入”—“层”命令，这样就会自动在网页中插入一个图层，在编辑模式下，图层是以黑色的细线边框表示的，但真正浏览的时候我们并看不见这个边框，对于图层的编辑和表格的编辑很相似，只需要选中相应的图层边框就会在属性面板中显示相关的设置项（如图9）。
除了上面的所讲述的有关Dreamweaver的应用之外，还可以利用框架制作网页、通过CSS层叠样式表来实现网页特效以及模板、库等的应用。限于篇幅关系，有兴趣的朋友可以参考相关的资料。
php爱好者站 http://www.phpfans.net 网页制作|网站建设|数据采集.
在完成上面的两部分之后，我们就要进入真正的施工期了。在这一阶段我们要把所有的思想都转化为真实的网页。在以前制作网页是一件非常麻烦的事，因为那个时候的设计师必须得背一大堆HTML程序语法，制作的内容必须一个个字母的输进去。这还是其次，编写者无法及时看到自己的操作是何种结果，所以很是烦琐。现在我们大多采用新一代的“所见即所得”网页编辑软件，这些软件强大的功能提升了工作效率，更能够及时了解自己网页制作的效果。目前这类软件使用最多的就是Dreamweaver和FrontPage这两个软件。他们各有自己的特点，下面我们将向大家分别简单介绍一下这两种软件，以便让初学者有一个好的选择。
1、Dreamweaver
Dreamweaver是美国Macromedia公司出品的专业网页编辑软件，它与Flash、Fireworks合称网页制作三剑客。通过这三剑客我们可以完成网页编辑、动画制作、网页图像处理这三大方便的工作，并且这三个软件能够非常好的结合在一起，所以赢得了众多网页设计师的首选之作。
定义本地站点
为了使用的方便，我们首先对Dreamweaver的界面进行一些简单的介绍（如图1）。从图中我们可以看出，Dreamweaver和其它的常见软件有很多相似之处，菜单栏、左侧的对象栏、以及属性状态栏等。了解了这些界面之后，我们就能进行网页的制作了。不过在在制作网页之前，我们首先得定义一个本地站点。这样就可以在本地硬盘上模拟出一个网络空间，这样做的好处就是避免了文件链接路径的错误。
打开“站点”菜单，执行其中的“新建站点”就会打开如图2所示的站点信息对话框，首先输入我们要制作的站点的名称，然后在本地根文件夹中输入网页文件要存放的位置，并且选中“启用缓存”选项框，点“确定”按钮就会弹出如图所示的站点资源列表框。这样我们就完成了一个本地站点的定义了。
制作一个网页
开工啦！是不是有一种很兴奋的感觉，现在你就跟着我一起来制作一个网页吧。
和文字处理软件相似，我们可以在Dreamweaver中直接输入汉字。例如我们先输入我们要制作的网站的“浩亮工作室”，输入之后你是不是感觉这些字有点小呢？没关系，我们可以对这几个字进行一些格式的设置，选中这几个字，这个时候我们就可以在下面的文字属性栏( 如图3)中对选中的文字进行一些格式化了。首先设置文字的字体为黑体，大小为“7”，颜色为红色，如果想文字居中显示，那么我们还可以点击“居中显示”按钮让选中的文字显示在行中。怎么样，对文字的格式设置是不是和其它的文字处理软件很相似呢？
做好了标题，下面我们就可以在正文处输入网页的其它内容。输入内容就离不了要链接到其它网页，那么如何实现网页之间的相互链接呢？其实这非常好办，选中要链接文字，然后在文字属性对话框中点击链接文本框后面的文件夹小图标，选取中要链接的文件，并且在目标中选择“_blank”（如图4）这样当我们的浏览我们的网页时，把鼠标移到有链接的字上点击一下就能够在一个新的页面中浏览链接到的网页。在这里我们是链接到本地站点上的其它文件的，如果我们要链接打开其它网站上的某一个文件，那么我们只需要在链接后的文本框中输入其相应的网址就可以了。
现在都讲究图文并茂，如果只有文字肯定是不行的，下面我们就来插入一张图片。把鼠标定位在文中合适的位置，然后点击对象工具框中的第一个按钮“插入图像”（如图5）就会弹出选择图像源对话框，在这里我们选择自己要插入的文件，对于插入的图像我们还要对之进行一些个性化的修改。选中插入的图片，首先得对图片大小进行一些设置，至于图片的位置我们可以根据页面的布局在对齐框中设置具体的方式（如图6）。如果想看看网页具体的浏览效果，按下F12键就会自动打开默认的浏览器来观看我们制作的网页了。
图５
图６
到这里我们就可以把我们制作的网页保存起来了。点击文件菜单，执行“保存”命令，选择文件保存的位置为刚刚定义的站点文件夹，如果你想把我们刚刚制作的这个页面作为访问者一进入我们的网页就看到的内容，那么你保存的文件名必须为“index.htm”，并且要注意大小写，另外要记住的是不要以中文命名我们的网页文件。
千变万化的表格应用
在我们刚刚成功的制作出第一个网页之后，你是不是有一种很喜悦的感觉。但是在这种喜悦之余，我又发现在这种情况下排版比较烦琐，不能够很好的协调页面效果。下面我们就向大家讲解如何利用表格来制作网页。
在Dreamweaver中插入表格和Word中一样简单。点击插入---表格命令，就会弹出插入表格对话框，（如图7）在这里我们输入要插入要行数以及列数，对于单元格边距、单元格间距、宽度、边框等，各位读者可以根据自己的不同要求进行设置，如果是想应用单元格来实现排版的方便，那么建议把边框设置为0，这样在编辑模式下，表格将以虚线表示，而在真正浏览时我们就不能看见表格。
在插入的表格中，我们可以在单元格中任意地加入文字、图片、动画等资料，对于表格里的内容的格式设置和格式单元格外的内容是一样的。
在我们插入表格之后我们还可以对表格进行背景色或背景图片的设置，选中相应的单元格或表格，属性面板就显示有关表格设置的相关选项，我们只需要选择相应的颜色或图片就可以应用到选中的单元格中去了。这样就可以省去你构思的麻烦（如图8）。
图层的应用
用过Photoshop的朋友都知道里面有一个图层的说法，其实在Dreamweaver中也有一个图层，在这个图层里，你可以将网页中的任何对象，包括文字、图片、动画等都放到到图层中去。而且应用图层你可以很轻易的把图层放在网页的任何一个地方，图层之间还可以彼此重叠，让你的网页显得更有层次。执行“插入”—“层”命令，这样就会自动在网页中插入一个图层，在编辑模式下，图层是以黑色的细线边框表示的，但真正浏览的时候我们并看不见这个边框，对于图层的编辑和表格的编辑很相似，只需要选中相应的图层边框就会在属性面板中显示相关的设置项（如图9）。
除了上面的所讲述的有关Dreamweaver的应用之外，还可以利用框架制作网页、通过CSS层叠样式表来实现网页特效以及模板、库等的应用。限于篇幅关系，有兴趣的朋友可以参考相关的资料。
php爱好者站 http://www.phpfans.net 网页制作|网站建设|数据采集.
相关阅读 更多 +
