打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Dreamweaver MX 2004(2)
Dreamweaver MX 2004(2)
http://www.sucai123.com 资料教程 2004-10-5 23:45:21
用表格定位网页
  使用表格可以清晰地显示列表的数据,实际上表格的作用远远不止显示数据,它在网页定位上一直起着重要的作用,尤其是对于使用非IE浏览器的网友来说,使用表格定位的网页比使用图层定位的网页更具有优势。


  一、创建表格


  第一步:在Dreamweaver MX 2004中运行“Insert→Table”命令,弹出属性设置窗口,其中“Rows”和“Columns”分别对应着表格的行数和列数,“Table width”表示表格的宽度,而“Border thickness”则是边框的宽度,同时还可以设定表格的样式,根据自己的需要来设置表格的相应属性即可。

  小提示:表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义,比如设置宽度为窗口宽度的60%,那么当浏览器窗口大小变化的时候表格的宽度也随之变化;而如果设置宽度为400像素,那么无论浏览器窗口大小为多少,表格的宽度都不会变化。

  第二步:点击窗口中的“OK”按钮之后即可在Dreamweaver MX 2004中新建一个表格,而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、单元格的对齐方式等参数进行调整。


  二、基本使用


  在创建了上述的表格之后,我们就可以对它进行调整使用。比如我们需要制作图1所示的表格,就可以先插入一个四行三列的表格,然后对其进行下述操作。


  第一步:在表格第一列的上面两个单元格中按下并拖动鼠标,此时可以选中两个单元格。接着点击属性模板中的“Merges selected cells using spans”按钮,这样就把选中的两格合并成为一个单元格。按照这种方法再将表格第一行右侧的两个单元格合并为一个单元格。

  小提示:选中一个单元格之后点击属性面板中的“Splits cell into rows or columns”按钮可以把单元格拆分为多个行或者列。

  第二步:将表格第一列的三个单元格全部选中,再将属性模板中的背景颜色(Bg)一项设置为“#FFFF00”,这样表格第一列中的单元格背景全部变为黄色。

  第三步:在表格中输入相应的文本,为了美观可以在属性面板中进行居中设置。

  第四步:为了使表格产生立体效果,可以将整个表格选中,然后在属性面板中设定表格边框的宽度(Border)为7,并且将边框颜色(Border color)设置为蓝色即可。

  小提示:通常选取整个表格比较困难,在此提供四种常用的方法:1. 把鼠标移动到表格右边界外侧,按下鼠标之后往左拖拽,这样可以快速选取整个表格。2. 运行“Modify→Table→Insert Table”命令选择整个表格。3. 在单元格中右击鼠标,并且从弹出菜单中选择“Table→Insert Table”命令选取整个表格。4. 用鼠标点击任一个单元格,接着按两下“Ctrl+A”组合按钮选取整个表格。

  完成上述操作之后,我们就可以在Dreamweaver MX 2004中定制出颇具专业水准的表格了。
  三、表格定位


  其实表格的网页定位主要通过将网页内容分成若干个区,然后将相应的内容分别填入不同的表格,从而做成非常规范与专业的网页。下面就来看看图2所示的网站是如何通过表格实现的。


  1. 标题和导航区

  网页最上部由两个大的表格组成:上面表格是图片区,下面是导航区。图片区为一行一列,通过“Insert→Image”命令插入网站的标题图以及Logo图标。导航区则是一个一行九列的表格,分别输入输入各个子栏目的名称,然后通过“Insert→Hyper Link”命令来创建每个导航栏目的链接。

  2. 正文区

  正文区总得说来是由一个一行三列的大表格构建而成,其中每一列再通过插入单独的表格或者拆分的方法来形成多个区域并输入相应的信息。比如最左边一列就可以插入一个5行一列的表格,分别用来显示Logo图标以及相应的文字内容;中间一列可以拆分为3至4个单元格,每个单元格用于显示不同栏目的主要内容提示;右边一列也可以拆分为5个区域显示不同的内容。这样在一个大表格中划分出多个小单元格组成了网页的主要内容。至于具体的单元格操作在此就不再赘述,大家可以自己试着体会一下。

  虽然通过表格可以实现最基本的网页定位,但是这种方法也并不是没有缺点,它的最大问题在于表格内容下载比较耗时,往往要等一个表格中全部内容下载完成后才能显示该表格内容,因此尤其要注意表格的嵌套使用,尽量不要嵌套过多的表格以影响页面的下载速度。
