动画制作第四章 网页布局

动画制作第四章网页布局认识表格

对网页整体布局通常是通过表格来完成的。行(Row)、列(Column)、边框(Border)：构成表格的最基本元素

行高：某一行高度，默认没定义列宽：某一列宽度

单元格填充：单元格中对象与边框距离

单元格间距：单元格之间间距边框表格外标题间距填充行标题插入简单表格步骤：新建或打开HTML文档打开插入表格对话框菜单法按钮法设置表格参数行、列数表格宽度边框粗细边距、间距：内容与边框、单元格间的距离页眉：表格的标题行或列标题：表格外的标题对齐标题摘要确定导入表格Dreamweaver可以将创建在另一个应用程序（如写字板文件）中的数据导入到网页中并设置为表格的格式，而且各数据之间不可以用制表符、逗号、冒号、分号或其它分隔符分隔开来。表格属性（美化表格）表格ID行、列、宽、高、对齐、边框、背景颜色、背景图像、边框颜色、类填充：内容与单元格边界间的距离间距：单元格间的距离清除列宽和行高按钮：清除多余空白像素和百分比转换按钮：表格宽、高单位设置表格选择整个表格:在“标签选择器”中选择<Table>鼠标指向任意边框上时，单击鼠标“修改”/“表格”/“选择表格”行和列将鼠标移到一行的最左或一列的最上面，出现黑色箭头时单击在“标签选择器”中选择<tr>多行和多列单元格:将鼠标移到一行的最左或一列的最上面，出现黑色箭头时拖选用【Ctrl】键复选一个单元格:在“标签选择器”中选择<Td>多个单元格:对于连续的单元格可以拖选；不连续的单元格用【Ctrl】键复选合并和拆分单元格插入和删除行或列行列单元格属性1、行、列及单元格属性水平、垂直、宽、高、背景、边框不换行：单元格中输入数据时不自动换行标题：将某一单元格设置为表头合并单元格/拆分单元格说明：设置单元格中元素在单元格中对齐方式使用“水平”、“垂直”属性；

设置单元格同宽或高使用“宽”、“高”属性。表格数据处理1、表格数据排序“命令”/“排序表格”,操作同word。2、表格数据的导入导出

(1)表格数据导入“文件”/“导入”命令可以将word、excel、记事本等表格文档直接导入到网页中。

(2)表格数据导出“文件”/“导出”命令可以将网页中的表格导出为DOC、XLS、TXT等文本文档。注意：在导出时最好用doc、txt两种格式，当为.xls格式时字符有乱码的现象，用记事本打开就会正常。特殊表格制作1、细线表格表格边框：0单元格间距：1背景色：黑色单元格背景色：白色2、缺少边框表格表格边框：1输入代码：frame=“参数”（参数值：above(上)、below(下)、vsides(左右)、hsides(上下)、lhs(左)、rhs(右)、void(没有边框))3、突起表格(立体表格)表格边框：1背景色：#999999输入代码：bordercolorlight=“#000000”bordercolordark=“#ffffff”4、制作1px高度的分割线表格边框：0单元格间距：0单元格填充：0单元格背景图高度：1单元格背景颜色：#000000在代码视图下将单元格的“占位符”删除嵌套表格（表格布局重点）嵌套表格即在一个单元格中插入一个表格方法:（嵌套表格的宽度受所在单元格的宽度限制）将光标定位在某个单元格中插入表格用表格布局网页浏览器在下载完一个完整的表格后才显示表格中的所有内容，因此应尽可能用多个独立的表格来布局页面（水平方向上是一个，垂直方向上是多个）。作为外层的布局整个页面的表格以像素为单位（720-778），而里面的表格以%为单位（95-100）。外层的布局表格若要设置对齐属性，则都设置为统一的。

说明：IE窗口内能看到的第一屏部分为778px*435px。第二节AP元素和Spry的使用一、AP元素和Spry构件二、创建和选择AP元素三、AP元素的属性四、Spry的使用AP元素和Spry构件AP元素可以看作页面内容容器，在AP元素中可放置文本、图像、对象插件等。特性：浮动；重叠；显示、隐藏。Spry构件是网页制作中一个特殊的脚本行为控件，添加该控件可以实现无需编写程序就能实现的功能，如导航菜单、可折叠栏目显示和工具提示。创建和选择AP元素1、创建AP元素插入AP元素：“插入”/“布局对象”/“AP

Div”绘制AP元素：“插入”/“布局对象”/“绘制AP

Di拖放AP元素：“插入”/“布局对象”/拖放“绘制AP

Div”2、嵌套AP元素嵌套AP元素是包含在其它AP元素中的AP元素AP元素的嵌套子AP元素可以超过父AP元素或完全在父AP元素之外父AP元素的某些属性变化，则子AP元素也相应变化注意：

在新建层之前，通过“首选参数”对话框中的“AP元素”选项来设置层的默认属性。注意：

子AP元素可浮动于文本编辑窗口的任何位置，子AP元素的大小也可以大于父AP元素。建立方法：建立AP元素嵌套将光标移到现有层中，执行“插入”/

“APDiv”或拖入AP元素基本操作激活AP元素：在AP元素内的任何地方单击，只有AP元素被激活后才能在其中输入文本或插入图像等内容。选择AP元素：单击AP元素标记先激活AP元素，再单击选择柄单击AP元素边框【Ctrl】+【Shift】+单击在AP元素面板中单击AP元素名称选中多个AP元素按住【Shift】键，在要选中的AP元素中单击鼠标；在AP元素管理器中单击AP元素的名称。调整AP元素大小/调整多个AP元素大小

