班级网页设计毕业论文

毕业论文

学 院

专 业

班 级 ____

学 号

姓 名

指导教师

目 录

前言„„„„„„„„„„„„„„„„„„„„„„„„„„„„2

第二章：班级网站建设的意义„„„„„„„„„„„„„„„„„„3

第三章：网页制作常用软件的介绍„„„„„„„„„„„„„„„„5

第四章 网站制作的过程„„„„„„„„„„„„„„„„„„„„9

4．1做网页的步骤„„„„„„„„„„„„„„„„„„„„„„9

4. 2做网页的要素„„„„„„„„„„„„„„„„„„„„„„13

4．3网页形式与内容相统一„„„„„„„„„„„„„„„„„„15

第五章 网站的设计„„„„„„„„„„„„„„„„„„„„„„15

5.1主页的要求„„„„„„„„„„„„„„„„„„„„„„„15

5.2子页的要求„„„„„„„„„„„„„„„„„„„„„„„17

第六章 网页制作中遇到的问题„„„„„„„„„„„„„„„„„22

第七章 结束语„„„„„„„„„„„„„„„„„„„„„„„„23

谢词„„„„„„„„„„„„„„„„„„„„„„„„„„„„25

参考文献„„„„„„„„„„„„„„„„„„„„„„„„„„26

网站的设计与制作

【摘 要】

此次论文研究的问题是班级主页的制作与研究，在制作中主要运用dreamweaver采用分工完成的步骤，最后统一汇总，最终研究的成果将会是具有色彩以及风采的作品

在大学校园里，拥有个人电脑的学生与日俱增。论坛、贴吧、短信几乎成为大学校园文化的几个组成部分。特别是大学班级网站这一特殊的虚拟社区，已经融入了学生的日常生活，成为他们学习、生活中不可或缺的部分，本文介绍了网页设计的介绍；班级主页制作的意义；在制作网页中所用到的软件和制作网页中所遇到的问题；班级主页制作的步骤。重点介绍了在制作网页中常用软件的特点和难点；网页设计的理念和网页设计的要点；网页配色方案的介绍；位图与矢量图的区别；实现网页的最新动态；以及网站建成后的维护和更新。

【关键词】： 超链接 外观 内容

【Abstract】

This paper studies the problem is the homepage manufacture and research, in the production of mainly using Dreamweaver using division completed the steps, the final unification summary, the final results will be having a color and style of the works.

In the university campus, with personal computer students grow with each passing day. Forum, post bar, SMS has become almost university campus culture has the following components. Especially the university class website this special virtual community, has been integrated into the daily lives of the students, learning, they become an indispensable part of life, this paper introduces the webpage design is introduced; homepage making meaning; in the making of webpage used by the software and the production of webpage in the problems encountered; Homepage making step. This paper focus on making webpage of common software features and difficulties; webpage design and webpage design points; webpage color schemes are introduced; bitmap and vector difference; implementation of webpage latest developments; and the site after the completion of the maintenance and updating

【Key word】Super link Appearance Content

第一章 前言

Internet是人类历史发展中的一个伟大的里程碑，它是未来信息高速公路的雏形，人类正由此进入一个前所未有的信息化社会。人民用各种名称来称呼internet，入国际互联网、因特网、网际网等等，它正在想全世界各大洲延伸和扩散，不断增添吸收新的网络成瘾，已经成为世界上覆盖面最广、规模最大、信息资源最信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼丰富的计算机信息网络。随着二十一世纪新兴科技的飞速发展，如今的电子界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。

HTML (Hyper Text Markup Language ,超文本标记语言) ,或称为“多媒体文件语言”,是用于创建Web 页和Web 信息发布的第一个通用语言。H TML 以其简单精练的语法、极易掌握的通用性与易学性,使Web 网页可以亲近于每一个普通人,网络也才得以普及发展,以至今日的辉煌，随着各种开发工具的雏形，网页制作变得越来越容易，各种工具大致可分为两类，一类是图像制作，一类是网页编辑。

第二章、班级网站建设的意义

随着信息时代的到来，教育信息化成为一股不可逆转的潮流。在这潮流中，各校纷纷建起了学校网站，对推进教育信息化充入了生机和活力。但在这其中，我们忽视了班级网络平台的建设和应用，因为在推进教育信息化的工作中，其最终的目的是如何提高学生的教育教学质量，而班级是管理学生的最小单位，直接面对学生的教育教学管理。因此我认为做好班级网络平台的建设和应用将有着非常重要的意义。

一、班级网站的建设有利于家校的沟通

