建立主题网站——网页的初步设计与制作

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《建立主题网站——网页的初步设计与制作》，欢迎阅读！

网站的初步设计与制作

教学内容分析

本课内容选自必修第六章和选修第四章，这两个章节内容都有关于网页制作，所以将 两章节内容结合在一起讲。建立一个网站的一般过程也就是信息集成的一般过程，所以设计 网站的时候也套用这样的过程，学生从中则可以温故而知新。

教学对象分析

通过前面学习，学生已经熟练掌握信息获取和加工的基本方法，部分学生已经考虑或者 已经开始信息集成的操作。将信息集成以网站的形式来表现，是大多数学生都有所了解并十 分向往的。大多数学生对frontpage的基本操作有所了解（初中已经学过），但对设计网站的 方法、过程等都是从未接触过的。所以本课要站在全局的髙度来把握信息集成的一般过程, 体验网站的设计与制作的一般过程。 一、 教学目标 （-）知识与技能：

1、 了解网站规划设计的一般方法；

2、 掌握一种基于网络进行信息集成的工具（本章以Frontpage 2000为例）的基础操作。

（二） 过程与方法：

1、 熟悉信息集成的一般过程（选题立意、设计规划、开发制作和评估测试）； 2、 能够按照信息集成的一般过程，通过独立或合作的方式完成一个信息集成的作品。

（三） 情感态度与价值观：

1、 利用精心的设计和制作，使学生感受数字化的美： 2、 通过主题鲜明的作品，培养学生正确的人生价值观。 3、 通过活动培养学生人际交往和团队协作等方而的能力。

二、 教学匝点与难点

1、 重点：能够利用表格泄位网页，并能熟练的给网页添加网页元素。

2、 难点：熟练运用复杂表格来设计网页布局：把自己的审美观融合到网页设计中去。

三、 教学方法：任务驱动，小组合作，自主探究 四、 教学过程 （一） 、作品导入

在因特网这个信息的海洋当中，我们经常会被一些内容丰富，创意新颖、设计独特的 网站所吸引，那今天我们首先就一起来欣赏几个网络作品。

看了这些网络作品，你们觉得它做的怎么样呢？ 好在哪里呢？

（欣赏网站，分析网站亮点。可以从内容、栏目、颜色、画而等进行分析。）

（广播）那么我们大家想不想自己也来做个网站呢？这一节课我们就一起来学习建立主 题网站一一网站初步设计与制作。 （二） 、分组讨论

活动一、根据课前分组，对学生完成的作业，讨论网站栏目设计的是否合理？

栏目安排注意以下几个方面：

1、 要紧扣主题，尽可能删除与主题无关的栏目。 2、 尽可能将网站最有吸引力的内容列在栏目中。 3、 尽可能方便访问者的浏览和查询。

（三） 、师生交流

1、版而设计


版而结构是指将不同元素巧妙排列的方式，合理的版面结构能够让浏览者淸楚、容易地 理解作品传达的信息。布局就是以最适合浏览的方式将图片和文字排放在页而的不同位宜。 下面我们一起来看一下常见的网页布局有哪几种？ 常见的页而布局样式：

“厂”字型：页面顶部为主菜单、横条网站标志和广告条，下方左而为主菜单，右而显示内 容的布局。

“口”字型：页面一般上下各有一个广告条，左而是主菜单，右面放友情连接等，中间是主 要内容。

自由式：又称POP布局，页而布局像一张宣传海报，以一张精美图片作为页面的设计中心, 菜单栏目自由摆放。

在这些网页布局中，你最喜欢哪种？信息量最大的是哪个样式？ 下面我们结合一个具体的案例介绍一下版面怎么来布局的。

结合演示文稿，分別给学生展示三种页面布局的网页。并通过对网页布局的简化，展示简化 草图。

2、 演示新建站点 解释三个概念：

网站：因特网上具有相似性质、共同内容的一组信息资源。

网页：用HTML语言写成的文件，它是组成网站的最基本的元素之一。 主页：通常是表示访问某个网站时岀现的第一个页而。

3、 演示表格布局主页

（四） 、自主探究

任务一、新建一个站点，站点保存于D盘，名字是网站的主题。并通过表格布局主题网站 的

首页。

活动二：每组选择一个操作，自主探究下面的各项操作，并让学生演示。

1、 网页中文字信息的插入 2、 网页中图像信息的插入：

3、 网页背景的设置（背景颜色或背景图片）： 4、 网页中背景音乐的插入：

（五） 、动手实践

任务二、根据你所选的主题，结合前而内容与栏目的设汁，制作网站主页。最后保存网页，

将作品以作业方式提交。（提交整个文件夹）

拓展任务：通过表格属性美化表格，设巻单元格及表格的背景颜色或图片。

（六） 、作品分享

评讲一两个学生作品，请学生评析作品的优缺点，教师做总评。 五、课堂总结

这堂课，我们站在全局的高度来把握信息集成的一般过程，体验了网站的设讣与制作， 这个过程是我们以后处理问题的一个基本方法和思路。今天我们只是完成了网站作品的首 页，在接下来的课程中我们将继续完善我们的作品，完成整个网站的制作。

本文来源：https://www.wddqxz.cn/1ddab0cbaf02de80d4d8d15abe23482fb5da027a.html