::东莞中学::信息技术教学网::

　　现如今，网站已经广泛应用到社会的各行各业，渗透到各个领域。如政府部门借助网站提供政策咨询，发布政务信息，沟通社情民意；公司企业借助网站树立企业形象，推广企业产品，寻找合作伙伴；各种服务机构借助网站提供新闻、教育、娱乐、旅游等各项服务。
　　那我们可以借助网站来做什么呢？
　　--宣传班级、学校形象；
　　--展示学习成果；
　　--开展研究性学习；
　　--结交志趣相投的朋友；
　　--……
　　先让我们一起来欣赏几个优秀网站吧：
　　◎ 2010年“全国中小学电脑制作活动”高中组网页制作获奖作品：
　　全国一等奖作品《我的课改》（湖北）——
　　

　　全国一等奖作品《我为飞羽歌》（山东）——
　　

　　◎ 我校优秀班级主页：
　　2008级高二（4）班
　　2007级高二（1）班
　　2006级高二（8）班
　　2007级高一（8）班
　　2005级高二（12）班
　　 2005级高二（19）班
　　 2004级高二（3）班　　　
　　◎ 我校优秀个人主页：
　　2007级高二（2）班梁敏怡《MINNIE-SKIRT》
　　2007级高二（5）班梁碧瑶、罗淑珍《中国历史上的非凡女人》
　　2007级高二（1）班谢倩宁《音乐殿堂》
　　2007级高二（7）班罗晓航《313yeah》
　　2007级高二（1）班葛思祎、吴燕君《小说推荐》
　　2007级高二（4、5）班黎智华、张恺为《龙舟文化》
　　◎ 其他优秀网站欣赏：
　　依儿酷站_优秀网站欣赏
　　精美网站设计欣赏

二、开发网站的基本过程

　　开发网站的目的不同，其内容和表现的形式也就不同，但基本过程是相同的。从系统设计的观点来看，一般开发网站的基本过程经历五个阶段：

三、网站的规划

1、什么是网站的规划
　　在互联网中，网站成千上万，浏览者常常是走马观花，一带而过，只有精彩、内容极其丰富的网站，能吸引住浏览者。这种结果首先要归功于网站的规划和设计者。独具匠心的网站规划设计就象一幢宏伟的建筑前期的规划设计一样，要进行认真、科学总体规划，之后才可以“破土动工”。网站规划主要有两大部分：
(1)规划涉及的内容，包括每一步的目标、内容；每一步的人力安排；每一步生成的文档。
(2)网站的要素，包括网站的内容、网站的功能和网站的表现形式。

2、网站规划设计的基本原则

(1) 明确建设网站的目的
　　建立网站之前，要有明确的目的，即所要建立的网站的作用是什么，服务的对象是那些群体，要为浏览者提供怎样的服务。有只有找准了网站的定位，才可能建成一个成功的网站。
(2) 进行可行性分析
　　可行性分析就是分析是否有能力有财力建设和维护这个网站；分析网站建立以后是否有一定的经济效益或社会效益；分析网站建设需要花费多少时间、精力、人力，性价比是否合算。
(3)网站的内容设计
　　建设网站就是要为用户服务的，根据网站建设的目的，分析浏览者的需求，确定网站的内容。比如一个电子商务网站，就要根据消费者的需求、购买力、购买习惯等要素设计网站每个网页的功能，以满足客户的需要。
(4)网站的表现形式设计
　　有了好的内容，还要有好的表现形式，这就是网站本身的设计比如设计网站的CI标志、网站的文字排版、平面设计、三维立体设计、静态无声图文、动态有声影像等。

3、网站主题的确定

　　网站的选题，就是要根据网站的开发目标和访问网站的用户群，确立网站的主题，并给网站起一个简练响亮的名字，一个好的网站名称可以给一个网站起到画龙点睛的作用。
　　网站名称的确定需要切题，一个好的网站名称可以朴实的或者是想象力丰富的、容易引起联想的，要避免使用过于生僻难懂的词汇。一个别具一格、琅琅上口的网站名称能令人印象深刻，不但能让用户了角网站的主题内容，而且还能吸引更多的浏览者。

4、网站运行环境的确定