现代教育都提倡学校、家庭、社会的一体化教育，因此随着互联网的高速发展，网络平台已成为“三位一体”教育中不可缺少的角色，学校网站的建设也成为学校工作的重中之重。但作为学生，以及学生家长，除了关心学校的整体发展以外，更多的是关心自己孩子班级的情况。如果学校规模比较大，学校发生的事情很多，各个班级又有具体的情况，学校的网络平台上不可能反映到方方面面，即使能反映，但由于主页面篇幅的限制，许多标题不能直接反映出来，会导致家校信息沟通的缺陷。因此需要一个单独的班级网站信息平台，能直接明了地了反映孩子周围发生的一切，就能够迅速地使家校取得联系，促进家校信息的及时沟通。

例如班主任可以通过班级主页，及时发布班级简讯或公告，特别是要告知家长的，避免学生遗忘或传递信息时的错误。还可以通过成绩管理系统，使家长及时了解学生的学习情况。通过作业系统，使家长正确知晓学生该做的作业，同样老师间互相了解作业量，而不至于作业每天布置的不均衡。通过论坛或留言或电子信箱等，也可以让老师及时了解到学生的家庭情况，以及在家庭教育中存在的问题，取得教育的共识。

二、班级网站建设有利于教师信息素养的提高

教师的信息素养通过几年来的培训，基本上达到了一定的水准，基本上能制作简单的课件或应用复杂的课件进行教学。只有基于网络的且具有交互性的课件，才能更有利于学生的自主学习，激发学生学习的兴趣。因此班级网站的建设，会促使所有的任课老师去学习网络知识，即使不去做网站，但必须会应用网络，能经常收集与自己教育教学相关的信息，能对信息进行分类储存和上传，能从实际出发考虑利用信息的最有效方式，努力地将其整合到自己的学习和教育教学策略之中，加快教师信息素养的提高。

三、 班级网站建设有利于学生信息素养的提高

随着教育信息化的推进，各学校都开设了计算机课，学生的计算机应用

能力也得到了较大的提高。但由于种种原因，小学和中学都只有一个年级开设计算机课程，由于学生接触计算机的时间短，如家庭内没有计算机的话，就谈不上学生信息素养的提高。但如开设了班级网站，有着学生直接获益的学习内容，那么就会引起家长的重视，家长会支持学生买电脑，老师也会鼓励学生上网，学生使用电脑的机会多了，在老师的正确引导下，自然会促进学生信息素养的提高。

四、 班级网站建设有利于学生网络道德教育。

客观地说，网络开阔了学生的视野，极大地激发了他们的求知欲，探索欲，有利于培养开拓创新和追求科学的精神，提高了学习的积极性和主动性。但同样由于网络充斥着大量的淫秽、色情、暴力、凶杀、恐怖等不健康内容，而学生的世界观、人生观、价值观尚未形成，对有害信息缺乏基本的判断力。因此通过班级网络平台建设，把有益的内容充实到网上，也可以适当加入一些益智游戏，引导学生健康上网，而且给予学生一些权限，鼓励学生维护自己班级的网络平台，开设班级论坛或班级博客，以吸引学生上。这样即可以减少学生对网络的神秘感，又可以让家长和学生正确理解和应用网络，发挥网络的教育作用。

五、班级网站建设有利于信息的积累

老师可以有意识的先找一些内容贴到网上，然后指导学生查找，找到后也把内容上传到自己的班级网站上，那样，我们可以把不同网站上的内容根据预先做好的类别积累起来，即可以便于检索，节省时间，又可以学到很多的知识，而且可以照顾到家里没有上网条件的学生或计算机能力基础差的学生，当这个班级毕业后，可以把这些宝贵的信息延续到下一个班级网站上。

六、班级站建设有利于学生互相学习

班级网络平台的构建特别有利于学生间的互相学习。通过网站内的班级简讯栏目让学生学写简讯，即可以及时报道班级里的好人好事，又让学生的写作得到了锻炼。学生的作文都可以上传到网上，即练习了打字，又可以让学生互相学习点评，也便于老师的讲评，提高班级整体的写作水平。老师可以出一些思考题，让学生在课余时间讨论，学生也可以把疑难问题挂在网上，让老师和学生指点。特别在假期里，有些学校布置了一系列活动，如制定假期计划、开展读书活动、写读书笔记等等，这些都可以让学生上传到网上，供大家交流学习。

七、班级网站建设有利于班集体的建设

