《网页设计与制作》第三章插入网页基本元素概论
合集下载
李强网页设计与制作第三章：插入网页基本元素.
文本字段 1.单行文本 1.单行文本在表单中输入“用户名”，在单击工具栏上的文本字段按钮 2.密码 2.密码密码输入区用于用户输入密码信息，用户在此区域输入的所有字符都显示为“*” 或黑点。
3.多行文本 3.多行文本在单击工具栏上的文本区域按钮 2011-9-6 46
复选框单击工具栏上的复选框按钮单选按钮 1.单选按钮 1.单选按钮单击工具栏上的单选按钮按钮 2.单选按钮组 2.单选按钮组单击工具栏上的单选按钮组按钮2011-9-6 47
下拉菜单 1.列表/ 1.列表/菜单列表单击工具栏上的列表/菜单按钮 2.跳转菜单2.跳转菜单在工具栏上单击跳转菜单按钮 2011-9-6 48
隐藏区域在工具栏上单击隐藏域按钮在网页中插入一个隐藏域标志按钮在工具栏上单击按钮按钮 2011-9-6 49。
网页设计与制作(Dreamweaver)《插入网页基本要素之多媒体内容》
多媒体内容
随着网络的发展，多媒体在网络上得到了更广泛的 应用，因此，对网页设计页提出了更高地要求。在 Dreamweaver中，可以快速、方便地为网页添加
Flash动画、音频文件、视频文件，
插入这些对象可以增强网页的互动性。
插入网页基本要素之多媒体内容
插入Flash动画
目前，Flash动画使网页上最流行的动画格式，大量用于网页中。在Dreamweaver中，Flash动画也是最常用的多媒体 插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将 多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。
插入网页基本要素之多媒体内容
音频格式
1 midi 或 mid （ 乐 器 数 字 接口）格式：用于器乐。许
多浏览器都支持MIDI文件并且不 要求插件。尽管其声音品质非常 好，但根据访问者的声卡的不同， 声音效果也会有所不同。
5
mp3格式
一种压缩格式，它可令声音文件明显缩小。 其声音品质非常好：如果正确录制和压缩 MP3文件，其质量甚至可以和CD质量相 媲美。
2 wav（ Waveform扩展名）格式： 具有较好的声音品质，许多浏览器都支持此类 格式文件并且不要求插件。可以从CD、磁带、 麦克风等录制自己的WAV文件。
3 aif（音频交换文件格式，即
AIFF）格式：与WAV格式类似，
也具有较好的声音品质，大多数浏览器
4
都可以播放它并且不要求插件。
ra、ram、rpm或RealAudio格式：具
插入网页基本要素之多媒体内容
插入Flash动画
方法：将插入点置于欲添加位置，在“插入栏”中，选择“媒体”，单击“Flash”图标；或在站点管理 器中将“Flash”文件拖到文档窗口中；或者执行“插入/媒体/Flash”菜单。
随着网络的发展，多媒体在网络上得到了更广泛的 应用，因此，对网页设计页提出了更高地要求。在 Dreamweaver中，可以快速、方便地为网页添加
Flash动画、音频文件、视频文件，
插入这些对象可以增强网页的互动性。
插入网页基本要素之多媒体内容
插入Flash动画
目前，Flash动画使网页上最流行的动画格式，大量用于网页中。在Dreamweaver中，Flash动画也是最常用的多媒体 插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将 多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。
插入网页基本要素之多媒体内容
音频格式
1 midi 或 mid （ 乐 器 数 字 接口）格式：用于器乐。许
多浏览器都支持MIDI文件并且不 要求插件。尽管其声音品质非常 好，但根据访问者的声卡的不同， 声音效果也会有所不同。
5
mp3格式
一种压缩格式，它可令声音文件明显缩小。 其声音品质非常好：如果正确录制和压缩 MP3文件，其质量甚至可以和CD质量相 媲美。
2 wav（ Waveform扩展名）格式： 具有较好的声音品质，许多浏览器都支持此类 格式文件并且不要求插件。可以从CD、磁带、 麦克风等录制自己的WAV文件。
3 aif（音频交换文件格式，即
AIFF）格式：与WAV格式类似，
也具有较好的声音品质，大多数浏览器
4
都可以播放它并且不要求插件。
ra、ram、rpm或RealAudio格式：具
插入网页基本要素之多媒体内容
插入Flash动画
方法：将插入点置于欲添加位置，在“插入栏”中，选择“媒体”，单击“Flash”图标；或在站点管理 器中将“Flash”文件拖到文档窗口中；或者执行“插入/媒体/Flash”菜单。
网页设计与制作 第3章 基本页面元素
档内任意位置的超链接。
绝对路径 文档相对路径 站点根目录相对路径
3.3 页面链接的处理
3.3.2 链接的基本操作
建立链接
设置链接打开放式 检查链接 链接自动更新 3.3.3 其他的链接操作
设置锚记链接
设置热点链接
创建导航条
3.4 本章小结
本章主要介绍了页面中文本的使用方法，包括插
3.1 页面文本的处理
3.1.2 页面文本的格式设置 设置字体 选择字号 色彩设置
样式设置
文本对齐和缩进
设置文本标题
设置段落和换行
3.1 页面文本的处理
3.1.3 页面文本列表的设置 在网页处理文本时，对于需要逐条列出的文本项目， 我们一般将其设置为列表的形式，这样可以便读者一目 了然地了解到所要展示的文本内容。 在Dreamweaver中为我们提供了常用的两种类型的 列表：项目列表和编号列表 。
入文本，段落格式设置，设置标题，设置列表等。介
绍了图像在网页制作中的运用，包括怎样在网页中插 入图像、设置图像的各个属性、制作Web相册、插入 交替图像、图像的拼接制作等。介绍了网页中超链接 的使用，包括在网页中制作文件链接、锚记链接、热
点链接、相对路径和绝对链接，以及如何对超链接进
行管理。
Hale Waihona Puke 第3章 基本页面元素第3章 基本页面元素
文本和图像是 网页的核心内容， 学习网页设计也应 从最基本的文本和 图像处理开始。链 接是网页的灵魂， 也是网络的魅力所 在。通过点击网页 上的链接，我们才 能在网络信息的海 洋中尽情遨游。
3.1 页面文本的处理
3.2 页面图片的处理
3.3 页面链接的处理
网页设计与制作第03章插入网页基本元素
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
2024/8/3
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2024/8/3
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2024/8/3
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
2024/8/3
25
2.修改表格属性
49
（2）选择一个要插入网页的电影格式的文件
（3）在编辑窗口中看到插入了一个灰色矩形插件标志，调整 其大小可调整网页中的播放窗口的大小。
（4）单击属性面板上的“参数”按钮，可设置各种播放参数。
2024/8/3
39
2.插入背景声音
（1）将插入工具栏设置为“常规”，单击标签选择器按钮
（2）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页 元素”→“浏览器特定”，然后在右边窗口中单击“bgsound”，再 单击下面的“插入”按钮，打开“标签编辑器--bgsound”对话框。30Fra bibliotek编辑表格
❖ 实例1、绘制课本51页的表格。
2024/8/3
31
插入图像预览效果图
2024/8/3
2024/8/3
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2024/8/3
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2024/8/3
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
2024/8/3
25
2.修改表格属性
49
（2）选择一个要插入网页的电影格式的文件
（3）在编辑窗口中看到插入了一个灰色矩形插件标志，调整 其大小可调整网页中的播放窗口的大小。
（4）单击属性面板上的“参数”按钮，可设置各种播放参数。
2024/8/3
39
2.插入背景声音
（1）将插入工具栏设置为“常规”，单击标签选择器按钮
（2）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页 元素”→“浏览器特定”，然后在右边窗口中单击“bgsound”，再 单击下面的“插入”按钮，打开“标签编辑器--bgsound”对话框。30Fra bibliotek编辑表格
❖ 实例1、绘制课本51页的表格。
2024/8/3
31
插入图像预览效果图
2024/8/3
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2020/11/14
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
2020/11/14
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
2020/11/14
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字符”。
2020/11/14
20
设置网页图片属性最终效果图
2020/11/14
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2020/11/14
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2020/11/14
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
2020/11/14
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
2020/11/14
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
5、链接文字颜色的设置
通过页面属性来设置的。
2020/11/14
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2020/11/14
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
25
2.修改表格属性
❖高 ❖背景颜色 ❖边框颜色 ❖背景图像 ❖对齐设置
2020/11/14
2020/11/14
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2020/11/14
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
2020/11/14
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
2020/1“1/1>4<”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
2020/11/14
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
2020/11/14
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2020/11/14
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2020/11/14
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
2020/11/14
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2020/11/14
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
2020/11/14
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。
2020/11/14
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
2020/11/14
8
网页效果图
2020/11/14
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2020/11/14
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
2020/11/14
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
2020/11/14
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字符”。
2020/11/14
20
设置网页图片属性最终效果图
2020/11/14
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2020/11/14
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2020/11/14
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
2020/11/14
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
2020/11/14
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
5、链接文字颜色的设置
通过页面属性来设置的。
2020/11/14
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2020/11/14
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
25
2.修改表格属性
❖高 ❖背景颜色 ❖边框颜色 ❖背景图像 ❖对齐设置
2020/11/14
2020/11/14
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2020/11/14
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
2020/11/14
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
2020/1“1/1>4<”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
2020/11/14
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
2020/11/14
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2020/11/14
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2020/11/14
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
2020/11/14
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2020/11/14
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
2020/11/14
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。
2020/11/14
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
2020/11/14
8
网页效果图
2020/11/14
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。