个人网页设计(论文)

第一篇：个人网页设计(论文)

炎黄职业技术学院信息工程系

毕业设计（论文）

个人网页设计

年级: _ 2009级___ _ 学号: _ 0******17 _ 姓名: __ _****_____ 专业: 网络数字媒体 _ 指导老师: __ ****__ __

二零一一年十二月炎黄职业技术学院信息工程系毕业设计（论文）

摘要

本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用CSS样式表作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、用于编辑HTML语言的软件进行了详细的介绍。

本论文主要章节如下，炎黄职业技术学院信息工程系毕业设计（论文）

炎黄职业技术学院信息工程系毕业设计（论文）

1、是一种脚本编写语言

JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性

JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。

炎黄职业技术学院信息工程系毕业设计（论文）

JavaScript 和 Java 很类似，但到底并不一样！Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。

2.3 CSS样式表

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

CSS目前最新版本为CSS2,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。

在网页上使用样式表有三种方法可以在站点网页上使用样式表：

将网页链接到外部样式表。

在网页上创建嵌入的样式表。

应用内嵌样式到各个网页元素。

当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 — 中作一次更改 — 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css 做为文件扩展名，例如 Mystyles.css。

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的标记符内。嵌入的样式表中的样式只能在同一网页上使用。

使用内嵌样式以应用级联样式表属性到网页元素上。

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

炎黄职业技术学院信息工程系毕业设计（论文）

图2-2 随笔

相册效果图2-3如下：

图2-3 相册

音乐效果图2-4如下：

图2-4 音乐

关于我效果图2-5如下：

炎黄职业技术学院信息工程系毕业设计（论文）

图2-5 关于我

3.2 网站主题

本网站是一个简单的个人网站设计，以动漫为主题，主要包括了本人的自我介绍、比较喜爱的动漫作品以及平时的娱乐等。

3.3 网站风格

1.本网站主要体现了清新自然的风格，以简洁为主。2.网站的主色调为绿和白，充分衬托清新自然的风格。

炎黄职业技术学院信息工程系毕业设计（论文）

(1)执行“插入”—“新建元件”命令，创建一个名称为“拉伸的叶片”的影片剪辑元件。

(2)选择矩形工具，设置填充颜色，在舞台上绘制一个无描边举行，在属性面板中设置宽和高。

(3)选择矩形，将其转换成“名称”为“叶片”的图形元件。(4)选择

onmouseout=“makevisible(this,1)”

onmouseout=“makevisible(this,1)” 炎黄职业技术学院信息工程系毕业设计（论文）

2.输入文字，制作超链接。

4.6 xiangce4.html页面的制作

1.制作图库页面。

(1)新建一个网页文档，建立图库页面的基本布局。

(2)将光标定位在页面左侧的炎黄职业技术学院信息工程系毕业设计（论文）“1”，单击[确定]按钮回到行为面板，将此行为事件改为“onclick”。

(2)用同样的方法，给另外3张图像添加同样的行为，将炎黄职业技术学院信息工程系毕业设计（论文）

致

谢

本论文历时两个多月，我系统综合地将我所学的知识运用于毕业设计的全过程。在完成毕业设计中，首先我要感谢我的指导教师****老师。*老师耐心细致地指导我毕业设计，提出了很多精辟而富有建设性的建议。*老师认真负责的工作态度，严谨的治学态度都给我留下了深刻的印象，在学习上给予了我极大的关心和帮助，在此表示衷心感谢！

同时，感谢炎黄职业技术学院为我提供了一个良好的学习环境，感谢学院的领导和老师们！他们无微不至的关怀、精心的培养使我到了很多的知识，终生受益！

炎黄职业技术学院信息工程系毕业设计（论文）

参考文献

[1] 缪亮.Dreamweaver CS3 基础与实训教程.电子工业出版社，2008年.[2] 李冬芸.Flash动画实例教程.电子工业出版社，2010年.[3] 缪亮，郭刚.Photoshop平面设计实用教程.清华大学出版者，2008年.

第二篇：网页设计论文

网页设计基础课程论文

