Dreamweaver全套教学设计Word格式文档下载.docx
《Dreamweaver全套教学设计Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《Dreamweaver全套教学设计Word格式文档下载.docx(30页珍藏版)》请在冰豆网上搜索。
标题栏
(2)
菜单栏
(3)
工具栏
(4)
视图栏
(5)
文件夹列表
(6)工作区
3.网页工作区的三个视图方式选项
它们分别是“普通”、“HTML”“预览”,它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现,在此方式下,可以
像在Word中那样直接进行各种编辑操作,实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器,其中给出了普通视图方式下所件网页的HTML代码。
在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。
对于HTML语言中的不同成分均用不同的颜色显示,这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果,Dreamweaver提供了预览视图方式。
4.安装dreameaver的方法
安装及注册
5.关闭dreameaver
6.保存网页的方法
3、小结
课题建立一个简单的站点
Dreamweaver的基本知识;
建立一个简单的站点;
进行简单的网页编辑。
1、创建空白站点。
执行菜单命令“文件”—“新建”—“站点”,就会出现8中站点向导。
出于简单,可
选择“空站点”按钮,并在“指定新站点的位置”框中填入站点的位置。
在指定新站点的位置后,单击“确定”即建成一个空站点。
2、建立一个简单的文字网页
建立了一个站点之后,就应该在站点中加入网页了。
①
创建空白网页
执行菜单命令“文件”—“新建”—“网页”,就会出现一对话框,选择“普通网页”
模板并单击“确定”即建立了一个新的空白页面。
②
网页工作区的三个视图方式选项
③
输入文本
网页中最基本的也是最重要的部分就是网页中由文本构成的内容,因此制作网页首先要
从文本输入开始。
3、设置网页中文字的字体、颜色、大小和效果
在文本开始处按下鼠标左键,不放手拖到结束处,选择要设置的文本块。
执行菜单命令“格式—字体”。
在“字体”对话框中,单击“字体”选项卡。
④
在字体选择窗口中,选定所需要的字体,再确定文本的字型、大小、颜色、效果等。
⑤
按“确定”即可。
4、
网页编辑
将图片插入网页
将剪贴画插入网页
加入GIF动画
保存嵌入式图形文件
使用图片工具栏
(6)
设置图片属性
(7)
设置网页背景
(8)
设置超链接
(9)
应用框架
(10)
表单的使用
5、小结
课题设计限时自动关闭的网页
用Dreamweaver设计限时自动关闭的网页。
设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。
通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记关掉这些小窗口,致使许多的浏览器窗口打开着,耗用大量的资源。
因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。
1.在本地站点中生成一个Smlple文件夹。
2.在Smlple文件夹中,生成名为Index.BrowserWindow行为来设置单击链接时打开Index.('
index.=#>
#=left,right<
marqueedirection=left>
啦啦啦,我从右向左移!
<
marquee>
<
P>
marqueedirection=right>
啦啦啦,我从左向右移!
方式<
bihavior=#>
#=scroll,slide,alternate<
marqueebehavior=scroll>
啦啦啦,我一圈一圈绕着走!
marqueebehavior=slide>
啦啦啦,我只走一次就歇了!
marqueebehavior=alternate>
啦啦啦,我来回走耶!
循环<
loop=#>
#=次数;
若未指定则循环不止(infinite)<
marqueeloop=3width=50%behavior=scroll>
啦啦啦,我只走3趟哟!
marqueeloop=3width=50%behavior=slide>
marqueeloop=3width=50%behavior=alternate>
速度<
scrollamount=#>
marqueescrollamount=20>
啦啦啦,我走得好快哟!
;
对齐方式(Align)<
align=#>
#=top,middle,bottom<
fontsize=6>
marqueealign=#width=400>
啦啦啦,我会移动耶!
font>
对齐上沿、中间、下沿。
2、小结
课题用Dreamweaver创建导航条
用Dreamweaver创建导航条。
一个网站的不同页面使用了同一导航条。
通过统一导航条的方法,我们可以实现网站风格的统一,同时也方便了浏览者在不同页面间的跳转。
用Dreamweaver3可作出各种比较复杂的导航条。
网页上的导航条可由一个或几个部分组成,每个部分均由各种图像构成,可以链接到不同的网页页面。
在Dreamweaver中每部分中最多可设四个状态下的图像。
一开始是一个初始图像,当鼠标移动到导航条部位上时则显示另一个图像,还可以设置当鼠标点击后的初始图像,以及鼠标点击后当鼠标再次移动到这个部位上的图像。
一般地,每部位只设一到两种状态的图像。
因为图像太多了,会影响网页页面的访问、浏览的速度。
导航条制作方法:
移动光标到需要导航条的地方,单击主菜单栏的“Insert\NavigationBar”子命令,或直接单击Objects面板上的图标,弹出“InsertNavigationBar”对话框(图1),此时我们可以进行各种设置来实现上述功能:
图1
在“ElementName”项后的文本框填入这个部位的命名,也可以不填,这时Dreamweaver3将自动给它命名。
在Dreamweaver中每部分中最多可设四个状态下的图像:
“UpImage”项是该部位的初始图像,在其后文本框填入已准备好的图像的地址,或点击右边Browse按钮来选择。
每个部位可只设置UpImage项,其下的“OverImage”、“DownImage”和“OverWhileDownImage”三项可以不设置。
其中,“OverImage”项是鼠标移动到这个部位上时显示的图像(本例中选择);
“DownImage”项是鼠标点击该部位后显示的初始图像;
“OverWhileDownImage”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。
注意:
ElementName项和UpImage项是必需的,所有的调用图像都会在系统的提示下保存在Dreamweaver3文件夹中,以便调用。
当然,还可给该部位设置超级链接:
在下面的“WhenClickedGoToURL”项后文本框填入链接到的文件的地址,或单击Browse按钮选择,当鼠标移动到这个部位上时,在状态栏中可以看到链接到的地址。
WhenClickedGoToURL项后有一个下拉选框,这是设置超级链接的目标。
接着是“Options”项,若选中“PreloadImages”选框,则浏览者浏览页面时,所有图像将在页面下载的同时全部下载,整个页面打开的速度会慢些,但图像间转换会没有延迟,选中它。
反之,不选PreloadImages选框,则页面下载的同时只下载初始图像,其它图像按顺序下载,整个页面打开的速度较快,但图像间转换会有延迟。
若选中“Show“DownImage”Initially”选框,则将DownImage设为初始图像。
此时,OverWhileDownImage项改为鼠标移动到这个部位上时显示的图像,UpImage项改为鼠标点击该部位后显示的初始图像,Overimage项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。
最下面是“Insert”项,选框中有Horizontally(水平)和Vertically(垂直)两个选项。
选中Horizontally为导航条水平展开,选中Vertically为导航条垂直展开。
UseTable项,选中后,Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。
当一个部位设置完成后,要添加其他部位,可点击对话框上方的“+”按钮,可按上面的步骤进行新部位的设置。
要删去某一个部位,在“NavBarElements”选框中先选中,再点击对话框上方的“-”按钮即可。
另外,使用设置导航条图像中的高级功能,可改变文档中基于当前按钮下的其他的图像。
在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。
若想设置被选中图像的上浮或是下沉的不同效果时,可用导航条中的高级功能:
在“Behaviors”面板中的“Actions”标签页,单击其上面的“+”号按钮,在弹出的菜单中选择“Se