2024年1月22日发(作者:)

谢谢观赏

实现交互式的动态网页技术谢谢观赏

谢谢观赏

第一章 引言

随着Internet的普及和深入,传统的静态网页已经不能满足人们日益增长的获取有效信息的需求,在这种情况下,能够实现交互式的动态网页技术应运而生。目前实现交互式动态网页的技术主要有:CGI、ASP、JSP、PHP等,下面具体介绍一下各语言的区别以及我对将来语言发展趋势的观点:

1. CGI

CGI是一种通用的网关接口,是外部程序和WEB服务器之间的标准编程接口。可以使用各种不同的程序语言编写适合的CGI程序,这些程序语言包括Visual

Basic、Delphi或C/C++等等,可以将已经写好的程序放在Web服务器的计算机上运行,再将其运行结果通过Web服务器传输到客户端的网页浏览器上。事实上,这样的编制方式比较困难而且效率低,因为每一次修改程序都必须重新将CGI程序编译成可执行文件。

2. ASP

ASP由于其应用程序程序容易开发和修改、功能强大等特点,一经推出就受到了众多专业人士的好评,再加上微软强有力的支持,可以说是时下网站建设最为流行的技术之一。

可以认为Dreamweaver是一种类似HTML、Script与CGI的合体,但是其运行效率却要比CGI高。Dreamweaver与CGI最大的不同在于对象和组件的使用,ASP除了内置的Request对象、Response对象、Server对象、Session对象、Application对象及Object Context对象等基本对象外,还允许用户以外挂的方式使用ActiveX控件。当然,Dreamweaver本身也提供了多个ActiveX控件使用,这些组件包括广告回转组件、文件存取组件、文件连接组件及数据库存取件等,这些大量扩充且重复使用的组件使得ASP的功能远远强于CGI。

3. PHP

PHP(Hypertext Preprocessor,超文本预处理器)是一种HTML内嵌式的语言(类似于ASP)。PHP秉承Linux的CNU风格,借助于源代码公开,成为目前广泛应用的网站建设的技术之一。PHP独特的语法混合了C、JAVA、Perl以及PHP式的新语法,它执行动态网页的速度也比CGI快。从性能、开发及维护时间上看,PHP和ASP是并驾齐驱的,它们都有不错的表现。

4. JSP

JSP(Java Server Pages)是SUN公司推出的网站开发技术,是将纯Java谢谢观赏

谢谢观赏

代码嵌入HTML中实现动态功能的一项技术。目前JSP已经成为ASP的有力竞争者。

JSP与Dreamweaver技术非常相似,两者都是在HTML代码中嵌入某种脚本并由语言引擎解释执行程序代码,它们都是面向服务器的技术,客户端浏览器不需要任何附加软件的支持。

两者最明显的区别在于Dreamweaver使用的编程语言是VBScript之类的脚本程序,而JSP使用的是Java。此外,ASP中的VBScript代码被ASP引擎解释执行,而JSP中的脚本在第一次执时被编译成Servlet并由Java虚拟机执行,这是ASP与JSP技术本质的区别。

本系统的开发语言是Dreamweaver,那么我就先谈一下它的发展趋势。当今一些企业由于语言发展的速度,已经渐渐淡忘了Dreamweaver,也就是说现在企业开发网站一般不用ASP,只有及少部分的小型企业还在用.尽管这样,我还是敢做出推测,在将来, Dreamweaver还是不会被忘记,还会存在于公司内部。因为ASP这种语言虽说与新出的语言功能、支持方面减弱了不少,但是这种语言用起来非常简便、易懂。而且还可以外挂组件,几乎所有网站建设功能都包括在内,所以我认为Dreamweaver还可以在企业之间留一席之地。

JSP,可以说现在十分流行,大部分大、中型企业都开始使用这种语言,将来的趋势也趋向这门语言,他对ASP语言相对比,最明显的好处就是安全性强。

