2022年Dreamweaver网页制作教案 .pdf
《2022年Dreamweaver网页制作教案 .pdf》由会员分享,可在线阅读,更多相关《2022年Dreamweaver网页制作教案 .pdf(41页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、认识 Dreamweaver一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问。【学习步骤】1、 Dreamweaver的功用Dreamweaver能够像普通的字处置软件一样编辑Internet 上以 HTML 格式保管的一切文件,也就是网页;它支持动态HTML ,能够在网页中产生动画;还能够在网页中插入各种插件,以产生特殊效果。Dreamweaver可用于管理站点, 它像文件夹一样创立和翻开站点,用不同的方式查看站点中各个网页之间的关系,调整站点的组织构造,使整个站点条理明晰。2、 Dreamweaver的窗口(1
2、) 标题栏(2) 菜单栏(3) 工具栏(4) 视图栏(5) 文件夹列表(6) 工作区3.网页工作区的三个视图方式选项它们分别是 “ 普通 ” 、“HTML ”“预览 ” ,它们之间的互相切换非常容易完成的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表现,在此方式下,能够名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 41 页 - - - - - - - - - 像在 Word 中那样直接停止各种编辑操作,完成网页编辑的一切功用。HTML 视图实践上
3、是一个文本编辑器,其中给出了普通视图方式下所件网页的HTML 代码。在这里能够用菜单命令停止复制、粘贴、删除、查找等操作。关于HTML 言语中的不同成分均用不同的颜色显现,这样比拟容易辨别各种语法成分。为了在制造网页过程中可以随时查看网页的实践效果,Dreamweaver提供了预览视图方式。4.装置 dreameaver的办法装置及注册5.关闭 dreameaver 6.保管网页的办法三、小结Dreamweaver的根本学问树立一个简单的站点一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问;树立一个简单的站点;停止
4、简单的网页编辑。【学习步骤】1、创立空白站点。执行菜单命令 “ 文件 ”“新建 ”“站点 ” ,就会呈现8 中站点导游。出于简单,可选择 “ 空站点 ” 按钮,并在 “ 指定新站点的位置” 框中填入站点的位置。在指定新站点的位置后,单击“ 肯定 ” 即建成一个空站点。2、树立一个简单的文字网页树立了一个站点之后,就应该在站点中参加网页了。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 41 页 - - - - - - - - - 创立空白网页执行菜单命令 “ 文件 ”“新
5、建 ”“网页 ” ,就会呈现一对话框,选择“ 普通网页 ”模板并单击 “ 肯定 ” 即树立了一个新的空白页面。 网页工作区的三个视图方式选项它们分别是 “ 普通 ” 、“HTML ”“预览 ” ,它们之间的互相切换非常容易完成的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表现,在此方式下,能够像在Word 中那样直接停止各种编辑操作,完成网页编辑的所有功用。HTML 视图实践上是一个文本编辑器,其中给出了普通视图方式下所件网页的HTML 代码。在这里能够用菜单命令停止复制、粘贴、删除、查找等操作。关于HTML 言语中的不同成分均用不同的颜色显现,这样比拟容易辨别各种语法
6、成分。为了在制造网页过程中可以随时查看网页的实践效果,Dreamweaver提供了预览视图方式。 输入文本网页中最根本的也是最重要的局部就是网页中由文本构成的内容,因而制造网页首先要从文本输入开端。3、设置网页中文字的字体、颜色、大小和效果在文本开端处按下鼠标左键,不放手拖到完毕处,选择要设置的文本块。执行菜单命令 “ 格式 字体 ” 。在“ 字体 ” 对话框中,单击 “ 字体 ” 选项卡。在字体选择窗口中,选定所需求的字体,再肯定文本的字型、大小、颜色、效果等。按“ 肯定 ” 即可。4、 网页编辑名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - -
7、 - - - - 名师精心整理 - - - - - - - 第 3 页,共 41 页 - - - - - - - - - (1) 将图片插入网页(2) 将剪贴画插入网页(3) 参加 GIF 动画(4) 保管嵌入式图形文件(5) 运用图片工具栏(6) 设置图片属性(7) 设置网页背景(8) 设置超链接(9) 应用框架(10)表单的运用5、小结简单站点的树立过程设计限时自动关闭的网页一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver设计限时自动关闭的网页。【学习步骤】设计页面时,经常会从一个
8、页面翻开一个子窗口以供阅读者查看。通常,这种子窗口中的内容一经阅读者看过,关于阅读者而言就不再需求,而他们常常会遗忘关掉这些小窗口,致使许多的阅读器窗口翻开着,耗用大量的资源。因而我们能够将子窗口设计成经过一段时间后能够自动关闭的方式。1. 在本地站点中生成一个Smlple 文件夹。2. 在 Smlple 文件夹中,生成名为Index.html以及名为 firstpage.html的文件。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 41 页 - - - - - - -
9、 - - 3. 双击 Index.html ,翻开该文档,进入到文档的设计视图窗口中。4. 单击菜单View/Head Content,显现文档的头部区域。5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script,翻开 Inset Script对话框。如图所示,在Language 下拉列表框当选择javascript选项,并在Coctento 文本框中输入“setTimeout(self.close() ,15000) ” 。单击 OK 按钮,完成在文档头部插入15 秒后自动关闭子窗口的脚本。在代码中, 15000 表示 15000 毫秒,也即1
10、5 秒,也能够依据需求将之修正为本人需求的时间毫秒数。设置时间6. 在文档窗口中输入“ 关闭 ” 字样,在属性面板上的Link 文本框中输入 “#”,将其设置为一个空链接。7. 在状态栏左端的快速标志编辑器上,单击标志按钮。选中“ 关闭 ” 链接,然后按下Ctrl+T 组合键,翻开快速标志编辑器,进入到快速标志编辑器的编辑标志形式。然后在“”前输入 “onclick=selfclose()”。 如图所示,设置终了,单击OK 按钮,确认操作。这样在Index.html被作为子窗口翻开后,单击该链接就能够立即关闭该子窗口。8. 保管 Index.html 文件,并退出index.html的 Dre
11、mweaver窗口。9. 如今开端设计fristpage.html页面。在本地站点的Smlple 文件夹中,双击 fristpage.html ,翻开该文档,进入到文档的设计视图窗口中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 41 页 - - - - - - - - - 10. 在文档中输入 “ 单击这里翻开会自动关闭的子窗口” 字样。然后在属性面板上的 Link 文本框中输入 “#”,将之设置为空链接。11. 能够经过为该链接应用Open Browser Win
12、dow行为来设置单击链接时翻开Index.html窗口,不过更便当的办法是应用快速标识编辑器。办法是首先将插入点放置到链接中,然后在状态栏左端的标识选择器上,单击标识按钮,选中整个链接。然后按下Ctrl+T 组合键,翻开快速标志编辑器,进入到快速标志编辑器的 编辑标识形式。再在“”前输入 “onclick=window.open(index.html,null,width=200px,height=200px)”(如图所示)。设置终了,按下回车键,确认操作。设置单击链接时翻开12. 上述操作就完成了本例的设置。能够单击菜单用File/save ,保管所做的工作。然后按下F12 键,在阅读器中预
13、览页面效果。三、小结用 Dreamweaver设计限时自动关闭的网页用 Dreamweaver做会挪动的文字一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver做会挪动的文字。【学习步骤】一、根本语法名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 41 页 - - - - - - - - - 啦啦啦,我会挪动耶!文字挪动属性的设置:方向 #=left, right 啦
14、啦啦,我从右向左移!方式 #=scroll, slide, alternate 啦啦啦,我一圈一圈绕着走!循环 #= 次数;若未指定则循环不止(infinite) 啦啦啦,我只走 3 趟哟!名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页,共 41 页 - - - - - - - - - 速度 啦啦啦,我走得好快哟!对齐方式 (Align) #=top, middle, bottom 啦啦啦,我会挪动耶!对齐上沿、中间、下沿。二 、小结用 Dreamweaver做会挪动的文字用
15、 Dreamweaver创立导航条一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver创立导航条 。【学习步骤】一个网站的不同页面运用了同一导航条。经过统一导航条的办法,我们能够完成网站作风的统一,同时也便当了阅读者在不同页面间的跳转。用Dreamweaver可作出各种比拟复杂的导航条。网页上的导航条可由一个或几个局部组成,每个局部均由各种图像构成,能够链接到不同的网页页面。在Dreamweaver中每局部中最多可设四个状态下的图像。一开端是一个初始图像,当鼠标挪动到导航条部位上时则显现另
16、一个图像,还能够设置当鼠标点击后的初始图像,以及鼠标点击后当鼠标再次挪动到这个部位上的图像。普通地,每部位只设一到两种状态的图像。由于图像太多了,会影响网页页面的访问、阅读的速度。导航条制造办法:挪动光标到需求导航条的中央,单击主菜单栏的“InsertNavigation Bar” 子命令,或直接单击 Objects 面板上的图标,弹出“Insert Navigation Bar”对话框,如下图,此时我们能够停止各种设置来完成上述功用:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第
17、8 页,共 41 页 - - - - - - - - - 在“Element Name ” 项后的文本框填入这个部位的命名,也能够不填,这时Dreamweaver 3将自动给它命名。在 Dreamweaver中每局部中最多可设四个状态下的图像:“Up Image” 项是该部位的初始图像,在其后文本框填入已准备好的图像的地址,或点击右边Browse 按钮来选择。每个部位可只设置Up Image项,其下的 “Over Image” 、“Down Image ” 和“Over While Down Image ” 三项能够不设置。其中,“Over Image”项是鼠标挪动到这个部位上时显现的图像(本
18、例当选择 );“Down Image ” 项是鼠标点击该部位后显现的初始图像; “Over While Down Image ” 项是鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。留意:Element Name项和 Up Image 项是必需的,一切的调用图像都会在系统的提示下保管在Dreamweaver 3文件夹中,以便调用。三 、小结用 Dreamweaver创立导航条用 Dreamweaver创立导航条一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver创立导航条 。【学习步骤】
19、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页,共 41 页 - - - - - - - - - 当然,还可给该部位设置超级链接:在下面的“When Clicked Go To URL ” 项后文本框填入链接到的文件的地址, 或单击 Browse 按钮选择, 当鼠标挪动到这个部位上时,在状态栏中能够看到链接到的地址。When Clicked Go To URL项后有一个下拉选框,这是设置超级链接的目的。接着是 “Options ”项,若选中 “Preload Images ”
20、选框,则阅读者阅读页面时,一切图像将在页面下载的同时全部下载,整个页面翻开的速度会慢些,但图像间转换会没有延迟,选中它。反之,不选Preload Images选框,则页面下载的同时只下载初始图像,其它图像按次第下载,整个页面翻开的速度较快,但图像间转换会有延迟。 若选中 “Show “Down Image ”Initially”选框,则将 Down Image设为初始图像。 此时,Over While Down Image项改为鼠标挪动到这个部位上时显现的图像,Up Image 项改为鼠标点击该部位后显现的初始图像, Over image项改为鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。
21、最下面是 “ Insert”项,选框中有 Horizontally( 程度 )和 Vertically( 垂直 )两个选项。 选中 Horizontally为导航条程度展开,选中Vertically 为导航条垂直展开。 Use Table 项,选中后, Dreamweaver自动生成 HTML代码将导航条各部位用表格隔开。当一个部位设置完成后,要添加其他部位,可点击对话框上方的“ ” 按钮,可按上面的步骤停止新部位的设置。要删去某一个部位,在“Nav Bar Elements ” 选框中先选中,再点击对话框上方的“ ” 按钮即可。另外,运用设置导航条图像中的高级功用,可改动文档中基于当前按钮下
22、的其他的图像。在默许下,单击导航条中的元素时,一切导航条中元素都会自动地返回原来默许的状态。若想设置被选中图像的上浮或是下沉的不同效果时,可用导航条中的高级功用:在“Behaviors ”面板中的 “Actions ”标签页,单击其上面的“ ” 号按钮,在弹出的菜单当选择“Set Nav Bar Image ”命令,弹出 Set Nav Bar Image 对话框中 (见图 2),选择“Advanced”标签页,对高级属性停止设置。其中,若选择“Over Image or over while Down Image”项,则当鼠标划过图片时显现其上面的图片,有上浮或是下沉的效果,并在 “Also
23、 Set Image ”文本框当选择要显现的图片,同时在其下面的“If Down To Image File”当选择当鼠标按下时要显现的图片途径;若选择“Down Image” 项,则当阅读者单击所选图像后,显现另外的图片。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页,共 41 页 - - - - - - - - - 图 2 存盘后,按F12 键测试所作导航条。三、小结用 Dreamweaver创立导航条用 Dreamweaver创立状态栏一、学习目的理解 Dreamwe
24、aver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver创立状态栏 。【学习步骤】状态栏制造办法:设置阅读器状态栏中的文本信息,这一功用可在阅读网页面时,在阅读器窗口底下状态栏中显现相关信息。其办法 :选择 “Behaviors ”面板中的 Actions 标签页的 “Set Text of Status Bar”命令 ,在弹出的 Set Text of Status Bar 对话框中如图3,在“Message”的文本框中输入所在状态栏中显现的文档,按“OK ”按钮完成。再用按 F12 快捷键来测试 ,可看到其运转的效果。名
25、师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页,共 41 页 - - - - - - - - - 当然可用 JavaScript 言语在 Message 文本框中参加些函数,让文本显现功态的效果。三、小结用 Dreamweaver创立状态栏用 Dreamweaver的模板创立网页一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver的模板创立网页。【学习步骤】1、创立模板页
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年Dreamweaver网页制作教案 2022 Dreamweaver 网页 制作 教案
限制150内