摘要:随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以更好的展示自己，而且可以提高自己在计算机应用方面的能力,网站越发普及，网站建设也有新的要求,网站已发展为一种工具，一个企业对外信息展示的工具.以前网站上常见的大幅图片，长达几十钟的flash动画，已悄然而逝，浏览者再也不用为了查找一些信息而必须等待动画的时间，可以简单方便的找到自己想要的东西，是浏览者主要的目的，也是网站设计时应该考虑的问题。以前只是一味的追求网站的外观，其实网站是一个公司的对外信息窗口，因此在考虑美观的同时也得考虑浏览者的感受，如有些色调是很亮丽，但是这些过于亮的色彩看的时间长了会让你的眼睛不舒服，这样浏览的人就不会长时间在网站上逗留，网站没把公司的信息完全的传达给客户．关键词：网站网页设计发展趋势网站标准正文：一:网页设计发展趋势: 1.更多的CSS3 + HTML5 这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在以后CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之 2简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果 3.移动互联网时代的到来

智能手机，ipad和上网本随处可见，将来这个将会更加明显。这意味着你的设计需要考虑更多的设备。4.Parallax Scrolling 先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。5.设计需考虑更多的触屏设备

触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。6.深度判析

深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。7.大背景图

大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。8.不拘谨于顶级域名

严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。9.QR: Quick Response 如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到2011年的这个趋势热门

10.缩略图设计（Thumbnail Design）

Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。11.持续联系/ Life Stream Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等.二:网站标准是在W3C（W3C.org）的组织下，商业公司（Netscape、Microsoft等）也认识到统一标准的好处。网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

为什么要建立网站标准: 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司（Netscape、Microsoft等）也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

采用网站标准的好处:

对网站浏览者的好处：

1、文件下载与页面显示速度更快

2、内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；

3、内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）；

4、用户能够通过样式选择定制自己的表现界面；

5、所有页面都能提供适于打印的版本。对网站所有者的好处:

1、更少的代码和组件，容易维护；

2、带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS改版后，每天节约超过两兆字节（terabytes）的带宽；

3、更容易被搜寻引擎搜索到；

4、改版方便，不需要变动页面内容；

5、提供打印版本而不需要复制内容；

6、提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

参考文献：一：温谦.HTML+CSS网页设计与布局从入门到精通[M].北京:人民邮电出版社,2010.3 二：http://www.xiexiebang.com

三：http://btgyjlbjx.nease.net(北极星网站域名）

课程论文

系院:土木工程学院

专业:建筑工程姓名:王奎

学号:105140340043 网页设计基础

第三篇：网页制作论文--个人网站设计

网页制作课程论文

（个人网站设计论文）

姓名：薛金鸽学号：105031040025 班级：103212 专业：市场营销（电子商务方向）学期：2011-2012学年第2学期任课教师：刘新飞

个人网站策划书

1.组织机构描述

1.1个人网站的应用背景

网络发展到今天，建立网站已经成为一个很普遍的问题了，对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。在我的这个个人网站的制作过程中，我选择了我比较熟悉的大学生活中的许多内容做为我的网站的重要组成部分，这样相对于其他包括种类齐全的网站，我就有了一定的材料基础。这是我这个网站选择大学生主题的原因之一。

其次，做为在校大学生，我知道大学生现在对什么事物，内容，活动等等感兴趣，所以，我做起来的时候相对来说是比较随手的，我不用像其他的网站那样去刻意的收集信息，资料，我只要在校园里稍微留意，我就会捕捉到大学生的兴趣点。所以，在整个网站的设计过程中，我广泛的听取同学的意见和建议，不断的改进和提高我的网站的内容和质量，这些都取得了比较好的效果。

在整个网站的设计过程中，我根据自己以往的设计经验和自己找来的资料，又经过老师的指点，经过了近一个月的努力，几经易稿，最终做成了我的这个个人主页。.2 个人网站建设的目的

