二《设计制作网页》课件 河北大学版（第3版）信息技术初中第二册.pptx

《设计制作网页》

河北大学版初中版第二册

内容总览

01学习目标02学习任务

任务分析

0304操作指南

目录

05任务小结06知识链接

课堂总结

07课堂练习08

09板书设计10课后作业

教学目标

1.信息意识：提高对信息的敏感度和对信息价值的判断力；

2.计算思维：能够对问题进行分解、用计算的方法形成解决方案；

3.数字化学习与创新：有效利用学习资源，开展探究性学习，创造性解决问题；

4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。

新知导入

上节课，我们学习了网站的创建，

这节课我们一起来学习一下网页的

制作，首先一起来认识一下front

Page软件的各个分区和功能。

新知讲解

简单来说，网页设计就是对页面中的各种构

成要素进行合理布局，使其既能有条理地呈

现图文及展示图文关系,又能在形式上有美感，

让观者能够赏心悦目地阅读，提升网站的吸

引力。

新知讲解

学习任务

依据规划的页面内容特点，为网站各主要页面

进行网页布局设计，要求：在保持网站整体风

格一致的基础上，各页面能够依据内容需要进

行合理布局，有效提升页面的表达力和感染力。

新知讲解

任务分析

为网站设计整体风格，确定各主要页面的布局特点，需注意以下几个问题:

（1）体现以用户为中心。

根据本组确定的网站用户的特点（年龄、知识结构等），分析用户可能的喜好。

网站风格和网页布局应充分尊重用户的喜好，不能单纯表现设计者个人的喜好。

（2)与网站主题相协调。

网站的风格要切合网站的具体主题，并与各主要栏目相协调。例如，以介绍河北

红色之旅为主题的页面与介绍现代景点为主题的页面，以介绍自然风光为主题的

页面与介绍人文景观为主题的页面，在风格上应有所区别。

新知讲解

（3）站内风格基本一致。

确定了网站的整体风格和布局特点后，网站内的各个

栏目的风格可以略有变化，但在色彩、整体风格和页

面布局等方面要保持基本一致，避免一个网站中出现

多种风格。

新知讲解

（4）页面协调，便于阅读。

页面不同部分之间均衡协调，既不“过满”(一页中信息太多），也不“过

空”(一页中信息太少)；既不“过挤”(不同部分相互重叠），也不“过散”(不

同部分相隔过远）。突出重点信息，便于阅读。

（5）为了确保图文混排的网页不因屏幕分辨率的改变而破坏页面布局效果，在

网页制作时可以利用表格来控制图、文位置，实现网页的准确布局。

新知讲解

操作指南

1.设计页面布局

（1）页面布局特点研究。

观察下表中的网页页面布局，了解网站主页、

栏目首页和底层页面布局的共同点和区别，

总结页面布局特点（整体风格、主要颜色和

搭配、主要内容布局方式、页面的主要目的

等）填写在表格内。

新知讲解

拓展延伸

布局的作用：

网页版面的设计延续了传统纸媒的特点，但又比传统

的纸媒更灵活，传统的纸媒由于纸张大小的限制，只

能在有限的空间内排列内容，而网页版面的布局，可

以根据内容自适应宽度和高度。

新知讲解

拓展延伸

网页布局是网页制作的基础，通常使用的方式有

三种：流式布局，即元素按照标准文档流进行排

列；浮动布局和绝对定位布局。而在各大网站中，

常见的布局结构分为：一列布局，两列布局，三

列布局和混合布局，其中使用最多的是混合布局，

即按照网站的实际需求使用多列进行布局。

新知讲解

（2）网页中的基本要素。

从上面的分析中可以看出：

①网页中包含的基本信息。每个网页上一般都应该包含网站的名称和站标（网页左上

部)、导航栏（网页上部）和版权信息(网页下部居中)等基本信息，而且位置都相对固

定。②网页主要信息的布局方法。除了网站基本信息和导航栏外，网页中的主要内容

大多采用“纵横分割式”的方式布局。如上表中的网页页面主要内容采用的就是两列

分割式的布局方式。

新知讲解

（3）规划主要页面的布局方式。参照上表中的网站主页布局示意

图，画出自己小组的网站主页布局示意图。

事例网站主页

新知讲解

本组网站主页布局示意图：

新知讲解

2.绘制表格实现页面布局

网页中通常使用表格来定位文字或图片，从而实现页面的布局设计。在绘制表

格的过程中，可以放心大胆