Dreamweaver+Flash网页设计教程_第1页
Dreamweaver+Flash网页设计教程_第2页
Dreamweaver+Flash网页设计教程_第3页
Dreamweaver+Flash网页设计教程_第4页
Dreamweaver+Flash网页设计教程_第5页
已阅读5页,还剩163页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

主要内容Dreamweaver介绍站点的建设站点的操作设置首页插入文本图像的操作Dreamweaver介绍选择工作区布局:在Windows中首次启动Dreamweaver时,会出现一个对话框,可以从中选择一种工作区布局。如果您以后改变了主意,可以使用“首选参数”对话框切换到一种不同的工作区。窗口和面板的概述:(1)插入栏:包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段HTML代码,允许在插入它时设置不同的属性。(2)工具栏:包含按钮和弹出式菜单,它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)、各种查看选项和一些常用操作(如在浏览器中预览)。(3)“网页编辑”窗口:显示当前创建和编辑的文档。(4)属性栏:用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性(5)浮动面板组:是分组在某个标题下面的相关面板的集合。若要展开一个面板组,请单击组名称左侧的展开箭头;若要取消一个面板组,请拖动该组标题条左边缘的手柄。

站点的建设站点:就是用来保存网站所有资料(例如网页、图片、动画、声音等)的文件夹。创建站点:要制作一个网站,第一步操作都是一样,就是要创建一个“站点”步骤如下:从菜单中选择“站点/管理站点”以上是用“基本”的方式来创建站点,这种方式适用于初学者。还有一种“高级”方式也可以用来创建站点,这种方式适用于对dreamweaver已经有了一定了解的用户。站点的操作站点的操作:创建站点内容:1、站点创建完成后,就可以创建Web页来填充站点。2、在右侧“浮动面板组”中选择“文件/文件”面板,最初整个站点中没有任何内容。用鼠标右击面板中的本地根目录文件夹,在弹出的菜单中选择新建类型。3、根据网站企划方案中计划的栏目数创建文件夹、每个栏目的相关网页放保存在相应的文件夹中,图片、声音、动画也应归类放在相应的文件夹中。4、注意:

(1)新建时要仔细想好要新建的是文件还是文件夹,可以通过文件名前面的图标来区分,并且它们之间的级别一定要搞清楚。

(2)除了首页(index.htm或index.html)和images文件夹(存放图片的文件夹)外,其他的文件在命名时是没有什么拼写限制的,只要符合栏目内容,易记易懂,用英文或汉语拼音都是可以的,但是不可以用中文符号。设置首页设置首页:1、每个网站都会有一个首页。功能上:首页代表着一个网站的风格与特色;结构上:首页代表了网站的第一层架构,网站上其他的Web页,必须通过首页来连接散播出去。2、首页是打开网站后在浏览器中显示的第一个页面,名字通常要视Server端的设置,一般的是index.htm或home.htm等,目前主要以index.htm的居多。后缀名为.html也是正确的。设置首页的页面属性:“修改/页面”属性,出现如下对话框:1、外观:2、链接:插入文本“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分。要使文本换行,可以用键盘操作。按Enter或Shift+Enter组合键实现文本换行.输入连续空格键的三种方法:1、将输入法的半角符改为全角符;2、在首选参数中进行设置;3、在“文本”中选择“不换行空格”图像的操作注意:1、网页的容量大小是网站成功与否的一大关键因素。由于网络在传输上的限制,导致了下载的速度不可能太快,因此,网页的大小就不能太大,其中关键就在于图像的大小了,否则浏览者会失去等待的耐心。2、网页设计有一个不成文的规定,就是文件严禁过大,一个美观的首页必须被限制在100KB以下,至于一般的页面最好在50左右,设计者必须适应这个规则。网页图像的基本知识:1、网页中最常用的两种图像格式分别是GIF与JPG2、GIF格式:是网页设计者使用图像时首要考虑的格式。(1)跨平台能力:(2)压缩能力:无损压缩(3)图像背景透明:支持背景透明的功能,便于图片更好地融合到其他颜色的背景中。(4)交错显示:(5)动画:3、JPG格式:需要坚持使用全彩模式来表现图像时,JPG格式就是惟一的选择。(1)跨平台能力:(2)压缩能力:有损压缩一般来廛,图像颜色较少(少于256色)时,建议使用GIF格式;而颜色较丰富时,就使用JPG格式。例如网站的LOGO就可以使用GIF格式,而照片效果的图像则使用JPG格式。4、PNG格式:是一种替代GIF格式的无专利权限制的格式,它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。PNG是MacromediaFireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息,并且在任何时候所有元素都是可以完全编辑的。文件必须具有.png文件扩展名才能被Dreamweaver识别为PNG文件。插入图像:1、插入图像:2、设置图像属性:3、插入“图像占位符”:是一种临时布局占位用的图像,在实际的IE浏览器中浏览时,它将显示为一个红叉。图像的特殊效果:1、建立图像映像:将图像根据需要分成不同的区域,每个区域都可以建立各自独立的超链接,当单击此区域时可以激活一个动作,这些区域称为图像的热区,这幅图像称为图像映像。例如:地图说明操作步骤:(1)选中想要建立映像的图像。(2)在MapName(映像名称)的域中输入图像映像的名称。如果在同一文档中应用多个图像映像,那么此名称应该是惟一(3)定义图像热区的区域:①选择圆形工具在图像上单击并按住左键建立一圆形热区。②选择矩形工具在图像上单击并按住左键建立一矩形热区。③选择多边形工具在图像上单击并按住左键建立一多边形热区。④单击图像热区属性检查器中Link(链接)域后的图标浏览文件图标,在弹出的选择文件对话框中选择所要加入的文件,或者直接输入超链接的路径及文件名。⑤设置Target(链接目标)选项与Alt(替换文本)选项练习:完成中国地图上某两个地区的地理指向说明。2、建立翻转图像:翻转图像指的是在浏览器中当鼠标移到该图像上时,它会变成另一幅图像。例如:风景变化操作步骤:

