第5章网页页面布局YSppt课件

《第5章网页页面布局YSppt课件》由会员分享，可在线阅读，更多相关《第5章网页页面布局YSppt课件（46页珍藏版）》请在装配图网上搜索。

1、第第5章章 网页页面规划网页页面规划5.1.1插入表格插入表格5.1.2添加内容添加内容5.1.3 选择表格选择表格5.1.4 设置表格属性设置表格属性5.1.5 编辑表格的根本操作编辑表格的根本操作在表格中横向为行，纵向为列。行列交叉部分就叫在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的间隔叫边距。做单元格。单元格中的内容和边框之间的间隔叫边距。单元格和单元格之间的间隔叫间距。表格的边线叫做边单元格和单元格之间的间隔叫间距。表格的边线叫做边框。框。一插入表格一插入表格1定位光标在要插入表格的位置，然后执定位光标在要插入表格的位置，然后执行以下操作之一：行以下

2、操作之一：单击菜单栏中的单击菜单栏中的“插入插入|“表格命令。表格命令。在在“插入栏的插入栏的“常用类别中，单击常用类别中，单击“表格按钮。表格按钮。2翻开表格对话框。翻开表格对话框。3单击单击“确定创建表格插入确定创建表格插入“4行行5列的表格。列的表格。二插入嵌套表格二插入嵌套表格1将光标定位在表格的一个单元格内。将光标定位在表格的一个单元格内。2执行插入表格的操作，即可在表格内嵌套表格执行插入表格的操作，即可在表格内嵌套表格如图。如图。将插入点定位在表格内，即可输入文本、图像、动将插入点定位在表格内，即可输入文本、图像、动画等网页元素。画等网页元素。单元格。单元格。(一一)调整表格的大小

3、：调整表格的大小：1选择整个表格，在表格的边缘出现选择整个表格，在表格的边缘出现3个黑色控个黑色控制点。制点。2执行以下操作：执行以下操作：用鼠标拖动这些控制点那么可改动表格的大小。用鼠标拖动这些控制点那么可改动表格的大小。在表格在表格“属性检查器中重新设置属性检查器中重新设置“高度与高度与“宽度值，改动表格的大小。宽度值，改动表格的大小。二调整行高和列宽二调整行高和列宽1将鼠标移到要调整的行高或列宽的边框上，光将鼠标移到要调整的行高或列宽的边框上，光标变为标变为 或或 。2拖动鼠标即调整行高或列宽。拖动鼠标即调整行高或列宽。2合并单元格合并单元格1选择需求进展合并的两个以上单元格。选择需求进

4、展合并的两个以上单元格。2执行以下操作之一：执行以下操作之一：单击菜单栏单击菜单栏“修正修正|“表格表格|“合并单元格命令合并单元格命令在在“属性检查器中，单击属性检查器中，单击“合并单元格按钮合并单元格按钮 。3选的单元格被合并。选的单元格被合并。四插入和删除行或列四插入和删除行或列1插入单行或单列插入单行或单列在所选择的行、列或单元格的上面及左侧插入单行或单列，在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下：操作如下：1选择行、列或单元格。选择行、列或单元格。2单击菜单栏中的单击菜单栏中的“修正修正|“表格表格|“插入行或插入行或“插插入列命令。入列命令。选择选择“插入列命令

5、：可以在所选列的左侧添加一列。插入列命令：可以在所选列的左侧添加一列。选择选择“插入行命令：可以在所选行的上面添加一行。插入行命令：可以在所选行的上面添加一行。2插入多行或多列插入多行或多列1选择行、列或单元格。选择行、列或单元格。2单击菜单栏中的单击菜单栏中的“修正修正|“表格表格|“插入行插入行或列或列的命令，翻开的命令，翻开“插入行或列对话框。插入行或列对话框。3选择插入选择插入“列或列或“行，并设置数目，单行，并设置数目，单击确定。击确定。3删除行或列删除行或列在表格中删除行或列的操作为：在表格中删除行或列的操作为：1选择要删除的行或列。选择要删除的行或列。2执行以下操作之一：执行以下

