个人网站设计.doc

《个人网站设计.doc》由会员分享，可在线阅读，更多相关《个人网站设计.doc（17页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、目录摘要2第一章前言311网站发展312设计概述413个人网站需求414 使用软件415 软件运行环境5第二章网站建设621网站基础知识62.1.1 制作网页步骤62.1.2 网站建设流程72.1.3 网页制作要素722 CSS样式表92.2.1 创建CSS样式表92.2.2 CSS样式表分类1023 网站制作112.3.1 网站步骤112.3.2 主页要求122.3.3 子页要求13第三章总结16参考文献17摘要本论文将对个人网页设计及制作方法、工具等展开研究与探讨。在介绍网页设计及制作语言基础上，着重对中文版Dream weaver MX 2004、Fireworks MX 2004、Fl

2、ash MX 2004新增功能、使用方法及操作技巧进行介绍。按照由浅入深，循序渐进方式进行，从简单网页设计制作开始，到网站建设中所需网站建设及管理技术、图像处理技术、动画制作技术等都进行理论联系实际介绍。在网页设计中包含着主观与客观两方面因素，在确立了网页主题之后，首先要明确与熟悉设计对象与构成要素。网页设计涉及具体内容很多，可以概括为视听元素与版式设计两个方面。在制作网站方面将进行详细讲解，对工具使用，语言组合，CSS样式表使用进行全面探讨，并利用具体实例进行验证。本设计将以详实内容，清新格调，繁简适中阐述，实用操作方法与技巧，讲解本人对个人网站设计看法。关键词：网站建设 CSS样式表 流程

3、 步骤第一章 前言11网站发展21世纪到来，人们更深切地感受到计算机在生活与工作中作用越来越重要，越来越来职业需要具有计算机应用技能。掌握计算机是职业需要，更是事业发展需要。互联网成为人们快速获取、发布与传递信息重要渠道，它在人们政治、经济、生活等各个方面发挥着重要作用。网页设计伴随着网络快速发展而快速兴起，作为上网主要依托，由于人们使用网络频繁而变得非常重要。网页讲究是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供信息。网页设计及制作是计算机能力具体表现，许多人不再仅仅局限于网上冲浪，而是参及到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你企

4、业，展示你实力，推销你产品，网页制作作为网站制作中一个重要环节，相对于传统平面设计而言，网页设计具有更多新颖性，更多可以表现手法。在目前国内对此领域研究甚少情况下，将网页艺术设计及其他艺术设计形式进行比较，尝试从网页艺术设计内容、原则与特点等三个方面，对这个新艺术设计领域进行初步归纳总结与理论探讨。认为网页艺术设计是艺术及技术高度统一，指出网页艺术设计包含视听元素及版式设计两项内容；以主题鲜明、形式及内容相统一、强调整体为设计原则；具有交互性及持续性、多维性、综合性、版式不可控性、艺术及技术结合紧密性等五个特点。在明确了网页艺术设计及网站主题关系基础上，提出了“美”与“功都是为了更好地表达网站

5、主题这一观点。网页艺术设计是伴随着计算机互联网络产生而形成视听设计新课题，是网页设计者以所处时代所能获取技术与艺术经验为基础，依照设计目与要求自觉地对网页构成元素进行艺术规划创造性思维活动，必然要成为设计艺术重要组成部分，随着网络技术发展而发展。表面上看，它不过是关于网页版式编排技巧及方法，而实际上，它不仅是一种技能，更是艺术及技术高度统一。12设计概述 随着Internet迅猛发展，HTML被广泛应用，上网人们当然希望网页做得漂亮些，因此HTML排版与界面效果局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好方法，比如给HTML增加很多属性结果将代码变得很臃肿，将文本变成