选择“插入/图像对象/鼠标经过图像”命令,出现“插入翻转图像”对话框。

主要内容链接的基本方法及操作表格的操作利用“布局”模式绘制表格进行布局链接的基本概念在WWW网页中浏览,当鼠标移动到某些文字、图像或其他文件上时,它会就手指的形状。单击鼠标会一下跳转到其他的网页。这些文字、图像等就是超链接。超链接实际上就是链接两个点的一条线,就是从用户单击的位置指向另一个位置的线。有两种链接的路径表达方式:绝对路径、相对路径。

绝对路径:绝对路径就是被链接文档的完整路径。对于链接外部网站通常是Http://)。例如:就是一个绝对路径。对于本地电脑中的网页通常是盘符:文件夹/…但是尽量不要使用绝对路径。

相对路径:以当前文档所在位置为起点到被链接文档经由的路径。这是用于本地电脑网页链接最适宜的路径。要把当前文档与处在相同文件夹中的另一文档链接时,或把同一网站下不同文件夹中的文档相互链接时,就可使用相对路径。指定文档相对路径时,省去了当前文档和被逻接文档的绝对路径中相同的部分,只留下不同的部分。建立链接方法建立Web页的链接:(1)通过链接HTML文档,能从当前网页中的文本或图像等文件跳转到另一个网页中去。(2)链接HTML文档最常用、最为方便的方法是使用属性检查器。(3)方法:1)选中超链接的对象。2)方法一:在属性检查器中的“链接”栏中输入将跳转到的网页的地址,或通过“浏览”按钮选择某个网页。3)方法二:用鼠标拖动“链接”栏后面的“指向文件”按钮,至“文件”浮动面板中要链接到的html页。命名锚记链接:(1)锚是指在网页中,需要跳转到某一特写的位置时,就需要在此位置建立一个位置标记,点击链接到这个位置标记的元素时,页面跳转到想要去的地方。给该位置标记一个名称,以便加以引用,此位置标记就锚。(2)通过创建链接锚,可以使链接指向当前文档或不同文档中的指定位置。常常被用来跳转到特定的主题或文档的顶部,使访问者能够快速浏览到选定的位置。

(3)操作步骤:1)把光标置于文档窗口想要加入链接锚的地方。2)执行以下操作之一:

①选择“插入/不可见标签”----“命名链接锚”菜单命令。

②单击“对象”面板右上角的下箭头,弹出对象选择菜单。从菜单上选择“不可见元素”,显示对象工具栏。单击“不可见元素”对象工具栏中的链接锚按钮。3)采取以上方法,即可弹出对话框。在“加入命名链接锚”对话框的“链接锚名称”的域中输入链接锚的名称,输入完毕后单击OK按钮即可完成链接锚的加入。4)如果链接锚标记没有出现在插入点,选择“查看/可视助手/不可见元素”菜单命令,即可显示链接锚。5)创建好链接锚后,即可创建锚链接。步骤如下:①在文档窗口,选择要建立指向锚链接的元素如文本或图像。②在属性检查器的Link域,输入一个号码符号“#”和链接锚名称(2)如何创建空链接:1)如只需要在网页中完成一个行为而不需要跳转到其他的地方,这时就需要一个空链接来完成这项功能。2)空链接是指没有链接位置的一种链接。3)创建空链接的操作步骤如下:

①选择所要创建空链接的元素。

②在属性检查器中“链接”的域中输入“#”。即可完成空链接的创建。表格的操作插入表格:

