网页设计与制作第11章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
三、实作训练
11.1：Flash帮助（框架布局）
高65像素
宽132像素
高相对*
宽相对*
高相对*
高20像素
5、 在中间的框架中点击一下鼠标，即将光标置于该框架中，再点击菜单命令“修改/框架页/拆分右框架”，把中间的框架区域拆分为左右两部分。在编辑窗口中，将鼠标放在中间左右两框架之间的边框上，点击该边框就可以选中中间框架组，编辑窗口中中间框架组边框呈虚线，编辑窗口中整个框架集未成虚线；（或在框架面板中选择）。
10、 选中右边框架，在属性面板中设置“框架名称：使用默认值mainframe，滚动：默认，不能调整大ቤተ መጻሕፍቲ ባይዱ；
注意：除了在框架面板中选择某个框架，还可以按住ALT键，用鼠标在编辑窗口相应框架中点击，选中框架。
11、 点击菜单命令“文件/保存全部”，将所做的属性修改存起来。
步骤三：制作顶部框架topframes的框架页面文件top.htm。
5、点击菜单命令“文本/CSS样式/新建CSS样式”，在“定义在”单选项中选择“新建样式表文件”，在“类型”单选项中选择“重定义HTML标签”，在“标签”下拉列表中选择“td”，单击“确定”，弹出“保存样式表文件为”的对话框，在站点文件夹中保存，输入文件名“YS”扩展名为“*.css”，点击保存后，在：
3、 在编辑窗口中，将鼠标放在框架之间的边框上，点击该边框就可以选中整个框架集，编辑窗口中框架边框呈虚线；或者“窗口/其它/框架”打开框架面板，单击框架集边框（粗三维边框）也能选中框架集，编辑窗口中框架边框呈虚线。
4、 在选中框架集之后，在属性面板中设置框架组“边框：否，边框宽度：0”，最重要的是设置各框架的大小，如左下图所示；
6、 在选中中间框架组之后，在属性面板中设置框架组“边框：否，边框宽度：0”最重要的是设置各框架的大小，如右上图所示。
7、 点击菜单命令“文件/保存全部”，首先保存框架集文件，整个框架集边框显示为虚线，index.htm,接着依次保存框架中的其它页面，保存对应页面时，该页面都将以虚线框起来，上面部分保存为top.htm,左边部分保存为left.htm，右边部分保存为main.htm，下面部分保存为bottom,htm.。
1、将光标置于顶部框架中，在页面空白处单击鼠标右键选择“页面属性”命令或点击菜单命令“修改/页面属性”，在弹出的页面属性对话框中定义左边界、顶部边界都为0。
2、在顶部框架中插入一个2行3列的表格，在“插入表格”对话框中设置“宽”为800像素，“填充”、“间距”、“边框”值都为0，将“属性”窗口中表格属性的“高”设置为65像素。
8、 点击菜单命令“窗口/其它/框架”打开框架面板，单击上面的的框架，即选中该框架，在编辑窗口中呈虚线，在属性面板中设置“框架名称：使用默认值topframe，滚动：否，不能调整大小：复选框选中打勾，边框：否，边界宽度：0，边界宽度：0；
9、 选中左边框架，在属性面板中设置“框架名称；leftframe”，其余属性与上面框架（topframe）一样；选中下面框架，在属性面板中设置“框架名称；使用默认值bottomframe，其余属性与上面框架（topframe）一样。
3、再将第一行的三个单元格的高设置 43像素，宽分别为190像素，420像素，190像素：在第一个单元格中插入“中国建设银行”的网站标志图片；在第二个单元格中插入FLASH动画做的广告条；在第三个单元格中插入一个高度为20的图片，单元格中垂直对齐方式居底。
4、再将第二行的三个单元格合并，高为22像素，单元格背景颜色为#0044AA，单元格中水平对齐方式居右，输入文字与“|”，将文字建立超链接。
步骤二：框架集首页的创建及保存，设置框架集的及框架的各种属性。
1、 点击Dreamweaver菜单命令“文件/新建”，在常规选项卡中选择“框架集”，在框架集类别中选择“上方固定，下方固定”，新建一个框架网页，分成上中下三个区域。
2、 选择菜单命令“查看/可视化助理/框架边框”（打上勾），使框架边框在编辑窗口中可见。注意，重新打开该框架网页，若看不到框架边框，再执行该命令。
第11章 框架布局
一、知识要点
1、利用框架布局
2、框架布局与表格布局进行区别
3、结合Firewors、FLASH制作网页图片和动画
4、CSS样式
5、行为
6、第三方扩展
二、例题分析
例11.1：
步骤一：建站点
在D或E盘新建一个文件夹，再在这个文件夹中新建一个图像文件夹，在Dreamweaver 中再将第一个文件夹新建为站点。图像文件夹设置为站点默认图像文件夹。（文件夹、图像用英文或数字命名）
11.1：Flash帮助（框架布局）
高65像素
宽132像素
高相对*
宽相对*
高相对*
高20像素
5、 在中间的框架中点击一下鼠标，即将光标置于该框架中，再点击菜单命令“修改/框架页/拆分右框架”，把中间的框架区域拆分为左右两部分。在编辑窗口中，将鼠标放在中间左右两框架之间的边框上，点击该边框就可以选中中间框架组，编辑窗口中中间框架组边框呈虚线，编辑窗口中整个框架集未成虚线；（或在框架面板中选择）。
10、 选中右边框架，在属性面板中设置“框架名称：使用默认值mainframe，滚动：默认，不能调整大ቤተ መጻሕፍቲ ባይዱ；
注意：除了在框架面板中选择某个框架，还可以按住ALT键，用鼠标在编辑窗口相应框架中点击，选中框架。
11、 点击菜单命令“文件/保存全部”，将所做的属性修改存起来。
步骤三：制作顶部框架topframes的框架页面文件top.htm。
5、点击菜单命令“文本/CSS样式/新建CSS样式”，在“定义在”单选项中选择“新建样式表文件”，在“类型”单选项中选择“重定义HTML标签”，在“标签”下拉列表中选择“td”，单击“确定”，弹出“保存样式表文件为”的对话框，在站点文件夹中保存，输入文件名“YS”扩展名为“*.css”，点击保存后，在：
3、 在编辑窗口中，将鼠标放在框架之间的边框上，点击该边框就可以选中整个框架集，编辑窗口中框架边框呈虚线；或者“窗口/其它/框架”打开框架面板，单击框架集边框（粗三维边框）也能选中框架集，编辑窗口中框架边框呈虚线。
4、 在选中框架集之后，在属性面板中设置框架组“边框：否，边框宽度：0”，最重要的是设置各框架的大小，如左下图所示；
6、 在选中中间框架组之后，在属性面板中设置框架组“边框：否，边框宽度：0”最重要的是设置各框架的大小，如右上图所示。
7、 点击菜单命令“文件/保存全部”，首先保存框架集文件，整个框架集边框显示为虚线，index.htm,接着依次保存框架中的其它页面，保存对应页面时，该页面都将以虚线框起来，上面部分保存为top.htm,左边部分保存为left.htm，右边部分保存为main.htm，下面部分保存为bottom,htm.。
1、将光标置于顶部框架中，在页面空白处单击鼠标右键选择“页面属性”命令或点击菜单命令“修改/页面属性”，在弹出的页面属性对话框中定义左边界、顶部边界都为0。
2、在顶部框架中插入一个2行3列的表格，在“插入表格”对话框中设置“宽”为800像素，“填充”、“间距”、“边框”值都为0，将“属性”窗口中表格属性的“高”设置为65像素。
8、 点击菜单命令“窗口/其它/框架”打开框架面板，单击上面的的框架，即选中该框架，在编辑窗口中呈虚线，在属性面板中设置“框架名称：使用默认值topframe，滚动：否，不能调整大小：复选框选中打勾，边框：否，边界宽度：0，边界宽度：0；
9、 选中左边框架，在属性面板中设置“框架名称；leftframe”，其余属性与上面框架（topframe）一样；选中下面框架，在属性面板中设置“框架名称；使用默认值bottomframe，其余属性与上面框架（topframe）一样。
3、再将第一行的三个单元格的高设置 43像素，宽分别为190像素，420像素，190像素：在第一个单元格中插入“中国建设银行”的网站标志图片；在第二个单元格中插入FLASH动画做的广告条；在第三个单元格中插入一个高度为20的图片，单元格中垂直对齐方式居底。
4、再将第二行的三个单元格合并，高为22像素，单元格背景颜色为#0044AA，单元格中水平对齐方式居右，输入文字与“|”，将文字建立超链接。
步骤二：框架集首页的创建及保存，设置框架集的及框架的各种属性。
1、 点击Dreamweaver菜单命令“文件/新建”，在常规选项卡中选择“框架集”，在框架集类别中选择“上方固定，下方固定”，新建一个框架网页，分成上中下三个区域。
2、 选择菜单命令“查看/可视化助理/框架边框”（打上勾），使框架边框在编辑窗口中可见。注意，重新打开该框架网页，若看不到框架边框，再执行该命令。
第11章 框架布局
一、知识要点
1、利用框架布局
2、框架布局与表格布局进行区别
3、结合Firewors、FLASH制作网页图片和动画
4、CSS样式
5、行为
6、第三方扩展
二、例题分析
例11.1：
步骤一：建站点
在D或E盘新建一个文件夹，再在这个文件夹中新建一个图像文件夹，在Dreamweaver 中再将第一个文件夹新建为站点。图像文件夹设置为站点默认图像文件夹。（文件夹、图像用英文或数字命名）