毕业论文----论个人网站的设计与实现.doc

《毕业论文----论个人网站的设计与实现.doc》由会员分享，可在线阅读，更多相关《毕业论文----论个人网站的设计与实现.doc（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 毕业设计论文题 目： 网站的设计与实现 北京科技大学远程与成人教育学院毕业设计论文题 目： 实用网站的设计与实现 学习中心： 北京ITET培训中心 专 业： 计算机科学与技术 年 级： 0802 姓 名： 刘吉惠 一、 设计题目及内容摘要设计题目：论个人网站的设计与实现内容摘要：Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到开展的空间。大有大型企业的产品推销、售后效劳、解决方案。而小的有形形色色，五彩缤纷的个人网站。这主要是因为很多人已经不满足仅仅在Internet上的浏览信息，而是希望更深入的参与其中，拥有自己的Web网站，这似乎也已经成为

2、一种潮流。关键字：网站 网页制作 目 录引言41.1 网站域名的注册与使用41.2 网站建设的相关软件41.3网站的规划设计41.3.1网站的栏目设计51.3.2 确定网站的框架51.4网页根本构成元素5一、建站须知61、确定主题62、选择空间63、网站设计要点64、在本地搭建网站效劳器平台6二、个人网页的制作71、 用Photoshop完成网页设计72. Dreamweaver完成网页制作83、制作时应考前须知10三、网站的上传10总结12致 谢12引言1.1 网站域名的注册与使用 建立一个网站首先要有一个自己的网站地址(网址)，网址是由域名来决定的。因此假设想建立网站，首先需要注册或者转入

3、一个域名以便命名要建立的网站。随着Internet的开展，人们把域名分为几个大类，分别以不同的后缀结尾： 用于商业公司 .org 用于组织、协会等 .net 用于网络教育 .edu 用于教育机构 .gov 用于政府部门 .mil 用于军事领域 中国专用的顶级域名因此，在做一个网站以前要先注册一个好的域名。一个非产品推销的纯信息效劳网站，其所有建设的价值，都凝结在其网站域名之上。失去这个域名，所有前期工作就将全部落空。目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向，如网易的虚拟域名效劳，其实这对个人网站的推广与开展很为不利，不光是它“适时开启的窗口阻碍了浏览者的视线和好感，

4、让人一看就知道是个人网站，而且也阻碍了网页的传输速度。所以，可以花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。1.2 网站建设的相关软件 1、Photoshop2、Dreamweaver3、Flash4、Fireworks1.3网站的规划设计 在进行一个网站设计之前，要先明确网站的风格及特点，这对具体的设计是很有利的。利用制作网站的软件如dreamweaver进行网页框架、文字布局、页面链接、动态效果等设计，也包括利用photoshop或者fireworks等平面设计软件实现平面设计、静态无声图片设计，或者利用flash实现动画效果。 网站的延伸设计。

5、主要包括网站主题的定位、用户群定位、智能交互、制作筹划、形象包装和宣传营销等。网站的栏目设计 在我们确定了网站的主题和风格后，就应该围绕主题制作相应的网页内容，设计相应的题材栏目。设计网站logo 网站logo是网站的标志，是站点特色和内涵的集中表达。设计时不仅要考虑到网站整体开展到一个高度时相应的推广活动所要求的各类 效果，同时应使用能够让多数用户喜欢、印象深刻的造型。设计网站的标准色彩网站给人的第一印象来自视觉冲击，所以确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到网页浏览者的情绪。网站标准色彩的选择和确定，是由网站的主题和企业自身的特点决定的。所以，在定位

6、网站VI形象时，要明确网站所要传达的信息、定位网站的用户群，不要使用过多的颜色和注意网站色差问题等。 确定网站的框架 网站框架可以使站点链接清楚，层次清晰。同时，为以后为以后业务需要和规模扩充，提供了方便，以免以后修改整个网站的框架。1.4网页根本构成元素 要学会制作网页，首先需要了解网页都是由什么元素构成的。 文字：文本是构成网页的根本元素。一个最简单的网页可以只有几行文本。 图片：正是有个各种美丽的图片，网页才变得多姿多彩。 动画：如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。 超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛

7、，失去了与外界的一切联系。 其它元素：还可以在网页中添加声音、视频等元素。一、建站须知 1、确定主题 做个人网站，好多人都喜欢在网页中放一些自己感兴趣的内容，但是个人的能力毕竟有限，网站后期会因为无力维护而导致站点更新缓慢、内容匮乏。所以个人建议在做个人网站时，要选定一个主题。做一个小而精的有自己风格的网站。 2、选择空间 个人认为建站初期可以申请免费域名空间，但是到后期为了网站更好的开展可以考虑去注册一个域名。 3、网站设计要点 制作清晰的网页链接关系。其中导航清晰，布局合理，层次清楚，页面的链接层次不需太深，这样可使浏览者在最短的时间内找到需要的东西。 尽量保持风格统一，这样可以加深浏览者

8、对自己网站的印象。 色彩和谐、重点突出。 保持主页界面的清爽性 动态不易太多。动态效果太多会让浏览者眼花缭乱，适当的动态效果可起到画龙点睛的作用。 4、在本地搭建网站效劳器平台安装以windowsXP为例1将windows XP 系统安装光盘插入到驱动器里。2选择开始菜单上的设置-控制面板命令，翻开控制面板，双击添加或删除程序，翻开3在左侧列表中选择添加/删除windows组建4)选中【internet信息效劳IIS】5单击下一步，安装完成后就会出现【windows组件向导】安装结束对话框一般默认IIS会被安装在C盘，集中一个wwwroot文件夹就是浏览访问的默认目录 6翻开IIS，如图。创立

9、一个新的web站点 从图中可以看到新建，选择新建|虚拟目录，这是就会出现虚拟目录创立向导的对话框。按照对话框的提示逐步进行下一步的操作。其中虚拟目录别名就是新建的站点名称，网站内容目录就是输入虚拟目录的真实位置即个人网站的所有网站文件。7设置站点属性 因为是选择本地计算机作为web效劳器，所以可以在URL前缀的文本框中输入二、个人网页的制作1、 用Photoshop完成网页设计 1页面内容翔实网络是虚拟的，而网站往往表达的是现实世界中的一个实体，不管是企业或个人。极富特色、内容翔实、浏览顺畅、效果独特的网页才会使人驻足观看。2视觉效果新颖网页形象要不落俗套，把内容的独特的元素，如名称、标志、标

10、准字体、标准色等等。通过这些元素的合理应用，来实现网站形象与个性的塑造提高视觉效果。3栏目布局明确 页面合理流畅、环环相扣、可信平安，这几点是一个优秀网站的精神所在，也是吸引力的来源。所以在建网站时应把网站内容的层次性和空间性突出显示出来，使人一眼就能看出网站重点突出，结构清楚。4特殊字体慎用 在photoshop中虽然可以使用任意字体，但是当页面上传至网络空间中，文字是非图片形式可编辑的时候，谁也不能预测访问者在他们的计算机上将看到什么。所以为了防止所选择的字体在访问者的计算机上不能显示，特殊字体须谨慎使用。2. Dreamweaver完成网页制作 站点2.1 创立站点要制作一个网站，第一步

11、操作都是一样的，就是要创造一个“站点，这样可以使整个网站的脉络结构清晰地展现在面前，防止了以后再进行纷杂的管理。从菜单中选择“站点/管理站点在弹出的对话框中选择“新建，之后再选择其中的“站点，再次弹出一个对话框，在文本框中输入自己已经想好的网站名称“myself。填好后，单击“下一步，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用效劳器技术。单击“下一步，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到效劳器。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点文件的本地副本。单击该文本

12、框后面的文件夹图标，新建并指定一个空的文件夹如“E:/website。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程效劳器，弹出式菜单中有6种选择，这里选择“无。而后“下一步再“完成，即可。2.2 创立站点内容站点创立完成后，就可以创立Web页来填充站点了。在“右侧浮动面板组中选择“文件/文件面板，此时整个网站中没有任何内容。用鼠标右击面板中的本地根目录文件夹。在弹出的菜单中选择“新建文件，新建一个文件后将其命名为“index.htm(或index.html),它就是未来的首页。由于“myself网站并不是只有一个栏目，所以继续用鼠标右击右侧，在弹出的菜单中选择第二项“New