传统的班级管理，主要是以班主任为中心，班主任一直是推动班级工作运行的主要教育者、组织者、承担者。随着网络的应运而生，在学生避免不了网络的情况下，我们何不借助于网络进行教育。而建设一个能结合班级实际情况的网站，是开展网络教育的最有效载体。

网络是把双刃剑，虽存在一些问题，但更多的是积极的一面，随着社会

的发展，网络将逐步影响到我们生活的方方面面。作为当代的教育者，我们不能回避网络，而应该更好地教会学生正确使用网络，而班级网络平台的建设正是这一教育的切入点。当然开展网上教育也不是万能的，我们只有勇于在教育实践中探索，才能使教育和管理逐步适应网络时代的发展需要。

第三章：网页制作常用软件的介绍

DreamWeaver 自制动态 HTML 动画的网页 DreamWeaver 是一个很酷的网页设计软件， 它包括可视化编辑、HTML 代码编辑的软件包，并支持 ActiveX、JavaScript、Java、Flash、ShockWave 等特性，而且它还能通过拖拽从头到尾制作动态的 HTML 动画，支持动态 HTMLDynamic HTML的设计，使得页面没有 plug-in 也能够在 Netscape 和 IE 4.0 浏览器中正确地显示页面的动画。 同时它还提供了自动更新页面信息的功能。 DreamWeaver 还采用了 Roundtrip HTML 技术。这项技术使得网页在 DreamWeaver 和 HTML代码编辑器之间进行自由转换，HTML 句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver 最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。

Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。后又被Adobe公司收购。Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。2012年8月15日，Flash退出Android平台，正式告别移动端

Flash，是一种动画创作与应用程序开发于一身的创作软件，目前最新的零售版本为Adobe Flash Professional CS6(2012年发布)。Adobe Flash Professional CS6为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序，它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或Illustrator）导入它们，快速设计简单的动画，以及使用Adobe AcitonScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以

通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。

Flash Player 是一款能够播放小又快速的多媒体动画，以及交互式的动画、飞行标志和用macromedia flash做出的图像。这个播放器非常小，只需花一点点时间下载，对于在体验网页上的多媒体效果是个很好的开始。 Flash也支持高品质的mp3音频流、文字输入字段、交互式接口等等很多东西。这个最新版本可以观看所有的flash格式。若你要观看网页上的多媒体内容，flash player几乎是网络上的标准。为此播放器所制作的动画或图像十分常见。

Flash的前身是FutureSplash Animator，在出现时它仅仅作为当时交互制作软件Director和Authorware的一个小型插件，后来才由Macromedia公司出品成单独的软件。曾与Dreamweaver（网页制作工具软件）和Fireworks（图像处理软件）并成为“网页三剑客”。Flash随着互联网的发展，在Flash4版本之后嵌入了ActionScript函数调用功能，使互联网在交互应用上更加便捷。该公司及旗下软件于2007年被Adobe公司收购并进行后续开发。（Macromedia最后一个版本为Flash8，Adobe收购后第一个发布的版本为Flash CS）

Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。

Flash是一个非常优秀的矢量动画制作软件，它以流式控制技术和矢量技术为核心，制作的动画具有短小精悍的特点，所以被广泛应用于网页动画的设计中，以成为当前网页动画设计最为流行的软件之一。

在Flash中创作内容时，需要在Flash文档文件中工作。Flash文档的文件扩展名为.fla（FLA）。Flash文档有四个主要部分：

（1）舞台。舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash基础中将对舞台做详细介绍。

（2）时间轴。时间轴用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于 较高图层中的图形显示在较低图层中的图形的上方。

（3）库面板。库面板是Flash显示Flash文档中的媒体元素列表的位置。

（4）ActionScript。ActionScript代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash包括两个版本的

ActionScript，可满足创作者的不同具体需要。有关编写ActionScript的详细信息，请参阅“帮助”面板中的"学习Flash中的ActionScript3.0”。 Flash包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将ActionScript添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使Flash不仅功能强大，而且易于使用。

完成Flash文档的创作后，可以使用“文件”——“发布”命令发布它。这会创建文件的一个压缩版本，其扩展名为.swf（SWF）。然后，就可以使用FlashPlayer在Web浏览器中播放SWF文件，或者将其作为独立的应用程序进行

Fireworks 第一款彻底为 Web 制作者们设计的软件 Fireworks 的来头实在不小，它的出现使 Web 作图发生了革命性的变化。Fireworks 是专为网络图像设计而开发，内建丰富的支持网络出版功能，比如 Fireworks 能够自动切图、生成鼠标动态感应的 javascript。而且 Fireworks 具有十分强大的动画功能和一个几乎完美的网络图像生成器Export 功能。它增强了与 dreamweaver 的联系，可以直接生成 dreamweaver 的Libaray 甚至能够导出为配合 CSS 式样的网页及图片！

