《网页制作课件DreamweaverCS5网页制作案例教程项目六》由会员分享，可在线阅读，更多相关《网页制作课件DreamweaverCS5网页制作案例教程项目六（20页珍藏版）》请在金锄头文库上搜索。
1、项目六 应用Div+CSS布局网页,任务一 Div+CSS布局基础 任务二 Div+CSS布局中的定位方式 任务三 应用Spry布局对象,任务一 Div+CSS布局基础,任务说明,下面我们首先在“任务实施”中讲解Div+CSS布局的基础知识，如Web标准和Div的概念，以及创建和选择Div的方法等，然后在“任务实施”中通过构建“伊韵”网站主页结构来巩固所学知识。,预备知识,一、Web标准概述,Web标准可从结构、表现和行为三方面来衡量。这些标准大部分由W3C（万维网联盟，World Wide Web Consortium）起草和发布，也有一些是其他标准组织制订的。可以说符合Web标准的网页主要
2、由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。,二、Div简介,Div相当于一个容器，由起始标签和结束标签之间的所有内容构成。在它里面可以内嵌表格（table）、文本（text）等HTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表块来控制。,三、创建Div,Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。,四、选择Div,要对Div执行某项操作，首先需要将其选中。在Dreamweaver CS5中选择Div的方法有两种。,将鼠标光标移至Div周围的任意边框上，当边框
3、显示为红色实线时单击鼠标左键可将其选中。 将插入点置于Div中，然后单击“标签选择器”中相应的标签，同样可将其选中。,任务实施构建“伊韵”网站主页结构,在学习了Div的创建方法后，下面通过构建“伊韵”网站主页的结构，来进一步巩固前面所学知识（具体操作见视频6-1）。,任务二 Div+CSS布局中的定位方式,任务说明,要熟练应用Div+CSS布局网页，必须掌握在页面中定位网页元素的方法。在使用Div+CSS方式布局网页时，我们可以使用多种方式定义Div或其他元素框在页面中的位置，其中最常用的有相对定位、绝对定位，以及浮动定位。,预备知识,一、相对定位与绝对定位,在CSS中用于元素定位的属性是“p
4、osition”，它主要通过两个属性值来进行定位，一个是“relative”，表示相对定位，一个是“absolute”，表示绝对定位，下面分别说明。,1相对定位,相对定位是指通过设置垂直或水平位置，让Div或其他元素框“相对于”设置定位属性之前的位置进行移动，其书写格式为：“position: relative;”，如以下代码。 #lay position:relative; top:80px; left:50px; ,2绝对定位,绝对定位是指以距元素最近的已定位的父级元素为参照来进行定位，如果元素没有已定位的父级元素，那么它的位置将相对于最初的包含块（如页面左上角）进行定位。绝对定位的书写格
5、式为：“position:absolute;”，如以下代码： #lay position:absolute; top:80px; left:50px; ,3在Dreamweaver中定位元素,在新建样式或编辑样式时打开CSS规则定义对话框后，切换到“定位”属性设置界面，在“Position”（位置）属性下拉列表中选择“relative”（相对定位）或“absolute”（绝对定位）属性值，然后在“Placement”设置区设置Top、Right、Bottom或Left值即可（通常设置Top和Left值）。,二、浮动定位,在CSS中，我们可以将任何元素都设为浮动，使元素向左或向右移动，直到它的边
6、缘碰到包含框或另一个浮动元素的边缘为止。如果浮动更多的元素，它们将一个挨一个排列，排列不下的元素将转到下一行继续排列。,任务实施为“伊韵”网站主页设置样式,在学习了Div+CSS布局中的网页元素定位方式后，下面通过为“伊韵”网站主页设置样式（也就是构建表现形式），来进一步巩固前面所学（具体操作见视频6-2）。,任务三 应用Spry布局对象,任务说明,Spry是Dreamweaver内置的代码块，使用它可以在网页中添加Spry菜单栏、Spry选项卡式面板、Spry折叠式和Spry可折叠面板，本任务将分别介绍。,预备知识,一、Spry菜单栏,Spry菜单栏是一系列导航菜单按钮，当光标指向某个按钮时
7、可以弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的导航信息。,二、Spry选项卡式面板,Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后，单击“插入”面板“布局”类别中的“Spry选项卡式面板”即可将其插入。,三、Spry折叠式,Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry折叠式”即可将其插入。,四、Spry可折叠面板,Spry可折叠面板是一个可以在收缩的空间内存储内容的面板，用户可通过单击面板标签来显示或隐藏面板内容。定位插入点后，单击“插入”面板“布局”类别中的“Spry可折叠面板”即可将其插入。,任务实施为“伊韵”网站主页设置特殊效果,下面应用“Spry折叠式”为“伊韵”网站主页设置特殊效果，来进一步巩固前面所学（具体操作见视频6-3）。,
