网页制作Dreamweaver CS4 - 6、使用表格和Spry构件.ppt

1、第6讲 使用表格和Spry布局构件,教学目标 6.1 创建站点 6.1.1 功能讲解 6.1.2 范例解析制作“瑞士风情”网页 6.1.3 课堂实训制作日历表 6.2 创建文件 6.6.1 功能讲解 6.6.2 范例解析创建Spry选项卡式面板 6.6.3 课堂实训创建Spry菜单栏 6.3 综合案例使用表格布局网页,教学目标,掌握插入表格的方法。 掌握编辑表格的方法。 掌握使用表格布局网页的方法。 掌握插入和设置Spry布局构件的方法。,返回目录,6.1 创建站点,6.1.1 功能讲解 6.1.2 范例解析制作“瑞士风情”网页 6.1.3 课堂实训制作日历表,返回目录,6.1.1 功能讲解,

2、表格可以将一定的内容按特定的行、列规则进行排列。Dreamweaver CS4中的表格功能很强大，用户可以方便地创建出各种规格的表格。 具体内容如下。 创建表格。 编辑表格。 设置表格属性。 设置行、列或单元格属性。 操作数据表格。,返回目录,一、创建表格,插入单个表格。 创建嵌套表格。,返回目录,（1）插入单个表格,在网页文档中，将光标置于要插入表格的位置，然后采用以下任意一种方式打开【表格】对话框，进行参数设置即可，如图所示。 选择【插入】/【表格】命令。 在【插入】/【常用】工具栏中单击 按钮。 在【插入】/【布局】工具栏中单击 按钮。 按Ctrl+Alt+T组合键。,返回目录,（2）创

3、建嵌套表格,嵌套表格是指在表格的单元格内再插入表格，其宽度受所在单元格的宽度限制。在进行网页布局时，常使用嵌套表格来排版页面元素，此时，表格的边框粗细通常设置为“0”，如图所示是一个嵌套表格。,返回目录,二、编辑表格,表格的基本操作，包括增加行或列、删除行或列、合并单元格、拆分单元格等。具体内容如下。 选择表格。 增加行或列。 删除行或列。 合并单元格。 拆分单元格。,返回目录,（1）选择表格,选择整个表格。 选择行或列。 选择单元格。,返回目录,选择整个表格,单击表格左上角或单击表格中任何一个单元格的边框线。 将光标置于表格内，选择【修改】/【表格】/【选择表格】命令，或在右键快捷菜单中选择

4、【表格】/【选择表格】命令。 将光标移到预选择的表格内，表格上端或下端会弹出绿线的标志，单击绿线中的 按钮，从弹出的下拉菜单中选择【选择表格】命令。 将光标移到预选择的表格内，单击文档窗口左下角相应的“”标签。,返回目录,返回目录,选择行或列,当鼠标指针位于欲选择的行首或列顶时，指针变成黑色箭头形状，这时单击鼠标，便可选择行或列，如图所示。如果按住鼠标左键并拖曳，可以选择连续的行或列，也可以按住Ctrl键，依次单击欲选择的行或列。,返回目录,按住鼠标左键从左至右或从上至下拖曳，将选择相应的行或列。 将光标移到欲选择的行中，单击文档窗口左下角的“”标签选择行。 将光标移到表格内，单击欲选择列的绿

5、线标志中的按钮，从弹出的下拉菜单中选择【选择列】命令。,返回目录,选择单元格,选择单个单元格的方法有以下两种。 将光标置于单元格内，然后按住Ctrl键，单击单元格可以将其选择。 将光标置于单元格内，然后单击文档窗口左下角的标签将其选择。 选择相邻单元格的方法有以下两种。 在开始的单元格中按住鼠标左键并拖曳到最后的单元格。 将光标置于开始的单元格内，然后按住Shift键不放，单击最后的单元格。 选择不相邻单元格的方法有以下两种。 按住Ctrl键，依次单击欲选择的单元格。 按住Ctrl键，在已选择的连续单元格中依次单击欲去除的单元格。,返回目录,（2）增加行或列,在【插入】/【布局】面板中单击【在