6、图片，过多利用Table来排版，用空白图片表示白色空间等，直到CSS出现。CSS可算是网页设计一个突破，它解决了网页界面排版难题。13个人网站需求一个完整网页是建立在各种各样需求上面，这种需求往往来自于个人实际需求或者是出于自身发展需要，其中个人实际需求也就是说这种发展性质需求占了绝大部分。面对网页设计拥有不同知识层面客户，设计个人对用户需求理解程度，在很大程度上决定了此类网页规划成败。因此如何更好地了解、分析、明确个人需求，并且能够准确、清晰以文档形式表达给需要人，保证以需求为目个人方向进行，是每个网页规划与网页制作管理者需要面对问题。14 使用软件Dream weaver MX 2004软

7、件由美国著名网站应用开发工具生产厂商Adobe Macromedia于最新推出并正式投入市场以来，已经发展得相当成熟。关于Dream weaver MX 2004技术介绍相关书籍及网络信息相当丰富。通过大学中软件开发环境课程学习，对Dream weaver MX 2004有了比较深刻认识，并比较轻松掌握了Dream weaver MX 2004操作。因此，软件技术可以完成个人要求。15 软件运行环境Dream weaver MX 2004是一款简体中文软件，可以在Win2003/WinXP/Win2000/Win9X中安全运行，换句话说，它可以在任何家用微机中运行。第二章 网站建设21网站基础

8、知识 制作网页步骤再做网页之前，我上网浏览了做网页五个步骤。一、确定网页主题 ：网页主题就是你创建网页所要包含主要内容，一个网页必须要有一个明确主题。二、搜集材料 ：明确了网页主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集材料去粗取精，去伪存真，作为自己制作网页素材。三、规划网页 ：一个网页设计得成功及否，很大程度上决定于设计者规划水平，规划网页就像设计师设计一样，图纸设计好了，才能建成一座漂亮楼房。网页规划包含内容很多，如网页结构、栏目设置、网页风格、颜色搭配、版面布局、文字图片运用等，你只有在制作网页之前把这些方面都考虑

9、到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来网页才能有个性、有特色，具有吸引力。四、选择合适制作工具 ：尽管选择什么样工具并不会影响你设计网页好坏，但是一款功能强大、使用简单软件往往可以起到事半功倍效果。五、制作网页 ：材料有了，工具也选好了，下面就需要按照规划一步一步地把自己想法变成现实了，这是一个复杂而细致过程，一定要按照先大后小、先简单再复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大结构设计好，然后再逐步完善小结构设计。所谓先简单后复杂，就是先设计出简单内容，然后再设计复杂内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。 网站建设

10、流程1定义合适域名。由域名构成网址会像商标一样，有助于将来塑造网上形象。域名除了要符合个人性质以及信息内容特征外，还要具有简洁、易记、具有冲击力特点。2租用虚拟服务器。有了域名后，就需要一个空间存放网站，这个空间就是Internet上服务器。一般虚拟主机提供商都能向用户提供大容量、高速度服务器，用户可根据网站内容设置及其发展前景来选择。3设计网页。网页设计制作可以自己完成，也可以通过虚拟主机提供商或专业网页设计制作商来完成。设计网页前要收集所有需要放在网站上文本资料、图片等，并尽量用文字详细说明制作框架结构，将收集材料提供给网页设计者。4ICP备案。网站备案目就是为了防止在网上从事非法网站经营

11、活动，打击不良互联网信息传播，如果网站不备案话，很有可能被查处以后关停。ICP备案可以自主通过官方备案网站在线备案或者通过当地电信部门两种方式来进行备案。 网页制作要素1、网页整体布局设计 网页设计作为一种视觉语言，要讲究编排与布局，虽然主页设计不等同于平面设计，但它们有许多相近之处，应充分加以利用与借鉴。版式设计通过文字图形空间组合，表达出与谐及美。一个优秀网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面编排设计要求把页面之间有机联系反映出来，特别要处理好页面之间与页面内秩序及内容关系。尤其是我们在利用网页效果表达在线营销意图时，更要注意为了达到最佳视觉表现效

