个人网站设计.docx

《个人网站设计.docx》由会员分享，可在线阅读，更多相关《个人网站设计.docx（14页珍藏版）》请在冰点文库上搜索。

个人网站设计

个人网站设计

第一章

第二章

第三章前言

1．1网站的发展

21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。

掌握计算机是职业的需要，更是事业发展的需要。

互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。

网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。

网页设计与制作是计算机能力的具体表现，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。

企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。

在目前国内对此领域研究甚少的情况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。

认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。

在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功都是为了更好地表达网站主题这一观点。

网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，随着网络技术的发展而发展。

表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。

1．2设计概述

随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。

为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等，直到CSS出现。

CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。

1．3个人网站的需求

一个完整的网页是建立在各种各样的需求上面的，这种需求往往来自于个人的实际需求或者是出于自身发展的需要，其中个人的实际需求也就是说这种发展性质的需求占了绝大部分。

面对网页设计拥有不同知识层面的客户，设计的个人对用户需求的理解程度，在很大程度上决定了此类网页规划的成败。

因此如何更好地的了解、分析、明确个人的需求，并且能够准确、清晰以文档的形式表达给需要的人，保证以需求为目的个人方向进行，是每个网页规划和网页制作管理者需要面对的问题。

1．4使用软件

DreamweaverMX2004软件由美国著名的网站应用开发工具生产厂商AdobeMacromedia于最新推出并正式投入市场以来，已经发展得相当成熟。

关于DreamweaverMX2004的技术介绍的相关书籍与网络信息相当丰富。

通过大学中软件开发环境课程的学习，对DreamweaverMX2004有了比较深刻的认识，并比较轻松的掌握了DreamweaverMX2004的操作。

因此，软件技术可以完成个人的要求。

1．5软件运行环境

DreamweaverMX2004是一款简体中文软件，可以在Win2003/WinXP/Win2000/Win9X中安全运行，换句话说，它可以在任何家用微机中运行。

第四章网站的建设

2．1网站的基础知识

2.1.1制作网页的步骤

再做网页之前，我上网浏览了做网页的五个步骤。

一、确定网页主题：

网页主题就是你创建网页所要包含的主要内容，一个网页必须要有一个明确的主题。

二、搜集材料：

明确了网页的主题以后，你就要围绕主题开始搜集材料了。

材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网页：

一个网页设计得成功与否，很大程度上决定于设计者的规划水平，规划网页就像设计师设计一样，图纸设计好了，才能建成一座漂亮的楼房。

网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。

也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

四、选择合适的制作工具：

尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

五、制作网页：

材料有了，工具也选好了，下面就需要按照规划一步一步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单再复杂来进行制作。

所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。

所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。

在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

2.1.2网站建设流程

1．定义合适的域名。

由域名构成的网址会像商标一样，有助于将来塑造网上的形象。

域名除了要符合个人的性质以及信息内容的特征外，还要具有简洁、易记、具有冲击力的特点。

2．租用虚拟服务器。

有了域名后，就需要一个空间存放网站，这个空间就是Internet上的服务器。

一般虚拟主机提供商都能向用户提供大容量、高速度的服务器，用户可根据网站的内容设置及其发展前景来选择。

3．设计网页。

网页的设计制作可以自己完成，也可以通过虚拟主机提供商或专业的网页设计制作商来完成。

设计网页前要收集所有需要放在网站上的文本资料、图片等，并尽量用文字详细说明制作的框架结构，将收集的材料提供给网页设计者。

4．ICP备案。

网站备案的目的就是为了防止在网上从事非法的网站经营活动，打击不良互联网信息的传播，如果网站不备案的话，很有可能被查处以后关停。

ICP备案可以自主通过官方备案网站在线备案或者通过当地电信部门两种方式来进行备案。

2.1.3网页制作要素

1、网页的整体布局设计

　网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。

版式设计通过文字图形的空间组合，表达出和谐与美。

一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。

尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。

2、网页设计中色彩的运用

色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。

根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，因为我们这里做的是食品中特产的专卖网，为了体现环保的原则，所以我们采用绿色为主调。

色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等，绿色象征健康、环保这类。

所以如果我们在对一家出售食品的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。

另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的网站进行网页设计时，更应该按照其中的颜色进行色彩运用。

在色彩的运用过程中，还应注意的一个问题是：

由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。

如：

儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。

在设计中要考虑众多因素。

3、网页形式与内容相统一

　　要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。

运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。

点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。

网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

图2-1-1爱书网的子页，自然

2．2CSS样式表

2.2.1创建CSS样式表

CSS是CascadingStyleSheets（层叠样式表）的缩写。

它的作用是定义网页的外观，用到网页中相应的元素上，能够有效的提高用户设计网页和开发站点的效率。

创建CSS样式表步骤如下：

步骤1创建一个新的HTML页面，将其命名为“网站分布1”保存。

在页面中输入待排版的文本，排版前的效果。

步骤2为标题创建相应的CSS样式表。

选择［文本］菜单栏的［CSS样式表］中的［新建］命令，弹出［新建CSS规则］对话框。

