《网页设计与制作案例教程》

(第3版)http://www.
phei.
com.
cn第10章使用Div布局网页《网页设计与制作案例教程》(第3版)导读网页布局是网页设计的核心工作,选择好的网页布局方式至关重要.
采用传统的表格布局、框架布局方式,使得网页的制作、修改、维护和更新复杂,代码杂乱无章.
基于WEB标准的网页设计的核心理念在于内容与形式的分离.
以Div标签为代表的区块标签的引入,凭借CSS强大的样式设置功能,布局的网页更加规范,浏览器加载更快,受到业内人士的欢迎.
HTML5+CSS3标准的正式提出,使得网页设计迈进了崭新时代.
《网页设计与制作案例教程》(第3版)本章主要内容APDiv的基本操作;Div与APDiv的区别与联系;Div与Span标记的区别与联系;盒子模型;CSS的定位属性;常用布局版式及应用.
《网页设计与制作案例教程》(第3版)10.
1案例1使用APDiv布局电影资讯网页学习目标在DreamweaverCS6中,创建APDiv元素,在其内部插入文字和图像,并使用CSS设置网页元素的属性.
知识要点APDiv及其特点;APDiv面板的属性设置;在APDiv中插入文字和图像;创建嵌套APDiv并设置其排列次序;使用CSS设置网页元素属性.
《网页设计与制作案例教程》(第3版)10.
1.
1APDiv概述Dreamweaver将具有绝对位置属性的div标签视为APDiv,也称为AP元素.
在DreamweaverCS6环境下,可以使用APDiv灵活方便的定位网页中的元素.
网页元素放在APDiv中,通过控制APDiv的位置、堆叠次序、显示或隐藏等属性,从而实现网页的精确布局.
10.
1案例1使用APDiv布局电影资讯网页《网页设计与制作案例教程》(第3版)10.
1.
1APDiv概述APDiv最主要的特性在于它是浮动在网页内容之上的,因而不受网页中其他元素的影响,可以实现对APDiv元素的精确定位.
通过定义APDiv的堆叠次序,可以实现文字阴影等效果;通过设置APDiv元素的显示或隐藏属性,可以实现APDiv内容的动态交替显示等动态效果.
APDiv的属性可以通过"属性"面板或"AP元素"面板进行设置.
10.
1案例1使用APDiv布局电影资讯网页《网页设计与制作案例教程》(第3版)10.
1.
2APDiv元素的"属性"面板在Dreamweaver中,可以通过"插入"面板中的"布局"选项卡创建APDiv,也可以使用"插入→布局对象→APDiv(A)"创建.
选中创建后的APDiv元素,可在"属性"面板设置其属性.
10.
1案例1使用APDiv布局电影资讯网页《网页设计与制作案例教程》(第3版)10.
1.
3"AP元素"面板在Dreamweaver中,可以通过"AP元素"面板对APDiv元素进行重命名、设置APDiv属性、设置APDiv元素叠放次序、修改APDiv元素的可见性.
在Dreamweaver中,选择"窗口→AP元素"菜单命令或按键,均可打开"AP元素"面板.
10.
1案例1使用APDiv布局电影资讯网页《网页设计与制作案例教程》(第3版)10.
1.
4在APDiv中添加网页元素首先在文档中创建四个APDiv,分别调整其位置,然后依次添加图像和文字.
通过设置标题文字的属性及叠加次序,实现文字的阴影特效.
10.
1案例1使用APDiv布局电影资讯网页《网页设计与制作案例教程》(第3版)10.
1.
4在APDiv中添加网页元素案例小结使用APDiv可以布局网页,由于APDiv位置可以随意控制,因此布局较为简单.
本案例介绍在网页中插入APDiv元素并设置其属性的方法,重点是嵌套APDiv的创建步骤,以及通过设置APDiv的堆叠次序,实现文字阴影特效的方法.
10.
1案例1使用APDiv布局电影资讯网页《网页设计与制作案例教程》(第3版)10.
2学习任务:使用CSS+Div布局网页基础CSS布局的基本元素是Div标签,它是文本、图像或其它页面元素的容器.
使用CSS布局网页时,首先创建Div标签,然后在标签中添加内容并设置其CSS样式.
可以用绝对方式(指定x和y坐标)或相对方式(指定与其它页面元素的距离)来定位Div标签.
还可通过指定浮动、填充和边距设置Div标签之间的位置关系.
《网页设计与制作案例教程》(第3版)学习目标了解APDiv与Div以及span与Div的区别与联系,了解Div标签在网页布局中的重要作用,掌握网页布局的盒子模型,掌握网页元素的定位方式,掌握CSS网页布局技巧及常用布局类型.
知识要点Div标签,盒子模型,与网页元素定位相关的CSS样式规则:float、position、z-index,网页布局技巧,常用CSS+DIV网页布局版式.
10.
2学习任务:使用CSS+Div布局网页基础《网页设计与制作案例教程》(第3版)10.
2.
1APDiv标签与Div标签在Dreamweaver中可以通过"插入"面板创建Div元素.
在"插入"面板中,选择"布局"选项卡,可以展开"布局"工具栏.
在"标准"模式下,和Div标签有关的是"插入Div标签"按钮和"绘制APDiv"按钮.
"插入Div标签"按钮:单击此按钮,在文档中插入一个Div标签.
10.
2学习任务:使用CSS+Div布局网页基础《网页设计与制作案例教程》(第3版)10.
2.
1APDiv标签与Div标签"绘制APDiv"按钮:单击此按钮,将鼠标指针移到文档窗口中,鼠标指针变为"+"字状,按下鼠标并拖曳出一个APDiv元素.
在Dreamweaver中分别插入Div标签和APDiv元素.
在设计视图中,Div标签由虚线框表示,而APDiv是实线框.
用鼠标拖动标签,发现Div标签的位置不可移动,而APDiv可以任意移动位置.
10.
2学习任务:使用CSS+Div布局网页基础《网页设计与制作案例教程》(第3版)10.
2.
2Div标签与span标签在HTML中,Div与span是常用标签.
使用CSS控制其样式,可以实现各种布局效果.
Div标签在HTML3.
0时代就已出现,直到CSS引入后才逐渐发挥其优势.
span标记直到HTML4.
0时才被引入,是专门针对样式表而设计的标记.
Div是区块容器标记,可以容纳文字、图片、表格等各种网页元素.
在使用时,可以将Div中的内容视为独立的对象,通过定义Div的CSS样式,可以控制内部元素的显示效果.
10.
2学习任务:使用CSS+Div布局网页基础《网页设计与制作案例教程》(第3版)10.
2.
2Div标签与span标签span标记作为容器被广泛应用于HTML语言.
在span标签中同样可以容纳各种HTML元素.