《页面分析与设计》教学设计

1、课题第三节 页面分析与设计课时计划1课时教学目的【知识目标】掌握网页（特别是首页）的构成及其元素【能力目标】通过对别人网页的分析，提高自己设计、制作网页的能力【情感目标】通过网页分析，提高学生审美能力重点难点【重点】1、网页页面的构成；2、 网页的设计。【难点】网页设计教法学法讲授法、讨论法、演示法教具1、多媒体教学软件 2、多媒体演示课件 3、电脑 课前复习板书设计第三节 页面分析与设计一、确定主页的功能模块二、主页的版面设计三、实践练习教学过程自主教案【创设情境】前面我们已经学习了有关网站设计、规划以及网站创建和网站文件管理等内容，已经搭建好了每个小组的网站，结构十分清晰。那么我们下一步应

2、该做什么了？开始建设网页了！那么具体到一个网页，我们应该怎么来建设呢？这就是本节课我们要搞清楚的问题。这节课通过分析和观摩别人建设的网站，学习一下，网页是怎么构成的，在此基础上，再看看我们自己建设的网页应该怎么来安排。【讲授新课】主页是来访者第一眼看到的页面，人们往往通过主页判断整个网站的风格，所以主页的设计至关重要。是否能促使来访者继续点击进入子页面，能否吸引浏览者留在站点上，全凭主页设计的能力。一、确定主页的功能模块我们先来看看别人的网站主页是怎么设计的。网站主页的功能模块是指需要在主页上实现的主要内容和功能。一般的站点都需要这样一些模块：网站名称（logo）、广告条（banner）、导航

3、栏（site map）、新闻（news）、搜索（search）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright）等等。前面我们看到是例子是西安的门户网站古城热线，由于网站比较大，内容也比较多，所以，像搜索（search）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright）等首页元素在截图里都没有显现出来，请大家在练习中在给出的网站截图中找出相关元素。二、主页的版面设计我们分析了古城热线网站首页的内容，分析别人的首页目的是为我们建立自己的首页有一个目标或基本准则，为我们的首页提供参考。下面我

4、们就来说说首页版面的设计，这里要说明一下什么叫版面。版面指的是通过浏览器看到的一个完整页面。版面设计并不是简单地将文字和图片混排就可以了，它就像搭积木，如何搭建一座漂亮的房子，需要有创意。版面设计要注意结构平衡、色彩悦目，并且风格上要与网站主题相一致，下面就一起来分析一下一个网站首页。Logo & banner导航栏内容一内容二内容三图片内容版权信息Logo & banner导航栏内容一内容二内容三图片内容版权信息常在网页布局中见到如下布局：“”型布局、“”型布局、“T”型布局等，如下图所示：网页布局大致可分为：“国”字型 (例如：CCTV网站）拐角型 （例如：TCSZ网站 左右框架型 （例如

5、：雅虎网站）上下框架型 （上下分为两页的框架）综合框架型 （例如：新浪网、搜狐网）封面型 （一般由标题和图片构成）Flash型 （功能强大、信息丰富、视觉及听觉效果强大的相当于多媒体。）变化型 （即上面几种类型的结合与变化）晨晨小组结合网站主题“陕西风情”，确定网站的色调为红色。他们开始构思网站主页的功能模块和版面设计，并在草稿纸上画出了主页的草图：网站标志logo主题名称：陕西风情栏目一：陕西风光一张主题图片栏目二：陕西文化栏目三：陕西民俗友情链接一友情链接二友情链接三版权信息 联系方式【知识拓展】下面我们就先观察一下我们向往的我国著名大学北京大学和清华大学的网站首页。分析一下这两个网站的首

6、页，看看有什么共同点和不同点，其中各自首页的组成元素的版面安排的特点。给我们自己将来准备建立的网站做好准备。【实践练习】尝试在草稿纸上或者FrontPage中画出自己小组的网站的主页设计草图，要求结构清晰，特点明确，大方得体，新颖有创意。学生思考，尝试回答问题欣赏网站作品熟悉网站的功能模块学生观看演示了解布局特点详细记下要点熟悉做网页的要求仔细看演示的过程按照要求尝试操作学生讨论、设计并制作课堂巩固练习上述看到的北京大学、清华大学两个网站首页的版面是怎么安排的？属于哪种版式？作业布置请在互联网上搜索有关网页设计中色彩、版式、内容规划等方面的文章，选出最让你受益的23篇，将其网址收藏，并在全班做交流。知识小结本节课主要学习了页面的分析和页面的设计两大部分的内容。首先让学生明确了主页的功能模块要素，主页的版面设计要点以及种类，最后分析了几个不同风格网站