在我们的工作、日常生活中，能够拥有一个自己的网站，一个已经成为不少人的希望和骄傲。一个网站项目的确立是建立在各种各样的需求上面的，这是个人网站，所以这种需求往往来自于个人的实际需求，其中每个人的实际需求占了绝大部分[6]。因此如何更好地的了解、分析、明确需求，并且能够准确、清晰以文档的形式表达出来，保证开发过程按照个人需求为目的正确项目开发方向进行。不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了和大学生的生活和学习相关联的主题。

1.3 相关应用软件选用、技术采用

在网页的设计过程中，我选用的软件包括Dreamweavercs5、Fireworks cs5和Photoshopcs5，其中，Dreamweaver 是网页编辑软件，Fireworks cs5是图形/图像处理软件，photoshopcs5是图片处理软件。它们是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

Dreamweaver cs5采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweavercs5自动完成。另外，还有一点值得说明的是，Dreamweaver cs5可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。

Fireworkscs4的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。Fireworks cs4的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks cs4中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。

在我设计我的个人网站的过程中，我选择了Dreamwearcs5和 Photoshopcs5 Fireworks cs4三种软件。因为自己向对于其它的软件来说，这三个还算是比较熟悉的。

2．网站的技术参数部分

2.1我的导航系统

我所制作的个人网站的导航系统包括：

1.个人简介2.个人专题4.我的相册5.网站说明6.给我留言 8.发送邮件9.链接百度10.女生花园

2.2功能模块的划分

1．搜索引擎：

根据浏览者的要求，使用主页上的搜索引擎链接到百度，在整个Internet上进行搜索，完成信息的优化与提取。

2．论坛：

主要功能是网友和网站之间的交流平台，也是网友给版主提出意见的主要渠道。在论坛中用户可以发表意见，这些意见可以让所有人看到，也可以只让版主看到，版主和其他人可以针对留言的内容进行回复，只留给版主的留言只有版主能够回复，并且版主可以登录后台对留言进行管理，是否发表或删除。

3．发送电子邮件：

网友可以通过“联系我”利用outlook 向版主或其他人发送电子邮件。4．精品收藏：

在其中展示我喜爱的东西，包括电影、歌曲和一些优美的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。但我增加了管理权限，我以管理员的身份可以对加入的新内容进行管理，即允许加入和对其进行删除。

5．留言板：

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

2.3 首页的设计我的网站首页主要采用简单大方的设计方法，用的是色调一致的一组图片做的LOGO和相关的背景图片，主要页面布局如下：

2.4主要栏目的介绍

1．个人简介：

介绍版主的一些基本信息，希望各位访客能够认识版主。2.我的论坛：

此版块又分为主页、发表意见、回复意见、显示论坛内容、版主后台管理以及版主的回复界面。其中发表意见界面是所有访客都可以在论坛里面发表自己的意见，这些意见可以是发表给所有的访客，也可以是只发表给版主，如果只发表给版主，只有版主可以看到和回复；回复意见是所有访客针对自己感兴趣的话题进行回复；这些发表的意见和回复可以在显示论坛内容的界面都显示出来，供大家讨论；那些只有版主才能看到的信息在版主的管理界面，这个界面需要登录，设有用户名和密码，在这里版主可以对所有评论进行发表或删除的管理。3.个人专题：

这里收录了我平时搜集的一些文章和音乐，各位访客可以根据自己的喜好进行阅览。4.我的相册：

在这个板块可以看到我的照片，班级照片和搜集的校园照片，如果大家喜欢可以收藏。更改照片的时候只要更新数据库就可以了。5.网站说明：

里面是我对整个网站的介绍，不太清楚网站构架的访客可以先到这里。6.给我留言：

这是每位访客针对我的网站情况给我留言，这些留言会直接保存到数据库里面，并且能够轻松的读取。7.发送邮件：

各位访客可以通过outlook向版主或者其他人发送电子邮件。8.链接百度：

如果访客想在互联网上查找东西，可以直接点击这里。9.女生花园：

收集了一些女生喜欢的东西，如果你是女生，可以进来看看。

2.5二级页面的设计

我的网站主页内容简单所以主要内容再二级页面里要有详细的说明，具体说明如下：

2.5.1个人简介

