网页制作技术——Dreamweaver Flash Fireworks 作者 赵丰年 第7章.pptVIP

* 人民邮电出版社 * 第7章 设计页面版式 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 7.1 页面版式基础 7.2 使用表格排版 7.3 使用层排版 7.4 使用框架排版 7.1 页面版式基础 7.1.1 版式在网页界面中的作用 网页界面的版式设计，是指将文字、图形图像、色彩、动画和视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。 从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画和正文等内容展开页面布局的。在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。 从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。 例如，图7.1 就是一个设计合理的页面实例。 图7.1 页面版式示例 7.1.2 版式的实用功能 7.1.3 版式的审美功能 7.2 使用表格排版 7.2.1 表格与布局表格的基本操作 1．使用表格显示网页中的内容 2．使用布局视图设计网页中的表格 3．布局表格与布局单元格基本操作 7.2.2 表格与布局表格的属性设置 7.2.3 表格排版实例 以下是使用Dremweaver 的布局视图功能与表格排版功能制作的一个网页实例，效果如图7.12 所示。 图7.12 使用布局功能与表格排版实例效果 制作步骤如下。 （1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景，在“文本”文本框内选择白色作文本颜色，设置完成后单击“确定”按钮。 （2）将“插入栏”切换到“布局”选项卡，单击“布局视图”按钮切换到布局视图模式下，按【Ctrl + S】键将网页保存到站点中。 （3）在“插入栏”中单击“绘制布局单元格”按钮 ，绘制一个宽为 600 像素，高为 24 像素的布局单元格，然后添加若干文字。 （4）按住【Alt】键不放，多次单击“绘制布局单元格”按钮 ，连续绘制4个宽度相等的单元格，分别在第二与第三个布局单元格内插入若干文本，在第四个布局单元格内插入一条宽度为 600 像素，高度为 1 像素的水平线，并使用属性检查器对添加的文本与水平线进行修饰。 （5）将绘制的第二个布局单元格的高度调整为 120 像素，适当调整其他三个单元格的高度与宽度，在适当调整布局表格的宽度，此时的文档窗口如图7.13所示。 图7.13 绘制布局单元格与布局表格 （6）单击“标准视图”按钮，将文档窗口切换到标准视图模式，将插入点定位在绘制的第四个单元格内，单击“插入表格”按钮 ，在打开的“插入表格”对话框中，设置表格“行”为8、“列”为5、“单元格填充”为0、“单元格边距”为0、“宽度”为100%（即所在单元格的宽度600像素）、“边框”为0，完成后单击“确定”按钮。 （7）在插入表格中的第一、三、五、七行与一、三、五列交界处的单元格内，分别插入尺寸相等的图像，在图像下方的单元格内输入一些文字并进行修饰。 （8）使用单元格的“属性检查器”，将插入图像单元格的宽度设置为 150 像素，高度为 100 像素，文字所在单元格高度为 80 像素，没有内容的单元格宽度为 75 像素。 （9）另外将插入图像单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，此时的文档窗口，如图7.14所示。 图7.14 利用表格设计页面的版式 （10）选取包含图像的单元格，然后使用 CSS 样式为该单元格设置一种边框效果（有关 CSS 样式的内容，请参见本书第 9 章）。 （11）在第一个单元格与第二个单元格内设置一个背景图像，按【Ctrl + S】键保存对文档的修改，按【F12】键在浏览器窗口中预览网页效果。 7.3 使用层排版 7.3.1 什么是层 7.3.2 层的基本操作 1．创建层 2．向层中添加内容 3．选择层 4．调整层大小 5．移动层 6．对齐层 7．更改层的重叠顺序 8．更改层的可见性 7.3.3 层排版实例 下面是使用层排版技术制作的网页实例，效果如图7.17 所示。 图7.17 使用层制作的网页实例效果 实例使用了13个层设计出整个网页布局，层中分别插入了图像、文字等网页对象，设计完毕后在D