搜索
第一章网站的总体设计………………………………………………51.1网站的功能及结构………………………………………51.1.1网站的功能………………………………………51.1.2网站的目录结构设计……………………………51.2网站的风格与创意………………………………………51.2.1LOGO设计…………………………………………61.2.2版面编排…………………………………………61.2.3色彩处理…………………………………………71.3开发工具和开发平台的选择……………………………101.3.1梦幻网页的编织者---Dreamweaver……………101.3.2网页动画的制作软件--MicromediaFlash……111.3.3JavaScript………………………………………111.3.4影像与动画的制作软件---AdobePhotoshop…111.3.5动态网站的脚本语言---PHP……………………11第二章规划设计………………………………………………………132.1课题来源…………………………………………………132.2需求分析…………………………………………………13第三章设计方案………………………………………………………143.1网站的总体设计要点……………………………………14第四章系统设计与实现………………………………………………164.1开发环境和工具…………………………………………164.1.1软件及硬件环境…………………………………164.1.2开发工具介绍……………………………………17第一章网站的总体设计1.1网站的功能及结构21.1.1网站的功能个人网站的功能无非就是向大众展示自己，在关于自己的介绍中可以有照片、昵称等。但网络的安全性还是有待商榷的，因此，不宜透露过多的个人资料。大多自己建站的人都是从事设计工作，因此个人网站也会展示他们的个人作品，如摄影作品、插画、网页等等。对于工作室，成员的优秀个人网站也会为工作室树立良好的形象。1.1.2网站的目录结构设计网站的目录结构目录的规划，也就是你的网页的物理保存位置的规划。一些人将存放网页的文件夹只分两个目录，一个用来存放网页，一个用来放图片。更有甚者，将所有的东西都放在一个文档中。这样做的害处很明显，当所有的东西都很少时，这或者不是什么问题，而一旦你的网站做大时，才去考虑这个问题，修改起来将会十分麻烦。即使严格遵守了一套合理的命名规则，但面对如此多的文件，也将无济于事。网站的文件结构的组织类型有分层树状结构、线性结构、可选择的线性结构、WEB结构等，考虑到网站的管理的方便性和日后的可维护性，本次设计决定采用分层树状目录来构架整个网站，这种结构的优点是层次分明、系统的扩展性很好、可以分类管理各子功能模块的网页、图片和相关数据等，它的缺点是各页面的在作链接时易出错，但只要仔细一些，这个缺点也是可以避免的。1.2网站的风格与创意网站主页的设计主要是网页设计软件的操作与技术应用的问题。但是，要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。在动手制作之前思考整个网站的风格和创意。网站主页的风格是浏览者对整个网站的普遍的感觉，是主页的版式、色调及图文组合的高度抽象。而网站的创意则是在设计之前对内容的选择和表现形式运用的思考，力求个性的发挥。在茫茫网海没有创意的网站很快就会被人遗忘。主页的美化首先要考虑风格的定位。任何主页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。另外，动画效果也不宜在主页设计中滥用，特别是一些内容比较严肃的3主页。主页毕竟主要依靠文字和图片来传播信息，它不是动画片，更不是电视或电影。至于在主页中适当链接一些影视作品，则是另外一回事。1.2.1LOGO设计LOGO，译为标志、厂标、标志图等。在我们的网站设计中，LOGO常常作为个人或站点的标识出现，起着非常重要的作用。LOGO最重要的作用就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。它一般会出现在站点的每一个页面上，是网站给人的第一印象。一个制作精良的LOGO，不仅可以很好地树立个人形象，还可以传达丰富的个人信息。一个网站首页美观与否往往是初次来访的用户决定是否进行深入浏览的标准，而LOGO作为首先印入访问者眼帘的具体形象，其重要性可见一般。多数的个人LOGO都是使用本人名字或姓名首字母经艺术加工后产生的，也有很多人使用Q版自画像作为LOGO。LOGO设计追求的是：以简洁的符号化的视觉艺术形象把网站的形象和理念长留于人们心中。视觉效果要强烈——容易识别、辨认和记忆。个人LOGO最重要的就是要有个人的特色，LOGO的风格和颜色也会很大程度上的影响个人网站的风格定义和颜色选择。1.2.2版面编排主页的设计首先涉及到的是页面的版面编排问题。“版面编排”实际上就是中国古代画论中的“经营位置”。主页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。常用的版面布局形式：1.T结构布局。所谓T结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母T,所以我们称之为T形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。2.口型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利4用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。3.三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。对于主页版面布局的主要依据如下几条原则：1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。1.2.3色彩处理色彩，网站风格之魂、创意之先锋。色彩，是最先也是最持久地给浏览者以网站形象的因素。其实，网站形象是营销环节中非常重要的一个部分，如同人的衣着一样，信息空间的构造也需要恰如其分的包装。网站的内容不仅仅是由文字组成的，视觉元素在网站中也占有重要的位置。色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色5调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。网页的色彩是树立网站形象的关键之一，它的重要性是不言而喻的，但色彩搭配是令网页设计者感到头疼的问题，网页的背景，文字，图标，边框，超链接等众多的网页元素，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？网站中的主页用色方面应用掌握或注意以下几方面：1.网页色彩搭配的原理色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的独特性。要有与众不同的色彩，使得大家对你网站的印象强烈。色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。2.网页色彩搭配的技巧用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用两种色彩。先选定一种色彩，然后选择它的对比色。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花哨。用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。用黑色和一种彩色。3.在网页配色中，忌讳的是：不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。4．选择适合内容风格的颜色。色彩有冷暖的感觉。如儿童类站点不要用冷色系，且颜色要丰富一些。色彩有柔软和坚硬感。同色相，明度高，则有柔软感；明度低，则会有坚硬感。女性站点，适量选用柔美的粉淡色或高级灰，而男性类站点，就可使用棕色6深蓝色。从色相看，暖色给人的感觉华丽；从明度看，明度高给人的感觉华丽。由此首饰类站点可以使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。色彩的联想。如游戏网站适合黑色、暗色比较神秘。旅游类站点可选用草绿搭配黄色等等。色彩明度的高低与声音的高低相关，强烈的色彩如亮黄色、鲜红色，具有尖锐高亢的音乐感。暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。现代音像艺术正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听效果。根据色彩的味觉感。绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。橙色、浅黄色、浅棕色、粉红色使人想到成熟的瓜果色彩而产生甜甜的味感。设计饮食类站点可以遵循以上原则。1．确定主体色遵循主从关系，这是最稳定的处理色彩原则。红、黄、绿、紫等每一个字都代表一类具体的颜色，也就是色相，客观存在,它是指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景色外大量使用的颜色，就是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。2．相近色选择色彩相近的颜色，非常容易搭配。如在红色里面加白色，红色就会越来越亮。而加黑色，红色就越来越暗，明度降低。同色系（同色相）的几种颜色容易搭配，如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题；同一页面尽量不要多出4种颜色。链接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。这样才可以很明确的传达我们要表现的东西．要突出的图形文字的颜色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。3．色彩均衡它是比较保险的配色互补原则．多种颜