Flash 让你的网页动起来 Flash 是用在互联网上动态的、可互动的 shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。6FLASH6可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。FLASH 虽然不可以像一门语言一样进行编程，但用其内置的语句并结合 JavaScripe，您也可做出互动性很强的主页来。有人曾经说过：下个世纪的网络设计人不会用 FLASH，必将被淘汰出局！我相信这句话没错！flash

Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。后又被Adobe公司收购。Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。2012年8月15日，Flash退出Android平台，正式告别移动端。

HotDog Professional 制作要加入多种复杂技术的网页 HotDog 是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。HotDog 的高级 HTML 支持插入 marquee，并能在预览模式中以正常速度观看。这点非常难得，因为即使首创这种标签的 Microsoft 在 FrontPage 中也未提供这样的功能。HotDog 对 plug-in 的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。 HotDog 是个功能强大的软件，对于那些希望在网页中加入 CSS、Java、RealVideo 等复杂技术的高级设计者，是个很好的选择。

HomeSite 制作可完全控制页面进程的网页 Allaire 的 HomeSite 是一个小巧而全能的 HTML 代码编辑器，有丰富的帮助功能，支持 CGI和 CSS 等等，并且可以直接编辑 perl 程序。HomeSite 工作界面繁简由人，根据习惯，可以将其设置成像 Notepad 那样简单的编辑窗口，也可以在复杂的界面下工作。 HomeSite 更适合那些比较复杂和精彩页面的设计。 如果你希望能完全控制你制作的页面的进程，HomeSite 是你最佳选择。不过对于生手过于复杂。 Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。

功能特色

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

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

校色调色是该软件中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

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

dreamwraver软件由美国著名的网站应用开发工具生产厂商Adobe Macromedia于2005年6月推出并正式投入市场以来，已经发展得相当成熟。关于dreamwraver的技术介绍的相关书籍与网络信息相当丰富。通过大学中

软件开发环境课程的学习，对dreamwraver有了比较深刻的认识，并比较轻松的掌握了dreamwraver的操作。因此，软件技术可以完成任务的要求。

Dreamweaver是一款简体中文软件，可以在Win2003/WinXP中安全运行

第四章网站制作

4．1制作网页的步骤

再做网页之前，我确定了做网页的五个步骤。

一、确定网站主题 ：网站主题就是要建立的网站所要包含的主要内容一个网站必须要有一个明确的主题。网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深

二、搜集材料 ：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网站 ：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

四、选择合适的制作工具 ：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。

五、制作网页 ：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

根据思想设计分析，从内容对网站有这几个划分：

首页：网页制作的班级首页，有导航分块作用

班级风采：通过班集体。校内的趣事，宿舍的故事针线班集体从中大多数是以文字结婚的效果来展现

个人资料：主要由班级的每个成员的照片和本人的资料构成

论坛：这个模块中可以实行猪蹄，也可以通过注册的用户进行发表言论和文章，当然也可以算作是留言板。

首先先在dreamweaver网页目录下建立一个文件夹，在文件夹里放入背景所需的音乐文件然后在dreamweaver操作界面下新

建一个页面ASP/HTML都可以.

单击"插入"---"标签"此时弹出"标签选择器"而后展开"标记语言标签"---"HTML标签"选项并选择"页元素"街面,然后在右侧的列表框中选择bgsoun标签,如下图

在"源"框里浏览站点中的音乐文件,最后确定

.

其他的而

插入代码源，和编写代码

换到DW的“拆分”视图，讲光标定位到之前的位置，在光标的位置写下下面这段代码：

，如下图所示。

按下F12键，在浏览器中查看效果，我们可以听见背景音乐声。如果希望循环播放音乐，将刚才的源代码修改为以下代码即可：

2、嵌入音乐嵌入音频可以将声音直接插入页面中，但只有浏览者在浏览网页时具有所选声音文件的适当插件后，声音才可以播放。如果希望在页面显示浏览器的外观，可以使用这种方法。打开02.html网页，将光标放置于我们想要显示播放器的位置。单击快捷栏上的“媒体”按钮，从下拉列表中选择“插件”。“选择文件”对话框，在对话框中02.war

音频文件。

单击确定按钮后，插入的插件在文档窗口中以下图所示图标来显示。

选中该图标，在属性面板中可以对播放器的属性进行设置：