设置表格属性:注意:(1)背景图像:图像将以原大小显示。若图像尺寸大于表格尺寸,则超出表格的部分将不会显示;若图像尺寸小于表格尺寸,则图像将会在表格中平铺。(2)表格大小必须是通过属性来设置,千万不要利用鼠标拖动边框进行调整。

设置单元格属性:1、表格中通过行和列分出的格子为单元格。2、单元格是表格中填写内容的地方。(1)合并单元格:可以将所选的多个单元格、行或列合并为一个单元格。前提是多个单元格要形成矩形或直线的形状。(2)拆分单元格:可以将一个单元格分成两个或者更多的单元格。在表格中插入对象表格在网页中主要是用于对文本和图形进行布局排版,一个良好的网页构成应以表格为基础。在网页制作中,通过插入对象到表格的单元格中进行定位。(例如)注意:1、表格或单元格的大小必须与插入内容的大小一致。2、内容的位置必须由单元格的位置决定。利用“布局”模式绘制表格进行布局:

1、网页设计中元素之间的位置经常交错复杂,这时如果使用表格进行布局是非常麻烦的(例子),但是如果使用“布局”模式进行布局就非常方便了。2、“布局”模式中的表格称为布局表格,单元格称为布局单元格。(一)从“标准”模式切换到“布局”模式:1、在绘制布局表格或布局单元格之前,必须从“标准”模式切换到“布局”模式。2、切换的方式:选择“插入栏”中的“布局”分类,默认下是“标准”,切换到“布局”按钮即可。(二)绘制布局表格和单元格:1、一个布局表格中可以绘制另一个布局表格,但“嵌套布局表格”的大小不能超过包含它的表格的大小。2、要想在“布局”模式中插入对象,要在布局表格中绘制布局单元格。3、不能在布局单元格中绘制布局表格,布局单元格之间也不能重叠,但是可以存在于同一行中。(布局表格中可以绘制表格和单元格,但是单元格中不可以绘制表格和单元格,并且先绘制表格,再绘制单元格,最后在单元格中放入页面元素)(三)使用“属性面板”设置布局表格:1、固定:将表格设置为绝对宽度。2、自动伸展:表格最右边的列将自动延伸。当布局表格中有对象存在时,选择此项会弹出“选择占位图像”对话框。3、占位图像:属于一种临时工使用的图像,起到占据网页排版时的空间的作用,可以利用它来撑开布局表格和布局单元格。4、间隔图像:帮助将布局的结构维持在最初绘制时的状态。只有当设计者已经将足够的内容放置在固定宽度的列中以防止它们收缩或者已经手动添加了间隔图像时。5、填充:设置布局表格中的布局单元格和布局单元格中的内容之间的间隔。6、间距:设置布局表格中布局单元格之间的间隔7、清除行高:删除布局表格中所有单元格的显式高度设置。应该先将内容插入到布局单元格后再单击该按钮。8、使单元格宽度一致:设置一致宽度。9、删除所有间距图像:将间隔图像从布局表格删除。10、删除嵌套:将选中的、嵌套在另一个布局表格中的布局表格转换为布局单元格,表格中的内容保留至转换后的单元格中。

(四)当选择“自动伸展”后,在表格的下方会出现“波纹线”如下图:1、这表示表格的大小会随着窗口大小的变化而随意伸缩。2、点击“波纹线”右下角的“黑色三角”可以进行“固定宽度”和“添加间隔图像”(四)使用“属性面板”设置布局单元格勾选“不换行”复选框,将防止出现自动换行.如果撤选该复选框,布局单元格将扩展以容纳所有内容,而不会另起新行.(五)设置“布局”模式的首选参数:编辑/首选参数/布局模式实例讲解:1、“布局”模式与表格配合使用2、内容大小779*529像素3、Flash1大小475*156像素;Flash2大小37*306像素主要内容表单的设计

表单对象的使用表单页制作实例表单的设计基本概念:1、表单是用户与站点交流信息的一种有效途径,通过表单,用户可以向服务器发送信息,而网站也可以通过表单来收集用户信息2、一个完整的表单设计明确地分为两个部分:表单对象部分和应用程序部分,它们分别由网页设计师和程序设计师来设计完成。

3、过程:首先由网页设计师制作出一个可以让浏览者输入各项资料的表单页面,这部分浏览者可以看到;接着由程序设计师通过ASP或者其它程序,来编写处理各项表单资料和反馈信息等操作所需的程序,浏览者看不见。

创建表单

1、插入表单:(1)在插入表单对象之前,必须首先插入表单(2)方式一:将光标放置在文档中需要插入表单的位置,然后选择“插入/表单”菜单命令。(3)方式二:将表单面板中的“插入表单”图标按钮拖动到文档中需要插入表单的位置。

(4)通过上述方法的任何一种都能够在文档的位置插入表单,插入的表单用一个红色的虚线框表示其范围,在浏览器中它并不会显示出来,但必须在该区域才能插入表单对象。2、设置表单属性:

