《第7章使用AP-Div布局网页-中文版Dreamweaver-CS6网页制作课件.ppt》由会员分享,可在线阅读,更多相关《第7章使用AP-Div布局网页-中文版Dreamweaver-CS6网页制作课件.ppt(27页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 第7章使用AP Div布局网页中文版Dreamweaver CS6 从入门到精通本章导读AP Div的创建12AP Div的编辑操作3AP Div的属性设置从入门到精通 2 清华大学出版社7.1 AP Div 的创建AP Div 的创建7.1.1 创建AP Div 7.1.2 创建嵌套AP Div在Dreamweaver CS6 中 创 建AP Div的 方 法 很 简单,既 可 直 接 通 过 菜 单 栏 进 行 插 入,也 可 通过“布局”选项卡进行绘制。7.1.1 创建AP Div 从入门到精通 4 清华大学出版社7.2 AP Div 的编辑操作7.2.1 认识“AP 元素”面板7.2
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 中可选择【窗口】/【AP Div】命令或按“F2”键打开“AP 元素”面板。在其中查看当前网页中包含的所有AP Div。7.2.1 认识“AP 元素”面板 从入门到精通 7 清华大学出版社7.2.2 选择AP Div 要在网页中使用AP Div 进行布局,需要先将其选中。在Dreamweaver CS6 中可以分别选择单个和多个AP Div,其方法介
3、绍如下:在编辑窗口中单击要选择的AP Div 的边框可选择单个AP Div。在“AP 元素”面板中单击要选择的AP Div 的名称可选择单个AP Div。按住“Ctrl+Shift”键在要选择的AP Div 中单击可选择单个AP Div。选择多个AP Div 可按住“Shift”键后依次在需选中的AP Div 中或AP Div 边框上单击,也可按住“Shift”键后依次在“AP 元素”面板中单击需选择AP Div 的名称。从入门到精通 8 清华大学出版社在网页制作过程中常需要将AP Div 进行对齐。AP Div 的对齐方式有左对齐、右对齐、上对齐和对齐下缘。在进行对齐的过程中,Dreamwe
4、aver CS6 会默认以最后选择的AP Div为标准进行对齐。7.2.4 对齐AP Div 从入门到精通 10 清华大学出版社在网页制作过程中,常常需要对创建的AP Div大小进行调整,使其符合网页的要求。7.2.5 调整AP Div 的大小 从入门到精通 11 清华大学出版社选择需改变堆叠顺序的AP Div 后,在“属性”面板中的“Z 轴”文本框中输入所需的数值,大于原数字可将该AP Div 在堆叠顺序中上移,小于原数字可将该AP Div 在堆叠顺序中下移,完成输入后按“Enter”键确认即可。1 在“属性”面板中更改AP Div 的堆叠顺序 从入门到精通 13 清华大学出版社选择需更改堆
5、叠顺序的AP Div 后,选择【修改】/【排列顺序】命令,在弹出的子菜单中选择“移到最上层”或“移到最下层”命令即可。3 用菜单命令更改堆叠顺序 从入门到精通 15 清华大学出版社7.2.7 改变AP Div 的可见性隐藏AP Div 1显示AP Div 2从入门到精通 16 清华大学出版社如果要显示隐藏的AP Div,则需要在“AP 元素”面板中选择隐藏的AP Div,再在选中AP Div上单击鼠标右键,在弹出的快捷菜单中选择“可视”命令即可,再在编辑窗口的空白区域单击鼠标左键即可显示AP Div。2 显示AP Div 从入门到精通 18 清华大学出版社7.3 AP Div 的属性设置单个
6、单个AP Div AP Div 的属性设置 的属性设置多个 多个AP Div AP Div 的属性设置 的属性设置7.3.17.3.17.3.2 7.3.2从入门到精通 清华大学出版社7.3.1 单个AP Div 的属性设置 选择要设置属性的单个AP Div,在“属性”面板中进行设置即可。从入门到精通 20 清华大学出版社如果多个AP Div 具有相同的属性需要设置,则可同时选择这些AP Div,然后再在“属性”面板中进行设置。7.3.2 多个AP Div 的属性设置 从入门到精通 21 清华大学出版社7.4 提高实例制作西餐厅网页本章的提高实例中将对“西餐厅”网页进行完善,先对网页菜品展示的
7、整体结构进行布局,再对放置菜品图片的地方进行布局。从入门到精通 22 清华大学出版社7.4.2 操作思路打开网页插入Div标签布局页面插入AP Div标签操作思路1234填充并设置AP Div标签从入门到精通 24 清华大学出版社7.5 提高练习制作服装展示网页打开网页插入AP Div和图像编辑AP Div和图像的大小与位置从入门到精通 25 清华大学出版社7.6 知识问答问:在网页中既可以使用AP Div进行布局,又可以直接通过Div进行布局,它们之间有什么区别吗?问:每次对网页进行布局时,都会花费很多的时间进行构思,有没有什么能提高对页面整体布局的分析能力?从入门到精通 26 清华大学出版社