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

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