《页面布局设计》PPT课件.ppt

《《页面布局设计》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《页面布局设计》PPT课件.ppt（40页珍藏版）》请在三一办公上搜索。

1、第7章页面布局设计,目录,1、用表格定位页面元素2、使用层定位页面元素3、创建框架页面4、单元同步练习,可视化助理,使用【标尺】功能使用【网格】功能使用【跟踪图像】功能,7 页面元素定位技术,要设计一个页面，就要涉及到很多页面元素，例如图像、文本、表格、动画、视频等等。如何将这些页面元素有机的组合起来，达到满意的视觉效果，这不仅需要页面元素有自身的特点，还必须把这些元素放在合适的位置上，这就是页面元素的定位，或称页面布局。目标：在本章的学习中我们将具体介绍Dreamweaver提供的几种页面元素的定位方法。第一种是用表格定位页面元素，第二种是用层定位页面元素，第三种是创建框架页面。,7.1 用

2、表格定位页面元素,采用表格进行页面布局，可以简洁明了和高效快捷的将文本、图片和多媒体对象等页面元素有序地显示在页面上，从而设计出版式美观的页面效果。,7.1.1 关于表格,表格的实质是把页面的某个空间区域划分为若干行和列，其中的每一“格”称为表格单元。在网页设计中，表格除了可以用来存放表格化的数据外，它还是重要的页面布局工具，可以用来定位页面元素，如设计页面分栏，定位页面上的文本和图像等等。,7.1.2 表格的基本操作,要熟练运用表格进行页面布局，必须学会表格的创建、编辑方法，以及表格和表格单元属性设置操作技巧。1创建表格表格宽度：指定以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边

3、框粗细：指定以像素为单位的表格边框宽度。当没有明确指定边框粗细时，大多数浏览器默认边框宽度为1像素。如果不需要边框请输入0。单元格边距：指定单元格内容与单元格边框线之间的距离，默认间距为1像素，如果不需要边距请输入0。单元格间距：指定单元格与单元格之间的距离，默认间距为2个像素，如果不需要间距请输入0。,7.1.2 使用表格定位页面元素,2表格的基本操作 在创建表格之后，常常需要对表格作进一步的处理，如改变表格大小、扩充表格、合并或拆分单元格等等，以便更好地定位页面元素。（1）选择整个表格和调整表格的大小（2）选择和删除行或列（3）选择、合并和拆分单元格（4）嵌套表格（5）设置表格或单元格的背

4、景颜色,制作基本的数据统计表,7.1.3 表格的属性设置,1设置表格属性行和列，宽，填充和间距，对齐和边框等。2设置列、行和单元格属性 使用属性面板的扩展部分可以设置以下属性：水平，垂直，宽高，不换行，标题，背景颜色等。,7.1.4 使用表格定位页面元素,3使用表格定位页面元素 表格由于具有比较规范的格式，对于整齐排列页面元素非常有效，下面通过一个具体的实例介绍使用表格设计一个页面的方法。,图1 表格布局页面元素,7.1.5 归纳与思考,有了表格，我们就可以轻松实现网页元素的页面定位，设计出整齐美观的网页来。要能熟练运用表格进行网页布局，必须掌握表格的基本操作，包括表格的创建、调整，单元格的选

5、取、拆分、合并等等。表格和单元格可以设置背景颜色，但能不能设置一些背景图案使页面更好看呢？当我需要显示表格线时，能否改变线条的大小和颜色？我用Excel制作的表格内容很多，能否快捷地把它放到网页中？插入一个一定行列的表格是很容易的，但要插入一个行列不那么规则的复杂表格却是比较麻烦，有无更好的解决办法吗？,7.1.6 应用技巧与常见错误,应用表格进行页面布局，掌握一些小小的操作技巧，可以提高工作效率，达到更好的设计效果。例如：（1）把鼠标移到表格中的某一条线，则鼠标指针会变成双箭头，按住鼠标左键并拖动鼠标，则可以改变某一行或某一列的大小，这在调整页面布局时经常用到。（2）在创建表格时，表格宽度选

6、择使用像素为单位，可以防止用户在浏览网页时改变浏览器窗口的大小而导致页面布局变形。（3）充分利用表格单元的合并或拆分功能，可以获得行列不规则的复杂表格，达到自己设计的要求。（4）如果你只想删除单元格中的内容而不删除单元格，请选择一个或多个单元格，然后选择“编辑”“清除”或按Delete键。但要注意，如果选择了一行或一列的所有单元格，选定的行或列（不仅仅是它的内容）将被删除。,7.2 使用层定位页面元素,在设计网页时，除了可以使用表格对页面元素进行定位外，还可以使用层进行页面元素的定位。使用层可以以像素为单位精确定位页面元素。可以把层放置在页面的任意位置。,7.2.1 关于层,与其它一些图像处理

