网页设计与制作第11章.docVIP

第11章 框架布局 一、知识要点 1、利用框架布局 2、框架布局与表格布局进行区别 3、结合Firewors、FLASH制作网页图片和动画 4、CSS样式 5、行为 6、第三方扩展 二、例题分析 例11.1： 步骤一：建站点 在D或E盘新建一个文件夹，再在这个文件夹中新建一个图像文件夹，在Dreamweaver 中再将第一个文件夹新建为站点。图像文件夹设置为站点默认图像文件夹。（文件夹、图像用英文或数字命名） 步骤二：框架集首页的创建及保存，设置框架集的及框架的各种属性。 1、 点击Dreamweaver菜单命令“文件/新建”，在常规选项卡中选择“框架集”，在框架集类别中选择“上方固定，下方固定”，新建一个框架网页，分成上中下三个区域。 2、 选择菜单命令“查看/可视化助理/框架边框”（打上勾），使框架边框在编辑窗口中可见。注意，重新打开该框架网页，若看不到框架边框，再执行该命令。 3、 在编辑窗口中，将鼠标放在框架之间的边框上，点击该边框就可以选中整个框架集，编辑窗口中框架边框呈虚线；或者“窗口/其它/框架”打开框架面板，单击框架集边框（粗三维边框）也能选中框架集，编辑窗口中框架边框呈虚线。 4、 在选中框架集之后，在属性面板中设置框架组“边框：否，边框宽度：0”，最重要的是设置各框架的大小，如左下图所示； 高65像素 宽132像素 高相对* 宽相对* 高相对* 高20像素 5、 在中间的框架中点击一下鼠标，即将光标置于该框架中，再点击菜单命令“修改/框架页/拆分右框架”，把中间的框架区域拆分为左右两部分。在编辑窗口中，将鼠标放在中间左右两框架之间的边框上，点击该边框就可以选中中间框架组，编辑窗口中中间框架组边框呈虚线，编辑窗口中整个框架集未成虚线；（或在框架面板中选择）。 6、 在选中中间框架组之后，在属性面板中设置框架组“边框：否，边框宽度：0”最重要的是设置各框架的大小，如右上图所示。 7、 点击菜单命令“文件/保存全部”，首先保存框架集文件，整个框架集边框显示为虚线，index.htm,接着依次保存框架中的其它页面，保存对应页面时，该页面都将以虚线框起来，上面部分保存为top.htm,左边部分保存为left.htm，右边部分保存为main.htm，下面部分保存为bottom,htm.。 8、 点击菜单命令“窗口/其它/框架”打开框架面板，单击上面的的框架，即选中该框架，在编辑窗口中呈虚线，在属性面板中设置“框架名称：使用默认值topframe，滚动：否，不能调整大小：复选框选中打勾，边框：否，边界宽度：0，边界宽度：0； 9、 选中左边框架，在属性面板中设置“框架名称；leftframe”，其余属性与上面框架（topframe）一样；选中下面框架，在属性面板中设置“框架名称；使用默认值bottomframe，其余属性与上面框架（topframe）一样。 10、 选中右边框架，在属性面板中设置“框架名称：使用默认值mainframe，滚动：默认，不能调整大小； 注意：除了在框架面板中选择某个框架，还可以按住ALT键，用鼠标在编辑窗口相应框架中点击，选中框架。 11、 点击菜单命令“文件/保存全部”，将所做的属性修改存起来。 步骤三：制作顶部框架topframes的框架页面文件top.htm。 1、将光标置于顶部框架中，在页面空白处单击鼠标右键选择“页面属性”命令或点击菜单命令“修改/页面属性”，在弹出的页面属性对话框中定义左边界、顶部边界都为0。 2、在顶部框架中插入一个2行3列的表格，在“插入表格”对话框中设置“宽”为800像素，“填充”、“间距”、“边框”值都为0，将“属性”窗口中表格属性的“高”设置为65像素。 3、再将第一行的三个单元格的高设置 43像素，宽分别为190像素，420像素，190像素：在第一个单元格中插入“中国建设银行”的网站标志图片；在第二个单元格中插入FLASH动画做的广告条；在第三个单元格中插入一个高度为20的图片，单元格中垂直对齐方式居底。 4、再将第二行的三个单元格合并，高为22像素，单元格背景颜色为#0044AA，单元格中水平对齐方式居右，输入文字与“|”，将文字建立超链接。 5、点击菜单命令“文本/CSS样式/新建CSS样式”，在“定义在”单选项中选择“新建样式表文件”，在“类型”单选项中选择“重定义HTML标签”，在“标签”下拉列表中选择“td”，单击“确定”，弹出“保存样式表文件为”的对话框，在站点文件夹中保存，输入文件名“YS”扩展名为“*.css”，点击保存后，在：“分类”中选择“类型”，“大小”中选择“12px”。所有“td”标签所标记的文字就都是这个样式了。 6、点击菜单命令“文本/CSS样式/编辑样式表”，点击“ys.css”，单击编辑按钮，再单击“新建”按钮，