6、操作之一：单击菜单栏中的单击菜单栏中的“修正修正|“表格表格|“删除行或删除行或“删除列命令。删除列命令。单击菜单栏中的单击菜单栏中的“编辑编辑|“去除命令。去除命令。运用键盘上的运用键盘上的“Delete键。键。4表格细边框表格细边框 3单击单击“确定按钮，进入规划视图方式。确定按钮，进入规划视图方式。4单击单击“退出按钮，或单击相应的其他视图按钮，退出退出按钮，或单击相应的其他视图按钮，退出规划视图。规划视图。二规划工具按钮二规划工具按钮在在“插入栏的插入栏的“规划类别中，有规划用的各种工具按规划类别中，有规划用的各种工具按钮。钮。从左到右依次为：从左到右依次为：“规范：单击进入

7、规范视图方式。规范：单击进入规范视图方式。“扩展：单击进入扩展表格方式。扩展：单击进入扩展表格方式。“规划：单击进入规划视图方式。规划：单击进入规划视图方式。“：用于绘制规划表格。：用于绘制规划表格。“：用于绘制规划单元格。：用于绘制规划单元格。“：用于添加规划框架。：用于添加规划框架。“：用于导入表格数据。：用于导入表格数据。一绘制规划表格一绘制规划表格1切换到规划视图方式切换到规划视图方式2单击单击“绘制规划表格按钮绘制规划表格按钮，鼠标指针变，鼠标指针变为为“+。3在文档窗口中，按住鼠标左键并拖动，可以绘在文档窗口中，按住鼠标左键并拖动，可以绘制出规划表格，表格的框线显示为绿色。制出规划

8、表格，表格的框线显示为绿色。4要绘制多个规划表格，要绘制多个规划表格，按住按住Ctrl键同时单击键同时单击“绘制绘制规划表格按钮。规划表格按钮。5每个规划表格都在顶端每个规划表格都在顶端有标签，并在规划表格的底有标签，并在规划表格的底端或顶端显示表格的大小。端或顶端显示表格的大小。7单击单击“绘制规划表格按钮，可以在规划表格内绘制嵌绘制规划表格按钮，可以在规划表格内绘制嵌套的规划表格如下图，嵌套的表格大小不能超越包含它的规划套的规划表格如下图，嵌套的表格大小不能超越包含它的规划表格。表格。4保管网页，在阅读器中预览网页，如下图。保管网页，在阅读器中预览网页，如下图。1定位光标在要插入框架集的窗

9、口中。定位光标在要插入框架集的窗口中。2执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入|“HTML|“框架命令，在子菜单框架命令，在子菜单中单击相应的框款式。中单击相应的框款式。在在“插入栏的插入栏的“规划规划类别中，单击框架按钮右类别中，单击框架按钮右侧的下拉按钮，弹出下拉侧的下拉按钮，弹出下拉菜单，单击相应的框架集菜单，单击相应的框架集图标。建立框架网页。图标。建立框架网页。翻开框架面板翻开框架面板单击菜单栏中单击菜单栏中“窗口窗口|“框架命令，翻开框架面板。在面板中框架命令，翻开框架面板。在面板中标识了每个框的称号。标识了每个框的称号。二框架面板的根本操作：二框架

10、面板的根本操作：1选择框架集：在选择框架集：在“框架面板中单击最外层的边框，使其出现框架面板中单击最外层的边框，使其出现粗黑边显示，那么选中了框架集。粗黑边显示，那么选中了框架集。2选择框架：在选择框架：在“框架面板中单击要选择的框架，使其出现细框架面板中单击要选择的框架，使其出现细黑边显示，那么选中了框架。黑边显示，那么选中了框架。一设置框架集属性：选中框架集，翻开框集属性一设置框架集属性：选中框架集，翻开框集属性 1边框选项设置边框选项设置2框架集中框架大小设置框架集中框架大小设置二设置框架属性二设置框架属性选择框架后如选择左侧框架，翻开框架属性选择框架后如选择左侧框架，翻开框架属性一保管

11、框架集的操作：一保管框架集的操作：1在框架面板中，选择中要保管的框架集。在框架面板中，选择中要保管的框架集。2单击菜单栏中单击菜单栏中“文件文件|“保管框架页命令。保管框架页命令。3翻开翻开“另存为对话框，设置保管位置和文件名，单击另存为对话框，设置保管位置和文件名，单击“保保管按钮，保管了框架集网页。管按钮，保管了框架集网页。二保管框架的操作：二保管框架的操作：1定位光标在要保管的框架内，或在框架面板中选择要保管的定位光标在要保管的框架内，或在框架面板中选择要保管的框架。框架。2单击菜单栏中单击菜单栏中“文件文件|“保管框架命令，翻开另存为对话保管框架命令，翻开另存为对话框。框。3翻开翻开“

