第6章DreamweaverMX2004动态效果
- 格式:ppt
- 大小:916.00 KB
- 文档页数:36
Dreamweaver MX2004Dreamweaver是Macromedia公司研制的网页制作软件,还有Flash动画制作和Fireworks图象处理软件,这三个软件人们称为网页三剑客。
Dreamweaver是当今世界最为流行的网页制作工具之一。
在网络时代中, Dreamweaver真正起到了网页设计“织梦者”的作用。
全球无数个人和企业都在使用 Dreamweaver来架设自己的网络信息空间,编织网络沟通渠道。
一、 Dreanweaver的工作界面当我们第一次启动Dreamweaver软件时,会弹出一个工作界面选择窗口:可以让用户根据自己的需要设置,可选择的界面包括“Dreamweaver MX工作区”和“Dreamweaver 4工作区”。
(也就是说,Dreamweaver MX提供了有二种工作界面的风格:)第一种:将全部元素置于一个窗口的集成布局风格,即“Dreamweaver MX工作区”。
请看下图示例:第二种:非常类似于Dreamweaver 4的浮动布局风格,即“Dreamweaver 4工作区”。
请看下图示例:二、站点管理与应用(创建Dreamweaver本地站点)创建本地站点的方法:1、第一步必须先在本地计算机的磁盘上建立一个文件夹。
(作为本地站点的根文件夹)提示:为了方便以后管理站点上的文件,先在本地文件夹中创建几个目录:htm、img、 others,分别存放网页设计中用到的资源及网页文件。
2、建立本地站点,选择主菜单中的“站点/新建站点”命令,在弹出的新建站点对话框进行设置。
新建站点的操作步骤:第一步:选择菜单中的“站点”→“新建站点”命令,如图所示:在弹出的对话框中选择“基本”选项卡,出现定义站点向导,如下图所示:第二步:单击“下一步”按钮,询问是否要使用服务器技术,选择“否”选项(表示目前该站点是一个静态站点,没有动态页即不使用Web应用程序:如ASP、JavaServer Page JSP)第三步:单击“下一步”按钮,选择“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”单选项,然后指定本地机磁盘上的一个文件夹储存站点文件(包括网页文件及设计网页用到的其它资源)第四步:单击“下一步”按钮,在弹出的对话框中设置如何连接到远程服务器,单击下拉菜单,选择“无”。
1、通过单击面板组左边中间的三角形按钮,可以隐藏和显示面板组。
通过单击各面板左上角的三角形按钮将隐藏和显示各面板(对)2、在Dream weaver MX中它只能对HTML文件可以进行编辑(错)3、HTML是Hypertext Markup Language(超文本标记语言)的缩写。
超文本使网页之间具有跳转的能力,是一种信息组织的方式,使浏览者可以选择阅读的路径,从而可以不需要顺序阅读(对)4、在源代码窗口可以看到html文件是标准的ASCII文件,它是包含了许多被称为标签(tag)的特殊字符串的普通文本文件(对)5、在Dream weaver中,可以导入外部的数据文件,还可以将网页中的数据表格导出为纯文本的数据文件(对)6、在插入栏中的Head的对象面板中包含下面那些对象A、Meta(MIME字符集信息)B、Keywords(网页的关键字信息)C、Description(网页或网站的描述信息)D、Base(设置网页的主目录)7、在Dream weaver MX中,中文输入时欲键入空格应该怎么做A、在编辑窗口直接输入一个半角空格B、代码中输入“ ”C、在编辑窗口输入一个全角空格D、在编辑窗口输入两次空格8、在Dream weaver中,下面哪些对象能对其设置超链接的是A、任何文字B、图像C、图像的一部分D、FLASH影片9、在Dream weaver中,在弹出的清除冗余代码对话框中下面哪些代码可以被设置清除A、成对出现的之间没有内容的标签B、多余的嵌套标签C、类似于<!--begin body text-->这样的与Dream weaver无关的注释性标签D、需要在后面的框中填入要清除的特定的标签Answer: A10、下面可以用来编辑网站后端程序的是A、PerlB、ASPC、CD、Java11、下面几项通过JavaScript的应用,可以来实现的是A、交互式导航B、简单的数据搜寻C、表单验证D、网页特效12、下面几个实例可以通过层的应用来实现的是A、创建网页上的动画B、制作各种动态导航效果C、生成丰富的动态按钮D、交互游戏13、在Dream weaver中,Behavior(行为)是有几项构成A、事件B、动作C、初级行为D、最终动作14、下面的类资源在资源管理面板里有的是A、图像B、颜色C、链接D、Flash15、下面是Dream weaver提供的各种应用程序接口的是A、JavaScript应用程序接口B、文件输入输出接口C、图像记录接口D、Fireworks集成接口16、在Dreamweaver MX中,下面的工作界面不可以选择的是A、Dreamweaver MX风格B、模仿Homesite/Coder-Style代码风格C、传统Dreamweaver风格D、FrontPage 风格17、如下图所示为显示选项(View Option)按钮,在设计视图下时,不是其功能的是A、头部元素B、Rulers:标尺C、Girds:网格D、Auto Indent:自动缩进18、在设置图像超链接时,可以在Alt文本框中填入注释的文字,下面不是其作用是A、当浏览器不支持图像时,使用文字替换图像B、当鼠标移到图像并停留一段时间后,这些注释文字将显示出来C、在浏览者关闭图像显示功能时,使用文字替换图像D、每过段时间图像上都会定时显示注释的文字19、在Dream weaver MX中下面可以用来做代码编辑器的是A、记事本程序(Notepad)B、PhotoshopC、flashD、以上都不可以20、在Dream weaver中,有8种不同的垂直对齐图像的方式,要使图像的底部与文本的基线对齐要用哪种对齐方式A、BaselineB、Absolute BottomC、BottomD、Browser Default21、在Dream weaver中,我们可以为链接设立目标,表示在新窗口打开网页的是A、_blankB、_parentC、_selfD、_top22、在Dreamweaver MX中,设置页面属性时,对在Page Properties属性设置框中Tracing Image选项说法错误的是A、网页排版的一种辅助手段B、用来进行图像的对位C、只有网页预览时有效D、对HTML文档并不产生任何影响23、在Dream weaver中,下面关于清除Word HTML格式的说法错误的是A、Microsoft公司的字处理软件Word也可以制作网页文件B、Word制作的网页文件包含某些标准的HTML不支持的格式C、我们可以通过Dream weaver的Commands菜单,选择Clean Up Word HTML命令对Word 制作的网页文件进行优化D、Dream weaver不会自动侦测当前打开的文件是使用哪个版本的Word生成的24、在Dream weaver中,下面的操作不能插入一行的是A、将光标定位在单元格中,打开Modify菜单,选择Table子菜单中的Insert Row命令B、在行的一个单元格中单击鼠标右键,打开快捷菜单,选择Table子菜单中的Insert Row 命令C、将光标定位在最后一行的最后的一个单元格中,按下Tab键,在当前行下会添加一个新行D、把光标定位在最后一行的最后的一个单元格中,按下组合键Ctril+W,就在当前行下会添加一个新行25、在Dream weaver MX中,下面关于排版表格属性的说法错误的是A、可以设置宽度B、可以设置高度C、可以设置表格的背景颜色D、可以设置单元格之间的距离但是不能设置单元格内部的内容和单元格边框之间的距离26、在使用表单时,如下图所示其表示A、插入文本域B、插入复选框C、插入列表项D、插入单选项27、在Dream weaver MX中,在设置各分框架属性时,参数Scroll是用来设置什么属性的A、是否进行颜色设置B、是否出现滚动条C、是否设置边框宽度D、是否使用默认边框宽度28、下面的哪个动态HTML技术是Navigator浏览器可以支持的A、可下载字体B、多媒体C、数据绑定D、以上都不支持29、下面关于New Style(新样式)对话框的说法错误的是A、可以选择Make Custom Style(自定义样式)B、可以选择Redefine HTML Tag(HTML标签样式)C、你可以选择Use CSS Selector(CSS给定的选择用样式)D、在样式表中自定义的样式元素不可以在整个HTML中被调用30、在Dream weaver中,下面关于建立新层的说法正确的是A、不能使用样式表建立新层B、当样式表建立新层,层的位置和形状不可以和其他样式因素组合在一起C、通过样式表建立新层,层的样式可以保存到一个独立的文件中,可以供其他页面调用D、以上说法都错31、在Dream weaver中,下面关于拖动路径创建时间线的说法正确的是A、我们可以拖动层的路径来制作动画B、使用菜单来实现录制路径的操作时,首先要选择该层C、形成的动画路径完全忠实于拖动的轨迹D、在编辑状态下,时间线的路径是不可以见的32、在Dreamweaver中,如果觉得时间线的长度太短,可以向后拖动最后的关键帧,使时间线变长(对)33、在Dream weaver中,下面哪个标签为嵌入QuickTime格式视频文件的标签A、<embed>B、<body>C、<table>D、<object>34、下面关于添加次要预览浏览器的说法错误是A、定义次要浏览器要先在系统中安装要定义的其他浏览器B、定义次要预览浏览器时要浏览选择次要预览浏览器的程序文件C、可以添加第三预览浏览器D、当第一预览浏览器不能使用时,系统会自动选择次要浏览器35、当我们只需要把库元素中的内容加到页面中,而不需要和库进行关联时,可以在拖动库元素到网页的同时按住哪个键A、CtrlB、AltC、ShiftD、Alt+Shift36、在Dream weaver中,下面关于创建模板的说法错误的是A、在模板子面板中单击右下角的New Template按钮,就可以建立新模板B、在模板子面板中双击已命名的名字,就可以对其重新命名了C、在模板子面板中单击已有的模板就可以对其进行编辑了D、以上说法都错37、在创建模板时,下面关于可编辑区的说法正确的是A、只有定义了可编辑区才能把它应用到网页上B、在编辑模板时,可编辑区是可以编辑的,锁定区是不可以编辑的C、一般把共同特征的标题和标签设置为可编辑区D、以上说法都错38、在创建模板时,下面关于可选区的说法正确的是A、在创建网页时定义的B、可选区的内容不可以是图片C、使用模板创建网页,对于可选区的内容,可以选择显示或不显示D、以上说法都错误39、在Dream weaver中,下面关于资源管理器的说法错误的是A、有两种显示方式B、网站列表方式,可以把网站的所有资源显示C、收藏夹方式,只显示自定义的收藏夹中的资源D、模板和库不在资源管理器中显示40、下面关于将收藏夹中的资源添加和删除的说法正确的是A、从收藏夹中的资源删去,就是物理删除B、对收藏夹中的资源进行改名,就是物理改名C、网站资源列表方式下资源的名称都是真实的物理文件名,不允许修改D、以上说法都错41、在Dream weaver中,下面关于扩展管理器的说法错误的是A、可以在Macromedia系列软件之间导入扩展B、有打包和上传功能C、单击按钮,来访问Macromedia的Dream weaver扩展下载站点D、可以使用扩展管理器来制作第三方扩展42、下面关于Chrome less Window的扩展设置对话框的说法错误的是A、我们可以设置弹出窗口的状态栏的名称B、可以设置弹出窗口的宽度和高度C、可以在浏览器的任何窗口位置弹出窗口D、弹出窗口显示的不可以是HTML文件43、在Dreamweaver MX中,下面关于定义站点的说法错误的是A、首先定义新站点,打开站点定义设置窗口B、在站点定义设置窗口的站点名称(Site Name)中填写网站的名称C、在站点设置窗口中,可以设置本地网站的保存路径,而不可以设置图片的保存路径D、本地站点的定义比较简单,基本上选择好目录就可以了44、在Dreamweaver MX中,图像的属性内容包括:A、图像的名称B、图像的大小C、图像的源文件D、图像的连接45、在Dream weaver MX中,下面关于查找和替换文字说法错误的是A、可以精确地查找标签中的内容B、可以在一个文件夹下替换文本C、可以保存和调入替换条件D、不可以在HTML源代码中进行查找与替换46、在Dreamweaver中,只需要三个参数来加入一个Shockwave影片A、位置B、高度C、宽度D、长度47、在使用表单时,文本域主要有几种形式A、1B、2C、3D、448、在Dream weaver MX欢迎对话框中,有哪几类使用者的工作环境可以选择(多)A、设计师B、代码编写者C、开发者D、图像处理者49、在DreamWeaver中,下面不是三个只要动作用来控制时间线的是A、播放时间线B、停止时间线C、控制时间线到特定的帧D、可以控制到不同的时间线中50、在DreamWeaver中,在弹出的消除冗余代码对话框中下列哪些代码可以被设置消除A、成对出现的之间没有内容的标签B、多余的嵌套标签C、类似于<!begin body text>这样的与DreamWeaver 无关的注释性标签D、需要在后面的框中填入要清除的特定的标签51、在插入栏中的Head的对像面板中包含下面哪些对象A、Meta(MIME字符集信息)B、Keywords(网页的关键字信息)C、Description(网页或网站的描述信息)D、Base(设置网页的主目录)52、在使用时间链时,用“Record Path of Layer”命令记录层的路径,关于关键点的说法正确的是A、用户拖动层的速度越快,则划分出的关键点越多B、用户拖动层的速度越快,则划分出的关键点越少C、用户可以通过改变拖动的速度来变更关键帧的位置D、关键点的多少和拖动层的速度无关53、通过对模板的设置,将已有内容定义为可编辑区域,以下选项中正确的是A、既可以标记整个表格,也可以标记表格中的某个单元格作为可编辑区域B、一次可以标记若干个单元格C、层被标记为可编辑区域后可以随意改变其位置D、层的内容被标记为可编辑区域后可以任意修改层的内容54、在Dreamweaver MX中,下面几项是文字属性的是(多)A、标题B、字体C、大小D、颜色55、通过方法,可以选中一个帧A、单击所要选中的帧B、单击“Frame Inspector”中的代表图像C、按下“Alt”键并用鼠标在所要选中的帧上单击D、单击所要选中的帧的左上角56、在Dreamweaver中,打开HTML检查器的方法有A、单击“Window”下拉菜单中的“HTML Source”命令B、单击“Window”下拉菜单中的“Laucher”命令,在打开的对话框中单击“HTML Source”图标C、单击“Document”窗口右下脚处的“Show HTML Source”图标D、按“F10”键57、在Dreamweaver中,用时间线建立动画效果时,可以包括的动画有A、图象位置、大小改变的动画B、图层位置改变的动画C、图层可见性改变的动画D、图片文件来源改变的动画58、除了下划线、连字符之外,文件名中还不能包括A、空格B、标点C、%D、&59、每个时间链开始都是包括两个关键帧和A、开始B、结束C、关键帧D、主帧60、在建立模板的过程中,命名可编辑区域或锁定区域时不能使用的符号有A、单引号B、双引号C、尖括号D、&符号61、下面关于文档窗口说法错误的是A、文档窗口Dreamweaver MX使用者直接进行编辑文字,图象等的场所B、在Dreamweaver MX中你只能打开单个文档窗口进行编辑C、左下角为标签选择器,运用它你将对文档更加方便的进行编辑D、右下角会显示当前窗口的大小和下载时62、在Dreamweaver MX中,要使在当前框架打开连接,目标窗口设置应该为A、_blankB、_parentC、_selfD、_top63、在Dreamweaver中,设置插入表格参数对话框时,下面哪些你可以用来设置(多)A、水平行数目B、垂直行数目C、表格的预设宽度D、每个单元格以及整个表格的边框的宽度64、在Dreamweaver MX中,使用什么组合键可以调出行为面板A、Shift+F3B、Shift+F5C、Ctrl+F3D、Ctrl+F565、关于Dreamweaver功能的说法,正确的是A、可以制作让他人提交的表单B、可以制作计数器C、可以制作留言板D、可以制作打开一个页面的同时打开一个小页面窗口66、要将左图所示的分帧页面转变成右图所示的分帧页面,应执行的操作是A、按住“Alt”键同时将鼠标移到图1下部左边框,等图标变成双向箭头时,拖动到图2中添加的位置。
《网页设计与制作—Dreamweaver MX 2004、Fireworks MX 2004、Flash MX 2004课程网站》课件介绍《网页设计与制作》是我院高职计算机专业的核心课程,是我院本科非计算机专业学生的计算机公共基础课程的后续选修课程。
该课程主要讲授网站的建立与发布、网页的设计与制作、网页图形图像处理、Flash动画制作。
本课件是以计算机网络技术和多媒体技术为手段开发的课程网站.。
本课件设计制作了两个教学网站——『课堂教学网站』与『远程自学网站。
』(见图1)图1一. 课堂教学网站课堂教学网站适用于在多媒体教室或计算机房教师授课时使用。
该网站课件包括8个模块:(见图2)1. 多媒体网络授课教案:该课件将课程的全部内容制作成多媒体网页,教师在讲授过程中通过访问课程网站,打开多媒体网页,通过讲解、演示教案网页进行授课。
本课件对每章教案都设计了教学目标→范例预览→知识讲解→操作演示→课堂练习→要点总结→实验作业→单元测试8个教学环节。
2. 知识结构图与学习路径导航:本教程分别制作了Dreamweaver网页制作、Fireworks图像制作、Flash动画制作的知识结构图;并在每章教案中使用学习路径流程图进行导航。
学生通过这些结构图,可以较快地建构、掌握整个知识体系。
并方便学生在课后访问课程网站时根据自己的实际水平与学习需要自主快捷地获取知识。
图23. 实验指导:本课件根据各知识点的教学要求设计每次上机练习需要学生完成的实验,在课件中说明实验的制作方法、展示实验范例样本,提供实验素材下载、提供制作方法的动画演示。
学生通过访问课程网站可自主获取课程实验的全部相关信息与在线辅导。
4. 在线测试:为了使学生能够及时对所学的知识进行总结、复习与检测,本课件制作了在线测试系统(目前已制作了48套单元测试卷)。
根据每章内容的重点与知识点进行单元自测。
要求学生在完成每个单元的学习后,通过访问课程网站进行在线测试,测试系统进行自动评判并给出答案或试题分析。
第5章Dreamweaver各種行為動態特效目錄1.觀念:在Dreamweaver裡面做出特效的幾種方法 (2)2.練習1:下載網頁模板,開啟index.html (4)3.練習2:製作滑鼠滑過的調換影像效果 (7)4.練習3:製作淡入淡出的廣告影像效果 (19)5.練習4:製作百葉窗轉場的廣告影像效果 (24)6.練習5:製作放大/縮小的廣告影像效果 (29)7.練習6:製作標籤面版效果:Spry標籤面版 (33)8.練習7:製作內容折疊面版效果(展開一個面版會將其它面版折疊收合):Spry折疊式 (39)9.練習8:製作收合面版效果(折疊收合不會影響其它面版):Spry可收合面版4610.練習9:上傳前,檢查整個網站的超連結狀況 (56)11.練習10:上傳前,使用網站報表,清查整個網站(檢查是否更忘了設定標題的網頁,是否更多餘的程式標籤) (59)1.觀念:在Dreamweaver裡面做出特效的幾種方法(1).使用行為特效,Dreamweaver內部更提供10多種特效Dreamweaver裡面提供的行為特效更限,只更10幾種,更時會無法滿足各種網頁設計師要設計的各種網頁動態特效(2). 使用Extension外掛元件,將mxp檔案匯入Dreamweaver 提供一種擴充功能,它是一種外掛元件,可以讓使用者下載入他想要元件,做出『行為特效』般的各種網頁特效,(3).使用Spry功能(Spry選單列,Spry標籤面板,Spry折疊式,可收合面板)(4).使用JavaScript,或JavaApplet直接修改網頁程式碼,做出特效JavaApplet與JavaScript也是互動式網頁的設計工具,在Dreamweaver 中提供2種方式來建立●插入外部『JavaApplet與JavaScript』元件方法●Dreamweaver內建的使用『JavaApplet與JavaScript』元件的方法2.練習1:下載網頁模板,開啟index.html(1).下載練習範例的模板:下載後,解壓縮後將更改目錄名稱為『web8』(2).開啟dreamweaver,建立新網站,開啟這個web8資料夾:不使用FTP(3).將網站的資訊轉存:(若沒有轉存,下次來,又要重新新增網站,太麻煩了)結果:多出了一個『網站定義』檔案下次開機後,只要將之開啟,即可重新打開這個已經定義好的網站3.練習2:製作滑鼠滑過的調換影像效果滑鼠滑過(1).開啟index.html網頁設定圖片Why的影像ID名稱設定『行為』特效設定原始檔(切換後的影像):images/why02.png結果,測試滑鼠滑過設定網頁上方橫幅圖片的影像ID名稱:title1設定『行為』特效設定原始檔(切換後的影像):images/b01b.png結果,測試滑鼠滑過練習2:細切割表格,並匯入圖片切換到『展開』表格模式目前表格架構將最上方第1列表格,先切成3列匯入圖片第1列,匯入圖片musictop_01.png第2列第1欄,匯入圖片musictop_02.png第3列,匯入圖片musictop_08.png結果第2列,匯入圖片musictop_03.png~musictop_07.png 結果如何將兩列之間的列高設定為0,如下方法:結果:將前3列的框線,拉近,盡量靠近圖片結果:在第4列第2欄,匯入圖片:topmusic_main.png將第4列第1欄,分割成4欄在第4列第1欄匯入圖片:musictop_09.png再匯入一張圖片:musictop_16.png現在要做出以下的框線分析其結構目前結構先匯入musictop_11.png將下面一列,分成3個欄位匯入圖形musictop_12.png,musictop_14.png 中間欄位匯入left_br.png(漸層背景)存檔,預覽關閉網頁,並命名為try1.html4.練習3:製作淡入淡出的廣告影像效果滑鼠按一下,1秒後淡入淡出變換影像先新增一個圖層Ap Div插入一張影像:aa01.png要先在圖層內,先點按一下,才能匯入影像設定『行為』特效︰出現/淡出效果特別注意:設定之前,一定要先點按圖片一下(不是點按圖層Ap Div)設定參數:1秒後變換設定結果onClick:代表滑鼠按一下,就會變換結果,測試滑鼠按一下,1秒後淡入淡出變換影像新增第2個事件網頁載入後,1秒後就會變換影像重新點選圖片,新增行為:出現淡出效果設定『行為』的觸發事件︰網頁載入時:onLoad結果,測試1秒後自動淡入淡出變換影像5.練習4:製作百葉窗轉場的廣告影像效果滑鼠滑過時,出現百葉窗變換影像先移除前一題所做的事件要記得,要先點按圖片一下,才會出現各種事件設定『行為』特效︰百葉窗效果特別注意:設定之前,一定要先點按圖片一下(不是點按圖層Ap Div)設定參數:要記得去選取目標元素設定結果onClick:代表滑鼠按一下,就會變換結果,測試滑鼠按一下,出現百葉窗變換影像新增第2個事件設定『行為』的觸發事件︰滑鼠滑過時:onMouseOver結果,測試滑鼠滑過時,出現百葉窗變換影像注意:幾個常見的事件(1).onLoad︰網頁載入時,就會觸發事件(2).onClick:滑鼠按一下,就會觸發事件(3).onMouseDown︰滑鼠按下時,就會觸發事件(4).onMouseUp︰滑鼠放開時,就會觸發事件(5).onMouseOver︰滑鼠滑過時(滑鼠移至),就會觸發事件(6).onMouseOut︰滑鼠滑過時(滑鼠移出),就會觸發事件(7).onMouseMove︰除了剛進入區域會觸發事件外,在區域內移動滑鼠,也會觸發該事件動作上onmouseover 只在剛進入區域時觸發。