要实现循环播放音乐的效果，单击属性面板中的“参数”按钮，然后单击“＋”按钮，在“参数”列中输入loop，并在“值”列中输入true后，单击“确定”按钮。

要实现自动播放，可以继续编辑参数，在参数对话框的“参数”列中输入autostart，并在值中输入true

，单击“确定”按钮。

按下F12键，打开浏览器预览，这个实现了嵌入音乐的效果，在浏览器里显示了播放插件。

4.2制作网页的要素

（1）网页的整体布局设计

网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。

（2）网页设计中色彩的运用

色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。

色彩模式。 RGB模式 R代表红色G代表绿色B代表蓝色三种色彩叠加形成了其它的色彩。因为三种颜色都有256个亮度水平级所以三种色彩叠加就形成1670万种颜色了通过它们足以再现绚丽的世界。就编辑图象而言RGB色彩模式也是最佳的色彩模式因为它可以提供全屏幕的24bit的色彩范围即真彩色显示。 CMYK模式 CMYK代表印刷上用的四种颜色C代表青色M代表洋红色Y代表黄色K代表黑色。因为在实际引用中青色、洋红色和黄色很难叠加形成真正的黑色最多不过是褐色而已。因此才引入了K——黑色。黑色的作用是强化暗调加深暗部色彩。CMYK模式是最佳的打印模式RGB模式尽管色

彩多但不能完全打印出来。 可以先用RGB模式进行编辑工作再用CMYK模式进行打印工作在打印前才进行转换然后加入必要的色彩校正锐化和休整。

色彩的心理表现。 色彩具有精神的价值人们常常能感受到色彩对自己心理的影响这些影响总是在不知不觉中发挥作用影响我们的情绪。色彩的心理效应法是在不同层次中有些色彩对人有直接的刺激有些则需要通过间接的联想更高层次的则涉及人的观念与信仰。

色彩的表达感觉。 不同的色彩给人不同的心理暗示。对色彩的不同感觉和认知对色彩搭配所产生的心理联想会导致不同的心理反应。 空间感——色彩的空间感与色彩对比的知觉度有关对比度强和高纯度的色彩具有前进感对比度弱和低纯度色的色彩具有后退感。 色彩的空间感具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏从而有意识地形成凹凸深远的空间感甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。 亲切感——色彩的亲切感是指人对色彩的对比变化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感色彩的纯度对比和明度对比较弱时也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。 使用具有亲切感的色彩可以用来表现家具网站、儿童网站和女性网站、服装网站及日用消费品网站等。 庄重感——通常明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。在使用时要注意搭配搭配不当则会产生沉闷、呆板的感觉。 神秘感——色彩的神秘感并不是色彩本身具有的而是人的联想所产生的心理感觉。一般能使人感到神秘的色彩多为明度较低、色相不明确、纯度也不高的色彩如昏黄的氛围、幽暗的巷子、夜晚的角落都可以用来营造色彩的神秘感。 兴奋和忧郁感——色彩和人的个性一样具有明朗与忧郁的区分。明朗的色彩必然是明度高、对比较强的色彩以及纯度偏纯的色彩忧郁的色彩则是明度低、对比较弱的色彩以及纯度偏低且色性偏冷的色彩。 一般来说暖色较易引起心理的亢奋和积极性属于兴奋色其中朱红色最具兴奋作用其他明度较高、纯度较高的颜色如黄色、橘黄色等也具有煽动性、倾向于兴奋色。

网页色彩的搭配 将色彩具体到网页搭配中应遵循一定的方法。 同色搭配该方法采用一种颜色的深浅搭配尽管网站设计要避免采用单一色彩以免产生单调的感觉但通过调整色彩的饱和度和透明度也可以产生变化使网站避免单调。邻近色搭配使用在色带上相邻近的颜色如绿色和蓝色、红色和黄色。采用邻近色彩设计网页可以使网页避免色彩杂乱易于达到页面的和谐统一。对比色搭配该方法使用两种完全不同的颜色搭配。对比色可以突出重点产生强烈的视觉效果。通过合理使用对比色能够使网站特色鲜明重点突出。在设计时一般以一种颜色为主色调对比色作为点缀起到画龙点睛的作用。明度推移色彩搭配有两种方法操作通过加入等量的白色使一种颜色渐亮或者通过加入

等量的黑色使颜色变暗。这两种方法都可以产生色彩明度渐变的效果

4.3网页形式与内容相统一

网站的品位除了页面本身整体的视觉效果外往往更突出在一些细节上只有把握住细节才能更好地提高浏览者的使用友好度给浏览者留下深刻的印象。

