网站的设计与实现.docx

网站的设计与实现.docx

《网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《网站的设计与实现.docx（12页珍藏版）》请在冰豆网上搜索。

网站的设计与实现

网站的设计与实现

网站的设计与实现

摘要

教学网站的建设与发展是信息化教育迫切的需要。

随着信息化时代的日益临近，计算机网络已经成为当今社会各个领域不可或缺的组成部分！

学生可以通过浏览网站中的知识讲解模块，复习课堂教学的内容或是针对自己的兴趣和学习的进度自主地选择学习内容遇到疑难问题，通过课程论坛和其他同学或老师进行讨论，从而得到问题的解答；学生还可以通过网络课程中练习测试进行自我测试，巩固已经学过的知识，发现薄弱环节。

而对于教师来说，可以根据学生们提出的问题，及时发现教学中存在的不足，并做相应的调整与改进；教师辅导答疑时，不再受时间空间的限制，只要查看网络课程中的课程论坛，就可以了解学生的疑难问题，然后进行解答。

构建网络课程，利用网站的可扩展性好，易于更新的优点，制定规则、修改教学策略、提供教学资源、组织评价、新题库等。

在一定程度上弥补和克服了传统的教师授课教学方式的不足。

作为一种新的教学模式，网络辅助教学能充分发挥信息技术在高校教学中的优势，体现以学生为主体、教师为主导的现代教育思想，随着计算机技术和网络技术的不断发展，网络辅助教学得到越来越广泛的应用，如何有效的开展网络辅助教学活动逐渐成为高校教学信息化建设关注的重要课题，网络辅助教学平台的建设成为解决这一课题的基础和关键。

随着信息化教育的发展，一批批校园网络如雨后春笋初具规模。

网络教育的第一个直接效果是促进信息化教育。

如何充分发挥校园中的网络的功能，促进教育教学的大发展是摆在教育工作者面前一个急需解决的课题！

于是教学网站，学科网站的研究便孕育而生！

综上所述，信息化教育迫切需要构建高效的教学网站！

关键词：

网上辅助教学；教学网站；信息技术。

Thefirstchapterpicksshould

Teachingwebsiteconstructionanddevelopmentofinformationeducationisanurgentneed.Alongwithinformationageapproaching,thecomputernetworkhasbecomethesocialeachdomainindispensablepart!

Studentscanbrowsethroughthesitesontheknowledgemodule,reviewtheteachingcontentsinclassorfortheirowninterestandlearningprogressindependentlychoosethecontentoflearningproblemsencounteredbythecourseforum,andotherstudentsorteachersarediscussed,soastoobtainthesolution;studentscanalsothroughthenetworkcurriculumpracticetestselftest,toconsolidatewhathasbeenlearned,todiscovertheweaklinks.Toteachers,accordingtothequestions,timelydetectionofdeficienciesexistintheteaching,andmakecorrespondingadjustmentandimprovement;teachertutor,nolongersubjecttotimeandspacerestrictions,aslongastheviewofnetworkcurriculumcurriculumintheforum,youcanunderstandthestudents'problems,andthenanswerthequestions.Constructionofnetworkcourse,websitewithgoodextensibility,easytoupdatetheadvantages,makerules,modifyingtheteachingstrategy,providingteachingresources,evaluation,newquestions.Makeuptoacertainextentandovercomethedisadvantagesoftraditionalteachingteachingdeficiencies.

Asanewteachingpattern,networkaidedteachingcanmakefulluseofinformationtechnologyinuniversityteachingadvantage,embodiesstudent-centered,teacher-ledmoderneducationthought,alongwiththecomputertechnologyandthecontinuousdevelopmentofnetworktechnology,networkteachinghasbeenusedmoreandmorewidely,howtoeffectivelycarryoutthenetworkaidedteachingactivitygraduallybecomehighereducationinformationconstructionimportanttopic,networkaidedteachingplatformconstructionforsolvingthisproblemisthefoundationandkey.

Withthedevelopmentofe-education,onebatchofcampusnetworksuchasbambooshootsafteraspringraintotakeshape.Networkeducationandthefirstdirecteffectistopromoteeducationinformatization.Howtomakefulluseofcampusnetworkfunction,promoteeducationaldevelopmentisaneducatorbeforeanurgentsolution!

