个人网站设计

个人网站设计第一章第二章第三章前言1．1网站的发展21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1．4 使用软件Dream weaver MX 2004软件由美国著名的网站应用开发工具生产厂商Adobe Macromedia于最新推出并正式投入市场以来，已经发展得相当成熟。

关于Dream weaver MX 2004的技术介绍的相关书籍与网络信息相当丰富。

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

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

1．5 软件运行环境Dream weaver MX 2004是一款简体中文软件，可以在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．2 CSS样式表2.2.1 创建CSS样式表CSS是CascadingStyleSheets（层叠样式表）的缩写。

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

创建CSS样式表步骤如下：步骤1 创建一个新的HTML页面，将其命名为“网站分布1”保存。

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

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

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

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

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

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

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

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

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

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

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

2.2.2 CSS样式表的分类CSS按其位置可以分成三种：内嵌样式(Inline Style)；内部样式表(Internal Style Sheet)；外部样式表(External Style Sheet)三种。