第 4 章编辑网页

第4章编辑网页 设计站点地图，有助于突出网站的主题，确定网站的内容。而对于每一个网页来说，最重要的除了网页的内容以外，还有就是网页的风格和布局。一个格局凌乱的网页，内容再精彩，也不能说是一个好网页。 4.1网页的布局

4.1网页的布局 4.1.1网页的风格针对不同的网页风格，大体可以将网页分为两大类：商业网页和个人网页。商业网站一般都有比较统一的布局设计，而个人主页由于内容专一，不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活，更容易创造出美感。

4.1.1网页的风格 在IE浏览器中输入网址：http://www.sohu.com，打开网站“搜狐”的首页，如图所示。通过观察，我们可以发现主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。

4.1.1网页的风格 在IE浏览器中输入网址：http://www.microsoft.com/china ，打开网站“微软中国”的首页，如图所示。微软中国的主页与搜狐相比，内容比较专一，内容非常有条理，栏目突出，不象搜狐给人一种乱糟糟的感觉。

4.1.1网页的风格 在IE浏览器中输入网址：http://b2b.on.net.cn ，打开网站“黑白音乐”的首页，如图所示。这是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。

4.1.2网页布局实例 所谓网页的布局，通俗地说，就是确定网页上的网站标志、导航栏、菜单等元素的位置。不同的网页，各种网页元素所出的地位不同，他们的位置也就不同。一般情况下，重要的元素都放在突出的位置。简单划分，网页的布局一般可以分为：“厂”字型、“同”字型、标题正文型、分栏型、Flash型、封面型等。

4.1.2网页布局实例 “厂”字型结构的特点是内容清晰，一目了然。网页最顶端是徽标和图片（广告）栏，下半部分的左边是导航链接，右边是信息发布区。这种结构非常常见。如图所示。

4.1.2网页布局实例 “同”字型结构是大型网站最常用的一种结构，特点是超链接多、信息量大。网站的顶端是徽标和图片（广告）栏，下部分分为三列，或者更多。两边的两列区域比较小，一般是导航超链接和小型图片广告等，中间是网站的主要内容，最下面是网站的版权信息等。

4.1.2网页布局实例 标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。一般在这种注册页面比较常见。

4.1.2网页布局实例 分栏型结构一般分为左右（或上下）两栏，也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页，导航链接栏的内容不会发生变化。在WEB型的电子邮箱中多见这种结构。

4.1.2网页布局实例 Flash型结构，这种结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。

4.1.2网页布局实例 封面型结构，这种结构往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不同，这种结构并不是在Flash中完成的，而是在网页制作软件中完成的。

4.1.3网页布局注意事项 ⑴平衡性一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在文字、图像等要素的空间占用上分布均匀，而且还有色彩的平衡，要给人一种协调的感觉，而失去平衡的画面会使人产生不安全的感觉，视觉上也不愿多做停留。 ⑵对称性对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。 ⑶对比性让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如色彩对比、图形对比等，往往能够创造出富有变化的效果。 ⑷疏密度页面布局要做到疏密有度，不要整个网页布满密集的文本信息或图片，适当留白反而可以强调整个画面的重点部分，而对于文本信息可以通过改变行间距、字间距来制造一些变化效果。 ⑸反复性反复就是不断的出现，例如由几个有规律的小色块在网页里上下左右地延伸排列，这就是反复之美，利用大小相同的图片进行反复排版，这也是反复之美。 ⑹韵律感具有相通特性的对象，如点、圆、线条，沿曲线反复排列时，就会产生韵律感，使画面显得轻盈而富有灵气。总之，网页的排版布局是决定网站美观与否的一个重要方面，通过合理的、有创意的布局，才可以把文、图像等内容完美地展现在浏览者面前。

4.1.4画出网页布局草图 网页的标题图案放在左上角，右边是一个图片栏，可以放广告。要实现这种网页的布局有两种方法，一种是采用表格，一种是使用布局视图。

4.2使用表格 按照如左图所示的设置后，就得到下面这个表格：首先打开一个网页，然后在网页中另起一行，确定光标的位置。然后单击“插入”面板的按钮，得到如下图所示的对话框。 4.2.1插入表格

4.2.2插入、删除表格的行与列 ⑴单击表格最下面一行，使光标出现在该行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单，在下一级菜单中单击“插入行或列”，如左下图所示，打开如右下图所示“插入行或列”对话框。

4.2.2插入、删除表格的行与列 ⑵在“插入行或列”对话框选中“行”，在“行数”右端的栏位中输入1，然后选中“所选之下”。单击“确定”按钮，在图片所在行的下面将插入一行，结果如图所示。

4.2.2插入、删除表格的行与列 删除行的步骤首先单击鼠标，使光标出现在该行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上弹出子菜单，在下一级菜单中单击“删除行”，该行被删除，如图所示。

