网站规划与设计教案

课题：网站规划网站的设计

一、教学目标

1、知识与技能

（1）了解网站规划的几个阶段和几个要点基本过程

（2）掌握网站规划和设计的过程和方法。

2、过程与方法

（1）通过浏览与欣赏几个教师提供的主题网站的内容、结构、风格、质量，并进行对比，了解网站设计的内容、特点以及根据不同内容选择不同设计风格等

（2）以个人或小组集体确立一个网站的主题，并围绕主题讨论即将设计的几个页面，规划每个页面大致需要反映的内容，从而了解规划的一般过程

3、情感态度与价值观

（1）通过网站主题的选择、讨论、规划，培养学生交流合作意识。

（2）通过学生动手上网收集与整理资料等实践活动，使学生养成分类管理的思想。

二、教学重、难点

网站规划和设计

三、教学方法

对比教学法，探究学习法，讨论交流

四、教学设计

教学过

教师活动学生活动设计意图程

新课引

入教师引导 : 现如今，网站已经广泛应用到社会的各师生交流：网站提漫谈网站的作行各业，渗透到各个领域。供相关内容丰富的用

1. 那我们可以借助网站来做什么呢？信息，很漂亮，有的

还可以与访问者交

2. 先让我们一起来欣赏几个优秀网站互等

此部分内容仅一、教师安排学生阅读课本或教师讲解以下知识要求了解，故无点：需深入讲解

1、网站规划的基本过程认真阅读书本

网站设计是一项工程，我们需要一个具体规划，一（或认真听教师讲

般规划需要如下几个过程：解）

2、什么是网站的规划

(1)规划涉及的内容(2) 网站的要素二、

引导学生规划自己的网站

同样结合实例，展示教师的规划，并要求学生模仿，规划自己的网站，给出主题与相关页面内容等主题网站规划模仿教师网站内容，

规划自己即将要设结合实例的分计的网站（包括主析，给学生以更题、页面内容等）需直观的认识

填写相关表格，以指

导日后网站设计

新授

网页展示网页

网页名称备注

内容结构

Index.ht

m

主题：

三、网站的设计

网站设计的目的在于把需要表达的信息以恰

当的方式组织并呈现在网上，设法吸引人们的关

注，并为浏览者提供方便的访问。网站设计一般包

括网站栏目结构设计、网页版面设计、网页的链接

设计（导航设计）等。

请同学们再看看本课开头提供的几个优秀网站，并

思考以下几个问题：

（ 1）这些网站是怎样围绕主题展现内容的？

认真阅读书本

（或认真听教师讲

解）

欣赏并回答

（2）这些网站提供了哪些栏目及功能？（3）网站的链接有哪些特色，是否便捷？

（4）网站主页的布局、色彩运用在哪些特点？

1、网站的结构设计

经验告诉我们，建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使学生通过前面对网站做的规划，设计网站结构，教师巡回指导。

楼房结构合理。

制作网站前要设计好网站的栏目，网站的栏目可

以有多层，但并不是层数越多越好，以能够恰当地

体现网站主题为好。此外，每个栏目应有一个大致

的内容描述，以表达该栏目的设计思路。

2、网页的版面设计

(1)风格设计

风格是指网站的整体形象给浏览者的综合感受。有

的严肃计策，有的清爽温馨，有的深沉厚重，有的

生动活泼，有的古朴典雅，有的豪迈奔放。风格设

计与主题是密不可分的，是为突出主题服务的。

(2)版面布局设计

网页要呈现的内容很多，概括起来可分为标题信

息、栏目信息、内容信息、附加信息等，需要进行

合理的放置，让人看起来井井有条，主次分明。

3、网页的交互设计

网站它不是一个“被动”的媒体，和电视、电台

等媒体不一样的是网页是需要我们用鼠标去点击

的。浏览者点击连接，网页显示出需要的内容然

后在传递给浏览者。这就是网页的交互性。

四、任务布置

请每个同学（或同桌两个合作，合作成员不能超过

两个）设计制作一份网页作品。

学生分组完成任务

1、要求：

教师巡回个别指导（1）主题自定；

（2）总共要有 10 个页面或以上。

（3）网页中的内容要紧密结合作者的学习、生

活实际或社会实践。

教师对学生作品作（ 4）在水平分辨率为1024（或以上）像素的电脑

出评价

屏幕上浏览时，页面保持整齐，不允许出现横向的

滚动条。

总结本课

五、评价学生作业并总结本节课内容