13、Folder(新建文件夹)。执行N操作，新建N个文件夹，并把它们重命名为网站其他栏目的名称，存放它们各自的内容。之后再次新建1个文件夹，命名为images,用来存放“所有的图象文件的内容。之后在个栏目的文件夹里还要建立想相应的栏目网页。 首页设置首页布局每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，至于网站上其他Web页，原那么上都必须通过首页来连接散播出去，可见首页是多么的重要。首页是翻开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.

14、htm等，目前主要以index.htm的居多。当然，后缀名为html也是正确的。设置首页的页面属性首先双击“文件浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性，之后弹出“页面属性对话框，假设选择主菜单“修改/页面属性项，也可以把翻开该对话框。在“页面属性对话框中，左侧窗口显示“分类，其中包括了“外观、“链接、“标题、“标题/编码、“跟踪图像5项，右侧区域那么显示各类中可以设置的工程。查看和编辑头内容一个网页文件结构上实际是由两局部组成，头(head)内容和主体(body)内容主体内容(body)是文档的主要局部，也是包含文本和图像等的可见局部。头内

15、容(head)是除文档标题外的不可见局部，包含有文档类型、语言编码、搜索引擎的关键的关键字和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键字。下面就以首页为例，说明怎样插入较常用的头( head)内容。单击“菜单拦下面“插入快捷的下拉列表，选择其中的HTML类，此时右侧将会显示该类中可以插入的对象快捷按钮，再次单击第2个按钮“文件头旁边的下拉箭头，会弹出菜单，该项列出的便是即将插入的头内容。插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。下面就来详细介绍对网页图像

16、进行处理的操作步骤，以使得它们在保持图形美丽与网站风格搭配的根底上，图片文件能够变的更小。首先将光标停留在要插入图像的位置，然后单击“菜单栏下面“插入快健栏的下拉表，选择其中的“常用类，那么右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像按钮，单击它右侧的下拉列表，选择第1项“图像。随即弹出“选择图像源文件对话框。从计算机磁盘中选择想要插入的图像文件，或在URL编辑框中输入图像的路径和名称。下面的“相对于下拉表框中，可选择文件URL地址的类型，如果选择“文档选项，表示图像地址相对于当前文档;如果选择“站点根目录选项，表示地址相对于根目录。最后单击“确定按钮，即可完成插入图像

17、的操作。插入文本文字是人类语言最根本的表达方式，在网页中，文本内容也可以说是重要的组成局部，一个网站成功与否，它是最关键的因素。在这最关键的因素。可丰富网站的文字内容，并以最最美观、最整齐的方式放入到网页中。2.2.2创立其它网页还有其它的几个网站与主页的制作相同，一个网页是图象和文字的组合。 建立网页链接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢?这就是网页的“链接。“链接，又称“超链接(Hyperlink),它作为网页的桥梁，起着相当重要的作用。网页中的很多对象都可以参加“链接属性。在Dreamweaver中，如果以“链接的媒介来划分的话，那么“链接可以分为“文字链接、“图像

18、链接、“图像地图链接、“内部链接和外部链接、“E-mail链接、“命名锚记链接、“文件下载链接和“跳转菜单，共8种。文字链接“文字链接即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护的特点。图像链接“图像也是常被使用的链接媒体，它和“文字链接非常相似。为图像参加链接，首先应该在网页中插入“图像，有关插入“图像或“导航条按钮的内容。E Mail的链接E-Mail链接，是指当浏览者单击该链接之后，不是翻开一个网页文件，而是启动用户的E- Mail客户端软件(如Outlook Express),并翻开一个空白的新邮件，供浏览者撰写内容来与网站联系人联系，这是一