（1） 颜色。 在初学网页设计的时候在用色方面要非常注意如果对网页用色没有太大的把握那么就先选择好网页的基本色调然后针对这一种颜色去进行变化如需加其他颜色可以试着加些灰色因为灰色是中色调不会对页面颜色造成太大的冲突。这样做出的网页整体颜色会非常协调统一。

（2）线条的运用。 很多朋友在制作网页的时候在两块过渡的地方如banner和导航条之间会用一条细线区分开此时往往会画上一条直直的线这样给人感觉会很突兀。

（3）图标。 网站中在各个标题的前面适当的加些图标点缀网页可以使网页效果更加出彩但是切忌网页图标使用过多图标的色调也要一致避免杂乱 要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

第五章 网站的设计

5．1 主页的要求

主页分为4个模块浅显易懂

全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。

功能决定设计方向

看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。

编辑本段标题设计的原则

在设计网页标题时，应注意同时兼顾对用户的注意力，以及对搜索引擎检索的需要。这一原则在实际操作中可通过三个方面来体现，这三个方面也可以被认为是网页标题设计的一般规律：

网页标题不宜过短或者过长

一般来说6-10个汉字比较理想，最好不要超过30个汉字。网页标题字数过少可能包含不了有效关键词，字数过多不仅搜索引擎无法正确识别标题中的核心关键词，而且也让用户难以对网页标题（尤其是首页标题，代表了网站名称）形成深刻印象，也不便于其他网站链接。

网页标题应概括网页的核心内容

当用户通过搜索引擎检索时，在检索结果页面中的内容一般是网页标题（加链接）和网页摘要信息，要引起用户的关注，网页标题发挥了很大的作用，如果网页标题和页面摘要信息有较大的相关性，摘要信息对网页标题将发挥进一步的补充作用，从而引起用户对该网页信息点击行为的发生（也就意味着搜索引擎推广发挥了作用）。另外，当网页标题被其他网站或者本网站其他栏目/网页链接时，一个概括了网页核心内容的标题有助于用户判断是否点击该网页标题链接。

网页标题中应含有丰富的关键词

考虑到搜索引擎营销的特点，搜索引擎对网页标题中所包含的关键词具有较高的权重，尽量让网页标题中含有用户检索所使用的关键词。以网站首页设计为例，一般来说首页标题就是网站的名称或者公司名称，但是考虑到有些名称中可能无法包含公司/网站的核心业务，也就是说没有核心关键词，这时通常采用“核心关键词+公司名/品排名”的方式来作为网站首页标题。本文开头所列举的某网络营销服务商网站首页标题实例，其实也是采用这种方式来设计网页标题，只不过由于罗列了太多的“核心关键词”，反而没有了核心。

对比并非相同，而是非常不同的元素，使他们各自独立, 使他们“略有不同” 以免混淆用户，（使它们）看上去不存在任何联系。 强烈的对比在页面元素之间能很自然的让用户的视线从一部分转移到另一部分，这样的网页便不会创造烦人和一眼望去什么都相似的一片汪洋。

重复重复样式在网页中给人以一种言词一致的感受——如果你使用相关元素以同样方式在网页的一个区域中, 那么继续以那个方式用到其它区域以保持网页的一致性。

整齐页面上的所有内容都应该相互联系, 没有什么会是不合适或应独立于所有其他设计元素之外的。

接近(近似)利用接近度来建立(网页元素)之间的关联的意思是: 相关的元素应该被编排在一起, 但是分开的设计元素之间则应该有足够的空间来表现它们的不同。

