个人站点毕业论文设计

《个人站点毕业论文设计》由会员分享，可在线阅读，更多相关《个人站点毕业论文设计（13页珍藏版）》请在装配图网上搜索。

1、2004毕业设计实习报告班级：_学号：_专业：_学生姓名：_指导教师：_目录第一章：诸论31.1设计思想31.2开发工具选用和开发工具的介绍4第二章：网站的总体设计分析6 2.1网站的系统分析6 2.2 资料的搜集工作7 2.3 主页的设计7 2.4 留言板9第三章：详细设计133.1 利用DreamweaverMX调整设计143.2部分网页效果截图153.3 留言板的设计163.4 设计代码18第四章：参考文献20 4.1 HTML常用代码22 4.2 CSS的简单介绍和使用23 4.3设计总结24 第一章 诸论随着网络技术的飞速发展，科学技术的日新月异，信息技术的不断蔓延，网络已经笼罩全球

2、、遍布全世界，广泛的应用到人类社会的各个领域。现在上网也成了现代人的一种时尚，对与21世纪的我来说，我也是很喜欢上网，所以我就喜欢上了网络这个不很现实的世界。其实在我刚刚接触网络的时候我就想能在这个虚幻的世界中建立一个自己的家，于是我也就有了做个个人站点的念头。1.1 本站设计思想一、 定位网站的主题和名称网站的主题也就是网站的题材，是网站设计首先要考虑的问题。作为我的毕业设计题目，它不仅代表了我在学校期间的所有所学知识，还夹杂了我的个人爱好，由于我个人比较喜欢网络，故我的站点名称定为：网络城堡 1、主题要小而精定位要小，内容要精。网络在计算机里说包括的领域较多，故此网站建设题材也较多，这就需

3、要我们将题材化小，只有小了才能做到精，否则会给人包罗万象却没有主题的的感觉，即样样有，却样样都很肤浅。同时我个人也不可能有那么多的精力去维护它。网站的最大特点就是新和快，一个网站更新越快那么它的优势发挥的越好，这就需要寻找维护网站的捷径竭力做到主题小而精。调查结果显示，“小主题网站”比“大概括网站”更受人们的欢迎。不过值得注意的是主题小并不是内容少，他涉及的各个方面的信息要全。2、多题材时最好将题材分类定位清晰明了的题材定位是制作网站的捷径，没有规划，很难设计制作出优秀的网站。对于题材的定位，其实，在我本人来说，在制作之中是很难的在网络这个大的是世界中，题材实在是太多，而且能使我喜欢的东西也太

4、多，但最后我还是选择的一个题材作为我的站点素材。3、题材要“滥”中求“新”。滥是指到处可见，人人都有的题材，比如国家的政策法规，公众的教育信息等会发布到全国的各个学校，同时会要求宣传给每一位同学，这就需要我们认真考虑如何将滥题材中新形象挖掘出来，展示给网站的访问者，引起他们的访问兴趣。网站题材初步确定以后，就可以围绕题材给网站起一个名字。网站名称，也是网站设计的一部分，而且是很关键的一部分。网站名称是否正气，响亮，易记，清晰明了对网站的形象的宣传和推广有很大影响，网站名字的优劣直接决定着网站是否容易被别人所接受。作为一个好的站点名称应改具有以下的条件: 1）名称要正 其实就是要合法，和理，和情

5、。不能用反动的，色情的，迷信的，危害社会安全的名词语句。 2）名称要易记最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字（最好四个字）以内，四个字的也可以用成语。字数少还有个好处，适合于其他站点的链接排版。3）名称要有特色名称平实可以接受，如果再能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则会有意想不到的收获。例如：音乐前卫，网页陶吧，e书时空等。在体现出网站主题的同时，又展示了自己的独特。对与我的个人站点,和我的个人爱好,最终我的站点名称定为:网络城堡.二、设计网站的整体风格风格(style)是抽象的，是指站点的整体形象给浏览者的综合感受。其中

6、整体形象包括站点的CI(标志，色彩，字体，标语)，版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的，这些都是网站给人们留下的不同感受。独特的风格，是一个网站不同与其他网站的地方。或者色彩，或者技术，或者是交互方式等，要能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络的黑白色,网易壁纸站的特有框架,即使你只看到其中一页，也可以分辨出是哪个网站的。风格是人性化的。通过网站的外表，内容，文字，交流等便可以展示出该网站的个性和情绪。在此我们可以用人的性格来比喻站点，一个网站有风格而没有内容，