19、种最方便的互动方式。建立E-Mail链接的步骤如下所述:操作步骤步骤1 将光标停留在页面右下角要插入E-mail链接的位置。步骤2 选择“插入快捷栏中的“常用分类，单击左侧第2个“电子邮件链接按钮。步骤3 在弹出的“电子邮件链接对话框中有两个输入项，分别是“文本和“E-Mail 。在“文本项中输入链接的文字，中文、英文均可，在E-Mail项中输入网站联系人的电子邮件地址步骤4 单击“确定按钮，具有“E-Mail链接属性的文本就插入到光标所在位置了，按下 Ctrl+S保存网页，再按下F12预览查看实际效果。上面的方法只适用于文本的“E-Mail链接，如果想在其它的对象(如图像)上也参加这种链接，

20、该怎办呢?下面介绍第2种建立“E-Mail链接的方法。其实很简单，与前面讲过的图像参加链接的方法根本一样。先在页面中需要的地方插入图像，之后选中图像，并在“属性面板的“链接文本框中输入如下语句即可-mailto:moumoumou邮箱。与第1种方法不同的是，E-Mail 地址前面增加了mailto:字样。用这种方法就可以给图像等其他对象建立“E-Mail链接了。3、制作时应考前须知预览时看不到图片 有时图片在编辑状态下是好的，而在预览时或在网页发布后无法显示，究其原因，一个方面可能是路径问题，另一方面可能就是因为图片用的是中文文件名而招来的麻烦。如果是路径的问题，可能是图片不在站点内，这就需要

21、把图片存人相应的文件夹中，然后改变图片的路径就可以了。如果图片是在站点内，在预览时仍看不见图片，那么往往是使用了中文的文件名、目录名或文件名。解决的方法是把中文名字改为英文字母、数字和下划线等符号组合成文件名或目录。不要忽略页面属性的设置设置左边界、顶部边界、边界宽度和边界高度。细心的用户会发现在没有进行设置前浏览时页面会在上下、左右，各留一片空白，这块区域用户不能利用，白白浪费了，为了节省网页中的珍贵空间，建议把这四个选项都设置为0。适当变化网页中的字体网页中的字体字号、字距、行距和文字颜色可作些适当变化，以求最美的视觉效果。需要突出的地方可以用不同的字体、字号和不同的颜色表示。字体最好采用

22、系统自带的字体，因为字体的显示效果是由浏览者的浏览器来决定的。许多漂亮的文字，浏览器可能并不支持，可以把文字做成图片的方式来处理，不过这种方法不适合在大段的文字上采用。恰当的运用css样式表会使文字处理到达事半功倍的效果。但每一页中的字体要限制在4种以内，过多的字体反而显得杂乱无序。三、网站的上传，检查一下页面是否还存在什么问题，尤其是链接这一部门。假设页面没有问题后，就可以将其上传至申请的效劳器了。 个人网站一般采用软件进行上传文件、更新文件和维护网站。FTP客户机可以向效劳器发出各种命令，包括下载文件、上传文件、创立或改变效劳器上的目录。总结在互联网走进我们的生活之前，没有人敢梦想拥有自己

23、的报纸、杂志、电台、电视台。现在不同了，互联网给我们提供了一个“表达自我的自由天地,你可以拥有自己的新闻邮件，你可以建立自己的个人网站。只要你办得成功也可以吸引成千上万的订户、读者,并建立自己在众多参与者中的权威地位。建立个人网站的根本过程可以分为以下七个环节 :1 了解中国网络个人主页研究背景与开展现状2 系统需求分析与总体设计3 熟悉网站开发模式、工具及环境4把自己的作品和想要展示的内容制作成网页。5 使用动态网页技术，实现动态内容更新。6 认真地选取测试用例，进行交叉测试7 网站的后期完善、宣传及开展方向其中，网页制作和使用动态网页技术实现动态内容更新是网站开发的核心内容。通过这次的学习过程，让我稳固了以前所学的知识。同时，也让我看到自己的欠缺之处，如对使用动态网页技术，实现动态内容更新。在这块是我学习缺乏的地方，也是我以后重点学习的地方。致 谢本设计能够顺利的完成，应归功于各位任课老师的认真负责，使我能够很好的掌握和运用专业知识，并在设计中得以表达。在此向北京科技大学远程教育学院，北京ITET培训中心的的全体老师表示由衷的谢意，感谢他们两年来对我的的辛勤栽培与指导。