本模块是个人简介部分，每个个人网站都会有作者介绍。在这个模块访客会了解到作者的一些基本信息.2.5.2文学欣赏

这个版块主要介绍我自己喜欢的相关文学作品。此版块的界面如图所示：

图3.6 文学欣赏界面

2.5.3快乐音乐

进入此版块，界面如图所示：

通过在数据库中存放音乐路径，达到在网页上播放的效果。在音乐的首页上放置了歌曲的名字，网友无需登录，即可收听自己喜欢的歌曲。

音乐界面

2.5.4我的相册版块

个人网站中又一亮点就是个人相册的设置，在我的相册里，放置了我自己的照片、班级照片和校园照片。

相册里面的这三个版块具有相同的版面设计，如下图所示：

相册界面

2.5.5网站说明版块

此版块是我根据自己的网站结构对整个网站以及每个版块所做的网站结构和功能的说明，以及网站和作者版权说明。如下图所示：

网站说明界面

如果网友不清楚网站的构架，可以查看此版块。2.5.6给我留言版块

留言板是目前最为流行的网络应用之一，使用留言板，可以为留言者提供发言的机会，让他们能够及时、准确地交换自己的观点。

2.5.7留言板主界面

完整的留言板具有发表留言和察看别人留言的功能，如图所示的留言板主界面index1.ASP，可由此进入留言界面和察看留言界面。

留言主界面

在主界面中存有全部留言的作者和主题，点击你想察看的主题就会进入察看留言界面，点击 “发表帖子”进入留言界面。

3．网站的维护方案

3.1域名的申请

域名（Domain Name），是由一串用点分隔的名字组成的,Internet上提供用户访问某网站或网页的路径，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

域名申请的含义

“域名申请”：为保证每个网站的域名或访问地址是独一无二的，需要向统一管理域名的机构或组织注册或备档的一种行为。也就是说，为了保证网络安全和有序性，网站建立后为其绑定一个全球独一无二的域名或访问地址，必须向全球统一管理域名的机构或组织去注册或者备档方可使用的一种行为。由于域名是网站必不可少的“门牌号”，域名可用于：网站地址访问、电子邮箱、品牌保护等用途，所以很多企业或个人均会进行域名申请。

3.2空间或者主机的租用

有了自己的域名这个门牌号后，就需要一个空间来存放自己的网站，也就是虚拟主机。一般虚拟主机提供商都向用户提供100MB、500MB、3GB等虚拟主机空间。我的个人网站选择100-300MB的虚拟主机空间。购买虚拟主机主要考虑几个方面：售后服务、稳定性、访问速度等。首先我选择在万网上注册一个域名然后申请租用空间建立个人网站。

3.3网站链接稳定性测试

超级链接对于网站用户而言意味着能不能流畅的使用整个网站提供的服务，因而链接将作为一个独立的项目进行测试。网站能够正确运行首先要保证链接能够连贯运行。

网站的运行中整个系统是否运行正常，我主要采用将测试网站长时间运转进行测试，派生出执行程序所有功能需求的输入条件，从而导出测试用例，进行测试，网站中的每个版块的每个页面都出现了很多的链接，所以每个版块要先进行单独测试，单独测试完成后，根据个版块之间的连接结构再进行总体测试，从而达到网站的整体的运营能够顺利地进行。在测试这个环节时，没有特定的测试方法，就要做到细心，做到网站的顺利运行。

总结：

通过这次个人网站设计的制作，我学会了很多东西，也了解了很多关于个人网站的资料。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Dreamwave、Firework、Html语言、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。

虽然整个网页的结构还有很多不足，还有一些板块没有开通，但是我的确能够感到在我们制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望以后可以自学动态网站的课程，从而弥补自己在动态网络语言方面的不足。这样以后可以利用业余的时间为自己或者公司，根据自己的爱好建立一个个人网站。

