WDF(12)

 

专题：Dreamweaver的使用

 

教学内容

       

 

PPT28——

 

框架集和其它HTML元素不同，它不是显示在body元素内的可视化元素，所以在DW中使用框架的方式和其它元素是不同的：可以在新建网页时直接指定框架集，也可以在编辑一个现有网页时再拆分窗口。

 

DW对于框架的支持并不好，甚至无法为每个框架直接指定要加载的网页地址，只能切换到代码视图去指定框架的src属性为一个已经存在的网页的地址。在这个方面，相对来说，FrontPage和Expression Web要好一些。

 

 

PPT29——

 

我们在讲命名锚链的时候设计过一个单词列表，这个列表使用起来并不方便，因为用户需要不停地在页首的超级链接和具体的页面位置之间往返。我们可以使用框架网页带来一种更好的浏览体验。

 

 

PPT30——

 

先观察一下这个网页，这个网页大概有这样几个部分组成：

¡        最上面粉红色的图片是这个网页（网站）的banner（横幅广告；此处也可以认为是一个logo，即网站的标志或徽标），大多数的网站一般都把它们放在网站比较显眼的位置，如正上方或左上角；

¡        接下来是About、Work、Show等几个图片做成的超级链接，用于在网站的各个主题之间切换，可以把这个部分叫做导航条；

¡        导航条以下的网页被拆分成三个部分：左边的一个叫做“风情带”的图片用于表明当前网页的主题，这个线索来源于导航条上的Like链接，也就是说用户很可能是通过单击导航条上的Like链接进入当前页面的；右边也有三个超级链接，虽然我们没有下载整个网站，但是，根据我们平时上网的经验，我们还是可以推测出来这三个超级链接的含义：“留言本”、“友情链接”以及“和我联系”；中间部分是这张网页的主体内容，也就是说其实作者所为的“风情带”是一个相关文章的列表，用户在这个模块里面可以看到一些相关主题的文章，我们看到，首先是一个和“风情带”主题比较契合的图片，然后是一些文章的列表，从文章的日期来看，这个网页确实比较古老了。

¡        网页的最下方中间部分是这个网页的页脚，主要内容是版权声明和一些相关的链接，大多数网站都是这么做的。

 

观察完整个网页之后，大家应该想一想怎样自己去做一个这样的网页，我们现在学过的网页设计基础的知识已经足够来做这样一个网页了，平时大家上网的时候遇到比较特别或者比较漂亮的网页也应该自己去想一下它们是如何实现的，通过参考和模仿别人的网页，是最终能做出一个比较好的网页的一个重要步骤。

 

接下来，我们就来尝试一下使用DW结合我们以前学过的HTML元素和属性的知识来做一个这样的网页。

 

网页上的每个部分都被放置在长方形的格子里，这样我们很容易想到：这个网页的主要骨架是由一个表格搭建起来的（这是以前比较流行的表格布局方法），每个长方形格子都是表格的一个单元格。这个网页最外层的表格我们可以数一下，是一个4行3列(4×3)的表格，OK，我们打开DW，⑴新建一个页面并⑵在页面中先插入一个4×3的表格。我们可以看到在DW中的这个表格和最终的显示效果是由差别的：最终的显示效果中表格是贴近浏览器边缘显示的，而我们在DW中插入的表格不是这样的。这个地方涉及到⑶对页面属性的设置，关于对页面属性的设置，DW8是通过CSS来实现的，这个我们前面讲body元素的时候没讲，大家先了解一下如何在DW8中设置页面属性即可：“修改”菜单下使用“页面属性”菜单项调出“页面属性”对话框进行相关设置，将上下左右的边距均设为0即可。接下来，⑷修改表格的属性以使得和最终显示效果一致：最终显示效果中表格是有边框的（border，示例网页中是结合表格的cellspacing属性以及页面的背景颜色来实现的），而且是填充整个页面的（width=100%）；另外三列的列宽也要进行相应的调整（通常情况下，设置第一行的每个单元格的宽度即是设置了表格的列宽，三列分别是12%、76%和12%）；各个单元格的背景色或背景图片也有所差别，我们可以使用一种叫做“颜色拾取器”的软件（不是一个特定的软件，而是一类软件的总称）来获取这些单元格的Web颜色值。

