网页入门第三讲（6.18日更新）

[Post=3]

织梦之旅第三站

我们进入织梦之旅第三站，在第三站中我们讲一下表格的基本操作和图片浓缩图的做法，会演示新建一个照片集来说明以上两点。另外还会讲到不同页面之间的链接方法。

＊第一步：表格的基本操作

表格是网页的一个非常重要元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了了设计者的水平。

从这一讲开始我们要从一个整体网站的角度出发来讲解，来说明不同页面文件（htm网页文件）之间的相互链接，因为一个网站是由很多的网页组成的，不可能所有的页面都集中在首页（index.htm）上，我们在设计一个网站时首先就要考虑怎么布局，不过我们是初学者，先学习一些基础的操作，随着课程的深入我们自然会明白这一点。

1、先新建一个基本页，操作方法是在DW中点击顶部“文件”菜单中的“新建”命令，再按“创建”按钮。新建的这个网页我们不再命名为index.htm了，因为我们的目的是想在这个网页中存放自已喜欢的图片，也就是相当于网站中的一个分内容，大家访问过很多网站，来到一个网站后会进入相应的分类页面访问自已感兴趣的内容，我们也做类似的设计，把自已喜欢的图片集中到一个页面，如果你把自已的照片集在论坛公开的话大家肯定会很感兴趣的，图片的点击率当然高啦。好，不废话了，说到文件命名，我们不命名为index.htm，我们选择“文件”菜单中的“保存”命令，保存为photo.htm。

2、因为这个页面不光只存放一两张图片，我们可能存放几十张甚至上百张图片呢，在第二课中我们讲了插入图片的方法，也许你马上会想到用同样的方法把图片全部插入到网页中，这样行是行，但大家在设计网页时要考虑到一个美观的问题，你插入的图片一般都比较大，页面每张图片大小不一，这样全部插入进来会显得页面特别乱，而且别人访问时会感觉显示速度很慢，我们今天要实现的方法就是把图片插入到表格中，每张图片占用表格中的一个单元格，并用图片要缩小成固定尺寸，点击小图片可查看大图片，这样设计是比较人性化的，因为访问者并不是对你的每张图片都感兴趣，让他点击感兴趣的图片再看个明白是比较合理的。搞清楚了道理我们来看一下具体怎么样来实现自已的想法呢？

点击菜单“插入”－－“表格”（快捷链为Ctrl+Alt+T） ，看到如图1所示的对话框。
（图1）

　　① 行数：表格的行数；列数：表格的列数；

　　② 宽度：表格的宽度，单位可以是像数或百分比。按像素定义的表格大小是固定的，而按百分比定义的表格，会按照浏览器的大小而变化，这个百分比相当于表格的宽高相对于浏览器的百分比。

　　③ 边框：表格线的宽度；

　　④ 单元间距：单元格间距；单元格填充：单元格边距。所谓的单元格，就是表格里面的每一小格。

我们示例中准备插入6张图片，每一行准备放三张图片，只需两列就行了，所以我们把行列数设置为2行3列，图1中的其它参数我们暂不改变，因为这些参数在下面的属性面板中是可以随时调整的。

　按照如图的设置后，就得到如图2下面这个表格：

（图2）

　　把鼠标移动表格线上，在表格线上点一下，可以全选整个表格，此时可在属性面板看到，如图3所示：

（图3）

　　① 行，列：表格的行和列；

　　② 宽，高：表格的宽和高，通常情况下，我们都不会定义表格的高度；

　　③ 间距，填充：单元格间距和单元格边距；边框：表格线的宽度；

　　④ 对齐：表格的对齐方式，可以将表格靠左、置中、靠右

　　⑤ ：消除行的高度设置；
　　　 ：消除列的宽度设置；
　　　 ：将表格宽度的设置由百分比转换为像素；
　　　 ：将表格宽度的设置由像素转换为百分比；
　　　 ：将表格高度的设置由百分比转换为像素；
　　　 ：将表格高度的设置由像素转换为百分比；

　　⑥ 背景颜色：设置表格的背景颜色；

　　⑦ 边框颜色：设置表格线的颜色；

　　⑧ 背景图像：设置表格的背景图，如果设置了背景图，背景颜色就失效了；点击后面的公文包按钮选择背景图；

如果我们把光标移到其中一个单元格，此时看到的属性面板又有所不同：如图4所示

（图4）

　　① ：合并单元格（之前要先选择相应的需要合并单元格）；
　　　 ：拆分单元格，拆分为多行或多列；

　　② 水平：单元格内部的水平对齐方式，作用与 类似；
　　　 垂直：单元格内部的纵向对齐方式；

　　③ 宽，高：单元格的宽度与高度；

　　④ 背景：单元格背景图；

　　⑤ 背景颜色：单元格背景颜色；

　　⑥ 边框：单元格边框颜色。

＊第二步：在表格中插入图片

上面关于表格的基本操作其实不难的，大家自已多试一下就明白了，跟word中的表格操作很类似，只是这里的表格功能更强，下次我们讲一下如何把六张图片插入到表格中。

1、先用鼠标点击表格中的第一个单元格，再按上一讲所讲的插入图片的方式插入图片，步骤是菜单“插入”－“图像”－“选择图像源文件”（我们事先已把要插入的图片放在了image目录下，文件名为1.jpg，如果不再这个目录下的话会提示你复制到站点目录）－“确定”.插入图片后如图5所示：

