当前位置：文档之家 › 《网页设计及制作》第三章插入网页基本元素

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

  • 格式：ppt
  • 大小：1.27 MB
  • 文档页数：49

下载文档原格式

  / 49

合集下载

网页设计与制作(Dreamweaver)《插入网页基本要素之文本与样式》

网页设计与制作(Dreamweaver)《插入网页基本要素之文本与样式》

斜体 强调 块引用
标题
编号列表定义列表 定义说明 首字母缩写词
粗体 加强
段落 已编排格式
项目列表 列表项 定义术语 缩写 字符
插入网页基本要素之文本与样式
添加空格和段落
插入空格
空格的添加：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样式面板中单击附加样式按钮，可以将一个现成的样式链接到当前网页中使用。

第三章插入基本网页元素精品PPT课件

第三章插入基本网页元素精品PPT课件

3.1.4 设置文本超级链接
1.使用属性面板设置超 级链接
2.使用工具按钮
（1）插入超级链接 单击工具栏上的超级链接按钮
注：若链接的对象在站点外部，必电子邮件地址时，单击工具栏上的
电子邮件链接按钮
设置网页元素的链接目标
_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。 _top：目标网页的内容在最顶层框架窗口中显示。
2.设置图象的基本属性
（1）改变图像大小 拖动图像上的3个控制点可以随意改变图像的大小，拖动时，属性面板
上的长、宽数值也作相应的改变。 （2）图文混排
图像和文字在同一行时，使用属性面板上的对齐属性可以设置图文的混 排方式。 （3）垂直边距和水平边距
垂直边距和水平边距栏设置图像和周围的文字的距离，单位为像素。
（4）图像替代 在图像替代栏输入图片的文字说明，当浏览器关闭图像显示时，图像方
框中会出现说明文字，当鼠标移动到图像上面时，也会显示替代文字。
（5）图像边框 在边框栏输入一个数字可设置图像的边框，默认的边框值为0。边框线
的颜色不能更改，通常将边框值设为1，可以美化图像
3.2.1 网页中的图像
1.图像的作用
网页中的图像分为正文图像和装饰图像。
2.图像的格式
Dreamweaver 8和大多数浏览器一样支持使用JPEG和GIF 图像。
3.图像文件的保存
网页中的图像不和网页保存在一个文件中，而是单独的图像 文件。常见的是将装饰文件保存在images文件夹中，将正文图 像保存在pics文件夹中。
（5）在代码中出现<marquee></marquee>，在中间的两个尖括 号“><”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。

网页设计与制作(Dreamweaver)《插入网页基本要素之多媒体内容》

网页设计与制作(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 文档编辑区的上方和左侧。 标尺的单位包括像素、厘米和英寸，在 默认状态下使用像素为单位。
网格
网格与标尺都是定位工具，但在网页布局中 使用网格更方便。文档编辑区中显示了网格 后，就可以对网页元素进行准确定位。
第二节
一、图像文件的类型
2、文本属性(文本属性即文字的大小、字形、颜色等格式)
(1)基本样式设置
[属性面板]
格式： 段落 标题1—标题6（从大到小） 预先格式化 字体： 字体的编辑 字符的颜色、大小、加粗倾斜等 (2)段落属性设置 对齐方式 缩进与凸出
二、列表的使用 列表：将具有先后顺序或相似特性的几行文 字进行对齐排列，而且在左侧添加编号或符号。
插入特殊字符
在Dreamweaver中编辑文本时，往往会遇到一 些无法通过键盘直接输入的特殊字符，如版权 符号©、注册商标符号®等，可以通过插入特殊 字符的功能进行插入。
在字符之间添加空格
Dreamweaver中文档格式都是以HTML编码形 式存在的，而HTML编码中只允许字符之间包含 一个空格，所以在Dreamweaver中无论按多少 次空格键都只会输入一个空格。
为现有文本创建列表
除了先创建列表项再输入文本外，还可以先 输入文本，然后再设置列表项。 1、创建列表 （1）将光标停在要插入列表的地方，单击属

第三章 网页元素的添加-ppt课件

第三章 网页元素的添加-ppt课件

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
图像边距
选取图像在属性面板的“垂直边距”和“水平边距”文本 框中可以设置图像与页面上方和左侧之间的距离，也可以设置 图像与其他网页元素之间的距离。

网页设计与制作 第3章 基本页面元素

网页设计与制作 第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章插入网页基本元素

网页设计与制作第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
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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