（中职）中文Dreamweaver CS3案例教程（第二版）第四章教学课件.ppt

（中职）中文Dreamweaver CS3案例教程（第二版）第四章ppt课件中文中文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的默认属性2AP Div的基本操作（1）创建AP Div（2）选中AP Div的方法（3）调整一个AP Div的大小（4）调整多个AP Div的大小（5）多个AP Div排列顺序和对齐（6）调整AP Div的位置3AP 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）编辑网页布局表格和调整网页布局表格.。相关知识相关知识1描图（1）将描图与其他对象对齐：载入描图，在网页内插入一个对象，选中网页内的对象（例如，图像或文字等）。单击“查看”“跟踪图像”“对齐所选范围”菜单命令，即可将描图的左上角与选中对象的左上角对齐。（2）显示/隐藏描图：单击“查看”“跟踪图像”“显示”菜单（3）调整描图的位置单击“查看”“跟踪图像”“调整位置”菜单2“插入”（布局）栏简介和网页布局的调整3布局表格和布局单元格的“属性”栏4布局表格和布局单元格菜单5自动伸展和间隔图像