用框架构建网页
  我们登录一些论坛之后,可以看见左边是每个讨论区的名称,点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容,不过左右部分是独立显示的,例如拖动左边的滚动条不会影响右侧的显示效果。其实这就是页面中利用了框架技术,因此可以把浏览器的显示空间分割为几个部分,每个部分都独立显示网页内容。而且把几个框架结合在一起构成框架集,能够让页面具有更为丰富的效果。


  一、创建框架和框架集


  第一步:在Dreamweaver MX 2004中新建一个页面,运行“View→Visual Aids→Frame Borders”命令之后可以看见编辑窗口中出现一个边框,用鼠标点击边框之后可以看见虚线框,说明新建的页面中已经附带了框架。

  第二步:按下“Alt”按键,用鼠标拖拽边框,松开鼠标之后就可以把窗口一分为二,这样就把页面分为两个边框。比如拖拽左右边框可以把窗口分为左右两个部分,而拖拽上下边框可以把窗口分为上下两个部分。另外,窗口的四个角也可以拖拽,这样可以直接把窗口分为四个区域(如图1)。当窗口分割为几个框架之后,每个框架都可以作为独立的网页进行编辑,也可以直接把某个已经存在的页面赋给一个框架。

图1



  第三步:框架允许嵌套,比如要创建图2所示的框架,可以先通过上述的方法水平一分为二,但是接着不能直接拖拽边框,否则会得到图1所示的框架。正确的方法是先在右下角的框架面板中点击右部的框架,然后再按下“Alt”按钮拖拽边框。

图2


  小提示:如果边框拖拽错了,只要用鼠标把需要删除的线拖拽到父框架的边框上即可删除它。

  二、编辑框架


  页面中经常混有框架和框架集,选取不同对象可以进行不同的属性设置。

  第一步:框架集的属性。选中框架集之后可以看见属性对象面板(如图3),其中“Border”一项可以设定是否显示边框,“Border Width”一项可以设定边框宽度,“Border Color”可以设定边框的颜色。另外还可以设置每个边框的尺寸,此时在面板右边的缩略图中选定一行或者一列,然后在它旁边的“Alue”输入框中输入数值,并且选择像素或者百分比作为单位即可。

图3


  第二步:框架的属性。如果在框架面板中选择任意一个框架,在框架面板中被选中的框架会有黑色的边框显示,这时就可以在属性面板中进行相应的设置了(如图4)。比如在此可以通过“Src”地址栏设置框架中的网页文件,“Scroll”为是否加入滚动条,“Border”可以决定是否显示边框,“No resize”允许在浏览器是改变框架大小,另外“Margin Width”和“Margin Height”分别设置边界的宽度和高度来决定框架中内容和边框的距离。

图4


  第三步:输入框架中的内容。用鼠标点击任意一个框架之后就可以像正常编辑页面一样插入各种文本内容、图片、Flash动画和背景音乐等网页元素。

  其实利用框架能够对网页布局进行合理规划,尤其在设计网页初期更显得格外重要,因此需要大家在日常使用中多加练习,这对搭建一个优秀的网站可是大有裨益的!

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
网页制作讲义 大学教师 计算机专业 金博志网址
怎么使用dreamweaver制作网页教程 dw建站设计网页
网页设计师综合题库
HTML试题与答案
Dreamweaver 8中表格属性的设置
Dreamweaver精细化网页中表格的外观
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服