课程教案
授课内容 | 项目六 制作电影网网站——建立框架网页 | ||
授课班级 | 授课学时 | 8课时 | |
教学方法与手段 | 讲授法、演示法、讨论法。多媒体教学 | ||
项目内容 | 本项目的工作是为某影视传媒公司设计网站。网站主要为用户提供免费的高清电影在线观看和下载服务。网站的首页要求有良好的审美、布局和制作感。在技术方面，公司提出的要求有： 1. 首页的显示空间分割为几个区域，每个区域可以显示不同的信息。 2. 在实现区域之间显示信息时不会互相干扰。 根据客户的要求，我们在制作公司首页应用到框架技术。利用框架技术制作网站首页可以把浏览器的显示空间分割为几个区域，每个区域可以分别显示不同的页面；而且替换窗口中的内容时，各个窗口之间没有影响。使用框架的优点在于可以把不同层次的网页中的不改变的内容放在一个框架中，把不断改变的内容放在一个框架中。把框架技术运用到我们大电影网站导航和文档浏览中，能方便访问者对网页的浏览，减少访问者下载页面所需的时间。 | ||
教学目标 | 学生通过本项目的学习，能： 1、 理解框架网页的基本概念 2、 掌握创建框架的基本方法 3、 区分框架与框架集的保存 | ||
教学重点与难点 | 教学重点：掌握创建框架的基本方法 教学难点：建立框架网页 | ||
教学过程设计 | 项目效果 心理活动描写【任务】制作电影网首页——框架网页入门 除表格外，框架也是一种重要的网页布局工具，与使用表格布局网页不同的是，框架布局通常适合页面中一个区域发生变化，而其他区域不发生变化的网页，如网站后台管理界面和一些论坛网页。 （一）了解框架和框架集 在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。每个框架可显示不同文档的内容，彼此之间互不干扰。 框架网页由框架集定义，框架集是特殊的HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面 URL。 框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供如何显示一组框架，以及在这些框架中应显示哪些文档的信息。要在浏览器中查看一组框架，需要输入框架及文件的URL，浏览器随后打开要显示在这些框架中的相应文档。 使用框架最常见的情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。例如，下图显示了一个由两个框架组成的框架网页：一个较窄的框架位于右侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。当访问者浏览站点时，单击左侧框架中的某一超链接，或者展开或收缩其中的栏目，或者更改左侧框架的内容。 （二）了解框架构造 上图所示的网页至少由三个单独的网页文档组成：两个框架区域中显示的两个网页文档和把这两个文档显示在一个界面上的框架集文档。在Dreamweaver中设计使用框架集的网页时，必须全部保存这三个文件，框架集网页才能在浏览器中正常显示。下图显示了该框架集文档的结构。 在制作框架集文档时，每个框架都有自己的名称。如果没有理解前面所讲框架的概念，可能会搞不清楚框架名称和网页文档名称的区别。为方便记忆和理解，可自行设置框架名称。方法为：选择框架后，在“属性”面板上的“框架名称”编辑框中直接输入（一般在创建框架时会自动指定框架名称）。 （三）制作并保存框架集文档 在Dreamweaver中创建框架集的方法有很多，可以选择“文件”→“新建”菜单，打开“新建文档”对话框，然后在左侧的“文档类型”列表中选择“示例中的页”，在“示例文件夹”列表中选择“框架集”，最后在“示例页”列表中选择框架类型并单击“创建”按钮； 也可以通过选择“修改”→“框架集”菜单下的子菜单，将普通页面拆分为框架集；另外，还可以单击“布局”插入栏中的“框架”按钮，在普通页面中插入预定义的框架集。下面以第二种方法为例，介绍制作框架集的方法。 步骤 1 启动 Dreamweaver CS3 后，选择“文件”→“新建”菜单，创建一个普通的 HTML文档。 步骤 2 为创建上下结构的框架，将插入点置于父档窗口中，选择“修改”→“框架集”→“拆分上框架”菜单，网页文档被拆分为上下两个框架。 步骤 3 为把拆分框架的下面部分再次拆分为左右两个框架，将插入点置于下方框架中，然后选择“修改”→“框架集”→“拆分左框架”菜单，下面的框架被拆分为左右两个框架。 步骤 4 为保存包含整个框架的框架集文档，选择“文件”→“保存框架页”菜单，打开“另存为”对话框，在“保存在”下拉列表中选择保存位置，在“文件名”编辑框中输入文件名，然后单击“保存”按钮。 步骤 5 保存各个框架中的网页文档，将插入点置于最上面的框架区域中，选择“文件”→“保存框架”菜单，将其保存为“top.html”。 步骤 6 按照同样的方法，将下方的两个文档依次保存为“left.html”和“right.html”。 （四）设置框架集属性 在制作框架时，Dreamweaver默认以工作界面为基准二等分框架，但在实际的网页制作中，需要根据布局精确地指定每个框架的大小。以前面制作的框架集为例，介绍如何设置框架集属性（包括指定框架大小和边框）。 步骤 1 单击上下框架边界线可选中框架集，此时“属性”面板上将显示框架集属性，在“行”编辑框中输入“100”（单位默认为“像素”），然后按Enter键，则上方框架变为设置的高度。 步骤 2 为调整左侧框架宽，单击左右框架分界线，然后在“属性”面板上的 “行”编辑框中输入“160”（单位默认为“像素”），并按Enter键，则左侧框架变成设置的宽度。 步骤 3 如果想为框架设定边框，则在单击框架分界线后，在“边框”下拉列表中选择“是”，然后在“边框宽度”编辑框中输入宽度值（此处为“2”），单击“边框颜”按钮设置边框颜（此处为黑）。 （五）设置框架属性 设置框架属性，首先选中框架。选择框架的方法有两种，一种是在“框架”面板中选择，还有一种是使用鼠标和键盘选择，在此基础上进行设置。 步骤 1 选择“窗口”→“框架”菜单，可打开“框架”面板。利用“框架”面板选择框架时，直接在面板中相应区域单击即可。 你知道哪些暴利的行业 步骤 2 使用鼠标和键盘选择框架的方法为：按住Alt键，然后在要选择的框架内单击。 步骤 3 选中框架后，利用“属性”面板可设置其属性，包括框架名称、框架源文件、框架边框等。 小提示：框架名称只能包含字母、下划线等，且开头必须是字母，不出现连字符、句点及空格，不能使用 JavaScript的保留关键字。 下面列出框架“属性”面板中各项参数的意义。 ● 框架名称：命名选取的框架，方便被程序引用或作为链接的目标框架。 ● 源文件：显示当前框架中网页文档的保存路径。可以在相应框架中使用图像或文档制作网页文档后保存，也可以指定已经存在的其他网页文档。 ● 边框：设定是否显示框架边界线，默认“显示”。 ● 滚动：设置框架滚动条的属性，“是”表示无论框架文档中的内容是否超出框架大小，都显示滚动条；“否”表示不管框架内容是否超出框架大小，都不显示滚动条；“自动”表示当框架内容超出框架大小时，出现框架滚动条，否则不出现框架滚动条；“默认”表示采用浏览器默认的方式。 ● 不能调整大小：选中该复选框表示不能在浏览器中拖动框架边框改变框架大小。 ● 边框颜：设置框架边框的颜。 ● 边界宽度：设置框架内容距左右边框的距离。 ● 边界高度：设置框架内容距上下边框的距离。 【任务实施】 在学习了框架的相关知识后，下面完成使用框架技术的播客网站的制作。 （一）制作网站首页 该网站首页由上下框架组成，当单击上方框架导航栏中的链接时，将在下方框架中显示链接的网页文档。 步骤 1 将“\素材与实例\素材”目录下的“Big movie”文件夹拷贝至本地磁盘，然后在 Dreamweaver 中定义站点“Big movie”。 步骤 2 新建文档，将插入点置于文档窗口中，然后单击“布局”插入栏中的“框架”按钮，在下拉列表中选择“顶部框架”。 步骤 3 选择“文件”→“保存框架页”菜单，将框架页保存为“index.html”。 步骤 4 螃蟹怎么保存在冰箱单击上下框架分界线，在“属性”面板上“行”编辑框中输入“260”，设置上方框架高为 260 像素。 步骤 5 按住Alt键的同时在顶部框架内单击，以选择顶部框架。然后单击“属性”面板上“源文件”编辑框后的“浏览文件”按钮。 2020年处暑步骤 6 打开“选择HTML文件”对话框，在“查范围”下拉列表中选择网站根文件夹，在文件夹列表中选择网页文档“top.html”，然后单击“确定”按钮。 步骤 7 按照同样的方法，设置下方框架源文件为“main.html”，此时将弹出提示框，单击“否”按钮即可。 步骤 8 选择“文件”→“保存全部”菜单，保存所有文档，然后按F12键预览文档。 （二）设置链接 步骤 1 继续在前面文档中的操作。为便于记住框架名称，在选中下方框架后，将“属性”面板上“框架名称”编辑框中的原内容删除，重新输入“main”作为框架名称。 步骤 2 单击并拖动鼠标选中上方框架导航栏中的文本“视频”，在“属性”面板上设置链接文档为“babymain.html”，并在“目标”下拉列表中选择“main”。 步骤 3 选择“文件”→“保存全部”菜单，保存所有文档，然后按F12键预览，单击导航条中文本“影视区”，在下方框架中将会打开文档“babymain.html”。 【知识拓展】嵌入式框架 所谓嵌入式框架，就是在网页的表格中嵌入一个框架。该框架可以有滚动条，可以在有限的空间里放无限的东西。 正确使用嵌入式框架，可以为网站的创建带来许多便利，比如在个人网站中，可以将留言内容放在一个嵌入式框架里，这样既方便又漂亮；也可以为框架定义一个名字，并在其中显示链接网页，这样就实现了在各个页面之间快速跳转的目的。下面通过一个例子介绍嵌入式框架的应用。 步骤 1 启动Dreamweaver，新建一个HTML格式的网页文档，并保存文档为 “index.html”。打开“页面属性”对话框，设置页面上、下、左、右边距值均为0。 步骤 2 在网页中插入一个 2 行 3 列，宽为 1 000 像素，“边框粗细”和“单元格间距”均为 0，“单元格边距”为 10 的表格，并设置为“居中对齐”。 步骤 3 在表格第l行的3个单元格中分别输入文本“新浪”“搜狐”和“网易”，并设置第 l 列为“右对齐”，第 2 列为“居中对齐”，第 3 列为“左对齐”。 步骤 4 将第2行的3个单元格合并，并设置合并后的单元格的对齐方式为“居中对齐”，然后切换至“拆分”视图。 步骤 5 将插入点置于代码视图中“<div align=“center”>”代码后方，将“常用”插入栏切换至“布局”插入栏，单击其中的“iframe”按钮。 步骤 6 插入“<iframe></iframe>”代码，将插入点置于 <iframe> 标签内部，按空格键，弹出“快速标签编辑器”，双击其中的“height”标签。 步骤 7 设置“height”值为“600”。将插入点置于代码“height=“600””右侧，按空格键，在弹出的“快速标签编辑器”中双击“width”。 步骤 8 设置“width”值为“980”。将插入点置于代码“width=“980””右侧，按空格键，在弹出的“快速标签编辑器”中双击“name”，设置“name”值为“main”。 步骤 9 按照同样的方法输入“scrolling”，并设置其值为“auto”，表示当网页内容超出嵌入式框架时，自动出现滚动条。 多媒体设计与制作 步骤 10 切换至“设计”视图，选中文本“新浪”，在“属性”面板上的“链 接”编辑框中输入新浪网址“www.sina”，在“目标”编辑框中输入框架名main”。 步骤 11 选中文本“搜狐”，在“属性”面板上的“链接”编辑框中输入搜狐网址“www.sohu”，在“目标”编辑框中输入框架名“main”。 步骤 12 环保趣味问答用同样的方法，设置文本“网易”链接到网易网址“www.163”。 步骤 13 按【Ctrl+S】组合键保存文档，然后按F12键预览网页，单击链接文本“新浪”，可看到在框架中打开新浪网首页。 | ||
作业： 1．请简述框架名称的命名规则。 2．如何将框架拆分为左右两个框架？ 3．什么是嵌入式框架？ | |||
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论