6、上面插入】等按钮来插入行或列。 选择【修改】/【表格】/【插入行】命令，则在光标所在单元格的上面增加1行。同样，选择【修改】/【表格】/【插入列】命令，则在光标所在单元格的左侧增加1列。也可右键快捷菜单命令进行操作。 选择【插入】/【表格对象】菜单中的【在上面插入行】、【在下面插入行】、【在左边插入列】、【在右边插入列】命令来插入行或列。 选择【修改】/【表格】/【插入行或列】命令，在弹出的【插入行或列】对话框中进行设置，加以确认后即可完成插入操作。也可在右键快捷菜单中选择【表格】/【插入行或列】命令，弹出该对话框。,返回目录,（3）删除行或列,如果要删除行或列，首先需要将鼠标光标置于要删除的

7、行或列中，或者将要删除的行或列选中，然后选择【修改】/【表格】菜单中的【删除行】或【删除列】命令，将行或列删除。最简捷的方法就是利用选择表格行或列的方法选定要删除的行或列，然后按Delete键。也可使用右键快捷菜单进行以上操作。,返回目录,（4）合并单元格,合并单元格是指将多个单元格合并为一个单元格。首先选择欲合并的单元格，然后可采取以下几种方法进行操作。 选择【修改】/【表格】/【合并单元格】命令。 单击鼠标右键，在弹出的快捷菜单中选择【表格】/【合并单元格】命令。 单击【属性】面板左下角的 按钮。 合并单元格后的效果如图所示。,返回目录,（5）拆分单元格,拆分单元格是针对单个单元格而言的，

8、可看成是合并单元格操作的逆操作。首先需要将鼠标光标定位到要拆分的单元格中，然后采取以下几种方法进行操作。 选择【修改】/【表格】/【拆分单元格】命令。 单击鼠标右键，在弹出的快捷菜单中选择【表格】/【拆分单元格】命令。 单击【属性】面板左下角的 按钮，弹出【拆分单元格】对话框。 拆分单元格的效果如图所示。,返回目录,三、设置表格属性,选择表格后，表格【属性】面板如图所示。,返回目录,四、设置行、列或单元格属性,设置表格的行、列或单元格属性要先选择行、列或单元格，然后在【属性】面板中进行设置。行、列、单元格的【属性】面板都是一样的，唯一不同的是左下角的名称。如图所示是单元格的【属性】面板，上半部

9、分是设置单元格内文本的属性，下半部分是设置单元格的属性。,返回目录,五、操作数据表格,Dreamweaver CS4能够与外部软件交换数据，以方便用户快速导入或导出数据，同时还可以对数据表格进行排序。 导入表格数据。 导出表格数据。 排序表格数据。,返回目录,（1）导入表格数据,选择【文件】/【导入】/【表格式数据】或【Excel文档】命令可以将表格式数据或Excel表格导入到网页文档中。导入Excel文档与导入Word文档打开的对话框是相似的，而导入表格式数据打开的对话框如图所示。,返回目录,（2）导出表格数据,在Dreamweaver CS4中的表格数据也可以进行导出。方法是，将光标置于表

10、格中，然后选择【文件】/【导出】/【表格】命令，打开【导出表格】对话框，如图所示，在【定界符】下拉列表中选择要在导出的结果文件中使用的分隔符类型（包括“Tab”、“空白键”、“逗点”、“分号”、“引号”），在【换行符】下拉列表中选择打开文件的操作系统（包括“Windows”、“Mac”、“UNIX”），最后单击 按钮，打开【表格导出为】对话框，设置文件的保存位置和名称即可。,返回目录,（3）排序表格数据,利用Dreamweaver CS4的【排序表格】命令可以对表格指定列的内容进行排序。方法是，利用选择表格的相关命令选中整个表格，然后选择【命令】/【排序表格】命令，打开【排序表格】对话框进行参

11、数设置即可，如图所示。,返回目录,6.1.2 范例解析制作“瑞士风情”网页,首先将“范例解析素材第6讲6-1-2images”文件夹复制到站点根文件夹下，然后创建文档“6-1-2.htm”，并使用表格布局页面，最终效果如图所示。 这是使用表格进行页面布局的一个例子，可以先插入表格，然后通过【属性】面板对表格和单元格进行属性设置，最后在单元格中输入内容即可，具体操作步骤参考教材。,返回目录,返回目录,6.1.3 课堂实训制作日历表,使用表格制作2009年10月日历表并保存为“6-1-3.htm”，最终效果如图所示。 这是使用表格组织数据的一个例子，可以先插入表格，然后通过【属性】面板对表格和单元

