第3章 网页的布局教学课件 网页制作基础教程（Dreamweaver CS6 第2版）

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,第一章 网站的建立,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第3章 网页的布局教学课件 网页制作基础教程（Dreamweaver CS6 第2版）工信版,主 编 黄洪杰,电子工业出版社,网页制作基础教程,(Dreamweaver CS6,第,2,版,),电子教案,第,3,章 网页的布局,项目,1,网页布局相关知识,当我们在网上浏览时，常常对一些网站记忆犹新。有的网站给人一种清新雅致的感觉，有的网站让人感觉厚重古朴，有的网站让人轻易就被吸引，有的网站让人很快找到自己想要的信息,为何会有这么多的不同感受？,子项目,1,网站的风格,在对网页插入各种对象、修饰效果前，一定要确定网站的风格和网页的布局。也就是说，要先确定网站的总体风格，并对网页的布局进行规划，这样才能保证网站中各网页的统一。,主页风格没有优劣之分，网站的性质与风格有着根本的区别。门户网站采用鲜艳的色彩吸引浏览者的注意，而广告是网站收入的重要来源，所以各种形式的广告是少不了的。服务性质的网站不必借各种手段吸引浏览者。,而个人网站往往突出创意和个性。,子项目,2,网页布局实例,简单划分，网页的布局一般可以分为“同”字型、标题正文型、分栏型、,Flash,型和封面型等。,“同”字型,子项目,2,网页布局实例,简单划分，网页的布局一般可以分为“同”字型、标题正文型、分栏型、,Flash,型和封面型等。,“同”字型,子项目,2,网页布局实例,标题正文型,子项目,2,网页布局实例,分栏型结构,子项目,2,网页布局实例,Flash,型网站,子项目,2,网页布局实例,封面型结构,子项目,3,网页布局注意事项,1.,平衡性,2.,对称性,3.,对比性,4.,疏密度,5.,反复性,6.,韵律感,7.,颜色搭配,子项目,4,画出网页布局草图,项目,2,使用表格规划网页布局,子项目,1,在网页中插入表格,在网页中单击鼠标，确定光标的位置。然后单击“插入”菜单，选择“表格”命令，,输入行、列的值。,子项目,1,在网页中插入表格,表格的高度和宽度是可以改变的。将鼠标指针移动到框线上，当鼠标指针改变时，拖动鼠标到合适的位置然后松开就可以了。,子项目,2,制作不规则表格,1.,添加新行、新列,使光标出现在,表格某,行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“插入行”，则插入一行,。,子项目,2,制作不规则表格,2.,删除行或列,首先单击鼠标，使光标出现在被删除行中。然后单击鼠标右键打开快捷菜单，移动鼠标指针到快捷菜单的“表格”上使之弹出子菜单，在子菜单中单击“删除行”，则该行被删除,。,子项目,2,制作不规则表格,3.,合并单元格,。,拖动鼠标同时选中,多个,单元格，移动鼠标指针到“属性”面板上，单击“合并单元格”按钮，则被选中的单元格被合并。,子项目,2,制作不规则表格,4.,拆分单元格,首先单击鼠标，使光标出现在被拆分单元格中。移动鼠标指针到“属性”面板上，单击“拆分单元格”按钮，打开“拆分单元格”对话框。,在“拆分单元格”对话框中,，输入相应值，单击确定。,子项目,3,设置表格和单元格属性,对表格进行设置，主要是在“属性”面板中进行，需要注意的是选取表格与选取单元格时，“属性”面板的内容是不同的。在表格的“属性”面板中，能够设置框线的宽度、单元格间距，以及背景色等。,子项目,3,设置表格和单元格属性,将表格框线的宽度更改为“,0,”，可以发现表格的框线变成虚线，这样在浏览器中，表格将被隐藏,。,子项目,4,表格的嵌套,在表格的单元格中，可以,再插入一个表格,。,子项目,5,使用表格规划网页布局,将表格中的所有框线粗细都设为,0,，调整表格的高度和宽度，借口初步看到一个规划后网页的样子。,调整,“属性”面板中的“填充”值,和,“间距”值,。,项目,3,使用,AP Div,布局网页,子项目,1 Div,与,AP Div,概述,Div,，也称,Div,标签，是一种区隔标记。它的主要作用是还可以将页面分割为不同的区域，设定文字、图像和表格的排列方式。通过拖动、方向键或者指定坐标的位置等方式，对文字、图像等元素进行精确定位。,AP Div,是一种绝对定位元素，它可以包含文本、图像等其他内容，这使得组成网页的各种元素可以精确定位在网页的某个位置。,子项目,2,插入,AP Div,移动鼠标单击“插入”菜单，选择“布局对象”下的“,AP Div,”命令，此时在网页编辑区出现一个区域,。,子项目,3,设置,AP Div,选中,AP,元素，单击,AP,元素框线，将鼠标指针移动到框线的右下角,上，当鼠标指针变成,时，拖动鼠标，更改,AP,元素的大小,。,子项目,3,设置,AP Div,属性面板中的主要参数含义如下：,编号：,AP,元素编号，与同一网页上的其他,AP,元素相区分。,左、上：,AP,元素与页面左上角的距离，用于确定绝对定位。,宽、高：,AP,元素的宽度和高度。,Z,轴：各个,AP,元素的排列顺序，也就是哪个,AP,元素在上面，哪个,AP,元素在下面。,背景颜色、背景色：用于设定,AP,元素的背景。,溢出：当层中文字超过层的大小时，显示文字的方式。有“,visible,”、“,hidden,”、“,scroll,”、“,auto,”四个方式，分别是自动扩大,AP,元素大小、超出部分不显示、出现滚动条、需要时自动显示滚动条。,子项目,4,使用,AP Div,完成网页布局,调整各个,AP,位置，在,AP,中插入文字或者图片。,子项目,1,。,