（图5）
我插入的这张图片是600*800像素的，所以一插入图片会表格会撑得很大，不用害怕，我们可以把图片缩小，具体缩小多少随便你自己的喜好，我们选择所有图片都缩小成120*120，同时我们希望点击这张小的图片会弹出原始大小的大图片，所以我们在“链接”后面粘贴源文件中的图片地址，我们示例中的图片地址为image/1.jpg，所以在链接中的地址粘贴后也是image/1.jpg，设置后如图6所示。设置后我们要用鼠标在页面中的其它地方点击一下，比如说另外一个单元格，才能够看到设置后的改变。

（图6）

按图6方式设置后会发现图片是按要求缩小成120*120，但表格却没有完全缩小，表格中有很多空白的地方，这时候我们就要用到表格中一个很重要的操作，就是“清除列宽”和“清除行高”，也就是如图7如示的按钮，上面那个是清除列宽，下面一个是清除行高。清除列宽和清除行高是对表格而言的，所以在操作前你必须先选择表格，否则是不会出现图7所示的属性的，操作方法是先移动鼠标至表格的一个边线上，当鼠标变成如图8所示的箭头时点击鼠标左键，就选择了整个表格。这时候就会出现如图7所示的属性面板。

（图7）

（图8）

2、清除行高和列宽后发现表格紧凑多了，没有了多余的空白部分，这时候我们按上面的方法插入另外5张图片，你要在哪个地方插入图片首先得在需插入图片的单元格中点击一下鼠标，再点“插入”菜单中“图片”，因为操作方法与上面的完全一样，所以我们不再详细说明了。注意要把每张图片都缩小成120*120，并且每张图片的“链接”地址必须是对应的图片，比如说第二张图片为image/2.jpg，刚链接地址为image/2.jpg。全部插入6张图片并保存网页后效果如图9所示

（图9）

＊第三步：在图片集网页中添加一个“返回首页”链接

最开始我们说了，这个图片集页面只是网站中的一个分页面，当访问都访问你的首页(index.htm)时，点击链接进入photo.htm查看图片，看完图片后为了方便大家再返回到首页查看其它内容，所以我们要在图片集页面（photo.htm）中加入一个链接“返回首页”。加入链接的操作方法我们在第第一讲中就讲了，但在第一讲中我们讲的链接地址是“怀化气象论坛”和“新浪学园”，现在我们要求的是要链接到“返回首页”，也就要求链接到index.htm文件上，操作方法是：
先在photo.htm文档的下面输入文字“返回首页”，然后拖动鼠标选择这四个字，在下面的属性面板中链接右边有一个“浏览文件”的图标，我们点击“浏览文件”，如图10所示，然后在弹出的“选择文件”中我们选择index.htm文件，因为index.htm就是我们的首页文件。完成这一步后我们这个图片集网页就首完成了，可以按F12预览一下效果。

（图10）

＊第四步：在主页中添加一个“图片集”链接

大家应该已经想到了，我们公布自已的网站时只有一个主页的网址，比如说http://www3.7show.net/lzk，访问这个网址也就是访问我们的首页文件index.htm，但如何才能让其它朋友访问到我们的分页面图片集呢？也许你会说告诉朋友们图片集的网址http://www3.7show.net/lzk/photo.htm，没错，这是我们的图片集网址，但朋友们你们想一想，现在我们的html文件一共才两个，内容也很少，大家也许能记得住网址，但如果以后页面多了，谁会记得住这么多网址呢？显然直接告诉朋友每个页面的绝对地址不是一个好的方法，好的方法应该是在主页文件中添加各个分页面的链接，这也就是我们第四步操作的目的。我们实现在主页中添加一个“图片集”链接。

1、首先保存photo.htm文件已保存了，然后可以关闭photo.htm页面，也可以不管它。因为是在首页中添加链接，所以我们必须打开index.htm文件，操作方法大家肯定知道了。
2、打开index.htm后在文档中输入“图片集”三个字，然后选择这三个字，添加链接的方法与第四步中的操作方法完全相同，我们重复一下：在下面的属性面板中链接右边有一个“浏览文件”的图标，我们点击“浏览文件”，然后在弹出的“选择文件”中我们选择photo.htm文件，因为我们链接的是图片集网页，当然要求选择photo.htm文件了。可按F12预览效果。

＊第五步：上传更新后的内容

初学者会发现我们做好了主页会给朋友们网址，朋友们会说没看到你的图片集啊，原因就是大家没有FTP更新文件，我们的示例文件修改了index.htm文件，增加了photo.htm，在image子目录中增加了6个图片文件1~6.jpg，所以我们要FTP上传更新以上文件，这样大家才能看到你的新的主页。FTP上传方法在第二课中已讲解过了，我们先登录至FTP服务器，可先上传index.htm和photo.htm文件，然后本地和服务器都双击进入image目录下，再选择1~6.jpg这六个图片文件，选择上传，这样就只上传了这六个必须上传的图片文件，因为此次更新只改变了这些文件，所以其它图片文件我们不必重复上传浪费时间，掌握这一点也是必要的。

＊总结

大家可点击我们的演示页面查看最后的效果：http://soft666.com/home或http://lzk.xinwen365.com

表格所能实现的功能实在太多，无法在短短的一课中讲解清楚，当你熟练地掌握了表格操作后，你会发现很多有趣的功能，我们不要着急，一步一步来，毕竟我们才学习了短短的三课，下一课我准备讲一下如果在主页中插入flash动画和音乐，这应该也是大家相当感兴趣的功能，为了让大家保持学习的乐趣，我们优先讲解图片、表格、flash等大家感兴趣的操作，如果我们能坚持下来，最后会综合讲解一个小型网站的设计，也会陆续分散提到如何有效地利用互联网上丰富的资源，比如说漂亮的图片、动画，音乐等。最后希望大家不要仅仅局限于我们的教程中的内容，现在网上有相当多的教程，有不少网友提供了一些网上教程地址，希望大家好好看一下，做到融会贯通。