4.3 在线网站制作 教案重大版 信息科技七年级上册.docx

课题

4.3在线网站制作

拟用1课时

年月日

教

学

目

标

1.了解中国网站的发展与影响；

2.明确网站设计的基本步骤，按需求合理规划网站功能；

3.根据需求收集、整理、加工网页素材；

4.根据实际需求选择恰当的网页设计工具设计网页；

5.了解域名的功能，发布网页。

德育教育

激发学生主动学习的兴趣，树立正确的信息意识。

重点

根据实际需求选择恰当的网页设计工具设计网页。

难点

了解域名的功能，发布网页。

教具

多媒体课件。

教法

教师讲解、小组讨论、独立思考

课型：新课

作业

板书设计

标注

教师活动

学生活动

一、引入

制作和发布校园网站

通过前两个活动，同学们完成了网站建设的前期规划及素材的收集和整理，接下来需要将收集整理的素材整合到不同的页面中。本活动将带领大家进行网站页面的布局，导航栏、文字、图片的编辑，交互界面的设计，申请域名和发布网页等完成网站页面设计与发布。根据实际应用场景，同学们可以选择使用电脑网站、手机网站、微传单等多种方式来呈现校园网站页面，因为这些方式目前都使用HTML5标准，因此也可以称为以HTML5方式呈现校园网站。

二、知识链接

1.HTML5标准

HTML5是HyperTextMarkupLanguage5的缩写，是W3C组织推出的HTML最新标准。在HTML5标准推出之前，开发者开发一个网页或应用，需要针对PC端以及手机端，甚至不同的浏览器编写不同的代码，才能实现在不同客户端使用相同的功能。HTML5标准的推出，统一了不同用户端的标准，让开发者不需要针对不同客户端编写不同的代码，只需要按照HTML5标准编写即可，打通了PC端和手机端应用的壁垒，如图4.13所示。本活动中涉及的“凡科微传单”和“凡科建站”就是基于HTML5的应用。

2.域名

①域名组成：域名由若干个英文字母和数字组成，用“.”分隔为几个部分，如。

②域名分类：域名按级别分为顶级域名、二级域名和三级域名。常见的顶级域名如下：

.com代表商业机构.gov代表政府机构.edu代表教育机构

.cn代表中国.net代表网络服务机构.org代表非营利机构

二级域名是在顶级域名前加入一个子域名，如中的“.icoc”代表二级域名。

三级域名可以看成二级域名的子域名，如中间的“.s1”是三级域名。

三、方法与工具

1.注册在线网站设计工具

随着互联网应用在生活中的普及，为了满足更多用户建设网站的需求，各大互联网公司都推出了智能化的在线网站设计工具，让零基础的用户也能搭建属于自己的网站，如AIpage、云建站、凡科建站等。本节使用“凡科建站”和“凡科微传单”来设计发布网页。这些工具都要注册并登录后才能使用，具体方法如下：

①在百度中搜索“凡科网”，进入官网首页。

②首次使用“凡科建站”可以利用QQ完成登录，如图4.14所示。使用微信扫码或手机验证完成注册，设置密码后使用用户名和密码进行登录，如图4.15所示。

2.选择模板

“凡科建站”和“凡科微传单”提供大量模板供用户选择，请同学们按网站规划的需求选择风格最接近的网站模板（“凡科建站”提供学校模板，“凡科微传单”提供教育类模板）。使用网站模板完成网站页面设计是最简单的方式，使用模板的框架搭配自己的素材，生成校园网站页面。

登录进入“凡科网”首页，可在如图4.17所示页面中红框所示位置进入电脑网站页面设计或手机网站页面设计，并更改网站名称。进入页面设计后，按需求选择适合校园网站的模板。选择模板分类后，出现如图4.18所示的模板预览，请按自身需求选择，单击“使用”按钮完成模板使用。若不想使用已有模板，也可以单击“从空白开始”按钮。

登录“凡科微传单”首页，在“模板”选项卡中利用“使用场景”中的“学校招生”筛选出免费的校园模板，如图4.20所示。

3.修改网站模板首页布局

网站中包含多个页面，而网站的首页承担着整个网站最重要的功能即吸引用户和整体内容展示，是整个网站的门面。因此首页布局设计是整个网站页面设计中十分重要的部分。一般来说，主流网站网页布局都是由顶部、中部、底部3个部分构成，其中顶部和底部的内容和位置都基本固定，可以做出调整的只有中部的版式。校园网站电脑端首页布局如图4.21所示。

（1）利用“凡科建站”属性工具完成布局

使用模板后进入网站首页设计界面，在该界面中包含若干对象（可以是网页中文字、图片、布局对象等任意元素），用鼠标指向对象后，该对象左上方或右上方会出现该对象对应的属性工具，对象属性工具的各项功能如图4.22所示（对象不同，属性工具稍有不同），可以根据校园网站首页布局图，利用属性工具中的按钮来完成布局。

（2）利用“凡科建站”模块工具完成布局

除了使用对象属性工具外，还可以利用模块工具中的“新增模块”在指定位置添加排版对象，使用“栏目模块”隐藏或删除模块来完