PHP,这种语言,一般用得很少,只有官方、政府、大型企业之类的网站使用这种语言,中、小企业都很少使用,这种语言到任何时候都是一样的,只能应用于特殊的网站。

CGI,就不用再讲了,现在几乎是脱离了这种语言,对于未来我想它也不会再出现。

实际上语言这个东西真不好说,有谁敢保证不再出新的程序语言,也许出来之后,立刻就能跑到语言的头衔位置;JSP就是一个很好的例子。

1.1 网站开发意义

1、为什么要建立网站,简单的说是为了大家的方便与交流。

2、整合资源,确定网站功能。根据需要而计划,确定网站的功能类型:企业型网站、应用型网站、商业型网站、电子商务型网站、产品宣传型、网上营销型、客户服务型、型等。

3、根据网站功能,确定网站应达到的目的作用。

谢谢观赏

谢谢观赏

学校网的建设情况。

1.2 网站简介

一个网站的成功与否与建站前的网站策划有着极为重要的关系。在建立网站前应明确建设网站的目的,确定网站的功能,确定网站规模、投入费用,等。只有详细的策划,才能避免在网站建设中出现的很多问题,使网站建设能顺利进行。

网站策划是指在网站建设前对市场进行分析、确定网站的目的和功能,并根据需要对网站建设中的技术、内容、费用、测试、维护等做出策划。网站策划对网站建设起到计划和指导的作用,对网站的内容和维护起到定位作用。

网站策划书出应该尽可能涵盖网站策划中的各个方面,网站策划书的写作要科学、认真、实事求是。

1.3 网站制作背景

1、根据网站的目的确定网站的结构导航。

一般学校网站应包括:学校概况、教师队伍、学生天地、家长之窗、教育科研、教学资源、校园采风。

2、根据网站的目的及内容确定网站整合功能。

如开篇引导、网站图片显示系统、等。

3、确定网站的结构导航中的每个频道的子栏目。

如每个子栏目当中都会及时更新当天发生的重要事件及图片新闻等等。

4、如果网站栏目比较多,则考虑采用网站编程专人负责相关内容。

注意:网站内容是网站吸引浏览者最重要的因素,无内容或不实用的信息不会吸引匆匆浏览的访客。

1.4 网站制作目标

建设网站前的分析

根据前面的设计思想进行分析,按照系统开发的基本观点对网站进行分解,从内容上可对网站作如下划分:

1、学校概况:通过学校历史、学校现状、学校前景及部分图片等内容来展现学校精神风貌,从开始就能给人极大的了解空间。

2、教师队伍:通过介绍我们学校的部分市级、区级和校级的优秀教师,展示学校教师的风采。

3、学生天地:通过通过学生活动的照片及活动记录,展示学生的成绩,学校的主要工作还是以学生的成长和发展为主,多让外界了解学校学生参加各种活动的情况,这样为学校的发展也是有益的事情。

4、家长之窗:学生家长可已通过网站学习一些有关教育孩子的方法,加强孩子的家庭管理,这样就可以使学校和家庭成为一个整体,对于孩子的教育有着重要的帮助。

5、教育科研:通过特殊教育、小班化教学和内涵式学习等方面的内容,展示我校的教育教学工作的各项内容。

谢谢观赏

谢谢观赏

6、教学资源:通过语文、数学、综合及课件四个方面,提供各种文档和课件资源,便于师生共同查阅和应用。

7、校园采风:通过校园景观、活动纪实和瞬间留念来展示我校的整体情况,同时也是对师生活动的纪实,展示师生的风采。

1.5 相关技术及软件介绍

在设计过程中,我运用了Dreamweaver、Fireworks、Flash、photoshop等工具软件,这些工具的综合运用使得网站制作更加方便,并且把这些工具软件的功能发挥得更加淋漓尽致。下面就对这些工具软件进行简单的介绍。

Macromedia Dreamweaver 8 是一款专业的 HTML 编辑器,用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您愿意享受手工编写 HTML