7、软件中的图层有所不同，Dreamweaver的层是用来存放DIV或SPAN标记描述的HTML内容的容器。层可以包含文本、图像、表单、插件等页面元素。甚至层内还可以包含其它层，即层可以嵌套。,层的基本操作,使用表格定位页面元素虽然可行，但要在页面中自由移动表格是不行的。然而，层却可以在页面中随意移动和定位，比之使用表格更加灵活方便。1创建层 要使用层进行页面布局，首先要创建层。创建层有下列4种方法。（1）插入层：把光标置于文档窗口中想插入层的地方，然后选择“插入”“层”菜单命令。（2）拖放层：把描绘层按钮从插入面板拖到文档窗口中。（3）绘画层：在插入面板中单击描绘层按钮，在文档窗口中拖曳鼠标画出

8、一层。（4）画多层：单击插入面板中的描绘层按钮，按下Shift键，在文档窗口中画出一个层。只要不释放Shift键，就可以连续画新的层。,设置文档类型,层的基本操作,2层的基本操作 层的基本操作主要包括层的激活、选择、调整大小、移动、对齐等。（1）激活层 要在层中插入文字、图像等，首先要激活层。（2）选择层 要对层进行移动、调整大小等操作，首先要选择层。可以选择一层，也可以同时选择多层。同时选择多层时，可进行对齐层操作，使他们的宽度和高度相同，或重新定位它们。提示：当多层被选择时，最后选择的层的手柄以黑色突出显示，其它层的手柄以白色突出显示。（3）调整层大小 可以单独调整一个层的大小，也可以同时

9、调整多个层的大小使它们具有相同的宽度和高度。（4）移动层 在文档窗口中移动层，可移动一层，也可以同时移动多层。（5）对齐层 当页面上有多个层时，可以使用对齐命令对齐层。,层面板的基本操作,1.使用层面板（1）改变层的可见性（2）改变层的堆叠顺序（3）防止层重叠2.设置层属性CSS-P元素，左和上，宽和高，Z轴(值越大，越靠上),层面板的基本操作,可见性：default（默认）：不指定可见性属性，多数浏览器把本项解释为inherit（继承）。inherit（继承）：继承父层的可见性。visible（可见）：显示层的内容。hidden（隐藏）：隐藏层的内容。背景图像：指定层的背景图像。单击本项右边

10、的浏览图标，浏览并选择一个图像文件，或在文本域中输入图像文件的路径。背景颜色：指定层的背景颜色。此选项为空时指定为透明背景。3.层和表格的相互转换 层转换为表格 表格转换为层【修改】|【转换】|,层面板的基本操作,溢出：仅使用于CSS层，指定如果层的内容超过了它的大小将发生的事件。有以下选项。visible(可见)：增加层的大小，以便层的所有内容都可见。层向下和向右扩大。hidden(隐藏)：保持层的大小，以便层的所有内容都可见。scroll(滚动)：给层添加滚动条，不管内容是否超过了层的大小。auto(自动)：在层的内容超过它的边界时自动显示滚动条。剪辑：定义层的可见区（类似于word中通过

11、设置页边距来定义版心）。在左、右、上、下文本域中输入一个值来指定层的内容距离边界的距离（以像素为单位）。,层定位页面元素,（1）新建一个网页文件。选择“窗口”“插入”，打开“插入”栏并选择“插入”栏的“布局”选项。（2）单击“插入”栏中的【绘制AP Div】按钮，然后在文档窗口中绘制四个层，仔细调整层的位置。（3）将准备好的5张用于布局的图片top.jpg、navigation.jpg、left.jpg、main.jpg、bottom.jpg依次插入四个层中。（4）按F12键，在浏览器中预览层定位页面元素的效果，如图2所示。,7.2.5 归纳与思考,Dreamweaver的层是用来存放DIV或

12、SPAN标记描述的HTML内容的容器。层可以包含文本、图像、表单、插件、动画等页面元素。可以在页面中随意移动和定位层，因此能够在页面中精确定位页面元素，比之使用表格更加灵活方便。层和表格都可以用来定位页面元素。那么，层与表格有什么联系和区别呢？层和表格之间能否相互转换？,7.2.6 应用技巧与常见错误,在使用层定位页面元素时，掌握下面的一些操作技巧，可以使层的操作更加精确，使层页面布局更加合理、美观。（1）在页面中选择一层，然后按住“Ctrl+方向箭头”键，每次可以调整一个像素，微调层的大小。（2）按住“Ctrl+Shift+方向箭头”键，可以按10个像素的增量来调整层的大小。（3）使用层属性

