4.3 在线网站制作 教案 2024—2025学年重大版（2023）初中信息科技七年级上册

重庆市商务学校备课教案 七年级信息技术刘亭亚 课题 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.域名 ①域名组成：域名由若干个英文字母和数字组成，用“.”分隔为几个部分，如www.abc.com。 ②域名分类：域名按级别分为顶级域名、二级域名和三级域名。常见的顶级域名如下： .com代表商业机构.gov代表政府机构.edu代表教育机构 .cn代表中国.net代表网络服务机构.org代表非营利机构 二级域名是在顶级域名前加入一个子域名，如sw27461572-1.icoc.com中的“.icoc”代表二级域名。 三级域名可以看成二级域名的子域名，如a.sw27461572-1.icoc.com中间的“.sw27461572-1”是三级域名。 三、方法与工具 1.注册在线网站设计工具 随着互联网应用在生活中的普及，为了满足更多用户建设网站的需求，各大互联网公司都推出了智能化的在线网站设计工具，让零基础的用户也能搭建属于自己的网站，如AIpage、云建站、凡科建站等。本节使用“凡科建站”和“凡科微传单”来设计发布网页。这些工具都要注册并登录后才能使用，具体方法如下： ①在百度中搜索“凡科网”，进入官网首页。 ②首次使用“凡科建站”可以利用QQ完成登录，如图4.14所示。使用微信扫码或手机验证完成注册，设置密码后使用用户名和密码进行登录，如图4.15所示。 2.选择模板 “凡科建站”和“凡科微传单”提供大量模板供用户选择，请同学们按网站规划的需求选择风格最接近的网站模板（“凡科建站”提供学校模板，“凡科微传单”提供教育类模板）。使用网站模板完成网站页面设计是最简单的方式，使用模板的框架搭配自己的素材，生成校园网站页面。 登录进入“凡科网”首页，可在如图4.17所示页面中红框所示位置进入电脑网站页面设计或手机网站页面设计，并更改网站名称。进入页面设计后，按需求选择适合校园网站的模板。选择模板分类后，出现如图4.18所示的模板预览，请按自身需求选择，单击“使用”按钮完成模板使用。若不想使用已有模板，也可以单击“从空白开始”按钮。 登录“凡科微传单”首页，在“模板”选项卡中利用“使用场景”中的“学校招生”筛选出免费的校园模板，如图4.20所示。 3.修改网站模板首页布局 网站中包含多个页面，而网站的首页承担着整个网站最重要的功能即吸引用户和整体内容展示，是整个网站的门面。因此首页布局设计是整个网站页面设计中十分重要的部分。一般来说，主流网站网页布局都是由顶部、中部、底部3个部分构成，其中顶部和底部的内容和位置都基本固定，可以做出调整的只有中部的版式。校园网站电脑端首页布局如图4.21所示。 （1）利用“凡科建站”属性工具完成布局 使用模板后进入网站首页设计界面，在该界面中包含若干对象（可以是网页中文字、图片、布局对象等任意元素），用鼠标指向对象后，该对象左上方或右上方会出现该对象对应的属性工具，对象属性工具的各项功能如图4.22所示（对象不同，属性工具稍有不同），可以根据校园网站首页布局图，利用属性工具中的按钮来完成布局。 （2）利用“凡科建站”模块工具完成布局 除了使用对象属性工具外，还可以利用模块工具中的“新增模块”在指定位置添加排版对象，使用“栏目模块”隐藏或删除模块来完成首页布局，如图4.23所示。 （3）利用“凡科建站”样式工具完成布局 前两种布局方式是通过调整模板页面对象位置来完成布局，而样式工具可以通过在“版式”选项卡中选择显示的区域进行布局，同时还可以使用“主题”选项卡为页面配色，如图4.24所示。利用样式工具完成校园网站首页布局后的效果如图4.25所示。 （4）“凡科微传单”布局工具 “凡科微传单”布局简单，所有网页元素都直接显示在页面之上，如图4.26所示。“凡科微传单”的操作和演示文稿操作类似，通过选中对象→操作对象（删除、移动等）的方式可以轻松完成调整页面布局、设置页面元素动画等操作。 4.修改网站模板中网页的文本和图像 完成校园网站首页布局设计后，对模板首页中的文本与图片进行修改，替换为自己收集、处理的素材。“凡科建站”和“凡科微传单”的图文编辑与动画设置与演示文稿的操作类似，这里只做简要说明。 （1）“凡科建站”中编辑网站标题、Logo 准备好自己设计的校园网站Logo,在页面设计界面中将鼠标指向模板中的Logo标志，出现编辑工具，选择“编辑Logo”打开上传对话框，上传设计好的Logo并使用，如图4.27所示。使用相同方式修改网站标题为自定义网站名称，调整好大小与位置后的效果如图4.28所示。 （2）“凡科建站”中设置动态横幅 网站首页横幅一般位于页面顶部下方第一个显示区域，是网络媒体最常用的推广宣传方法。选用一个极具视觉效果的动态横幅，能更好地展示、推广自己的学校。横幅可以由多张图片或视频构成，一般采用的图片大小为1920像素×400像素。鼠标指向横幅会出现“编辑横幅”工具，进入“编辑横幅”对话框可进行相应设置。 （3）“凡科建站”中设计导航栏 导航栏是校园网站组织结构图的体现，是网站首页的重要组成部分。按设计的校园网站组织结构图，导航栏应由5个栏目组成。可通过“管理栏目”工具完成导航栏设计，如图4.29所示。不足的栏目可以通过“管理栏目”对话框中的复制功能复制对应栏目模块（此复制包括该栏目下所有页面）。设计完成后的导航栏效果如图4.30所示。 （4）“凡科建站”中添加图文内容 “凡科建站”中校园网站首页添加、修改图文后的效果如图4.31所示。 （5）“凡科微传单”中修改文本、图像 选中“凡科微传单”模板编辑界面中需要修改的文字后，双击可以直接修改。若选中的对象为图像，双击则打开素材库，如图4.32所示，单击“+”按钮上传素材后使用该素材替换选中的图像。若要修改选中对象的动画效果，请在对象属性对话框的“动画”标签中设置入场动画、强调动画及退场动画，如图4.33所示。 5.在网页中实现交互功能 动态网页交互功能实际上是指网站建设者、管理者和用户三者之间进行相互联系。让更多原本相互不认识，但是又有同样爱好、需求的陌生网民聚集在一起，提升网站品牌的知名度，增加网站的凝聚力。“凡科建站”和“凡科微传单”都提供功能强大的互动网页模板或控件来完成交互功能。 （1）使用“留言板”“用户注册”模板完成网页交互设计 网站“留言板”是网站访问者对网站建设者或管理者的信息反馈，留言的信息会记录在“留言板”中，供用户和管理者查看。在网站模板中内置了“留言板”页面和“用户注册”页面，用户可以通过导航栏“管理栏目”工具来显示这两个页面并设置这两个页面为“在线交流”栏目的下一级页面，如图4.34所示。 （2）使用互动控件完成网页交互设计 “凡科建站”和“凡科微传单”都提供功能强大的互动控件来完成留言板、投票、统计等功能，只需要对控件的选项、样式等进行调整即可轻松完成网页的交互设计。“凡科建站”互动控件如图4.35所示，“凡科微传单”互动控件如图4.36所示。 6.网站发布 在测试电脑网页时，页面上会出现如图4.37所示的提示。在注册“凡科网”后，系统为注册用户已分配一个免费域名和免费空间，在网络中使用这个域名就可以访问校园网站首页。如果希望使用自定义域名来访问校园网站，需要重新申请域名与绑定网站。而手机网站除了使用域名访问外，还可以通过二维码发布访问。“凡科微传单”制作的页面可以通过“分享作品”分享到各种社交平台。 （1）申请域名与空间 申请域名与空间一般同时进行。在两者的共同作用下，保存在空间中的网站页面通过域名进行访问。一般来说，空间的价格高于域名价格，因此大部分网络公司提供购买空间赠送域名的服务。“凡科网”进行注册后附送了免费空间，因此我们只需要购买域名即可。 ①进入“凡科网”首页，查询输入的自定义域名是否可用，如图4.38所示。 ②选择左侧管理区域中的“域名管理”，打开“绑定域名”页面，选择购买凡科域名。 （2）绑定域名 域名购买成功后，需要将完成设计的网站绑定到购买的域名，才能通过域名访问网站。“凡科网”提供两种形式绑定域名。凡科域名绑定：购买凡科域名时，在支付订单中选择需要绑定的网站，购买成功后，系统自动进行绑定。因已进行实名认证，域名可以立即使用。外部域名绑定：从其他服务商处购买的域名也可以绑定到“凡科建站”设计的网站，但必须已购买“凡科网”入门级以上版本才能使用。具体内容可参看“凡科网”绑定教程。 （3）手机网站发布 在“凡科建站”手机网站设计界面选择“预览”，打开图4.39所示的发布界面。在界面中可以使用“二维码”或“海报”形式分享，还可以编辑访问手机网站时使用的网站标题。 （4）微传单发布 在“凡科微传单”中单击“预览和设置”按钮，打开图4.40所示的发布和预览界面。单击“基础设置”中的“编辑分享样式”按钮完成修改微传单标题、封面图等操作，如图4.41所示。可在手机预览区域查看传单播放效果后单击“分享作品”按钮，通过手机扫描二维码或社交平台发布作品，如图4.42所示。 四.扩展阅读 1.网站备案 （1）ICP备案 （2）公安备案 五.思考与练习 基础部分 1.利用“凡科建站”或“凡科微传单”的模板建设一个属于自己的网页。 2.域名就是对应于IP地址用于在互联网上标识计算机位置的有意义的　　　　　，在互联网中不能有重复的域名。 3.域名由若干个英文字母和数字组成，用　 分隔为几个部分。 4.中国的顶级域名为　　　　　。 5.域名解析就是将域名重新转换为　　　　　的过程，域名解析需要由专门的域名解析服务器（DNS）来完成。 拓展部分 1.请上网查阅资料，简要描述最新的网页设计技术。 2.通过查阅资料自学简单HTML标记语言，书写代码完成显示文字和图像。 3.请与小组成员讨论，网站为什么要进行备案，备案的好处有哪些？ 六、小结 教后记 本节课学生动手制作在线网站，创意与实践碰撞出火花。我深感信息科技教育应鼓励学生大胆尝试，将想法变为现实，同时注重细节，培养耐心与毅力，让学习成果更加精彩。 5 学科网（北京）股份有限公司 $$