4.2.3合并与拆分单元格 现在将表格最下端的两个单元格合并成一个。拖动鼠标指针选中第三行两个单元格，移动鼠标指针到“属性”面板上，如右上图所示，单击“合并单元格”按钮，两个单元格被合并，结果如右下图所示。

4.2.3合并与拆分单元格 首先单击鼠标，使光标出现在该单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，如上图所示，打开如下图所示“拆分单元格”对话框。在“拆分单元格”对话框中选中“拆分为行”，在“行数”右端的栏位中输入“2”。单击 “确定”按钮，该单元格被分为两个单元格，该表格恢复原状。

4.2.4表格的嵌套 我们在第二行第一个单元格中在插入一个表格，用来存放与其它网页连接的一些文字，将来建立超链接后，可以通过单击这些文字打开相应的网页。单击鼠标，将光标移动到该单元格中，单击“插入”面板的按钮，打开“插入表格”对话框，如左下图所示。输入5行1列，单击“确定”按钮，结果如右下图所示。

4.2.5使用“表格属性”对话框 对表格进行设置，主要是在属性面板中进行，注意的是选取表格与选取单元格时，属性面板的内容是不同的。在该属性面板中，能够设置框线的宽度、单元格间距，以及背景色等。

4.3布局视图 布局视图是Dreamweaver MX增强的一个功能，使用它可以非常方便地对网页布局进行规划。 ⑴在插入面板中，单击“布局”选项卡，如下图所示。 4.3.1布局视图工具栏 ⑵单击“布局视图”按钮，切换到布局视图，系统会弹出如左图所示的对话框，提示单击“布局单元格”按钮和“布局表格”按钮的使用方法。

4.3布局视图 4.3.1布局视图工具栏 ⑶单击“确定”按钮，可以关闭该对话框。如果不希望该对话框出现，可以在“不再显示此消息”前的复选框内单击，然后再单击“确定”按钮。这时可以发现插入面板右边的两个按钮已经由虚变实，可以使用了。

4.3.2使用布局视图规划网页布局 ⑴单击绘制布局表格按钮，编辑区顶端出现“布局视图”几个字。移动鼠标到编辑区，指针变成状，按住鼠标指针拖动，画出一个绿色的表格，如图所示。

4.3.2使用布局视图规划网页布局 ⑵用同样的方法，在第一个表格的下面再画两个布局表格，结果如图所示。

4.3.2使用布局视图规划网页布局 ⑶在插入面板中单击绘制布局单元格按钮，移动鼠标指针，在顶端表格中画出一大一小两个单元格；在第二个表格中，一大五小六个单元格；最后在下面一个表格中画出一个和表格一样大的单元格。结果如下图所示。

4.3.2使用布局视图规划网页布局 ⑷如果对表格中各单元格的大小和位置不满意，可以进行修改。将鼠标移动到单元格框线上，这时框线颜色由绿色变成红色，单击鼠标，单元格框线变成蓝色，并出现8个正方形选取块。将鼠标指针放在正方形选取块上鼠标指针变成双向箭头，拖动鼠标可以更改单元格的大小，如下图所示。

4.3.2使用布局视图规划网页布局 ⑸在插入面板中单击“标准视图”按钮，返回标准视图，结果如下图所示。

4.4　设置文字 ⑴单击窗口菜单下的“属性”命令，可以打开“属性面板”。在“属性面板”中，单击右端的，在下拉菜单中选择选项，如下图所示。 4.4.1　字体与字号

4.4.1　字体与字号 ⑵在弹出的“编辑字体列表”对话框中，如左下图所示，选中“可用字体”栏中的中文字体，本例选中“仿宋_GB2312”，单击按钮，字体出现在“选择的字体”栏中。单击“确定”按钮，“仿宋_GB2312”被加入到“属性面板”的字体下拉框中，结果如右下图所示。

4.4.2文字的对齐方式 ⑴选中整个表格，如上图所示，将属性面板中的“填充”值更改为10，这样各个单元格间的距离更改为10像素；将“间距”值更改为10，这样表格中的文字与表格框线的距离变成10像素。更改后结果如下图所示。

4.4.2文字的对齐方式 ⑵将鼠标指针移动到表格最下端的单元格中，拖动鼠标指针选中表格中的所有文字，在属性面板中单击“文本缩进”按钮，将文字移动到表格中央。

4.4.3文字的风格与颜色 选中“最新动态”几个字，在属性面板中单击按钮，打开颜色板，选择褐色，将文字设为褐色，如左图所示；单击按钮，将文字设为加粗。用同样的方法将“产品动态”、“产品下载”、“留言簿”、“与我联系”等设置成褐色、加粗。结果如右图所示。