代码时的驾驭感还是偏爱在可视化编辑环境中工作,Dreamweaver 都会为您提供有用的工具,使您拥有更加完美的 Web 创作体验。利用 Dreamweaver 中的可视化编辑功能,您可以快速地创建页面而无需编写任何代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在 Macromedia

Fireworks 或其他图形应用程序中创建和编辑图像,然后将它们直接导入

Dreamweaver,或者添加 Macromedia Flash 对象,从而优化您的开发工作流程。

Dreamweaver 还提供了功能全面的编码环境,其中包括代码编辑工具(例如代码颜色和标签完成),以及有关层叠样式表 (CSS)、JavaScript 和 ColdFusion

标记语言 (CFML) 等的语言参考资料。Macromedia 的可自由导入导出 HTML 技术可导入您手工编码的 HTML 文档而不会重新设置代码的格式。Dreamweaver 还使您可以使用服务器技术(如 CFML、、ASP、JSP 和 PHP)生成由动态数据库支持的 Web 应用程序。Dreamweaver 可以完全自定义。您可以创建您自己的对象和命令,修改快捷键,甚至编写 JavaScript 代码,用新的行为、属性检查器和站点报告来扩展 Dreamweaver 的功能。

利用 Dreamweaver 中的可视化编辑功能,您可以快速创建 Web 页面而无需编写任何代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在 Macromedia Fireworks 或其它图形应用程序中创建和编辑图像,然后将它们直接导入 Dreamweaver,从而优化您的开发工作流程。Dreamweaver 还提供了其它工具,可以简化向 Web 页中添加 Flash 资源的过程。除了可帮助您生成 Web 页的拖放功能外,Dreamweaver 还提供了功能全面的编码环境,其中包括代码编辑工具(例如代码颜色、标签完成、“编码”工具栏和代码折叠);有关层叠样式表 (CSS)、JavaScript、ColdFusion 标记语言

(CFML) 和其它语言的语言参考资料。Macromedia 的可自由导入导出 HTML 技术可导入您手工编码的 HTML 文档而不会重新设置代码的格式,您可以随后用您首选的格式设置样式来重新设置代码的格式。Dreamweaver 还使您可以使用服务器技术(如 CFML、、ASP、JSP 和 PHP)生成动态的、数据库驱动的 Web 应用程序。如果您偏爱使用 XML 数据,Dreamweaver 也提供了相关工具,可帮助您轻松创建 XSLT 页、附加 XML 文件并在 Web 页中显示 XML 数据。Dreamweaver 可以完全自定义。您可以创建您自己的对象和命令,修改快捷键,甚至编写 JavaScript 代码,用新的行为、属性检查器和站点报告来扩展

Dreamweaver 的功能。

Macromedia Fireworks 8 是一款用来设计网页图形的多功能应用程序。您可以创建和编辑位图和矢量图像、设计网页效果(如变换图像和弹出菜单)、修剪和优化图形以减小其文件大小以及通过使重复性任务自动进行来节省时间。它谢谢观赏

谢谢观赏

所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。使用 Fireworks,您可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。Fireworks 使您可以在单个应用程序中创建和编辑位图和矢量两种图形。并且所有元素都可以随时被编辑。除此之外,工作流可以实现自动化,从而满足耗费时间的更新和更改要求。

Fireworks 与多种产品集成在一起,包括 Macromedia 的其它产品(如

Dreamweaver、Flash、FreeHand 和 Director)和其它您喜欢的图形应用程序及

HTML 编辑器,从而提供了一个真正集成的 Web 解决方案。利用为您所使用的

HTML 编辑器自定义的 HTML 和 JavaScript 代码,您可以轻松地导出

Fireworks 图形。

Flash 是一种创作工具,设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常,使用 Flash 创作的各个内容单元称为应用程序,即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果,构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容,因为它的文件非常小。Flash