Sotheteachingwebsite,subjectwebsiteofborn!

Tosumup,theinformatizationofeducationisanurgentneedtobuildeffectiveteachingwebsite!

Keywords:

networkteaching;teachingwebsite;informationtechnology

第一章绪论

1.1网上辅助教学产生的背景与意义

信息技术是当今人类最伟大的科研成果之一，信息技术的发展使得其应用已广泛深入到社会生活的各领域，对教育的发展也带来了巨大影响。

利用信息技术促进教育教学方式的变革、促进创新人才的培养，成了教育科学领域研究的重要课题，专题学习网站正是在这种背景下出现的。

学生可以通过浏览网站中的知识讲解模块，复习课堂教学的内容或是针对自己的兴趣和学习的进度自主地选择学习内容遇到疑难问题，通过课程论坛和其他同学或老师进行讨论，从而得到问题的解答；学生还可以通过网络课程中练习测试进行自我测试，巩固已经学过的知识，发现薄弱环节。

而对于教师来说，可以根据学生们提出的问题，及时发现教学中存在的不足，并做相应的调整与改进；教师辅导答疑时，不再受时间空间的限制，只要查看网络课程中的课程论坛，就可以了解学生的疑难问题，然后进行解答。

构建网络课程，利用网站的可扩展性好，易于更新的优点，制定规则、修改教学策略、提供教学资源、组织评价、更新题库等。

在一定程度上弥补和克服了传统的教师授课教学方式的不足。

作为一种新的教学模式，网络辅助教学能充分发挥信息技术在高校教学中的优势，体现以学生为主体、教师为主导的现代教育思想，随着计算机技术和网络技术的不断发展，网络辅助教学得到越来越广泛的应用，如何有效的开展网络辅助教学活动逐渐成为高校教学信息化建设关注的重要课题，网络辅助教学平台的建设成为解决这一课题的基础和关键。

1.2后台管理系统在辅助教学网站的作用

后台管理系统实现对整个网站的后台数据库进行维护的功能，其中包括对学生用户和网络管理员的增加、删除和管理，对新闻发布和练习测试中各大题库内容的增加、删除和修改，对课程论坛的历史留言和不良留言的删除等工作。

主要采用WEB页和ASP技术相结合的方法来实现网络课程的远程数据维护。

网站管理员通过密码登录管理员页面后，直接以填写和提交网页表单的形式来增加和编辑有关的数据信息，系统自动对相应数据库进行增加或编辑，并直接反映在前台的页面发布上，即简单快捷,又安全可靠。

1.3开发工具与运行环境

本系统已经在计算机上进行开发并获得通过了，同时方便系统开发，减少开发过程的难度，我们基于以下的环境：

（1）以WindowsXP为操作系统。

（2）以Dreamwever+ASP为开发工具。

（3）本系统是基于B/S模式的管理系统。

WindowsXP是目前主流操作系统，Dreamwever是Macromedia公司出品的一套专业化的网页创造工具，它采用“所见即所得”的可视化编辑方式，通过特有的行为、摸板、时间轴等技术，使用户能够快速高效地创建各种具有专业水平的网页，而不需要编写任何代码。

如果需要在代码界面进行工作，只需要进入HTML代码窗口或原代码检视器中，即可同步看到Dreamwever生成器的源代码。

在这个代码窗口中，可以编辑任何内容，也可以方便地返回可视化编辑器。

第二章 网站制作实战

2.1站点

2.1.1创建站点

要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，这样可以使整个网站的脉络结构清晰地展现在面前，避免了以后再进行纷杂的管理。

从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“追梦人”。

填好后，单击“下一步”，进入下一个步骤。

由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。

”

单击“下一步”，进入下一个步骤。

在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。

底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点文件的本地副本。

单击该文本框后面的文件夹图标，新建并指定一个空的文件夹“E:

/ding”。

之后单击“下一步“，进入下一个步骤。

这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。

而后“下一步”再“完成”，即可。

2.1.2创建站点内容

站点创建完成后，就可以创建Web页来填充站点了。