(1)选中新插入的表单,然后选择“窗口/属性”菜单命令,即可打开属性检查器。(2)表单名:输入希望的名称,为表单命名是有必要的,在使用Javascript或VBScript等脚本语言控制表单时,都是通过引用其名称来实现的。该名称是惟一的(3)动作:输入处理表单提交的数据服务器端应用程序或处理脚本的地址,该地址可以是URL,也可以是本地文件。

(4)方法:用于选择将表单数据传输到服务器的方法。GET方法速度快但携带数据量小;数据量大用POST方法。一般情况下使用POST方法。(5)目标:用于指定打开窗口的方式。(6)MIME类型:用于指定对提交给服务器进行处理的数据使用MIME编码类型。指定multipart/form-dataMIME类型。表单对象基本概念:1、一旦在文档中插入了表单后,就可以开始在其中添加表单对象了。用户正是通过表单对象中的数据来与远程服务器交换信息。2、表单中可包含的标准对象有:文本域、按钮、复选框、单选按钮、列表/菜单、文件域、图像域、隐藏域、跳转菜单等9种对象。插入表单对象:(一)文本域:

1、文本域可以接受任何类型的文本,包括字符串和数值,它是用户用来输入信息的表单对象。

2、文本域有三种类型:单行文本域、多行文本域和密码域。

(1)单行文本域一般用来输入单行文本,比如用户名、地址等。

(2)多行文本域一般用来输入多行文本,比如大段的说明文字。

(3)密码域主要用来输入用户的密码,用户在其中输入的密码将显示为星号(*)或项目符号,以隐藏真正的密码内容。3、插入方式:(1)执行“插入/表单对象/文本域”菜单命令。(2)在对象面板的表单类别中,单击“插入文本域”图标。

4、属性设置:(1)文本域的名称:该名称是惟一的。(2)字符宽度:文本域能够显示的最大字符个数或列数,即文本域的宽度。(3)最大字符数:文本域中最多能输入的字符数。(4)行数:多行文本域的最大行数。(5)类型:文本域的类型。(6)初始值:文本域的初始设置值,即当其在浏览器中加载时显示的值。

(二)按钮:1、表单中的按钮是用来控制表单的动作。2、将插入点放置在表单区域内,执行以下操作一即可:(1)执行“插入/表单对象/按钮”菜单命令。

(在对象面板的表单类别中,单击“插入按钮”图标)

3、按钮的属性设置:(1)按钮名:该名称是惟一的。(2)标签:显示在按钮上的标签,该标签表明该按钮的作用。(3)动作:按钮的类型,即按下按钮后表单所要执行的动作。表单按钮有三种类型:

1)提交表单:提交式按钮,为默认的按钮。该按钮用来将用户填写的表单数据提交给远程服务器的应用程序或处理脚本。

2)重设表单:重设式按钮。当添加该种按钮时,默认的标签名称为Reset。该按钮可用来将用户填写的表单数据清空还原为初始设置值。

3)无:普通按钮。不会产生提交或复位动作,但添加上行为后,可执行相应的动作。(三)复选框:

1、复选框用来设置在一组选择项目中多个选项的选择。

2、复选框有两种选择:选中和末选中。

3、将插入点放置在表单区域内,执行以下操作之一:

(1)插入/表单对象/复选框。

(2)在对象面板的表单类别中,单击“插入复选框”图标。4、属性设置:

(1)复选框的名称:该名称是惟一的

(2)选择值:复选框被选中时的值,即当表单数据被提交时,该设置值会发送给服务器。

(3)初始状态:复选框的初始设置值,即当其在浏览器中加载时的选中状态,其设置值只有两种:Checked(选中)和Unchecked(末选中)。(四)单选按钮:

1、单选按钮用来在一组选项中选择其中的一个,并且各个选项具有互斥性,即选中了其中一个单选按钮,则取消别的按钮选择。

2、将插入点放置在表单区域内,执行下面方法之一:

(1)执行“插入/表单对象/单选按钮”

(2)在对象面板的表单类别中,单击“插入单选按钮”图标。

3、设置属性:

(1)名称:

(2)选择值:单选按钮被选中时的值,即当表单数据被提交时,该设置值会发送给服务器。

(3)初始状态:单选按钮的初始设置值,即当其在浏览器中加载时的选择状态。(五)列表/菜单:1、列表/菜单即下拉列表框,其中提供了一组选项,用户可以从中选择一项或多项。2、插入点放置在表单区域内,执行下面方法之(1)插入/表单对象/列表/菜单。(2)在对象面板的表单类别是,单击“插入列表菜单”图标。