　　我校的校园网提供了高带宽、平稳的网站运行环境，为同学们提供存放网站的磁盘空间。同学们可以“信息技术教学网”的“个人空间”处申请个人空间，做好网站后再用FTP软件将网站上传到个人空间处，然后再申请开通外部链接，管理员审批之后，大家就可以欣赏到你的网站了。

5、网页制作工具的选择

　　制作网站的软件有很多，常见易学的制作软件有Frontpage和Dreamweaver。当然要让网页有好的视觉效果，还必须要有图像处理软件来对图片进行处理，如Photoshop、Fireworks；如果还需要动画效果，还需要运用动画制作软件，如Flash、Gif动画制作软件等。

6、网站开发任务的管理

　　要让网站顺利、高效地完成开发和设计，还必须要有详细的任务分工和时间安排。要协作完成任务时，各小组成员除相互协作之外还要有明确的任务分工，做到“专司其责，各尽其能，分工协作，顾全大局”。在网站规划中，还应对需要完成工作的时间进行安排，然后严格按照来开展工作。

四、网站设计

　　网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。网站设计一般包括网站栏目结构设计、网页版面设计、网页的链接设计（导航设计）等。

　　请同学们再看看本课开头提供的几个优秀网站，并思考以下几个问题：
　　（1）这些网站是怎样围绕主题展现内容的？
　　（2）这些网站提供了哪些栏目及功能？
　　（3）网站的链接有哪些特色，是否便捷？
　　（4）网站主页的布局、色彩运用在哪些特点？

1、网站的结构设计

　　经验告诉我们，建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使楼房结构合理。
　　制作网站前要设计好网站的栏目，网站的栏目可以有多层，但并不是层数越多越好，以能够恰当地体现网站主题为好。此外，每个栏目应有一个大致的内容描述，以表达该栏目的设计思路。
　　下面是“2005级高二（12）班”网站的结构图：

2、网页的版面设计

　　网页的版面效果在吸引访问者浏览网页中起了重要的作用，网页的版面设计主要是进行网页的风格设计和版面布局设计，一个色彩搭配合理、版面布局清新的网站会让访问者留恋往还。
(1)风格设计
　　风格是指网站的整体形象给浏览者的综合感受。有的严肃计策，有的清爽温馨，有的深沉厚重，有的生动活泼，有的古朴典雅，有的豪迈奔放。风格设计与主题是密不可分的，是为突出主题服务的。
　　一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应保持风格一致。
(2)版面布局设计
　　网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。
　　一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。
　　版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。

3、网页的交互设计

　　网站它不是一个“被动”的媒体，和电视、电台等媒体不一样的是网页是需要我们用鼠标去点击的。　　浏览者点击连接，网页显示出需要的内容然后在传递给浏览者。这就是网页的交互性。
　　网页中的交互通常是通过链接来实现，链接点的设计就是要考虑人们在浏览网站是通常有哪些需求，并帮助他们快捷地跳转到所需的页面，实现轻松自如的浏览。

　　以下是某网站的“网页交互设计”方案：

（点击查看放大图）

五、任务布置

◎　本学期“网站设计”总任务：
　　请每个同学独立设计制作一份网页作品。
　　1、要求：
　　（1）主题自定，但必须健康向上，而且不能使用游戏类的主题。
　　（2）总共要有10个页面或以上。
　　（3）网页中的内容要紧密结合作者的学习、生活实际或社会实践。
　　（4）在水平分辨率为1024（或以上）像素的电脑屏幕上浏览时，页面保持整齐，不允许出现横向的滚动条。
　　（5）时间安排：如果想参加本学期科技节的“个人主页评比”活动，则必须在第14周之前把网站上传到本教学网的个人主页空间。
　　2、评比指标：
　　

◎ 本节课任务：
　　请每个网站的作者利用Word建立一份“网站规划设计书”，内容包括：
　　（1）网站的主题；
　　（2）网站里包括什么栏目（一级栏目和二级栏目）；
　　（3）你打算采用哪种颜色为你网站的主色调；
　　（4）网站制作的时间安排表，即你打算用多少周的时间把这个网站制作完成。

六、补充阅读材料

1、确定网站的栏目和版块
2、确定网站的目录结构
 3、网页色彩的选择及搭配原理
 4、文件夹文件名命名规范
 5、网站设计必知的65条原则

* 友情提示：本文档只供本校师生上课时辅助使用，不是正规的教学设计或教案。