网站的设计与实现Word文档格式.docx

网站的设计与实现Word文档格式.docx

《网站的设计与实现Word文档格式.docx》由会员分享，可在线阅读，更多相关《网站的设计与实现Word文档格式.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文字链接

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

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

具体操作步骤如下所述。

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

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

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

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

步骤3:

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

步骤4:

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

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

这样就建立了超链接。

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

如图所示：

步骤5:

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

如图：

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

步骤6:

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

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

步骤7:

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

步骤8:

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

步骤9:

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

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

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

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

怎样才能更好地使用它？

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

下面继续介绍其他类