是通过广泛使用矢量图形做到这一点的。

谢谢观赏

谢谢观赏

第二章 可行性分析

2.1功能可行性分析

1、根据网站的目的确定网站的结构导航。

一般学校网站应包括:学校概况、教师队伍、学生天地、家长之窗、教育科研、教学资源、校园采风。

2、根据网站的目的及内容确定网站整合功能。

如开篇引导、网站图片显示系统、等。

3、确定网站的结构导航中的每个频道的子栏目。

如每个子栏目当中都会及时更新当天发生的重要体育事件及图片新闻等等。

4、如果网站栏目比较多,则考虑采用网站编程专人负责相关内容。

注意:网站内容是网站吸引浏览者最重要的因素,无内容或不实用的信息不会吸引匆匆浏览的访客。

5、确定网站内容的实现方式。如图片中心使用动态程序数据库还是静态页面;网站是采用列表方式还是地图展示。

2.2技术可行性分析

HTML英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,WINDOWS等)。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言,用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件,需要通过浏览器显示出效果。

所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。通过HTML可以表现出丰富多彩的设计风格,下面来举一些我们都常用的代码例子:

谢谢观赏

谢谢观赏

图片调用:

文字格式:文字

通过HTML可以实现页面之间的跳转

页面跳转:

通过HTML可以展现多媒体的效果

声频:

视频:

上面我们在示例超文本特征的同时,采用了一些我们在制作超文本文件时需要用到的一些标签。所谓标签,就是它采用了一系列的指令符号来控制输出的效果,这些指令符号用“<标签名字 属性>”来表示。

HTML文档的扩展名通常为"*.htm"或"*.html",可用记事本等文本编辑软件编辑,用Internet Explorer浏览。

超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。

头 部 信 息

文 档 主 体, 正 文 部分

其中在最外层, 表示这对标记间的内容是HTML文 档。我们还会看到一些Homage省略标记,因为.html 或.htm 文件被Web浏览器默认为是HTML文档。 之间包括文档的头部信息,如文档总标题等,若不需头部信息则可省略此标记。 标记一般不省略, 表示正文内容的开始。

下面是一个最基本的超文本文档的源代码:

一个简单的HTML示例

欢迎光临我的主页



这是我第一次做主页,无论怎么样,我都会努力做好!

谢谢观赏

谢谢观赏

第三章 需求分析

3.1功能描述

网站后台是用Dreamweaver+ ACCESS所做,主要目的是让用户可以通过我们的网站,了解我们的最新情况。

我在设计网站之初并没有把网站想的多么复杂,就是想自己设计一个网站,能够达到自己所学习的水平和能力就可以了,在设计时我基本上以静态网站为主要思路,尽量丰富网站的内容,体现网站的主题思想,全面展示学校的特色之处,搭建一个平台,使得外界能够更加全面地了解学校的情况。

网站的主要功能就是提供浏览的资源和信息,浏览者还是以浏览资源为主,基本都是单方面交流,我将在以后的学习中不断完善网站的内容,增强网站的交互性,真正使得网站与受众能够多方面交流。

3.2内容

设计中包含着主观和客观两方面的因素,在确立了网页主题之后,首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多,可以概括为视听元素和版式设计两个方面。

1.视听元素

这里所说的视听元素,主要包括:文本、背景、按、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画,还是音频、视频,网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。

以上各视听元素大多数浏览器本身都可以显示或收听,无需任何外部程序或模块支持。比如,大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件(如MP3音乐)需要先下载到本地硬盘上,然后启动相应的外部程序来播放。另外,在浏览器使用插件(Plug-in)可以播放更多格式的多媒体文件。微软推出IE浏览器后,提供了基于OLE的ActiveX技术,用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小应用程序,相比于插件和ActiveX,JavaApplet具有更大的灵活性和良好的跨平台能力,因此具有很好的发展前景。总之,技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛,使浏览者可以享受到更加完美的视听效果。这些新技术的出现,也对网页的艺术设计提出了更高的要求。

