网页设计基础知识.ppt

《网页设计基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计基础知识.ppt（33页珍藏版）》请在三一办公上搜索。

1、网页与网站 Internet是一个信息的海洋，但这些信息存放在什么地方呢？实际上，这些信息是存放在世界各地称为“站点”的计算机上，各个站点由拥有该站点的单位维护，上面的信息即是由维护该站点的单位发布，这些信息也称为“网页”。网页是WWW上的页面，是WEB服务器上的基本信息单位，由文字、表格、图像、音频、动画等页面元素组成。发布网页意味着将用户的网页传输到能够提供服务的Web服务器上，以便世界各地的人们能够看到它。网页的本质就是用HTML语言编写的文件。在浏览器中，选择“查看”菜单的“源文件”命令，系统就会自动启动记事本，显示出当前网页的HTML代码。,进入网站时，首先显示的网页称为主页(hom

2、epage)。网页是构成网站的基本元素，是承载各种网站应用的平台。网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些网页按照一定的组织结构，以超链接的方式连接在一起，形成一个整体。通俗的说，网站就是由网页组成的,它由域名（也就是网站地址）和网站空间构成。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站软件配置、网站提供服务等几方面考虑。,常用网页制作工具一FrontPage2003 FrontPage2003是一个所见即所得的网站编辑器。作为Microsoft Office 2003的组成部分，它有着与其他Office软件类似的操作界面和使用方法，其易学

3、易用、所见即所得及功能强大博得广大网页制作初学者的喜爱。即使用户没有多少编程经验，只要有上网的计算机就可以方便地创建并发布自己的主页。FrontPage2003是一种功能强大的、易于掌握的WEB页开发最好的入门级网页编辑工具,但是FrontPage2003比较适合初学者，真正的网页设计师很少使用。,二Dreamweaver 8.0 Dreamweaver 8.0是 Macromedia 公司产品中的最新的一款“所见即所得”的网页编辑工具。Dreamweaver 8.0是Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相

4、辅相承，是制作网页的最佳选择。05年底，Macromedia公司被Adobe公司收购，但是这三个软件依然继续在开发，可见这三个软件的重要性。,三Flash 8.0 随着网际网络的愈发盛行，网站设计者的终极目的就是希望浏览者能够在网站上停留多一些时间，所以网页的设计方式，渐渐地由传统的以文字为导向的方式转变为以多媒体为导向的方式，这样才能留住大多数的上网者，其次，网站也希望能够进一步了解消费者的需求。基于这样的原因，一套以网络为基础的动画软件便应运而生了，这套由Macromedia公司出品的软件Flash，目前已经发展至Flash 8.0版本。有了Flash，设计者便可以轻易的在网站上放置具备多

5、媒体效果的动画了。它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。,四Fireworks 8.0 Fireworks 8.0是Macromedia公司推出的专门针对网络图形设计的工具软件，相当于结合了 Photoshop（点阵图处理）以及CorelDraw（绘制向量图）的功能，通过最少的步骤创建最小、最高质量的JPEG和GIF图像，是创建和生成网页图形的完全解决方案。它既可以编辑eb图像，又可以编辑Web动画，制作按钮的导航条、菜单等，甚至能直接制作网页。同时具有多种传统图形制作软件的功能，而且它能把位图处理和矢量处理完美的结合

6、在一起，使得网页图形设计人员再也不必在多种图形设计软件之间频繁切换。,网站设计的基本流程和原则一 策划阶段。主要目的就是确定网站主题。网站主题就是建立的网站所要包含的主要内容。一个网站必须要有一个明确的主题。主要内容的选定有一定的针对性。一般采用前期调查，并进行可行性分析之后才确定的方式。前期调查的目的 1 分析了解目前各类网站的发展情况，研究哪几类网站最符合潮流，受欢迎的原因是什么，他们的发展趋势与前景，从而为网站的定位指明一个正确的方向。2根据调查结果，结合本身特点，通过可行性分析，初步确定网站的内容。3 根据网站的内容，初步考虑采用的实现技术。根据前期调查，初步确定主题。确定主题有以下原