13、检查器设置层背景图像或层背景颜色，可以使层页面布局更加美观。在层操作方面常见的错误有：在没有选择层的情况下就想对层进行各种操作（如改变层的大小）；分不清嵌套层和非嵌套层。,7.3 框架布局页面元素,框架在网页中的应用是比较广泛的。在浏览网页的时候，我们常常会遇到这样的一种导航结构，单击页面左侧的超级链接，链接的目标出现在右侧；或者单击上侧链接，链接目标出现在下侧。这就是框架技术最常用在导航窗口。,7.3.1 关于框架页面,框架页面是把浏览器窗口划分为若干个子窗口，这些子窗口称为框架。一个框架显示一个网页文件，但整个框架集却存在于同一个浏览器窗口中。框架页面可以把不同类别的信息显示在不同的框架中

14、，有利于分类管理和控制。,7.3.2 一般框架布局页面元素,1创建框架集2保存框架集3设计要在框架集中显示的网页4设定框架源文件5用链接控制框架的显示内容,7.3.2 一般框架布局页面元素,6框架属性及其设置方法源文件：指定在当前框架中打开的源文件。滚动：4种选择是、否、自动、默认。不能调整大小：防止用户浏览页面时通过拖动框架边框来调整当前框架的大小。边框：决定当前框架是否显示边框，有“是”、“否”和“默认”三种选择。大多数浏览器默认为“是”。边框颜色：设置与当前框架相邻的所有边框的颜色。,7.3.2 一般框架布局页面元素,7框架集属性及其设置方法(1)在“边框”下拉列表中，可以设置当文档在浏

15、览器中被浏览时是否显示框架集边框。有3个选项是、否和默认。选择“默认”，由用户的浏览器决定是否显示边框。(2)在“边框宽度”文本框中输入一个数字，指定当前框架集的边框宽度。输入0，指定无边框。(3)在“边框颜色”文本框中输入十六进制颜色值，或单击“边框颜色”旁边的颜色块，从弹出的拾色器中选择一种颜色作为边框颜色。,浮动框架布局页面元素,浮动框架又叫嵌入式框架，所谓嵌入式框架就是在HTML文档中的一个区域内插入一个HTML文档，就像在HTML文档的一部分区域中显示一幅图像一样。浮动框架不需要在单独的网页中创建框架集，而是通过标签建立。最初的标签是微软公司提出的，通过标记将frame窗口置入一个H

16、TML文档的任何位置，框架的内容和属性完全由设计者控制，这极大地拓展了浮动框架的应用范围。,浮动框架其常用属性如下表,创建一个没有框架的网页，如下图,将光标定位在右边的单元格中，单击”插入记录”“HTML”“框架”，选择”IFRAME”选项，此时，视图切换到”代码”视图状态，代码中光标所在的位置出现一对标签，如下图。,将光标定位在起始标签中，按空格键在弹出的列表项中选择”width”项，并设置width的值为606，width代表浮动框架的宽度。类似方法还可以设置name、height和src等属性，完成后的代码如下。,用鼠标选择左边表格中的”系部概况”文本，设置超链接至xbgk.html，在

17、”目标”文本域中输入浮动框架的名称”ifm”。然后再选中”机构设置”文本，同理设置超链接至jgsz.html，在”目标”文本域中输入浮动框架的名称”ifm”。保存网页，按F12在浏览器中浏览，如下图。,当单击”系部概况”链接时会发现xbgk.html页面会出现在名称为”ifm”的浮动框架中，如下图所示。,案例设计：,利用框架制作一个网页日历。,选择【文件】/【新建】命令，单击左侧“示例中的页”按钮，选择左侧固定的框架集，创建一个左右拆分的框架集。在文档窗口选中整个框架集，修改属性，设置边框“是”，边框宽度为“2”，列宽为“180”像素。选中整个框架，选择【文件】/【框架集另存为】命令，保存到站

18、点文件夹，命名为“2011calendar.heml”。单击左侧框架，【文件】-【框架另存为】，命名为“calendarleft.html”，更改滚动方式为“auto”（修改代码中的参数scrolling=“yes”）单击右侧框架，【文件】-【框架另存为】，命名为“calendarmain.html”，滚动方式为“no”。在左侧框架插入表格，制作“一月”单元表格，设置其属性，并制作链接，一月的链接地址为“calendarmain.html”，目标为“mainframe”。在右侧框架中插入表格，6行7列，设置1月份的具体日期，设置其格式和属性。在站点文件中复制“calendarmain.html”文件，并将副本修改为“calendarmain2.html”，制作2月份的具体日期，并将左侧框架中2月份的链接设置为“calendarmain2.html”，依次按照方法完成2-12月份的日历。,