您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>Dreamweaver教程>>>网页制作——第五课:表格与框架
网页制作——第五课:表格与框架
发表日期:2007-3-31 7:59:00 出处:闪客启航 作者:未知 发布人:aypy1020 已被访问 3544

录音下载(一)  录音下载(二)

第一节:表格属性和应用

【单元格间距】单元格与单元格之间的距离。

不同参数的表格状态

 

在表格内添加元素

    表格建立之后就可以向表格内添加元素了,如图像,文本和表格等,方法如同在文档中操作一样。添加文本,表格会随着增多而自动增高。
    在单元格中添加图像时,如果单元格的尺寸小于图像的尺寸,单元格会自动增高或增宽。
    在单元格中插入表格的时候, 单元格中的表格叫做内嵌入式表格,内嵌表格中的单元格可以再分成多行或多列,并且可以无限制的插入,不过内嵌的表格越多,浏览器下载时间越长,所以内嵌表格最好不要超过三层。

编辑表格

选择表格:
    最常用的选择表格的方法有两种:

1、用鼠标点击表格左上角边框,选中表格。
2、将光标放在表格中的任意处,然后在菜单栏【修改】/【表格】中选定【选中表格】命令。
3、拖动鼠标从表格左上角至右下角,选中所有单元格,然后在菜单栏【编辑】中选择【全选】命令。
4、单击表格任意处,然后在状态栏选择<Table>标签。这是最简单的方法。

被选中的表格状态:

 

更改表格尺寸:
    上图中表格边框上的黑色方块叫做拖放手柄,鼠标移动到拖放手柄上出现双向箭头光标的时候即可拖动至合适的尺寸。当然要精确定义表格的尺寸还是要在选中表格后的属性栏中设定。

【表格ID】用于编程和今后的行为中使用,暂时不讨论。
【背景颜色】打开调色板选中颜色,即可指定表格的背景色。
【背景图像】给出图像的路径和文件名即可指定表格的背景图像。
注:如果既指定背景图像又指定背景颜色,则图像部分会遮挡住背景颜色。除非它是一个透明的GIF图像。
【边框颜色】打开混色器面板选中颜色,即可指定表格边框颜色。

通过不同的表格边框颜色背景颜色的指定,可以得到多种效果,下图是边框色为红色,背景色为黄色的效果。

     
     
     

    上面提到状态栏,我们还可以在状态栏选中一行或者一个单元格。
选中一行:点击状态栏的<tr>
选中一个单元格:点击状态栏的<td>
    设置单元格的属性,就能得到更多的表格的效果:
下图是选中第一个单元格,然后在属性面板选择单元格边框颜色为黑色;背景颜色为浅黄色的效果。

     
     
     

选定多个单元格

    按下键盘的【Ctrl】键用鼠标击单元格即可选中该单元格,继续点击即可选中其他单元格。下图第一行显示的是单元格被选中的状态,第三行显示的是选中了两个单元格的状态。

拆分/合并单元格

    选中单元格可以合并,例如上图中第三行的两个单元格,选中后选择【修改】/【表格】菜单的【合并单元格】命令即可。

     
     
   

    选中一个单元格后选中【修改】/【表格】菜单的【拆分单元格】命令,打开对话框:

选择拆分为2行后的效果:

     
 
     
     

插入行或列

将设计布局改为【布局】模式,红色标记出的功能按钮即为插入按钮,鼠标移动到按钮上停留时会有文本提示。

选中单元格后点击插入按钮,如图:

       
       
       

导入数据表格

    这是表格的另一个重要功能,我们可以直接导入一个其他应用程序创建的格式。如导入微软公司的电子表格,我们将在以后深入讨论。

    关于表格的更多属性和用法,请各位自己动手试一试,Dreamweaver MX 2004 是一款所见既所得功能很强的软件,大家能非常直观的看到您所做的设置的效果,相信通过你自己动手,能更好的掌握表格的使用。

 

 

第二节:框架属性和应用

在一个网页中,我们并不需要所有的内容都在点击链接的时候改变,比如导航条、站点标志、版权信息等,都是不需要改变的。因此我们没有必要在每一个网页中都插入这些元素,这不但能减轻设计制作网页的工作量,也可一减少用户浏览时由浏览器检测这些元素是否已经被装载过的时间。框架主要的作用就是将窗口划分为几个“区域”然后根据需要在某些区域放置不需要改变的元素,某些区域放置需要改变的内容。

    下图是启航教程原Dreamweaver MX 2004教程的一个页面的截图,左侧是课程安排的菜单(导航条)上方是站点的标志,下方是版权标志,这些不论我们点击任何一个课程的时候都不会也不需要改变,唯一需要改变的是由右侧最大的区域,它根据我们点击的课程不同而出现不同的内容。

    根据上面的分析得知,这个页面是由一个四个框架组成的框架的集合,所谓框架就是把屏幕分割开来的“区域”而框架的集合,我们称之为框架集。

    实际上框架页面是一个仅仅包含框架集的页面,里面的内容则是各个框架加载的页面产生的。

    为了便于理解,我们来通过下面一个实例来说明框架、框架集、框架页面和页面的关系。

    首先,我们来建立三个新的 HTML 页面:

    1、背景色为黄色,文字内容为三行,分别是“回到首页”“我的收藏”“我的简历”取名为“menu.htm”保存在本机站点目录下。

    2、背景颜色为蓝色,文字内容为“这里是我学习的地方”取名为“home.htm”保存在本级站点目录下。

    3、背景颜色为默认,文字内容为“闪客启航”并为“闪客启航”做超级链接,绝对路径为“http://www.flasher123.com”目标为“_blank”取名为“page1.htm”

    现在,我们开始建立框架集。打开DW2004,选择“布局”方式,见图:

    如果您的软件的布局跟上图不同,请选择“布局”处的下拉箭头,然后选中“布局”,这时候您可以看到倒数第二个按钮就是框架按钮了。我们点击框架按钮的下拉箭头,选中“左侧框架”

    文档编辑区呈现如图所示状态,注意看由虚线组成的部分,分别是左右两个框架,这就是由两个框架组成的框架集了。

