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

.,1,网页制作案例教程,毋建军郑宝昆郭锐编著清华大学出版社,.,2,第5章网页布局规划设计,.,3,本章学习目标（知识要点）,网页布局技术的基本概念与原理表格布局规划页面层布局规划页面框架布局规划页面手工创建混合布局页面,.,4,本章学习导航,网页布局能够使网页页面整齐、有序、美观，并且能够帮助读者很好的了解网页信息，本章主要介绍表格、层、框架布局规划页面。本章内容在全书知识结构中所处位置如图所示,.,5,.,6,5.1页面布局技术概述,5.1.1网页布局设计原则1、连贯，是指要注意页面的相互关系。网页设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个网页设计风格的一致性，实现视觉上和心理上的连贯，使整个网页设计的各个部分极为融洽，犹如一气呵成。2、统一，是指网页设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。3、分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。,.,7,5.1.2网页布局样式类型（1）表格布局（2）DIV+CSS布局（3）框架布局（4）混合布局,.,8,5.1.3网页布局功能（1）合理的网页布局能够使网页容纳的信息量增大，使网页显得内容丰富。（2）合理的网页布局能够吸引更多的用户去浏览，达到信息交流的目的。（3）合理的网页布局能偶使用户更容易找到自己需要的信息节省用户时间，从而会增大客户量。,.,9,5.2表格布局规划页面,5.2.1表格布局基本操作（1）表格,图5-2-1表格示意图,.,10,（2）插入表格在DreamweaverCS5中创建表格很简单，操作为：1）定位光标在要插入表格的位置，然后执行以下操作之一：单击菜单栏中的“插入”|“表格”命令。在“插入”栏的“常用”类别中，单击“表格”按钮。2）打开表格对话框，如图5-2-2所示。,.,11,图5-2-2表格对话框图,.,12,3）单击“确定”创建表格插入如图5-2-3所示的“4行5列”的表格。,图5-2-3“4行5列”的表格,.,13,（3）插入嵌套表格嵌套表格是在一个表格的单元格内插入表格。具体操作为：1）将光标定位在表格的一个单元格内。2）执行插入表格的操作，即可在表格内嵌套表格如图5-2-4所示。,.,14,图5-2-4表格内嵌套表格图,.,15,（4）添加内容将插入点定位在表格内，即可输入文本、图像、动画等网页元素。（5）选择表格将插入点定位在表格内，即可输入文本、图像、动画等网页元素。在上面的表格输入文字信息如图5-2-5所示。,.,16,图5-2-5输入文字信息表格图,.,17,（6）选择表格1）选择整个表格选择整个表格执行以下操作之一：单击表格的左上角、右边或底部边缘的任意位置。单击表格单元格，在菜单栏单击“修改”|“表格”|“选择表格”命令。所选表格的下边缘和右边缘出现选择控制点如图5-2-6所示。,.,18,图5-2-6选择整个表格图,.,19,2）选择行或列选择行或列的操作如下：鼠标指向行的左边缘或列的上边缘，光标变为或。单击鼠标则选择鼠标指向的行或列，如图5-2-7和图5-2-8所示。,.,20,图5-2-7选择“行”图,图5-2-8选择“列”图,.,21,3）拖动鼠标，则选择连续的多行或多列。4）按Ctrl同时单击鼠标，则可选择不连续的多行或多列。,.,22,3）选择单元格选择单个单元格，请执行以下操作之一：单击单元格，然后在文档窗口左下角的标签选择器中选择标签。在单元格内双击鼠标则可选择该单元格。在单元格内单击，然后按组合键Ctrl+A。,.,23,选择连续的多个单元格可以执行以下操作之一：单击第一个单元格，按住Shift键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。按Ctrl同时单击单元格则可选择不相邻的多个单元格。,.,24,（7）设置表格属性1）表格属性表格被选中之后，可以利用表格属性，如图5-2-9所示，来设置或修改表格的属性。,图5-2-9表格属性图,.,25,2）单元格属性单元格被选中或光标定位在单元格中时，可以利用单元格属性，如图5-2-10所示，来设置或修改单元格的属性。,图5-2-10单元格的属性图,.,26,（8）编辑表格的基本操作表格插入并向其中添加内容后，要根据页面的及表格中的内容对表格进行调整，包括表格大小的调整、行高列宽的调整、单元格的合并及拆分等操作。1）调整表格的大小在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。,.,27,2）调整行高和列宽,图5-2-11调整行高或列宽图,.,28,3）合并或折分单元格拆分单元格单击菜单栏中的“修改”|“表格”|“拆分单元格”命令。合并单元格单击菜单栏“修改”|“表格”|“合并单元格“命令,.,29,4）插入和删除行或列插入单行或单列单击菜单栏中的“修改”|“表格”|“插入行”或“插入列”命令。插入多行或多列单击菜单栏中的“修改”|“表格”|“插入行或列”的命令,.,30,删除行或列单击菜单栏中的“修改”|“表格”|“删除行”或“删除列”命令。单击菜单栏中的“编辑”|“清除”命令。使用键盘上的“Delete”键。,.,31,5.2.2表格布局实例,.,32,5.3层布局规划页面,5.3.1层布局基本操作（1）创建层1）创建层1新建一个文档。2在“插入栏”中的“布局”类别中，单击“描绘APDiv”按钮。如图5-3-1所示。,.,33,图5-3-1“布局”栏图,.,34,3鼠标指针变“+”，按住左键并拖动，可以在网页中创建一个层，如图5-3-2所示。,图5-3-2“绘制层”图,.,35,2）创建嵌套层嵌套层指插入到另一个层中的层。创建的操作为：1新建一个文档，绘制一个层。2执行以下操作之一：将鼠标放在层中，然后单击菜单栏中“插入”|“布局对象”|“APDiv”命令。将一个层的标志图标，用拖拽的方式拖到另一层中。3创建了一个嵌套层，如图5-3-4所示。其中外面的层被称为“父层”，里面的层被称为“子层”。,.,36,图5-3-4双层“APDiv”图,.,37,3）向层中添加内容将光标定位在层中，光标变为“|”，可以向层中插入文本或图像等网页元素。,.,38,（2）层的基本操作1选择层使用下述方法中的任意一种方法，均可选中一个层：单击文档中层的边框线；单击文档左上方的层标志；,.,39,2移动层。使用下述方法中的任意一种方法，均可移动层：选中层后，拖动标记，可以将层移到文档的任意位置。鼠标移到层的边框上，指针变为，拖动鼠标可以移动层。对于多层的移动，拖动最后被选中的有实心控制点的层的标记，可以同时将多层移动。,.,40,3层的对齐。选中多层，单击菜单栏中“修改”|“排列顺序”命令，选择对齐方式，如“左对齐”、“右对齐”；“对齐上边缘”或“对齐下边缘”等。4层的属性设置。同其他网页元素一样，层的设置需要在“属性检查器”中进行。,.,41,5层面板的使用。通过层面板我们可以设置层是否重叠、层的可见性、层的叠放次序等。,图5-3-7层面板,.,42,（3）层与表格的转换1）将层转化为表格层转换为表格的操作为：1新建一个空白文档，在文档中绘制两个层。2单击菜单栏中“修改”|“转换”|“APDiv转换为表格”命令，打开“将APDiv转换为表格”对话框，如图5-3-8所示。,.,43,图5-3-8“将APDiv转换为表格”对话框图,.,44,2）将表格转化为层表格转化为层的操作为：1打开上面层转换为表格的文档。2单击菜单栏中“修改”|“转换”|“表格到层”命令，打开“转换表格为层”对话框，如图5-3-9所示。,.,45,5-3-9“转换表格为层”对话框图,.,46,5.3.2层布局实例,.,47,5.4框架布局规划页面,5.4.1框架布局基本操作（1）建立框架在DreamweaverCS5中，预定义了13种框架集结构供用户使用。建立预定义框架集的操作为：1）定位光标在要插入框架集的窗口中。2）执行以下操作之一：单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式在“插入”栏的“布局”类别中，单击框架按钮右侧的下拉按钮，弹出下拉菜单，单击相应的框架集图标。,.,48,（2）框架面板1）打开框架面板单击菜单栏中“窗口”|“框架“命令，打开框架面板如图5-4-4所示。在面板中标识了每个框的名称。,.,49,图5-4-4框架面板图,.,50,2）框架面板的基本操作：选择框架集：在“框架“面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。如图5-4-5所示，选中了框架集。选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。如图5-4-6所示，选中了下方的框架。,.,51,图5-4-5选中框架集图图5-4-6选中下方的框架图,.,52,（3）设置框架的属性1）设置框架集属性选中框架集，打开框集属性，如图5-4-7。,图5-4-7框集属性图,.,53,2）设置框架属性选择框架后（如选择左侧框架），打开框架属性，如图5-4-8所示。,图5-4-8选择左侧框架属性图,.,54,（4）保存框架1）保存框架集的操作：在框架面板中，选择中要保存的框架集。单击菜单栏中“文件”|“保存框架页”命令。打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架集网页。2）保存框架的操作：定位光标在要保存的框架内，或在框架面板中选择要保存的框架。单击菜单栏中“文件”|“保存框架”命令，打开另存为对话框。打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架。,.,55,5.4.2框架布局实例,.,56,5.5项目案例,学习目标,案例描述,学习和使用网页布局技术。,通过网页布局的原则，利用三种布局方式进行混合布局网页，制作如图5-5-1所示的网页。,.,57,案例要点,三种布局的操作。,案例实施,（1）选择“开始”“所有程序”“AdobeDreamweaverCS5”，启动AdobeDreamweaverCS5，新建一站点，将images素材文件夹复制到本站点文件夹中。（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”，单击“创建”按钮，新建一个网页。（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为5.5.html。,.,58,案例实施,（4）在页面5.5.html的文档编辑区的【标题】文本框里，将标题命名为“招聘页面”。（5）选择“插入”|“布局”面板的“绘制APDiv”标签，在页面中绘制一个Div，在属性面板中设定“左”、“上”、“宽”、“高”的值分别为：140px、12px、760px、110px。（6）将光标放在插入的div标签中，选择“插入”|“常用”，插入图片标签，弹出如图5-5-2所示的选择图像源文件对话框，选择images文件夹下的top.gif。,.,59,（7）选择“插入”|“布局”面板的“绘制APDiv”标签，再在页面中绘制一个Div，在属性面板中设定“左”、“上”、“宽”、“高”的值分别为：140px、125px、760px、23px。（8）将光标放在第（7）步插入的div中，选择“插入”|“常用”|“表格”，插入1行6列的表格，如图5-5-4所示。,案例实施,.,60,（9）插入表格后，在属性面板改变表格“宽度”属性值为760像素，对齐方式为居中对齐。将其背景颜色设置为蓝色，并在每个单元格内输入相应的文字，调整每个单元格的宽度以适应文字的宽度，如图5-5-5所示。,案例实施,.,61,（10）选择“插入”|“布局”面板的“绘制APDiv”标签，再在页面中绘制一个Div，在属性面板中设定“左”、“上”、“宽”、“高”的值分别为：1