Dreamweaver CS3网页设计培训教程电子教案10.pptVIP

10.3.1 知识讲解 1.了解基于CSS的网页布局 2.插入Div标签进行布局 1.了解基于CSS的网页布局 CSS网页布局使用层叠样式表格式（而不是传统的HTML表格或框架）组织网页上的内容。CSS布局的基本构造块是Div标签，它是一个HTML标签，在大多数情况下用做文本、图像或其他页面元素的容器。我们在用Div+CSS进行布局时，将Div标签放在页面上，通过设定各个Div标签的属性（如位置、大小、背景和边距等）来构成页面的区块，再向这些区块中添加内容，从而构成完整的页面。 1.了解基于CSS的网页布局 这种布局方案总体分为两个部分，即CSS样式定义部分和页面中的Div容器部分，CSS代码可嵌在页面内，也可独立创建一个CSS文档，对Div容器的内容显示进行修饰定义。 使用CSS进行网页布局的基本过程如下： （1）构思页面结构，绘制草图。 （2）新建页面和CSS文档，在页面中插入Div标签，并根据草图为每一个Div标签定义样式规则。 2.插入Div标签进行布局 使用Dreamweaver 实现CSS网页布局的关键步骤是对各Div的样式规则进行定义。我们一般在页面中插入Div标签的同时新建相应的CSS样式对该Div标签进行定义；也有的设计人员按照页面Div结构插入所有Div后，再统一定义各Div对应的CSS样式规则。 具体操作请教师参照软件和书中内容进行讲解。 10.3.2 典型案例——制作网站首页 案例目标 本案例将练习使用Dreamweaver实现Div+CSS网页布局 。 10.3.2 典型案例——制作网站首页 操作思路 （1）创建一空白网页并进行保存。 （2）创建一个CSS样式文档，将其保存为“style.css”，并链接到网页中。 （3）在“style.css”中创建“body”样式，定义页面属性。 （4）在页面中插入各Div标签，并定义对应的CSS规则。 （5）添加文本和图片等页面元素。 （6）设置页面顶部导航条的样式。 （7）对页面中的其他元素进行样式修饰，完成页面的制作。 10.3.2 典型案例——制作网站首页 操作步骤 具体操作步骤请教师参照软件和书中内容进行讲解。 10.3.2 典型案例——制作网站首页 案例小结 本案例通过制作网站首页详细介绍了使用Dreamweaver实现Div+CSS网页布局的过程。使用此类技术的设计者一般需要预先进行页面构思，设计好草图后再进行页面设计。在本案例中，两个导航条分别使用Div+CSS和表格两种布局方案，读者可以自行比较和体会两者的优缺点。Div和表格各有优点，一般来说，显示比较有规律而又重复的数据时优先选用表格，尤其是当数据比较多的时候。因此，要善于结合两种技术来进行页面设计。 10.4 上机练习 10.4.1 制作“西藏风情”网页 10.4.2 制作“浮动广告”网页特效 10.4.3 制作“我的地盘”网页 10.4.1 制作“西藏风情”网页 本练习将利用AP Div自由定位网页元素。 10.4.1 制作“西藏风情”网页 操作思路： 为页面添加背景图像。 创建AP Div，并调整AP Div到合适位置。 输入文本，应用文本样式。 10.4.2 制作“浮动广告”网页特效 本练习将为一个产品类网站首页添加浮动广告，实现的效果是广告图片在页面上飘浮。 10.4.2 制作“浮动广告”网页特效 操作思路： 打开首页“fdgg.html”。 新建AP Div，在AP Div中插入广告图片“float.jpg”。 选中AP Div，右键单击AP Div的边框，选择【记录路径】命令，拖动AP Div绘制AP Div的运动路径。 选中复选框及复选框，然后保存文档并进行预览。 10.4.3 制作“我的地盘”网页 本练习将利用Dreamweaver实现Div+CSS网页布局，制作一个个人网站首页。 Dreamweaver CS3网页设计培训教程 第10课 使用AP Div进行网页布局 本课要点 具体要求 本课导读 上机练习 本课要点 AP Div的创建及基本编辑 AP Div的属性设置及高级操作 使用Div+CSS进行网页布局 具体要求 熟悉AP Div的创建方法 掌握AP Div的基本编辑方法 熟悉AP Div的属性设置方法 掌握AP Div的高级操作 掌握AP Div与表格的相互转换 本课导读 AP Div以前被称为“层”，在网页制作中，AP Div的使用非常广泛，能够实现较多的功能，如AP Div的重叠可将多个网页元素重叠在一起，实现特殊的效果；在AP Div中可以放置文本和图像等元素；AP Div可以嵌套；配合行为功能或脚本编码，可以使AP Div在网页中进行移动或变换，使