实战Dreamweaver CS5 网页制作教程 第2版 教学课件 作者 刘天真 第6章 Div元素及布局应用.pdf

第6章　Div元素及布局应用 第6章　Div元素及布局应用 学习目标 学习目标 能够完成AP Div元素的基本操作。 能够完成AP Div元素的基本操作。 能够完成AP Div元素的属性设置方法。 能够完成AP Div元素的属性设置方法。 掌握“AP元素”面板的使用方法。 掌握“AP元素”面板的使用方法。 能够使用AP Div元素进行页面布局。 能够使用AP Div元素进行页面布局。 能够实现AP Div元素与表格相互转换。 能够实现AP Div元素与表格相互转换。 能够利用AP Div元素使用相对定位的方式完成网页布局。 能够利用AP Div元素使用相对定位的方式完成网页布局。 能够规划网页布局。 能够规划网页布局。 能够使用Div+CSS布局网页。 能够使用Div+CSS布局网页。 6.1 第6章　Div元素及布局应用 第6章　Div元素及布局应用 本章内容 本章内容 6.1　AP Div元素的建立、编辑及排版应用 6.1　AP Div元素的建立、编辑及排版应用 6.2　使用AP Div元素布局网页 6.2　使用AP Div元素布局网页 6.3　使用Div+CSS布局网页 6.3　使用Div+CSS布局网页 6.2 第6章　Div元素及布局应用 第6章　Div元素及布局应用 6.1　AP Div元素的建立、编辑及排版应用 6.1.1案例制作：旅行家 6.1.1案例制作：旅行家 　　通过本案例的操作，你将学会如何绘制AP Div元素，如何设置AP Div元素的属性， 　　通过本案例的操作，你将学会如何绘制AP Div元素，如何设置AP Div元素的属性， 如何对AP Div元素进行选取、移动、大小调整及对齐等操作。 如何对AP Div元素进行选取、移动、大小调整及对齐等操作。 6.3 第6章　Div元素及布局应用 第6章　Div元素及布局应用 6.1　AP Div元素的建立、编辑及排版应用 6.1.1案例制作：旅行家 6.1.1案例制作：旅行家 操作步骤： 操作步骤： （1）规划站点 新建文件夹“traveller”，将素材文件夹中所有文件和文件夹拷贝到 （1）规划站点 新建文件夹“traveller”，将素材文件夹中所有文件和文件夹拷贝到 “traveller”文件夹中。 “traveller”文件夹中。 （2 ）定义站点 在Dreamweaver CS5 中，单击菜单“站点”→“新建站点”命令，通过“站点 （2 ）定义站点 在Dreamweaver CS5 中，单击菜单“站点”→“新建站点”命令，通过“站点 设置对象”对话框定义站点，站点名称为“旅行家”，本地站点文件夹设置为“traveler”文 设置对象”对话框定义站点，站点名称为“旅行家”，本地站点文件夹设置为“traveler”文 件夹。 件夹。 （）网页布局：LOGO部分 3