使用AP Div布局网页 中文版Dreamweaver CS6网页制作课件-PPT课件

1、第第7 7章使用章使用AP DivAP Div布局网页布局网页 中文版中文版Dreamweaver CS6Dreamweaver CS6网页制作课件网页制作课件中文版Dreamweaver CS6网页制作从入门到精通中文版Dreamweaver CS6从入门到精通中文版Dreamweaver CS6网页制作从入门到精通中文版Dreamweaver CS6网页制作从入门到精通7.1.2 创立嵌套AP Div从入门到精通5AP Div可以进行嵌套。在某个AP Div内部创立的AP Div称为嵌套AP Div或子AP Div，嵌套AP Div外部的AP Div称为父AP Div。子AP Div可以浮

2、动于父AP Div之外的任何位置，子AP Div的大小不受父AP Div限制。 中文版Dreamweaver CS6从入门到精通7.2 AP DIV的编辑操作7.2.1 认识“AP 元素面板7.2.2 选择AP Div7.2.3 移动AP Div7.2.4 对齐AP Div7.2.5 调整AP Div的大小7.2.6 设置AP Div的堆叠顺序7.2.7 改变AP Div的可见性中文版Dreamweaver CS6网页制作从入门到精通在Dreamweaver CS6中可选择【窗口】/【AP Div】命令或按“F2键翻开“AP 元素面板。在其中查看当前网页中包含的所有AP Div。7.2.1 认

3、识“AP 元素面板从入门到精通7 中文版Dreamweaver CS6网页制作从入门到精通7.2.2 选择AP Div从入门到精通8 要在网页中使用AP Div进行布局，需要先将其选中。在Dreamweaver CS6中可以分别选择单个和多个AP Div，其方法介绍如下：在编辑窗口中单击要选择的AP Div的边框可选择单个AP Div。在“AP 元素面板中单击要选择的AP Div的名称可选择单个AP Div。按住“Ctrl+Shift键在要选择的AP Div中单击可选择单个AP Div。选择多个AP Div可按住“Shift键后依次在需选中的AP Div中或AP Div边框上单击，也可按住“S

4、hift键后依次在“AP 元素面板中单击需选择AP Div的名称。中文版Dreamweaver CS6网页制作从入门到精通选择需移动的AP Div后，将鼠标光标移到AP Div边框上，当鼠标光标变为 形状时，按住鼠标左键不放进行拖动，到需要的位置后释放鼠标即可。7.2.3 移动AP Div从入门到精通9 中文版Dreamweaver CS6网页制作从入门到精通在网页制作过程中常需要将AP Div进行对齐。AP Div的对齐方式有左对齐、右对齐、上对齐和对齐下缘。在进行对齐的过程中，Dreamweaver CS6会默认以最后选择的AP Div为标准进行对齐。7.2.4 对齐AP Div从入门到精

5、通10 中文版Dreamweaver CS6网页制作从入门到精通在网页制作过程中，常常需要对创立的AP Div大小进行调整，使其符合网页的要求。7.2.5 调整AP Div的大小从入门到精通11 中文版Dreamweaver CS6网页制作从入门到精通7.2.6 设置AP Div的堆叠顺序从入门到精通12 在“属性面板中更改AP Div的堆叠顺序123在“AP 元素面板中更改AP Div的堆叠顺序用菜单命令更改堆叠顺序中文版Dreamweaver CS6网页制作从入门到精通选择需改变堆叠顺序的AP Div后，在“属性面板中的“Z轴文本框中输入所需的数值，大于原数字可将该AP Div在堆叠顺序中

6、上移，小于原数字可将该AP Div在堆叠顺序中下移，完成输入后按“Enter键确认即可。1在“属性面板中更改AP Div的堆叠顺序从入门到精通13 中文版Dreamweaver CS6网页制作从入门到精通翻开“AP 元素面板，在“Z栏中双击需要进行修改的AP Div对应的Z轴值，修改后在空白处单击鼠标即可。2在“AP 元素面板中更改AP Div的堆叠顺序从入门到精通14 中文版Dreamweaver CS6网页制作从入门到精通选择需更改堆叠顺序的AP Div后，选择【修改】/【排列顺序】命令，在弹出的子菜单中选择“移到最上层或“移到最下层命令即可。3用菜单命令更改堆叠顺序从入门到精通15 中文

7、版Dreamweaver CS6网页制作从入门到精通7.2.7 改变AP Div的可见性从入门到精通16隐藏隐藏AP Div1显示显示AP Div2中文版Dreamweaver CS6网页制作从入门到精通选择要设置可见性的AP Div后，在其上单击鼠标右键，在弹出的快捷菜单中选择【可视性】/【隐藏】命令，再在编辑窗口的空白区域单击鼠标左键即可隐藏AP Div。1隐藏AP Div从入门到精通17 中文版Dreamweaver CS6网页制作从入门到精通如果要显示隐藏的AP Div，那么需要在“AP 元素面板中选择隐藏的AP Div，再在选中AP Div上单击鼠标右键，在弹出的快捷菜单中选择“可视

8、命令即可，再在编辑窗口的空白区域单击鼠标左键即可显示AP Div。2显示AP Div从入门到精通18 中文版Dreamweaver CS6从入门到精通7.3 AP DIV的属性设置单个单个AP Div的属性设置的属性设置多多个个AP Div的属性设置的属性设置7.3.17.3.2中文版Dreamweaver CS6网页制作从入门到精通7.3.1 单个AP Div的属性设置从入门到精通20 选择要设置属性的单个AP Div，在“属性面板中进行设置即可。中文版Dreamweaver CS6网页制作从入门到精通如果多个AP Div具有相同的属性需要设置，那么可同时选择这些AP Div，然后再在“属性

9、面板中进行设置。7.3.2 多个AP Div的属性设置从入门到精通21 中文版Dreamweaver CS6从入门到精通7.4 提高实例制作西餐厅网页本章的提高实例中将对“西餐厅网页进行完善，先对网页菜品展示的整体结构进行布局，再对放置菜品图片的地方进行布局。中文版Dreamweaver CS6网页制作从入门到精通7.4.1 行业分析从入门到精通23AP Div布局常被用于进行较为灵活的页面布局，以便根据需要对页面进行调整，如用于放置漂浮在页面上的图片、文本或其他内容，再结合Dreamweaver的其他功能，使其能到达显示/隐藏的效果等。而要将页面的某一局部位置进行固定，那么需要通过Div标签

10、。Div标签是最简单的一种布局标签，通过它与CSS的结合使用，可以将页面划分不假设干个局部，并将每个局部分别固定在特定的位置，以便在其中添加内容。AP Div标签是Div标签的一种较为特殊的格式，通过结合AP Div与Div标签的使用，可以制作出符合用户实际需要的网页。中文版Dreamweaver CS6网页制作从入门到精通7.4.2 操作思路从入门到精通24翻开网页插入Div标签布局页面插入AP Div标签操作思路1234填充并设置AP Div标签中文版Dreamweaver CS6从入门到精通7.5 提高练习制作服装展示网页翻开网页插入AP Div和图像编辑AP Div和图像的大小与位置中文版Dreamweaver CS6从入门到精通7.6 知识问答问：在网页中既可以使用AP Div进行布局，又可以直接通过Div进行布局，它们之间有什么区别吗？问：每次对网页进行布局时，都会花费很多的时间进行构思，有没有什么能提高对页面整体布局的分析能力？中文版Dr