[参考文献] [1] 袁晓红.《网页设计与制作》[M].高等教育出版社 2006 385页~389页 [2] 甘登岱.《我也能掌握Flash编程》[M].航空工业出版社 2000 [3] 赵更生.《Flash动画制作培训实录》[M].人民邮电出版社 2004 [4] 鲍嘉.卢坚.陈丁法《Dreamweaver CS5网页设计从入门到精髓》[M].中国电力出版社2010 [5] 张成龙.《网页制作一点通》.延边人民出版社

[6] 刘瑞新，《ASP动态网站开发、毕业设计指导及实例》[M].机械工业出版社 2000 [7] 石晓燕、苏萍《网页设计基础》[M].清华大学、交通出版社 20 04 [8] 王玉芬.《网站规划与设计》[M].西北工业出版社 2003 [9] 谢希仁.计算机网络(第5版)[M].北京：电子工业出版社,2008

第四篇：商业网页设计论文

摘要:商业网页设计中具体的字体、图形、图象、标志等等，常常表现为点线面、色彩、动静、主次等视觉因素，这些因素的不同使用都会影响读者的视觉习惯和心理变化。本文将分析商业网页设计视觉因素的心理规律，揭示网页设计如何通过视觉因素更有效、更合理的表现与传达信息。

关键词: 网页设计视觉心理因素构成要素视觉流程

商业网站是企业向用户和网民提供产品和服务的一种方式,是企业开展电子商务的基础设施和信息平台，其网页页面由具体的文字（标题、广告语、单位名称、Email地址等）、企业标志、商标、产品图形、和信息菜单等内容组成，这些内容又常常表现为点线面、色彩、动静、主次等视觉因素，这些因素的不同使用都会影响读者的视觉习惯和心理变化。

本文将试析商业网页设计视觉因素的心理规律，揭示商业网页设计如何通过视觉心理因素更有效、更合理的表现与传达信息。展现企业形象、介绍产品和服务、体现企业发展战略。

一、商业网页设计中点、线、面视觉心理因素的运用

点、线、面是商业网页设计基本的视觉元素，是表现视觉形象的基本设计语言。从视觉角度看网页设计主要是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。

1.网页设计造型要素中的点

商业网页设计中的点是构成网页的最基本单位，是指页面中具备点的视觉特点、体积较小的物象。相对于整体背景而言一个单独的点是相比较而言的；是有大小、形状和体积的。点的大小、形态、位置不同，所产生的视觉效果、心理作用也不同。一个网页往往需要有数量不等，形状各异的点来构成，可以是具体产品、商品标志等，也可以是感觉上的点。例如，天空中的飞鸟、沙滩上的脚印、花瓣上的蜜蜂等，在其周围背景衬托下，都给人以“点”的视觉心理感受。

点在设计中即可以起一种稳定造型的作用，亦可起到活泼生动、吸引视觉中心的作用，使用得当，甚至可以画龙点睛；点的形状、方向、大小、位置、聚集与发散，还能够给人带来不同的心理感受。

(1)单点的应用：点在人们的视觉中具有很强的吸引作用，如：点（商品）设计在网页的上方或左右位置，则给人不稳定感和相对的动感。

(2)多点的应用：两点（二商品）之间会产生心理连线的感觉，多点时则会出现不同排列，顺序的虚拟的面或形体。

2.网页设计造型要素中的线

点的延伸形成线。线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一，是决定页面现象的基本要素。商业网页设计视觉因素中的线主要指文字的行线，商品图形、图象的轮廊线，各种装饰线。线的形态主要有直线和曲线两大类：

(1)直线给人一种紧张、锐利、简洁、刚直感，从心理或生理感觉来看具有男性特点。直线又有：细直线，给人纤细、敏锐的心理感觉；粗直线，给人豪爽、拙朴、厚重的感觉；垂直线，给人一种挺拔、庄严感；水平直线则给人方向感和强烈的动感。

(2)曲线表现出一种动态，活泼，轻快的意味，显示了女性美的特征，商业网页设计中运用文字行、图象轮廊线或装饰线的造型，创造一种女性化的审美感。自由曲线是最好的情感抒发手段。打破了水平线组成的庄严和单调，给商业网页增加了丰富、流畅、活泼的气氛。水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比。

3.网页设计造型要素中的面

