网页制作基础教程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页制作基础教程
一、什么是HTML
HTML（超文本标记语言）是网页中使用的语言，他能被网页浏览器（IE或Netscape）解释，从而显示出丰富多彩的信息（图片、文字、声音、影象、动画等）。
制作网页前首先要弄懂什么是HTML。
在IE中点击"查看"→"源文档"，就能看到该网页的HTML代码。
下面是个网页文档（model.htm）的HTML代码：
<html>
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1><font color="#FF0000">第一段文字。
</font></h1>
<h2><font color="#000099">第二段文字。
</font></h2>
</body>
</html>
【操作】请在记事本中输入以上代码，命名为test1.htm，存于D盘，然后双击打开看看。
标记一般是成对出现的，#FFFFFF表示使用的颜色是白色。
<html>...</html>
<head>...</head>
<title>...</title>之间是该网页的标题
charset=gb2312表示语言字符集信息是中文简体，如big5则是中文繁体。
<body>...</body>之间是网页的正文内容
<body bgcolor="#FFFFFF" text="#000000">表示网页的背景色是白色，默认的文字颜色是白色。
<h1>...</h1>之间是h1号标题字
<h2>...</h2>之间是h2号标题字
<font color="#FF0000">...</font>之间的文字为红色
HTML是一套国际标准，其标记有几百种，您并无需全部了解他们，只要记住其中常用的十几种，就能够做出很漂亮的网页来。
常用的标记举例：
【操作】复制一个jpg格式的图片文档，取名为pic，保存到D盘，在记事本中输入下列语句，命名为test2.htm，存于D盘。
<html>
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#009999" text="#00FF00">
<h1>第二个网页</h1>
<img src="pic.jpg" alt="看到上面的文字吗">
个是Flash 、Firework ），适合专业用户使用 IE 和Netscape 的兼容性
载
东方网页王5.0企业版 国内交大铭泰软件公司的网页制作解决方案，适合初级用户使用 操作简便，形象直观，模板丰富 扩展度不够，制作不
灵活，修改
繁琐
需要另外
购买或下
载
四、Dreamweaver 初步（见演示）
1．工具栏
2．属性栏
3．定义本地站点
4．编辑站点主页
5．定义背景颜色和图象
6．定义页面标题
7．创建
8．编辑表格
五、网页设计配色出色十例
（1） 这是个大型的NBA 。
通常我们经常看到的此类以白色为背景，但是这个却用灰黑色RGB 为（48，48，48/#333333）（以下颜色都用 RGB 表示），文章标题用色为RGB 为（203，201，153/#CCCC99），菜单使用的RGB 为（112，119，112/#707770）。
这 样的配色能够显示独特的个性，又不失大型的风采。
（2）下面是个娱乐类的综合性UGO ，他的配色方案是背景色为黑色RGB 为（0，0，0）中嵌套RGB （0，0，82），字体白色 RGB （255,255,255）,菜单为RGB （77,114,159）。
这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了 互动色彩和青春气息。
（3）下面的这个是大名鼎鼎的微软公司，微软不但软件做的好，连网页制作也是世界一流。
他的每一个网页都是制作的样板。
从网页我们就能够看出微软公司的风格、作风，连同雄厚的实力。
背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色 RGB（200，200，200），字体为黑色RGB（0，0，0）。
（4）现在介绍的相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为 RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。
虽然简单，但颜色搭配很的科学合理。
（5）下面的采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。
主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。
（6）橘红色假如运用得当的话是一种很使用于网页上的颜色。
下面的这个就是个很著名的例子。
他的主色调为RGB（255，151，0）辅助色调为 RGB（255，103，4），菜单RGB为（252，200，0）。
字体使用黑色RGB为（0，0，0）。
此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。
（7）鲜红色也是一种震撼感很强的颜色，假如搭配不当，也可能使没有风格和特点。
下面的这个就是使用红色比较好的。
我们来看看他的颜色搭配。
他使用的主色调是RGB（200，9，0），配以抽象的图像，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。
（8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，假如使用到您的网页中，肯定会给人耳目一新的感觉。
他的主色调为 RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。
这样的搭配显得风格独特，颜色和谐而庄重。
（9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。
他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。
如此简单，但是却栩栩如生，跃然网上。
（10）下面举出这个例子是想证实一个道理――只要您有足够的想象力，您就能够设计出漂亮的网页。
现在在网上很流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。
下面的这个远远的超过了三种颜色，但是她并不失美丽。
因此重要的还是色彩的驾驭能力。
下面这个例子的菜单就使用了7
种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。
十一、制作滚动公告牌
1、在页面上插入一个层，然后为层配置一个背景，作为公告版的框架。
2、然后在创建的层中插入嵌套层，将嵌套层移动到父层的下方。
3、在嵌套层中输入文本，并将其居中排列。
4、打开时间轴面板，将子层作为对象添加到面板中。
5、为子层创建一个向上移动的路径，将其移动到父层的上方。
6、拖动最后一关键帧，增长动画时间，然后勾选“自动播放”和“循环”两项。
7、选定父层，在其属性面板中将“溢出”属性配置为“hidden”。
十二、在页面中运用flash动画
1、点击插入中的Flash按钮，即可为页面插入一个动画。
也能够选菜单插入/媒体/Flash 来完成这一步。
2、选中已插入的动画，看属性面板。
这里能够配置他的宽、高，也能够通过拖动来改变大小。
3、能够在这里点击“播放”来预览动画。
十三、让插入的flash动画变透明
1、当网页上已有背景，或是想要在一X图片上再插入flash动画，而flash动画本身也有背景色，所以会影响美观，这时我们要把他做成透明动画。
2、如在页面上插入一X图像。
3、在图像上插入一个层，在层中插入好所需要的flash动画。
4、选中flash动画，在属性面板中点击“参数”按钮。
5、在“参数”的左面一格输入“wmode”。
在右面“值”一格输入“transparent”。
十四、在页面中播放声音
1、在完成全页面以后，假如要为该页添加背景音乐，注意背景音乐一般是*.midi文档，这样的声音文档十分小，易于快速下载，其他格式不适合作为背景音乐。
2、在页面中任何表格之外，（注意此时编辑窗口左下方的标签选择栏中仅显示<body>这一项，或是在左下角点一下<body>，这样才能确保这个行为是添加在整个页面上的）。
点击行为窗口上的“ ”按钮，（或用菜单窗口/行为，打开行为窗口。
）
3、从弹出菜单中选择“播放声音”。
打开一个对话框。
4、在这个对话框里用“浏览”选择要播放的声音，并确定。
5、这时行为面板上自动显示了事件为onload，动作为播放声音。
点击这一行，中间出现一个按钮。
点击按钮，能够配置这个声音在什么事件下播放。
能够选择“显示事件”/“IE5.0。
6、我们常用的如Onload（当页面载入时）、OnClick（单击鼠标）、OnMouseOver（鼠标移到对象上）、OnUnload(当关闭页面时)等。
7、该行为也能够配置在图片上、文字上。
在文字上播放声音之前，先为文字添加一个空，即选中文字，在一格里输入一个“#”符号。
十五、弹出窗口
1、首先制作一个准备在小窗口中显示的页面（比如 a.htm）,由于这个弹出窗口不能太大，所以内容要少一些。
2、打开一个制作好的页面，把光标移到页面中任何我表格以外，点击行为窗口上的“ ”按钮，从弹出菜单中选择“打开浏览器窗口”一项。
3、在对话框中里输入相应的配置。
要显示的URL即a.htm，窗口宽度和高度自己定，单位为像素。
属性中的各项参数需要就打勾。
4、配置完毕后，点“确定”。
此时行为窗口中将显示打开浏览窗口这个行为，触发条件为Onload，假如不是要这项，就自己配置。
5、该行为也能够配置在图片上、文字上。
6、能够用这个方法来表示对浏览者的打开时的欢迎、公告、离开时的告别语等。
十六、控制状态栏信息
1、打开页面，选中一X图片。
2、点击行为窗口上的“ ”号按钮，选择配置文本/配置状态条文本。
3、在对话框里的“消息”一栏里，输入需要显示的话，如对这X图片的介绍。
4、能够配置行为的触发条件为OnMouseOver（鼠标移到对象上），这样当鼠标经过这
X图片的时候，状态栏将出现相关的信息。
5、假如需要鼠标在移开后，这个信息消失，那么再次使用这个行为，在“消息”一栏里什么都不写，然后把触发条件改为OnMouseOut（鼠标移开）。
6、同样能够在一段文字上配置该行为。
或是配置在整个页面上也能够。
十七、弹出信息
1、打开一个制作好的页面，点左下角<body>项。
点击行为窗口上的“ ”按钮，从弹出菜单中选择“弹出信息”一项。
2、在配置窗口中“消息”一栏里输入想显示的消息即可。
3、触发条件配置为Onload（当页面载入时），就能够用来作为打开页面的欢迎信息。
如设为OnUnload(当关闭页面时)，就能够作为用户关闭页面时送别信息。
4、也能够在某一段文字上配置弹出信息。
比如一段文字不愿让人复制，就选中整段文字，注意此时左下角显示〈P〉，即段落。
5、然后同样操作，消息能够输入之类的语句。
只是配置触发条件为OnBeforeCopy（按右键时触发）,或OnCopy（按右键选复制时触发）。
十八、动态图片按钮
1、准备好两X同样大小的图片，常用的方法是如一X为灰度照片，一X为彩色照片。
或一X是按钮凹下的样式，一X是按钮凸起的样式。
2、举例：插入一个3行1列的表格，配置宽度为180像素。
3、将光标置于第一行，插入一X灰度的图片。
4、在属性面板中“”一栏里输入需要的地址，并给图片加上名称，如tu1.
5、点击行为窗口上的“ ”按钮，从弹出菜单中选择“交换图像”。
6、此时在“图像”一栏中已显示要交换的图像，然后在“庙宇原始档为”一栏里选择好交换后的那X图。
7、下面有两个参数，“预先载入图像”和“鼠标滑开时恢复图像”，都要选中。
8、同样方法创建另外两个动态按钮。
十九、用框架布局页面
框架由两个主要部分组成――框架集和单个框架。
1、点击插入中的框架，即显示出已定义的13种框架的样式。
我们上―中―下结构为例。
2、点击“上―中―下”框架结构的图标，此时在页上插入上下两个框架，将整个页面分割成了3部分。
我们分别在上面输入“上”，在中间输入“中”，在下面输入“下”。
3、先保存一下。
点击菜单中的文档/保存全部。
这时首先保存框架集文档，能够自己修改名字，如kuangjia.htm。
然后将分别保存框架集中的其他页面。
在保存对应的页面的时候，该部分会以虚线框起来，这样可将上面部分保存为shang.htm。
下面部分保存为xia.htm。
中间部分保存为zhong.htm。
4、至此，我们保存了四个页面，分别是框架集，和组成框架集的上、中、下三个页面。
所以，其实这个框架是由四个页面组成的，所以用框架会降低一点用户浏览的速度。
5、点击窗口/其他/框架，打开框架的面板。
在这里单击某个框架，即可选中该框架。
当框架被选中时，编辑窗口中对应的框架出现虚线。
6、如：选中上面topframe,此时属性面板上显示的是上面这个框架的属性。
同样选中中间框架和下面框架，也能够分别配置他们的属性。
7、在编辑窗口中，将鼠标放在两框架之间的边框上，光标将变成上下箭头形，此时点击边框，选中的是整个框架集。
8、此时属性面板上出现的是整个框架组的属性。
能够在此配置框架集是否有边框、宽度及颜色等。
但是最为重要的是能够在这里配置框架集中各个框架的大小。
9、在属性面板的右面的图示上选中上面框架，配置他的行为80像素，边框为0。
10、选中下面框架，配置行高为30像素，边框为0。
11、选中中间框架，配置行高为1，单位为相对。
（相对的意思是：当前行相对于其他行所占的比例。
设为1就是指占据除上和下以后的任何浏览窗口剩余空间。
12、举例：将光标置于上面框架topFrame上，右键选页面属性，配置背景色为#FF6600。
然后插入/表格，插入一个1行2列，边框边距都为0 的表格。
配置第1个单元格的宽度为116像素，然后插入一X图片。
将第2个单元格配置为水平对齐方式为居中，垂直排列方式为底部，然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。
13、将光标置于中部框架mainFrame中，右键选页面属性，配置背景色为#FFFFCC。
然后插入一X大图像。
14、将光标置于下面框架bottomFrame中，右键选页面属性，配置一个背景图像。
15、另外做好三个页面，作为“狮子座”、“魔蝎座”、“双子座”所要的页面。
16、选中“狮子座”，在属性中为他配置好要的页面，然后在“目标”里选“mainframe”，即该内容在中间那个框架中显示。
17、同样配置“魔蝎座”、“双子座”的。
二十、跳转菜单
1、点击主菜单中的插入/表单对象/跳转菜单，也能够用插入/表单，中的跳转菜单图标，来调出跳转菜单配置窗口。
2、首先在“文本”一栏里输入“请选择相关”字样。
然后点击窗口上的“ ”号按钮。
这时菜单里多了一个选项，这个选项没有，仅作为跳转菜单的说明文字。
3、在文一栏里输入需要的，如“新浪”，然后在“选择时，前往URL”一栏里输入地址.sina..，此时，菜单项一栏里又多了一个选项，这个选项对应一个网的地址。
4、使用同样方法，在菜单中添加其他一些选项及对应的。
还能够用“上”“下”的按钮，来调整他们的顺序。
5、配置窗口的“菜单之后插入前往按钮”一项先不要选择。
选中“更改URL后选择第一个项目”一项，这样当使用跳转菜单到某个页面后，假如返回到跳转菜单页面，此时页面中的跳转菜单默认显示的依旧是第1项内容。
6、配置完毕后点击“确定”即可。
****因为跳转菜单是个表单，所以其实是先插入了表单（红色虚线区域），然后在表单中再插入了下拉菜单。
7、想修改选项，能够选中页面上的下拦菜单，此时点击属性面板中的“列表值”，即可修改各项内容了。
8、当选中跳转菜单时，行为窗口中也出现行为。
双击该行为，也能够进入配置窗口，能够重新对其进行配置。
9、假如“菜单项”里的第一项就是，而不是上面所说的一句提示的话，那么就要选中“选项“中的“菜单之后插入前往按钮”。
添加一个“前往”按钮。
二十一、运用插件（Dreamweaver功能扩展）
1、首先下载好需要的插件，此处举例用的是Animate Browser Window。
这是个动态改变窗口的大小的插件。
打开Dreamweaver Extension Manager，安装下载好的插件。
2、启动Dreamweaver，在做好的页面上，右击左下角〈body>，然后点击行为窗口中的“ ”号按钮，在其中选择“Animate Browser Window”，然后在其中做相应的配置。
这里配置窗口打开之前高宽均为0，打开后为填满屏幕。
触发条件为onLoad。
二十二、滚动字幕
1、把光标插入点放在需要插入滚动字幕的地方。
2、点击插入面板的“标签选择器”。
3、选择marquee标签，点击“插入”按钮。
然后关闭“标签选择器”。
4、转换到代码视图。
把光标插入点放在两个marquee标签之间。
5、选择“窗口”/“标签检查器”。
能够在“标签检查器”中配置标签的各种用法。
6、点击behavior配置项右边的下拉箭头，选择滚动字幕内容的运动方式。
其中三个选项意思分别是：Alternate：内容在相反两个方向滚来滚去。
Scroll：内容向同一个方向滚动。
Slide：内容接触到字幕边框就停止滚动。
7、direction属性配置字幕内容的滚动方向。
四个选项意思为：down：向下运动。
Left：向左运动。
Right：向右运动。
Up：向上运动。
8、scrollamount属性配置字幕滚动的速度。
一般设为1。
9、scrolldelay属性配置字幕内容滚动时停顿的时间，单位为毫秒。
假如要让滚动看起来流畅，数值应该尽量小。
实例中配置为1毫秒。
10、width属性配置滚动字幕的宽度。
这个任意，比如配置为300。
11、onMouseOver事件配置鼠标移动到滚动字幕时的动作，常配置为停止滚动。
onMouseOut事件配置鼠标离开滚动字幕时的动作，常配置为开始滚动。
这个两项不能选，只能手工输入。
在onMouseOver后面输入“this.stop();” 在onMouseOut后面输入“this.start();”
12、style属性配置字幕内容的样式。
实例中配置字幕文字大小，也要手工输入“font:12px;”。
13、loop属性配置字幕内容滚动次数，默认值为无限。
“-1”也为无限。
14、全部代码：<marquee behavior="scroll" direction="left" width="300" loop="-1" scrollamount="1" scrolldelay="1" style="font:12px;" onMouseOver="this.stop();" onMouseOut="this.start();">滚动字幕内容</marquee>
二十三、创建CSS样式表
1、在网页上输入一些文字。
2、打开“CSS样式”面板，也能够用“窗口/CSS样式”打开。
3、面板下方有四个按钮，分别是附加样式、新建样式、编辑样式、删除样式。
4、点击“新建样式”，打开对话框。
输入名称，注意名称前有一个点号。
如取名为.zi(中文名不行)。
类型：创建自定义样式，定义在：仅对该文档。
5、此时再打开一个对话框，在左边的分类里选择“类型”，然后在右面配置字体为宋体，大小为14像素，颜色任意。
然后确定。
6、选中页面上的文字，然后点击窗口里的样式.zi。
此时这段文字就应用了CSS样式。
7、如要对刚才定义的CSS样式进行修改，能够点中他，然后点下面的编辑样式按钮。
二十四、创建动态样式表
1、点击“新建CSS样式”对话框，在“定义在”一栏选择“仅对该文档”，在“类型”一栏里选择“使用CSS选择器”。
2、当样式表类型选择“使用CSS选择器”时，下拉菜单的名字变成了“选择器”，表示输入内容为CSS选择符，单击下拉按钮，能够看到动态的4种状态。
a:link――终极的正常状态；a:visited――访问过的终极状态。
a:hover――光标移至终极上时的状态；a:active――选中终极的状态。
3、接下来对这几种状态分别设定，首先从下拉菜单中选择a:link，点击“确定”按钮后弹出样式表配置窗口，设定该样式无下划线，颜色为#FF6600（橙色）。
4、用同样方法设定a:visited，设定其为无下划线，颜色为#FFFF00（黄色）。
5、接下来设定a:hover，设定其为有划线，颜色为#FF6600（橙色）。
6、a:active不用配置，他会自动依照a:hover而定。
7、在网页上输入一句话，在属性面板中设定他的为“#”。
即可。
****注意：必须按照这样a:link、a:visited 、a:hover 、a:active的顺序来配置，否则不会出现预期的效果。
假如我们需要一个页面上有两个或更多的效果，能够用以下方法：
1、点击新建样式按钮，样式类型选“使用CSS选择器”，在“选择器”一栏里，直接输入a.link2:link，接着配置a.link2:link为红色无下划线。
2、继续定义下面两个样式。
名称都直接输入，分别设定他们为a.link2:visited，紫色无下划线。
a.link2:hover，蓝色有下划线。
3、此时在“CSS样式”选项下多了一个名称为link2的自定义样式。
4、在页面中输入一段话，为他添加一个#，选中这个，然后点击样式表窗口中的样式link2，将此样式应用在该上。
5、同样方法能够制作同一页面上的不同格式。
****为保持一种风格，同一页面上不宜建立过多的样式。
二十五、外部样式表
***在不同的页面中应用相同的样式表。
1、新建样式表，取名，然后类型选“创建自定义样式”，定义在选“新建样式表文档”。
2、确定后，打开保存外部样式表的窗口。
然后把他保存到本地站点中即可。
3、此时，能够看到样式表窗口中新增了一个样式表文档，文档的后缀名为css
4、假如当前页面中的一个内部样式表要导出为外部样式表文档，以便供其他页面使用，能够点击样式表窗口右上角的灰色的图标，选“导出样式表”，此时能够为样式取名和保存为一个外部文档。
5、当其他页面需要使用外部样式表时，能够点样式表窗口中的第一个按钮“附加样式表”，打开窗口，然后选择外部样式表文档，在添加为里选“”，确定即可。
二十六、其他CSS
****CSS里的背景，是配置文字背景、表格背景图等。
****CSS里的区块，是指配置文本的文字间距、对齐方式、下标、上标、排列方式等。
****CSS里的盒子，是指配置图片和文本内容之间的空白距离，连同图文混排的方法。
****CSS里的边框，是指配置表格文本区、按钮等的美化。
****CSS里的列表，是指配置列表项样式。
即那种提纲式的一段话。
****CSS里的定位，是指配置页面中图片的相对和绝对定位。
****CSS里的扩展，其中的光标，能够配置光标的样式，能够配置为hand（手型）、crosshair（十字型）、text（“I”型）、wait（等待型）、default（默认型）、help（帮助型），更有各种方向的箭头型。
****CSS里的扩展，其中的过滤器，能够用来做CSS滤镜特效，即用来加工图片的透明、发光等。
但效果不太明显，还是用专门加工图片的软件来完成比较好。
二十七、创建网上相册
1、首先要安装好FireworksMX软件。
2、加工好所需要放在网上的照片，把他们加工成相同大小，放在一个文档夹里。
3、点击菜单中的命令/创建相册，打开配置窗口。
4、输入相册标题，副标信息，其他信息（以后也可再修改）。
“源图像文档夹”，选择刚才保存照片的文档夹。
5、“目标文档夹”，单击“浏览”按钮选择当前站点目录。
（即将照片全部保存到站点里来）
6、“缩略图大小”一项，能够根据需要选择，“显示文档名称”一项，选中会在生成的相册中显示每个图片的文档名。
7、“列”一格是每一行显示的图片数，默认为5，能够自己改变。
8、下面两个“格式”一般都选“品质较高”。
9、选中“为每X图片建立导览页面”一项。
确定即可。
二十八、定制网页过渡功能
*****网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如卷动、百叶窗等。
网页看起来会更具备动感，但是也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。
步骤：
1、打开一个页面，单击菜单中的插入/文档头标签/Meta，会弹出Meta对话框。
2、在对话框中的属性选项的下拉列表中选HTTP-equivalent选项，在值一格中键入Page-Enter，表示进入网页时有网页过渡效果。
3、在内容一格中键入Revealtrans(Duration=4,Transition=2),Duration=4 表示网页过渡效果的延续时间为4秒，Transition表示过渡效果方式，值为2时表示圆形收缩。
4、输入完后单击确定，存盘。
这样当我们点击一个超进入这个页面时就能够看到效果了。
5、另外更有二十多种效供您选择，只要将Transition的值改为相应的效果的代号即可，具体效果和配置如下表所示
效果Transition 效果Transition
盒状收缩0 溶解12
盒状展开1 左右向中部收缩13
圆形收缩2 中部向左右展开14
圆形展开3 上下向中部收缩15
向上擦除4 中部向上下展开16
向下擦除5 阶梯状向左下展开17
向左擦除6 阶梯状向左上展开18
向右擦除7 阶梯状向右下展开19
垂直百叶窗8 阶梯状向右上展开20
水平百叶窗9 随机水平线21
横向棋盘式10 随机垂直线22
纵向棋盘式11 随机23
二十九、库的应用
****中有些内容需要反复使用，比如自己制作的一个图标等，此时将这个组件存为在库里，能够随时调用。
1、打开一个页面，选择需要保存的组件，比如一个图标。