个人网站的设计建立

《个人网站的设计建立》由会员分享，可在线阅读，更多相关《个人网站的设计建立（12页珍藏版）》请在文档大全上搜索。

1、第一章 网站的总体设计51.1网站的功能及结构51.1.1 网站的功能51.1.2 网站的目录结构设计51.2网站的风格与创意51.2.1 LOGO设计61.2.2 版面编排61.2.3 色彩处理71.3开发工具和开发平台的选择101.3.1 梦幻网页的编织者-Dreamweaver101.3.2 网页动画的制作软件-Micromedia Flash111.3.3 JavaScript111.3.4 影像与动画的制作软件-Adobe Photoshop111.3.5 动态网站的脚本语言-PHP11第二章 规划设计132.1 课题来源132.2 需求分析13第三章 设计方案143.1 网站的总体

2、设计要点14第四章 系统设计与实现164.1 开发环境和工具164.1.1 软件及硬件环境164.1.2 开发工具介绍17第一章 网站的总体设计1.1 网站的功能及结构网站的功能个人网站的功能无非就是向大众展示自己，在关于自己的介绍中可以有照片、昵称等。但网络的安全性还是有待商榷的，因此，不宜透露过多的个人资料。大多自己建站的人都是从事设计工作，因此个人网站也会展示他们的个人作品，如摄影作品、插画、网页等等。对于工作室，成员的优秀个人网站也会为工作室树立良好的形象。1.1.2网站的目录结构设计网站的目录结构目录的规划，也就是你的网页的物理保存位置的规划。一些人将存放网页的文件夹只分两个目录，一

3、个用来存放网页，一个用来放图片。更有甚者，将所有的东西都放在一个文档中。这样做的害处很明显，当所有的东西都很少时，这或者不是什么问题，而一旦你的网站做大时，才去考虑这个问题，修改起来将会十分麻烦。即使严格遵守了一套合理的命名规则，但面对如此多的文件，也将无济于事。网站的文件结构的组织类型有分层树状结构、线性结构、可选择的线性结构、WEB结构等，考虑到网站的管理的方便性和日后的可维护性，本次设计决定采用分层树状目录来构架整个网站，这种结构的优点是层次分明、系统的扩展性很好、可以分类管理各子功能模块的网页、图片和相关数据等，它的缺点是各页面的在作链接时易出错，但只要仔细一些，这个缺点也是可以避免的

4、。1.2网站的风格与创意网站主页的设计主要是网页设计软件的操作与技术应用的问题。但是，要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。在动手制作之前思考整个网站的风格和创意。网站主页的风格是浏览者对整个网站的普遍的感觉，是主页的版式、色调及图文组合的高度抽象。而网站的创意则是在设计之前对内容的选择和表现形式运用的思考，力求个性的发挥。在茫茫网海没有创意的网站很快就会被人遗忘。主页的美化首先要考虑风格的定位。任何主页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，

5、还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。另外，动画效果也不宜在主页设计中滥用，特别是一些内容比较严肃的主页。主页毕竟主要依靠文字和图片来传播信息，它不是动画片，更不是电视或电影。至于在主页中适当链接一些影视作品，则是另外一回事。1.2.1LOGO设计LOGO，译为标志、厂标、标志图等。在我们的网站设计中，LOGO常常作为个人或站点的标识出现，起着非常重要的作用。LOGO最重要的作用就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。它一般会出现在站点的每一个页面上，是网站给人的第一印象。一个制作精良的LOGO，不仅可以很好地

6、树立个人形象，还可以传达丰富的个人信息。一个网站首页美观与否往往是初次来访的用户决定是否进行深入浏览的标准，而LOGO作为首先印入访问者眼帘的具体形象，其重要性可见一般。多数的个人LOGO都是使用本人名字或姓名首字母经艺术加工后产生的，也有很多人使用Q版自画像作为LOGO。LOGO设计追求的是：以简洁的符号化的视觉艺术形象把网站的形象和理念长留于人们心中。视觉效果要强烈容易识别、辨认和记忆。个人LOGO最重要的就是要有个人的特色，LOGO的风格和颜色也会很大程度上的影响个人网站的风格定义和颜色选择。1.2.2版面编排主页的设计首先涉及到的是页面的版面编排问题。“版面编排”实际上就是中国古代画论

7、中的“经营位置”。主页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。 常用的版面布局形式： 1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局

8、。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。 2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。 3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割

9、为四部分，色块中大多放广告条。 4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。 对于主页版面布局的主要依据如下几条原则：1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容

10、，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。1.2.3色彩处理色彩，网站风格之魂、创意之先锋。色彩，是最先也是最持久地给浏览者以网站形象的因素。其

11、实，网站形象是营销环节中非常重要的一个部分，如同人的衣着一样，信息空间的构造也需要恰如其分的包装。网站的内容不仅仅是由文字组成的，视觉元素在网站中也占有重要的位置。 色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还