Upload
greentask
View
119
Download
3
Embed Size (px)
Citation preview
23/4/15 1
第 3 章 插入网页基本元素
本章要点 插入文字 插入图像 插入表格 插入媒体元素 插入表单
23/4/15 2
插入文字 在 Dreamweaver 中为网页插入文
本有两种方法: 直接输入文本 从其他文档中复制文本
23/4/15 3
插入特殊符号
将插入工具切换到“文本”工具组;
使用菜单“插入”→“ HTML” →“ 特殊字
符”。
23/4/15 4
插入特殊符号 插入换行符 使用 [Shift]+[Enter] 组合键
23/4/15 5
插入特殊符号 插入空格 ctrl + shift +空格 插入特殊符号,不换行空格
插入转义符
23/4/15 6
设置文字属性 进行设置时使用组合键 [Ctrl]+F3 或菜单“窗口”
“属性”打开属性面板。 设置字体大小 设置字体颜色 设置字体列表 【字体】【编辑字体列表】 单击+ 在可用字体中选则,单击《按钮
23/4/15 7
使用样式设置文字格式 【样式】选择 重命名、再进行修改。 把文字变为标题 在属性面板的格式中选择 设置文本对齐 在属性面板中设置 列表 在属性面板中进行设置
23/4/15 8
应用举例——设置网页文本格式
下面为“如果”网页中的文本进行格式设置,要求文本标题样式与正文不同,正文中某些文字需突出,以达到美化网页文本的目的。
23/4/15 9
网页效果图
23/4/15 10
插入滚动字幕1. 插入滚动字幕
( 1)单击编辑窗口上方的“拆分”按钮,将视图切换为拆分模式。
( 2)在下方的设计窗口中单击要插入滚动字幕的位置,此时注意查看代码窗口中光标的位置。
( 3)将插入工具栏设置为“常规”,单击标签选择器按钮,打开标签选择器对话框。 ( 4)在标签选择器对话框左边窗口逐级选择“ HTML 标签”→ “页元素”→“浏览器特定”,然后在右边窗口中单击“ marquee” ,再单击下面的“插入”按钮, marquee 标签被插入到代码中,按“关闭”按钮关闭对话框。 ( 5)在代码中出现 <marquee></marquee> ,在中间的两个尖括号“ ><” 之间输入要滚动的文字,如“欢迎访问励志学社的主页!” 。
23/4/15 11
设置滚动字幕的属性<marquee direction=“right”scrollamount=“8”scrolldelay=“110” lo
op=“2”Bgcolor=“#00ff00”Width=“200”Height=“100”> …………</
marquee>
direction 为滚动的目标方向,可选 right 、 left 、 up 、 down 。scrollamount 和 scrolldelay 为滚动数量和延迟,可设置滚动速度和间隔时间。loop 设置循环次数,小于 1 为连续循环。Bgcolor 设置滚动区域的背景颜色。width 和 height 设置滚动区域的大小,沿垂直方向( up 或 dow
n )滚动时,必须设置一定的高度值,否则看不到滚动的文字。
23/4/15 12
设置文本超级链接
1. 使用属性面板 设置超级链接
2.使用工具按钮
( 1 )插入超级链接 单击工具栏上的超级链接按钮
( 2 )插入邮件链接 链接目标是电子邮件地址时,单击工具栏上的电子邮件链接按钮
23/4/15 13
设置文本超级链接3 、设置下载文件的超级链接4 、创建外部链接 Http://www.baidu.com
5 、链接文字颜色的设置 通过页面属性来设置的。
23/4/15 14
使用锚记 设置锚记 使用锚记
23/4/15 15
插入水平线 水平线可用于页面上内容的分隔。
将工具按钮切换到“ HTML” ,单击水平线按钮
单击该水平线,可在属性面板中设置水平线的属性,如宽度、高度、对齐方式等。 水平线的颜色可以使用属性面板中的“快速标签编辑器”设置。值得注意的是水平线的颜色只能在预览时看出来。
23/4/15 16
插入图像 图像的格式 用于网页的图像通常只有 GIF 、 JPE 和 PNG 3 种格式。
图像的获取方法 图像文件的保存
23/4/15 17
插入图像 插入图像的步骤如下 :( 1)把工具栏切换到“常用”状态,然后单击“图像:
图象”按钮( 2)选择要插入的图像文件,在文件列表中单击一个
图象文件时,图象预览区会显示这个图象的缩略图。( 3 )单击确定按钮,如果图像文件在站点文件夹中,就会直接插入到网页中,同时在编辑窗口显示出图像。
23/4/15 18
设置图像的基本属性 改变图像大小 图文混排 垂直边距和水平边距 图像替代 图像边框
23/4/15 19
图片超级链接和图像地图
1. 图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击,就跳转到相应的目标网页,就需要使用图象地图。
( 1 )设置矩形热区( 2 )设置圆形热区( 3 )设置多边形热区
23/4/15 20
图像占位符和轮换图像1. 图象占位符
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形,在下拉式菜单中选择图像占位符按钮
单击工具栏上的图像按钮旁边的小三角形,在下拉式菜单中选择鼠标经过图像按钮
23/4/15 21
设置网页图片属性最终效果图
23/4/15 22
插入表格 添加表格 编辑表格 格式化表格 导入表格数据
23/4/15 23
插入表格插入表格表格的知识
表格由数个行与列组成的,行、列交叉组成表格
的单元格,可以在表格的单元格内插入各种信息,
包括文本、数字、链接,甚至是图像。
23/4/15 24
添加表格新建表格
修改表格属性
设置单元格属性
23/4/15 25
1. 新建表格
( 1 )将插入工具栏切换到“常用”模式,单击表格按钮
( 2 )在表格对话框中设置表格的样式。
( 3 )单击“确定”按钮就可以把表格插到网页中。
( 4 )在表格的各个单元格中分别输入内容。
23/4/15 26
2. 修改表格属性
高 背景颜色 边框颜色 背景图像 对齐设置
23/4/15 27
3. 设置单元格属性 文字(属性面板的上半部分) 水平 宽、高 垂直 标题 背景和背景颜色 边框
23/4/15 28
应用举例——在网页中插入表格并添加网页元素
下面为“繁花似锦”网页进行表格的添加和网页元素的添加。
23/4/15 29
最终效果图
23/4/15 30
编辑表格1. 合并单元格 拖动选中要合并的单元格,单击属性面板上的合并单元格按钮
2. 拆分单元格 在要拆分的单元格中单击,在单击属性面板上的拆分单元格按钮
3. 插入或删除行、列 使用菜单“插入”→“表格”菜单中的插入行或列,删除行或列进行相应的操作。
23/4/15 31
编辑表格实例 1 、绘制课本 51 页的表格。
23/4/15 32
插入图像预览效果图
23/4/15 33
格式化表格 在要格式化的表格中单击,再使用菜单“命令”→“格式化表格”打开格式化表格对话框。
23/4/15 34
导入表格数据1. 导出 Excel 数据为文本文件 在 Excel 中使用菜单“文件”→“另存为”打开另存为对话框,在“文件类型”中选择“文本文件(制表符分割)( *.tx
t )”,保存文件为 biaoge.txt 。
2. 导入位网页表格 将“插入”工具栏切换为“布局”模式,在右边单击表格数据按钮
选择数据文件为 Excel导出的文本文件 biaoge.txt ,定界符选“ Tab” 。表格宽度设置单元格的宽度,选择“匹配内容”。也可以制定宽度。
23/4/15 35
插入媒体元素 动态元素是一种重要的网页元素。这里我们
将学习在网页中插入动态元素,如 Flash影片、 Flash 按钮、 Flash 文本等,此外还将学习其他一些动态元素的插入方法。
23/4/15 36
插入媒体元素 媒体文件的类型 插入 Flash 制作播放电影、背景声音的页面
23/4/15 37
插入媒体元素 插入媒体元素媒体文件的类型1.RealVideo 的 .rm 、 .rmvb 视频影像格式和 .ra 的音频格式
2.Microsoft Media technology 的 .asf 格式
3. QuickTim 的 .mov 格式
4.Flash 的 .swf 格式
5.Metastream 的 .mts 格式
6.Authorware 的 .aam 多媒体教学课件格式
23/4/15 38
插入 Flash1. 插入 Flash 动画
将插入工具栏切换到“常用”模式,单击“媒体: Flash” 按钮
2. 插入 Flash 按钮
将插入工具栏切换到“常用”模式,单击“媒体: Flash” 按钮旁边的三角形,在菜单中选择“媒体: Flash 按钮”按钮
3. 插入 Flash 文本
将插入工具栏切换到“常用”模式,单击“媒体: Flash” 按钮旁边的三角形,在菜单中选择“媒体: Flash 文本”按钮
23/4/15 39
制作播电影、声音的页面1. 插入插件 ( 1 )将插入工具栏切换到“常用”模式,单击“媒体: Fla
sh” 按钮旁边的三角形,在菜单中选择“媒体: Flash 文本”按钮
( 2 )选择一个要插入网页的电影格式的文件
( 3 )在编辑窗口中看到插入了一个灰色矩形插件标志,调整其大小可调整网页中的播放窗口的大小。
( 4 )单击属性面板上的“参数”按钮,可设置各种播放参数。
23/4/15 40
2. 插入背景声音
( 1)将插入工具栏设置为“常规”,单击标签选择器按钮
( 2)在标签选择器对话框左边窗口逐级选择“ HTML 标签”→ “页元素”→“浏览器特定”,然后在右边窗口中单击“ bgsound” ,再单击下面的“插入”按钮,打开“标签编辑器 --bgsound” 对话框。
( 3)在“源”中指定背景音乐文件,可以是 .wav 、 .mid 或 .
mp3 格式的音频文件。
( 4)在“循环”栏指定网页调入时背景音乐的播放次数,选择“无限( -1 )”循环播放。其他选项根据需要设置。
( 5)单击“确定”,背景音乐就插入到网页中。关闭标签选择器对话框。
23/4/15 41
插入表单 文本字段 复选框 单选按钮 下拉式菜单 隐藏区域 按钮
23/4/15 42
表 单 简 介 在网上浏览时常会遇到要求填写资料或提供
信息的页面,如申请 QQ号码时填写个人信息的页面,网上购物时填写的购物单等,这些页面即是表单页面。表单通常由多个表单对象组成,如单选按钮、复选框、文本字段以及按钮等,网站管理员可以通过表单从浏览者处收集需要的信息,从而实现信息的传递。
43 23/4/15
表单的工作原理
表单支持客户端 -服务器关系中的客户端。当访问
者在 Web 浏览器中显示的表单中输入信息,然后
单击提交按钮时,这些信息将被发送到服务器,服
务器端脚本或应用程序在该处对这些信息进行处理。
用于处理表单数据的常用服务器端技术包括 Macro
media ColdFusion 、 Microsoft Active Server Pag
es ( ASP )和 PHP 。
图 6-60 表单的组成对象
23/4/15 44
一个实例一个实例
制作一个个人简制作一个个人简
历调查表,收集个历调查表,收集个
人的资料。该调查人的资料。该调查
表是表单应用的典表是表单应用的典
型实例。型实例。 实例效果
23/4/15 45
创建表单 将插入工具栏切换到“表单”模式,单击
创建表单按钮
插入的表单区域用红色虚线表示,后面插入
的所有表单元素都要插入到这个虚线中。
23/4/15 46
文本字段1. 单行文本 在表单中输入“用户名”,在单击工具栏上的文本字段按钮
2. 密码 密码输入区用于用户输入密码信息,用户在此区域输入的所有字符都显示为“ *” 或黑点。
3. 多行文本
在单击工具栏上的文本区域按钮
23/4/15 47
复选框单击工具栏上的复选框按钮
单选按钮1. 单选按钮
单击工具栏上的单选按钮按钮
2. 单选按钮组
单击工具栏上的单选按钮组按钮
23/4/15 48
下拉菜单1. 列表 /菜单
单击工具栏上的列表 / 菜单按钮
2. 跳转菜单在工具栏上单击跳转菜单按钮
23/4/15 49
隐藏区域在工具栏上单击隐藏域按钮
在网页中插入一个隐藏域标志
按钮在工具栏上单击按钮按钮