情境1图形图像专题学习网站主页设计.pptVIP

第九章 框架与表格网页布局设计 项目展示与项目目标 第九章 框架与表格网页布局设计 地址:北京百万庄大街22号 邮编:100037 编辑热线: (010)机 械 工 业 出 版 社 CHINA MACHINE PRESS 地址:北京百万庄大街22号 邮编:100037 编辑热线: (010)机械工业出版社 基于工作过程的网页设计与制作教程 主编：张洪斌 季春光 刘万辉 情境1：图形图像专题学习网站主页设计 基于工作过程的 网页设计与制作教程 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 1项目展示与项目目标 掌握在网页中创建框架的方法 掌握为框架命名并导入框架源文件的方法 掌握框架集文件的保存的方法 掌握框架集合集属性与框架属性的设置方法 掌握编辑框架的内容的方法 2. 项目资讯 关键知识点一：创建预定义框架 新建一个空白文档，执行“查看”→“可视化助理”→“框架边框”命令，在文档窗口中显示边框，将光标移动到边框，其会变成双向箭头形状，如图9-2所示。用光标左键拖动文档窗口中的框架边框，将其拖动到所需的位置上，释放光标左键，即可创建框架集。 2. 项目资讯 关键知识点二：创建自定义框架 创建自定义框架的方法是：执行“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“示例页”→“框架集”选项，在“示例页列表中”根据需要进行选择，单击“创建”按钮，即可创建框架集。 关键知识点三：框架的多种选择方法 选择框架有以下两种方法。 （1）执行“窗口”→“框架”命令，在打开的“框架”面板中单击需要选择的框架，则框架集的边界就会被虚线包围。 （2）按住Alt键，再单击文档窗口中需要选择的框架，即可选中框架。 2. 项目资讯 关键知识点四：框架集的多种选择方法 选择框架集有以下两种方法。 （1）将光标移动到整个边框上，按住Alt键，当光标指针变为水平方向箭头或垂直方向双向箭头时，单击边框即可选中整个框架集。 （2）单击“框架”面板中最外边的边框，当其显示为黑边时，即可选中框架集。 关键知识点五：框架的多种选择方法 选择框架集有以下两种方法。 （1）将光标移动到整个边框上，按住Alt键，当光标指针变为水平方向箭头或垂直方向双向箭头时，单击边框即可选中整个框架集。 （2）单击“框架”面板中最外边的边框，当显示为黑边时，即可选中框架集。 2. 项目资讯 关键知识点六：设置框架的属性 框架名称 源文件 边框 边框颜色 边框宽度 边框高度 2. 项目资讯 关键知识点七：设置框架集的属性 边框 边框宽度 边框颜色 单位 “行”和“列” 3. 项目计划与决策 通常功能型网站多采用框架结构，根据分析图形图像专题学习网站属于一个偏重软件功能的系统，网站设计采用框架结构，具体采用“上方固定、左侧嵌套”的框架布局结构。 网页布局将上方框架存放网站的页眉，包括网站名称与网站地址，左侧部分包括“课堂学习”、“实验实训素材下载”、“学生答疑”、“学习交流”、“电子作业批改”、“作业上传”、“公告栏”和教师的工作模块，右侧主窗口包括“实用教程”、“课外提高”和“视频教程”等模块。 网站页脚与版权信息 主框架 公告栏 课外提高 实用教程 视频教程 左框架 课堂学习 素材下载 学生答疑 学习交流 作业上传 作业成绩 上方框架 图形图像专题学习网站页眉与网址 4. 项目实施 1）根据草图，假设这个主页是上下结构，下方又分为左右结构，上方框架显示网站页眉信息，左方框架显示导航页面，右侧框架显示主内容。 提供的3个网页效果以及最终实现的效果如图所示。 顶部框架页面 左侧框架页面 主框架页面 套用框架后的页面 4. 项目实施 2）首先，执行“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“示例页”→“框架集”选项，在“示例页列表中”根据需要进行选择“上方固定、左侧嵌套”的示例框架结构，单击“创建”按钮，即可创建“上方固定，左侧嵌套”的框架集，如图所示。 4. 项目实施 3）创建完成后，执行“文件”→“框架集另存为”命令，在弹出的“另存为”对话框中输入框架集的名称为“default.htm”，保存框架在所提供的素材文件夹中，命名为“index.htm”，标题为“图形图像处理专题学习网站”，执行“窗口”→“框架”命令，如图所示。 4. 项目实施 4）单击“框架”面板中的上侧框架（topframe），在属性中单击“浏览文件”按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页