个人网站的设计建立.docx
《个人网站的设计建立.docx》由会员分享，可在线阅读，更多相关《个人网站的设计建立.docx（16页珍藏版）》请在冰豆网上搜索。
个人网站的设计建立
第一章的总体设计………………………………………………5
1.1的功能及结构………………………………………5
1.1.1的功能………………………………………5
1.1.2的目录结构设计……………………………5
1.2的风格与创意………………………………………5
1.2.1LOGO设计…………………………………………6
1.2.2版面编排…………………………………………6
1.2.3色彩处理…………………………………………7
1.3开发工具和开发平台的选择……………………………10
1.3.1梦幻网页的编织者---Dreamweaver……………10
1.3.2网页动画的制作软件--MicromediaFlash……11
1.3.3JavaScript………………………………………11
1.3.4影像与动画的制作软件---AdobePhotoshop…11
1.3.5动态的脚本语言---PHP……………………11
第二章规划设计………………………………………………………13
2.1课题来源…………………………………………………13
2.2需求分析…………………………………………………13
第三章设计方案………………………………………………………14
3.1的总体设计要点……………………………………14
第四章系统设计与实现………………………………………………16
4.1开发环境和工具…………………………………………16
4.1.1软件及硬件环境…………………………………16
4.1.2开发工具介绍……………………………………17
第一章的总体设计
1.1的功能及结构
1.1.1的功能
个人的功能无非就是向大众展示自己，在关于自己的介绍中可以有照片、昵称等。
但网络的安全性还是有待商榷的，因此，不宜透露过多的个人资料。
大多自己建站的人都是从事设计工作，因此个人也会展示他们的个人作品，如摄影作品、插画、网页等等。
对于工作室，成员的优秀个人也会为工作室树立良好的形象。
1.1.2的目录结构设计
的目录结构目录的规划，也就是你的网页的物理保存位置的规划。
一些人将存放网页的文件夹只分两个目录，一个用来存放网页，一个用来放图片。
更有甚者，将所有的东西都放在一个文档中。
这样做的害处很明显，当所有的东西都很少时，这或者不是什么问题，而一旦你的做大时，才去考虑这个问题，修改起来将会十分麻烦。
即使严格遵守了一套合理的命名规则，但面对如此多的文件，也将无济于事。
的文件结构的组织类型有分层树状结构、线性结构、可选择的线性结构、WEB结构等，考虑到的管理的方便性和日后的可维护性，本次设计决定采用分层树状目录来构架整个，这种结构的优点是层次分明、系统的扩展性很好、可以分类管理各子功能模块的网页、图片和相关数据等，它的缺点是各页面的在作时易出错，但只要仔细一些，这个缺点也是可以避免的。
1.2的风格与创意
主页的设计主要是网页设计软件的操作与技术应用的问题。
但是，要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。
在动手制作之前思考整个的风格和创意。
主页的风格是浏览者对整个的普遍的感觉，是主页的版式、色调及图文组合的高度抽象。
而的创意则是在设计之前对内容的选择和表现形式运用的思考，力求个性的发挥。
在茫茫网海没有创意的很快就会被人遗忘。
主页的美化首先要考虑风格的定位。
任何主页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。
主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。
这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。
另外，动画效果也不宜在主页设计中滥用，特别是一些内容比较严肃的主页。
主页毕竟主要依靠文字和图片来传播信息，它不是动画片，更不是电视或电影。
至于在主页中适当一些影视作品，则是另外一回事。
1.2.1LOGO设计
LOGO，译为标志、厂标、标志图等。
在我们的设计中，LOGO常常作为个人或站点的标识出现，起着非常重要的作用。
LOGO最重要的作用就是表达的理念、便于人们识别，广泛用于站点的连接、宣传等。
它一般会出现在站点的每一个页面上，是给人的第一印象。
一个制作精良的LOGO，不仅可以很好地树立个人形象，还可以传达丰富的个人信息。
一个首页美观与否往往是初次来访的用户决定是否进行深入浏览的标准，而LOGO作为首先印入访问者眼帘的具体形象，其重要性可见一般。
多数的个人LOGO都是使用本人名字或XX首字母经艺术加工后产生的，也有很多人使用Q版自画像作为LOGO。
LOGO设计追求的是：
以简洁的符号化的视觉艺术形象把的形象和理念长留于人们心中。
视觉效果要强烈——容易识别、辨认和记忆。
个人LOGO最重要的就是要有个人的特色，LOGO的风格和颜色也会很大程度上的影响个人的风格定义和颜色选择。
1.2.2版面编排
主页的设计首先涉及到的是页面的版面编排问题。
“版面编排”实际上就是中国古代画论中的“经营位置”。
主页作为一种版面，既有文字，又有图片。
文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。
图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。
因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。
常用的版面布局形式：
1."T"结构布局。
所谓"T"结构。
就是指页面顶部为横条标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。
这是网页设计中用的最广返的一种布局方式。
这种布局的优点是页面结构清晰，主次分明。
是初学者最容易上手的布局方法。
缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。
2."口"型布局。
这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。
这种布局的优点是充分利用版面，信息量大（我的主页首页即属于这种布局）。
缺点是页面拥挤，不够灵活。
也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。
3."三"型布局。
这种布局多用于国外站点，国内用的不多。
特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。
4.对称对比布局。
顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。
优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
5.POP布局。
POP引自广告术语，就是指页面布局象一X宣传海报，以一X精美图片作为页面的设计中心。
优点显而易见：
漂亮吸引人。
缺点就是速度慢。
作为版面布局还是值得借鉴的。
对于主页版面布局的主要依据如下几条原则：
1.主次分明，中心突出。
在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。
因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。
2.大小搭配，相互呼应。
较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。
对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。
3.图文并茂，相得益彰。
文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。
页面上图片太多，缺少文字，必然就会减少页面的信息容量。
因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。
1.2.3色彩处理
色彩，风格之魂、创意之先锋。
色彩，是最先也是最持久地给浏览者以形象的因素。
其实，形象是营销环节中非常重要的一个部分，如同人的衣着一样，信息空间的构造也需要恰如其分的包装。
的内容不仅仅是由文字组成的，视觉元素在中也占有重要的位置。
色彩是人的视觉最敏感的东西。
主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。
色彩总的应用原则应该是“总体协调，局部对比”，也就是：
主页的整体色彩效果应该是和谐的，只有局部的、小X围的地方可以有一些强烈色彩的对比。
在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。
因为色彩具有象征性，例如：
嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。
其次还有职业的标志色，例如：
军警的橄榄绿，医疗卫生的白色等。
色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。
另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。
充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。
网页的色彩是树立形象的关键之一，它的重要性是不言而喻的，但色彩搭配是令网页设计者感到头疼的问题，网页的背景，文字，图标，边框，超等众多的网页元素，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？
中的主页用色方面应用掌握或注意以下几方面：
1.网页色彩搭配的原理
色彩的鲜明性。
网页的色彩要鲜艳，容易引人注目。
色彩的独特性。
要有与众不同的色彩，使得大家对你的印象强烈。
色彩的合适性。
就是说色彩和你表达的内容气氛相适合。
如用粉色体现女性站点的柔性。
色彩的联想性。
不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。
2.网页色彩搭配的技巧
用一种色彩。
这里是指先选定一种色彩，然后调整透明度或者饱和度，），产生新的色彩，用于网页。
这样的页面看起来色彩统一，有层次感。
用两种色彩。
先选定一种色彩，然后选择它的对比色。
我的主页用蓝色和黄色就是这样确定的。
整个页面色彩丰富但不花哨。
用一个色系。
简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
用黑色和一种彩色。
3.在网页配色中，忌讳的是：
不要将所有颜色都用到，尽量控制在三种色彩以内。
背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。
4．选择适合内容风格的颜色。
色彩有冷暖的感觉。
如儿童类站点不要用冷色系，且颜色要丰富一些。
色彩有柔软和坚硬感。
同色相，明度高，则有柔软感；明度低，则会有坚硬感。
女性站点，适量选用柔美的粉淡色或高级灰，而男性类站点，就可使用棕色深蓝色。
从色相看，暖色给人的感觉华丽；从明度看，明度高给人的感觉华丽。
由此首饰类站点可以使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。
色彩的联想。
如游戏适合黑色、暗色比较神秘。
旅游类站点可选用草绿搭配黄色等等。
色彩明度的高低与声音的高低相关，强烈的色彩如亮黄色、鲜红色，具有尖锐高亢的音乐感。
暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。
现代音像艺术正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听效果。
根据色彩的味觉感。
绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。
橙色、浅黄色、浅棕色、粉红色使人想到成熟的瓜果色彩而产生甜甜的味感。
设计饮食类站点可以遵循以上原则。
1．确定主体色
遵循主从关系，这是最稳定的处理色彩原则。
红、黄、绿、紫等每一个字都代表一类具体的颜色，也就是色相，客观存在,它是指色彩的相貌，是区别色彩种类的名称。
在页面上，除白色为背景色外大量使用的颜色，就是这个网页的主体颜色。
如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。
2．相近色
选择色彩相近的颜色，非常容易搭配。
如在红色里面加白色，红色就会越来越亮。
而加黑色，红色就越来越暗，明度降低。
同色系（同色相）的几种颜色容易搭配，如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题；同一页面尽量不要多出4种颜色。
的色彩搭配也是遵循以上的原则。
而文字颜色的搭配，则要与背景分离。
这样才可以很明确的传达我们要表现的东西．要突出的图形文字的颜色必须让它能够吸引观者的主要注意力。
如果不是这样就会喧宾夺主。
3．色彩均衡
它是比较保险的配色互补原则．多种颜色同时存在的时候不容易把握好，一定要调和统一。
在网页设计中，如果运用了较多明度较高的颜色，就可以用黑色，或同色相的深色小面积压一下，点缀一下，使得页面不要太轻，达到色彩重量的平衡．平衡的颜色较符合多数人的色彩心理．根据情况，如选择黑色，可能会严肃和庄重，而用同色相的深色，则轻松些．
4．黑白灰运用
如果在用色上遇到麻烦，可以大面积的加白，灰；小面积加加黑来调节其他颜色搭配不当．遇到使用纯度很高的颜色，比如纯蓝、纯黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。
把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。
1.3开发工具和开发平台的选择
1.3.1梦幻网页的编织者------Dreamweaver
Dreamweaver是创建和管理网页的专业化可视编辑器。
使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。
Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。
Dreamweaver可以为用户做到：
使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。
它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。
Dreamweaver还是一个可以完全自定义的应用程序。
用户可以创建自己的对象和命令，修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。
至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。
常用的Dreamweaver工作区组件有以下若干种：
文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。
装载器中包含一些打开和关闭常用检查器和模板的按钮。
对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮。
属性检查器显示选定对象的属性。
快捷菜单可以使用户对当前选择或区域快速执行某些命令。
可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。
1.3.2网页动画的制作软件----MicromediaFlash
MicromediaFlash用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页。
Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。
FLASH的交互性的大部分设置就在ACTION和FSMAND里，通过对ACTION和FSMAND的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置.
1.3.3JavaScript
JavaSript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中多个对象，与Web客户交互作用。
从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。
它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。
1.3.4影像与动画的制作软件—AdobePhotoshop
Photoshop是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。
文字处理更加方便
增加的图层集使图层管理更有序。
新增图像功能：
图像的剪切和剪裁更加方便。
将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。
为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。
1.3.5动态的脚本语言--PHP
PHP语言是一种服务器端HTML嵌入式的脚本语言。
它以独特的语法混合了C、JAVA和Perl的语言特色。
在保证最大可操作性的前提下提供了比一般CGI更快的执行速度。
PHP是能让你生成动态网页的工具之一。
和Apache 服务器紧密结合的特性；不断的更新及加入新的功能；支持几乎所有主流与非主流数据库；高速的执行效率，使得在1999年中使用PHP的站点超过了十五万。
PHP的第四代Zend（PHP4）核心引擎已经进入最后测试阶段。
整个程序的核心大幅更动，让执行速度满足更快的要求。
第二章规划设计
每个都是一项庞大的工程。
好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。
全面仔细规划架构好自己，不要急于求成。
规划一个，可以用树状结构先把每个页面的内容大纲列出来，尤其当要制作一个很大的（有很多页面）的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个的架构，十分累人，也十分费钱。
大纲列出来后，还必须考虑每个页面之间的关系。
是星形，树形，或是网形。
这也是判别一个优劣的重要标志。
混乱，层次不清的站点会造成浏览困难，影响内容的发挥。
为了提高浏览效率，方便资料的寻找，大多数个人基本采用“蒲公英”式，即所有的主要都在首页上，每个主再分别展开，主之间相互。
框架定下来了，然后开始一步一步有条理，有次序地做来，就胸有成竹得多，也为你的主页将来发展打下良好的基础。
资料收集就个人主页而言，很少有人有能力完全靠自己来创作所有的内容。
大部分人的方法是：
从报纸，杂志，光盘等媒体中把相关的资料收集整理，再加上一定的编辑后就可以了。
另外一个好的方法是从网络上收集，只要到雅虎，搜狐等搜索引擎上查找相应的关键字，就可以找到一大堆的资料。
2.1课题来源
今天，计算机网络无论是作为资源共享或是娱乐手段，已经发展到成为人们工作和学习、甚至日常生活中不可或缺的要素。
网页作为网络的一个组成部分，是最直接与受众面对面交流的媒介，其信息是否丰富、画面是否精美、制作是否精良……等等都受到关注也要求，所以网页设计水平则是衡量网络是否更具发展空间的指标之一。
而且，在e时代里，网页设计为每个想交流、想表演的人提供了一个不受限制的媒介和大舞台，把自己最想表达的一面展现在众多的认识或不认识的朋友面前，这正是网页的魅力以及网页设计、制作的乐趣所在。
2.2设计目的
建立个人主要目的是实现个人的网络价值，同时丰富我们的业余生活，提高我们的计算机水平，增强我们的文化修养，将来为祖国的现在化建设做贡献。
对于我们正处于求职就业当口的应届毕业生来说，个人的建立还有十分重要的一点，与简历结合，可以让招聘单位能够对我们有一个更直观的了解，也可以对我们的专业能力有一个较准确的评价。
第三章设计方案
3.1的总体设计要点
要设计出一个精美的前期工作是必不可少的。
一个网页的成功与否，很重要的一个因素在于它的构思，好的创意及丰富详实的内容才能够让您的网页充满勃勃生机。
1、网页的选题
在制作自己的网页之前，首先要确定自己网页的内容。
个人网页的设计内容可以从自己的专业或兴趣爱好多做些考虑。
例如自己在计算机、书法、绘画等方面有独到的工夫，可以此专题做为网页的内容。
但网页涉及的内容切勿过广，这样虽然内容比较丰富，但往往涉及各个方面的内容会比较肤浅。
2、网页的组织结构
网页的选题确定好以后，接下来就要确立的总体结构了。
总体结构的确立至关重要，它是设计能否成功的关键所在。
如果我们对的总体结构了如指掌，设计起来就会得心应手，游刃有余，但是如果的总体结构比较混乱，在设计的过程中也就会颠三倒四，无法将自己的想法表达出来，这样的一般不会很成功。
一般网页的组织结构是采用树形结构。
3、资料的收集与整理
在对自己未来的网页有了一个初步的构思后，还需要有丰富的内容去充实。
网页的基本组成元素有三个：
文字内容、图片和超级。
而Internet的最迷人之处在于它信息的极大丰富，如果你的网而只有漂亮的外观而实质内容很少，那么就不会有多少人在你的网页中停留。
要注意的一点是，的内容必需合法。
4、选择网页的设计方法
要建立一个，要选择用何种方法来实现它。
现在，能够用来设计的方法有很多，可以使用HTML语言来编辑，也可以使用网页制作工具（如：
ProntPage）来设计。
对于一个初学者来说，建议您使用所见即所得的网页制作工具来设计出的框架，然后再用Java和JavaScriptT等编辑语言来对进行修饰。
5、设计网页要注意的问题
（1）网页的标题要简洁，明确。
（2）在文本要使用水平线，以分割不同部分。
（3）对重点段落要强调显示。
（4）网页中插入的图片要尽量的小。
（5）图形要附加文字说明，以便关闭图象时查看。
（6）网页中引用的资料及商标（或图标），不能侵犯。
第四章系统设计与实现
4.1开发环境和工具
4.1.1硬件及软件环境
在规划设计中必不可少的另一个考虑是：
我们应选择那些硬件来架构我们的，以及在已有的引见基础上选择哪些软件更合适。
硬件的选择
具体的说，我们需要有一台安装了Web服务器的计算机。
这台担当服务器的计算机性能要求是与具体的规模和的访问量相关的。
也是和当代计算机的发展水平一致的。
只有“实用、适用与较高的性能/价格比”这句话才是我们永远不变的选购硬件的原则。
当然，我们也可以把建在较高级的计算机号丧（如：
管理本地局域网的服务器）。
甚至可以上传到提供个人主页空间的全国性大型计算机上，以“展现个人主页的风采”、也可由它们“托管”我们的——这当然是需要付费的。
软件的选择
所谓的软件的选择就是服务器软件的选择。
我选择使用IIS。
Microsoft的Web服务器产品为InternetInformationServer（IIS），IIS是允许在公共Intranet或Internet上发布信息的Web服务器。
IIS是目前最流行的Web服务器产品之一，很多著名的都是建立在IIS的平台上。
IIS提供了一个图形界面的管理工具，称为Internet服务管理器，可用于监视配置和控制Internet服务。
IIS是一种Web服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。
它提供ISAPI（IntranetServerAPI）作为扩展Web服务器功能的编程接口；同时，它还提供一个Internet数据库连接器，可以实现对数据库的查询和更新。
4.1.2开发工具介绍
网页制作软件——DreamweaverMX2004
Dreamweaver是Macromedia公司开发的、用于网页制作和管理的软件，它与Flash和Fireworks有“网络梦幻组合”之称，是网页制作的三大利器之一。
因此，它越来越受到网页制作的专业人员和业余爱好者的宠爱。
作为功能齐全的专业网页制作工具，DreamweaverMX2004提供了功能强大的可视化工具和高度智能化的代码编辑环境,实现了页面设计艺术与编程技术近于完美的结合。
难能可贵的是使用DreamweaverMX2004，不需要掌握复杂的源代码语言，就可以开发出专业的网络应用程序。
DreamweaverMX2004提供了对使用ASP、JSP、CFML等不同语言进行编辑的完美解决方案。
Dreamweaver的可视化编辑特征也让您快速把设计元素和功能家到您的页面，而不用写一行代码。
通
升级会员 