7、就好比一个性格傲慢但却目不识丁的人。所以我的站点在保持风格的同时还要保持它的内容的丰富，但由于我个人的能力有限但最好还的在内容上有些缺乏。1.2 开发工具的选用及介绍设计一个好的网站决非易事，它涉及到众多领域的知识，体现了设计者的基本素质和综合能力-计算机知识；媒体美学；感染艺术；网络知识；宣传技巧；音乐的魅力（如果网页需要音乐的话）；创意；美术、色彩。 实践证明，要设计出一个好的网站，我们必须对HTML语言有一定的了解，它是一种超文本描述性语言，其编写方式同一般的文本文件一样，故在EDIT、WPS、Windows Notepad等相似性质的文字编辑器中即可进行。 要了解HTML的详细内容，还

8、可以具体搜索“HTML教程”关键字。建设网站FrontPage是一个不错的选择，但在效率至上的今天让我们最不能忍受的是它有着乌龟速度。相比之下Dreamweaver便成了网站建设的首选工具，这次的站点制作也主要采用它来完成，同时辅以Adobe Photoshop、Flash MX和ASP.在此我向大家简单的把这些软件给大家介绍一下:工具一：PhotoShop 6.0和Flash MX图象处理软件使用 Adobe Photoshop 和 Flash MX 设计 Web 页 Photoshop 提供创建和处理用于 Web 的静态图像的工具。可以切割图像、添加链接和 HTML 文本、优化切片并将图像

9、存储为 Web 页。 Flash MX 提供许多类似Photoshop的图形编辑工具的同时还提供了大量的动画制作面板,用于创建高级动态 Web 图像如动画、翻转效果和文字特效等。PhotoShop是业界图形处理的老大，功能非常的强大，可以制作出很多特殊的效果，利用它设计网页最适合不过了。Flash MX也是网页动画制作的有力工具，它可以制作出绝对漂亮的动画，使用它来优化网页也就成了我们最好的选择。工具二：Dreamweaver MX网页制作软件Dreamweaver功能强大，界面友好，加上与另外两位兄弟工具Flash与Fireworks的紧密合作，实在是制作网站的首选。但是Dreamweave

10、r一直定位于专业网页设计软件，对初学者的考虑似乎不是十分周到，如果没有一些基本的网页设计知识，确实很难一下弄清楚那么多复杂的功能，尤其是当我们只是想制作一个简单的网站而不想深究其中知识的时候，Dreamweaver就不是那么让人得心应手了。现在随着互联网的蓬勃发展，越来越多的人开始制作网站，为了适应新形式的需要，占领更多的市场份额，Macromedia公司在Dreamweaver MX版本中对软件功能进行重大调整，尤其是针对新手提供了强大的网站模板功能，有了它，即使我们几乎没有什么网页的专业知识，也可以迅速的建立具有专业水准的页面布局并快速设计网页。工具三：ASP(Active Server

11、Pages)ASP的优势：Active Server Pages：“动态服务器网页”，一般简称为“ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或 JavaScript是在客户端（Client）的浏览器上执行，比如：使用VBScript来设计程序，客户端（Client）在浏览器中可以显示程序执行的结果，可是，客户端（Client）若使用Netscape浏览器

12、就无法显示VBScript的执行结果。ASP的特点：任何开发工具皆可发展ASP只要使用一般的文书编辑程序，如Windows记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPage Express、FrontPage等也都可以；不过还是建议使用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写ASP，可能会发生一些意想不到的离奇状态。通吃各家浏览由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于各种不同的浏览器。语言相容性高ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java Script、Active

13、 X服务器组件来设计外，并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（Third Party）所提供的语言。隐密安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到HTML文件，原始的ASP程序代码是看不到的！这是由于ASP程序先于网站服务（Web Server）端执行后，将结果转换成标准HTML文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的ASP程序并不会轻易地被看见进而被盗用。易于操控数据库ASP可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Access、Foxpro、dBa

14、se、Oracle等等，另外，ASP亦可将“文本文件”或是“Excel” 文件当成数据库用。面向对象学习容易ASP具备有面向对象（Object-Oriented）功能，学习容易，ASP提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用ASP内建的“Application”对象或”Session”对象所撰写出来的ASP程序可以在多个网页之间暂时保存必要的信息。ASP的六大内部对象对象名称 功能描述Request、Response、Server、Session、Application、ObjectContext 从