7、则 1 主题小而精。定位不宜太大，内容要精。2 题材应根据本身的特点和优势。自己最擅长什么方面，就做相应的网站。3 题材勿滥。4 目标不要太高。,二 设计阶段 策划好主题后，接着就是设计阶段了。设计阶段的主要工作是根据主题设计网站的名称、logo（标志）、网站的风格、导航系统、网站的基本版面布局、网站的目录结构等。在确定好主题后，网站的名称就显得尤为重要了。网站的名称是否响亮、易记，是否能代表网站内涵，值得仔细推敲。接着，网站的标志logo也要仔细的设计，它代表着公司的形象。一般公司都是专门请专家设计，很多公司的标志都是很有特色的，部分的代表了企业文化。,然后，设计阶段要对网站的风格进行研究。

8、网站的风格是给浏览着的整体印象。网站的风格一定要统一，因为一个网站是由很多网页组成的，如果每个网页的风格都不一样，那么一定会使整个网站显得凌乱，不协调。一般要从以下几个方面着手：a 版面设计要一致。如网页的主色调要一致，字体的风格要一致。b 网页中的有代表性的东西要一致。如网站的名称、网站的徽标，有代表性的图形和动画要一致。C 导航条的风格要一致。在这里，网站的风格涉及到网站整体的标准色彩和网站的标准字体。,导航系统实际上是使用了超链接技术的网页对象（包括文字、按钮、小图片等），它将网站中的内容有机的链接在一起。一般放在首页，使浏览者能够迅速获得该网站的整体信息，以便快捷地到达需要访问的网页,

9、网站的版面布局也是非常重要的问题，任何网站的布局都是经过精心设计的，大多数门户网站的布局比较单一，因为那些网站的空间很有限，所以内容都挤得满满的，没有什么空间。大多数商业网站的布局就百花齐放了，有“口”字型、有“川”字型、有“三”字型，还有很多是自由型，这里没有什么要遵循的规律，有时候相同类型的网站布局都是五花八门的，大家可以自己去多浏览，多研究。,最后，你就要围绕主题开始搜集材料了。网页的基本组成元素主要有三个：文字内容、图片和超级链接。要想让自己的网站有血有肉，能够吸引住用户，就要尽量搜集材料，搜集得材料越丰富，其制作出来的网站就越精彩。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从

10、互联网上搜集，然后再把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。特别要注意的一点是，网站的内容必须合法。,搜集好素材，开始设计目录结构,网站中的文件夹或文件具有良好的目录结构会使网站更易于制作和维护.。通常的做法是：先在计算机硬盘上建立一个文件夹,把它作为自己的本地站点。将搜索到的各种资源进行整理归类,然后在建立好的文件夹里面建立子文件夹,如images来存放图片；根据需要建立若干子文件夹,以便将不同类型的文件存放在站点中，即“分门别类”地存放素材；最后在本地站点的根目录建立首页文件,如index.htm或者default.htm。,站点里的文件命名一般遵循以下原则：1 最好使用小

11、写英文名称,或者用汉语拼音代替，不要使用中文。2 最好使用意义明确的名称，做到“见名知义”，如computer.htm、jisuanji.htm，这样的名字就比较好，但是abc.htm、123.htm，虽然符合规则，但是让人很难知道其内容，不利于以后的修改和链接，3 注意文件的扩展名，网页文件的扩展名一般是.htm或者.html，图像文件的扩展名一般是.gif、.jpg或者.png。,三 制作阶段 这个阶段是整个网页设计中最重要的一步了，这本书的讲解重点也是这个阶段。这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后

