用ADiv作页面布局PPT课件

3
4.1 div标记与span标记
10-1.html
4
4.1 div标记与span标记
DIV与span的区别 与 的区别
10-2.html
5
4.1 div标记与span标记
div与span的区别在于，div是一个块级 与 的区别在于， 是一个块级 是一个块级(block-level)元素，它包围的元素会自动换行， 元素， 的区别在于 元素 它包围的元素会自动换行， 仅仅是个行内元素(inline elements),不会换行。span没有结构上的意义，当其 不会换行。 没有结构上的意义， 而span仅仅是个行内元素 仅仅是个行内元素 不会换行 没有结构上的意义 不合适的时候可以换上他，同时div可以是包含 可以是包含span的反之则不行。 的反之则不行。 他元素都 不合适的时候可以换上他，同时 可以是包含 的反之则不行
6
4.2 盒子模型的概念
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容要大。 一般来说这些被占据的空间往往都要比单纯的内容要大。
7
4.2 盒子模型的概念
一个盒子模型由content(内容 、border(边框 、padding(间隙 、 内容)、 边框)、 间隙)、 一个盒子模型由 内容 边框 间隙 间隙)这四部分组成 和margin(间隙 这四部分组成。 间隙 这四部分组成。 一个盒子的实际宽度是有content+padding+border+margin组成的。 组成的。 一个盒子的实际宽度是有 组成的 中可以通过width和height来控制 来控制content的大小，并且对于任何 的大小， 在CSS中可以通过 中可以通过 和 来控制 的大小 一个盒子都可以设置四条边各自的border、padding和margin。只要利用好 一个盒子都可以设置四条边各自的 、 和 。 盒子的这些属性，就能够实现各种各样的排版效果。 盒子的这些属性，就能够实现各种各样的排版效果。

② 按键调整的方法：按住【Ctrl】键，同时按【→】或【←】键，可使 AP Div 水平增加或减少一个像素； 每按【↓】或【↑】键一次，可使 AP Div 垂直增加或减少一个像素；按住【Ctrl+Shift】组合键的同时，按光 标移动键，可每次增加或减少五个像素。
③ 利用 AP Div“属性”栏设置：在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值（单位 是像素），即可调整 AP Div 的宽度和高度。
见，即根据图像大小自动调整 AP Div 的大小，使内容全部显示，为系统默认）、“hidden”（当图像超出 AP Div 的范围后，超出的部分不显示）、“Scroll”（当图像超出 AP Div 的范围后，加滚动条）和“Auto”（根据 AP Div 中的内容能否超出 AP Div 的范围，决定是否加滚动条）四个选项。选择前三个不同选项后，在浏览器中的显示 效果如图 4-1-11 所示。注意：在网页页面设计视图窗口内显示的都与图 4-1-11（a）一样。
所示。单击其中的一个命令，即可获得相应的对齐效果。 例如，选中多个 AP Div，单击“修改”→“排列顺序”→“对齐下缘”命令，即可将各 AP Div 以最后选中
的 AP Div（控制柄是实心）的下边线为基准进行对齐，如图 4-1-8 所示。
图 4-1-7 “排列顺序”的下一级菜单
图 4-1-8 对齐下缘后的多个 AP Div
（6）调整 AP Div 的位置可以采用如下方法：
① 鼠标拖动调整的方法：将鼠标指针移到 AP Div 的边框上，当鼠标指针变为 形状时拖动，即可移动 AP Div。
Байду номын сангаас
② 按键调整的方法：每按一次【→】或【←】键，可使 AP Div 向右或向左移动一个像素；每按一次【↓】 或【↑】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。

7.1.1 在布局模式下绘制表格
1．切换布局模式 在【插入】工具栏上选择【布局】类别。在右边的工具栏上单
击【布局】按钮，弹出一个【从布局模式开始】对话框。按【 确定】按钮即进入“布局模式”中。 2．绘制布局表格 在工具栏的【布局】类别中，单击【布局表格】按钮。鼠标移 到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。 3．绘制布局单元格 在工具栏的【布局】类别中，单击【绘制布局单元格】按钮。 鼠标移到布局表格上或者网页内容下边的空白处时指针变为加 号“+”。拖动鼠标绘制一个布局单元格。 4．绘制嵌套布局表格 绘制嵌套布局表格，就是将一个布局表格绘制在另一个布局表 格中。对外部表格所进行的更改不会影响嵌套表格中的单元格 。
1．设置布局单元格的位置 2．设置布局单元格内容的格式 3．为布局单元格添加间隔图像
7.1.4 课堂实例――用布局表格布局网站主页
要设计一个精美的网页，先要规划好版式。网页中最常用的版式类似 于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通 栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以 竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合 使用，既理性、条理，又活泼而富有弹性。
1．将层转换成表格
2．将表格转换成层
7.3 课堂实例――用层布局 网站首页
前面学习了绘制层和编辑层的方法和技巧，本节利用 层布局一个个性化的网站首页，通过这个具体实例进 一步学习层的应用。
7.3.1 实例效果
这是一个个人网 站首页，充满个 性化的页面效果 活泼可爱，如图 7-79所示。利用 层来布局具有个 性化的网页，灵 活性更强，更容 易设计布局。
1．垂直辅助线 2．水平辅助线 3．缩放和选取工具

在【AP元素】面板中单击AP Div的名称来选定AP Div， 按住Shift键不放依次单击AP Div的名称可以选定多个AP Div。
6、缩放AP Div
选定AP Div，然后拖曳缩放手柄（AP Div周围出现的小 方块）来改变AP Div的尺寸。拖曳上或下手柄改变AP Div 的高度，拖曳左或右手柄改变AP Div的宽度，拖曳4个角 的任意一个缩放点同时改变AP Div的宽度和高度。
任务一 使用AP Div布局页面
（一）创建AP Div （二）设置AP Div
（一） 创建AP Div
1、 AP Div概念的理解 AP Div是一种能够随意定位的页面
元素，如同浮动在页面里的透明AP Div。
2、 首选参数【AP元素】分类设置
3、创建AP Div
选择【插入】/【布局对象】/【AP Div】命令，插入 一个默认大小的AP Div。
选定AP Div，在【属性】面板的【左】和【上】文本框 内输入数值（要带单位，如150px），并按Enter键确认。
8、AP Div嵌套
AP Div是可以嵌套的。在某个AP Div内部创 建的AP Div称为嵌套AP Div或子AP Div， 嵌套AP Div外部的AP Div称为父AP Div。 子AP Div的大小和位置不受父AP Div的限制， 子AP Div可以比父AP Div大，位置也可以在 父AP Div之外，只是在移动父AP Div时，子 AP Div会随着一起移动，同时父AP Div的显 示属性会影响子AP Div的显示属性。
3、Spry折叠式构件
选择菜单命令【插入】/【Spry】/【Spry折叠式】，在页 面中添加一个Spry折叠式构件。
4、Spry可折叠式面板
选择菜单命令【插入】/【Spry】/【Spry可折叠面板】， 在页面中添加一个Spry可折叠面板构件。