3、属性设置:(1)列表/菜单的名称。(2)类型:可以指定其为下拉菜单,或为可滚动的列表框。如果选择下拉菜单,用户只能从下拉菜单中选择一个选项。如果选择列表可从下拉菜单中选择一个或多个选项。(3)高度:列表框的高度,即列表框中可显示的选项个数。可以在其中添入任意数字值。(4)允许多个选项:是否允许从列表框中选择多个选项。选中此按钮,则允许用户从列表框中选择多个选项。(六)文件域:1、如果要将大量的信息一次性地发送给服务器,可以利用文件将所有信息收集起来一次性发送给服务器。利用文件域就可以实现这个功能2、如果要使用文件域向远程服务器发送文件,那么必须在其所属表单中将“方法”设置为POST3、插入方法:(1)执行“插入/表单对象/文件域”(2)在对象面板的表单类别中,单击“插入文件域”图标。4、属性设置:

(1)文件域名称:

(2)字符宽度:文件域能够显示的最大字符个数。

(3)最大字符数:文件域中最多能输入的字符数。表单页制作实例主要内容图层图层基本概念:1、图层是Dreamweaver中另外一种可以进行排版的工具。它可以被定位在页面上的任何位置,并且其中可以包含文本、图像等所有可直接插入至网页的对象。2、图层的特点:

(1)拥有很多表格所不具备的特点,比如可以重叠、便于移动、可设为隐藏等。

(2)只有IE4.0和NetsacapNavigator4.0之后的版本才支持图层效果。

3、目前比较合理的排版做法是,同时使用表格(布局表格)与层,表格(布局表格)为主,图层为辅。

图层的操作1、插入图层:2、单个图层的属性设置:

3、多个图层的属性设置:(按住Shift键的同时依次单击要选择的层。)

标签:可以指定用来定义这些图层的HTML标签。4、调整单个图层的大小:

(1)按下Ctrl和方向键,可以增大或缩小1个像素。

(2)按下Shift+Ctrl和方向键,可以增大或缩小10个像素。

5、调整多个图层的大小:(1)选择要调整的多个层,选择“修改/排列顺序/设成宽度(高度)相同”命令,将所有层的宽度全部变为最后选中的一个层的宽度(高度)。(2)选择要调整的多个层,在“属性面板”中的“多个层”下输入宽度和高度的值。6、移动层的位置:

7、层的对齐:“修改/对齐”8、在图层中插入对象:9、图层的嵌套:在图层中插入图层。图层的绝对定位和相对定位1、在制作网页时,层的定位一直是一个不好解决的问题。当浏览者显示器设置的分辨率与设计者的网页分辨率不符或者当浏览器窗口大小产生变化时,层的位置会出现错位的现象。2、原因:制作者使用“插入快捷栏”中的“描绘层”按钮来插入层的话,则该层左上角的位置与浏览器窗口内部的左侧和顶部的位置是绝的,也就是该层到浏览器窗口左侧和顶部的距离是固定的,数值显示在“属性面板”中“左”和“上”文本框中。3、解决的方法:将图层进行相对定位,使用主菜单“插入/布局对象/层”选项来插入一个图层,通过这种方法插入的层中没有“左”和“上”的属性。4、实例操作:具体做法:(1)先插入一个表格,并设置该表格的位置。(2)在该表格中插入一个父层,该父层的属性设置中“左、上”均为0(3)在父层中分别插入子层,并拖动子层到相应位置后插入对象

在图层和表格之间转换:1、可以使用图层来进行网页的排版工作,然后将层转换为表格,以使该网页能够在IE和Netscape4.0之前的版本中正确的显示2、将层转换为表格的步骤:

(1)在“网页编辑窗口”中打开要转换的使用图层进行排版的网页。

(2)选择主菜单“修改/转换/层到表格”命令,会弹出“转换层为表格”

(嵌套层不可转换为表格)

3、表格转换为层:(当表格转换为层时,空的单元格不会被转换)主要内容认识CSSCSS的基本操作各CSS样式的应用实例操作认识CSS认识CSS:1、在制作网页时,对文本的格式化是一件很烦琐的工作。利用CSS样式不仅可以控制一篇文档中的文本格式,而且可以控制多篇文档的文本格式。所以使用CSS样式表定义页面文字,将会使工作量大大减少。2、使用CSS,浏览器的版本要求一般在IE4.0或NetscapeNavigator4.0以上版本。

CSS的优越性:1、使用CSS定义样式的好处是:利用它不仅可以控制传统的格式属性,如字体、尺寸、对齐,还可以设置诸如位置、特殊效果、鼠标滑过之类的HTML属性。(例子)2、通过修改样式,可自动快速更新所有采用该样式的文字格式。3、当用户需要管理一个非常大的网站时,使用CSS样式定义站点,便可以现出非常明显的优越性。使用CSS可以快速格式化整个站点或多个文档中的字体等格式。

CSS的基本操作CSS样式的类型:1、类:用户可以将自定义CSS样式应用于一个完整的页面或页面的局部范围。2、标签:只对页面中某个对象起作用使选中该对象的HTML代码进行设置即可。