12、再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时方便修改。在制作网页时需要多灵活运用软件中的模板，这样可以大大提高制作效率。,四 宣传推广阶段 网页制作全部完毕后，在上传之前一定要仔细的全面的测试。测试的主要内容包括：测试所有的超链接与导航系统按钮是否可行；是否有拼写错误；代码的完整性；浏览器的兼容性等。一起都正常之后，接着就要上传了。在上传之前，首先在ISP网站申请空间。现在上传的工具有很多，比如常用的WS-FTP、CUTE-FTP、LEAP-FTP 等等，有些网页制作工具本身就具备FTP功能，如DREAMWEAVER，利用这些工具，你可

13、以很方便地把网站发布到自己申请的虚拟空间中。网站做好之后，还要不断地进行宣传推广，提高网站的访问率和知名度，这样才能让更多的用户知道。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接与加入广告链接等。,五 运行维护阶段 网站要经常维护,更新内容保持内容的新鲜，只有不断地给它补充新的内容，才能够吸引住浏览者。此外还要经常进行网站以及服务器软件和操作系统的升级。,网页设计主要原则尽量精简主页的作用好比一本书的封面，是为了吸引用户测览你的网址内容。因此，主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务

14、、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难今他们深入观赏。,少用图像现今大部分用户的网络带宽还很一般，切勿使他们在打开你的网页时候感到望穿秋水。主页上的图形应力求简朴，避免耽搁用户的时间。图像愈大、颜色愈多，打开页面的时间愈长。这并不是说你要完全略去图像不用，只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过256种，页顶图像最好保持在大约50KB(千字节)以下。；应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果打开的时间超过十秒左右，很多用户就会等得不耐烦而停止打开。,善

15、用图像 用户在网上四处浏览，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的动画、美观的字款，使其别具特色，令人过目不忘。图像的内容或动画应有一定的实际作用，切忌虚饰浮夸。最佳的图像集美观与意义于一身。注意图画可以弥补文字之不足，但并不能够完全取代文字。,使主页易于导航主页的其中一个主要功能是作为导航工具，指引用户查阅你存储在网址或其他地点的信息。尽量使导航过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的联接项目应只限于几个高级的类别，例如公司介绍、产品分类、服务指南、在线订购，与我联系等。,保

16、持新鲜感万维网上不断有新事物出现、每天都有新花样。如果你的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户再来测览。不妨在页头以大字标题宣布新消息。可以定期改变主页上的图像、或更改主页的式样。趣味性的事项可以持续或自动更新、例如列出会测览你的网站的人次。同样，为保持新鲜感，应时刻确保主页提供的是最新信息。,网页色彩知识颜色的产生 色彩的感觉是由于光照射到物体后，物体的反射光而使人的视觉和大脑产生作用的结果。光照射到物体表面时，一部分被物体吸收，另一部分被反射回来，被反射回的光反映了你看到的物体的颜色。太阳光照到白纸上，光线基本被完全反射，所以你看到的是白色，黑色的物体则完

17、全吸收光线，所以看到的是黑色。树叶吸收白光中其他波长的色光，只反射绿色的光波，所以树叶呈绿色。,色彩的属性,自然界的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和灰色，而其他所有的颜色都是彩色。任何一种彩色都有3个属性，即色相、饱和度和明度。色相是颜色的基本特征。可以理解为颜色的名字饱和度表示播放的光的彩色深浅度或鲜艳度，取决于彩色中的白色光含量，白光含量越高，即彩色光含量就越低，色彩饱和度即越低，反之亦然。其数值为百分比，介于0-100%之间。纯白光的色彩饱和度为0，而纯彩色光的饱和度则为100%。亮度 表示某种颜色在人眼视觉上引起的明暗程度，它直接与光的强度有关。光的强度越大，景物就

18、越亮；光的强度越小，景物就会越暗。亮度表现了光能量的大小，也称辉度。,色彩的三原色和色环,光的三原色即红、绿、蓝。三原色混合为白光。颜色的三原色是红、黄、蓝。三色混合为黑灰色。色环 我们将色彩按 红-黄-绿-蓝-红 依次过渡渐变，就可以得到一个色环。在色环上我们按照颜色的冷暖，分为暖色、中性色和冷色。,颜色的色环,同类色 色环中相隔45度的两个色相。属于较弱对比效果，主调十分明确，是极为协调，单纯的色调，搭配网页效果不错。邻近色 色环中相隔90度的两个色相，色彩倾向近似，冷色或暖色较明显，色调统一和谐，感情特征一致。对比色 色环中相隔135度的两个色相，属于中强对比效果。互补色 色环中相隔18