15、客户端取得信息将信息送给客户端提供一些Web服务器工具储存在一个Session内的用户信息，该信息仅可被该用户访问在一个ASP-Application中让不同的客户端共享信息可以用来配合Microsoft Transaction 服务器进行分布式事务处理作为一个好的校园网站客观条件要求无非上述几点，所以我选择了PhotoShop结合Dreamweaver、 ASP构建我院学生处网站。第二章 网站总体分析与设计2.1 网站的系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从个人爱好和网络素材的准备,站点可主要分以下的几方面:1、 网络介绍2、 网络安全3、 网络驾校4、

16、 免费资源5、 网络病毒 6、网络词典 7、个人作品8、给我留言2.2 资料的搜集工作互连网覆盖范围越来越大，发展越来越迅速正是因为他有丰富的资源。我在网站建设中确定好主题之后，就要搜集和主题相关的资料来丰富网站了。其中网站的资料搜集主要有以下两个途径：1、网络搜集:本站点中的主要的内容主要是通过网络的搜索而来的本站点中的,例如站点中的网络知识,网络病毒都是通过网络搜索来的.2、电脑报的利用:站点中的免费资源主要是我平时通过电脑报所累计起来的,正好在此的制作中发挥了作用.3、个人的制作:我的个人作品都是我的个人作品,还有就 是站点中的图片和背景的制作都是本人的制作.2.3主页设计一、定位网站的

17、CI形象 所谓CI(corporate identity)，意思是通过视觉来统一企业的形象。一个杰出的网站，和实体公司一样，需要整体的形象包装和设计。准确的，有创意的CI设计，对网站的宣传推广有事半功倍的效果。网站的CI形象设计具体包含以下几个方面：1、设计网站的标志(logo)网站的标志就如同商标一样，是网站特色和内涵的集中体现，是站点文化的浓缩，成功的网站标志有看见标志就让大家联想起站点的功效。而标志的设计创意来自网站的名称和内容.本站的站标:2、设计网站的标准色彩色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢产生的一种感觉。而网站给人的第一印象来自视觉冲击，确定网站的标准色彩是

18、相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。3、设计网站的标准字体和标准色彩设计一样，设计网站字体也是网页内涵的一种表现，合适的字体会让人感觉到美观、亲切，会让人心里感觉舒适。所谓标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。有时为了体现站点的与众不同和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用加粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。本站的标准字体是宋体9号字。4、设计网站基本框架网站的基本结构很重要,一个站点的基本框架也就是站点的外表,它就好比是人的外表,本站点的基本框架其实很简

19、单的,就也是个表格的综合利用,它是有两个图片和一个表格背景组成的.也就是一个标准的结构.5、网站特殊效果站点中的特殊效果就好比是一个站点中的美化,在站点中利用一定的特殊效果可以给你的站点增添无限锦绣.例如本站点中用到了几个java小程序.例如在站点中利用到调用本地计算机时间和收藏本站点和滚屏的效果,给本站增添了不少风采.2.5 留言板的设计在一个好的站点中，一个留言板做为浏览者和设计者是桥梁，它是必不可少的一个栏目之一。留言板，它的好坏也关系着站点好坏，一个好的留言板应当具有一定的功能：注册帐号，登陆界面，签写留言，斑竹修改等是必须具备的。对于其它的功能一般可有可无，在这里有个人的能力有限，有

20、很多的不足之处，还忘读者能多多的提出建议。留言板的设计，做为一个好的站点，留言板一般都会给读者一个好的界面，一个和谐、温馨的界面。第三章：详细设计3.1 利用DreamweaverMX调整设计3.2部分网页效果截图3.3 留言板的设计3.4 设计代码第四章：参考文献4.1 HTML常用代码全写： HyperText Mark-up Language 译名： 超文件注标式语言（译名之一） 简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。 HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML

21、不是程式语言，如 C+ 和 Java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然 以专业的网页编辑软件为佳。 阅读须知： 这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 W3C 的 HTML 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其 余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了 HTML ，任何网页 编辑工具都可以变成一把利器。 标记写法： 任何标记皆