在这篇文章里我将带大家进一步深入了解这每个词的具体原则，并配以实例。不是C.R.A.P就是赌博(crap,英语中意为赌博，这里直译作者原文），咱们走吧！

对比良好的颜色对比能让你的网站看上去活泼有序，而差劲的颜色对比侧会让你使用的RGB颜色混合在一块，感觉混乱而又无序。使用对比的原则在于事先要考虑用户在使用时，哪些页面区域应该相互联系，而哪些则应完全分开，按照这样的原则，你就可以很容易的将页面分成有序的几个部分。

由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地被连接起来，用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页，在向搜索引擎提交你的网页时更容易被别人索引到。在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接

5．2子页的要求

dreamweaver8工作界面

这就是班级网站制作的成果与步骤

网站设计最重要的诀窍，恐怕就是你的网页要易读 。这就意味着必须花点心思来规划文字与背景颜色的搭配方案。 注意不能使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳 。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯

不要把一个网站的内容象作报告似的一二三四地罗列出来，要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。

给每个图形加上文字的说明，在出现之前就可以看到相关内容，尤其是导航按钮和大图片更应如此。这样一来，用户在访问你的站点时就有一种亲切感觉，认为你心细，比较善解人意，时时刻刻为他人着想

一个简单明了的网站介绍，不仅能让别人对你的网站能够提供些什么有个了解，引发共鸣或是表达你的诚意，常常最能打动读者，而且还能使访问者能快速找到想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息

当然现在IE所占的市场份额越来越大，但是我们仍然需要考虑到Netscape以及Opera这些浏览器用户。设计风格的考虑，如色彩的搭配，图形、线条的使用等等。要时刻为用户着想，必须最少在几种不同类型的浏览器下测试网站，看看兼容性如何

应当避免强迫用户使用工具栏中的向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分

网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。

所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向。

下面就是网站制作效果

将事先准备好的Flash视频、电话、电子相册、还有各个同学收集好的资料、通过表格布局、排版，运用软件把资料有机的整合在一起，实现网页初稿制作、

主页

班级风采主页

班级活动子页

个人资料主页

个人资料子页

论坛

第六章网页制作中遇到的问题

（1）在之间添加是能播放音乐可是转一个页面就没有了，怎样才能转一个页面一首歌还能继续播放而这样的解决办法只有用用框架把页面分为上下2框架上面一个框架只放音乐下面一个框架就放页面现在的内容

（2）dreamweaver8背景音乐不能用浏览器不能播放为什么

用其他浏览器试试、在控制面板中 internet选项 安全 自定义安全级别 启用ActiveX控件和插件、更改控件的标签的参数

（3）矢量图矢量图又叫向量图，是用一系列计算机指令来描述和记录一幅图，一幅图可以解为一系列由点、线、面等到组成的子图，它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计（CAD）、工艺美术设计、插图等。矢量图只能表示有规律的线条组成的图形，如工程图、三维造型或艺术字等； 常见的矢量图处理软件有CoreIDRAW、AutoCAD、Illustrator和FreeHand等。

（4）位图位图又叫点阵图或像素图，计算机屏幕上的图你是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息，这些点是离散的，类似于点阵。 位图在放大到一定限度时会发现它是由一个个小方格组成的，这些小方格被称为像素点，一个像素是图像中最小的图像元素。也就是我们俗称的马赛克。

（5）图片文件jpg，gif，png，bmp的区别

bmp：是未经过压缩的用点阵来表示的真彩图片,占用磁盘空间较大 gif：是经过压缩的,只能表示256种颜色,占用磁盘空间小,常用来演示

色彩单一的成块的卡通图案,GIF还有一种可以表示连续的动画。

png：是fireworks的图片格式

jpg：也是有损压缩格式但是它表示的颜色比较丰富,一般用来显示真彩的照片或图案。

（6）名片的尺寸问题

名片的标准尺寸：90mmX54mm。但是加上出血上下左右各2mm，所以在设计时

制作尺寸必须设定为：94 x 58mm。

（7）源文件的提供问题

作为设计者和客户（这里指各站长），如果事先没有明文协议的话 设计者有权不提供源文件。

（8）什么是logo，ci，vi

VI是Visual Identity的缩写，中文译为“企业视觉识别”。VI是CI计划的静态识别符号，是企业理念视觉化传达的载体，因此它项目最多，效果最为直接。VI作为视觉识别，它是外在表现，固然需要具有美感，但VI必须是MI的体现，直接反映企业的理念。因此VI设计包含这样一些原则：即充分传达企业理念、人性原则、民族性原则、简洁抽象及动态原则、员工参与原则、法律原则、艺术性原则和个性原则。

CI是Corporate Identity的缩写，中文译为“企业形象”。CI计划，是指企业有目的、有计划、战略性地创造出所希望的自身形象，由此提高企业的社会知名度，最终得到自己最适合的经营环境。

而logo只是网站或企业一个标志。

第七章 结束语

网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。我们需要了解一个完整网站的制作过程并知道网页制作在网站制作中的作用。一方面结合具体的实例多加练习培养对于技术的敏感和快速适应性注意到技术变化带来的各种新的可能性消除技术所形成的障碍另一方面要多方面、多角度地感受与掌握电脑设计的时尚语言扩展对传统设觉设计范畴的认识。

一般的来说，绝大多数普通受众图形，插件，applets和其它有关的高级Web浏览器特性。对我们来说，页面的实用可能比漂亮更重要，对于用户来说，没有什么比页面能够快速下载更重要了，简而言之，精简你的站点，这是一条最佳的捷径。

做网站一定要细心，有耐心，稍有不认真就会出错。事要一件一件的做，因此每一件小事都要做好，每一个小问题都要去认真解决，所有的大问题都是由一个又一个小问题积累而出现的，所以想要以后不出现大问题就得认真

解决每一个小问题

另外还要注意，不要依赖图形。就站点设计而言，的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片，某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之，图形并不能正确的在客户端加载。然而，图形经常被用来作为导航按钮。

第三要注意，仅仅在需要的时候使用帧(FRAME)。 使用帧可以把一个浏览器分成几个不同的窗口，对于站点的结构的把握是一个不错的方法。但是，你还是必须知道，还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候，你该仔细的考虑考虑你是否的确真的需要。经常，你这样的需求可以通过表格来组织站点的结构。

网页设计涉及到对多种软件、多种知识的学习和应用，以及个人的审美观等等。所以要想制作出漂亮的网页，需要一个逐步学习和经验积累的过程。网页设计还有更多的技巧，有待于我们去挖掘和研究

在制作的过程中，由于不熟悉，产生了很多的问题，通过与指导老师的探讨与沟通，我渐渐地对系统有了一个大体的认识。虽然说在寻找资料与研究dreamweaver过程中花费了很多时间，但是我认为这是必要的也是必须的。通过毕业设计使我们队网页的制作有了一些基本的了解，同时也对制作网页的工具有了一定的了解。入photoshop。Dreamweaver。flash等。还配有我们如何进行合理的设计与布局，是网页达到统一性和协调性的有机结合，如何利用样式表、模板等有效的提高网页制作的效率，如何利用代码对所做网页进行优化，以及如何把相关软件结合起来，以提高自己网页可视性与美化性的能力。最主要的是提高了我们的动手能力和自我分析，解决问题的能力，也为我们能更好的适应时候奠定了一定的基础。

谢 辞

在整个毕业设计过程中，指导教师给了我极大的帮助，并给予我悉心的关怀与指导，在此表示衷心地感谢。老师认真负责的工作态度、严谨的治学风格，使我深受启发。开发的同时，和同组同学们之间的相互探讨也使我获益匪浅，在开发工具的选择上，她给了我不少的指导，在此也表示衷心地感谢。在此同时也给了我不少的指导工作，在此也表示衷心地感谢。

设计的结束，真的也宣告了我们大学生涯的终结，心里虽然充满了期待，但也有的点不舍，想想自己走过来的一步一步，一点一滴，心中感慨万千，希望自己带着那份对未来社会的憧憬和希望，顺利走进社会的大家庭，开始自己新的生活，在此，感谢长久以来老师和同学们的帮助，谢谢你们！

参考文献

1邓文渊.网页制作高手M.北京人民邮电大学出版20076

2李宪广.网页制作边学边用M.北京清华大学出版社 2009

3网页设计入门EB/OL.http://www.xue8.com/sale/view.aspArticle ID288 4许凌云柳勇良.网页设计全方位学习M.北京清华大学出版社200811 5陈琳.photoshop cs3 入门实战与提高M.北京电子工业出版社200811 6焦慧.网页制作基础与典型范例M.北京电子工业出版社20087

7戎马工作室.Dreamweaver 8与asp动态网站开发M.北京机械工业出版社

20065

8戴一波.Dreamweaver CS3网站制作炫例精讲M.北京电子工业出版社 20081 9何秀芳.网页制作与网站建设课堂实录M.北京人民邮电出版社. 20093

10孙连三.新编网页制作与网站建设入门与提高M.北京人民邮电出版社. 20089

11邓文渊.网页制作高手FLASH 8M.北京人民邮电出版社 20076

12胡崧.超梦幻劲爆网页M.中国青年出版社.20087

13Scot Johson etal.using Active Server PageJ.Que 2007

14卓越科技.PHOTOSHOP CS3 美工广告设计百炼成精M.电子科技出版社 20093

15David Hunter etalBeginning XMLJ.Wrox Press Ltd2005

16杨大勇李金江.ASP网络开发自学导航M.北京机械工业出版社20076

17卓越科技.SQL SERVER数据库开发培训教程M.北京电子工业出版社 20094 18李曦琳.WEB导航设计M.北京电子工业出版社20093

19力诚教育.ACCESS 2007完全自学手册M.成都四川出版集团20093

20丛书编委会.ASP动态网页编辑M.北京清华大学出版社200610 21陈刚.商业网站开发从入门到精通M.科学出版社20082

〈1〉《信息技术》江苏科学技术出版社

〈2〉《网页制作》人民邮电出版社

《dreamweaver8参考手册》2008年版。