布局.pptxVIP

3 网页布局 网页设计伴随着网络的快速发展而快速兴起，网页讲究的是排版布局，其功能是提供一种形式给每个上网者，让他们能够获得网站提供的信息。 首先要总体规划一下网站是由哪几个部分组成的，然后确定主页的风格、颜色的搭配、页面的布局以及内容的结构。确定整体风格需要注意问题：? 网站标志要放在醒目位置，如左上角，而且要保持不变。? 最好能够有一句反映网站精髓的标语，并能动态显示。? 导航部分应该放在每一张网页的相同位置，便于访问者浏览网站的全部内容。? 确定主体颜色，并注意颜色搭配要让人感觉舒服，不要太刺眼，也不能不突出需要强调的内容。? 页面的布局是风格的一个重要标志。网页各个组成部分放在哪里都是首先要考虑的。不要忘记考虑主页的可扩充性，以方便将来再添加栏目，一般采用左边导航、右边文字或者上面导航、下面文字的方法，也可以两者结合使用。 3 网页布局 3.1 视图布局 3.2 框架布局 3.3 表格布局 3.4 层布局 3.1 视图布局 Dreamweaver 8网页页面布局有两种工作模式，分别是【标准视图】和【布局视图】。 Dreamweaver 8默认的工作模式是【标准视图】，在【标准视图】模式下，用表格或嵌套表格可对网页的页面元素进行定位。 但在规划网页页面布局时，使用【布局视图】模式对网页的页面元素进行定位更为方便。 3.1 视图布局 在Dreamweaver 8【插入】面板组的【布局】选项卡中有【标准视图】和【布局视图】两个按钮，单击这两个按钮可在两种视图间进行切换，如图5-12所示。图5-12 视图模式切换1．使用【布局视图】设计网页布局 使用【布局视图】设计网页布局的具体操作步骤：（1） 选择【查看”】|【“表格模式”】|【“布局模式】命令，或在【插入】面板的“布局】选项卡中单击【布局模式】按钮，切换到【布局视图】中。（2） 单击【布局视图】按钮后，系统显示【布局视图入门】对话框，如图5-13所示，对话框中显示一些简单的布局视图的使用信息。单击【确定】按钮便可进入【布局视图】模式。1．使用布局视图设计网页布局图5-13 布局视图入门对话框1．使用布局视图设计网页布局 （3） 单击【布局】选项卡中的 【布局表格】按钮，在页面的空白区域单击并拖动鼠标绘制所需的布局表格。若要连续绘制布局表格，按住【Ctrl】键重复上述步骤。在绘制布局表格的地方不能有任何文字和图片。 （4） 用户可以在现有的布局表格内绘制其他布局表格，以制作嵌套表格，各嵌套表格之间不能交叉。1．使用布局视图设计网页布局 （5） 在布局表格中必须画好布局单元格后才可以插入文字或图片等对象。单击【布局视图】区域中的【绘制布局单元格】的按钮，在布局表格中根据需要画出多个布局单元格。 （6） 在布局单元格中，可以根据页面需要输入文字或者插入图片等对象。 创建了布局表格和布局单元格之后，用户可在选中布局表格或布局单元格后，利用“属性】面板设置其宽度和高度、是否自动伸展、内容的对齐方式、背景颜色、填充及间距等属性。2．布局表格与布局单元格的编辑 （1）对布局表格和布局单元格的编辑，比如布局表格和布局单元格大小的调整、相关属性的设置，主要通过【属性】面板完成。具体方法如下： ① 选中布局表格或布局单元格。 ② 在布局表格或布局单元格【属性】面板中选择合适的参数，完成它们的属性设置。2．布局表格与布局单元格的编辑（2）布局表格各属性的意义如下。? 宽：设置布局表格的宽度，其中有两种方式，一种是固定像素的，另一种是自动伸展，分别相当于标准模式下表格宽度的两种单位：像素和百分比。? 高：设置表格的高度。? 背景颜色：设置表格的背景颜色。? 填充：单元格中的内容与单元格边框之间的距离。? 间距：单元格之间的距离。? 【清除行高】按钮：清除表格的行高。? 【使单元格宽度一致】按钮：使得单元格宽度与单元格中内容的宽度一致。? 【删除所有间隔图像】按钮：清除布局表格中所有的间隔图像。? 【删除嵌套】按钮：清除嵌套表格，可以不损失页面已经输入的内容，而直接删除嵌套表格。2．布局表格与布局单元格的编辑（3）布局单元格各参数的意义：? 宽、高、背景颜色：与布局表格类似。? 水平：设置水平方向的对齐方式。? 垂直：设置垂直方向的对齐方式。? 不换行：选择该项以禁止单元格中的文本自动换行。? 类：可以将CSS样式应用于对象。 3.2 框架布局 框架适合制作区域划分明确的网页，它实际上由两部分组成，即框架页与框架。 框架页在文档中定义了框架的结构、数量，尺寸及装入框架的页面文件。 所以，框架页并不显示在浏览器中，只是存储了一些框架如何显示的信息。 3.2 用框架布局 1．框架的创建 （1）创建框架 在网页中插入框架常用的有菜单命令和面板操作两种，选择【插入】|【HTML】|【框架】命令，可以通