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