资源简介

中小学教育资源及组卷应用平台
信息技术《设计制作网页》教学设计
课题 《设计制作网页》 单元 一单元 学科 信息技术 年级 八年级
教材分析 《设计制作网页》这一课旨在让学生增进对网页设计制作的学习和掌握，学会对页面整体的设计和规划。教材编排了“学习任务-任务分析-操作指南-任务小结-知识链接-练习与思考”的系列学习活动，引导学生学会制作网页，掌握制作网页的步骤和方法。促进对网站构建的学习和使用，这些学习对于初中学生来说是非常有必要的，不仅可以增加学生知识，同时也能增强学生对信息的感受力、注意力，以及对信息价值的判断力和洞察力，提高学生信息素养。教材编排合理，贴近学生生活实际，符合七年级学生认知特点。
学习目标 1.信息意识：提高对信息的敏感度和对信息价值的判断力；2.计算思维：能够对问题进行分解、用计算的方法形成解决方案；3.数字化学习与创新：有效利用学习资源，开展探究性学习，创造性解决问题；4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。
重点 掌握网页制作的步骤和方法
难点 加入自己的创新，优化网页的制作
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 导入：师：上节课，我们学习了网站的创建，这节课我们一起来学习一下网页的制作，首先一起来认识一下front Page软件的各个分区和功能。 学生先回顾上节课的学习内容 由此引出今天的学习内容
讲授新课 简单来说，网页设计就是对页面中的各种构成要素进行合理布局，使其既能有条理地呈现图文及展示图文关系,又能在形式上有美感，让观者能够赏心悦目地阅读，提升网站的吸引力。学习任务依据规划的页面内容特点，为网站各主要页面进行网页布局设计，要求：在保持网站整体风格一致的基础上，各页面能够依据内容需要进行合理布局，有效提升页面的表达力和感染力。任务分析为网站设计整体风格，确定各主要页面的布局特点，需注意以下几个问题:（1）体现以用户为中心。根据本组确定的网站用户的特点（年龄、知识结构等），分析用户可能的喜好。网站风格和网页布局应充分尊重用户的喜好，不能单纯表现设计者个人的喜好。（2)与网站主题相协调。网站的风格要切合网站的具体主题，并与各主要栏目相协调。例如，以介绍河北红色之旅为主题的页面与介绍现代景点为主题的页面，以介绍自然风光为主题的页面与介绍人文景观为主题的页面，在风格上应有所区别。（3）站内风格基本一致。确定了网站的整体风格和布局特点后，网站内的各个栏目的风格可以略有变化，但在色彩、整体风格和页面布局等方面要保持基本一致，避免一个网站中出现多种风格。（4）页面协调，便于阅读。页面不同部分之间均衡协调，既不“过满”(一页中信息太多），也不“过空”(一页中信息太少)；既不“过挤”(不同部分相互重叠），也不“过散”(不同部分相隔过远）。突出重点信息，便于阅读。（5）为了确保图文混排的网页不因屏幕分辨率的改变而破坏页面布局效果，在网页制作时可以利用表格来控制图、文位置，实现网页的准确布局。操作指南1.设计页面布局（1）页面布局特点研究。观察下表中的网页页面布局，了解网站主页、栏目首页和底层页面布局的共同点和区别，总结页面布局特点（整体风格、主要颜色和搭配、主要内容布局方式、页面的主要目的等）填写在表格内。拓展延伸布局的作用：网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。网页布局是网页制作的基础，通常使用的方式有三种：流式布局，即元素按照标准文档流进行排列；浮动布局和绝对定位布局。而在各大网站中，常见的布局结构分为：一列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。（2）网页中的基本要素。从上面的分析中可以看出：①网页中包含的基本信息。每个网页上一般都应该包含网站的名称和站标（网页左上部)、导航栏（网页上部）和版权信息(网页下部居中)等基本信息，而且位置都相对固定。②网页主要信息的布局方法。除了网站基本信息和导航栏外，网页中的主要内容大多采用“纵横分割式”的方式布局。如上表中的网页页面主要内容采用的就是两列分割式的布局方式。（3）规划主要页面的布局方式。参照上表中的网站主页布局示意图，画出自己小组的网站主页布局示意图。本组网站主页布局示意图：2.绘制表格实现页面布局网页中通常使用表格来定位文字或图片，从而实现页面的布局设计。在绘制表格的过程中，可以放心大胆地操作，因为表格和单元格可以根据需要随时调整。(以示例网站的主页布局为例)（1）打开网站。①在FrontPage中执行“文件”→“打开网站”命令，打开已建立好的网站。②双击“文件夹列表”面板中名为“index.htm的主页文件，打开主页。(2）通过表格进行页面布局。①执行“表格”→“插入”→“表格”命令，打开“插入表格”对话框。②在“插入表格”对话框中，依据布局需要进行设置(示例为6行2列)，如图所示。③设置完成后，单击“确定”按钮插入规则的表格。如图所示。④合并单元格(以“大美河北”主页为侧)。第1步：选择第1行的两个单元格。第2步：执行“表格”，“合并单元格”命令，如图所示。第3步：运用合并单元格的方法，参照示例完成其他处单元格的合并，并调整单元格的大小，完成页面布局，如图所示。⑤为了调整方便，表格中还可以嵌套表格。如图所示，在页导航栏位置处嵌套1行5列的表格。⑥保存文件。执行“文件”→“保存”命令，保存主页文件。(3）其他布局方式的页面布局。参考操作示范，根据本组确定的方案设计栏目主页和其他页面布局。在设计网站其他页面时，可以将设计好的页面布局作为模板使用。任务小结在制作网页之前，规划页面布局非常重要。在FrontPage的网页模板或向导中没有现成的布局，在一个空白网页中插入的图片、文字很难排列整齐，所以表格是很好的辅助定位的工具。在网页中插入表格时，根据需要设置合适的行数、列数，通过合并和拆分单元格调整布局，大小。合理安排文字、图片、表格等网友元，并根据网页元素的大小调整单元格的大小。知识链接1.单元格衬距和单元格间距 单元格衬距是指文本和单元格边框的距离。单元格间距是指表格中各单元格间的距离。它们都以像素为单位。软件默认的单元格衬距、单元格间距分别是1像素和2像素。 要改变它们的值，可以右键单击表格的任意单元格，选择“表格属性”命令，在“表格属性”对话框的“布局”选项区域中，修改“单元格衬距”和“单元格间距”的数值。2.拆分单元格可以通过“拆分单元格”命令，将选定的单元格拆分为若干列或若干行。具体方法:选定要拆分的单元格，单击右键，选择快捷菜单中的“拆分单元格”命令，在“拆分单元格”对话框中，如果选择“拆分成列”选项，则可在“列数”框中设置要拆分的列数；如果选择“拆分成行”选项，则“列数”变为“行数”，可以在“行数”框中设置要拆分的行数。3.合并单元格通过合并两个或两个以上的相邻单元格来得到一个较大的单元格的操作叫做合并单元格。这样的操作只在选中两个或多个相邻单元格，并且已选的单元格形成矩形时才有效。具体方法：选择1组相邻的单元格，右键单击所选的区域，然后选择快捷菜单中的“合并单元格”命令即可；也可以在选择好单元格后，通过执行“表格”，“合并单元格”命令将单元格合并。若要显示“表格”工具栏，可执行“视图”“工具栏”→“表格”命令。拓展延伸当发现表格缺少时，也可以在需要补充表格的地方“右击”打开选择快捷菜单，如何选择插入，菜单会显示表格插入的方向，然后选择自己要补充的表格即可。同样的，当发现表格多出来时，可以“右击”表格，在弹出的快捷菜单上点击“删除”，即可删除多余的表格。最后我们一起观看视频学习一下，怎么使用Front Page制作网页的创建以及表格的制作。练习与思考（1）在FrontPage中利用表格进行页面布局，与在Word中利用表格进行页面布局有什么异同 （2）新建一个名为“练习”的网站，如图所示进行页面布局。Front Page与Word的表格制作，在删除，插入以及拆分单元格都是相似的，但是在合并单元格中却有所不同。Word只需要选中要合并的单元格然后右击选中选项即可。（3）要想在浏览的状态中看不到表格线，该如何处理 （4）从浏览者角度出发，在用表格设计页面布局时要考虑哪些方面 可以尝试下载门户网站首页，用FrontPage打开，查看页面布局形式。要着重考虑统一性，统一是指网站的整体色彩风格最好保持一致，具有统一的性质。视觉对象的各个组成部分，如颜色、形状、尺寸等，保持统一，因此这些部分之间的关系似乎比其他部分更紧密，从而向访问者展示一个独特的视觉整体，加深对访问者的印象。阅读材料“布局表格和单元格”是FrontPage 2003的新增功能，可以灵活地进行页面布局。使用“布局表格和单元格”功能布局页面时，需要通过两步来完成。首先通过“布局表格”功能来为页面布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含网页内容(包括文本、图像、Web部件和其他元素)的区域，也就是单元格。执行“表格”→“布局表格和单元格”命令，打开该面板。选择“绘制布局表格”按钮，拖动鼠标绘制表格；选择“绘制布局单元格”按钮 ，在表格范围内，拖动鼠标绘制单元格。如图所示。这样能比较灵活地调整表格和单元格的大小和位置，为编辑网页元素提供方便。作业布置请同学们设计一个网页布草图，并以“山茶之美”为主题制作一个网页，下节课在课上与同学们一起分享你的制作方法。 学生初步了解本节课的学习内容学生注意制作网页的一些注意事项学生了解网页布局的重要性学生了解网页中的基本要素学生动手实践，掌握制作网页的具体方法和步骤学生掌握“任务小结”的学习内容，都是本节课的重点学习内容学生掌握“知识链接”的学习内容，对比学习制作网页的一些操作学生通过学习后，完成课堂练习最后学生完成阅读材料的学习学生完成课后作业 由此引出接下来的教学环节为了后续更好的制作网页拓展延伸学生知识，增加学生知识技能增加学生知识技能提高学生动手实践能力的同时增加学生知识增加学生知识技能，再一次巩固本节课的重点学习内容增加学生知识技能巩固本节课的学习内容拓展延伸学生更深入的知识点巩固本节课的学习知识
课堂练习 请同学们尝试在网页里加入背景音乐，让网页整体更有意境。加深浏览者的感受和印象。 学生完成课堂练习 巩固所学知识
课堂小结 学习使用Front Page制作网页表格；学习规划页面布局，将文字、图案以及标题等编排好；能够区分学习Front Page与Word制作表格的异同。 学生总结概括本节课的学习内容 总结概括本节课的学习内容
板书 网页表格制作制作表格的各种操作网页知识学习
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共42张PPT)
《设计制作网页》
河北大学版 初中版第二册
内容总览
学习目标
01
学习任务
02
任务分析
03
操作指南
04
任务小结
05
知识链接
06
目录
07
08
课堂练习
课堂总结
09
10
板书设计
课后作业
教学目标
1.信息意识：提高对信息的敏感度和对信息价值的判断力；
2.计算思维：能够对问题进行分解、用计算的方法形成解决方案；
3.数字化学习与创新：有效利用学习资源，开展探究性学习，创造性解决问题；
4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。
新知导入
上节课，我们学习了网站的创建，这节课我们一起来学习一下网页的制作，首先一起来认识一下front Page软件的各个分区和功能。
新知讲解
简单来说，网页设计就是对页面中的各种构成要素进行合理布局，使其既能有条理地呈现图文及展示图文关系,又能在形式上有美感，让观者能够赏心悦目地阅读，提升网站的吸引力。
新知讲解
学习任务
依据规划的页面内容特点，为网站各主要页面进行网页布局设计，要求：在保持网站整体风格一致的基础上，各页面能够依据内容需要进行合理布局，有效提升页面的表达力和感染力。
新知讲解
任务分析
为网站设计整体风格，确定各主要页面的布局特点，需注意以下几个问题:
（1）体现以用户为中心。
根据本组确定的网站用户的特点（年龄、知识结构等），分析用户可能的喜好。网站风格和网页布局应充分尊重用户的喜好，不能单纯表现设计者个人的喜好。
（2)与网站主题相协调。
网站的风格要切合网站的具体主题，并与各主要栏目相协调。例如，以介绍河北红色之旅为主题的页面与介绍现代景点为主题的页面，以介绍自然风光为主题的页面与介绍人文景观为主题的页面，在风格上应有所区别。
新知讲解
（3）站内风格基本一致。
确定了网站的整体风格和布局特点后，网站内的各个栏目的风格可以略有变化，但在色彩、整体风格和页面布局等方面要保持基本一致，避免一个网站中出现多种风格。
新知讲解
（4）页面协调，便于阅读。
页面不同部分之间均衡协调，既不“过满”(一页中信息太多），也不“过空”(一页中信息太少)；既不“过挤”(不同部分相互重叠），也不“过散”(不同部分相隔过远）。突出重点信息，便于阅读。
（5）为了确保图文混排的网页不因屏幕分辨率的改变而破坏页面布局效果，在网页制作时可以利用表格来控制图、文位置，实现网页的准确布局。
新知讲解
操作指南
1.设计页面布局
（1）页面布局特点研究。
观察下表中的网页页面布局，了解网站主页、栏目首页和底层页面布局的共同点和区别，总结页面布局特点（整体风格、主要颜色和搭配、主要内容布局方式、页面的主要目的等）填写在表格内。
新知讲解
拓展延伸
布局的作用：
网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。
新知讲解
网页布局是网页制作的基础，通常使用的方式有三种：流式布局，即元素按照标准文档流进行排列；浮动布局和绝对定位布局。而在各大网站中，常见的布局结构分为：一列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。
拓展延伸
新知讲解
（2）网页中的基本要素。
从上面的分析中可以看出：
①网页中包含的基本信息。每个网页上一般都应该包含网站的名称和站标（网页左上部)、导航栏（网页上部）和版权信息(网页下部居中)等基本信息，而且位置都相对固定。②网页主要信息的布局方法。除了网站基本信息和导航栏外，网页中的主要内容大多采用“纵横分割式”的方式布局。如上表中的网页页面主要内容采用的就是两列分割式的布局方式。
新知讲解
（3）规划主要页面的布局方式。参照上表中的网站主页布局示意图，画出自己小组的网站主页布局示意图。
事例网站主页
新知讲解
本组网站主页布局示意图：
新知讲解
2.绘制表格实现页面布局
网页中通常使用表格来定位文字或图片，从而实现页面的布局设计。在绘制表格的过程中，可以放心大胆地操作，因为表格和单元格可以根据需要随时调整。(以示例网站的主页布局为例)
（1）打开网站。
①在FrontPage中执行“文件”→“打开网站”命令，打开已建立好的网站。
②双击“文件夹列表”面板中名为“index.htm的主页文件，打开主页。
新知讲解
(2）通过表格进行页面布局。
①执行“表格”→“插入”→“表格”命令，打开“插入表格”对话框。
②在“插入表格”对话框中，依据布局需要进行设置(示例为6行2列)，如图所示。
新知讲解
③设置完成后，单击“确定”按钮插入规则的表格。如图所示。
新知讲解
④合并单元格(以“大美河北”主页为侧)。
第1步：选择第1行的两个单元格。
第2步：执行“表格”，“合并单元格”命令，如图所示。
合并之后的效果
新知讲解
第3步：运用合并单元格的方法，参照示例完成其他处单元格的合并，并调整单元格的大小，完成页面布局，如图所示。
可以通过拖动边线来调整单元格的大小
新知讲解
⑤为了调整方便，表格中还可以嵌套表格。如图所示，在页导航栏位置处嵌套1行5列的表格。
在单元格中插入表格
新知讲解
⑥保存文件。执行“文件”→“保存”命令，保存主页文件。
(3）其他布局方式的页面布局。
参考操作示范，根据本组确定的方案设计栏目主页和其他页面布局。在设计网站其他页面时，可以将设计好的页面布局作为模板使用。
新知讲解
任务小结
在制作网页之前，规划页面布局非常重要。在FrontPage的网页模板或向导中没有现成的布局，在一个空白网页中插入的图片、文字很难排列整齐，所以表格是很好的辅助定位的工具。在网页中插入表格时，根据需要设置合适的行数、列数，通过合并和拆分单元格调整布局，大小。合理安排文字、图片、表格等网友元，并根据网页元素的大小调整单元格的大小。
新知讲解
知识链接
1.单元格衬距和单元格间距
单元格衬距是指文本和单元格边框的距离。单元格间距是指表格中各单元格间的距离。它们都以像素为单位。软件默认的单元格衬距、单元格间距分别是1像素和2像素。
新知讲解
要改变它们的值，可以右键单击表格的任意单元格，选择“表格属性”命令，在“表格属性”对话框的“布局”选项区域中，修改“单元格衬距”和“单元格间距”的数值。
新知讲解
2.拆分单元格
可以通过“拆分单元格”命令，将选定的单元格拆分为若干列或若干行。
具体方法:选定要拆分的单元格，单击右键，选择快捷菜单中的“拆分单元格”命令，在“拆分单元格”对话框中，如果选择“拆分成列”选项，则可在“列数”框中设置要拆分的列数；如果选择“拆分成行”选项，则“列数”变为“行数”，可以在“行数”框中设置要拆分的行数。
新知讲解
3.合并单元格
通过合并两个或两个以上的相邻单元格来得到一个较大的单元格的操作叫做合并单元格。这样的操作只在选中两个或多个相邻单元格，并且已选的单元格形成矩形时才有效。
具体方法：选择1组相邻的单元格，右键单击所选的区域，然后选择快捷菜单中的“合并单元格”命令即可；也可以在选择好单元格后，通过执行“表格”，“合并单元格”命令将单元格合并。若要显示“表格”工具栏，可执行“视图”“工具栏”→“表格”命令。
新知讲解
拓展延伸
当发现表格缺少时，也可以在需要补充表格的地方“右击”打开选择快捷菜单，如何选择插入，菜单会显示表格插入的方向，然后选择自己要补充的表格即可。同样的，当发现表格多出来时，可以“右击”表格，在弹出的快捷菜单上点击“删除”，即可删除多余的表格。
新知讲解
最后我们一起观看视频学习一下，怎么使用Front Page制作网页的创建以及表格的制作。
新知讲解
练习与思考
（1）在FrontPage中利用表格进行页面布局，与在Word中利用表格进行页面布局有什么异同
（2）新建一个名为“练习”的网站，如图所示进行页面布局。
新知讲解
Front Page与Word的表格制作，在删除，插入以及拆分单元格都是相似的，但是在合并单元格中却有所不同。Word只需要选中要合并的单元格然后右击选中选项即可。
新知讲解
（3）要想在浏览的状态中看不到表格线，该如何处理
表格边框的粗细设置为0。
新知讲解
（4）从浏览者角度出发，在用表格设计页面布局时要考虑哪些方面 可以尝试下载门户网站首页，用FrontPage打开，查看页面布局形式。
新知讲解
要着重考虑统一性，统一是指网站的整体色彩风格最好保持一致，具有统一的性质。视觉对象的各个组成部分，如颜色、形状、尺寸等，保持统一，因此这些部分之间的关系似乎比其他部分更紧密，从而向访问者展示一个独特的视觉整体，加深对访问者的印象。
新知讲解
阅读材料
“布局表格和单元格”是FrontPage 2003的新增功能，可以灵活地进行页面布局。使用“布局表格和单元格”功能布局页面时，需要通过两步来完成。首先通过“布局表格”功能来为页面布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含网页内容(包括文本、图像、Web部件和其他元素)的区域，也就是单元格。
新知讲解
执行“表格”→“布局表格和单元格”命令，打开该面板。
选择“绘制布局表格”按钮 ，拖动鼠标绘制表格；选择“绘制布局单元格”按钮 ，在表格范围内，拖动鼠标绘制单元格。如图所示。这样能比较灵活地调整表格和单元格的大小和位置，为编辑网页元素提供方便。
课堂练习
请同学们尝试在网页里加入背景音乐，让网页整体更有意境。加深浏览者的感受和印象。
课堂总结
1.学习使用Front Page制作网页表格；
2.学习规划页面布局，将文字、图案以及标题等编排好；
3.能够区分学习Front Page与Word制作表格的异同。
板书设计
网页表格制作
制作表格的各种操作
网页知识学习
作业布置
请同学们设计一个网页布草图，并以“山茶之美”为主题制作一个网页，下节课在课上与同学们一起分享你的制作方法。
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
兼职招聘：
https://www.21cnjy.com/recruitment/home/admin

展开更多......

收起↑