2.版式设计

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处,它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计,是在有限的屏幕空间谢谢观赏

谢谢观赏

上将视听多媒体元素进行有机的排列组合,将理性思维个性化的表现出来,是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时,也产生感官上的美感和精神上的享受。

但网页的排版与书籍杂志的排版又有很多差异。印的尺寸和位置。而且,网页的组织结构不像印刷品那样为线性组合,这给网页的版式设计带来了一定的难度。

第四章 网站开发工具

4.1 网页制作软件概述

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

4.2 网页制作软件

DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队),足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓,HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器),两者各有千秋。所见则所得网页编辑器的优点就是直观性,使用方便,容易上手,您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

优点:

1.最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单,快捷键与格式控制,都只要一个简

2.网站管理单步骤便可完成

Dreamweaver能与您喜爱的设计工具,如Playback Flash,Shockwave和外挂模组等搭配,不需离开Dreamweaver便可完成,整体运用流程自然顺畅。除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称,Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

3.无可比拟的控制能力

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑谢谢观赏

谢谢观赏

同步的设计工具。它包含Home Site和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组,Dreamweaver 支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Third-party厂商,包含ASP,Apache,Broad Vision, Cold Fusion,iCAT, Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时,所见即所得的功能,让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。建立网页外观的样版,指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页,可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果,声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能,Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时,只要从Dreamweaver的网站在下载它的描述档,便可得知详尽的成效报告。

缺点:

一、难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果,这一点在结构复杂一些的网页(如分帧结构、动态网页结构)中便可以体现出来;

二、页面原始代码的难以控制性,比如您在所见即所得编辑器中制作一张表格也要几分钟,但您要它完全符合您要求可能需要几十分钟,甚至更多时间。而相比之下,非所见则所得的网页编辑器,就不存在这个问题,因为所有的HTML代码 都在您的监控下产生,但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合,则既产生干净、准确的HTML代码,又具备则见则所得的高效率、直观性,一直是网页设计师梦想。在DREAMWEAVER之前,FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器,但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER之前,现在我无意说DREAMWEAVER已经实现网页设计师的梦想,但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。

4.3 图象处理软件Photoshop

图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场,去除人像上不满意的部分,进行美化加工,得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像,这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意很好地融合,成为可能使图像的合成天衣无缝。

校色调色是Photoshop中深具威力的功能之一,可方便快捷地对图像的颜色进行明暗、色编的调整和校正,也可在不同颜色进行切换以满足图像在不同领域谢谢观赏

谢谢观赏

如网页设计、印刷、多媒体等方面应用。

特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作,如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于Photoshop的研究的原因。

第五章 网站设计与版式风格

5.1网站结构

网站是树型的结构。主级频道可以互相浏览,一级频道之间可以相互访问,他们是并列的关系。二级频道由一级频道中生成的浏览页面进行访问,下级频道由二级频道生成的浏览页面进行访问,由树型结构组成。

5.2网站版式风格

学校网站一般都注重实用性,毕竟不是商业网站,能浏览学校网站的都是为了获得一些实用的资源和信息,所以我设计的校园网站就是基于方便、实用的想法,页面比较简单,色彩不是很鲜明,给人一种庄重、典雅的感觉,各项内容简洁明了,使得浏览者能很清晰地了解网站的主题思想,可以说总体设计就是趋于简单,没有什么特别的装饰,尽量体现校园网站的内涵式风格。

制作模板和制作一个普通的页面完全相同,只是不需要把页面的所有部分都制作完成,仅仅需要制作出导航条、标题栏等各个页面的公有部分,而把中间区域用页面的具体内容来填充。

第一步:先在Dreamweaver MX 2004中运行“File→New”命令,接着从图1所示的窗口中依次选定“Template page→HTML template”选项,点击“Create”按钮之后即可创建一个模板文件。