3、高级:该样式用于定义对象链接的四种效果。注意:(1)当用属性设置不了的效果,就要考虑用CSS样式设置。(2)手工格式化文本时,常会覆盖使用CSS样式格式化的文本。因此,使用CSS样式控制段落格式时,必须删除所有手工设置的格式。

使用CSS编辑器:1、创建新样式:(1)打开制作好的页面。(2)打开CSS面板,切换到CSS样式选项卡,单击“新建CSS规则”按钮(3)接下来,弹出一个“新建CSS规则”的对话框架。

(4)选定类型后,在“名称”选项中输入名称。(5)“定义在”是表示通过该CSS设置的属性是只对当前打开的页面起作用,还是对整个网站都起作用。1)新建样式文件:设置的属性会保存在一个CSS文件中,并存放在站点,当要用的时候调入使用就可以了。2)仅对该文档:设置的属性不会以文件形式保存,而是直接应用到当前打开的页面。(选择“仅对该文档”单选项,这样CSS样式就被定义在该文档中。但是如果页面多的时候,修改样式就需要修改每个文件,比较烦琐,因此在定义整个站点的时候,一般选择定义在新建的样式表文件里。)

(6)设置完毕后会出现一个对话框。

各CSS样式的应用类型样式的定义:主要定义文本的各项属性背景样式的定义:(例子)1、背景颜色:用来设定页面背景色。2、背景图像:用来设定页面背景图像。3、重复:用来设定使用图像当背景时是否需要重复显示,这一般用于图片面积小于页面元素面积的的情况。4、附件:用来设定对象的背景图像是随对象内容滚动的还是固定的。5、水平位置:用于指定背景图像相对于应用样式的元素的水平位置。6、垂直位置:用于指定背景图像相对于应用样式的元素的垂直位置。

区块样式的定义:区块样式是精确定义整段文本中文字的字距、对齐方式等属性。1、单词间距:在字与字之间增加更多的空隙。(这要根据浏览器而决定,因为有许多浏览器并不支持负值)2、字母间距:调整字符之间距。(字母间距选项的优先级高于单词间距选项)3、垂直对齐:调整页面元素的垂直位置。4、文本对齐:定义对象的对齐方式5、文字缩进:设置每段第一行的缩进距离6、空格:决定了一个元素怎样处理其中的空白部分7、显示:指定是否以及如何显示元素。方框样式的定义:(例子)方框样式是定义特定元素的大小及其与周围元素的间距等属性。1、“宽”:可以设置元素的宽度,只有当该样式应用到图像或层上面时,才可以直接从文档窗口中看到设置结果。2、“高”:可以设置元素的高度,只有当该样式应用到图像或层上面时,才可以直接从文档窗口中看到设置结果。3、浮动:可以设置应用样式的元素的浮动位置。

4、清除:可以定义不允许分层。5、填充:定义应用样式的元素内容和元素边界之间的空白大小。6、边界:定义应用样式的元素边界和其他元素之间空白大小。

边框样式的定义:(例子)如果想在某特定对象(除文字)的外面加一条细细的边框,就需要使用边框样式。1、宽度:定义应用该样式的元素的边框宽度。2、颜色:设定上下左右边框的颜色。3、样式:设定边框线的模式。

列表样式的定义:1、类型:为每行的前面加上项目符号或编号2、项目符号图像:设置以图片作为无序列表的项目符号。3、位置:设置列表项的换行位置。定位样式的定义:

用来定义层在页面中的排版相关属性。1、类型:(1)绝对:相对于页面左上角的绝对位置(2)相对:相对于对象的相对位置(3)静态:在文本层中的位置上放置层2、溢出:定义如果层中的内容超出了层的边界后,会发生什么事情。

扩展样式的定义:

主要包含3方面的CSS支持,分别为CSS鼠标指针、CSS分页及CSS滤镜。只有IE4.0以上支持。1、定义鼠标指针:在该下拉菜单中选择当光标掠过元素时的光标形状。(实例)2、CSS分页:目前没有浏览器支持。3、CSS滤镜:可以使用户通过一些简单的步骤实现复杂的效果。(实例)

Alpha:设置透明效果

Blendtrans:设置混合过渡的效果

Blur:设置模糊效果Chroma:将指定的颜色设置成透明。DropShadow:设置投影阴影FlipH:进行水平翻转FlipV:进行垂直翻转。Glow:设置发光效果。Grayscale:产生灰阶。Invert:设置反转底片效果Light:设置灯光投影效果。

Mask:设置遮罩效果。RevealTrans:设置显示过渡效果Shadow:设置阴影效果Wave:设置水平与垂直波动效果。Xray:设置X光照效果。(只适用于HTML控件对象,如图像、表格、按钮、层等)编辑CSS样式:1、修改CSS样式:2、删除CSS样式:3、复制CSS样式网页动画