步骤3弹出［.book的CSS规则定义］对话框，在［类型］选项中设定相关的文字属性。

步骤4在［分类］选项组中选择［区块］，［文本对齐］属性设置为“居中”，单击［确定］按钮，完成了用于标题的.bookCSS类的创建。

步骤5为分类网页名称创建相应的CSS样式表。

选择［文本］菜单栏的［CSS样式表］中的［新建］命令，弹出［新建CSS规则］对话框。

步骤6弹出［.web的CSS规则定义］对话框，在［类型］选项中设定相关的文字属性。

步骤7选中标题“网站分布”，在该文字［属性］面板中选定［样式］为“book”，则定义的.book的CSS规则就被用于该标题。

步骤8选中网站分布名称，在该文字［属性］面板中选定［样式］为“web”，则定义的.web的CSS规则就被用于该段文字。

步骤9单击F12，在浏览器中预览效果。

2.2.2CSS样式表的分类

CSS按其位置可以分成三种：

内嵌样式（InlineStyle）；内部样式表（InternalStyleSheet）；外部样式表（ExternalStyleSheet）三种。

①内嵌样式（InlineStyle）：

InlineStyle是写在Tag里面的。

内嵌样式只对所在的Tag有效;例如：

20pt;color:

red">这个Style定义里面的文字是20pt字体，字体颜色是红色。

②内部样式表（InternalStyleSheet）：

内部样式表是写在HTML的里面的。

内部样式表只对所在的网页有效。

例如：

H1.mylayout{border-width:

1;border:

solid;text-align:

center;color:

red}这个标题使用了Style。

这个标题没有使用Style。

③外部样式表（ExternalStyleSheet）：

如果很多网页需要用到同样的样式（Styles），就可以用这种方法。

首先将样式（Styles）写在一个以CSS为后缀的CSS文件里，然后在每个需要用到这些样式（Styles）的网页里引用这个CSS文件。

使用外部（External）样式表，相对于内嵌（Inline）和内部式（Internal）的，有以下优点：

样式代码可以复用。

一个外部CSS文件，可以被很多网页共用，便于修改。

如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。

提高网页显示的速度。

如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区（其它网页早已经引用过它），网页显示的速度就比较快。

2．3网站制作

2.3.1网站步骤

网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。

网页设计包含的内容非常多，大体分为两个方面：

一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。

1.草稿新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。

这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。

2.粗略布局在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。

3.定稿定稿即将粗略布局精细化、具体化，完成整个页面的设计。

页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。

2.3.2主页的要求

对于销售业务页面要求运行的工作环境稳定，易于操作，界面美观大方，对于前台展示界面要求系统便于维护，安全可靠，对于广大客户所要执行的操作简单易懂，远程访问速度较快，界面友好美观，有基本的错误提醒功能，远程操作数据库正确，要求和客户有一定的互动性，在主页上直观的就可以查看浏览者所想要了解的东西。

下面是我自己根据自己所学习的内容，做出自己的爱书网的主页：

图2-3-1爱书网的主页，首页

2.3.3子页的要求

子页的工作就是子页的选择与链接，子页应该丰富多彩，内容充实，浏览性强，比如说，想要销售一辆汽车，应该有它的全部资料，包括外观、内饰、性能指标、出产地、价格等诸多方面，鉴于以上方面，我开始了子页的选择与链接各项工作。

下面是我做出的爱书网的子页：

图2-3-2爱书网的子页，留言版

图2-3-3爱书网的子页，小说网

图2-3-4爱书网的子页，童话网

图2-3-5爱书网的子页，诗歌

图2-3-6爱书网的子页，散文网

第五章总结

网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，它兼容了传统平面设计的特征，又具备其所没有的优势，成为今后信息交流的一个非常有影响的途径。

网页设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，当然也离不开一定的科学技术发展。

在本文中从网页的发展、制作流程、网站的制作步骤、CSS样式表的制作和网站的整体布局做了详细的说明。

在整个毕业设计过程中，谢娇艳指导教师给了我极大的帮助，并给予我悉心的关怀与指导和建议，在此表示衷心地感谢。

老师认真负责的工作态度、严谨的治学风格，使我深受启发。

在网站设计的同时，我的同学给了我很大帮助，我们之间相互讨论、互相帮助，在此我也表示衷心地感谢。

就我个人而言，通过这次毕业论文的制作，让我对网站制作有了很大改观，学到很多以往没有注意的细节。

另一方面也让我知道对网页制作还缺少很多的理论与实际操作知识，曾经只是做一些简单的个人主页，仅此而已。

对通过此次毕业设计，可以深入的学习，以提高自身的制作水平。

参考文献

【1】马希敏，张亚娟，洪光：

《静态网站建设》，大连理工大学出版社，2010。

【2】王超锋：

《网页制作》,人民邮电出版社，2001年10月。

【3】詹青龙，郭永灿：

《网页设计与制作》，清华大学出版社有限公司，2010。

【4】徐珂，苗彤，赵晖：

《网页视觉与设计（M）》，北京人民邮电出版社，2001。