最新《网页设计与制作》第三章插入网页基本元素

斜体 强调 块引用
标题
编号列表定义列表 定义说明 首字母缩写词
粗体 加强
段落 已编排格式
项目列表 列表项 定义术语 缩写 字符
插入网页基本要素之文本与样式
添加空格和段落
插入空格
空格的添加：HTML只允许字符之间包含一个空格；若要在文档中 添加其他空格，必须添加连续空格。
（1）空格的HTML代码为：  （2）在“插入”栏中，选择“文本”，然后单击最右侧下拉列表框中“不 换行空格”。 （3）选择“插入”>“HTML”>“特殊字符”>“不换行空格”。 （4）按 Ctrl+Shift+空格键 （首选）。
插入网页基本要素之文本与样式
层叠样式的应用
CSS样式面板
显示“CSS样式”面板：在“窗口”菜单中单击“CSS 样式”，或 者按 Shift+F11 键。CSS样式面板下方的四个按钮分别是：附加样 式表，新建CSS样式，编辑样式表，删除CSS样式表。
（1）将插入点置于欲设格式处，单击新建 CSS样式按钮。 （2）定义CSS样式的类型； （3）选择定义样式的位置； （4）单击“确定”。出现“CSS样式定义” 对话框。 （5）选择要为新CSS样式设置的样式选项。
插入网页基本要素之文本与图像
层叠样式的应用
插入网页基本要素之文本与图像
层叠样式的应用
插入网页基本要素之文本与图像
层叠样式的应用
CSS样式可以保存成一个独立的外部样式文件，使得多个网页文件可以共享同一CSS样式，以便统一网 页的格式。 CSS样式文件的扩展名是CSS，是一个纯文本文件。 CSS样式面板中单击附加样式按钮，可以将一个现成的样式链接到当前网页中使用。

进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。 设置字体大小 设置字体颜色 设置字体列表 【字体】【编辑字体列表】 单击＋ 在可用字体中选则，单击《按钮

2015/8/23 6
使用样式设置文字格式 【样式】选择 重命名、再进行修改。 把文字变为标题 在属性面板的格式中选择 设置文本对齐 在属性面板中设置 列表 在属性面板中进行设置
2015/8/23
24
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。 （4）在表格的各个单元格中分别输入内容。
2015/8/23 25
2.修改表格属性
高
背景颜色
边框颜色
背景图像
对齐设置
第3章 插入网页基本元素
本章要点 插入文字 插入图像 插入表格 插入媒体元素 插入表单
2015/8/23 1
插入文字
在Dreamweaver中为网页插入文本 有两种方法： 直接输入文本 从其他文档中复制文本

2015/8/23
2
插入特殊符号

将插入工具切换到“文本”工具组；
2015/8/23 19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠
标经过图像按钮
2015/8/23 20
设置网页图片属性最终效果图
2015/8/23
21
42

插入网页基本要素之页面的框架布局
选择框架和框架集
在“文档”窗口中选择框架和框架集 在按下ALT的同时，单击欲选的框架。 单击框架集中两个框架之间的边框，可以选择一个框架集。 或者在按下ALT的同时，按下左右上下光标移动键。
插入网页基本要素之页面的框架布局
编辑框架集
（1）将一个框架拆分成几个更小的框架 拆分插入点所在的框架，从“修改/框架集” 子菜单选择拆分项。 （2）删除一个框架 当拖动框架边框至四边外侧时，框架将被 自动删除。
Main Frame
插入网页基本要素之页面的框架布局
使用Iframe
Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是，Iframe可以嵌在网页的任意 部分，因而也被称作内联框架或者浮动框架。
(1)将光标定位在准备插入的目标区域，选择“插入录”|HTML|“框 架”|IFRAME命令即可。 (2)将光标定位在准备插入的目标区域，选择“插入”栏中的“布局” 选项卡，单击Iframe按钮即可。 (3)进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标 记。
插入网页基本要素之页面的框架布局
使用Iframe
属性
align
frameborder height
longdesc
marginheight marginwidth
name scrolling
src width
值 left、right、top、middle、
bottom 1、0
pixels、%
URL
pixels pixels frame_name yes、no、auto URL pixels、%
描述 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 规定是否显示框架周围的边框。 规定 iframe 的高度。 规定一个页面，该页面包含了有关 iframe 的较长描 述。 定义 iframe 的顶部和底部的边距。 定义 iframe 的左侧和右侧的边距。 规定 iframe 的名称。 规定是否在 iframe 中显示滚动条。 规定在 iframe 中显示的文档的 URL。 定义 iframe 的宽度。

