网页制作Dreamweaver_CS4_-_6、使用表格和Spry构件.ppt

利用Dreamweaver CS4的【排序表格】命令可以对表格指定列的内容进行排序。方法是，利用选择表格的相关命令选中整个表格，然后选择【命令】/【排序表格】命令，打开【排序表格】对话框进行参数设置即可，如图所示。 返回目录 首先将“范例解析\素材\第6讲\6-1-2\images”文件夹复制到站点根文件夹下，然后创建文档“6-1-2.htm”，并使用表格布局页面，最终效果如图所示。 这是使用表格进行页面布局的一个例子，可以先插入表格，然后通过【属性】面板对表格和单元格进行属性设置，最后在单元格中输入内容即可，具体操作步骤参考教材。 返回目录 返回目录 使用表格制作2009年10月日历表并保存为“6-1-3.htm”，最终效果如图所示。 这是使用表格组织数据的一个例子，可以先插入表格，然后通过【属性】面板对表格和单元格进行属性设置，最后在单元格中输入内容即可。 返回目录 6.2.1 功能讲解 6.2.2 范例解析——创建Spry选项卡式面板 6.2.3 课堂实训——创建Spry菜单栏 返回目录 Spry构件是预置的常用用户界面组件，可以使用CSS来自定义这些组件，然后将其添加到网页中。使用Dreamweaver CS4可以将多个Spry构件添加到页面中，这些构件包括XML驱动的列表和表格、折叠构件、选项卡式界面和具有验证功能的表单元素。 可以选择【插入】/【Spry】中的相应命令向页面中插入各种Spry构件，也可以通过【插入】/【Spry】工具栏中的相应按钮进行操作。 如果要编辑构件，可以将光标指向这个构件直到看到构件的蓝色选项卡式轮廓，单击构件左上角的选项卡将其选中，然后在【属性】面板中编辑构件即可。尽管可以使用【属性】面板编辑Spry构件，但【属性】面板并不支持其外观样式的设置。如果要修改其外观样式，必须修改对应的CSS样式。 下面对Spry布局构件进行简要介绍，包括Spry菜单栏、Spry选项卡式面板、Spry折叠式构件、Spry可折叠式面板。 返回目录 Spry菜单栏是一组可导航的菜单按钮，当将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。根据需要，可以使用Spry菜单栏构件创建横向或纵向的下拉或弹出菜单。图为一个水平菜单栏构件，其中的第3个菜单项处于展开状态。 返回目录 创建Spry菜单栏的方法是，选择【插入】/【Spry】/【Spry菜单栏】命令打开【Spry菜单栏】对话框，选择菜单栏的布局模式，其中包括【水平】和【垂直】两种。确定菜单栏的布局后，单击 按钮，在文档中插入一个Spry菜单栏构件，如图所示。 返回目录 此时还需要通过【属性】面板添加菜单项及链接目标。确保Spry菜单栏构件处于选中状态，如果没有选中可单击左上角的【Spry菜单栏：MenuBar1】可将其选中，此时其【属性】面板如图所示。由【属性】面板可以看出，创建的菜单栏可以有3级菜单。在【属性】面板中，从左至右的3个列表框分别用来定义一级菜单项、二级菜单项和三级菜单项，在定义每个菜单项时，均使用右侧的【文本】、【链接】、【标题】和【目标】4个文本框进行设置。单击列表框上方的 按钮将添加一个菜单项；单击 按钮将删除一个菜单项；单击 按钮将选中的菜单项上移；单击 按钮将选中的菜单项下移。 返回目录 Spry选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。用户可以通过单击要访问面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。图为一个选项卡式面板构件，第3个面板处于打开状态。 返回目录 创建Spry选项卡式面板的方法是，选择【插入】/【Spry】/【Spry选项卡式面板】命令，在页面中添加一个Spry选项卡式面板构件。 确保Spry选项卡式面板构件处于选中状态，其【属性】面板如图所示。 返回目录 折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点浏览者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠式构件中，每次只能有一个内容面板处于打开且可见的状态。图所示为一个折叠式构件，其中第2个面板处于展开状态。 返回目录 创建折叠式构件的方法是，选择【插入】/【Spry】/【Spry折叠式】命令，在页面中添加一个Spry折叠式构件。 确保Spry折叠式构件处于选中状态，其【属性】面板如图所示。 返回目录 可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。图所示为一个处于展开和折叠状态的可折叠面