Dreamveaver网页教案.docx
- 文档编号:29802252
- 上传时间:2023-07-27
- 格式:DOCX
- 页数:40
- 大小:46.15KB
Dreamveaver网页教案.docx
《Dreamveaver网页教案.docx》由会员分享,可在线阅读,更多相关《Dreamveaver网页教案.docx(40页珍藏版)》请在冰豆网上搜索。
Dreamveaver网页教案
Dreamveaver网页
第一节
一.网络的相关名词
网页:
在浏览器中打开的一个窗口界面.
网站:
网页的集合,同时网站又是信息服务类企业的代名词.
二.网页的基本框架结构
网页标题:
网页标识:
页眉:
导航:
内容:
页脚
三.网页的相关元素
文本和图片:
超链接:
动画:
表单:
声音和视频:
四.安装与启动
五.起始页
六.简介
七.操作界面
八.界面组成
九.窗口的组成和面板概述
1.标题栏
2.菜单栏
3.插入栏
“插入”栏按以下的类别进行组织:
“常用”类别使您可以创建和插入最常用的对象,例如图像和表格。
“布局”类别使您可以插入表格、div标签、层和框架。
您还可以从三个表格视图中进行选择:
“标准”(默认)、“扩展表格”和“布局”。
当选择“布局”模式后,您可以使用Dreamweaver布局工具:
“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的HTML标签。
“服务器代码”类别仅适用于使用特定服务器语言的页面,这些类别中的每一个都提供了服务器代码对象,您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素,例如记录集、重复区域以及记录插入和更新表单。
“Flash元素”类别使您可以插入Flash元素。
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
4.文档工具栏
文档工具栏中包含按钮,这些按钮使您可以在文档的不同视图间快速切换:
“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
以下对选项进行说明:
显示代码视图 仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图,而在另一部分中显示“设计”视图。
当选择了这种组合视图时,“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。
请使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图 仅在“文档”窗口中显示“设计”视图。
标题 允许您为文档输入一个标题,它将显示在浏览器的标题栏中。
如果文档已经有了一个标题,则该标题将显示在该区域中。
没有浏览器/检查错误 使您可以检查跨浏览器兼容性。
文件管理 显示“文件管理”弹出菜单。
在浏览器中预览/调试 在浏览器中预览或调试文档。
从弹出菜单中选择一个浏览器。
刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项 允许您为“代码”视图和“设计”视图设置选项。
5.文档窗口
6.状态栏
7.标签选择器:
用于快速选择页面元素。
标签选择器显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签以选择该标签及其全部内容。
比如:
单击
可以选择文档的整个正文。窗口大小弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
缩放工具可放大或缩小图片,ALT+缩放工具可缩小图片。
CTRL+“+”也可。
8.属性检查器
9.面板组:
隐藏或显示面板组可用F4.
第三节
一.网页设计三原则
1.先建站点2.尽量用英语名3.保存文件
二.创建本地网站一般步骤:
1.确定目标2.确定群体3.注意区分浏览器4.安排站点结构5设计导航方案6.网页设计7.资源准备
二.网站的规则
1.计划和准备:
包括设计网页站点
2.创建网页:
调整网页布局,添加内容
3.根据需要编辑代码
4.将网页链接在一起
5.预览和发布站点
三.定义网页站点
站点—管理站点—新建—站点
四.站点面板介绍
五.利用站点地图管理站点
第四节
一.文本编辑
1.添加文本
2.设置文本字体
3.编辑字体
4.更改字体样式
5.更改字体大小
6.对齐文本
7.更改文本颜色
8.插入特殊字符
9.目标:
blank:
在新的浏览窗口中打开链接文档
Parent:
在本链接的父框架中打开链接文档
Self:
在本链接的页面中打开链接文档
Top:
用当前的窗口打开链接文档,并且关闭原来窗口中的全部内容
二.设置文本段落
1.设置段落格式
2.缩进文本和取消缩进
3.创建列表
4.创建嵌套列表
三.页面设置
1.修改-页面属性
2.属性面板-页面属性
3.CTRL+J
第五节插入图像
一.关于图像
1.GIF:
最多256颜色,适合显示色调不连续的、单一颜色图像
2.JPEG:
包含数百万种颜色
3.PNG:
可保留文件所有原始层,颜色等,保持所有元素都可编辑
二.插入图像
1.插入—图像
2.常用插入栏—图像按钮—图像
三.编辑图像,属性栏设置
四.插入图像占位符,是准备好最终图形,添加到WEB页之前使用
1.插入—对像对像—图像占位符
2.常用插入栏—图像按钮—图像占位符
3.图像占位符属性设置
五.创建鼠标经过图像
1.插入—图像对象—鼠标经过图像
2.常用插入栏—图像按钮—鼠标经过图像
六.图像热点区域
1.常用插入栏—图像按钮—图像热点
作业:
制作相册
第六节链接
一.HTTP与URL
HTTP:
是超文本传输协议,用来在网络上传输数据,也就是传输WWW上的信息资源,以方便在服务器和客户端之间进行通信.
URL:
是统一资源定位器,给INTERNET上的每一个文档标定了一个惟一的地址,类似现实生活中的门牌号.URL保证了对资源的定位,使系统能对网络资源进行各种操作.URL的形式随使用的协议的不同而不同,例如:
HTTP:
//WWW.163.COM就是一个使用HTTP的URL.
二.文档位置和路径
1.绝对路径:
提供所有链接的完整URL
绝对链接的特点:
路径与链接的源端点无关。
只要网站的地址不变,无论文档在站点中如何移动,都可以正常实现跳转而不会发生错误。
但是这种方式,的链接不利于测试和站点的移植
例:
2.文档相对路径:
相对路径可以表述源端点和目标端点之间的相互位置,它同源端点的位置密切相关。
如果链接中源端点和目标端点位于同一目录下,则在链接路径中只需要指明目标端点的名称就可以了。
如果在链接中源端点和目标端点不位于同一个目录下,则只需要将目录的相对关系表达出来就可以了
同一目录的文件(直接输入名称)
下一级目录(目录名/文件名)
上一级目录(../文件名)
3.站点根目录相对路径(/目录名/文件名)
三.创建链接的类型
(一)链接到其他文档
1.属性栏—浏览文件按钮
2.属性栏—指向文件按钮
3.按住shift键拖动选定内容到指定文件
(二)命名链接
1.创建锚记:
插入—命名锚记
2.输入名称:
区分大小写
3.链接锚记:
属性栏—指向文件按钮
(三)电子邮件链接
1.插入—电子邮件链接
2.常用插入栏—电子邮件链接按钮
3.在属性栏中直接输入email链接(mailto:
邮箱地址)
4.特殊电子邮件链接:
mailto:
guan@?
subject=咨询问题&cc=jin@&bcc=juan@
(四)空链接和脚本链接(javescript)
1.空链接:
在链接里输入#
2.脚本链接:
alert(“欢迎光临“)
(五)创建超链接
1.插入超链接
(1)选择“插入”——“超级链接”命令。
(2)使用CTRL+L组合键。
(3)单击鼠标右键——“创建链接”
(4)“修改”——“创建链接”
2.创建热点链接(只对图片)
3.下载链接的创建
四.删除超级链接
1.选中超级链接——“修改”——“移除链接”
2.Alt+Shift+L
3.将属性栏中的链接地址删除。
五.作业:
地图的链接网页内文字链接
第七节表格
一.创建表格
(一)插入表格
1.插入—表格
2.常用插入栏—表格按钮
(二)添加内容
(三)使用键盘移动光标
1.按tab键:
移动到下一个单元格
2.按tab键在最后一个单元格会自动添加一行
3.shift+tab键:
移到上一个单元格
4.按方向键上下左右移动
(四)设置表格属性
二.选择表格元素
(一)选择表格
1.单击表格左上角
2.在表格的右或下边缘单击
3.在单元格内边框上单击
4.修改—表格—选择表格
(二)选择行或列
1.在表格左侧或上端单击
2.鼠标拖动可选择多行多列
(三)选择单元格
1.多个连续:
shift
2.多个不连续:
ctrl
(四)设置行和列属性
三.调整表格大小
四.添加或删除行或列
(一)添加行或列
1.插入—表格对象—行(Ctrl+M)或列(Ctrl+Shift+A)
2.修改—表格—插入行或列
(二)删除行或列
修改—表格—删除行(Ctrl+Shift+M)或列(Ctrl+Shift+-)
(三)通过属性栏添加或删除行或列
五.拆分及合并单元格
(一)拆分单元格(Ctrl+Alt+S)
1.修改—表格—拆分单元格
2.修改—表格—增加行高或列宽(Ctrl+Shift+])
(二)合并单元格(Ctrl+Alt+M)
3.修改—表格—合并单元格
4.修改—表格—减少行高或列宽(Ctrl+Shift+[)
六.嵌套表格
七.编辑行或列
编辑—复制、剪切、粘贴
八.自动套用表格格式
命令—格式化表格
九.对表格进行排序
命令—排序表格
十.导入表格式数据
插入—表格对象—表格式数据
十一.导出表格数据
文件—导出—表格
第八节布局模式
一.对页进行布局
1.查看—表格模式—布局模式
2.布局插入栏—布局模式按钮
二.布局单元格和表格
(一)绘制布局表格
1.单击控制“布局表格“按钮
2.绘制多个:
ctrl+拖动
(二)绘制布局单元格
1.单击控制“布局单元格“按钮
2.绘制多个:
ctrl+拖动
三.嵌套布局表格
1.绘制布局表格
2.在空白区域拖动绘制嵌套布局表格
四.设置属性
1.设置布局表格属性
2.设置布局单元格属性
五.使用dreamweaver的网格
1.查看—网格—显示网格
2.改变网格设置
六。
添加内容
七.清除单元格高度
1.在标题栏中单击—清除所有高度
2.在属性面板—清除行高
八.移动和调整单元格大小
(一)调整大小:
拖动单元格手柄调整大小
(二)移动单元格
1.鼠标拖动
2.方向键:
移动1个像素
3.shift+方向键:
移动10个像素
九.调整和移动表格大小
嵌套表格可移动
十.设置布局模式参数
编辑—首先参数—布局模式
第九节框架
一.框架集和框架集的概念区
(一)框架:
就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页,框架由两个主要部分—框架集和单个框架
(二)框架集:
在一个文档内定义一组框架结构的HTML网页
二.创建框架集
(一)创建自定义框架集
1.修改—框架集
2.按住alt键从一个角曳框架,可把文档划分为4个框架
(二)插入预定义框架集
1.布局插入栏—框架按钮
2.插入—HTML—框架
(三)创建嵌套框架集
1.修改—框架集
2.插入—html—框架
3.按住ALT键拖动框架的边框拖曳
三.删除框架.
(一)删除框架
将框架边框拖到父框架的边框上或拖离页面。
(二)删除框架集
1.关闭显示它的窗口
2.已保存,则删除文件。
四.选择框架和框集
(一)在框架面板中选择。
1.单击一个框架,可选择该框架
2.单击环绕框架的边框,可选择框架集。
(二)在文档窗口选择
1.按住ALT键单击,可选择该框架
2.单击框架边缘,可选择框架集。
(三)选择不同的框架和框架集
1.同级的框架:
ALT+左或右箭头
2.选择父框架集:
ALT+上箭头
3.选择子框架:
ALT+下箭头
五.设置框架属性
第十节层
一.层的特点
1.层是一种网页元素定位技术,使用层可以以像素为单位精确定位页元素。
2.层可以放置在页面的任一位置。
3.把页面元素放入层中,可以控制元素的显示顺序。
二.层的分类
1.CSS层:
利用《div》或《span》标记构建的分层。
2.NS层:
使用《layer》或《ilayer》标记构建的分层。
三.使用浏览层
1.在IE4.0和NS4.0或更高均支持DIV和SPAN标高建立的层。
2.而layer和ilayer只有NS4.0浏览器支持
四.创建层
(一)创建普通层
1.插入层:
插入—布局对像—层
2.拖动层:
把层直接从布局栏中拖动到文档
3.绘图层:
单击布局工具栏层按钮绘画
(二)绘制多层
按住Ctrl键在窗口中连续画层
五.设置层属性
单个层的属性:
1.层编号:
指定一个名称
2.左和上:
指定层相对于页面或父层左上角的位置
3.宽和高:
指定层的宽度和高度
4.Z轴:
指定层的Z索引,Z编号较大的层出现在编号较小的层的上面,编号可正、可负。
5.可见性:
决定层的初始显示状态
默认:
default继承:
inherit
可见:
visiable隐藏:
hidden
6.背景图像:
指定层的背景图像
7.背景颜色:
指定层的背景颜色
8.溢出:
指定层的内容超过它的大小时的设置
可见:
visible隐藏:
Hidden
滚动:
scroll自动:
auto
9.剪辑:
定义层的可见区(设置内容与层边界的距离)
六.层的操作
(一)激活层
鼠标单击层的任何位置
(二)插入对象
将插入点放入层中插入对象
(三)选择层
1.选择单个层:
鼠标单击
2.选择多个层:
shift键+单击
3.层面板:
窗口——层
(四)调整层的大小
1.鼠标拖动改变大小
2.选择层:
Ctrl+方向键
3.Ctrl+shift+方向键移动10个像素
4.在属性设置宽和高
(五)设置多层
1.修改—对齐—设成高度/宽度相同
2.选择多层:
在属性中设置宽度和高度
(六)嵌入和分离层
利用层面板嵌套分离层:
Ctrl+拖动
(七)移动层
1.拖动选择层设置目标位置
2.方向键:
移动1个像素
3.shift+方向键:
移动10个像素
(八)对齐层
1.选择要对齐的层
2.修改——对齐
3.以最后选择的层为基准对齐。
注:
对齐层时,嵌套层中的子层随父层的移动而移动。
七.改变层的可见性
1.打开层面板
2.单击层名称前的眼睛
八.把层转换为表格
修改——转换——层到表格
1.表格布局
最精确:
为每一层建立一个表格单元,以及为层与层之间的间隔附加单元格
最小:
合并空白单元格,几个层被定位在指定的像素之内,这些层边缘对齐
使用透明GIFS:
用透明的GIF图像添充表格最后一行
置于页面中央:
使生成的表格在页面层中对齐
2.布局工具
防止层重叠
显示层面板
显示网格
靠齐到网格
第十一节层实例制作
时间轴根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面,在时间轴中包含了制作动画时所必须的各种功能。
1、时间轴的各项功能
(1)时间轴弹出菜单:
表示当前的时间轴名称。
(2)时间轴指针:
在界面上显示当前位置的帧。
(3)不管时间轴在哪个位置,一直移动到第一帧。
(4)表示时间指针的当前位置。
(5)表示每秒显示的帧数。
默认值时15帧。
增加帧数值,则动画播放的速度将加快。
(6)自动不放:
选中该项,则网页文档中应用动画后自动运行。
(7)LOOP(循环):
选中该项,则继续反复时间轴上的动画。
(8)行为通道:
在指定帧中选选择要运行的行为。
(9)关键帧:
可以变化的帧。
(10)图层条:
意味着插入了“层”等对象。
(11)图层通道:
它是用于编辑图层的空间。
2、在DW8中显示时间轴
选择菜单栏的窗口/时间轴或按快捷键Alt+F9,则显示时间轴。
四、创建时间轴动画
时间线只能移动分层对象,如果想移动文本或图像之类的对象,可以将其放在层中。
实例一:
显示/隐藏层
1.打开ch10目录下的layer.htm文档
2.打开层控制面板,将d1眼睛打开
3.定位d1的位置:
左=370上=190宽=400高=100
4.将所有层眼睛打开
5.设置层宽度/高度相同
6.修改—对齐—左对齐和对齐上缘,将所.
7.选择下方第一个单元格
8.窗口—行为,打开行为面板—显示/隐藏层
9.选择层d1设为显示,选择Onmorseover事件
10.选择层d1设为显示,选择onmorseout事件
11.重复7—10步骤,设置层d2—d5
实例二:
拼图游戏
1.在fireworks中制作图片切片分割
2.将文件导出仅图片,以切割的方式输出
3.在fireworks中,将界面清除
4.用填色工具把界面分成四个区域
5.文件导出仅图像,不以切割的方式
6.在Drdamweaver层中插入背景图
7.再将四个图像分别置于四个图层中
8.单击
标签,执行行为—拖动层9.设置拖动图内容
alert(“不错,快成功了!
“)
10.用鼠标拖动将图层与底图分开
第十二节动画与多媒体
一.插入动画
(一)插入FLASH电影
1.插入—媒体—FLASH
2.常用工具栏—媒体按钮—FLASH
(二)属性设置
1.名称:
指定电影的名称
2.宽/高:
指定电影的大小
3.文件:
指定FLASH电影文件的路径
4.编辑:
打开FLASH对电影进行编辑
5.重设大小:
重置到原始大小
6.循环:
电影可以无限循环播放
7.自动播放:
当网页载入时自动播放电影
8.垂直/水平:
指定电影四周的空的空间
9.品质:
播放动画时的质量
10.比例:
播放动画显示方式
11.对齐:
指定电影和页面的对齐方式
12.背景颜色:
指定电影区域的背景颜色
13.播放:
可以观看播放效果
二.插入shockwave电影
(一)插入shockwave电影
1.插入—媒体—shockwave
2.常用工具栏—媒体按钮—shockwave
(二)属性设置
4.名称:
指定电影的名称
5.宽/高:
指定电影的大小
6.文件:
指定shockwave电影的路径
7.播放:
可以观看播放效果
8.垂址/水平:
指定电影四周的空白空间
9.对齐:
指定电影和页面的对齐方式
10.背影颜色:
指定电影区域的背影颜色
三.插入applet(java小程序)
(一)插入applet(java小程序)
2.插入—媒体—applet
3.常用工具栏—媒体按钮—applet
(二)属性设置
1.名称:
指定电影的大小
2.宽/高:
指定电影的大小
3.代码:
指定java小程序的主程序名
4.对齐:
指定电影和网页面的对齐方式
5.替代:
浏览器不支持时显示的内容
6.垂直/对齐:
指定电影四周的空白空间
7.基址:
指定包含程序的文件夹
四.插入ActiveX对象
(一)插入ActiveX对象
1.插入—媒体—ActiveX对象
2.常用工具栏—媒体按钮—ActiveX
(F一)属性设置
五.插入“插件“
(一)插入“插件“
1.插入—媒体—插件
2.常用工具栏—媒体按钮—插件
(二)属性设置
六.使用FLASH文本
(一)插入FLASH文本对象
1.插入—媒体—FLASH文本
2.常用工具栏—媒体按钮—FLASH文本
(二)对话框设置
1.字体大小:
设置文本字体/大小
2.设置样式及对齐方式
3.颜色:
设置文本颜色
4.转滚颜色:
鼠标停留时的文本颜色
5.文本:
输入文本内容
6.链接:
输入文本的链接路径
7.目标:
为链接设置一个目标窗口
8.背景色:
为文本背景设置颜色
9.另存为:
输入FLASH电影的文件名
七.使用FLASH按钮
(一)插入FLASH按钮
1.插入—媒体—FLASH按钮
2.常用工具栏—媒体按钮—FLASH按钮
(二)对话框设置
第十三节行为
(一)
一.相关概念
行为:
行为是Macromedia预置的Javescript程序库
事件:
则是由浏览器为每个页面元素定义的
动作:
是预先编写好的Javescript脚本,执行指定行为
二.附加行为
(一)附加行为
1.选中要附加行为的对象
2.打开行为面板,添加行为
3.设置参数,单击确定
4.在事件菜单中选取相应事件
(二)修改行为
1.选择一个附加行为的元素
2.单击减号删除行为
3.双击行为改变动作参数
三.行为应用
(一)调用Javescript动作
允许使用“行为“面板指定当事件发生时,应该执行的自定义函数
例:
为按钮添加Javescript动作
1.选择附加行为的按钮或文本
2.行为—动作—调用Javescript
3.键入Javescript函数:
alert(“欢迎来到我的网页“)
4.事件:
onmouseover
(二)改变属性:
改变某个对象的属性
例:
改变文本域属性
1.选择图片
2.行为—动作—“改变属性“
3.设置对话框:
对象类型:
IMG
新的值:
图片名
事件:
onclick
(三)检查浏览器
可以根据访问者所使用的浏览器类型和版本发送不同的页面
例:
检查浏览器
1.打开ch09/checkbrowser.htm文件
2.选择附加行为的按钮
3.行为—动作—检查浏览器
4.事件:
onclick
(四)检查插件
可以根据访问者是否安装了指定的插件以决定是将他们引导到其他页面
例:
检查插件
1.选择附加行为的按钮
2.行为—动作—检查插件
3.事件:
onclick
(五)控制shockwave或flash电影可以用按钮控制电影的播放、停止等。
例:
控制shockwave或flash
1.新建文件
2.选择附加行为的按钮
3.行为—动作—控制shockwave或flash
4.事件:
onclick
第十四节行为
(二)
(六)拖动层
允许用户进行拖动层的操作
例:
拖动层
1.打开ch09/drag.layer.htm文件
2.选择附加行为的按钮
3.行为—动作—拖动层
4.事件:
ondrag
(七)转到URL
可以在当前窗口中打开一个新的页面
例:
转到URL
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamveaver 网页 教案
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1