3.1图 创建模板文件界面1

第二步:在页面设计视图下插入网页框架、导航条、Flash标题等所有页面公有的元素,然后运行“File→Save”命令将这个模板保存下来。

谢谢观赏

谢谢观赏

3.2图 创建模板文件界面2

可以先下载一个中意的网页,然后在Dreamweaver MX 2004中打开它,仅仅保留框架等元素之后通过“File→Save as Template”命令将其保存为模板,这样能够省去很多制作模板的时间。

为了避免编辑时候误操作而导致模板中的元素变化,模板中的内容默认为不可编辑,只有把某个区域或者某段文本设置为可编辑状态之后,在由该模板创建的文档中才可以改变这个区域。

5.3网站功能

我在设计网站之初并没有把网站想的多么复杂,就是想自己设计一个网站,能够达到自己所学习的水平和能力就可以了,在设计时我基本上以静态网站为主要思路,尽量丰富网站的内容,体现网站的主题思想,全面展示学校的特色之处,搭建一个平台,使得外界能够更加全面地了解学校的情况。

网站的主要功能就是提供浏览的资源和信息,浏览者还是以浏览资源为主,基本都是单方面交流,我将在以后的学习中不断完善网站的内容,增强网站的交互性,真正使得网站与受众能够多方面交流。

谢谢观赏

谢谢观赏

第六章 网站实现

6.1频道、栏目的设计

网站的首页设计了7个一级频道,包括:学校概况、教师队伍、学生天地、家长之窗、教育科研、教学资源和校园风采。

4.1图 网站首页

每个一级频道之下各设计了3——4个二级栏目,这里就不再细说了,而且都能达到第三层,其中教学资源达到了第四层,下面具体介绍一下这部分内容。

教学资源这一频道包括四个二级栏目,即:小学语文、小学数学、综合知识和课件资源。小学语文包括10个文档的链接,从“习题一”——“习题十”。其他三个栏目基本上都含有10个链接,提供了相应的资源。

4.2图 家长之家网页

谢谢观赏

谢谢观赏

4.3图 教师队伍网页

6.2文本、图片的制作

插入文本您可以在Dreamweaver文档窗口中直接键入文本,也可以从其它源(如 Microsoft Word 或纯文本文件)复制并粘帖文本。然后,您将使用层叠样式表 (CSS) 设置文本格式。插入正文文本可以在“文件”面板中,找到要插入的文档文件(在根文件夹中)并双击该文件的图标,在 Dreamweaver 中打开它。您可以看到,此窗口处于“代码”视图中,并且不能切换到“设计”视图,因为该文件不是 HTML 文件。在“文档”窗口中,按 Control+A 组合键 (Windows) 或

Command+A 组合键 (Macintosh) 选择所有文本,然后选择“编辑”>“复制”以复制该文本。单击文档右上角中的 X 关闭该文件。 在 “文档”窗口中,在表格的单元格内单击一次。选择“编辑”>“粘贴”。文本文件中的文本出现在所选表格单元格中。

根据显示器的分辨率,该表格将伸展以适合该文本。现在请不要担心它的外观。在下一教程中,您将学习如何使用 CSS 设置文本样式,以使所有内容恰当地适合表格。确保插入点仍在刚才粘贴文本的表格单元格中。如果插入点不在,则在表格单元格内单击。

在“属性”检查器(“窗口”>“属性”)中,从“垂直”弹出式菜单中选择“顶端”。这会将您刚刚粘贴的文本沿表格单元格的顶端对齐。如果您无法看到“垂直”弹出式菜单,请单击“属性”检查器右下角的展开箭头。保存该页。

6.3多媒体素材制作与修改

我在网页中插入FLASH动画采用了以下方法:插入Flash文本,单击常用谢谢观赏

谢谢观赏

