网页页面布局-YS.ppt

,网页设计与制作,第1章 网页设计概述 第2章 HTML语言基础 第3章 Dream weaver 基础 第4章 网页中的基础元素 第5章 网页页面布局 第6章 网页中的层和时间轴 第7章 表单的应用 第8章 在网页中使用行为 第9章 CSS样式使用 第10章 网页中的多媒体应用 第11章 模板和库 第12章 站点测试和发布 第13章 Flash 简介 第14章 Fireworks 简介,$ 知识目标 掌握表格及单元格的创建和编辑 掌握通过表格来进行网页页面的布局方法 掌握建立框架网页及框架属性设置的方法 8 能力目标 熟练掌握表格的基本操作 熟练运用表格进行网页布局 熟练运用框架进行网页的布局,第5章 网页页面布局,第5章 网页页面布局,网页页面布局主要技术： 框架： 大概布局 表格： 简略布局 层： 精细布局 CSS+DIV布局 : 样式布局 CSS+DIV布局具有易维护,易整体控制网站,易见效网页大小,易节省流量,易推广等优势 。,5.1 表格 5.2 表格布局 5.3 框架布局 本章小结,第5章 网页页面布局,5.1 表格,5.1.1插入表格 5.1.2添加内容 5.1.3 选择表格 5.1.4 设置表格属性 5.1.5 编辑表格的基本操作,在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边框。,（一）插入表格 1定位光标在要插入表格的位置，然后执行以下操作之一： 单击菜单栏中的“插入”|“表格”命令。 在“插入”栏的“常用”类别中，单击 “表格”按钮。 2打开表格对话框。,5.1.1 插入表格,5.1 表格,5.1.1 插入表格,3单击“确定”创建表格插入 “4行5列”的表格。,5.1 表格,（二）插入嵌套表格 1将光标定位在表格的一个单元格内。 2执行插入表格的操作，即可在表格内嵌套表格如图。,5.1.1 插入表格,5.1 表格,将插入点定位在表格内，即可输入文本、图像、动画等网页元素。,5.1.2 添加内容,5.1 表格,(一)选择整个表格 选择整个表格执行以下操作之一： 单击表格的左上角、右边或底部边缘的任意位置。 单击表格单元格，在菜单栏单击“修改”|“表格”|“选择表格”命令。 (二)选择行或列 1鼠标指向行的左边缘或列的上边缘，光标变为 或 。 2单击鼠标则选择鼠标指向的行或列。 3拖动鼠标，则选择连续的多行或多列。 4按Ctrl同时单击鼠标，则可选择不连续的多行或多列。,5.1.3 选择表格,5.1 表格,(三)选择单元格 1.选择单个单元格，请执行以下操作之一： 单击单元格，然后在文档窗口左下角的标签选择器中选择标签. 在单元格内双击鼠标则可选择该单元格。 在单元格内单击，然后按组合键Ctrl+A。 2选择连续的多个单元格可以执行以下操作之一： 单击第一个单元格，按住Shift键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。 在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。 3按Ctrl同时单击单元格则可选择不相邻的多个单元格。,5.1.3 选择表格,5.1 表格,（一）表格属性 表格被选中之后，可以利用表格属性来设置或修改表格的属性。 （二）单元格属性 单元格被选中或光标定位在单元格中时，可以利用单元格属性，来设置或修改单元格的属性。,5.1.4 设置表格属性,5.1 表格,(一) 调整表格的大小： 1选择整个表格，在表格的边缘出现3个黑色控制点。 2执行以下操作： 用鼠标拖动这些控制点则可改变表格的大小。 在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。 （二）调整行高和列宽 1将鼠标移到要调整的行高或列宽的边框上，光标变为 或 。 2拖动鼠标即调整行高或列宽。,5.1.5 编辑表格的基本操作,5.1 表格,（三）合并或折分单元格 1拆分单元格 （1）选择（或将光标定位在）要拆分的单元格。 （2）执行以下操作之一： 单击菜单栏中的“修改”|“表格”|“拆分单元格”命令。 在“属性检查器”中，单击“拆分单元格”的按钮 。 (3)打开拆分单元格对话框如图。 （4）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为“行”，行数为“2”。 （5）单击确定，单元格被拆分。,5.1.5 编辑表格的基本操作,5.1 表格,2合并单元格 （1）选择需要进行合并的两个以上单元格。 （2）执行以下操作之一： 单击菜单栏“修改”|“表格”|“合并单元格”命令 在“属性检查器”中，单击“合并单元格”按钮 。 （3）选的单元格被合并。,5.1.5 编辑表格的基本操作,5.1 表格,（四）插入和删除行或列 1插入单行或单列 在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下： （1）选择行、列或单元格。 （2）单击菜单栏中的“修改”|“表格”|“插入行”或“插入列”命令。 选择“插入列”命令：可以在所选列的左侧添加一列。 选择“插入行”命令：可以在所选行的上面添加一行。,5.1.5 编辑表格的基本操作,5.1 表格,2插入多行或多列 （1）选择行、列或单元格。 （2）单击菜单栏中的“修改”|“表格”|“插入行或列”的命令，打开“插入行或列”对话框。 （3）选择插入“列”或“行”，并设置数目，单击确定。,5.1.5 编辑表格的基本操作,5.1 表格,3删除行或列 在表格中删除行或列的操作为： （1）选择要删除的行或列。 （2）执行以下操作之一： 单击菜单栏中的“修改”|“表格”|“删除行”或“删除列”命令。 单击菜单栏中的“编辑”|“清除”命令。 使用键盘上的“Delete”键。 4表格细边框 ,5.1.5 编辑表格的基本操作,5.1 表格,5.2 表格布局,5.2.1 布局视图 5.2.2 绘制布局表格和布局单元格 5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（一）切换布局视图 1执行以下操作之一： 单击菜单栏中“视图”|“表格视图”|“布局视图”命令。 在“插入”栏的“布局”类别中，单击“布局模式”按钮。 2打开“从布局模式开始”对话框,5.2.1 布局视图,5.2 表格布局,3单击“确定”按钮，进入布局视图模式。 4单击“退出”按钮，或单击相应的其他视图按钮，退出布局视图。,5.2.1 布局视图,5.2 表格布局,（二）布局工具按钮 在“插入栏”的“布局”类别中，有布局用的各种工具按钮。 从左到右依次为： “标准”：单击进入标准视图模式。 “扩展”：单击进入扩展表格模式。 “布局”：单击进入布局视图模式。 “ ”：用于绘制布局表格。 “ ”：用于绘制布局单元格。 “ ”：用于添加布局框架。 “ ”：用于导入表格数据。,5.2.1 布局视图,5.2 表格布局,（一）绘制布局表格 1切换到布局视图模式 2单击“绘制布局表格”按钮 ，鼠标指针变为“+”。 3在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格，表格的框线显示为绿色。 4要绘制多个布局表格， 按住Ctrl键同时单击“绘制 布局表格”按钮。 5每个布局表格都在顶端 有标签，并在布局表格的底 端或顶端显示表格的大小。,5.2.2 绘制布局表格和布局单元格,5.2 表格布局,7单击“绘制布局表格”按钮，可以在布局表格内绘制嵌套的布局表格如图所示，嵌套的表格大小不能超过包含它的布局表格。,5.2.2 绘制布局表格和布局单元格,5.2 表格布局,（二）绘制布局单元格 1切换到布局视图模式 2单击“绘制布局单元格”按钮 ，鼠标指针变为“+” 3在布局表格中合适位置， 按住鼠标左键并拖动，可以绘 制出布局单元格，单元格的框 线显示为蓝色，如图所示。 4要绘制多个单元格， 可以在按住Ctrl键的同时单击 “绘制布局单元格”按钮并绘制。,5.2.2 绘制布局表格和布局单元格,5.2 表格布局,（一）移动布局表格和布局单元格 1单击布局表格标签，可以选中布局表格；单击单元格边框，可以选择布局单元格； 2用鼠标拖动布局表格或布局单元格到合适位置。 （二）调整布局表格和布局单元格大小 1选择要调整的布局表格和布局单元格。 2选择的表格或单元格四周会出现控制点，拖动控制点可以调整其大小。 （三）向单元格中添加内容 1将光标定位在要添加内容的单元格。 2插入文字和图像等各种网页元素。,5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（四）删除布局表格或布局单元格 删除布局表格或布局单元格的操作为： 1选择要删除的布局表格和布局单元格。 2执行以下操作之一： 单击菜单栏中“编辑”|“清除”命令。 使用键盘上的“Delete”键。,5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（五）设置布局表格属性 1布局表格属性 2布局单元格属性,5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（四）利用表格制作垂直线和水平线 （1）在网页中插入一个无边框、无边距的表格 （2）定位光标在制作水平线的单元格内 （3）在“属性检查器”中，设置高度（或宽度）为“1”，为单元格添加背景颜色。 （4）单击 “文档”工具栏中 的“拆分”按钮， 切换到“代码和设 计视图”，删除单 元格内的“”代码，如图。,5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（4）保存网页，在浏览器中预览网页，如图所示。,5.2.3 编辑布局表格和布局单元格,5.2 表格布局,5.3 框架布局,5.3.1 建立框架 5.3.2 框架面板 5.3.3 设置框架的属性 5.3.4 保存框架 5.3.5 框架中的超链接,1定位光标在要插入框架集的窗口中。 2执行以下操作之一： 单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式。 在“插入”栏的“布局” 类别中，单击框架按钮右 侧的下拉按钮，弹出下拉 菜单，单击相应的框架集 图标。建立框架网页。,5.3.1 建立框架,5.3 框架布局,（）打开框架面板 单击菜单栏中“窗口”|“框架”命令，打开框架面板。在面板中标识了每个框的名称。 （二）框架面板的基本操作： 1选择框架集：在“框架”面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。 2选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。,5.3.2框架面板,5.3 框架布局,（一）设置框架集属性：选中框架集，打开框集属性 1边框选项设置 2框架集中框架大小设置 （二）设置框架属性 选择框架后（如选择左侧框架），打开框架属性,5.3.3 设置框架的属性,5.3 框架布局,（一）保存框架集的操作： 1在框架面板中，选择中要保存的框架集。 2单击菜单栏中“文件”|“保存框架页”命令。 3打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架集网页。 （二）保存框架的操作： 1定位光标在要保存的框架内，或在框架面板中选择要保存的框架。 2单击菜单栏中“文件”|“保存框架”命令，打开另存为对话框。 3打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架。,5.3.4 保存框架,5.3 框架布局,如图中的网页为“上方及左侧嵌套”框架，左侧设置为导航条，右侧为链接打开的目标窗口。,5.3.5 框架中的超链接,5.3 框架布局,在框架中设置超链接的操作为： 1选择超链接的载体，如左侧框架的“电影城”图像。 2在“属性检查器”中，“链接”项中设置超链接为：dianying.html。 3在“属性检查器”中的“目标”下拉菜单中选择目标框架或窗口，选择“mainFrame”如图。,5.3.5 框架中的超链接,5.3 框架布局,5.4 CSS布局,Dreamweaver提供了多种示例样式表，包括文本样式、表单样式、链接样式、颜色样式等多种样式表。用户可以借鉴示例样式表，在其基础上加以修改，形成符合自己要求的样式表。也可定义自己的布局模板。,5.4 CSS布局,CSS布局是一种弹性布局提： 1. 由于弹性布局的总体大小取决于用户的默认字体大小，因此弹性布局更难预测。如果正确使用的话，弹性布局对于那些需要较大字体的用户更为方便，因为行的长度仍保持适当比例。 2. 此布局中 div 的大小取决于 body 元素中的 100% 字体大小。如果您通过对 body 元素或 #container 使用“font-size: 80%”来减小文本的总体大小，请记住整体布局将按比例缩小。您最好增加各个 div 的宽度以对此进行补偿。 3. 如果字体大小在每个 div 中按不同的量进行更改（例如，#sidebar1 上的字体大小为 70%，#mainContent 上的字体大小为 85%），而不是对总体设计进行更改，则将按比例更改每个 div 的总体大小。您最好根据最终的字体大小来进行调整。,5.4 CSS布局,5.4 CSS布局, 2列固定宽度左窄右宽型+头部 This is the Header This is the sidebar 2列固定宽度左窄右宽型+头部 ,5.4 CSS布局,layout.css 文件 body font-family:Verdana; font-size:14px; margin:0; #container margin:0 auto; width:90