个人网站的建立毕业设计论文
2011届毕业生 毕业论文（设计）
论文题目：个人网站建立 指导教师：*** * 名：*** 完成时间：2010-11-8
姓名 杨丽娟 担任 网站主页的设计与制作；子网页（美丽留主要 影）的制作；开题报告 工作 成绩 0
安徽中澳科技职业学院
摘 要
本论文主要是对个人网站的建立进行研究和探讨。作品的主要技术指标包括：1、制作出一个具有静态和动态技术的“个人网站”；2、在制作的过程中，加强和深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法和理论。
本设计的主要内容包括：1、个人网站的设计思想，整体规划及相关基础知识；2、个人网站的前台设计，包括汇编HTML语言程序及效果图； 3、个人网站的调试。
网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。
网站主题就是所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像单独的网页那样做得内容少而单一。所以必须要找准一些自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。 关键词：技术指标 基设计内容 网站规划 网站主题
Abstract
This will be web page design and production of research and discussion. Works of the main technical indicators include: To produce a static and dynamic technology \" company pages\"; In the process of strengthening and deepening of previously learned about web design methods, while a better understanding of Reference Information on the methods and theories; Finally, the pursuit of stability of the background operation.
The design of the main contents include:company web page design ideas, the overall planning and relevant basic knowledge; company web pages front design, including the compilation of HTML language program and effect diagram; Personal web pages debugging.
Page plan includes a great many things, such as the page structure, and column settings, web style, color combinations, layout, text, images and other use of, and only this website in order to have produced personality characteristics, attractive.
Web theme is to be included in the main contents of a web page must have a clear theme.
1
安徽中澳科技职业学院
Especially for personal web pages, it is impossible to do, as an integrated Web site content as large and comprehensive, all-inclusive. Must be necessary to identify one most interested in their own content, so deep, be thorough, to do its own characteristics, so as to give the left a deep impression.
Key words: Company Homepage Ground Rules Process Web Theme
2
目 录
前 言 ..................................................................... 1 第一章 个人网站设计系统分析 ............................................... 2 1.1 相关术语及解释 ........................................................ 2 2.2 个人网站的由来与发展 .................................................. 5 第二章 个人网站建立的步骤 ................................................. 6 2.1 确定网站主题 .......................................................... 6 2.2 选择好域名 ............................................................ 6 2.3 掌握建网工具 .......................................................... 6 2.4 确定网站界面 .......................................................... 7 2.5 确定网站风格 ......................................................... 10 2.6有创意的内容选择 ..................................................... 10 2.7 推广自己的网站 ....................................................... 10 第三章 网站开发工具的选用及介绍 ......................................... 11 3.1 DREAMWEAVER简介 ........................................................ 11 3.2网站图片制作工具PHOTOSHOP简介 ......................................... 11 3.3 FLASH简介 ............................................................. 12 第四章 个人网站——舞动青春设计介绍 ...................................... 13 4.1我的个人网站概貌 ..................................................... 13 参考文献 ................................................................. 15 总结 ..................................................................... 16 致 谢 ................................................................... 17
0
安徽中澳科技职业学院毕业设计
前 言
在21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大，目前，我国上网的人口已近一亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图像、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，毋庸置疑，网站已成为最吸引人的也是最有效的信息传递手段和法按时。随着网络技术的发展，各类网站纷纷出现，个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。
所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务
个人网站是指因特网上一块固定的面向全世界发布消息的地方，个人网站由域名(也就是网站地址)、程序和网站空间构成，通常包括主页和其他具有超链接文件的页面。网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。所谓的个人网站，就是指网站内容是介绍自己的或是以自己的信息为中心的网站，不一定是自己做的网站，但强调的是以个人信息为中心。
1
安徽中澳科技职业学院毕业设计
第一章 个人网站设计系统分析
1.1 相关术语及解释 Internet
Internet，中文正式译名为因特网，又叫做国际互联网。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。一旦你连接到它的任何一个节点上，就意味着您的计算机已经连入Internet网上了。Internet目前的用户已经遍及全球，有超过几亿人在使用Internet，并且它的用户数还在以等比级数上升。
Internet计算机存储的信息则汇成了信息资源的大海洋。信息内容无所不包：有学科技术的各种专业信息，也有与大众日常工作与生活息息相关的信息；有严肃主题的信息，也有体育、娱乐、旅游、消遣和奇闻逸事一类的信息；有历史档案信息，也有现实世界的信息；有知识性和教育性的信息，也有消息和新闻的传媒信息；有学术、教育、产业和文化方面的信息，也有经济、金融和商业信息等等。信息的载体涉及几乎所有媒体，如文档、表格、图形、影象、声音以及它们的合成。信息容量小到几行字符，大到一个图书馆。信息分布在世界各地的计算机上，以各种可能的形式存在，如文件、数据库、公告牌、目录文档和超文本文档等。而且这些信息还在不断的更新和变化中。可以说，这里是一个取之不尽用之不竭的大宝库。
Internet的另一种资源是计算机系统资源，包括连接在Internet的各种网络上的计算机的处理能力、存储空间（硬件资源）以及软件工具和软件环境（软件资源）。一般地说，要求使用计算机系统的Internet用户，如科学家、工程师、设计师、教师、学生或每一个普通用户，都可以通过远程登录到达某台目标计算机，只要这台计算机允许你使用并建立了你的登录帐号。你可以象使用自己的计算机一样使用它们！当你进入Internet后就可以利用其中各个网络和各种计算机上无穷无尽的资源，同世界各地的人们自由通信和交换信息，以及去做通过计算机能做的各种各样的事情，享受Internet为我们提供的各种服务。 超链接
超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超
2
安徽中澳科技职业学院毕业设计
链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。 网页上的超链接一般分为三种：一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，如http://www.baidu.com；第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去；还有一种称为同一网页的超链接，这种超链接又叫做书签。超链接还可以分为动态超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接，顾名思义，就是没有动态效果的超链接。 在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变（默认为紫色）。只有图像的超链接访问后颜色不会发生变化。 Web
Web是图形化的和易于导航的（navigate） Web 非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。同时，Web是非常易于导航的，只需要从一个连接跳到另一个连接，就可以在各页各站点之间进行浏览了。
无论你的系统平台是什么，你都可以通过Internet访问WWW。浏览WWW对你的系统平台没有什么限制。无论从Windows平台、UNIX平台、Macintosh还是别的什么平台我们都可以访问WWW。对WWW的访问是通过一种叫做浏览器（browser）的软件实现的。如Netscape 的Navigator、NCSA的Mosaic、Microsoft的Explorer等。
Web是分布式的。大量的图形、音频和视频信息会占用相当大的磁盘空间，我们甚至无法预知信息的多少。对于Web没有必要把所有信息都放在一起，信息可以放在不同的站点上。只需要在浏览器中指明这个站点就可以了。使在物理上并不一定在一个站点的信息在逻辑上一体化，从用户来看这些信息是一体的。
最后，由于各Web站点的信息包含站点本身的信息，信息的提供者可以经常对站上的信息进行更新。如某个协议的发展状况，公司的广告等等。一般各信息站点都尽量保证信息的时间性。所以Web站点上的信息是动态的。经常更新的。这一点是由信息的提供者保证的。
Web的交互性首先表现在它的超连接上，用户的浏览顺序和所到站点完全由他自己决
3
安徽中澳科技职业学院毕业设计
定。另外通过FORM的形式可以从服务器方获得动态的信息。用户通过填写FORM可以向服务器提交请求，服务器可以根据用户的请求返回相应信息。 HTML
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面！HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragraph），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是
,块引用标签是
。有些标签说明页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示(使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如,则必须以另一个标签将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。 但是也有一些标签例外。比如，标签就不需要。基本HTML页面以DOCTYPE开始，它声明文档的类型，且它之前不能有任何内容（包括换行符和空格），否则将使文档声明无效，接着是标签，以结束。在它们之间，整个页面有两部分－－标题和正文。标题词－－夹在和标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在和之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,扩展名也可是HTM)。然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。 CSS样式CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则
4
安徽中澳科技职业学院毕业设计
存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
2.2 个人网站的由来与发展
互联网在中国的出现只有短短七年时间，1994年中国科学院高能物理研究所设立了国内第一个web服务器，推出一个叫做“中国之窗”的网页，这可能是国内internet上出现的第一个web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，是互联网在中国开始进入社会生活之中。
个人网站是指因特网上一块固定的面向全世界发布消息的地方，个人网站由域名(也就是网站地址)、程序和网站空间构成，通常包括主页和其他具有超链接文件的页面。网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。所谓的个人网站，就是指网站内容是介绍自己的或是以自己的信息为中心的网站，不一定是自己做的网站，但强调的是以个人信息为中心。
个人网站包括：博客，个人论坛，个人主页等等 网络的大发展趋势就是向个人网站发展
所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务
网页，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为：也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。我们将静态网页的特点简要归纳如下：（1）静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”； （2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在
5
安徽中澳科技职业学院毕业设计
网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；（5）静态网页的交互性交叉，在功能方面有较大的限制好像看懂了,第一看后缀名,第二看是否能与服务器发生交互行为 。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。本站就是由静态网页连接而成。
第二章 个人网站建立的步骤
2.1 确定网站主题
做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。美国《个人电脑》杂志(PC Magazine)评出了99年度排名前100位的全美知名网站的十类题材：第1类：网上求职；第2类：网上聊天/即时信息/ICQ；第3类：网上社区/讨论/邮件列表；第4类：计算机技术；第5类：网页/网站开发；第6类：娱乐网站；第7类：旅行；第8类：参考/资讯；第9类：家庭/教育；第10类：生活/时尚。我们可以参看上面的分类，继续细分。如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色；二者，在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。
对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。记住：在互联网上只有第一，没有第二！ 2.2 选择好域名
域名是网站在互联网上的名字。一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。失去这个域名，所有前期工作就将全部落空。
目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向，如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不光是它“适时”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了网页的传输速度。所以，就我个人观点来说，首先花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。 2.3 掌握建网工具
网络技术的发展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰富。从最基本的HTML编辑器到现在非常流行的Flash互动网页制作工具，各种各样的Web
6
安徽中澳科技职业学院毕业设计
页面制作工具，下面是几款具有代表性的网页制作器：
（1）HTML编辑器。虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范，使用较为普遍的有Hotdog等专业HTML编辑器。
（2）所见即所得的网页编辑器。其中以Microsoft Frontpage为代表，它具有如Word一样的操作界面，熟知Word功能的操作者，只要稍加培训就能轻松编制网页。而且，Frontpage还能解析网页的HTML源代码，并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。
（3）现在非常流行的 Macromedia公司出品的Flash互动网页制作工具。这是是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比JAVA小巧精悍！但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等；并且由于Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。这是一款十分适合动态Web制作的工具。
另外，个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本知识。对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解，还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具，并能部分了解多种图形图像动画工具的基本用法，熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。
当然，互联网还是一个免费的资料库。编制网页需要多种多样的按钮、背景还有各种各样图形、图片。如果这些都要靠自己完成，既浪费时间又浪费金钱，而且还需要强大的图形、图片制作技术。所以，为了省却这些麻烦，网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。 2.4 确定网站界面
界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：
①栏目与板块编排
构建一个网站就好比写一篇论文，首先要列出题纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。
网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸
7
安徽中澳科技职业学院毕业设计
引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是：
●尽可能删除那些与主题无关的栏目；
●尽可能将网站内最有价值的内容列在栏目上；
●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。
另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。举个例子：ENET硅谷动力（www.enet.com.cn）的站点分新闻、产品、游戏、学院等板块，每个板块下面又各有自己的主栏目。一般来说，个人站点内容较少，只要分个栏目也就够了，不需要设置板块。如果有必要设置板块的，应该注意：
●各板块要有相对独立性； ●各板块要有相互关联； ●各板块的内容要围绕站点主题； ②目录结构与链接结构
网站的目录是指建立网站时创建的目录。例如：在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排，比如：
●不要将所有文件都存放在根目录下。有网站制作者为了方便，将所有文件都放在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。
●按栏目内容建立子目录。子目录的建立，首先按主栏目建立。友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：网站简介、站长情况等可以合并放在一个统一目录下。所有程序一般都存放在特定目录，例如：CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在一个目录下，便于维护管理。
●在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。原因很简单，就是方便维护与管理。
其它需要注意的还有：目录的层次不要太深，不要超过3层；不要使用中文目录，使
8
安徽中澳科技职业学院毕业设计
用中文目录可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接结构有两种基本方式：
●树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。
●星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。
因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。
③进行形象设计
网站的设计可以从以下几点出发：
●设计网站标志(LOGO)。LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如：网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。
●设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。
●设计网站字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。
9
安徽中澳科技职业学院毕业设计
●设计网站宣传语。也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。 2.5 确定网站风格
“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。
风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的。
总之，有风格的网站与普通网站的区别在于：在普通网站上你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量多少，浏览速度快慢等；在有风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的态度等。
在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之，风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进。 2.6有创意的内容选择
好的内容选择需要有好的创意，作为网页设计制作者，最苦恼的就是没有好的内容创意。网络上的最多的创意即是来自于虚拟同现实的结合。创意的目的是为了更好的宣传与推广网站，如果创意很好，却对网站发展毫无意义，那么，网站设计制作者也应当放弃这个创意。另外，主页内容是网站的根本之所在，如果内容空洞，即使页面制作地再怎样精美，仍然不会有多少用户。从根本上说，网站内容仍然左右着网站流量，内容为王（Content Is King）依然是个人网站成功的关键。 2.7 推广自己的网站
网站的营销推广在个人网站的运行中也占着重要的地位，在推广个人网站之前，请确保已经做好了以下内容：网站信息内容丰富、准确、及时；网站技术具有一定专业水准，网站的交互性能良好。一般来说，网站的推广有以下几种方式：
（1）搜索引擎注册与搜索目录登录技巧
注册著名的搜索引擎站点是在技术上推广网站的第一步。注册搜索引擎有一定的技巧，像AltaVista、搜索客这样的搜索引擎，它自动收录提交的网址。另外，注意Meta的使用，不要提交分栏Frame页面，大部分搜索引擎不识别Frame，所以一定要提交有内
10
安徽中澳科技职业学院毕业设计
容的Main页面。
而像Yahoo、搜狐等搜索目录网站采用手工方式收录网址，以保证收录网站的质量，在分类查询时获得的信息相关性比搜索引擎站点（靠Spider自动搜索的）更强。由于搜索目录网站收录网站的人为因素相对较多，因此在提交网站时要注意遵守规则。如Yahoo要求注册站点描述不超过25个单词。在此要注意：将网址提交到最合适的目录下面，要认真详细的介绍网站，千万不要有虚假、夸张的成分。
有时间和充沛的体力，再加上对新技术和技巧的学习和应用，你就能为自己在网上建一个家了。
第三章 网站开发工具的选用及介绍
3.1 Dreamweaver简介
Dreamweaver是由Macromedia公司推出的，用于网页开发和网站管理的专业化设计工具。它采用了多种新技术，具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能；它具有友好的操作界面，在文档窗口中可以打开各种浮动面板，同时还可以使用系统内置的多种对象进行操作。
Dreamweaver启动后，会出现一个新的文档操作窗口,该窗口包含如下的几个部分：标题栏、菜单栏、工作区、浮动面板和状态栏。标题栏中主要显示该文档的标题信息、文件名及该文件所在的文件夹等；菜单栏中包含了各种操作命令、应用特性和访问浮动面板的简单方法；Dreamweaver启动后，工作区是白色的空白区域，可以在工作区中输入文字、插入图象、添加背景以及其它页面元素；浮动面板提供了访问程序特性的简单方法，可以对浮动面板进行选择、拖放、重新定位、移动等操作，当我们不需要使用某个移动面板时，还可以用鼠标单击该面板右上角的关闭按钮将其关闭，需要时再打开；状态栏位于窗口的最下端，用于显示文档的HTML标记、文档窗口大小、下载速度等信息。 3.2网站图片制作工具Photoshop简介
Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件。它功能强大，操作界面友好，得到了广大第三方开发厂家的支持，从而也赢得了众多的用户的青睐。
ADOBE PHOTOSHOP最初的程序是由Mchigan大学的研究生Thomas创建，后经Knoll兄弟以及ADOBE公司程序员的努力ADOBE PHOTOSHOP产生巨大的转变，一举成为优秀的平面设计编辑软件。它的诞生可以说掀起了图象出版业的革命，目前ADOBE PHOTOSHOP最新版本为6.0，它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。
Photoshop支持众多的图像格式，对图像的常见操作和变换做到了非常精细的程度，使得任何一款同类软件都无法望其颈背；它拥有异常丰富的插件(在Photoshop中叫滤
11
安徽中澳科技职业学院毕业设计
镜)，熟练后您自然能体会到\"只有想不到，没有做不到\"的境界。 3.3 Flash简介
Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。下面介绍Flash3及4版本的特点：
Flash3的功能特点，总结起来有如下特点：
■ 灵巧的绘图工具 Flash本身具有极其灵巧的图形绘制功能，更重要的是他能导入专业级绘图工具，如Macromedia FreeHand、Adobe Illustrator等绘制的图形，并产生翻转、拉伸、擦除、歪斜等效果，还可以将图形打碎分成许多单一的元素进行编辑，并改变其颜色亮度。由于Flash提供具有保真技术的绘图工具，使图形边缘在经过一系列加工后仍会保持平滑。
■ 向量透明效果应用 Flash3可以创建透明的图形，并可以任意改变层次间透明的不同效果，如透明度、倾斜度及透明的颜色等属性。
■ 具有动画效果的按钮和菜单 Flash采用精灵动画的方式，在Flash3中可以随意创建按钮、多级弹出式菜单、复选框、以及复杂的交互式字谜 游戏。
■ 物体的变形和形状的渐变 在Flash3中产生物体的变形和形状的渐变非常容易，其发生完全由Flash自动生成，无须人为地在两个对象间插入关键帧。
■ 增强对图像的支持 Flash3不但可以对导入的图像（jpg、gif）产生翻转、拉伸、擦除、歪斜、改变颜色亮度等效果，还能利用新的套索工具或 魔术棒在图像中选择颜色相同的区域并创建遮罩（Mask）；将图像打碎分成许多单一的元素进行编辑，设置图像的属性，如产生平滑效果和质量损失压缩等。
■ 声音插入 Flash3支持同步WAV (Windows) 和 AIFF(Macintosh)格式的声音文件和声音的连接，你可以用同一个主声道中的一部分来产 生丰富的声音效果，而无须改变文件量的大小。
■ 自定义字体 Flash可以处理自定义的字体及其颜色、大小、字间距、行间距 、缩进等多种格式。在Flash创建的网页中，可以加入眼花缭乱的标题和动态的文本，而数据量非常小，比位图的下载速度还快。当然为了防止客户端字体短缺，你也可以将特殊字体转换为位图图形。
■ 模拟传输 Flash3提供了一幅设置动画播放方式的图表，你可以在此设置你的目标Modem速度，如28.8kb/s，然后进行模拟传输，检验其播放是否流畅，在参照图表中找出发生间断的位置，并进行优化。最终确保动画在客户端播放流畅。
■ 独立性 Flash3可以将制作的影片生成独立的可执行文件（EXE文件），在不具备Flash播放器的平台上，仍可运行该影片。因此，除制作网页外还可以将其应用于商业演
12
安徽中澳科技职业学院毕业设计
示及电子贺卡等。
■ 界面亲切 Flash3增加了Inspector窗口、手柄、加速锁等新功能，比以往更加易于操作。
Macromedia 6月16日发布了其新版的Flash 制作软件Flash 4，该软件的新特性将包括对高保真MP3 流式音频的集成化支持和创建互动式网站命令。另外，Flash 4 还包含一个改进的创作环境以满足创建高效带宽Flash网站的需要。
■ Flash 可创建基于矢量的网站，可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。Flash 4 中的MP3 流式音频支持可以帮助设计人创建网络音频应用程序，比如带有旁白和背景音乐的长动画，同时还可以减少文件大小以适合低带宽的网络传输。
■ Flash 4新增加的对文本输入框的支持，让开发人可以创建网络表格、应用程序和电子商务片头。现在网站可以从应用了Flash 技术的网页中收集用户数据，并把信息传到网站服务器上。
■ Flash 还可以控制用户输入的信息以何种方式显示，Flash 4支持可拖动的界面组件、条件逻辑和基本数学运算，比如可以用在创建网上购物结算应用程序上。
■ Flash 4 创作工具的改良界面包括新的监视面板和绘图工具及更多的可直视层，它的时间安排表和智能向导可帮助用户创建动画。此外还有一个发布命令可控制Flash 支持的输出格式，包括多版本的HTML、压缩位图和新的Quicktime。
第四章 个人网站——舞动青春设计介绍
4.1我的个人网站概貌
我的个人网站大体上包括一下内容：index，个人简介，我的相册，我的音乐，心马游缰，最新动态，在线留言，7大模块。这7大模块简介如下：
舞动青春 主页 个人简介 美丽留影 音乐分享 心马游缰 在线留言 最新动态 首页
首页的设计简述为了使我的的首页美观生动，吸引人在我的首页我还添加了形象开头动画页面在页面上我首先映入你眼帘的是我设计的FLASH动画，这样会使网页具有动态美的感觉，加上动听的背景音乐，无论是从视觉，听觉还是感觉上都是一个不错的网站。 个人简介
13
安徽中澳科技职业学院毕业设计
详细的介绍自己，比如兴趣爱好、个人的基本资料等，让别人更多的了解我。像别人展现自己。。。 美丽留影
主要展示我自己的，同学的、朋友的一些相册，利用javesprict编码完成的图片展示效果。 心马游缰
心马游缰是个人心灵的自我倾诉之所，将自己日常生活的感悟写下来与浏览者交流。这部分也总结了自己的得与失，沉淀了自己的情绪。 在主页上有该部分的文章列表，浏览者点击之后将跳转到每篇文章相对独立的网页中。而每一个相对独立的网页以黄色为主色调，有一种流露个人思想之感。 音乐分享
这个模块主要包括： （1）国内最新流行的音乐 （2）日韩最新流行的音乐 （3）欧美最新流行的音乐 （4）我喜爱的音乐 在线交友
通过登录，填写资料，提交。即可成为驴友一族。 在线留言
可以直接给我留言
14
安徽中澳科技职业学院毕业设计
参考文献
[1] 袁晓红. 《网页设计与制作》[M] .高等教育出版社 2006 385页~389页 [2] 甘登岱. 《我也能掌握Flash编程》[M]. 航空工业出版社 2000 [3] 赵更生.《Flash动画制作培训实录》[M]. 人民邮电出版社 2004
[4] 鲍嘉.卢坚.陈丁法《Dreamweaver CS3网页设计从入门到精髓》[M].中国电力出版社
2000
[5] 张成龙.《网页制作一点通》.延边人民出版社
[6] 王志强.《Flash CS3 动画设计完全攻略》[M]. 中国电力出版社
[7] 刘瑞新，《ASP动态网站开发、毕业设计指导及实例》[M]. 机械工业出版社 2000 [8] 林楠、胡亚军、彭铮.《中文版CorlDraw CS3》[M]. 电子工业出版社 1998 [9] 石晓燕、苏萍《网页设计基础》[M]. 清华大学、交通出版社 20 04 [10] 王玉芬.《网站规划与设计》[M]. 西北工业出版社 2003
[11] 洪光、范红波《,Flash MX Professional 2004 实用教程 》[M].大连理工大学出版社
15
安徽中澳科技职业学院毕业设计
总结
通过这次毕业设计的制作，我学会了很多东西，也了解了很多关于个人网站的资料。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Flash、Dreamwave、Fireworks、Html语言、IIS、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。 整个网站的制作是我和我的队友们合作完成的，让我知道了合作和团结的力量和重要性。虽然整个网页的结构还有很多不足，还有一些板块没有开通，但是我的确能够感到在我们制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望以后可以自学动态网站的课程，从而弥补自己在动态网络语言方面的不足。这样以后可以利用业余的时间为自己或者公司，根据自己的爱好建立一个个人网站。
16
安徽中澳科技职业学院毕业设计
致 谢
大学三年学习时光已经接近尾声，在此我想对我的母校，我的父母、亲人们，我的老师和同学们表达我由衷的谢意。感谢我的家人对我大学三年学习的默默支持；感谢我的母校安徽中澳科技职业学院给了我在大学三年深造的机会，让我能继续学习和提高；老师们课堂上的激情洋溢，课堂下的谆谆教诲；同学们在学习中的认真热情，生活上的热心主动，所有这些都让我的三年充满了感动。 感谢每天和我朝夕相处的室友们，感谢她们陪我度过这三年美好的时光，感谢她们平时在生活中、学习中对我的帮助。
这次毕业论文设计我得到了很多老师和同学的帮助，其中我的论文指导老师吴晓红老师对我的关心和支持尤为重要。在她身上我学到了很多东西。她和蔼可亲的态度、渊博的专业知识，对学生尽职尽责的教导都给我留下了十分深刻的印象。她无论在理论上还是在实践中，都给了我很大的帮助，使我得到很大的提高，这对于我以后的工作和学习都是巨大的帮助，在此感谢她耐心的辅导。在撰写论文期间，吴晓红老师几次审阅我们的论文，提出了宝贵意见，没有她的指导，我们就不能较好的完成课题设计的任务。
另外，我还要感谢在这几年来对我有所指导的老师，他们孜孜不倦的教诲不但让我学到了很多的知识，而且让我掌握了学习的方法，更教会我做人处事的道理，在此表示感谢。同时，在毕业设计过程中还有同班的同学也给了我不少帮助，这里一并表示感谢。
17
安徽中澳科技职业学院毕业设计
18
因篇幅问题不能全部显示，请点此查看更多更全内容