线的推移形成面。面是无数点和线的组合。面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说视觉冲击力更大更强烈。面在网页设计中通常指各种图形、色块的形状设计，不同形状的面具有自己鲜明的个性和情感特征，能给人不同的心理感受，如方形的面具有沉着，稳重，厚实，坚强的男性特征；三角形、梯形面常给人一种稳定、端正之感；但如果将它们倒过来设计，则给人一种轻、不稳定的感觉。圆形充实、圆满、活泼的感觉，比较适合表现儿童产品或者女性用品。菱形或不规则形体则给人一种活泼、轻快之感。

在商业网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。在确定商业网页主体形象的位置、动态时，点线面将是需要最先考虑的因素。必须熟练掌握设计语言。要善于根据商业特性采用不同的组合去体现不同的情感诉求，达到推销、销售商品和服务的作用。只有合理的安排好点线面的互相关系，才能设计出具有最佳视觉效果的页面，充分的表达出商业网页最终的诉求！

二、商业网页设计中色彩视觉心理因素的运用

商业网页设计中色彩是确立网站风格的灵魂。色彩能产生强烈的视觉效果，使页面更加生动。色彩设计的好坏直接影响阅读者的观赏兴趣与心理变化。因此，地位十分重要。商业网页的色彩设计应从以下几个方面把握和利用其心理特征：

首先，整个页面要确定一个主色调，其有利于体现网站主题。每一种色彩都具有它自身的性格，如：彩度高，明度高的色彩常给人一种华丽感，相反彩度低，低明度的色彩则给人一种朴实感。暖色系、高明度的色彩能给人一种面积大的前进感。冷色系、低明度的色彩则能给人一种面积小的后退感。每个人群对色彩的喜好也有所不同，如男性较喜欢冷色，女性则偏好暖色或高明度、高彩度的色彩，儿童喜好纯色，讨厌浊色，老人则偏好浊色，中年人或文化层次较高的人偏好冷灰色等。因此在设计中要考虑主要读者群的背景和构成以及如何与商品的属性相呼应。

其次，在主色调下的色调搭配。若页面空间整体、色彩和谐统一，则给人一种幽雅、宁静感；若以对比手法处理，图形文字色彩明快突出于背景色，则页面空间氛围会显得活跃而有生气。但是，要注意不能有强烈的色彩对比，因为过于丰富的背景色彩会影响前景商品图片和文字的取色，使文字溶于背景中，不易辨识。所以背景一般应以单纯为宜。

最后，作为设计师在考虑网页设计时，还应考虑到时代流行性色和企业标准色的问题。所谓流行色，是指在一定范围内和时间内，非常盛行并易为人们接受的某些式样或颜色。而标准色的运用在网上扩大了品牌效应，也是对公司整体形象的统一应用，从而构成了企业识别系统（CIS）的重要部分。

三、商业网页设计中动、静的视觉心理因素的运用

商业网页设计构成要素可分为两种状态：静态与动态。静态要素设计具体指静止的商品图形、文字、按纽等；动态要素，具体指动态按纽、按纽连接、网页动画和视频等，它们是丰富、生动网页、张显个性、突出主题重要手段。

动静以及不同的动静组合都可以反映不同的心理与性格，如，动大体上给人活泼、生动的印象，但极慢的动常给人忧虑感；迅速或突然的动常给人焦虑、惊慌感。另外，静也常给人宁静、沉闷两种感觉。

商业网页设计中要注意处理好动静的关系，要整体和谐统一，给人生动而不躁动或厌恶感。同时还要遵循动态性原则与交互性原则。

1.动态性原则，即要有四维空间或五维空间的运作观念。一件网页商品、图片不仅是二维的平面或三维的视觉，也要有时间与空间的变换，情感与思维认识的演变等多维因素。

2.交互性原则，即界面设计强调交互过程。一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。

四、商业网页设计中视觉流程心理因素的运用

商业网页设计是通过视觉元素引起人注目而实现商品信息内容的传达，为了使网页获得最大的视觉传达功能，使网页真正成为可读强性而且新颖的媒体，必须适应人们视觉流程的心理和生理的特点。

