《网页设计与制作》第三章：插入网页基本元素分析
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（3）单击确定按钮，如果图像文件在站点文件夹中， 就会直接插入到网页中，同时在编辑窗口显示出图 像。
2wenku.baidu.com20/2/29
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2020/2/29
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2020/2/29
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
2020/2/29
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
2020/2/29
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2020/2/29
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
2020/2“/2>9 <”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
2020/2/29
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
2020/2/29
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
2020/2/29
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字符”。
2020/2/29
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2020/2/29
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2020/2/29
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
2020/2/29
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
2020/2/29
8
网页效果图
2020/2/29
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
2020/2/29
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
Http://www.baidu.com 5、链接文字颜色的设置
通过页面属性来设置的。
2020/2/29
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2020/2/29
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
2020/2/29
25
2.修改表格属性
2020/2/29
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
2020/2/29
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
❖高 ❖背景颜色 ❖边框颜色 ❖背景图像 ❖对齐设置
2020/2/29
26
3.设置单元格属性
❖ 文字（属性面板的上半部分） ❖ 水平 ❖ 宽、高 ❖ 垂直 ❖ 标题 ❖ 背景和背景颜色 ❖ 边框
20
设置网页图片属性最终效果图
2020/2/29
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2020/2/29
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2020/2/29
2wenku.baidu.com20/2/29
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2020/2/29
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2020/2/29
19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
2020/2/29
loop设置循环次数，小于1为连续循环。
Bgcolor设置滚动区域的背景颜色。
width 和height设置滚动区域的大小，沿垂直方向（up或down）
滚动时，必须设置一定的高度值，否则看不到滚动的文字。
2020/2/29
11
设置文本超级链接
1.使用属性面板 设置超级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
▪ 设置字体大小 ▪ 设置字体颜色 ▪ 设置字体列表
【字体】【编辑字体列表】
✓ 单击＋ ✓ 在可用字体中选则，单击《按钮
2020/2/29
6
➢使用样式设置文字格式 ❖ 【样式】选择 重命名、再进行修改。 ➢把文字变为标题 在属性面板的格式中选择 ➢设置文本对齐 在属性面板中设置 ➢列表 在属性面板中进行设置
对话框。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括号
2020/2“/2>9 <”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110”
loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………
</marquee>
direction为滚动的目标方向，可选right、left、up、down。
scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度
和间隔时间。
15
插入图像
❖ 图像的格式 用于网页的图像通常只有GIF、JPE和PNG
3种格式。 ❖ 图像的获取方法 ❖ 图像文件的保存
2020/2/29
16
插入图像
❖ 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击“图像： 图象”按钮
（2）选择要插入的图像文件，在文件列表中单击一个 图象文件时，图象预览区会显示这个图象的缩略图。
第3章 插入网页基本元素
本章要点 ❖ 插入文字 ❖ 插入图像 ❖ 插入表格 ❖ 插入媒体元素 ❖ 插入表单
2020/2/29
1
➢插入文字
❖ 在Dreamweaver中为网页插入文本 有两种方法：
❖ 直接输入文本 ❖ 从其他文档中复制文本
2020/2/29
2
➢插入特殊符号
❖ 将插入工具切换到“文本”工具组； ❖ 使用菜单“插入”→“HTML” →“特殊字符”。
2020/2/29
3
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2020/2/29
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2020/2/29
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
2020/2/29
7
应用举例——设置网页文本格式
❖ 下面为“如果”网页中的文本进行格式设置， 要求文本标题样式与正文不同，正文中某些 文字需突出，以达到美化网页文本的目的。
2020/2/29
8
网页效果图
2020/2/29
9
插入滚动字幕
1.插入滚动字幕
（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。
（2）插入邮件链接
链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮
2020/2/29
12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接
Http://www.baidu.com 5、链接文字颜色的设置
通过页面属性来设置的。
2020/2/29
13
➢使用锚记
❖ 设置锚记 ❖ 使用锚记
23
添加表格
❖新建表格 ❖修改表格属性 ❖设置单元格属性
2020/2/29
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
2020/2/29
25
2.修改表格属性
2020/2/29
14
插入水平线
水平线可用于页面上内容的分隔。
将工具按钮切换到“HTML”，单击水平线按钮
单击该水平线，可在属性面板中设置水平线的属性，如宽 度、高度、对齐方式等。
水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
2020/2/29
（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码 窗口中光标的位置。
（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择
器对话框。
（4）在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元
素”→“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下
面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭
❖高 ❖背景颜色 ❖边框颜色 ❖背景图像 ❖对齐设置
2020/2/29
26
3.设置单元格属性
❖ 文字（属性面板的上半部分） ❖ 水平 ❖ 宽、高 ❖ 垂直 ❖ 标题 ❖ 背景和背景颜色 ❖ 边框
20
设置网页图片属性最终效果图
2020/2/29
21
插入表格
❖ 添加表格 ❖ 编辑表格 ❖ 格式化表格 ❖ 导入表格数据
2020/2/29
22
插入表格
➢表格的知识
表格由数个行与列组成的，行、列交叉组成表格 的单元格，可以在表格的单元格内插入各种信息， 包括文本、数字、链接，甚至是图像。
2020/2/29