Flash是什么第一课:Flash的基本介绍及操作

Flash操作界面介绍

Flash基本工具的使用实例讲解1.1.1Flash是什么一个英文单词:n.闪光,闪现,一瞬间,闪现,反射,使迅速传便,vt.使闪光,反射adj.闪光的,火速的存储芯片的一种,通过特定的程序可以修改里面的数据,闪存。交互式矢量图和Web动画标准。一种集动画创作与应用程序开发于一身的创作软件。二、Flash操作界面介绍菜单栏:提供了Flash的绝大部分动画制作相关的功能。时间轴:用于组织和控制文档内容在一定时间内播放的层数和帧数。各种面板:提供大量的面板用于查看、组织动画中的各种元素。工具箱:提供了菜单栏所不具备的功能,主要用于在舞台上创建并操作对象舞台:是Flash动画制作的平台,全部的动画操作都是在舞台中进行的。三、Flash基本工具的使用:Flash的工具箱共分为六项:选取和变形工具、绘图和文字工具、填充工具、查看工具、颜色工具、选项区1、绘图工具:包括钢笔工具、直线工具、矩形和基本矩形工具、椭圆和基本椭圆工具、多角星形工具、铅笔工具、刷子工具掌握:利用各类绘图工具进行简单动画图形的绘制(1)配合“填充面板”可以设置图形的颜色边框颜色内部颜色(2)配合“属性面板”可以设置图形边框的状态等通过“接合”项,可以设置两笔划交接处的状态。“矩形”和“椭圆形”工具通过属性面板可以设置成其它形状。通过“工具设置”项可以设置多边形及星形2、选取工具:包括选择工具、部分选择工具、套索工具掌握:利用选择工具进行线条的调整进行绘图以及通过部分选择工具进行图形的变化。练习1:利用上述工具对图像进行修改练习2:利用绘图工具绘制以下图形3、填充工具:包括:Deco工具、墨水瓶工具和油漆桶工具掌握:渐变色的填充、图形边框的修改渐变色要配合“颜色面板”4、变形工具:包括任意变形工具、渐变变形工具和3D旋转工具掌握:利用渐变变形工具对填充的颜色进行变化5、吸管和橡皮擦工具掌握:橡皮擦工具各选项的使用设置橡皮擦工具的擦除模式6、文字工具:7、骨胳工具:应用该工具可以控制元件的骨骼联动,同时可以控制单个形状的扭曲及变化。小结在本章中,介绍了Flash菜单的基本功能,并讲述了各种工具的作用与用法,菜单是制作动画时必不可少的工具,虽然有一些功能可以通过面板来实现,但是有一些操作必须通过菜单来完成。工具箱中的工具是使用Flash创作动画的重要工具,所以一定要灵活掌握各种工具的使用方法与技巧,这对提高创作技能是很重要的。

FLASH的基本概念及操作第二课FLASH的基本概念

基本动画的制作FLASH基本动画的制作实例讲解一、Flash的基本概念1、帧:不同的画面按照一定的速度连续播放就形成了动画,这一个个的画面就被称为帧,因此帧就是构成动画的画面。2、关键帧:在动画中直接定义的变化画面(帧)。(按F6键)(关键帧就是发生变化的画面)3、普通帧:是延续它前面关键帧的内容一直到它当前的这一帧。(按F5键)