（同图像调整）对齐AP元素：选择AP元素后，执行“修改”菜单中的“对齐”命令移动和删除AP元素（同图像和文件的移动删除操作）拖动AP元素的边框或手柄选中AP元素后，按箭头键注意：

在文档编辑区选择一个层，按住【Ctrl】键的同时再按键盘上的方向键即可按一次1个像素步幅来调整层大小。

在文档编辑区选择一个层，按【Shift+Ctrl】键的同时再按键盘上的方向键即可按一次10个像素步幅来调整层大小。注意：

选择“修改”/“排列顺序”/“设成宽度相同”或“设成高度相同”菜单命令。首先选择的层将自动调整为最后一个选择的层相同的宽度或高度。AP元素属性面板(设置单个和多个AP元素属性)AP元素编号：标识AP元素，只能用英文字母，不要用特殊字符左、上：子AP元素相对于父AP元素左上角位置，单位为像素宽、高：Z轴：AP元素深度，设置AP元素重叠次序可见性Default：一般与inherit相同，默认为继承父级元素的可见性Inherit：继承父AP元素可见性Visible：显示AP元素及其中内容Hidden：隐藏AP元素及其中内容溢出Visible：增加AP元素的大小，以显示全部内容Hidden：超过AP元素大小的内容被裁减，不出现滚动条Scroll：无条件加滚动条，（设计界面看不到，浏览器可看到）Auto：自动加滚动条，（设计界面看不到，浏览器可看到）剪辑：定义AP元素可见性AP元素面板显示AP元素面板：【F2】键改变AP元素名称：双击创建嵌套AP元素：选择要作为子AP元素的AP元素，按住【Ctrl】键，将之拖到要作为父AP元素的AP元素顶上。修改AP元素的可见性：在可见性处单击，进行切换修改AP元素的深度：双击AP元素后面的数字在输入框中输入新值上下拖动AP元素AP元素面板图

AP元素可见性

AP元素名称AP元素深度AP元素与表格转换AP元素转换为表格“修改”/“转换”/“APdiv到表格”在对话框中进行设置(最精确、最小、使用透明GIFs、置于页面中央等)注意：重叠AP元素不能转换。表格转换为AP元素执行“修改”/”转换”/”表格到APdiv”在对话框设置AP元素布局页面注意：防止AP元素重叠：选择“AP元素”面板上“防止重叠”选项选择“修改”/“排列”/“防止AP元素重叠”第三节框架一、创建框架

1、创建框架

2、创建嵌套框架二、选择框架集与框架三、设置框架属性

1、框架集属性

2、框架属性四、保存框架框架框架是将一个页面划分成不同的文档区，每个文档区显示独立的内容，其效果是在浏览网页时,网页中一部分区域（如公司Logo、导航条）内容不改变，而其他区域内容在不断发生改变。框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器进行的处理除外，即<noframes>部分），框架集文件只是向览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。框架构成框架的组成：框架集、框架框架集：实际上也是一个HTML网页。框架集中保存关于页面中的框架数、框架尺寸、位置及每个框架中作为内容载入的所有文件名的信息,以及页面上框架如何显示信息，其页面不在浏览器中显示每个框架都包含对应一个独立的HTML文件框架页由一个框架集和若干个框架组成。每一个框架对应一个独立html文件，由框架集来定义多个框架显示问题。创建框架、嵌套框架集创建框架执行“插入”/“HTML”/“框架”命令单击“框架按钮”框架的分隔：拖曳框架边框删除框架：（将删除框架边框拖到父框架边框或拖离页面）创建嵌套框架集（创建预定义框架集）选择框架在其中创建框架在Dreamweaver中预定义了一些框架集样式，需要使用时直接插入即可。选择框架集与框架框架面板:“窗口”菜单中的“框架”命令选择框架集：在设计窗口中，单击框架边线可以选择相应的框架集。在框架面板中，单击比较粗的边框线可以选择相应的框架集。选择框架：在面板单击框架区框架属性1、框架集属性边框、边框宽度、边框颜色、行列选定范围、值、单位2、框架属性框架名称源文件：框架所指向的文件名滚动：是否加滚动条自动：文档内容超出框架时，显示滚动条是：无论内容多少，都显示滚动条否：不显示滚动条默认：自动不能调整大小：在浏览时不能拖动框架边界边界宽度、高度：内容与框架边界间距离框架链接

在使用框架技术文档中链接与一般文档中链接不同，增加了与框架有关链接目标，可以在一个框架内使用链接改变另一个框架内容。保存框架框架集（保存框架页）作为一个HTML文件用来组织框架，每一个框架也作为一个HTML文件保存内容框架保存（保存框架）：框架集文档框架文档1框架文档2框架文档3在保存框架时，不要选择框架，将光标定位于框架中即可。保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。Iframe–浮动框架

Iframe（浮动框架）：使用它可以在指定位置以指定大小显示其他网页文档的内容。模板一、创建和编辑模板二、应用模板与更新站点模板概念模板:模板是用来产生带有固定特征和共同格式的文档基础,是用户进行批量设计网页文档的框架.网页常用的固定组成部分logo：即网站的徽标，这是一个网站的标志，在每个页面最顶部的左上角，标准大小为88px×31px；banner：即页面上的广告条，可放在页面的任意位置NavBar：即页面上的导航条，一般放在页面的顶部和底部copyright：即页面上的版权信息，一般在页面的最底部创建模板打开“资源面板”：“窗口”/“资源”显示模板窗口：单击“资源面板”左侧的模板按钮单击