中小学网站的设计方案与建设.ppt
( 4.5 )《中小学网站的设计方案与建设.ppt》由会员分享，可在线阅读，更多相关《中小学网站的设计方案与建设.ppt（79页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、中小学网站的设计方案与建设 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望中小学网站的设计与建设中小学网站的设计与建设信息技术正在日新月异改变着人类社会，Internet进入现代人的日常生活和学习，已成为不可缺少辅助工具。学生上网学习、教师在网上查找资料，互联网为学校教育开辟了更广阔的天地。在这五彩缤纷的网络世界里，谁都想有一个展示自己风采的机会，建设一个学校网站，将学校的资源对外开放，使自己的信息奔驰在信息高速公路上，并展示自己学校的风采。但是如何建设好学校网站
2、，如何制作学校网页，让每位访问者都感到赏心悦目，留恋往返，则是学校网站设计与建设所要的问题。w一、学校网站的设计w学校网站的设计主要包括两个方面：一是学校网站的总体设计，包括网站的主题定位、整体形象设计、整体风格创意设计等；二是网页设计，分为一般网页和首页设计，主要涉及到版面布局、色彩搭配等问题，其中首页设计最至关重要。w(一)、学校网站的总体设计w1、设计学校网站的主题w主题也就是网站的题材。学校教育教学工作涉及面很广，可以选择的题材很多，但要注意主题定位要小，内容要精，不要追求大而全。对于一般中小学来说，选取精品题材，体现出自己学校的特色。同时要考虑到学校人力、财力、物力的因素，量力而行，
3、做自己最擅长、最省时省力省钱的题材，不要去盲目攀比优秀网站。学校网站主题应该是校园文化，能够渗透出校园气息。学校网站主题要鲜明，而且要富有创意。网页的创意不仅与主题有内在联系，而且它还反映出网页的拥有者怎样表现自己的主题。w2、设计网站形象w(1)、设计网站标志。标志是站点的标题，也是网站内涵的集中体现，能让用户联想到网站内容。就像看到了狐狸就想起了搜狐。网站标志可以是符号、图案，也可以是文字和动画。w（2）、设计网站的标准色彩。标准色彩是指能体现网站形象和延伸内涵的色彩。网站第一印象来自视角冲击，不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。一个网站的标准色彩最好不要超过三种，标
4、准色彩主要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。其他色彩也可使用，但只作为点缀和衬托，决不能喧宾夺主。w（3）设计网站的标准字体。标准字体和标准色彩一样，主要用于标志、标题、主菜单的特有字体，体现出站点的特有风格。w3、学校网站栏目和版块的设计w网站的题材确定之后，就要考虑栏目的设置问题。栏目地设置要紧扣网站主题，可以把主题按一定的方法分类并将它们作为网站的主栏目，以突出主题。设计栏目的时候应该注意：尽可能将网站最有价值的内容列在栏目上；尽可能方便访问者的浏览和查询；尽可能不要使用与主题无关的栏目。版块比栏目要大一些，每个版块都有自己的栏目。设计版块时要注意：各板块有相对
5、独立性；版块的内容要围绕站点主题。w4、站点整体风格创意设计w站点整体形象包括站点的标志、色彩、字体、版面布局、浏览方式、交互性能、内容价值等诸多因素，要统一规划，协调一致，能让浏览者感受到站点独有的风格，与众不同的特色。w（二）、网页设计w1、网页版面设计w网页版面设计要考虑浏览者使用不同的分辨率，可能会出现不同的显示效果，所以网页布局要以合适浏览方式安排图片和文字在页面上的位置。版面布局的形式有多种多样，有“F”字型、“T”字型、“E”字型、“口”字型、“门”字型等，各有特点，你可以根据自己的爱好进行设计。网页版面设计最好使用表格进行排版定位。使用表格定位应该注意：单一表格的结构尽量整齐；
6、表格嵌套层次尽量要少，表格嵌套层次越多，网页下载速度越慢。你也可以在互联网上寻找符合自己要求布局的网页保存下来，借鉴他的版面设计，组织自己的网页内容。这样做省时省力，对于初学者，可达到事半功倍的效果。w2、网页色彩的搭配w网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，建议让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前文色对比要大，以突出主要内容。w3、网页之间链接的设
7、计w网站的网页链接有两种基本方式：一种是树形链接结构，从主页链接到一级子页，从一级子页再链接到二级子页，逐层进入，逐层退出；一种是星形链接结构，在每个页面之间都建立链接。两种链接各有优缺点。在网站设计中，最好是二种结构混合使用。以树形链接结构为主，星形链接结构为辅，发挥二者的优点。在主页与一级子页之间用星形链接结构，一级与二级页面之间用树状链接结构。另外还可以在每个页面里显示导航条，也可以在每页设置返回按钮，帮助浏览者明确自己所处的位置。w二、网站的建设w(一)、网页的制作w制作网页根据自己的爱好和技术选用合适的网页制作软件。一般都采用可视化的网页制作工具软件FrontPage2000和Dre
8、amweaver4。对于初学者最好使用FrontPage2000，它的使用方法与Word相似，易于初学者掌握。w1、建立目录结构w为了便于网页发布和站点维护，在网页制作之前，首先要建立科学合理的目录结构。一个中小型学校网站，一般也由几十个网页甚至几百个网页组成，如果将所有的文件都存放在根目录下，将会带来文件管理混乱、不便于文件的编辑和更新；网页上传速度慢，影响工作效率。因此按照网页的栏目和内容来建立目录，实行分层管理。网站的目录是指你建立网站时创建的目录。根据网站的设计，按照主菜单栏目建立子目录。如学校网站由学生天地、教学资源、教学园地、校园风光、校办产业等栏目，可在根目录下为每一个栏目建立一
9、个子目录，还可以在子目录下再建第二级子目录，但是目录层次不要太深，最好不要超过三层。另外还应该注意，在建立目录、子目录时都不要使用中文名，有的服务器不支持中文名，会造成网页无法显示。目录名称要明确，便于记忆和管理。各级目录建好后，各自的网页及网页上图片、音乐、动画等元素都存入该栏目的子目录中。w2、首页制作w网站首页，就是用户进入网站看到的第一个网页。首页是网站的门面，首页制作质量直接影响到用户对网站的整个印象。一般首页制作占整个制作时间的30%左右，所以在首页制作时要多花些功夫。按照网页设计的版块、字体和色彩搭配方案对首页进行“精雕细刻”。使首页达到简洁明快的风格，简单的表格，令人愉快的色彩
10、搭配，协调的文字，浏览速度快，易于导航，经常保持新鲜感，使访问者赏心悦目。w（1）、首页内容模块。w首页分模块进行制作，一般的站点有这样一些内容模块：站点名称，广告条，主菜单，新闻，双向交流，搜索，友情链接，计数器，版权资料等。首页选择哪些模块，实现哪些功能，是否需要添加其它模块，这都根据学校网站主题和内容来确定。内容模块确定后，按照首页设计的版面，发挥网页制作人员的创意和想象力，制作出比较满意的网页。w网站名称。可以是图像，可以是文字，也可以是标示徽号。w广告条。制作对你网站起宣传作用的文字、图像、动画。w主菜单。包括网站的主要栏目，如学生天地，教学园地，图书阅览等等。w双向交流栏目。如论坛
11、、留言簿、邮件列表等。w友情链接。对一些常用的网站，在首页上建立链接。w版权资料。可以在首页下面标示一句简短的版权声明和网站开办批准信息。w联络资料。列出通讯地址、电子邮件地址、联系电话等。w（2）、制作技巧。w网页制作要图文并茂，很多文字性的内容如标题、主菜单栏目名都可以处理成图像形式，这不但克服了不同平台上的文字兼容性问题，而且页面也显得非常美观、精制，引人入胜，对访问者有较强的吸引力。w文字处理方法和Word相同,在这里就不再多述。图片可以通过扫描仪或数码相机获得，再复制到网页上直接使用，也可以将图片经过Photoshop艺术加工后再使用。动画可以自己动手用Flash制作，也可以在互联网
12、的动画宝库中下载。w首页制作时应该注意：为了使首页浏览下载速度快，就要尽可能地减少首页的数据量，减少图像和动画的数量，特别是大的图像和动画；尽量减少表格嵌套，不要把所有的内容都放在一个大表格里；首页保存必须在根目录下名称为“index”，上传后首页方可正常显示。w3、子页面的制作w子页的制作，其方法和首页制作相同，都要遵循首页制作一些规则。在制作一级子页时，首先要考虑子页的个数和每个子页的名称，然后将制作好的首页分别另存为每个一级子页的名称，把它们作为新建的一级子页面，这样，一级子页面的标题和导航以及版面信息就设置完毕。只需要在相应的子页面里修改相应的内容即可，从而大大地提高了子页面的制作速度
13、。一级子页页面的显示尽量采用新建窗口的形式，这使用户在等待页面下载的同时还可以继续浏览其它内容。w在网页制作方面还有许多技术细节，诸如如何适应不同的浏览器，在不同的分辨率下保持网页不变形，如何减少垃圾代码等等。首页相比其它页面来说，技术上要求更加严格，决不能出错。w（二）、网页测试。w当你的主页编制成功后，要以一个读者的身份，利用浏览器测试文档资料的正确性、可用性和友善性。w1、浏览器兼容性测试。Internet上存在着多种多样的浏览器，要让网页在所有的浏览器中都正确浏览是一件很不容易的事情，实际上，目前主要浏览器InternetExplorer，只要照顾好这种浏览器就可以了。但是这种浏览器版
14、本众多，所以应该充分考虑各种可能性，是网页的兼容性更好。w2、链接正确性的测试。对于小型网站，我们可以采用跟踪访问每个链接，检查链接是否准确。对于大中型网站，我们可以采用专用的测试软件，或者采用rontPage2000所提供的功能进行测试。用rontPage2000测试的具体方法是：打开网站，选择“报表”视图。单击“查看”菜单的“工具栏”，使得“报表”工具条可见。单击“报表”工具条的链接检查按钮，验证所有超链接。系统将会给出链接的有关信息。用Dreamweaver检查的方法是：打开文件菜单，选择检查链接命令。如果检查整个站点，则打开站点菜单，选择检查链接站点范围命令，会出现对话框，提示你选择要
15、检查的链接方式，并显示当前链接结果。w（三）、网站的发布和维护w1、站点的发布。w中小学校如果没有自己的服务器，可依靠信誉较高、技术力量雄厚的大型网站，可免费申请空间和网站域名。w在有资格发布和拥有自己的主页空间后，下来的工作就是把你所制作网页送到（称为上传）到服务器指定的位置，这样，别人就可以浏览你的网页了。上传网页，可以用rontPage2000、FTP软件、或用Windows98的eb发布功能上传。有的服务器提供网站管理和网页上传功能主页，可以不通过其它软件直接上传网页。w上传网页时应该注意：要按照站点建设时设计的目录层次在网络服务器中建立相应的目录，分别将各目录中的文件分类上传，把原来
16、目录和该目录下的文件原封不动地装在网络服务器里，才能使网页正常显示。w2、站点的宣传。w网页制作的最终目的是被访问，所以要想办法宣传自己的主页，让别人知道你的站点地址和内容，提高网站的被点击率。主要措施有：w（1）、在著名的搜索引擎注册登记，还要在自己主页中多加一些方便搜索引擎的“关键字”。w（2）、通过Email通知朋友和有关方面。w（3）、与其他主页互建友情链接，特别是与那些访问率较高的主页建立友情链接。w（4）、经常留言，引人注意。在网上浏览时，当看到一个很好的网站，可以考虑在这个网站的留言簿上留下诚恳赞美的语句，并把自己的网站网址留下来。之后其他网民浏览时看到你的网址，也许会有兴趣来访
17、问。w3、网站的维护。w当一个网站发布之后，日常的工作就是维护与管理。这里并不涉及什么高深的技术，而是要求网络管理员有足够的责任心和耐心以及敬业精神，还要随时随地根据网站的规划添加、修改网页的内容。要经常更新网页内容，首页的版面要定期更换，前来浏览的网民就会越来越多。w经常性的维护有：w一是更经常更新内容；w二是经常检查网页链接和友情链接；w三是对站点进行清理，对垃圾网页和网页元素进行删除，对文件夹和文件进行整理；w四是对个别不满意网页进行优化、美化，对一些大网页进行减肥，提高传输速度，对网页布局和色彩搭配不当的进行调整，对比较呆板的网页，可利用Flash添加动感，以美化网页。w学校网页制作需
18、要一定的技术和技巧，更需要花费大量的时间。有的学校，请专业人员制作网页，网页尽管很精彩，但是内容实用性差，日后的维护更是困难；多数学校都是老师利用业余时间自己动手制作，网页内容非常丰富、实用，内容更新快，深受用户的欢迎。当然，在网页的制作上，其方法、技术在不断地快速发展，我们只有不断学习、探索和体会，才能制作出符合标准的好网页。愿与各路网页制作高手探讨、切磋。第一第一课 从一个从一个页面开始面开始现在我们学校都能上网，大家一定去了不少站点吧！这些站点的页面都设计得非常精美，让你在浏览信息的同时，还可以得到美的享受。这么吸引人的页面，是怎么制作出来的呢？我们大家是不是也想做一个精美的主页呢？那我
19、们就一起学一下FrontPage,它是优秀的专业化网页设计软件之一，使用FrontPage你只要几分钟就可以建立一个自己的网页，这可是一件令人激动的事哟！w为了使网页更加丰富多彩，我们还可以在其中插入视频和音频特效。我们现在编辑的站点是一个个的文件，在Internet上的人怎么访问这个网页文件呢？我们只要将编辑好的站点上传到WEB服务器上，别人就可以通过URL地址访问这个站点了。w在Internet上计算机、文件夹、文件等所有的资源都是用URL命名的。当输入的URL地址发送给WEB站点服务器之后，服务器就会做出响应，把指定的WEB文件发送给计算机的浏览器，我们就可以在浏览器中浏览WEB页了。比
20、如我们在IE地址栏中输入山东大学的URL地址，单击“转到”按钮，就可以进入山东大学的网页。w你可能要问，在地址栏中并没有写出要访问的文件名，为什么总是访问山东大学的第一个页面呢？是这样的，我们输入的URL虽然没有指定要访问山东大学站点的哪一个目录和文件，但WEB服务器会自动指定一个该WEB站点的页面，我们把这个页面称为WEB站点的主页，它的作用就好像是一个门，我们可以通过这个门进入站点的其他各部分。WEB站点总是由一个主页和许多从页组成的。w好了，FrontPage的入门知识就讲到这里，如果要制作一个好的网页，还有许多知识要学习。在后面的教程里，我们会系统地教您FrontPage的使用。希望大
21、家通过这些学习，能够自己设计出精美的网页。w你可能要问，在Internet上看到有许多网页上不仅有文字，还有图像、声音甚至视频。这又是怎么制作的呢？w第二第二课 编辑网网页1.视图与模式（一）与模式（一）w现在进入FRONTPAGE。单击任务栏“开始”按钮，选择“程序”选项，单击“MICROSOFTFRONTPAGE”选项就可以了。可能你会发现PRONTPAGE界面和WORD很相似图一，这是因为编辑WEB页面和编辑WORD文档有很多同样的设置，这些设置所用的图标和WORD中的是一样的。w图一ProntPage2000界面www视图中的组框是用来切换视图的，单击里面的小图标就可以切换到不同的视图
22、。FRONTPAGE共有6种视图如左，使用不同的视图可以从不同的侧面查看设计的WEB站点。对一个WEB站点而言，不断更新是很重要的。随着站点的成长，维护站点的工作量会越来越大。建立站点可能很快，但是如果没有这6种视图的帮助，维护起来就很困难了。w这些视图的使用不用一下就全部掌握，只要知道有这些视图就可以了。w2、视图与模式（二）、视图与模式（二）w下面看一看同一个WEB站点在不同视图中是怎样显示的。w单击“网页”按钮，切换到网页视图，再单击工具栏上的“文件夹列表”按钮，窗口中增加了一个文件夹列表框图一。网页视图是用来显示选中的网页的，双击文件夹列表中的某一个HTM文件，在最右方的工作区中就会显
23、示该网页的内容。w图一网页视图ww注意，此时工作区的左下角有三个切换显示模式的选项卡图二。单击“普通”选项卡，就切换到了普通模式。在普通模式可以编辑网页的内容以及设置各种格式。单击“预览”选项卡就到了预览模式。如果要看一看当前编辑的文件在浏览器中的显示情况，就使用预览模式，在预览模式下，是不能编辑网页的。单击“HTML”，有的时候，也可以切换到HTML模式直接对网页对应的HTML文本文件进行编辑，从而为网页作一些特殊的设置。w图二工作区的三个切换模式w文件夹视图以列表的形式给出了当前WEB站点的文件夹和文件夹里包含的文件图三。由于一个WEB站点要涉及到许多文件，因此将这些文件分类并分别放到不同
24、的文件夹就很有必要。比如，可以把所有的图形文件放入IMAGE文件夹。FRONTPAGE还提供了一个_PRIVATE文件夹，用来存放一些对网络浏览者不可见的信息。w下面为当前站点再添加一个SOUND文件夹，用来存放WEB站点用到的声音文件：选中站点的根目录，然后单击“文件”菜单的“新建”项，在弹出的子菜单中选择“文件夹”命令。在输入SOUND，新文件夹就建立好了图四。w图三文件列表图四文件列表w其实一个站点实际上就是一个目录，在这个目录下可以建立许多子目录，并将站点的各种文件放在这些目录里。ww任务视图里放着关于站点维护的任务列表，如果站点大到由许多人共同维护，他们就可以通过任务列表知道工作的进
25、展情况了。ww报表视图给出了当前站点的一些统计信息。这里可以知道在站点的目录中哪些文件被链接进站点了，哪些没有。ww导航视图可以方便地组织站点中各网页的层次关系，在本视图中，每一个页框代表一个网页。如果站点设置了导航功能，就可以先在这里设置好各网页的层次关系，然后用导航栏把这种层次关系表现出来。w超链接视图是用来察看选中网页中设置的超链接的。通过它可以方便地知道在网页中设置了多少超级链接，以及是什么类型的链接。3.创建网页创建网页w这一节我们讨论怎样创建页面。w创建页面最简单的方法就是单击FRONTPAGE“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 中小学 网站 设计方案 建设
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
限制150内