网页制作案例教程 清华大学出版社第5章 网页布局规划设计

《网页制作案例教程 清华大学出版社第5章 网页布局规划设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作案例教程毋建军郑宝昆郭锐编著清华大学出版社第5章网页布局规划设计本章学习目标（知识要点）网页布局技术的基本概念与原理表格布局规划页面层布局规划页面框架布局规划页面手工创建混合布局页面本章学习导航网页布局能够使网页页面整齐、有序、美观，并且能够帮助读者很好的了解网页信息，本章主要介绍表格、层、框架布局规划页面。本章内容在全书知识结构中所处位置如图所示基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与

2、使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护5.1页面布局技术概述5.1.1网页布局设计原则1、连贯，是指要注意页面的相互关系。网页设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个网页设计风格的一致性，实现视觉上和心理上的连贯，使整个网页设计的各个部分极为融洽，犹如一气呵成。2、统一，是指网页设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那

3、样会使画面呈现出一种枝蔓纷杂的凌乱效果。3、分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。5.1.2网页布局样式类型（1）表格布局（2）DIV+CSS布局（3）框架布局（4）混合布局5.1.3网页布局功能（1）合理的网页布局能够使网页容纳的信息量增大，使网页显得内容丰富。（2）合理的网页布局能够吸引更多的用户去浏览，达到信息交流的目的。（3）合理的网页布局

4、能偶使用户更容易找到自己需要的信息节省用户时间，从而会增大客户量。5.2表格布局规划页面5.2.1表格布局基本操作（1）表格图5-2-1表格示意图（2）插入表格在DreamweaverCS5中创建表格很简单，操作为：1）定位光标在要插入表格的位置，然后执行以下操作之一：①单击菜单栏中的“插入”

5、“表格”命令。②在“插入”栏的“常用”类别中，单击“表格”按钮。2）打开表格对话框，如图5-2-2所示。图5-2-2表格对话框图3）单击“确定”创建表格插入如图5-2-3所示的“4行5列”的表格。图5-2-3“4行5列”的表格（3）插入嵌套表格

6、嵌套表格是在一个表格的单元格内插入表格。具体操作为：1）将光标定位在表格的一个单元格内。2）执行插入表格的操作，即可在表格内嵌套表格如图5-2-4所示。图5-2-4表格内嵌套表格图（4）添加内容将插入点定位在表格内，即可输入文本、图像、动画等网页元素。（5）选择表格将插入点定位在表格内，即可输入文本、图像、动画等网页元素。在上面的表格输入文字信息如图5-2-5所示。图5-2-5输入文字信息表格图（6）选择表格1）选择整个表格选择整个表格执行以下操作之一：①单击表格的左上角、右边或底部边缘的任意位置。②单击表格单元格，在菜单栏单击“修改

7、”

8、“表格”

9、“选择表格”命令。所选表格的下边缘和右边缘出现选择控制点如图5-2-6所示。图5-2-6选择整个表格图2）选择行或列选择行或列的操作如下：①鼠标指向行的左边缘或列的上边缘，光标变为→或↓。②单击鼠标则选择鼠标指向的行或列，如图5-2-7和图5-2-8所示。图5-2-7选择“行”图图5-2-8选择“列”图3）拖动鼠标，则选择连续的多行或多列。4）按Ctrl同时单击鼠标，则可选择不连续的多行或多列。3）选择单元格①选择单个单元格，请执行以下操作之一：单击单元格，然后在文档窗口左下角的标签选择器中选择标签。在单元格内双

10、击鼠标则可选择该单元格。在单元格内单击，然后按组合键Ctrl+A。②选择连续的多个单元格可以执行以下操作之一：单击第一个单元格，按住Shift键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。③按Ctrl同时单击单元格则可选择不相邻的多个单元格。（7）设置表格属性1）表格属性表格被选中之后，可以利用表格属性，如图5-2-9所示，来设置或修改表格的属性。图5-2-9表格属性图2）单元格属性单元格被选中或光标定位在

11、单元格中时，可以利用单元格属性，如图5-2-10所示，来设置或修改单元格的属性。图5-2-10单元格的属性图（8）编辑表格的基本操作表格插入并向其中添加内容后，要根据页面的及表格中的内容对表格进行调整，包括表格大小的调整