12、格进行属性设置，最后在单元格中输入内容即可。,返回目录,6.2 使用Spry构件,6.2.1 功能讲解 6.2.2 范例解析创建Spry选项卡式面板 6.2.3 课堂实训创建Spry菜单栏,返回目录,6.2.1 功能讲解,Spry构件是预置的常用用户界面组件，可以使用CSS来自定义这些组件，然后将其添加到网页中。使用Dreamweaver CS4可以将多个Spry构件添加到页面中，这些构件包括XML驱动的列表和表格、折叠构件、选项卡式界面和具有验证功能的表单元素。 可以选择【插入】/【Spry】中的相应命令向页面中插入各种Spry构件，也可以通过【插入】/【Spry】工具栏中的相应按钮进行操作

13、。 如果要编辑构件，可以将光标指向这个构件直到看到构件的蓝色选项卡式轮廓，单击构件左上角的选项卡将其选中，然后在【属性】面板中编辑构件即可。尽管可以使用【属性】面板编辑Spry构件，但【属性】面板并不支持其外观样式的设置。如果要修改其外观样式，必须修改对应的CSS样式。 下面对Spry布局构件进行简要介绍，包括Spry菜单栏、Spry选项卡式面板、Spry折叠式构件、Spry可折叠式面板。,返回目录,一、Spry菜单栏,Spry菜单栏是一组可导航的菜单按钮，当将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。根据需要，可以使用Spry菜单栏构件创建横向或纵向的下拉或弹出菜单。图为一个水平菜单

14、栏构件，其中的第3个菜单项处于展开状态。,返回目录,创建Spry菜单栏的方法是，选择【插入】/【Spry】/【Spry菜单栏】命令打开【Spry菜单栏】对话框，选择菜单栏的布局模式，其中包括【水平】和【垂直】两种。确定菜单栏的布局后，单击 按钮，在文档中插入一个Spry菜单栏构件，如图所示。,返回目录,此时还需要通过【属性】面板添加菜单项及链接目标。确保Spry菜单栏构件处于选中状态，如果没有选中可单击左上角的【Spry菜单栏：MenuBar1】可将其选中，此时其【属性】面板如图所示。由【属性】面板可以看出，创建的菜单栏可以有3级菜单。在【属性】面板中，从左至右的3个列表框分别用来定义一级菜单

15、项、二级菜单项和三级菜单项，在定义每个菜单项时，均使用右侧的【文本】、【链接】、【标题】和【目标】4个文本框进行设置。单击列表框上方的 按钮将添加一个菜单项；单击 按钮将删除一个菜单项；单击 按钮将选中的菜单项上移；单击 按钮将选中的菜单项下移。,返回目录,二、Spry选项卡式面板,Spry选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。用户可以通过单击要访问面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。图为一个选项卡式面板构件，第3个面板处于打开状态。,返回目录,

16、创建Spry选项卡式面板的方法是，选择【插入】/【Spry】/【Spry选项卡式面板】命令，在页面中添加一个Spry选项卡式面板构件。 确保Spry选项卡式面板构件处于选中状态，其【属性】面板如图所示。,返回目录,三、Spry折叠式构件,折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点浏览者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠式构件中，每次只能有一个内容面板处于打开且可见的状态。图所示为一个折叠式构件，其中第2个面板处于展开状态。,返回目录,创建折叠式构件的方法是，选择【插入】

17、/【Spry】/【Spry折叠式】命令，在页面中添加一个Spry折叠式构件。 确保Spry折叠式构件处于选中状态，其【属性】面板如图所示。,返回目录,四、Spry可折叠式面板,可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。图所示为一个处于展开和折叠状态的可折叠面板构件。,返回目录,创建可折叠面板构件的方法是，选择【插入】/【Spry】/【Spry可折叠面板】命令，在页面中添加一个Spry可折叠面板构件。如果页面中需要多个可折叠面板，可以多次选择该命令，依次添加多个Spry可折叠面板。 确保Spry可折叠面板处于选中状态，其【属性】面板如图所示。在【属性】面板中，可以在【可折叠面板】文本框中设置面板的名称，在【显示】列表框中设置面板当前状态为“打开”或“已关闭”，在【默认状态】列表框中设置在浏览器中浏览时面板默认状态为“打开”或“已关闭”，勾选【启用动画】复选框将启用动画效果。可以直接在文档中更改标面板的标题名称并输入相应的内容。,返回目录,6.2.2 范例解析创建Spry选项卡式面板,创建一个Spry选项卡式面板，在浏览器中的预览效果如图所示。