4.5美化网页 1、图片格式因特网上应用最广泛的图片格式有两种：GIF文件和JPEG文件。 GIF（Grappler Interchange Format ）图片文件是第一种被WWW所支持的图形文件。它采用LZW压缩算法，存储格式从1位到8位，最多支持256种颜色。GIF文件相对体积较小，多数用于图标，按钮，滚动条和背景等等。 JPEG或JPG称为联合图片专家组（Joint Photograph Expert Group）格式，它主要应用于摄影图片的存储和显示，是一种静态影像压缩标准。 4.5.1插入图片 JPG文件一般色彩比较饱满、鲜艳 GIF文件一般都比较小巧

4.5美化网页 GIF文件与JPEG文件的对比 4.5.1插入图片

4.5.1插入图片 2、插入图片的方法 ⑴在Dreamweaver中打开网页“index.htm”，在左上角单元格中单击鼠标，光标显示在该单元格中。单击对象面板上的按钮，弹出“选择图像源”对话框，单击查找范围右边的按钮，在下拉菜单中，选择C盘，如下图所示。

4.5.1插入图片 ⑶在文件夹“images”中选择文件“title”，在对话框右边显示的是图片的预览图像，通过预览可以知道图片的内容。单击“确认”，将图片插入网页，如下图所示。 ⑵在C盘中双击文件夹“网页素材”，将它打开，接着在文件夹“网页素材”中双击文件夹“images” ，如下图所示。

4.5.1插入图片 ⑷由于图片在C 盘的“网页素材”文件夹中，在网站以外，所以，Dreamweaver弹出一个对话框，如右图所示，提示是否将图片保存到网站中。单击“是”。 ⑸网站中现在只有5个网页文件，处于对网站管理的要求，最后将图片、动画、声音等文件保存在另一个新的文件夹中，这样可以保持网站根目录的整洁。在“拷贝文件为”对话框中单击“创建新文件夹”按钮，如右图所示。

4.5.1插入图片 ⑹输入images作为新文件夹的名字，然后双击该文件夹，将它打开。在文件名框中输入“title.gif”作为文件名，单击“保存”按钮，如左下图所示。可以看到图片被插入到网页中，如右下图所示。

4.5.1插入图片 ⑺用同样的方法在网页顶端右边的单元格中插入另一幅图片，如图所示。

4.5.2设置图片 单击图片，图片被一个黑框框住，同时出现三个小的实心黑框。鼠标指针指向图片右下角，当鼠标指针变成双向箭头时，拖动鼠标，更改图片的大小，如右图所示。在单击图片时，属性面板同时被打开。单击“对齐”右边的按钮，选择“居中”。在“替代”框中输入“青岛杰力电子工程有限公司”，如下图所示。这样，当鼠标在浏览器中移动到该图片上时，会显示“青岛杰力电子工程有限公司”几个字；特别地，由于网络慢等原因，图片不能正常下载时，图片区域会显示替代文字，从而不会影响到网页的整体效果。

4.5.3添加网页背景 要使网页漂亮起来，设置页面属性必不可少。在编辑窗口中打开主页index.htm。在左图所示的菜单中单击“页面属性”命令，打开“页面属性”对话框，如右图所示：

4.6创建并使用布局模板 ⑴在Dreamweaver中打开网页“index.htm”，用鼠标单击“文件”菜单，在弹出的菜单中选择“另存为模板”命令，如图所示。 4.6.1创建布局模板

4.6.1创建布局模板 ⑵在“另存模板”对话框中输入模板的名称，单击“保存”按钮，如左下图所示。这时，可以发现在站点选项卡中出现一个新的文件夹，名为Templates，模板文件就保存在该文件夹中，如右下图所示。

4.6.1创建布局模板 ⑶下面为该模板建立可编辑区域。移动鼠标指针，在中间右侧的单元格中单击，使光标出现在该单元格中。然后在编辑区域顶端工具栏区域，单击“模板”选项卡，在“模板”工具栏中单击“可编辑区域”按钮，如图所示。

4.6.1创建布局模板 ⑷在出现的“新建可编辑区域”对话框中，出现“可编辑区域”的名称，我们不必更改它，单击“确定”按钮，如下图所示。

4.6.1创建布局模板 ⑸完成设置，在该单元格中出现“可编辑区域”的名称。用同样的方法在左边的单元格中创建一个“可编辑区域”，并将嵌套的表格移动到可编辑区域中。最后，用鼠标单击“文件”菜单，在弹出的菜单中选择“保存”命令，将模板文件保存，如图所示。

4.6.2使用网页布局模板 ⑴用鼠标单击“文件”菜单，在弹出的菜单中选择“新建”命令，如图所示。

4.6.2使用网页布局模板 ⑵如图所示，在“从模板创建”对话框中有三部分内容，在左侧窗口选择站点“青岛杰力电子有限公司”；在中间部分选择网页模板文件“bujv”，在右侧的窗口会见到该模板的预览图。确认无误后，单击“创建”按钮。

第 4 章 编辑网页