4.1 规划设计网站 教案 2024—2025学年重大版（2023）初中信息科技七年级上册

重庆市商务学校备课教案 七年级信息技术刘亭亚 课题 4.1 规划设计网站 拟用1课时 年 月 日 教 学 目 标 1. 了解中国网站的发展与影响； 2. 明确网站设计的基本步骤，按需求合理规划网站功能； 3. 根据需求收集、整理、加工网页素材； 4. 根据实际需求选择恰当的网页设计工具设计网页； 5. 了解域名的功能，发布网页。 德育教育 激发学生主动学习的兴趣，树立正确的信息意识。 重点 了解中国网站的发展与影响。 难点 明确网站设计的基本步骤，按需求合理规划网站功能。 教具 多媒体课件。 教法 教师讲解、小组讨论、独立思考 课型：新课 作业 板书设计 标注 教师活动 学生活动 一、引入 信息中国之网站篇 1994 年 4 月 20 日，互联网正式进入中国，中国科学院高能物理研究所设立了国内第一个 Web 服务器，诞生了中国的第一个网站，如图 4.1 所示 。进入21 世纪后，我国互联网产业高速发展，截止 2021 年 12 月，我国提供互联网各种服务的网站数量达到 418 万个，其中使用中国顶级域名的网站数量有 272 万个，提供各种网页共计 3 350 亿个。 2022 年，我国的淘宝、天猫、京东 3 个电商网站在全球网站排名中位于第6、7、15 位。2021 年，我国网上零售额突破 12 万亿元，互联网产业已成为推动我国经济社会发展的重要力量。除了电子商务领域外，我国的网页搜索引擎百度，已经成为全球最大的中文搜索引擎，同时也是世界排名前三的搜索引擎。 近年来，随着全国一体化政务服务网站逐步建成，我国的“电子政务发展指数”全球排名提升了 20 位。通过政务网站或政务 App 可以完成医保办理、网上办税、身份证申领等在线业务，实现了“指尖上政务”，为人们的生产生活带来了极大的便利。 二、知识链接 1.动态网页与静态网页 动态网页与静态网页并不是以字面含义理解为网页上有动态元素（动画、视频等）就是动态网页，没有动态元素就是静态网页。所谓静态网页是指网页生成之后，除了再次对该网页进行重新设计，否则用户每次访问服务器获得该网页显示的结果都是一样的，不会发生任何改变。静态网页后缀名为 HTML、HTM 或者 XML 等。而动态网页是在设计好的框架之下，根据不同的需求将数据库中不同内容显示在网页之中，也就是用户每一次访问网站所显示的网页都有可能不同。动态网页后缀名一般为 ASP、PHP、JSP 等。静态网页、动态网页的工作示意图如图 4.7 和图 4.8 所示。 随着互联网技术的发展，传统的动态网页技术因为访问速度慢和搜索引擎对静态网页收录率更高的原因，已逐渐淘汰。目前网站主要采用动态网页静态化技术，即将图 4.8 中由数据库返回的结果通过服务器端将其转换为静态网页形式再返回给用户，大大提高了用户访问网页的速度。 2.网站前台 网站前台是用户访问网站所看到的网页内容。用户通过网站前台可以浏览公开发布的信息，完成所需资源下载、用户注册、提交留言等操作。通俗来说，用户上网浏览的信息都来自网站的前台，如图 4.9 所示。 3. 网站后台 网站后台，也称网站管理后台，是指用于管理网站前台显示的一系列操作，如新闻、信息、动画、图片的增加、更新和删除等操作。通过网站管理后台，可以有效地管理网站供访问者查阅的信息。网站后台管理的实质就是通过后台管理页面来访问和修改网站对应的数据库信息，让网站的管理、维护更加便捷。网站后台访问根据访问者身份不同，对应的权限也不一样，但都需要对应的账号和密码验证登录后实施管理，如图 4.10 所示。 三、方法与工具 1. 网站命名 与现实生活中一样，网站的名称对网站的形象和宣传推广有很大的影响。但网站的名称也不能一味追求特立独行，在确定网站名称时应该注意以下几点： ①名称必须合法，不能带有反动、迷信、色情词语。 ②名称应该通俗易懂，容易记忆。根据中文网站浏览者的特点，汉字命名一般不超过 4 个字，一般也不采用中英文混合的名称。 ③名称要有特色。如果能体现一定的内涵，给浏览者更多的空间想象则更好。 ④名称可以包含热门关键字，有助于提高网站搜索的排名。 2. 网站色彩搭配 色彩是一把打开人们心灵的钥匙，恰当的色彩不仅可以向访问者传达信息，还能吸引访问者的目光。把色彩理论引用到网站设计中，会发现网站的色彩也会影响访问者的情绪，进而影响访问者对网站的喜好程度。如何运用最简单的色彩来表达最丰富的含义，需要注意以下原则： ①不同类型的网站，主色调应有区别。例如儿童类网站，主色调可以活泼一点；时尚类网站，主色调可以夸张一点。 ②运用相同色系。这种用色方式容易塑造网页和谐统一的风格，对于搭建网站的新手有很好的借鉴作用。 ③运用对比色或互补色。这种用色方式容易塑造活泼、韵动的网页效果，特别适合体现主题轻松、积极的网站。但要注意主色彩种类应控制在 3~5 种。 ④合理使用过渡色。过渡色能够神奇地将几种不协调的色彩统一起来。过渡色包括几种形式：两种色彩的中间色调，单色中混入黑、白、灰进行调和，以及单色中混入相同色彩进行调和等。 3. 网站风格创意 风格是抽象的，是指整个网站的整体形象给浏览者的综合感受。这个“整体形象”包括网站的 CI（标志、色彩、字体、标语等）、版面布局、浏览方式、交互性、文字、内容价值、存在意义、网站影响力等诸多因素，如图 4.11 所示。但风格并没有固定的模式，任何一个主题，每一个人的理解都不一样。虽然没有固定模式，但也有一些方法有助于形成独特的网站风格。具体内容如下： ①使网站 Logo 尽可能出现在每个页面上，加深访问者的印象。 ②突出色彩标准。文字的链接色彩，图片的主色彩、背景色、边框色等尽量使用与网站主色彩一致的色彩。 ③突出标准字体。在关键的标题、菜单、图片里使用统一的标准字体。 ④使用统一的图片处理效果。例如阴影效果的方向、厚度、模糊度等都应尽量一致。 ⑤尽可能使用自己设计的花边、线条、点状装饰。 ⑥在内容上突出价值，尽量使用自己的原创作品。 4. 网站组织结构 网站包含丰富的文字、图片、多媒体内容，为了能更好地组织这些内容，需要以一定的结构来组织网站中各个网页的内容。 （1）线性结构 网页按某种顺序进行线性的链接，访问者按既定的顺序对网页内容进行访问。线性结构是组织网页的基本结构，其他较复杂的网站组织结构都可以看成由若干个线性结构构成。 （2）等级结构 等级结构由一条固定的主线构成索引，主线上每一等级节点又由一条线性结构构成，常见的网站首页导航栏就属于这种结构。 （3）网状结构 网状结构中的网页自由链接，网站中的任意页面都包含指向网站大部分页面的链接。网状结构充分利用了网络资源和超级链接，让访问者在网站中任意跳转。互联网也同样属于这种结构。 （4）二维表结构 二维表结构就是由行和列组成的结构，允许用户横向和纵向浏览信息。这种结构一般用于大型企业、商业网站。 四.扩展阅读 1.网站发展历程 五.思考与练习 基础部分 1. 网站建设可以分为哪三个步骤来完成？ 2. 同学们都有浏览网站、网页的经历，你能谈一谈在浏览过程中，最看重的是网站的哪些方面？在你的上网过程中，哪些网站给你留下的印象最深？为什么？ 3. 根据自己的兴趣与爱好，设计个人网站结构图并向大家分享你的主题构思。 拓展部分 通过网上搜索，阐述动态网页静态化的实现过程及优势。 六、小结 教后记 本节课教学生规划设计网站，学生们创意无限，积极参与。看到学生们从构想到实践的转变，我深感教学的乐趣与价值所在。 5 学科网（北京）股份有限公司 $$