《网页设计与制作》第三章:插入网页基本元素[1]
合集下载
网页设计与制作(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样式面板中单击附加样式按钮,可以将一个现成的样式链接到当前网页中使用。
《网页设计与制作》第三章:插入网页基本元素[1]
进行设置时使用组合键[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
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
李强网页设计与制作第三章:插入网页基本元素.
文本字段 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 页面链接的处理
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
2011-6-19
8
网页效果图
2011-6-19
9
插入滚动字幕
1.插入滚动字幕 1.插入滚动字幕
(1)单击编辑窗口上方的“拆分”按钮,将视图切换为拆分模式。 ) (2)在下方的设计窗口中单击要插入滚动字幕的位置,此时注意查看代码 ) 窗口中光标的位置。 (3)将插入工具栏设置为“常规”,单击标签选择器按钮,打开标签选择 ) 器对话框。 (4)在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页元 ) 素”→“浏览器特定”,然后在右边窗口中单击“marquee”,再单击下 面的“插入”按钮,marquee标签被插入到代码中,按“关闭”按钮关闭 对话框。 (5)在代码中出现<marquee></marquee>,在中间的两个尖括号 )
2011-6-19
也可以制定宽度。
34
插入媒体元素
动态元素是一种重要的网页元素。这里我们 将学习在网页中插入动态元素,如Flash影片、 Flash按钮、Flash文本等,此外还将学习其 他一些动态元素的插入方法。
2011-6-19
35
插入媒体元素
媒体文件的类型 插入Flash 制作播放电影、背景声音的页面
2011-6-19 11
设置文本超级链接
1.使用属性面板 1.使用属性面板 设置超级链接 2.使用工具按钮 2.使用工具按钮
(1)插入超级链接 单击工具栏上的超级链接按钮 (2)插入邮件链接 链接目标是电子邮件地址时,单击工具栏上的电子邮件链接按钮
2011-6-19 12
设置文本超级链接
3、设置下载文件的超级链接 4、创建外部链接 5、链接文字颜色的设置 通过页面属性来设置的。
2011-6-19
15
插入图像
图像的格式 用于网页的图像通常只有GIF、JPE和PNG 3种格式。 图像的获取方法 图像文件的保存
2011-6-19
16
插入图像
插入图像的步骤如下 : (1)把工具栏切换到“常用”状态,然后单击“图像: 图象”按钮 (2)选择要插入的图像文件,在文件列表中单击一个 图象文件时,图象预览区会显示这个图象的缩略图。 (3)单击确定按钮,如果图像文件在站点文件夹中, 就会直接插入到网页中,同时在编辑窗口显示出图 像。
2011-6-19 17
设置图像的基本属性
改变图像大小 图文混排 垂直边距和水平边距 图像替代 图像边框
2011-6-19
18
图片超级链接和图像地图
1.图片超级链接 1.图片超级链接 2.图像地图 2.图像地图
如果想在一个图像的不同位置上点击,就跳转到相应的 目标网页,就需要使用图象地图。 (1)设置矩形热区 (2)设置圆形热区 (3)设置多边形热区
将插入工具栏切换到“常用”模式,单击“媒体:Flash”按钮旁边 的三角形,在菜单中选择“媒体:Flash按钮”按钮
3.插入Flash文本 3.插入Flash文本 插入Flash
将插入工具栏切换到“常用”模式,单击“媒体:Flash”按钮旁边
2011-6-19 的三角形,在菜单中选择“媒体:Flash文本”按钮 38
2011-6-19
图6-60 表单的组成对象 Pages(ASP)和PHP。
43
一个实例 制作一个个人简 历调查表, 历调查表,收集个 人的资料。该调查 人的资料。 表是表单应用的典 型实例。 型实例。 实例效果
2011-6-19
44
创建表单
将插入工具栏切换到“表单”模式,单击 创建表单按钮
2011-6-19
列,删除行或列进行相应的操作。
30
编辑表格
实例1、绘制课本51页的表格。
2011-6-19
31
插入图像预览效果图
2011-6-19
32
格式化表格
在要格式化的表格中单击,再使用菜单“命令”→“格 式化表格”打开格式化表格对话框。
2011-6-19
33
导入表格数据
导出Excel Excel数据为文本文件 1. 导出Excel数据为文本文件
2011-6-19 39
2.插入背景声音 2.插入背景声音
(1)将插入工具栏设置为“常规”,单击标签选择器按钮 ) (2)在标签选择器对话框左边窗口逐级选择“HTML标签”→ “页 ) 元素”→“浏览器特定”,然后在右边窗口中单击“bgsound”,再 单击下面的“插入”按钮,打开“标签编辑器--bgsou件,可以是.wav、.mid或.mp3 ) 格式的音频文件。 (4)在“循环”栏指定网页调入时背景音乐的播放次数,选 ) 择“无限(-1)”循环播放。其他选项根据需要设置。 (5)单击“确定”,背景音乐就插入到网页中。关闭标签选择器 )
2011-6-19
26
3.设置单元格属性 3.设置单元格属性
文字(属性面板的上半部分) 文字(属性面板的上半部分) 水平 宽、高 垂直 标题 背景和背景颜色 边框
2011-6-19
27
应用举例——在网页中插入表格并添加网页元素
下面为“繁花似锦”网页进行表格的添加和 网页元素的添加。
2011-6-19
2011-6-19
13
使用锚记
设置锚记 使用锚记
2011-6-19
14
插入水平线
水平线可用于页面上内容的分隔。 将工具按钮切换到“HTML”,单击水平线按钮 单击该水平线,可在属性面板中设置水平线的属性,如宽 度、高度、对齐方式等。 水平线的颜色可以使用属性面板中的“快速标签编辑器” 设置。值得注意的是水平线的颜色只能在预览时看出来。
第3章 插入网页基本元素
本章要点 插入文字 插入图像 插入表格 插入媒体元素 插入表单
2011-6-19 1
插入文字
在Dreamweaver中为网页插入文本 有两种方法: 直接输入文本 从其他文档中复制文本
2011-6-19
2
插入特殊符号
将插入工具切换到“文本”工具组; 使用菜单“插入”→“HTML” →“特殊字符”。
28
最终效果图
2011-6-19
29
编辑表格
1.合并单元格 1.合并单元格
拖动选中要合并的单元格,单击属性面板上的合并单 元格按钮
2.拆分单元格 2.拆分单元格
在要拆分的单元格中单击,在单击属性面板上的拆 分单元格按钮
3.插入或删除行、 3.插入或删除行、列 插入或删除行
使用菜单“插入”→“表格”菜单中的插入行或
制作播电影、声音的页面
1.插入插件 1.插入插件
(1)将插入工具栏切换到“常用”模式,单击“媒体: Flash”按钮旁边的三角形,在菜单中选择“媒体:Flash文本” 按钮 (2)选择一个要插入网页的电影格式的文件 (3)在编辑窗口中看到插入了一个灰色矩形插件标志,调整 其大小可调整网页中的播放窗口的大小。 (4)单击属性面板上的“参数”按钮,可设置各种播放参数。
2011-6-19 19
图像占位符和轮换图像
1. 图象占位符
单击工具栏上的图像按钮旁边的小三角形,在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像 2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形,在下拉式菜单中选择鼠 标经过图像按钮
2011-6-19 20
设置网页图片属性最终效果图
2011-6-19 “><”之间输入要滚动的文字,如“欢迎访问励志学社的主页!”
。
10
设置滚动字幕的属性
<marquee direction=“right”scrollamount=“8”scrolldelay=“110” loop=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> ………… </marquee> direction为滚动的目标方向,可选right、left、up、down。 scrollamount 和scrolldelay为滚动数量和延迟,可设置滚动速度 和间隔时间。 loop设置循环次数,小于1为连续循环。 Bgcolor设置滚动区域的背景颜色。 width 和height设置滚动区域的大小,沿垂直方向(up或down) 滚动时,必须设置一定的高度值,否则看不到滚动的文字。
2011-6-19 42
表单的工作原理 表单支持客户端-服务器关系中的客户端。当访问 者在Web浏览器中显示的表单中输入信息,然后单 击提交按钮时,这些信息将被发送到服务器,服务 器端脚本或应用程序在该处对这些信息进行处理。 用于处理表单数据的常用服务器端技术包括 Macromedia ColdFusion、Microsoft Active Server
2011-6-19
24
1.新建表格 1.新建表格
(1)将插入工具栏切换到“常用”模式,单击表格按钮 (2)在表格对话框中设置表格的样式。 (3)单击“确定”按钮就可以把表格插到网页中。 (4)在表格的各个单元格中分别输入内容。
2011-6-19 25
2.修改表格属性 2.修改表格属性
高 背景颜色 边框颜色 背景图像 对齐设置
2011-6-19 6
使用样式设置文字格式 【样式】选择 重命名、再进行修改。 把文字变为标题 在属性面板的格式中选择 设置文本对齐 在属性面板中设置 列表 在属性面板中进行设置
2011-6-19
7
应用举例——设置网页文本格式
下面为“如果”网页中的文本进行格式设置, 要求文本标题样式与正文不同,正文中某些 文字需突出,以达到美化网页文本的目的。
2011-6-19
6.Authorware的.aam多媒体教学课件格式 6.Authorware的.aam多媒体教学课件格式
37
插入Flash
1.插入Flash动画 1.插入Flash动画 插入Flash