33-Dw网页布局与定位技术.ppt

网页布局与定位技术,要点和概念： 网页中的对象欲随意摆放必须采用布局定位技术 网页布局通常采用： 表格(Table)： 表格套表格，再在单元格中插入对象进行定位的 层表格(LayerOut Table)： DW提供的专用于布局的技术，结果同表格 框架(Frame)： 框架是另外一种布局定位技术，它使用不同页面同在一个说明页面按照一定排列方式组合而成 层(Layer)： 用于相同页面上相同位置重叠显示对象的技术，当然也可以用来布局和定位 本节小结,网页布局与定位技术,利用表格进行页面布局 单击 表格 图标，利用表格套表格的方式实现布局，利用合并拆分进行最后布局，定位 可以在DW的布局视图下直接画表格、单元格，表格可以一直套画下去，单元格是最终结果，不能再划分了 利用表格进行数据的规则排列 先用记事本建立数据列表，而后直接插入/表格对象/导入表格式数据 再通过选设即可 利用表格增加网页的层次 每一层表格，将产生一个表格背景和单元格背景，可以设置背景图像和背景颜色以丰富层次 利用表格修饰 表格可以将边框设置为0的数值产生边框作用，可以清晰布局或修饰 插入单元格中的对象尺寸一定要小于或等于此单元格，否则将发生单元格撑破的现象！非连续单元格不能合并。,网页布局与定位技术,网页布局是在DW下的特殊制作手法，单击插入/布局/布局视图，建议多用布局方法 用表格图标绘制表格，再在其中绘制表格，形成表格嵌套技术将一个页面分割成不同小区块 当最后大小时，需要用单元格图标绘制单元格，单元格不能再布局视图中分割了 当需要制作页面时，回到 标准视图/常用 进行制作 当需要修改布局时，必须回到布局视图，删除单元格甚至布局表格，而后重新进行布局绘制 当布局居中后，左右留出空位(布局小于浏览器窗口)，可以采用对称对联进行遮羞的方法。或者插入一个较宽的背景图片，背景图片两边是一些图片或文字说明，起到遮羞的作用。 例1 例2,网页布局与定位技术,框架网页是一种特殊的HTML网页，它可将浏览器窗口分为不同的区域，在每一个区域中显示一个网页。框架在规范页面布局、提高页面传输效率等方面有很重要的作用。它是用一个说明页和对应的框架页组成的 框架的创建： 单击菜单文件/新建，类别=框架集/框架集=选择 单击菜单 文件/保存全部，将在DW编辑窗口看到虚线框表明保存的框架部位，通常是：声明页、mainFrame页、leftFrame页、topFrame页；三栏框架存四页 注意： 框架页的制作是普通页在框 架中单独制作 此框架页有四页？ 超级链接目标后，必须设置 目标框架位置 从框架页返回单一页面时， 必须设置目标位置为_top,网页布局与定位技术,层是网页制作中的一个技术，可以完成布局、对象重叠在一起、产生行为动作等 层布局 利用层布局一定要将层面板中的防止 重叠勾选 层有丰富的属性设置，可以以此设置产生各种各样不同的效果 层有Z-index属性，当其中的数值0时，在页面的上边，层之间数值越大越先看见；当数值0时，在页面的下边，数值越大越后看见 层修饰 层的嵌套可以产生诸如背影，阴影等效果 层可以作为对象采用脚本语言控制，此处不讲层脚本技术的应用 层象表格一样，可以在其中插入任何对象 由于层是漂浮在页面的上或下的因此注意定位问题 并不是所有的浏览器都支持层，请注意。,网页布局与定位技术,小结,网页布局与定位技术,小结： 表格、框架、层表格、层都广泛用于网页中的布局定位 Dw可以将规则排列的纯文本文件数据转换成网页的表格 表格、框架、层都可以增加页面的层次，可以对图像进行修饰。 框架页面的制作与单页面的制作在许多地方是不一样的，框架页面要注意框架页名称和框架页面之间的关系。制作框架页 ，应考虑到无法浏览框架页的浏览器，所以尽量制作非框架页。 框架的边框线、框架大小可调整否、滚动条等均可以设置。 在个人网页中，色彩、构图、布局等通常比较鲜艳活泼，不拘一格；在较专业的网站上其色彩、布局等就比较讲究，按照网站的性质可以灵活应用色彩、布局，一般采用色系的方案。 层是DW设计制作网页布局中非常有用的手段之一。,