《网页设计与制作》第三章：插入网页基本元素.ppt

2020 1 21 1 第3章插入网页基本元素 本章要点插入文字插入图像插入表格插入媒体元素插入表单 2020 1 21 2 插入文字 在Dreamweaver中为网页插入文本有两种方法 直接输入文本 从其他文档中复制文本 2020 1 21 3 插入特殊符号 将插入工具切换到 文本 工具组 使用菜单 插入 HTML 特殊字符 2020 1 21 4 插入特殊符号 插入换行符使用 Shift Enter 组合键 2020 1 21 5 插入特殊符号 插入空格ctrl shift 空格插入特殊符号 不换行空格插入转义符 2020 1 21 6 设置文字属性 进行设置时使用组合键 Ctrl F3或菜单 窗口 属性 打开属性面板 设置字体大小设置字体颜色设置字体列表 字体 编辑字体列表 单击 在可用字体中选则 单击 按钮 2020 1 21 7 使用样式设置文字格式 样式 选择重命名 再进行修改 把文字变为标题在属性面板的格式中选择设置文本对齐在属性面板中设置列表在属性面板中进行设置 2020 1 21 8 应用举例 设置网页文本格式 下面为 如果 网页中的文本进行格式设置 要求文本标题样式与正文不同 正文中某些文字需突出 以达到美化网页文本的目的 2020 1 21 9 网页效果图 2020 1 21 10 插入滚动字幕 1 插入滚动字幕 1 单击编辑窗口上方的 拆分 按钮 将视图切换为拆分模式 2 在下方的设计窗口中单击要插入滚动字幕的位置 此时注意查看代码窗口中光标的位置 3 将插入工具栏设置为 常规 单击标签选择器按钮 打开标签选择器对话框 4 在标签选择器对话框左边窗口逐级选择 HTML标签 页元素 浏览器特定 然后在右边窗口中单击 marquee 再单击下面的 插入 按钮 marquee标签被插入到代码中 按 关闭 按钮关闭对话框 5 在代码中出现 在中间的两个尖括号 之间输入要滚动的文字 如 欢迎访问励志学社的主页 2020 1 21 11 设置滚动字幕的属性 direction为滚动的目标方向 可选right left up down scrollamount和scrolldelay为滚动数量和延迟 可设置滚动速度和间隔时间 loop设置循环次数 小于1为连续循环 Bgcolor设置滚动区域的背景颜色 width和height设置滚动区域的大小 沿垂直方向 up或down 滚动时 必须设置一定的高度值 否则看不到滚动的文字 2020 1 21 12 设置文本超级链接 1 使用属性面板设置超级链接 2 使用工具按钮 1 插入超级链接单击工具栏上的超级链接按钮 2 插入邮件链接链接目标是电子邮件地址时 单击工具栏上的电子邮件链接按钮 2020 1 21 13 设置文本超级链接 3 设置下载文件的超级链接4 创建外部链接Http 5 链接文字颜色的设置通过页面属性来设置的 2020 1 21 14 使用锚记 设置锚记使用锚记 2020 1 21 15 插入水平线 水平线可用于页面上内容的分隔 将工具按钮切换到 HTML 单击水平线按钮 单击该水平线 可在属性面板中设置水平线的属性 如宽度 高度 对齐方式等 水平线的颜色可以使用属性面板中的 快速标签编辑器 设置 值得注意的是水平线的颜色只能在预览时看出来 2020 1 21 16 插入图像 图像的格式用于网页的图像通常只有GIF JPE和PNG3种格式 图像的获取方法图像文件的保存 2020 1 21 17 插入图像 插入图像的步骤如下 1 把工具栏切换到 常用 状态 然后单击 图像 图象 按钮 2 选择要插入的图像文件 在文件列表中单击一个图象文件时 图象预览区会显示这个图象的缩略图 3 单击确定按钮 如果图像文件在站点文件夹中 就会直接插入到网页中 同时在编辑窗口显示出图像 2020 1 21 18 设置图像的基本属性 改变图像大小图文混排垂直边距和水平边距图像替代图像边框 2020 1 21 19 图片超级链接和图像地图 1 图片超级链接 2 图像地图 如果想在一个图像的不同位置上点击 就跳转到相应的目标网页 就需要使用图象地图 1 设置矩形热区 2 设置圆形热区 3 设置多边形热区 2020 1 21 20 图像占位符和轮换图像 1 图象占位符 2 插入鼠标经过图像 单击工具栏上的图像按钮旁边的小三角形 在下拉式菜单中选择图像占位符按钮 单击工具栏上的图像按钮旁边的小三角形 在下拉式菜单中选择鼠标经过图像按钮 2020 1 21 21 设置网页图片属性最终效果图 2020 1 21 22 插入表格 添加表格编辑表格格式化表格导入表格数据 2020 1 21 23 插入表格 表格的知识 表格由数个行与列组成的 行 列交叉组成表格的单元格 可以在表格的单元格内插入各种信息 包括文本 数字 链接 甚至是图像 2020 1 21 24 添加表格 新建表格修改表格属性设置单元格属性 2020 1 21 25 1 新建表格 1 将插入工具栏切换到 常用 模式 单击表格按钮 2 在表格对话框中设置表格的样式 3 单击 确定 按钮就可以把表格插到网页中 4 在表格的各个单元格中分别输入内容 2020 1 21 26 2 修改表格属性 高背景颜色边框颜色背景图像对齐设置 2020 1 21 27 3 设置单元格属性 文字 属性面板的上半部分 水平宽 高垂直标题背景和背景颜色边框 2020 1 21 28 应用举例 在网页中插入表格并添加网页元素 下面为 繁花似锦 网页进行表格的添加和网页元素的添加 2020 1 21 29 最终效果图 2020 1 21 30 编辑表格 1 合并单元格 拖动选中要合并的单元格 单击属性面板上的合并单元格按钮 2 拆分单元格 在要拆分的单元格中单击 在单击属性面板上的拆分单元格按钮 3 插入或删除行 列 使用菜单 插入 表格 菜单中的插入行或列 删除行或列进行相应的操作 2020 1 21 31 编辑表格 实例1 绘制课本51页的表格 2020 1 21 32 插入图像预览效果图 2020 1 21 33 格式化表格 在要格式化的表格中单击 再使用菜单 命令 格式化表格 打开格式化表格对话框 2020 1 21 34 导入表格数据 1 导出Excel数据为文本文件 在Excel中使用菜单 文件 另存为 打开另存为对话框 在 文件类型 中选择 文本文件 制表符分割 txt 保存文件为biaoge txt 2 导入位网页表格 将 插入 工具栏切换为 布局 模式 在右边单击表格数据按钮 选择数据文件为Excel导出的文本文件biaoge txt 定界符选 Tab 表格宽度设置单元格的宽度 选择 匹配内容 也可以制定宽度 2020 1 21 35 插入媒体元素 动态元素是一种重要的网页元素 这里我们将学习在网页中插入动态元素 如Flash影片 Flash按钮 Flash文本等 此外还将学习其他一些动态元素的插入方法 2020 1 21 36 插入媒体元素 媒体文件的类型插入Flash制作播放电影 背景声音的页面 2020 1 21 37 插入媒体元素 媒体文件的类型 1 RealVideo的 rm rmvb视频影像格式和 ra的音频格式 2 MicrosoftMediatechnology的 asf格式 3 QuickTim的 mov格式 4 Flash的 swf格式 5 Metastream的 mts格式 6 Authorware的 aam多媒体教学课件格式 2020 1 21 38 插入Flash 1 插入Flash动画 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮 2 插入Flash按钮 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮旁边的三角形 在菜单中选择 媒体 Flash按钮 按钮 3 插入Flash文本 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮旁边的三角形 在菜单中选择 媒体 Flash文本 按钮 2020 1 21 39 制作播电影 声音的页面 1 插入插件 1 将插入工具栏切换到 常用 模式 单击 媒体 Flash 按钮旁边的三角形 在菜单中选择 媒体 Flash文本 按钮 2 选择一个要插入网页的电影格式的文件 3 在编辑窗口中看到插入了一个灰色矩形插件标志 调整其大小可调整网页中的播放窗口的大小 4 单击属性面板上的 参数 按钮 可设置各种播放参数 2020 1 21 40 2 插入背景声音 1 将插入工具栏设置为 常规 单击标签选择器按钮 2 在标签选择器对话框左边窗口逐级选择 HTML标签 页元素 浏览器特定 然后在右边窗口中单击 bgsound 再单击下面的 插入 按钮 打开 标签编辑器 bgsound 对话框 3 在 源 中指定背景音乐文件 可以是 wav mid或 mp3格式的音频文件 4 在 循环 栏指定网页调入时背景音乐的播放次数 选择 无限 1 循环播放 其他选项根据需要设置 5 单击 确定 背景音乐就插入到网页中 关闭标签选择器对话框 2020 1 21 41 插入表单 文本字段复选框单选按钮下拉式菜单隐藏区域按钮 2020 1 21 42 表单简介 在网上浏览时常会遇到要求填写资料或提供信息的页面 如申请QQ号码时填写个人信息的页面 网上购物时填写的购物单等 这些页面即是表单页面 表单通常由多个表单对象组成 如单选按钮 复选框 文本字段以及按钮等 网站管理员可以通过表单从浏览者处收集需要的信息 从而实现信息的传递 2020 1 21 43 表单的工作原理表单支持客户端 服务器关系中的客户端 当访问者在Web浏览器中显示的表单中输入信息 然后单击提交按钮时 这些信息将被发送到服务器 服务器端脚本或应用程序在该处对这些信息进行处理 用于处理表单数据的常用服务器端技术包括MacromediaColdFusion MicrosoftActiveServerPages ASP 和PHP 图6 60表单的组成对象 2020 1 21 44 一个实例制作一个个人简历调查表 收集个人的资料 该调查表是表单应用的典型实例 实例效果 2020 1 21 45 创建表单 将插入工具栏切换到 表单 模式 单击创建表单按钮 插入的表单区域用红色虚线表示 后面插入的所有表单元素都要插入到这个虚线中 2020 1 21 46 文本字段 1 单行文本 在表单中输入 用户名 在单击工具栏上的文本字段按钮 2 密码 密码输入区用于用户输入密码信息 用户在此区域输入的所有字符都