第三章插入基本网页元素优秀PPT.ppt

第三章插入基本网页元素现在学习的是第1页，共32页（1 1）换行符）换行符使用Shift+Enter组合键和直接输入换行符。（2 2）不换行空格和其他符号）不换行空格和其他符号Dreamweaver MX2004不能直接用空格键输入空格，必须用Ctrl+Shift+空格组合键输入，或者通过插入特殊符号“不换行空格”插入。（3 3）转义符）转义符将视图切换到“拆分”模式，可以看到空格、注册商标等特殊符号用HTML代码表示时不是直接表示，而是用他们的转义符表示。现在学习的是第2页，共32页3.1.2设置文字属性设置文字属性1.1.设置方法设置方法 使用组合键Ctrl+F3或菜单“窗口”“属性”打开属性面板。2.2.改变文字大小改变文字大小 文本属性面板上的“大小”一项是用来设定文字大小的。3.改变文字颜色改变文字颜色 选中要改变颜色的文字，在属性面板中单击文本属性面板中的取色器 ，在弹出的颜色面板上选择适当的颜色，可改变文字的颜色。4.改变字体改变字体 选中文字后，打开“字体”下拉菜单，选择其中的一种字体，选中文字后，单击按钮将文字变为粗体，单击按钮将文字变为斜体。现在学习的是第3页，共32页5.5.使用样式设置文字格式使用样式设置文字格式样式是指对文字进行了大小、颜色设置后的综合的属性，以后再使用需要将文字设置与某种样式相同的效果时，不需要一一设置颜色、大小等，直接在样式列表中选择就可以了。6.6.把文字变为标题把文字变为标题将光标放在一个段落的文字中任意位置，在属性面板的“格式”下拉菜单中选择一个标题格式，可以将一个段落设为相应的标题样式。7.7.设置段落对齐方式设置段落对齐方式将光标放在一个段落的文字中任意位置，单击左对齐，居中，右对齐按钮。8.8.列表列表当显示多个相关的条目时，使用列表方式可以清楚地表示出各个条目的并列关系。现在学习的是第4页，共32页3.1.3插入滚动字幕1.1.插入滚动字幕插入滚动字幕（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择器对话框。（4）在标签选择器对话框左边窗口逐级选择“HTML标签”“页元素”“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭对话框。（5）在代码中出现，在中间的两个尖括号“”之间输入要滚动的文字，如“欢迎访问励志学社的主页！”。现在学习的是第5页，共32页2.2.设置滚动字幕的属性设置滚动字幕的属性direction为滚动的目标方向，可选right、left、up、down。scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度和间隔时间。loop设置循环次数，小于1为连续循环。Bgcolor设置滚动区域的背景颜色。width 和height设置滚动区域的大小，沿垂直方向（up或down）滚动时，必须设置一定的高度值，否则看不到滚动的文字。现在学习的是第6页，共32页3.1.4 设置文本超级链接1.1.使用属性面板设置超级使用属性面板设置超级链接链接2.2.使用工具按钮使用工具按钮（1）插入超级链接 单击工具栏上的超级链接按钮（2）插入邮件链接 链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮 现在学习的是第7页，共32页3.1.5 使用锚记1.1.设置锚记设置锚记 在编辑窗口中单击要设置锚记的位置，在单击工具栏上的插入锚记按钮 2.2.使用锚记使用锚记 一般在页面顶部制作包含锚记的网页的目录，然后将目录链接到锚记所在位置，浏览网页时单击该链接窗口可以直接跳转到该位置。选中目录文字，在属性面板的链接栏输入“#”和锚记名称，如“#a04”，即可将连接目标设置为锚记位置。现在学习的是第8页，共32页3.1.6 插入水平线 水平线可用于页面上内容的分隔。将工具按钮切换到“HTML”，单击水平线按钮 单击该水平线，可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等。现在学习的是第9页，共32页3.2 3.2 插入图像插入图像3.2.1 网页中的图像网页中的图像1.1.图像的作用图像的作用网页中的图像分为正文图像和装饰图像。2.2.图像的格式图像的格式Dreamweaver MX和大多数浏览器一样支持使用JPEG和GIF图像。3.3.图像文件的保存图像文件的保存网页中的图像不和网页保存在一个文件中，而是单独的图像文件。常见的是将装饰文件保存在images文件夹中，将正文图像保存在pics文件夹中。现在学习的是第10页，共32页3.2.2插入图像1.1.插入图像插入图像（1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮（2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。（3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。将文件面板中的图像文件文件名直接拖动到编辑窗口中，也可以将此图像文件插入到网页中。现在学习的是第11页，共32页2.2.设置图象的基本属性设置图象的基本属性（1）改变图像大小）改变图像大小拖动图像上的3个控制点可以随意改变图像的大小，拖动时，属性面板上的长、宽数值也作相应的改变。（2）图文混排）图文混排图像和文字在同一行时，使用属性面板上的对齐属性可以设置图文的混排方式。（3）垂直边距和水平边距）垂直边距和水平边距垂直边距和水平边距栏设置图像和周围的文字的距离，单位为像素。（4）图像替代）图像替代在图像替代栏输入图片的文字说明，当浏览器关闭图像显示时，图像方框中会出现说明文字，当鼠标移动到图像上面时，也会显示替代文字。（5）图像边框）图像边框在边框栏输入一个数字可设置图像的边框，默认的边框值为0。边框线的颜色不能更改，通常将边框值设为1，可以美化图像 现在学习的是第12页，共32页3.2.3图片超级链接和图像地图1.1.图片超级链接图片超级链接2.2.图像地图图像地图 如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。（1）设置矩形热区（2）设置圆形热区（3）设置多边形热区现在学习的是第13页，共32页3.2.4 图像占位符和轮换图像1.1.图象占位符图象占位符2.2.插入鼠标经过图像插入鼠标经过图像 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮 现在学习的是第14页，共32页3.3 3.3 插入表格插入表格3.3.1 表格的知识 表格由数个行与列组成的，行、列交叉组成表格的单元格，可以在表格的单元格内插入各种信息，包括文本、数字、链接，甚至是图像。现在学习的是第15页，共32页3.3.2添加表格1.1.新建表格新建表格（1）将插入工具栏切换到“常用”模式，单击表格按钮（2）在表格对话框中设置表格的样式。（3）单击“确定”按钮就可以把表格插到网页中。（4）在表格的各个单元格中分别输入内容。现在学习的是第16页，共32页2.2.修改表格属性修改表格属性在编辑窗口中，单击表格的左上角或在边框线上的任意位置双击，即可选中表格，在属性面板中可进一步设置表格，属性面板中的行、列、宽、填充、间距、边框的设置和添加表格相同，这里可以修改其具体数值。3.3.设置单元格属性设置单元格属性表格由很多单元格组成，每个单元格可以设置不同的属性。也可以同时选中多个单元格，设置其共同的属性。现在学习的是第17页，共32页3.3.3编辑表格1.1.合并单元格合并单元格拖动选中要合并的单元格，单击属性面板上的合并单元格按钮 2.2.拆分单元格拆分单元格在要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮 3.3.插入或删除行、列插入或删除行、列使用菜单“操作”“表格”菜单中的插入行或列，删除行或列进行相应的操作。现在学习的是第18页，共32页3.3.4格式化表格在要格式化的表格中单击，再使用菜单“命令”“格式化表格”打开格式化表格对话框。现在学习的是第19页，共32页3.3.5导入表格数据1.1.导出导出ExcelExcel数据为文本文件数据为文本文件在Excel中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*.txt）”，保存文件为biaoge.txt。2.2.导入位网页表格导入位网页表格将“插入”工具栏切换为“布局”模式，在右边单击表格数据按钮 选择数据文件为Excel导出的文本文件biaoge.txt，定界符选“Tab”。表格宽度设置单元格的宽度，选择“匹配内容”。也可以制定宽度。现在学习的是第20页，共32页3.43.4插入媒体元素插入媒体元素3.4.1媒体文件的类型1.RealVideo1.RealVideo的的.rm.rm、.rmvb.rmvb视频影像格式和视频影像格式和.ra.ra的音频格式的音频格式2.Microsoft Media technology2.Microsoft Media technology的的.asf.asf格式格式3.QuickTim3.QuickTim的的.qt.qt格式格式4.Flash4.Flash的的.swf.swf格式格式5.Metastream 5.Metastream 的的.mts.mts格式格式6.Authorware6.Authorware的的.aam.aam多媒体教学课件格式多媒体教学课件格式现在学习的是第21页，共32页3.4.2插入Flash1.1.插入插入FlashFlash动画动画将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮 2.2.插入插入FlashFlash按钮按钮将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash按钮”按钮 3.3.插入插入FlashFlash文本文本将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮 现在学习的是第22页，共32页3.4.3制作播电影、声音的页面1.1.插入插件插入插件 （1）将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮（2）选择一个要插入网页的电影格式的文件 （3）在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小。（4）单击属性面板上的“参数”按钮，可设置各种播放参数。现在学习的是第23页，共32页3.3.插入背景声音插入背景声音（1）将插入工具栏设置为“常规”，单击标签选择器按钮 （2）在标签选择器对话框左边窗口逐级选择“HTML标签”“页元素”“浏览器特定”，然后在右边窗口中单击“bgsound”，再单击下面的“插入”按钮，打开“标签编辑器-bgsound”对话框。（3）在“源”中指定背景音乐文件，可以是.wav、.mid或.mp3格式的音频文件。（4）在“循环”栏指定网页调入时背景音乐的播放次数，选择“无限（-1）”循环播放。其他选项根据需要设置。（5）单击“确定”，背景音乐就插入到网页中。关闭标签选择器对话框。现在学习的是第24页，共32页3.53.5插入表单插入表单3.5.1创建表单将插入工具栏切换到“表单”模式，单击创建表单按钮 插入的表单区域用红色虚线表示，后面插入的所有表单元素都要插入到这个虚线中。现在学习的是第25页，共32页3.5.2文本字段1.1.单行文本单行文本在表单中输入“用户名”，在单击工具栏上的文本字段按钮 2.2.密码密码密码输入区用于用户输入密码信息，用户在此区域输入的所有字符都显示为“*”或黑点。3.3.多行文本多行文本在单击工具栏上的文本区域按钮 现在学习的是第26页，共32页3.5.3复选框单击工具栏上的复选框按钮 3.5.6单选按钮1.1.单选按钮单选按钮单击工具栏上的单选按钮按钮 2.2.单选按钮组单选按钮组单击工具栏上的单选按钮组按钮 现在学习的是第27页，共32页3.5.5下拉菜单1.1.列表列表/菜单菜单单击工具栏上的列表/菜单按钮 2.2.跳转菜单跳转菜单在工具栏上单击跳转菜单按钮 现在学习的是第28页，共32页3.5.6隐藏区域在工具栏上单击隐藏域按钮 在网页中插入一个隐藏域标志 3.5.7按钮在工具栏上单击按钮按钮 现在学习的是第29页，共32页思考题思考题3.1 网页中的基本元素有哪些？3.2 换行符和回车分段有什么区别？为什么要使用转义符？3.3 如何在字体列表中增加字体？3.4 滚动字幕有什么作用？如何改变滚动字幕运动方向3.5 使用Dreamweaver制作一个网页有哪些步骤？3.6 添加超级链接目标有几种方法？如何使得超级链接打开一个新窗口？3.7 什么是锚记？什么是图像热区？3.8 网页中的图像主要有哪些格式？替代文字有什么作用？3.9 如何实现图文混排？3.10 表格格式化有什么好处？3.11 网页中可以插入哪些多媒体文件？3.12 表单的作用是什么？为什么要给每个表单项目命名？提交按钮和复位按钮各自有什么作用？现在学习的是第30页，共32页上机练习题：上机练习题：上机练习上机练习3.13.11.练习目的：学习制作文字和图像网页。2.练习步骤：（1）新建一个纯文字网页31.htm。要求包含多段文字、换行符、水平线、超级链接、锚记、版权标记，并将文字格式化成大小、颜色各异的文本。在上面的网页中插入一个滚动字幕，大小为400*200，滚动方向为向下。（2）新建一个网页32.htm。要求包含多段文字、两个以上图像，并进行图文混排。为其中一个图像设置3个热区。（3）新建一个网页33.htm。要求包含多段文字、两个以上图像，并进行图文混排。为其中一个图像设置3个热区。在上面的网页中插入一个400*300的图象占位符。在上面的网页中插入一个轮换图像。现在学习的是第31页，共32页上机练习上机练习3.2 1.练习目的：学习网页中的表格。2.练习步骤：（1）制作一个网页34.htm，按照3.3节插入一个表格，并进行颜色的格式化。（2）通过单元格合并和拆分，制作一个课程表。上机练习上机练习3.3 1.练习目的：学习在网页中插入多媒体元素。2.练习步骤：（1）打开31.htm，插入一个Flash动画。（2）打开32.htm，插入一个Flash按钮，再插入一个wmv格式电影播放窗口（使用代码添加）。（3）打开33.htm，插入一个rm格式电影播放窗口 （4）打开34.htm，插入一个背景声音。现在学习的是第32页，共32页