视觉流程的形成是由人类的视觉特性所决定的。心理学家葛斯达认为：人们阅读时，版面的上部比下部的注目价值高，左侧比右侧的注目价值高。因此，版面的左上侧位置最为引人注目，因此，在网页设计中一些突出的商品信息，如主标题、每天更新的内容等通常都放在这个位置。以便于一开始就吸引受众的视线，诱导其由上到下，由左到右地移动。此位置也被称作视觉的最佳视域。也就是最优选的地方。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。设计者可以利用视线移动规律，诱导读者的视线作左右流动、上下流动以及斜线的不稳定流动，通过编排设计，人为地产生最佳视域，突出主要商品，以达到一定的视觉效果，传递商品信息。

商业网页作为一种新的企业开展电子商务的基础设施和信息平台，它的发展虽然没有多长时间，却兼容了传统平面设计的特征，又具备其所没有的优势，成为今后商品信息交流的一个非常有影响的途径。其设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，而本文中只从视觉心理因素的角度进行了一些阐述与分析，仅作抛砖引玉之用。

参考文献:

[1]李彬彬:设计效果心理评价[M].北京:中国轻工出版社,2005.1

[2]赵殿泽:构成艺术[M].沈阳:辽宁美术出版社，1994

[3]赵国志:色彩构成[M].沈阳:辽宁美术出版社，1994

[4]张国良:传播学原理[M].上海:复旦大学出版社，2000.1

第五篇：论文：浅析个人网页

浅析个人主页制作

【摘要】本文通过对一些个人网站的观察，发现一些杂乱的现象。因此，试从个人主页的设计、制作、注意事项等方面提出自己的看法。

【关键词】个人主页

页面设计

色彩搭配

注意事项

随着互联网技术的快速发展，网络逐步深入到人们生活中的每一个角落，也使个人化的网络发展成为可能。个人化的网络是信息化的人类世界在电脑网络中的体现，这不仅给大众提供了一个展示自己的平台，还能让大家通过网络，在让别人认识自己的同时也认识别人。因此，个人网页是表现个性的一种新型媒体。

于是，个人网站如雨后春笋般地产生了。但值得注意的是，很多人或公司的个人网页并没有做的那么理想。从设计制作到风格定位都出现了不协调的现象。因此，应该怎样来规划和设计自己的个人网页就显得尤为重要。

1、个人主页的筹划

对于个人主页的建设，光有热情是不够的，你需要有切实可行的想法与计划。你必须清楚，你的个人主页的主题是什么? 哪些人会来访问你的个人主页? 你的期望和长远目标是什么? 如果你连这些都还没有理清的话，那么停下你手中的其他一L作，将你的热情稍微降点温，好好设计一下你的个人主页的主题与整体定位。因为一个主题不明、思路杂乱的个人主页肯定没有其特色，最终必将沦为千千万万W eb 主页中的一堆垃圾。

对于主页的主题和定位，有以下的建议：

1、选取与你的兴趣和爱好相近的题材：兴趣就是你的动力，只有充满兴趣，你才会有无尽的动力，而没有动力，你永远无法做好你的个人主页。

2、主题要有特色：抄袭现象在网络上可谓司空见惯，加入今天的你有好的想法，明天这个想法便可能会通过网络的传播被抄袭到任何一个角落。千篇一律的东西肯定是没有特色的，所以自己的个人主页的主题还是要有自己的想法。

3、主题不要太大：虽然大的主题可以让你有更多的发挥空间，但却很容易让人产生泛泛而谈，不得其味的感觉，这样很难让访问者再次光顾你的主页，而没有回头客，你的主页注定要消亡。而且作为个人主页，想要把它建设成为包罗万象的站点是不太现实的。因为个人毕竟没有那么多的精力去收集大量的资料，维护庞大的站点。与其大而泛，不如小而精。

4、期望值不要过高：要相信自己，对自己充满信心，但同时也不要有过高的期望值。要记住，你所经营的只是一个出于个人兴趣和爱好的个人主页，你不能将它与那些由资金充足的公司来运营的网站进行比拟。