22、由所围住，如 标记名与小于号之间不能留有空白字符。 某些标记要加上参数，某些则不必。如 Hello 参数只可加于起始标记中。 在起始标记之标记名前加上符号/便是其终结标记，如 标记字母大小写皆可。 围堵标记与空标记： 标记按型态分为围堵标记与空标记 围堵标记 顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。 例如 HTML Source ： Creation of Webpage is my favourite. 显示成： Creation of Webpage is my favourite. 其中 便称为围堵标记。 它以起始标记及终结标记标示文字 Creation of

23、webpage ，令它显示成粗体，两者失其一都会发生错误显示。 空标记 是指标记单独出现，只有起始标记没有终结标记。 例如 HTML Source： I love Creation of Webpage.Its a wonderful place. 显示成： I love Creation of Webpage. Its a wonderful place. 其中换行标记便属空标记。 它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的， 但有些人会为空标记加上终结标记，这是为方便记认而己，对 HTML 没有影响。 4.2 CSS的简单介绍和使用CSS 样式，全称是级联样式表，

24、即：Cascading Style Sheets(层叠样式表)，是用来进行网页风格设计的。它不仅可控制单个文档中的文本格式，还可控制多个文档的文本格式，当CSS样式更新时，所有使用CSS样式的文档自动更新。1.Type类型面板：font,通常为宋体；Size,通常为9号字；line(行高)；color(颜色)；Decoration(装饰线)，含underline(下划线),overline（上划线）,line-through（删除线）,blink（闪烁）；style 中包括Italic(斜体),Oblique(粗体),Weight(粗细),Case(大小写),Captalizes(首字母大小写

25、).2.Background(背景)面板:background color/Image Repeat:当背景图象不足以填满页面时,决定是否和如何重复. Attachment(附着):最初位置还是同内容一起滚动. Horizontal Position Vertial Position: 指订背景图象相对于文档窗口而不是相 对于元素.3.Block（文本块）：含有Word Spacing(字间距),letter Spacing(字母间距),text Align(文本对齐),Text Indent(文本缩进),Whitespace(白色空格)。4.Box(框):Windth和Height:只有应用

26、于图象和层时，才会显示该属性。 Float(浮动)：移动元素（页面不动）将其放在页面边缘的左侧或右侧其他环绕元素保持正常。只有应用于IMG标签时，窗口才显示。Clear:定义元素的哪一边不允许有层。Padding(填充)：定义元素内容和边框（无边框为边缘）和元素之间的大小。Margin(边缘)：定义元素边框和其它元素之间的空间大小。5.Border(边框)：包含Width,Top,Right,Bottom,Left,Thin,Medium(中等)，Thick,Auto,Value等选项6.List（列表框）：文档窗口不显示该属性Type：决定项目符号或编号的外观。 Bullet（项目符号图象）

27、Position：列表换行时是缩进还是边缘对齐。7.Position(定位)： Type 决定浏览器定位层的方式；Absolute对于页面做上角的坐标放置层； Visbility(可见性)，Inherit（继承），Visible（可见），Hidder（隐藏）；Z-Index（Z索引）；Overfolw：决定层的内容超出其大小时的处理方式；Placement（位置）8.Extensions（扩展）：Page break（换页）：由打印到样式所控制的对象时强行换页。Cursor（光标）：Internet Explorer 4支持。Filter（滤镜）：4.0以上的版本支持。CSS选择器：Activ

28、e,选中超级链接时的状态；Hover,光标移上超级链接的状态；Link:超级链接的正常状态，没有任何动作；Visited,访问过的超级链接的状态。4.3设计总结在这次的毕业设计中，我首先感谢我的指导老师的精心指导。我的实习题目是一个网站的制作。在这次的实习中，本来我是想做个数据库查询什么的站点，但我看大家做的大多数都是那个东西，由于我本人对网络比较爱好，所以 我就做了个网络知识方面的个人站点，在制作中，我发现到很多的问题，有很多的知识我都是掌握的不牢固，所以制作的工程就进行的很是缓慢，在实习中使我更好的学习了dream的使用，以及asp和数据库的简单使用。在实习中使我学习最多的就是dream中的css的使用以及图层和表格的巧妙使用。再一个就是，在站点制作中，本来是没有网络病毒这个栏目，那个我在制作中，发现学校机房的病毒真的是太多，而我的站点也曾多次的被感染病毒，所以就做了个网络病毒这个栏目，以便大家对那些病毒有真多的了解和保护自己的文件。13