快捷栏的媒体按钮,在列表中选择Flash文本,弹出“插入Flash文本”对话框,字体随意,大小22px,颜色设置为#F5E458,转滚颜色为#54C994,文本为“图片素材”,背景颜色#6DCFF6,选择自己需要的路径链接。同样方法我们分别制作“代码素材”、“Flash动漫”、“精美壁纸”和“音频视频”等栏目。

对于插入视频的方法,我是选用插入插件的方法,把视频素材插入到网页的相应位置,没有遇到什么别的困难。

谢谢观赏

谢谢观赏

第七章 网站测试与调试

7.1 测试的任务与目标

能正常显示正确输入,普通用户能轻松地操作该系统,能轻易地修复或修改系统,可以快速登陆主页,所有窗体都有导航栏网站标志风格一致,网站内图表的使用很协调,服务器及相关软硬件的维护,对可能出现的问题进行评估,制定响应时间。

数据库维护,有效地利用数据是网站维护的重要内容,因此数据库的维护要受到重视。

内容的更新、调整等。

制定相关网站维护的规定,网站维护制度化、规范化。

说明:动态信息的维护通常由企业安排相应人员进行在线的更新管理;静态信息(即没用动态程序数据库支持)可由专业公司进行维护。

网站发布前要进行细致周密的测试,以保证正常浏览和使用。主要测试内容:

7.2 测试方案

(1)服务器稳定性、安全性

(2)程序及数据库测试,网页兼容性测试,如浏览器、显示器。

(3)文字、图片、链接是否有错误。

7.3 测试结果

测试表明,设计的功能都能实现,本网站可以使用。

谢谢观赏

谢谢观赏

结束语

时间过得飞快,转眼间,一个月的毕业设计时间已经过去,我觉得毕业设计给我带来了无限的好处.在这次毕业设计中,我做的网站,在老师指导下,我们开始按计划一步一步的实现,刚开始的我觉得很容易、没什么难度,但是真正做起来才知道,做什么都不是一件容易的事儿,设计中遇到了很多问题,这时我才觉得目前的我知识欠缺很多。在这次设计中,我不但将知识能够结合起来,而且由于指导的原因,也明白了项目开发的过程,我觉得这就是我这次毕业设计最大的收获,毕业设计不但在知识方面更新了自己,而且在生活方面也对我本人有很大的帮助。在以前,我遇到问题总是问别人,而在毕业设计中,遇到的问题都是自己解决,所以提高了对问题的研究和看法技能。通过这次,使我知道了如何配合、互助。如果再有一次配合机会的话,我相信会更加完美。

谢谢观赏

谢谢观赏

致谢

网站建设是在业余时间完成,对于后台制作方面有了很大的收获,在此感谢学校的领导给予我这次磨炼的机会,使我在设计期间在分工协作以及整体规划、后台数据编写等方面得到了很大的锻炼。

在本次设计中,在此期间,由于对知识掌握的不全面及不深刻,因此遇到了很多大大小小的难题,在此对指导及曾经给予我帮助的同窗们表示真挚的感谢,感谢一个多月以来对我的支持和帮助。我从指导老师身上学到了不少的东西,每上一堂课,我都感觉学会了很多,所以谢谢您。您认真负责的工作态度,深厚的理论水平都使我受益匪浅。通过这次的毕业设计对于我以后的工作和学习都是一种巨大的帮助。同时也感谢学校提供给我们的这次学习机会。

谢谢观赏

谢谢观赏

参考文献

[1]龙马工作室.Dreamweaver

+ SQLSERVER(非常网络6+1)实例精讲.人民出版社.2005年6月

[2] 张景峰.Dreamweaver程序设计教程.中国水利水电出版社.2003年

[3]赵丰年.JavaScript动态网页设计.电子工业出版社.2001年1月

[4] 聂元铭, 杨眉,易昭湘.专家门诊ASP开发答疑.人民邮电出版社.2005年1月

[5] 刘耀儒.SQL Server 2000数据库.北京科海信团公司.2001年10月

谢谢观赏