中文DreamweaverCS3案例教程（第二版）作者沈大林等第四章课案.pptVIP

中文Dreamweaver CS3案例教程（第二版） 沈大林 主编 4.1 【案例12】“世界名花—牡丹”网页 案例效果 该网页是利用AP Div编排的网页，AP Div类似于Dreamweaver CS3中的层，可以把它视为一种用来插入各种网页对象，可自由、精确定位和容易控制的容器。 操作步骤 （1）新建一个网页文档，以名称“世界名花—牡丹.htm”保存。 （2）在页面中创建AP Div。 （3）单击AP Div内部，插入“世界名花—牡丹.jpg”文字图像。 （4）创建第2个AP Div，输入文字。 （5）创建第3个AP Div，插入“牡丹.jpg”文字图像。 （6）创建第4个AP Div，输入文字。 （7）将网页文档以名称“世界名花—牡丹.html”保存。 第4章 AP Div、框架与网页布局 相关知识 1．设置AP Div的默认属性 2．AP Div的基本操作 （1）创建AP Div （2）选中AP Div的方法 （3）调整一个AP Div的大小 （4）调整多个AP Div的大小 （5）多个AP Div排列顺序和对齐 （6）调整AP Div的位置 3．AP Div“属性”栏 （1）单AP Div“属性”栏 （2）多AP Div“属性”栏 4.2 【案例13】“不同亮度的重叠图像”网页 案例效果 5个卡通图像重叠在一起，最前面的图像是一个GIF格式的卡通动画，其后面有4幅不同亮度的卡通图像，它们排成斜的一排，较暗的图像在右上方，较亮的图像在左下方。 操作步骤 1．创建和调整AP Div并插入图像 （1）复制4个卡通1.gif，并保存。 （2）新建一个名称“不同亮度的图像.html”文档，创建一个AP Div，插入卡通1.gif图像。 （3）依次创建另外4个AP Div，其名称分别为apDiv2、apDiv3、apDiv4和apDiv5。 （4）单击“修改”→“排列顺序”→“上对齐”菜单命令，使各AP Div的顶部对齐。 2．制作成叠合不同亮度的图像 （1）单击“窗口”→“AP元素”菜单命令。 （2）用鼠标依次移动左边4个AP Div的位置到右边第1个AP Div处，使它们重叠一部分。 （3）设置该AP Div的Z值。 （4）单击其“属性”栏内的“亮度/对比度”完成图像亮度的调整 相关知识 1．“AP元素”面板和改变AP Div的重叠顺序 2．将AP Div转换为表格 单击“修改”→“转换”→“将AP Div转换为表格”菜单命令。 3．将表格转换为AP Div 单击“修改”→“转换”→“将表格转换为AP Div”菜单命令。 4.3 【案例14】“世界名花1”网页 案例效果 网页的上边是标题框架窗口，左边是目录框架窗口，右边用来显示中心内容。单击左边框架窗口内的文字图像，可以在右边的框架窗口中显示相应的内容。 操作步骤 1．准备素材和制作框架内网页 （1）创建一个名称为“LEFT.htm”的网页，在第1行插入“长寿花文字2.gif”图像，按照上述方法，从上到下依次插入多个文字图像 （2）建立“长寿花”文字图像与 “世界名花—长寿花.html”网页的链接。按照上述方法，建立其他文字图像和相应网页的链接。 （3）创建一个名称为TOP.htm的网页。 （4）创建一个名称为RIGHT.html的网页。 2．制作框架集网页 （1）可创建有框架的网页，命名为“世界名花.html”。 （2）将右边分栏框架的默认名称mainFrame改为“main”；在该框架内导入RIGHT.html网页。 （3）将LEFT.htm网页文件导入到左边分栏框架中。 （4）将TOP.htm网页文件导入到上边分栏框架中。 （5）选中整个框架，设置属性。完成框架集文件的保存。 相关知识 1．创建框架和“框架”面板 2．在框架内插入HTML文件 （1）单击网页分栏框架中某一个分栏框架窗口内部，在选中的分栏框架窗口内输入文字和导入对象。然后将该分栏框架中的内容保存为网页文件。 （2）按【Alt】单击一个框架分栏内部，选中相应的分栏框架。 （3）也可以单击“文件”→“在框架中打开”菜单命令。 3．保存框架文件 4．框架集和分栏框架的“属性”栏 4.4 【案例15】“亚洲旅游在线”网页 案例效果 它是整个“亚洲旅游在线”网站的主页。在标题栏下边的左边是导航栏，导航栏中有一些文字图像，单击这些文字图像可以打开相应的网页。该网页中还有链接图像，单击该链接图像，可以进入相应的网页。可以看到，该网页中文字量与图像较多，分栏也较多。 操作步骤 1．使用描图 （1）制作描图的样图 （2）载入描图 （3）可将图像导入网页中 2．布局设计 （1）单击“插入”栏中的“布局”标签。 （2）激活按钮。 （3）创建布局表格。 （4）创建多个布局单元格。 （5）编辑网页布局表