3.1.2 插入视频和音频
使用插件可以在网页中添加视频文件和音频文件。将鼠标放 置在要插入内容的位置，单击“插入”面板“媒体”标签中 的“插件”按钮，其他操作与插入Flash元素类似。进入 “代码”视图可以发现，使用“插件”方式添加的多媒体元 素，Dreamweaver为其添加了<embed>标签，因此直接修 改代码或使用“标签编辑器”可对用“插件”方式添加的多 媒体元素进行更精确控制。 下面介绍在网页中插入视频和音频的具体方法，操作步骤如 下： 1）打开上面保存过的“3-1.html”文件，将表格第3行各单元 格合并为一个单元格，然后插入已经准备好的图片，如图310所示。
3）选中第一行的4个单元格，单击鼠标右键，在打开的快捷式 菜单中选择“表格→合并单元格”命名，将选中的单元格合并 为一个单元格。
4）将光标置于合并的单元格中，选择“插入→图像”命 令，在第一行中插入已经准备好的图像，如图3-2所示。
图3-2
插入的图像
5）将光标置于第2行第一列的单元格中，单击“插入”面 板“常用”标签中的媒体按钮 ，打开如图3-3所示 菜单。选择SWF后，打开如图3-4所示的“选择文件”对 话框，从中选择已经准备好的SWF文件。
背景颜色：指定影片区域的背景颜色。在不播放影片时（在 加载时和在播放后）也显示此颜色。 类：用于对影片应用CSS 类。 循环：使影片连续播放。如果没有选择循环，则影片将播放 一次后停止。 自动播放：在加载页面时自动播放影片。 垂直边距和水平边距：指定影片上、下、左、右空白的像素 数。 品质：在影片播放期间控制抗失真。默认为高品质，该设置 可改善影片的外观。但高品质设置的影片需要较快的处理器 才能在屏幕上正确呈现。 比例：确定影片如何适合在宽、高度文本框中设置的尺寸。 默认为显示整个影片。 对齐：确定影片在页面上的对齐方式。

多媒体内容
随着网络的发展，多媒体在网络上得到了更广泛的 应用，因此，对网页设计页提出了更高地要求。在 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”菜单。

2018/10/23
图像大小
在Dreamweaver 8中插入图像后系统会自动 将图像的原始大小显示在“宽”和“高”文本框（以 像素为单位）中。
2018/10/23
编辑图片
在网页中选择图像之后，单击属性面板中的按钮，打开图像 处理软件，对图像进行处理。如果安装了Fireworks，那么 Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己 设置使用其他软件中处理图像。
2018/10/23
设置图像属性
在网页中插入图像后可通过属性面板对其属性进行修改等设置。
图像命名 图像大小 编辑图片 源文件设置
2018/10/23
文本说明 图像与文本的对齐 图像边距 图像边框
图像命名
为了在使用Dreamweaver行为 （如交换图像）或脚本撰写语言（如 JavaScript或VBScript）时可以引用该 图像，可在属性面板的“图像”文本框中为 图像命名。
2018/10/23
源文件设置
在属性面板的“源文件”文本框中显示了图像 的保存路径，如果要重新插入一幅新图像，可以在选 取图像后的属性面板中的“源文件”文本框中重新输 入要插入图像的地址，或单击右侧后的 图像。 按钮，在 打开的“选择图像源文件”对话框中重新选择需要的
2018/10/23
文本说明
在选取图像后的属性面板的“替换” 下拉列表框中可以输入图像的文本说明。
2018/10/23
图像与文本的对齐
选取图像后，在属性面板的“对齐”下 拉列表框中可设置处于同一行上的图像与文 本的对齐方式。
2018/10/23
图像边距
选取图像在属性面板的“垂直边距”和“水平边距”文本 框中可以设置图像与页面上方和左侧之间的距离，也可以设置 图像与其他网页元素之间的距离。