4、空白关键帧:与关键帧相同,只是这一帧的舞台上没有任何动画对象。(按F7键)5、过渡帧:该类型的帧是指在动画过程中,Flash自己创建出来的帧,在过渡帧中的动画对象也是由Flash自己创建出来的。关键帧普通帧空白帧过渡帧二、帧的编辑1、选择帧:选择单个帧、选择不连续的多个帧、选择连续的多个帧、选择所有帧2、插入帧:插入普通帧、插入关键帧、插入空白帧3、转换帧:选中要转换的帧,单击鼠标右键,在弹出的快捷菜单中选择“转换为关键帧”或“转换为空白关键帧”4、复制/粘贴帧:在时间轴上选择要复制的帧,右击并在弹出的快捷菜单中选择“复制帧”命令,再右击需要粘贴的目标位置,在弹出的快捷菜单中选择“粘贴帧”5、移动帧:选择需要移动的帧,按住鼠标左键拖动到需要的目标位置。6、删除帧:选中要删除的帧,右击并在弹出的菜单中选择“删除帧”命令。注意:使用Delete键进行删除,将只会删除该帧上的内容,不能删除帧,即是清除帧。7、清除帧:就是将帧中的内容去掉,但是该帧还存在。8、翻转帧:把所选帧的位置进行翻转,翻转后的动画将进行反向播放。选择需要进行翻转的多个帧,右击后选择菜单中“翻转帧”命令。三、元件与库1、元件:一个可以重复使用的小部件,可以独立于主动画进行播放。创建的元件都会存储在“库”面板中。2、创建元件的方法:(1)菜单中的“插入”/“新建符号”(Ctrl+F8)(2)在场景中新建了某个元素后选中该符号,再选择菜单中“插入”/“转换为符号”(F8)3、符号的三种类型:(1)图形:是基础的动画符号类型,在场景动画中作为参加者本身是静止的,必须依赖于场景上的时间轴而运动。(2)按钮:作为按钮对象可以创建动画的交互功能,用以响应当前的鼠标事件。(3)电影剪辑:电影剪辑是FlashMX中最复杂的符号,可以将它看作是一个小动画。在场景动画中作为参加者自身是运动的。不依赖于场景上的时间轴。掌握:“图形符号和电影剪辑符号的区别”图形符号是依赖于主时间轴来播放的;而电影剪辑符号是按照自己的时间播放的,与主时间线上发生的时间无关。4、使用场合:(1)图形符号:当对象在场景动画中作为参与者身是一个静止对象时,把该对象定义为图形符号。如图一图一(2)电影剪辑符号:当对象在场景动画中作为参与者自身是运动的动画时,把该对象定义为电影剪辑符号,并把该对象的自身运动动画创建在电影剪辑符号内。如图二图二5、“库”面板是用于保存和管理在Flash中创建各种元件的场所,除了元件外,还保存了在Flash文档中使用的各种资源。6、“库”的基本操作:7、场景是一段相对独立的动画播放的场地,每个场景都可以是一段完整的动画序列。Flash动画可以是一个场景,也可以是多个场景。主要是用来编排动画的播放顺序,可以通过一个场景中帧的顺序进行编排,也可以通过几个场景的顺序进行编排。四、Flash基本动画的制作1、逐帧动画:是最传统的一种动画制作方式,需要对每个变化的画面进行分别绘制,所以要求用户有比较强地逻辑思维和一定地绘图功底。制作逐帧动画时,必须对整个动画的总体有一个清晰的认识,知道在每一帧需要做什么,应该做什么,只有这样,才能够利用Flash完成动画的制作。2、逐帧动画只有关键帧而没有过渡帧,因此绘制不同画面时应该首先在时间轴的某处插入表示变化的关键帧(F6),然后再在场景中进行绘制。3、绘图纸功能:(1)绘画纸是一个帮助定位和编辑动画的辅助功能,这个功能对制作逐帧动画特别有用。通常情况下,Flash在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后,你就可以在舞台中一次查看两个或多个帧了。(2)各个按钮的功能:【绘图纸外观】按钮:按下此按钮后,在时间帧的上方,出现绘图纸外观标记。拉动外观标记的两端,可以扩大或缩小显示范围。【绘图纸外观轮廓】按钮:按下此按钮后,场景中显示各帧内容的轮廓线,填充色消失,特别适合观察对象轮廓,另外可以节省系统资源,加快显示过程。【编辑多个帧】按钮:按下后可以显示全部帧内容,并且可以进行“多帧同时编辑”。【修改绘图纸标记】按钮:按下后,弹出菜单,菜单中有以下选项:【总是显示标记】选项:会在时间轴标题中显示绘图纸外观标记,无论绘图纸外观是否打开。【锚定绘图纸】选项:会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下,绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记,可以防止它们随当前帧的指针移动。【绘图纸2】选项:会在当前帧的两边显示两个帧。【绘图纸5】选项:会在当前帧的两边显示五个帧。【绘制全部】选项:会在当前帧的两边显示全部帧。旋转运动动画第三课FLASH运动补间动画的制作(二)

色彩变化动画实例讲解一、旋转运动动画1、旋转的动画允许设置动画对象旋转一定的角度,也可以按照顺时针或逆时针旋转的方式设置对象旋转,并且可以设置对象旋转的次数。2、选择两个关键帧之间的任意地方,属性栏中“旋转”用于设置对象旋转的动画:“无”:不设定旋转“自动”:可以在需要最少动作的方向上将对象旋转一次。“顺时针”:可以将对象进行顺时针方向旋转,并且在右侧输入旋转资料。“逆时针”:可以将对象进行逆时针方向旋转,并且在右侧输入旋转次数。3、练习1:制作风车动画实例:二、色彩变化动画1、色彩变化的动画就是通过改变两个关键帧中实例对象的颜色属性而产生的动画效果,动画可以是实例对象亮度、色调、Alpha颜色属性的变化,也可以根据需要自己进行颜色的高级设置。2、通过“属性/颜色”进行设置。3、练习2:制作变形心形动画:掌握:(1)心的绘制(2)修改/形状/柔化填充边缘(3)动画之间的衔接根据以上练习,自己完成以下“数字变化”动画沿路径运动动画创建补间动画实例讲解第三课FLASH运动补间动画的制

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论