这里我以数码产品来定位，制作一个围绕数码产品介绍以及报价的商务网站

制作步骤分析（站名：商务九州）

制作“商务九州”网站之前，需要在本地电脑中创建一个名为“shangwu”的文件夹，并在文件夹中建立一个名为“img”的文件夹保存制作网页时需要使用的图片。

创建好文件夹之后，启动Dreamweaver 8，建立一个名为“商务九州”的站点，将本地根文件夹设置为刚才创建的文件夹，然后在站点窗口中新建一个名为moban.dwt的模板文档，通过该模板创建首页“index.htm”和其他页面

2、个人主页制作原则

要想制作好个人主页，我们应该了解一下其制作的基本原则：

（1）正确定位，确定内容。一是：要小而精。定位要小，内容要精。二是：选择自己擅长、喜爱的内容。

（2）塑造形象，统一风格。（3）简洁明朗，主次分明。

（4）控制图像文件大小，调节多媒体嵌入量，减少网页下载时间。网页图像最好使用GIF 文件和JPG 动画，这两种文件的压缩程度较高，且大小最好控制在25KB 至15KB 之间；JPG 动画的使用不要太多，以免使主页看上去太乱。设制图片的替代文本或低分辨率图片，可以使浏览者较快地看到图片和轮廓或其它相关信息。网页中的背景音乐文件最好使用MDI 格式，体积较小，便于传输，同时，注意给网页中的多媒体文件注明相关的文字性说明。

3、个人主页应先确定主题，准确定位。

这些考虑清楚之后，我们就开始想想，网站的内容，也就是你的个人网页的主题。也就是说，我们只有先确定了主题，才能进行之后的相关程序：命名、资料收集、风格设计等一系列步骤。可见，主题的确定是非常重要的。网页内容的选择要不落俗套。放眼望去，网上的许多个人主页简直就是“ 杂货店”。内容包罗万象，题材千篇一律。人人都是“ 软件下载”，个个都有“ 网络导航”，从头到尾找不出一丝“ 鲜”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“ 少” 而“ 精”，又必须突出“ 新”，如能坚持天天更新的话，我相信这样的网页一定会受到大家的欢迎。

关于这个网站内容，各有各的想法。比如，有些站长喜欢收集软件，有些站长喜欢收集图片，也有些站长更偏爱程序，而有的站长只是想存放自己的资料。总之一句话，初做站点不可太杂，一定要尽量专，才有可能做好。一般来说，如果要在工作之余去进行大量的网页维护工作，这是不现实的。

同时，确定了主题，也就确定了我们的受众，定位明确。这样在你所选择的内容和你的受众群形成对应关系，再根据实际情况而进行调整。

4、个人主页的排版和结构设计

一个800×600的页面，安排起来并不像想象的那么容易，它涉及美学效果、视觉效应、空间效应、时间效应等，说到底就是要让人看得顺眼、舒服、印象深刻。在制作中要力求简洁，将各要素统一起来，注意色明度、对比度、结构分配比例

等飞在差异中求协调，保证网站的一体性。个人主页的结构主要由目录结构和导航结构组成。其中设计合理的目录结构可以使你在维护、更新时更加快速、省心;而条理清晰的导航结构有利于访问者迅速找到他们需要的信息，也使得他们乐意再次光顾你的主页。对于个人主页结构的设计可以这样来考虑：

1、根据栏目来建立相应的目录，将同一栏目中的文件放在相应的目录下，将图像文件放在栏目中专用的图像目录里。

2、目录的层次不要太多(一般两层便足够了)，否则不利于更新与维护。

3、目录文件的名称不要太长，而且其意义要明确。

4、在每个页面中应该提供返回到首页的链接。

5、在具有前后连续顺序的文件里提供必要的链接，如在一系列具有.前后连续顺序的文件里提供“上一页”、“下一页”、“回目录页” 与“回首页” 等导览按钮或超链接。

6、在较长的页面内提供目录表与大标题。

7、暂时不要提供到尚未完成的页面的超链接。例：网站结构：