#ffcc00	bg.gif	#ffcc00
#e1eeca	#e1eeca	#e1eeca
#e1eeca	#ffffff	#e1eeca
#e1eeca	#ffcc00	#e1eeca

至于单元格的高度，我们可以在插入相应的内容后再进行微调（事实上，示例网页中设置了整个表格的高度为100%，这样做的意义不大）。

骨架搭好了，我们要⑸向单元格中填入相应的内容，我们给每个单元格编个号，这样比较容易讲解。

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3
4,1	4,2	4,3

可以很容易地看出，单元格（1,1）、（1,3）、（2,1）、（2,3）、（4,1）、（4,3）、中是没有内容的。即使如此，也不要忘记该单元各种至少要有一个字符实体 。

 

下面按照从左到右、从上到下的顺序来讲解如何在单元格中插入适当的内容：

¡        单元格（1,2）中插入了一个居中的图片logo.gif（在示例网页上的这个图片单击右键可以得到它的URL）；

¡        单元格（2,2）中的主要内容是导航条，这也是由几个图片（a/w/s/l/se/h1.gif）做成的超级链接组成的，我们可以看到这几个图片超级链接中间是有间隔的，而且整体上是在单元格中间显示的，当然，我们可以通过在图片超级链接之间添加空格（ ）来实现，但最好的方式是在单元格（2,2）中再插入一个1行6列的表格（宽度设置为60%），而把每个图片超级链接分别在新插入的表格的单元格中。另外，我们可以发现设计人员在此处的一个疏忽的地方：他使用到了图片做成超级链接，但图片上只有英文单词（还不准确），浏览者很难通过这几个单词联想到其真正的内容。这时候我们应该为图片设置alt属性，或者是为超级链接指定title属性；

¡        单元格（3,1）中很简单，是一幅图片，不过需要注意的是它在竖直方向是贴近单元格顶部显示的，而水平方向是居中显示的。

¡        单元格（3,2）是该网页主要内容的显示区域，比较复杂，先跳过去；

¡        单元格（3,3）中我们可以和单元格（2,2）进行类比，它其实是插入了一个11行1列的表格，为了使得该单元格中的内容不与单元格（3,1）中在一条水平线上，插入的表格的前几个单元格留空，而在第6、8、10的行单元格中分别插入图片（right1/3/2.gif）做成的超级链接。

¡        对于单元格（4,2），首先，我们看到第一行的几个超级链接是水平居右显示的，我们想一想以前我们学习的元素中有没有一个单独的元素可以让文本或链接等居右显示的，答案是否定的，但是我们知道表格的单元格中的内容是可以设置为水平居右显示的，所以单元格（4,2）中一定还是有表格的（原示例文件中不是），插入一个2×2的表格，并将第一行合并，填充内容即可。

 

最后，我们来看一下最复杂的单元格（3,2）。如上所示，我们已经见识到表格的强大作用了，单元格（3,2）虽然复杂，但还是不会超出插入表格并进行属性设置的范围。首先是主题图片的显示，我们当然可以直接使用DW插入图片，但是，我们现在浏览器中看一下示例网页，当浏览器窗口缩小的时候，我们会发现这个主题图片会随之缩小，这个显然不是插入img元素能够实现的，事实上我们在讲表格的background属性的时候说过表格背景图片的这个特性，此处正是插入一个表格（3×3，100%宽）后设置其背景图片为bg.jpg；下面的文章列表，很显然还是表格排版，注意标题行下面的带颜色的横线是通过设置行的背景颜色以及行高来实现的，每篇文章中间的细线也是如此。

 

到目前为止，我们可以记住一个口号：网页制作，表格挂帅！

 
        对应PPT下载