第十六章 层叠样式、模板、库及其表单的应用.ppt

第十六章层叠样式 模板 库及其表单的应用 网页设计与网站开发 学习目标 掌握层叠样式表的基本操作及其应用掌握模板的应用掌握库的应用了解资源管理器的基本操作掌握表单应用操作 16 1层叠样式表 CSS 16 1 1层叠样式表概述层叠样式表 CascadingStyleSheets 语言是一系列格式规则 创建CSS样式表的过程 就是对各种CSS属性的设置过程 属性分为 类型 背景 区块 方框 边框 列表 定位 扩展等八个部分 在CSS控制面板中进行层叠样式表的编辑操作 16 1 1层叠样式表概述 16 1层叠样式表 CSS 16 1 2层叠样式表的创建与编辑创建样式表的具体步骤 第一步 在 CSS 面板中 单击右下角的新建按钮 或点击右上角的按钮 在弹出的菜单中选择 新建 命令 又或选择菜单 文本 CSS样式 新建 命令 16 1 2层叠样式表的创建与编辑 第二步 在弹出的 新建CSS规则 对话框中进行相应的设置 16 1 2层叠样式表的创建与编辑 16 1 2层叠样式表的创建与编辑 设置完各属性后 点击确定即可在CSS面板中的列表中显示新建的CSS规则 如果需要对其进行修改 则在该CSS规则名上双击即可进行属性设置对话框 或在其名上单击右键 可以进行其他编辑操作 16 1层叠样式表 CSS 16 1 3外部样式表的操作在CSS面板中单击右下角的 附加样式表 按钮 或点击右上角菜单中选择 附加样式表 命令 则弹出 链接样式表 对话框 选择外部CSS样式表路径即可 16 1层叠样式表 CSS 16 1 4CSS样式表的滤镜应用CSS样式表编辑中提供了多种滤镜效果 可以在CSS规则定义对话框中的 扩展 部分进行编辑设置 大多数CSS滤镜应用于文本时 需要先用CSS设置一个指定区域 16 1 4CSS样式表的滤镜应用 16 2模板的应用 16 2 1模板概述设计网站页面时 套用设计好的模板 可以创建风格一致的页面 还可节省大量的设计时间 站点的模板文件保存在本地站点目录下的Templates文件夹中 模板文件的扩展名为 dwt 16 2模板的应用 16 2 2创建和保存模板在 资源 面板中 单击左侧的 模板 按钮 打开模板分类 在面板中将显示当前站点所有的模板文件 顶部为所选模板的预览 16 2 2创建和保存模板 单击资源面板底部的 新建模板 按钮 则会在资源面板中出现名为 Untitled 的新模板 可以通过右键菜单 进行重命名 删除等操作 16 2 2创建和保存模板 可以通过选择菜单 文件 另存为模板 命令 将当前的文档保存为模板 将弹出 另存模板 对话框 在对话框中进行相应的设置 点击保存 将模板文件保存到站点的Templates文件夹中 16 2模板的应用 16 2 3应用与修改模板可在 资源 面板中 可通过双击模板名称 或选中要编辑的模板 再单击 编辑模板 按钮 即可在编辑窗口中打开该模板进行编辑操作 打开一文档 选中一模板 单击 资源 面板底部的 应用 按钮 即可应该到该模板应用到文档中 16 2 3应用与修改模板 也可通过菜单 修改 模板 子菜单中的命令来编辑文档中的模板 16 3库的应用 16 3 1创建和应用库项目库可以是body中的任何元素 只要成为了库项目 就可以在多个地方引用 库项目可以包含行为 但不能包含时间轴或样式表 创建库项目主要有两种方式 创建空白库项目和将选定内容创建为库项目 16 3 1创建和应用库项目 1 创建空白库项目在 资源 面板中 单击库按钮 选择面板左侧的库 单击面板底部的 新建库项目 按钮 即被添加到面板的列表中 输入一库名即可 Dreamweaver在站点根目录的Library文件夹中 将每个库文件都保存为一单独的扩展名为 lbi 的文件 16 3 1创建和应用库项目 2 将选定内容创建为库项目在文档窗口中 选择文档中要另存为库项目的内容 再单击 资源 面板底部的 新建库项目 按钮 该内容即被创建为库项目 或直接将选定的内容拖到资源面板的库类别中也可 选中库项目 可在相应的属性面板中设置属性值 2 将选定内容创建为库项目 打开库文件窗口 将当前选择的内容从库项目中分离出来 将以前使用库项目插入的内容重新生成库项目文件 16 3库的应用 16 3 2编辑库项目在 资源 面板中 双击要编辑的库项目 或选中要编辑的库项目 再单击面板底部的 编辑 图标 则打开一个用于编辑该库项目的新窗口 进行编辑 也可在文档中 直接选择库项目创建的内容 双击其进入编辑 或右键单击菜单选择 编辑 命令 进入库项目编辑 16 4资源管理器 资源管理器汇总了本站点内的多媒体文件 在 资源 面板中可方便的进行管理和编辑操作 16 5表单及其应用 16 5 1表单概述表单可以增加网页的交互性 获得访问者的用户信息 表单主要是在客户端 当访问者在表单中输入信息 提交后 这些信息将被发送到服务器 然后服务器对信息进行处理 将处理完生成新的Html文件并发送回访问者 16 5表单及其应用 16 5 2创建表单1 表单对象简介表单对象就是表单输入类型 是允许用户输入数据的机制 可以在表单中添加的对象如左图 16 5 2创建表单 可通过 插入 菜单 表单 的子菜单中选择要插入页面表单的类别 16 5 2创建表单 2 创建表单域首先在页面中插入一个空表单域 选择菜单 插入 表单 的子菜单中的 表单 则会在页面中看到一个红色的虚框就是表单域 16 5 2创建表单 3 文本框选择菜单 插入 表单 的子菜单中的 文本域 则在弹出的 插入标签辅助功能属性 对话框中进行基本的属性设置 确定 即可 16 5 2创建表单 创建好一文本域之后 可在其属性面板中进行属性设置 文本域有三种类型 单行 多行和密码 可以在属性面板中进行选择 16 5 2创建表单 16 5 2创建表单 4 文本区域插入文本区域就相当于插入了一个多行 文本域 5 按钮选择菜单 插入 表单 的子菜单中的 按钮 则在弹出的 插入标签辅助功能属性 对话框中进行基本的属性设置 确定 即可 16 5 2创建表单 选中插入的按钮 可在其属性面板中进行属性设置 16 5 2创建表单 6 复选框选择菜单 插入 表单 的子菜单中的 复选框 则在弹出的 插入标签辅助功能属性 对话框中进行基本的属性设置 确定 即可 16 5 2创建表单 16 5 2创建表单 7 单选按钮选择菜单 插入 表单 的子菜单中的 单选按钮 则在弹出的 插入标签辅助功能属性 对话框中进行基本的属性设置 确定 即可 16 5 2创建表单 16 5 2创建表单 8 单选按钮组也可用 单选按钮组 命令 一次编辑多个单选按钮 16 5 2创建表单 9 滚动菜单和下拉列表选择菜单 插入 表单 的子菜单中的 列表 菜单 则在弹出的 插入标签辅助功能属性 对话框中进行基本的属性设置 确定 即可 16 5 2创建表单 在属性面板中对其进行设置 16 5 2创建表单 16 5 2创建表单 16 5 2创建表单 10 文件域选择菜单 插入 表单 的子菜单中的 文件域 则在弹出的 插入标签辅助功能属性 对话框中进行基本的属性设置 确定 即可 如是上传文件则 表单域应选择 post 方法 MIME类型选择 multipart form data 16 5 2创建表单 11 图像域即插入一张图像 12 隐藏域是访问者不可见的 用来收集或发送信息 13