论文部分内容阅读
主题资源网站以其明确的主题、大量的结构化的学习资源、沟通探究式的“教”和“学”等特点成为信息技术与学科整合研究的切入点，也成为教师开展教学活动、展示自己教学思想的舞台。但一个优秀的主题网站的完成需要投入很多精力，如何做到有条不紊且效率最高呢？那就要了解网站制作的流程及注意事项，避免做无用功。
网站的整体规划和设计阶段
1.网站主题的确定
网站的主题也就是网站的题材。主题资源网站笼统地可分为：单一学科型主题资源网站和跨学科型主题资源网站两大类。对于单一学科型主题资源网站，可以以某一个知识点、某一个章节为主题；对于跨学科的主题资源网站，就要考虑网站所涉及学科范围的大小。比如，语文：散文园地、文言文园地等；数学：一元一次不等式、角的大家庭等；化学：氧气的性质和制法、摩尔定律及其应用等；跨学科：丝绸之路（含历史、地理、语文等学科）等。
题材确定以后，就可以围绕题材给网站起一个名字了。网站名称，也是网站设计的一部分，而且是很关键的一个要素。好的网站名称可以起到画龙点睛的作用。关于起名，我的建议是：(1)贴近主题，使人一目了然，避免无关信息的干扰。(2)名称要易记，最好用中文名称，不要使用英文或者中英文混合型名称。而且，网站名称的字数应该控制在8个字以内，便于记忆，便于其他站点的链接排版。(3)名称要有特色，能体现一定的内涵，能给浏览者更多的冲击和想象空间。
2.栏目内容的设计
建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块，结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。栏目的实质是一个网站的大纲索引。索引应该将网站的主题层次分明地表现出来，并将主题相关的知识、资源等也有层次地展示出来。另外，主题网站是学生探究式学习的舞台，所以栏目的设置还要考虑操作的直观性和简便性。
栏目的内容除了要有主题相关知识和资源，还要有动态交互部分，如留言板（实现网上答疑）、交流园地（给学生提供上传空间）等，一方面供学生交流探讨、自主学习，另一方面实现网站的师生共建。
栏目名称的确定要简单明了，突出栏目的内容信息，为了便于版面的设计，最好采用4个字。
3.网站的风格设计
网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义等诸多因素。如我们觉得搜狐是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的，这些都是网站给人的不同感受。
主题资源网站主要用于教学，网站的风格设计是为突出网站主题服务的，所以，我们要根据网站的主题、面向的对象、学科的特色等方面来综合考虑网站的风格，具体可以从网站的布局、色彩基调、素材的采用等方面来体现网站的风格。比如，要做一个荷塘月色的网站。为了突出“荷塘”这个主题，可以采用绿色基调，背景采用荷花或荷叶处理的朦胧图，图片素材、按钮的设计等都要贴近荷塘这个主题。再如，要做面向幼儿的教学主题网站。因为面向的对象是年龄较小的孩子，考虑到幼儿的心理和生理特点，在颜色上可以以明快的颜色为基调，图片素材以活泼可爱型为主，为避免干扰孩子的视线，影响视力，字体应较大一些，页面应比较简洁，最好不要充斥着大量的文字和图片。
4.页面框架的设计
众所周知，框架设计是网站设计的基础部分。形象一点说明框架设计，就是把页面当作一张白纸，在上面划分出大小区域，并把信息安排到格子中去。划分区域的方式就是框架设计的重点。框架设计不是孤立地去思考，而是要与导航设计、标题按钮、网站色彩等方面结合起来。框架的形式是多变的，它应根据网站的信息内容来划分，有重点地突出和排列信息。结合现有网络上能呈现的设计条件，提供以下几个类型供大家参考。至于具体采用哪种类型，没有特定的模式可循，可以根据自己的主题、内容的多少、栏目策划等细节确定。
(1)“国”字型：也称为“同”字型，是一些大型网站所喜欢的，也是最为多见的结构。即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
(2)拐角型：此结构与“国”字型结构很相近，上面是标题及广告横幅，接下来的左侧是一窄列的链接（多为导航链接），右列是很宽的正文，下面也是一些网站的辅助信息。
(3)左右框架型：这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的多数大型论坛都是采用这种结构，清晰了然。
(4)封面型：网站的首页多采用此类型，大多为一些精美的平面设计结合一些小的动画，放上几个简单的链接，或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种结构大多出现在企业网站和个人主页上，给人一个视觉缓冲，给人带来赏心悦目的感觉，不至于一打开主页就看到满满当当的页面。
网站信息的准备和收集阶段
在建立网站之前，必须依据确定的主题和内容，搜集相关信息和材料，包括文字、图片、动画、视频等信息。
1.素材格式、大小要适于网上传播
由于受网络速度的限制，网站所采用的素材格式要有所选择。视、音频文件要转换成流媒体的格式（视频如wmv、rm、asf等，音频如wma、ra等，视音频转换的软件有Media encoder、Real producer等），图片文件要采用gif和jpg格式。
素材的大小也很重要。太大了影响页面的下载速度，超过了浏览者的忍耐限度。一般，单张图片不要超过30K，单个动画控制在15K以内，每页图片总量不要超过60K，这样，其下载速度才可以让人接受。所有的图片都必须“减肥”成小图片(100*40)，一般可以控制在6K以内，较大的图片可以“分割”成小图片。另外，合理选择jpg格式和gif格式也是至关重要的。色彩鲜艳、分辨率高的用jpg格式，色彩单调、分辨率低的用gif，并且，采用gif89a格式的图片在download时能交错显示。
2.素材分类应遵循栏目的划分
为了便于网站的制作和节省时间，在搜集保存素材时，就要规划好素材。可以创建一个名字为“素材”的文件夹，在下面再按照网站栏目建立子文件夹，把素材存放到相关的栏目文件夹中，以方便查找。另外，对没有采用
的素材要及时删除，以减小网站容量。
网站的制作阶段
1.形成良好的建站习惯
为了便于自己制作网站以及对网站的维护，避免网站在越做越大时目录结构纷乱无序、素材查找费时费力，最好形成良好的习惯：(1)每一个栏目一个文件夹，每个栏目中的素材，另设立子文件夹。(2)网页命名最好采用“英文 序号”或“栏目代码 日期 序号”。(3)注意归档。建立说明网站栏目、网页、素材文件的命名规则的电子文档，以备日后更新网站所需。
2.制作技术简单化
主题资源网站是为教学服务的，不要求运用的技术多么高超，页面效果多么多姿多彩，尽量追求技术简单化，让自己从技术中解放出来，把精力放到基于主题资源网站的教学设计、内容设计、资源准备上，放到如何真正提高教学效果上来。
3.注意绝对路径和相对路径
经常有教师诉苦：自己的网页在移动后有许多图片不能正常显示。什么原因呢？绝大多数都是因为使用了错误的路径所致。网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径，大家(尤其是初学网页设计的朋友)往往对它们不够认识，在应该使用相对路径的地方使用了绝对路径，从而导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。一般情况下，如果是站内文件，建议使用相对路径，因为它比绝对路径的代码短，另外，相对位置也比较容易找，使网站维护比较方便。至于绝对路径，一般是做外部资源链接的时候才使用的。
有的教师可能会有这样的疑惑：一个网站有许多的链接，我怎么能保证它们的链接都正确，如果我调整了一下图片或网页的存储路径，那不是全乱了么？为了提高工作效率，我推荐大家使用Dreamweaver进行网站编辑，因为它有个站点管理功能，使用该功能绝对路径可以自动地转化为相对路径，并且当你在站点中改动文件路径时，与这些文件关联的链接路径都会自动更改。
4.注意中英文的问题
制作网站的过程中，建议大家在素材名字、文件夹名称中采用英文或者拼音。否则由于浏览器版本的问题，有时候会出现图片不显示，链接的视频不播放等情况。
5.主页上要下大功夫
主页的作用好比一本书的封面，是为了吸引用户更进一步浏览你的网站内容。因此，网站给人的第一观感是最为重要的。主页的设计应以醒目为上，令人一目了然，并别具特色，令人过目不忘，如采用新颖的图像、美观的字体等，切勿堆砌太多不必要的细节，或使画面过于复杂。主页上的图像应力求简朴，并有一定的实际意义，最好能集美观与传讯于一身，切忌虚饰浮夸，同时，要避免耽搁用户的时间，图像愈大、颜色愈深，传送页面的时间愈长。
6.使网站易于漫游
主页的其中一个主要功能就是作为漫游工具，指引用户查阅网站中的信息。因此，要尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的链接项目应只限于几个高级的类别（6～８个链接项目最为理想），例如教学设计、教学资源等。同时，如果选择的是“在当前页打开要浏览的页面”，则栏目与栏目之间要能实现方便的切换，或者干脆采用“在空白页打开链接”。
此外，提供给浏览者的阅读信息不应埋藏在重重叠叠的页面之下，穿越五个以上的链接项目足以令人厌烦。因此，设计时，必须在广度和深度之间求取平衡。如果网站中有太多的信息，就可能需要编制较长的页面或使用更多的链接项目，甚至可能要建立多个主页，使每个主页载有不同的信息。最受欢迎的设计处理方法是在主页上增加关键字查找所需信息的功能。
7.不宜多用闪烁文字、动画等
有的教师想通过闪烁的文字或动画来使网站活泼些，是可以被人理解的，但一个页面中最多不能有３处闪烁文字或动画，太多了给学生一种眼花缭乱的感觉，会干扰学生的注意力。
8.网站导航要清晰
制作网站时，所有的超链接都应清晰无误地向访问者标识出来，所有导航性质的设置（如图像按钮）也都要有清晰的标识，千万别光顾视觉效果的热闹，而让访问者不知东西南北。链接文本的颜色最好用约定俗成的格式：未访问的用蓝色；点击过的用紫色或栗色。总之，文本链接一定要和页面的其他文字有所区分，给访问者清楚的导向。
后期测试阶段
在网站正式发布之前，必须进行有效的测试。要测试所有的链接和导航工具条的有效性，并检查每个页面是否有图片不显示、页面不整齐等问题。另外，并非所有人都会使用最新的浏览器，为了照顾到使用低版本浏览器的访问者，在保证网页内容展示质量的情况下，尽量不采用对浏览器版本有要求的一些特效、技术。我们可以先采用老版本的浏览器来测试网页并进行适当的调整，同时，还要测试页面版式在我们常用的640×400、600×800和1024×768的分辨率模式下是否都能显示正常，这样才能保证用户端的浏览效果。
网站的整体规划和设计阶段
1.网站主题的确定
网站的主题也就是网站的题材。主题资源网站笼统地可分为：单一学科型主题资源网站和跨学科型主题资源网站两大类。对于单一学科型主题资源网站，可以以某一个知识点、某一个章节为主题；对于跨学科的主题资源网站，就要考虑网站所涉及学科范围的大小。比如，语文：散文园地、文言文园地等；数学：一元一次不等式、角的大家庭等；化学：氧气的性质和制法、摩尔定律及其应用等；跨学科：丝绸之路（含历史、地理、语文等学科）等。
题材确定以后，就可以围绕题材给网站起一个名字了。网站名称，也是网站设计的一部分，而且是很关键的一个要素。好的网站名称可以起到画龙点睛的作用。关于起名，我的建议是：(1)贴近主题，使人一目了然，避免无关信息的干扰。(2)名称要易记，最好用中文名称，不要使用英文或者中英文混合型名称。而且，网站名称的字数应该控制在8个字以内，便于记忆，便于其他站点的链接排版。(3)名称要有特色，能体现一定的内涵，能给浏览者更多的冲击和想象空间。
2.栏目内容的设计
建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块，结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。栏目的实质是一个网站的大纲索引。索引应该将网站的主题层次分明地表现出来，并将主题相关的知识、资源等也有层次地展示出来。另外，主题网站是学生探究式学习的舞台，所以栏目的设置还要考虑操作的直观性和简便性。
栏目的内容除了要有主题相关知识和资源，还要有动态交互部分，如留言板（实现网上答疑）、交流园地（给学生提供上传空间）等，一方面供学生交流探讨、自主学习，另一方面实现网站的师生共建。
栏目名称的确定要简单明了，突出栏目的内容信息，为了便于版面的设计，最好采用4个字。
3.网站的风格设计
网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义等诸多因素。如我们觉得搜狐是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的，这些都是网站给人的不同感受。
主题资源网站主要用于教学，网站的风格设计是为突出网站主题服务的，所以，我们要根据网站的主题、面向的对象、学科的特色等方面来综合考虑网站的风格，具体可以从网站的布局、色彩基调、素材的采用等方面来体现网站的风格。比如，要做一个荷塘月色的网站。为了突出“荷塘”这个主题，可以采用绿色基调，背景采用荷花或荷叶处理的朦胧图，图片素材、按钮的设计等都要贴近荷塘这个主题。再如，要做面向幼儿的教学主题网站。因为面向的对象是年龄较小的孩子，考虑到幼儿的心理和生理特点，在颜色上可以以明快的颜色为基调，图片素材以活泼可爱型为主，为避免干扰孩子的视线，影响视力，字体应较大一些，页面应比较简洁，最好不要充斥着大量的文字和图片。
4.页面框架的设计
众所周知，框架设计是网站设计的基础部分。形象一点说明框架设计，就是把页面当作一张白纸，在上面划分出大小区域，并把信息安排到格子中去。划分区域的方式就是框架设计的重点。框架设计不是孤立地去思考，而是要与导航设计、标题按钮、网站色彩等方面结合起来。框架的形式是多变的，它应根据网站的信息内容来划分，有重点地突出和排列信息。结合现有网络上能呈现的设计条件，提供以下几个类型供大家参考。至于具体采用哪种类型，没有特定的模式可循，可以根据自己的主题、内容的多少、栏目策划等细节确定。
(1)“国”字型：也称为“同”字型，是一些大型网站所喜欢的，也是最为多见的结构。即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
(2)拐角型：此结构与“国”字型结构很相近，上面是标题及广告横幅，接下来的左侧是一窄列的链接（多为导航链接），右列是很宽的正文，下面也是一些网站的辅助信息。
(3)左右框架型：这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。我们见到的多数大型论坛都是采用这种结构，清晰了然。
(4)封面型：网站的首页多采用此类型，大多为一些精美的平面设计结合一些小的动画，放上几个简单的链接，或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种结构大多出现在企业网站和个人主页上，给人一个视觉缓冲，给人带来赏心悦目的感觉，不至于一打开主页就看到满满当当的页面。
网站信息的准备和收集阶段
在建立网站之前，必须依据确定的主题和内容，搜集相关信息和材料，包括文字、图片、动画、视频等信息。
1.素材格式、大小要适于网上传播
由于受网络速度的限制，网站所采用的素材格式要有所选择。视、音频文件要转换成流媒体的格式（视频如wmv、rm、asf等，音频如wma、ra等，视音频转换的软件有Media encoder、Real producer等），图片文件要采用gif和jpg格式。
素材的大小也很重要。太大了影响页面的下载速度，超过了浏览者的忍耐限度。一般，单张图片不要超过30K，单个动画控制在15K以内，每页图片总量不要超过60K，这样，其下载速度才可以让人接受。所有的图片都必须“减肥”成小图片(100*40)，一般可以控制在6K以内，较大的图片可以“分割”成小图片。另外，合理选择jpg格式和gif格式也是至关重要的。色彩鲜艳、分辨率高的用jpg格式，色彩单调、分辨率低的用gif，并且，采用gif89a格式的图片在download时能交错显示。
2.素材分类应遵循栏目的划分
为了便于网站的制作和节省时间，在搜集保存素材时，就要规划好素材。可以创建一个名字为“素材”的文件夹，在下面再按照网站栏目建立子文件夹，把素材存放到相关的栏目文件夹中，以方便查找。另外，对没有采用
的素材要及时删除，以减小网站容量。
网站的制作阶段
1.形成良好的建站习惯
为了便于自己制作网站以及对网站的维护，避免网站在越做越大时目录结构纷乱无序、素材查找费时费力，最好形成良好的习惯：(1)每一个栏目一个文件夹，每个栏目中的素材，另设立子文件夹。(2)网页命名最好采用“英文 序号”或“栏目代码 日期 序号”。(3)注意归档。建立说明网站栏目、网页、素材文件的命名规则的电子文档，以备日后更新网站所需。
2.制作技术简单化
主题资源网站是为教学服务的，不要求运用的技术多么高超，页面效果多么多姿多彩，尽量追求技术简单化，让自己从技术中解放出来，把精力放到基于主题资源网站的教学设计、内容设计、资源准备上，放到如何真正提高教学效果上来。
3.注意绝对路径和相对路径
经常有教师诉苦：自己的网页在移动后有许多图片不能正常显示。什么原因呢？绝大多数都是因为使用了错误的路径所致。网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径，大家(尤其是初学网页设计的朋友)往往对它们不够认识，在应该使用相对路径的地方使用了绝对路径，从而导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。一般情况下，如果是站内文件，建议使用相对路径，因为它比绝对路径的代码短，另外，相对位置也比较容易找，使网站维护比较方便。至于绝对路径，一般是做外部资源链接的时候才使用的。
有的教师可能会有这样的疑惑：一个网站有许多的链接，我怎么能保证它们的链接都正确，如果我调整了一下图片或网页的存储路径，那不是全乱了么？为了提高工作效率，我推荐大家使用Dreamweaver进行网站编辑，因为它有个站点管理功能，使用该功能绝对路径可以自动地转化为相对路径，并且当你在站点中改动文件路径时，与这些文件关联的链接路径都会自动更改。
4.注意中英文的问题
制作网站的过程中，建议大家在素材名字、文件夹名称中采用英文或者拼音。否则由于浏览器版本的问题，有时候会出现图片不显示，链接的视频不播放等情况。
5.主页上要下大功夫
主页的作用好比一本书的封面，是为了吸引用户更进一步浏览你的网站内容。因此，网站给人的第一观感是最为重要的。主页的设计应以醒目为上，令人一目了然，并别具特色，令人过目不忘，如采用新颖的图像、美观的字体等，切勿堆砌太多不必要的细节，或使画面过于复杂。主页上的图像应力求简朴，并有一定的实际意义，最好能集美观与传讯于一身，切忌虚饰浮夸，同时，要避免耽搁用户的时间，图像愈大、颜色愈深，传送页面的时间愈长。
6.使网站易于漫游
主页的其中一个主要功能就是作为漫游工具，指引用户查阅网站中的信息。因此，要尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的链接项目应只限于几个高级的类别（6～８个链接项目最为理想），例如教学设计、教学资源等。同时，如果选择的是“在当前页打开要浏览的页面”，则栏目与栏目之间要能实现方便的切换，或者干脆采用“在空白页打开链接”。
此外，提供给浏览者的阅读信息不应埋藏在重重叠叠的页面之下，穿越五个以上的链接项目足以令人厌烦。因此，设计时，必须在广度和深度之间求取平衡。如果网站中有太多的信息，就可能需要编制较长的页面或使用更多的链接项目，甚至可能要建立多个主页，使每个主页载有不同的信息。最受欢迎的设计处理方法是在主页上增加关键字查找所需信息的功能。
7.不宜多用闪烁文字、动画等
有的教师想通过闪烁的文字或动画来使网站活泼些，是可以被人理解的，但一个页面中最多不能有３处闪烁文字或动画，太多了给学生一种眼花缭乱的感觉，会干扰学生的注意力。
8.网站导航要清晰
制作网站时，所有的超链接都应清晰无误地向访问者标识出来，所有导航性质的设置（如图像按钮）也都要有清晰的标识，千万别光顾视觉效果的热闹，而让访问者不知东西南北。链接文本的颜色最好用约定俗成的格式：未访问的用蓝色；点击过的用紫色或栗色。总之，文本链接一定要和页面的其他文字有所区分，给访问者清楚的导向。
后期测试阶段
在网站正式发布之前，必须进行有效的测试。要测试所有的链接和导航工具条的有效性，并检查每个页面是否有图片不显示、页面不整齐等问题。另外，并非所有人都会使用最新的浏览器，为了照顾到使用低版本浏览器的访问者，在保证网页内容展示质量的情况下，尽量不采用对浏览器版本有要求的一些特效、技术。我们可以先采用老版本的浏览器来测试网页并进行适当的调整，同时，还要测试页面版式在我们常用的640×400、600×800和1024×768的分辨率模式下是否都能显示正常，这样才能保证用户端的浏览效果。