12、果，而讲究整体布局合理性，比如一家生产型企业，它所提供产品名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅视觉体验，从而方便他对产品了解，促成最后购买。2、网页设计中色彩运用 色彩是艺术表现要素之一，在网页设计中，根据与谐、均衡与重点突出原则，将不同色彩进行组合、搭配来构成美丽页面。根据色彩对人们心理影响，合理地加以运用，按照色彩记忆性原则，因为我们这里做是食品中特产专卖网，为了表达环保原则，所以我们采用绿色为主调。色彩还具有联想及象征特质，如红色象征血、太阳；蓝色象征大海、天空与水面等，绿色象征健康、环保这类。所以如果我们在对一家出售食品商店进行虚拟店面页面设计时，应使用淡雅

13、而沉静颜色，使人心理上感觉凉爽一些，增强人们购买心理，使得在线营销得到很好实践效果。另要注意是网页颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格要求定出一至二种主色调，在已经有了完备网站进行网页设计时，更应该按照其中颜色进行色彩运用。在色彩运用过程中，还应注意一个问题是：由于国家与种族、宗教与信仰不同，以及生活地理位置、文化修养差异等，不同人群对色彩喜恶程度有着很大差异。如：儿童喜欢对比强烈、个性鲜明纯颜色；生活在草原上人喜欢红色；生活在闹市中人喜欢淡雅颜色；生活在“沙漠”中人喜欢绿色。在设计中要考虑众多因素。3、网页形式及内容相统一 要将丰富意义与多样形式组织成

14、统一页面结构，形式语言必须符合页面内容，表达内容丰富含义。运用对比及调与、对称及平衡、节奏及韵律以及留白等手段，通过空间、文字、图形之间相互关系建立整体均衡状态，产生与谐美感。如对称原则在页面设计中，它均衡有时会使页面显得呆板，但如果加入一些富有动感文字、图案，或采用夸张手法来表现内容往往会达到比较好效果。点、线、面作为视觉语言中基本元素，要使用点、线、面互相穿插、互相衬托、互相补充构成最佳页面效果。网页设计中点、线、面运用并不是孤立，很多时候都需要将它们结合起来，表达完美设计意境。图2-1-1 爱书网子页，自然22 CSS样式表 创建CSS样式表CSS是CascadingStyleSheet

15、s（层叠样式表）缩写。它作用是定义网页外观，用到网页中相应元素上，能够有效提高用户设计网页与开发站点效率。创建CSS样式表步骤如下：步骤1 创建一个新HTML页面，将其命名为“网站分布1”保存。在页面中输入待排版文本，排版前效果。步骤2 为标题创建相应CSS样式表。选择文本菜单栏CSS样式表中新建命令，弹出新建CSS规则对话框。步骤3 弹出.bookCSS规则定义对话框，在类型选项中设定相关文字属性。 步骤4 在分类选项组中选择区块，文本对齐属性设置为“居中”，单击确定按钮，完成了用于标题.book CSS类创建。 步骤5 为分类网页名称创建相应CSS样式表。选择文本菜单栏CSS样式表中新建命

16、令，弹出新建CSS规则对话框。步骤6 弹出.webCSS规则定义对话框，在类型选项中设定相关文字属性。 步骤7 选中标题“网站分布”，在该文字属性面板中选定样式为 “book”，则定义.bookCSS规则就被用于该标题。 步骤8 选中网站分布名称，在该文字属性面板中选定样式为 “web”，则定义.webCSS规则就被用于该段文字。步骤9 单击F12，在浏览器中预览效果。 CSS样式表分类CSS按其位置可以分成三种：内嵌样式(Inline Style)；内部样式表(Internal Style Sheet)；外部样式表(External Style Sheet)三种。内嵌样式(Inline St

17、yle)：Inline Style是写在Tag里面。内嵌样式只对所在Tag有效;例如： 这个Style定义里面文字是20pt字体，字体颜色是红色。内部样式表(Internal Style Sheet)：内部样式表是写在HTML里面。内部样式表只对所在网页有效。例如：H1.mylayoutborder-width:1;border:solid;text-align:center;color:red 这个标题使用了Style。这个标题没有使用Style。外部样式表(External Style Sheet)：如果很多网页需要用到同样样式(Styles)，就可以用这种方法。首先将样式(Styles)