12、另存为对话框，设置保管位置和文件名，单击另存为对话框，设置保管位置和文件名，单击“保保管按钮，保管了框架。管按钮，保管了框架。如图中的网页为如图中的网页为“上方及左侧嵌套框架，左侧设置为导航条，上方及左侧嵌套框架，左侧设置为导航条，右侧为链接翻开的目的窗口。右侧为链接翻开的目的窗口。在框架中设置超链接的操作为：在框架中设置超链接的操作为：1选择超链接的载体，如左侧框架的选择超链接的载体，如左侧框架的“电影城图像。电影城图像。2在在“属性检查器中，属性检查器中，“链接项中设置超链接为：链接项中设置超链接为：dianying.html。3在在“属性检查器中的属性检查器中的“目的下拉菜单中选择目的框

13、架或窗目的下拉菜单中选择目的框架或窗口，选择口，选择“mainFrame如图。如图。DreamweaverDreamweaver提供了多种例如款式表，包括文本款式、提供了多种例如款式表，包括文本款式、表单款式、链接款式、颜色款式等多种款式表。用户表单款式、链接款式、颜色款式等多种款式表。用户可以自创例如款式表，在其根底上加以修正，构成符可以自创例如款式表，在其根底上加以修正，构成符合本人要求的款式表。也可定义本人的规划模板。合本人要求的款式表。也可定义本人的规划模板。CSSCSS规划是一种弹性规划提：规划是一种弹性规划提：1.1.由于弹性规划的总体大小取决于用户的默许字体由于弹性规划的总体大小

14、取决于用户的默许字体大小，因此弹性规划更难预测。假设正确运用的话，大小，因此弹性规划更难预测。假设正确运用的话，弹性规划对于那些需求较大字体的用户更为方便，弹性规划对于那些需求较大字体的用户更为方便，由于行的长度仍坚持适当比例。由于行的长度仍坚持适当比例。2.2.此规划中此规划中 div div 的大小取决于的大小取决于 body body 元素中的元素中的 100%100%字体大小。假设您经过对字体大小。假设您经过对 body body 元素或元素或#container#container 运用运用“font-size:80%font-size:80%来减小文本的来减小文本的总体大小，请记住

15、整体规划将按比例减少。您最好总体大小，请记住整体规划将按比例减少。您最好添加各个添加各个 div div 的宽度以对此进展补偿。的宽度以对此进展补偿。3.3.假设字体大小在每个假设字体大小在每个 div div 中按不同的量进展更中按不同的量进展更改例如，改例如，#sidebar1#sidebar1 上的字体大小为上的字体大小为 70%70%，#mainContent#mainContent 上的字体大小为上的字体大小为 85%85%，而不是对总，而不是对总体设计进展更改，那么将按比例更改每个体设计进展更改，那么将按比例更改每个 div div 的总的总体大小。您最好根据最终的字体大小来进展调

16、整。体大小。您最好根据最终的字体大小来进展调整。2列固定宽度左窄右宽型列固定宽度左窄右宽型+头部头部 This is the Header This is the sidebar 2列固定宽度左窄右宽型列固定宽度左窄右宽型+头部头部 layout.css 文件文件body font-family:Verdana;font-size:14px;margin:0;#container margin:0 auto;width:900px;#header height:100px;background:#6cf;margin-bottom:5px;#mainContent margin-bottom:

17、5px;#sidebar float:left;width:200px;height:500px;background:#9ff;#content float:right;width:695px;height:500px;background:#cff;/*由于是固定宽由于是固定宽度，采用左右浮动方法可有效防止度，采用左右浮动方法可有效防止ie 3像素像素bug*/插入表格插入表格框架中的超链接框架中的超链接网页页面规划网页页面规划表表 格格表格规划表格规划框架规划框架规划添加内容添加内容选择表格选择表格设置表格属性设置表格属性编辑表格的根本操作编辑表格的根本操作规划视图规划视图绘制规划表格和单元格绘制规划表格和单元格编辑规划表格和单元格编辑规划表格和单元格建立框架建立框架框架面板框架面板设置框架的属性设置框架的属性保管框架保管框架第第 五五 章章 结结 束束