19、0度的两个色相。如红与绿，橙与蓝，黄与紫等。互补色组成的色相，是对比最强的色环，富于刺激性，不安定，又极强的视觉冲击力和热烈感。如果搭配不当，容易产生急躁、硬的效果。,色彩所传达的意义,黄色：明亮、光辉、高贵、富有，具有快乐、希望、智慧和轻快的个性，它的明度最高。黑色：严肃、沉着、夜晚、死亡、邪恶。具有深沉、寂静、悲哀和压抑的感觉。白色：纯洁、天真、真理、和平、冷淡、贫乏。灰色 代表阴暗、消极，具有中庸、平凡、温和、谦让、中立的感觉。注意:灰色和白色是万能色，可以和任何颜色搭配，效果都不错，大家可以试试。,红色：热情、火焰、暴力、侵略、奔放、喜悦。有刺激的效果，能使人们产生冲动，红色在很多文化

20、中代表的是停止的讯号，用于警告或禁止一些动作。橙色 具有轻快、欢欣、热烈、温馨、时尚的效果。紫色：创造、神秘、稀有、爱情、浪漫。蓝色：忠诚、安全、保守、宁静、冷漠，是最凉爽的色彩，很专业的色彩，它和白色组合，能体现柔顺、淡雅的气氛。绿色：自然、稳定、植物、生命、生机，有和睦、宁静、健康、安全的感觉。它和金黄、白搭配，可以产生优雅舒适的气氛。,色彩的使用技巧,A.了解你的网站所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如，如果在设计一个强调稳健的金融机构，那么就要选择冷色系、柔和的颜色，像是蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏了该网站品牌。如果是个女性的网站

21、，就因该选择粉色作为网站的主色调。B.了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色，但这样的颜色却引不起高年龄层的兴趣。C.不要使用过多的颜色。除了黑色和白色以外，约选择三到四个颜色就够了。太多的颜色会导致混淆，也会拉走读者的注意力。,D.在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果，也会妨碍观众阅读。白底黑字的阅读效果最好。E.选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场，且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。F.

22、选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色，例如标题和超级链接等。,色彩的搭配技巧,非彩色的搭配 黑色和白色的搭配是最简单的搭配，一般都是白底黑字。灰色也是很好的颜色，注意灰色和白色是万能色。同类色的搭配 同类色是由一种色彩呈现出不同透明度或者饱和度时产生的色彩系列。由这样的色彩搭配出来的叶面看起来统一、和谐，有层次感，比较适合技术性、专业性的站点，邻近色的搭配 先选定一种色彩，然后选择它在色环里相邻区域的颜色。如红和紫、黄和绿。邻近色搭配可以使整个叶面色彩丰富，但不花哨。对比色的搭配 各种色彩均可作为对比色使用，但因该以一种颜色为主调，使它有较大面积的同时，辅以对比色，起到点缀的作用。,RGB 和CMYK颜色模式 显示器的色彩是由RGB（红绿蓝）三种色光所合成的。我们可通过调整这三个基色调，来显示颜色，网页语言中的色彩表达就是用这三种颜色的数值表达。例如红色是（255，0，0），十六进制的表示方法为FF0000，白色是（255，255，255），十六进制的表示方法为FFFFFF。十六进制颜色值为6位数字，前2位定义红色，中间2位定义绿色，后2位定义蓝色。RGB模式采用的是加色法。CMYK 颜色模式是由青（C）、洋红（M）、黄(Y)和黑(K)四种颜色构成，主要用于印刷领域。CMYK 颜色模式采用的是减色法。,