18、写在一个以CSS为后缀CSS文件里，然后在每个需要用到这些样式(Styles)网页里引用这个CSS文件。使用外部(External)样式表，相对于内嵌(Inline)与内部式(Internal)，有以下优点：样式代码可以复用。一个外部CSS文件，可以被很多网页共用，便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。提高网页显示速度。如果样式写在网页里，会降低网页显示速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示速度就比较快。23 网站制作 网站步骤网站是网页集合，一个站点用所有网页构成一个网站，网页是网站表现形式，网页设

19、计是指对网站整体页面设计，包括页面风格、配色、布局、内容等。网页设计包含内容非常多，大体分为两个方面：一方面是纯网站本身设计，如文字、排版、图片制作、平面设计、静态图文与动态声音、影像等；另一方面是网站延伸设计，包括网站主题、浏览群定位、智能交互、制作策划、形象包装与宣传营销等。设计页面第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。1. 草稿 新页面就像一张白纸，没有任何约定俗成东西，可以尽可能地发挥想象力、创造力，将想象布局到上面去。这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个块位置先粗略布置上去以往下一步工

20、作展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。2. 粗略布局 在草稿基础上，将需要功能模块放到页面上去，这时要遵循突出重点、整体协调原则，首先将网站标志、导航条、广告条等最主要模块放在最突出位置，然后考虑其他模块布局。3. 定稿 定稿即将粗略布局精细化、具体化，完成整个页面设计。页面制作，首先在根据客户要求下，完成首页制作，在经客户确定后，再制作其他页面，制作完成后，交给客户验收，然后发给客户确定，待所有页面都经客户确定后，完成网页制作进程，交给程序员添加程序。 主页要求对于销售业务页面要求运行工作环境稳定，易于操作，界面美观大方，对于前台展示界面要求系统便于维护，安全可靠，

21、对于广大客户所要执行操作简单易懂，远程访问速度较快，界面友好美观，有基本错误提醒功能，远程操作数据库正确，要求与客户有一定互动性，在主页上直观就可以查看浏览者所想要了解东西。下面是我自己根据自己所学习内容，做出自己爱书网主页：图2-3-1 爱书网主页，首页 子页要求子页工作就是子页选择及链接，子页应该丰富多彩，内容充实，浏览性强，比如说，想要销售一辆汽车，应该有它全部资料，包括外观、内饰、性能指标、出产地、价格等诸多方面，鉴于以上方面，我开始了子页选择及链接各项工作。下面是我做出爱书网子页：图2-3-2 爱书网子页，留言版图2-3-3 爱书网子页，小说网图2-3-4 爱书网子页，童话网图2-3

22、-5 爱书网子页，诗歌图2-3-6 爱书网子页，散文网第三章 总结网页作为一种新视觉表现形式，它发展虽然没有多长时间，它兼容了传统平面设计特征，又具备其所没有优势，成为今后信息交流一个非常有影响途径。网页设计是一种综合性设计，它所涉及范围非常广泛， 包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，当然也离不开一定科学技术发展。在本文中从网页发展、制作流程、网站制作步骤、CSS样式表制作与网站整体布局做了详细说明。在整个毕业设计过程中，谢娇艳指导教师给了我极大帮助，并给予我悉心关怀及指导与建议，在此表示衷心地感谢。教师认真负责工作态度、严谨治学风格，使我深受启发。在网站设计同时，我同学给了我很大帮助，我们之间相互讨论、互相帮助，在此我也表示衷心地感谢。就我个人而言，通过这次毕业论文制作，让我对网站制作有了很大改观，学到很多以往没有注意细节。另一方面也让我知道对网页制作还缺少很多理论及实际操作知识，曾经只是做一些简单个人主页，仅此而已。对通过此次毕业设计，可以深入学习，以提高自身制作水平。参考文献【1】马希敏，张亚娟，洪光：静态网站建设，大连理工大学出版社，2010。【2】王超锋：网页制作,人民邮电出版社，2001年10月。【3】詹青龙，郭永灿：网页设计及制作，清华大学出版社，2010。【4】徐珂，苗彤，赵晖：网页视觉及设计(M)，北京人民邮电出版社，2001。第 17 页