《网页设计》——页面布局、层、行为及时间轴的使用.ppt

网页设计 * 江西师范大学网页设计课程组 6.1 版 式 6.2 布 局 6.3 利用层精确定位网页元素 6.4 时 间 轴 的 应 用 6.5　 行 为 第6章 页面布局、层、行为和时间轴的使用 网页布局是网页设计的一个重要组成部分，在布局模式中使用表格和布局单元格可以对网页进行排版，利用布局表格的嵌套可以设计复杂的版面，除此之外还可以使用层来布局版面。 第6章 页面布局、层、行为和时间轴的使用 设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、三分栏、四分栏等，搜狐网就是一个三分栏结构，如图6-1所示。 6.1 版 式 把搜狐网版式简化一下，如图6-2所示，这是一个典型三分栏结构，第一行分两列，左边单元格放置Logo图片。右边单元格放入导航菜单，由于栏目比较多，所以分成三行排放，第二行为网页的主题部分，分为三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容，最下面一行放置版权信息。 湖北省精品课程《网页设计与制作》就是一个典型的二分栏的结构,如图6-3所示， Dreamweaver8.0提供了丰富的布局模式,下面我们就利用Dreamweaver8.0提供的布局模式进行网页布局- 6.1 版 式 6.2.1布局表格的绘制 6.2.2布局单元格的绘制 6.2.3嵌套布局表格的绘制 6.2.4 布局单元格和表格的调整 6.2 布 局 Dreamweaver8.0可以方便地在页面上创建层，并精确地定位层，可以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能： ?有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生许多重叠效果 ?可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层，凡是HTML文件可包含的元素均可包含在层中。 ?层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。这样在层中放置一些图片或文本，就能够实现动画效果。 ?层可以转换成表格，为不支持层的浏览器提供解决方法。 ?层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜单。 在HTML中，层的描述如下所示。 div id=layerl style=position:absolute; left:162px; top:247px; width:168px; height:94px; z.index:1/div 6.3利用层精确定位网页元素 6.3.1 层的创建 创建层有如下方法。 1.使用插入菜单 2.使用插入栏 6.3利用层精确定位网页元素 6.3.2 设置层属性 层属性面板主要有以下参数。 ⑴层编号：层的名称，用于识别不同的层。 ⑵左：层的左边界距离浏览器窗口左边界的距离。 ⑶上：层的上边界距离浏览器窗口上边界的距离。 ⑷宽：层的宽。 ⑸高：层的高度。 ⑹Z轴：层的Z轴顺序。 ⑺背景图像：层的背景图。 ⑻可见性：层的显示状态，包括default、inherit、visible和hidden4个选项。 ⑼背景颜色：层的背景颜色。 ⑽剪辑：用来指定哪一部分是可见的，输出的数值是距离层4个边界的距离。 ⑾溢出：如果层里面的文字太多或图像太大，层的大小不足以全部显示的时候，有以下选项: ?visible超出的部分照样显示。 ?hidden超出的部分隐藏。 ?scrool不管是否超出，都显示滚动条。 ?auto有超出时才出现滚动条。 6.3利用层精确定位网页元素 6.3.3层的基本操作 利用层可以精确的定位网页元素，包括如何选择层，设置 层的背景颜色、改变层的可见性等基本操作。 6.3利用层精确定位网页元素 6.3.4 应用层排版 虽然通过层定位网页元素比表格方便很多，但由于受到浏览器版本的限制不是所有的浏览器都支持层，只有IE4.0以上的版本才能支持，Dreamweaver8.0提供了层和表格相互转换功能，可以最大程度方便网页设计，同时兼顾低版本浏览器的访问者。 ⒈将层转换为表格 2.将表格转换为层 6.3利用层精确定位网页元素 给出网页的页面如下： 6.3.5实践技能训练1------利用层布局页面板面 制作后的效果如下： 6.3.5实践技能训练1------利用层布局页面板面 给出的网页如下： 6