此时的属性面板显示了框架集的属性,我们也可以通过属性面板调整框架集的属性。

【边框】:否代表在浏览器中不显示边框;是表示在浏览器中显示边框;默认则表示由用户浏览器设定来控制。 边框宽度与边框颜色和我们上一课所讲的表格的属性一样,这里不再赘述。

    在页面上建立了框架集之后,如果保存文件,则DW2004会默认一个文件名,并以数字作为区分,这显然不方便我们今后的管理与修改,(如果您已经熟悉了框架,框架集,框架页面之间的关系您也可以选择全部保存,然后按照要求重新命名文件名之后一一保存)为了直观我们把一些准备工作做在前面。

    选择文件菜单中的“保存框架集”重新命名为“default.htm”此时不要关闭这个页面。回到软件右侧的控制面板的框架面板,如果您的软件没有这个面板,请您使用Shift+F2或者在窗口菜单下选中“框架”我们可以看到如图所示的框架控制面板。

    注意看,目前黑色的粗框框选在左边,这表明我们选择的是左框架,这个过程叫做选取框架。这里我们要注意区分框架和框架集的关系。与之相对应的是左框架的属性,见图框架属性面板:

框架名称:
    leftFrame就是左框架的意思,我们可以重新命名为我们习惯的名字,但必须注意,框架的命名不能是数字开头,也不能用“top”这样的Java Script中的保留字。这里实例中我们就使用leftFrame默认的框架名。

边框:
    可以设置在浏览器中是否显示当前框架的边框,大多浏览器默认是显示边框,除框架集已经选择为不显示。

边框颜色
    选择的颜色会应用到和本框架接触的所有的边框,并且会重写框架集已经安排的边框颜色。

边界宽度:
    用于指定框架边框左右和内容之间的空间。

边界高度:
    用于指定框架边框上下和内容之间的空间。

滚动
    指定在浏览器中本框架是否显示滚动条,其中“是”表示不论本框架中内容显示器默认窗口是否完全显示,既不论内容多少,浏览器始终显示滚动条;“否”正好与“是”相反;“自动”根据内容的多少在需要时显示,否则就不显示,这个比较常用,既能满足需要又能保持页面的同一性。“默认”则取决于运户浏览器的设置。

不能调整大小:
    在浏览器中用户是否可以用鼠标拖动框架,一般为了整体效果,选中不能调整大小。除非您有特殊需要。当然,在我们的设计制作过程中我们还是可以用鼠标拖动设计位置的。

源文件
    指定一个在本框架中显示的源文件,本实例中我们选择您刚才制作的“menu.htm”文件。到此,刚才您设计的框架的魅力已经展现出来了。见图:

 

重复“选取框架”动作,选择左框架:

回到属性面板中指定源文件为您刚才制作的“home.htm”这时您的框架页面就算完成了。见图:

网页的重要特征之一是超级链接,仅仅是框架页面生成还不能实现超级链接的功能,我们来开始完善这个页面:

    在框架页面鼠标点击左框架内容部分,用鼠标选中“回到首页”然后在插入菜单选中插入超级链接,链接框内是您刚才建立的“home.htm”文件。目标为“mainFrame” 也就是左框架的名字。意思是我让这个文件在左框架的位置显示。至于标题我们这里不讲,大家自己用汉字填写进去,当你保存文件用浏览器浏览,鼠标指向您做好的超级链接的时候就能体会到他们的作用了。

    重复上面的步骤,用鼠标选中“我的收藏”然后在插入菜单选择超级链接,链接为:page1.htm,目标为:“mainFrame”    

    同理,如果您还建立的多个框架,还有多个链接,您也可以按照指定目标的放法让您指定的文件出现在任何一个框架内。

    我们可以看出,其实当我们已经熟悉框架,框架集和页面之间的关系之后,我们就能直接在框架集的页面中开始做相关的网页了,一个框架网页中除了框架集之外还有框架中包含的网页,因此选择保存全部,并分别命名即可。本实例中如果选择全部保存就会要求您保存三个文件。

    当我们完成上面的工作,全部保存之后,一个用框架制作的网页就完工了。

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