在“右侧浮动面板组”中选择“文件/文件”面板，此时整个网站中没有任何内容。

用鼠标右击面板中的本地根目录文件夹。

在弹出的菜单中选择“新建文件”，新建一个文件后将其命名为“index.htm（或index.html）,它就是未来的首页。

由于“追梦人”网站分为“平面设计”、“动画制作”、“网文精品”、“经典回顾”、“个人说明“这五个大栏目，所以继续用鼠标右击右侧，在弹出的菜单中选择第二项“NewFolder（新建文件夹）”。

执行五次操作，新建五个文件夹，并把它们重命名为graph、anim、books、music、letter，分别对应上面的五个大栏目。

存放它们各自的内容。

之后再次新建1个文件夹，命名为images,用来存放“所有的图象文件”的内容。

之后在个栏目的文件夹里还要建立想相应的栏目网页。

2.2首页

2.2.1设置首页布局

每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其他Web页，原则上都必须通过首页来连接散播出去，可见首页是多么的重要。

首页是打开网站后在浏览器中显示的第一个页面。

它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。

当然，后缀名为html也是正确的。

具体设置方法是：

右健单击“文件”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。

首页的布局有很多方法，在这里我所用到的是表格的“布局模式”。

“布局”模式

表格称为布局表格，单元格称为布局单元格。

在绘制布局表格和布局单元格时，必须

“标准”模式切换到“布局”模式。

直接单击“布局”按钮即可。

操作步骤：

1、在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。

2、将变成“+”形状的鼠标光标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。

（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。

3、在这里要绘制多个表格，可以再次单击“布局表格”按纽进行绘制，也可以按住Ctrl键绘制多个表格。

追梦人”网站首页的布局如图所示：

2.2.2设置首页的页面属性

首先双击“文件”浮动面板中的index.htm,进入页面的编辑窗口。

右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。

在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。

“追梦人”首页设置的属性如下图所示：

2.2.3查看和编辑头内容

一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文档的主要部分，也是包含文本和图像等的可见部分。

头内容（head）是除文档标题外的不可见部分，包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键字。

下面就以首页为例，说明怎样插入较常用的头（head）内容。

单击“菜单拦”下面“插入快捷”的下拉列表，选择其中的HTML类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头”旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。

2.2.4插入图像

图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。

另一方面，网页的容量大小是网站成功与否的一大关键因素。

由于网络在传输上的限制，导致了下载的速度不可能太快，因此，网页的大小就不能太大，其中关键就在于图像的大小了，否则浏览者会失去等待的耐心，无论你的网站多么精彩也无济于事了。

所以，在网面容量大小的问题上一定要重视。

下面就来详细介绍对网页图像进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的基础上，图片文件能够变的更小。

1、首先将光标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。

左起第5个即为“图像：

图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。

2、随即弹出“选择图像源文件”对话框。

从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。

下面的“相对于”下拉表框中，可选择文件URL地址的类型，如果选择“文档”选项，表示图像地址相对于当前文档；如果选择“站点根目录”选项，表示地址相对于根目录。

在这里我要插入的是网站标志logo，插入logo图象,最后单击“确定”按钮，即可完成插入图像的操作。

 2.2.5插入多媒体

在DreamweaverMX2004中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频等媒体元素，如Flash,Shockwave,Applets,ActieX及格Midi声音文件等，并且还可以在Dreamweaver自身内插入MacromediaFlashMX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。

在DreamweaverMX2004文档中，可以插入媒体文件包括FlashShockwave影片、QuickTime、AVIjava、appletActiveX控件以及各种格式的音频文件。

要在浏览器中播放放Flash动画，必须在浏览器中集成“Flash播放器（FlashPlayer）”。

其中，InternetExplorer通过ActiveX控制来实现，NetscapeNavigator则是通过相应的插件来实现的。

在最新的NetscapeNavigator和InternetExplorer浏览器中，均已集成了Flash动画播放功能。

操场作步骤：

步骤1:

将光标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，右侧将会显示该类中可以插入的对象快捷按钮。

左起第6个即为“媒体”按钮，单击它右侧的下拉列表，选择第1项Flash图标。

步骤2:

在弹出的对话框中选择扩展名为swf的Flash文件，即可将其插入到Dreamweaver的“网页编辑窗口”中，可以看到，在这个窗口中Flash文件的大小。

在这里我的主页插入的一个动画，如图所示：

 2.2.6插入文本

文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，一个网站成功与否，它是最关键的因素。

在这最关键的因素。

可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。

插入文本的两种方式

网页中需要大量的文本，我们或以通过以下两种方式插入它们

一种是在网页编辑窗口中直接用键盘敲入文本。

这可以算是最基本的输入方式了，和一些文本编辑软件（如MicrosoftWord）的使用方法一样，选择好习惯的输入法，就可以运指如飞了。

另一种是复制文本的方式。

有些读者可能不喜欢使用DreamweaverMX2004来进行打字的工作，而更习惯在专门的文本编辑软件中快速打字，如MicrosoftWord和Windows自带的记事本等，又或者读者已经准备好了要放入网页的文本的电子版本，那么我们就可以直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下。

打开文本编辑软件（如MicrosoftWord），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将光标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。

这在我的“网文精品”中用到很多，全部是在word软件中排好ctrl+c,然后点击要粘贴的位置，crtl+v到Dreamweaver即可。

2.3创建其它网页

还有其它的几个网站与主页的制作相同，一个网页是图象和文字的组合。

 “平面设计”中的图象插入和前面的介绍相似，并可以在属性拦中调节图象的大小。

在Dreamwerver中常常会用到Firework、Flash，它们是相辅相成，在主页中的主体部分就是用Firework,如图所示：

  在“个人说明”中也用到这点，首先定好需要尺寸，在属性中设好背景，颜色等等，插入图象，输入文字，也word里的操作雷同。

第三章建立网页链接

网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？

这就是本章要讲的内容----网页的“链接”。

“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁，起着相当重要的作用。

网页中的很多对象都可以加入“链接”属性。

在DreamweaverMX2004中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。

其中部分内容在之前的章节中可能接触过，这里将对其进行更深入的讲解。

3.1文字链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。

接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。

具体操作步骤如下所述。

步骤1:

准备好已经制作完成的首页的各个栏目页面（假设除了“链接”，其他内容都已经制作完成了），该网站包含6个栏目，这里的5个栏目----“平面设计”、“动画制作”和“网文精品”、“经典回顾”、“个人说明”为例来进行讲解。

步骤2:

在Dreamweaver中打开首页，之后反白选取作为“链接”的文字。

实例中要做到单击不同的栏目的网页。

因此为第1个栏目“平面设计”设置链接，首先要反白选中“平面设计”4个文字。

步骤3:

观察“属性面板”，其中包括一个“链接”文本框。

步骤4:

接下来需要把链接的地址加入到文本框中，方法有3种。

这里我用到的是直接点击文件夹图标，在文件夹中找到要链接的对象graph.htm。

这样就建立了超链接。

不过有点很重要，由于大多数服务器都不支持中文文件名，而且对大小写敏感，因此采用英文文件名并统一大小写。

如图所示：

步骤5:

在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。

如图：

实例中没有选择任何选项，保持空白，表示在原窗口中打开链接网页。

步骤6:

还可以设置一些“链接”的属性，这是前面讲过的内容。

单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。

步骤7:

至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“平面设计”这4个文字上时将变成手形，并且浏览器窗口下面的状态栏中会显示链接到的网页的地址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。

步骤8:

同理，按照以上步骤，再为“动画制作”和“网文精品”“经典回顾“等其它栏制作指向对应栏目的链接。

步骤9:

通常在栏目页面中还需要有“返回首页”的链接，单击其后可以跳转回首页，因此在各个栏目中还要插入“网站首页”的文字，并且制作指向首页index.html的链接，制作方法不变。

至此，整个“文字链接”的实例就全就全部完成了。

通过对这个实例的讲解，读者不仅应该学会如何为文字制作链接，还应用对“链接”有了更加深刻的理解，链接的目的何在？

它到底能够在网页的网站中发挥什么样的作用？

怎样才能更好地使用它？

这些是网页制作者更应该思考的问题。

下面继续介绍其他类