网页设计与制作32课时完整理论讲义_第1页
网页设计与制作32课时完整理论讲义_第2页
网页设计与制作32课时完整理论讲义_第3页
网页设计与制作32课时完整理论讲义_第4页
网页设计与制作32课时完整理论讲义_第5页
已阅读5页，还剩55页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

292-60/60讲义（首页）课程名称网页设计与制作课程编号050420117总计：32学时讲课：16学时实验：16学时上机：学时学分2类别必修课（）选修课（）理论课（）实验课（）任课教师刘焰职称讲师授课对象专业班级：2007级工业设计（本）班共1个班基本教材和主要参考资料基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社教学目的要求本课程是非计算机专业的专业选修课。通过该课程的学习，引导学生了解网页、网站、主页和WWW服务器的基本概念，熟悉建立网站以及发布网站的步骤和过程；掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法；能够收集制作网页的多媒体素材，熟悉基本的图像处理和动画制作技术；掌握使用HTML语言的基本知识等。依据“项目导向、案例驱动、突出实践、关注过程”的教学理念，通过项目和案例，介绍Dreamweaver文本、图片、表格、层、超链接、表单、CSS以及行为和事件的使用方法，最终完成一个专题网站的设计与制作。教学重点难点了解网页制作和网站建设所需的基本知识，理解HTML语言和CSS样式个属性以及网页设计工具软件Dreamweaver和Photoshop的使用及应用，掌握网页制作和网站建设所需的基本技能。能够根据任务需求建立客户端的的静态网页和网站。《网页设计与制作》课程讲义理论学时部分第一章网页设计概述授课学时：2授课内容：1.1网络的概念1.2网站与网页的概念1.3相关知识1.4网页设计师必备的专业素质基本要求：重点讲授网站，网页涉及的概念；了解网页设计涉及的相关概念；了解网页设计的语言HTML；掌握学习网页设计的某一种工具；理解网站和网页的关系。重点与难点：重点：理解网站和网页的关系；难点：HTML语言设计，网站和网页的关系。信息(information),已经成为哲学、自然科学、技术科学和社会科学等各个领域所广泛应用的概念。随着信息技术的发展，网络成为人们共享信息的必然。建立网站也就是必然逝在必行。如何建好网站，如何建立有自身特色的网站将是我们这门课程所要讲述的内容。1．1网络的概念1.1.1计算机网络的定义和发展在20世纪50年代中期，许多系统都将地理上分散的多个终端通过通讯线路连接到一台中心计算机上，这样就是出现了计算机系统。随着远程终端的增多，在主机前增加了前端机，随着发展，人们有了更深的理解。把计算机网络定义为“以传输信息为目的的而连接起来，实现远程信息处理或进一步达到资源共享的系统”，这就是网络的趋形。20世纪70年代至80年代中期计算机网络得到了迅速的发展。ISO在1984年颁布了OSI/RM。定义为新一代计算机网络体系结构的基础，这七层模型分别为：物理层、链路层、网络层、传输层、会话层、表示层、应用层。目前计算机网络的比较公认的定义是：计算机网络是指在网络协议的控制下，通过通讯设备和线路来实现地理位置不同且具有独立功能的多个计算机系统之间的连接，并通过网络操作系统等网络软件来实现资源共享的系统。1.1.2计算机网络的分类计算机网络分类方法多种多样，常用的方法有：按网络的拓扑结构分类，按传输介质分类，按速率的分类，按数据交换方式分类以及按网络覆盖的地理范围分类。按照网络覆盖的地理位置范围的大小分为：局域网，城域网，广域网。通常我们说的网络其实多是指广域网。1.1.3网络的功能由网络的定义我们可知网络的功能就是数据通讯和资源共享。1．2网站与网页的概念1.2.1网站网站功能：网站是提供发布信息、收集信息的平台。网站概念：简单地说，网站是由网页通过超级超链接有机地集合而成，通过浏览器看到的画面就是网页。网站的分类：从网站的目的将网站分为：企业网站、政府网站、专业网站和个人网站。网站的管理功能：故障管理、计费管理、配置管理、性能管理、安全管理、站点信息管理。网站的地址:为了使得连入的INTERNET的众多主机和通讯设备在通信时能够相互识别，因而在internet中每台计算机都分配一个唯一的IP地址，每个IP地址是由四个整数组成，每二个整数之间用点隔开例如：35,其中IP地址的每一个整数都不能大于255。其结构如下：计算机名组织机构名网络名最高层域名在INTERNET中把IP定义了五类地址，即A，B，C，D，E类地址。1.2.2网页（1）网页制作的基础知识人们在通过INTERNET获取信息的同时，纷纷建立自己的主页和网站，向世界展示自己。一个网站可以包含一个或多个网页，这些网页以一定的方式连接在一起，成为一个整体，供人们观赏和为人们提供服务。一个成功的网站的建设离不开其中每一张制作精美的网页。（2）HTML语言超文本文件的格式早在1945年就由VannevarBush提出，他在理论上建立了一个超文本文件系统。1965年TedNelson第一次使用“超文本”一词来形容这种管理信息的系统。与Bush一样，他的超文本文件系统“Xanadu”，最终也未获得成功。1967年，在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由AndriesVanDam主持，在美国布朗大学最终完成。1969年，美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP协议。超文本标识语言(HyperTextMarkupLanguage，HTML)的HTML最早版本起源于1992年，HTML4.01版于1999年12月24日被推荐使用。HTML最初用于发布信息，并没有在网络上使用。但它那极容易使用的显著特点和随着网络带宽的逐渐增加，人们便将其作为网络上发布信息的首选语言。超文本标识语言的领头先锋是美国麻省理工学院计算机科学实验室的WWW标准化组织，又称万维网联盟，其互联网地址为：。有关HTML语言的各种参考资料和W3C行将发布的各种新版特征、最新消息等内容，均可以在这个网站上查到。此语言可以把网页里的文字、表格、图象、动画、声音和视频等等有机地组织在一起，构成一种超文本标记语言（HTML）。HTML语言生成扩展名是.HTM或.HTML的文件。HTML语言是标准的ASCII文件，由一对标记，<HTML>和</HTML>组成,内容包括文件的头,文件的主体,文件结尾三部分。（3）网站与网页的关系网站是一个主体，是“框架”；网站突出一个主题；网站的目标是组织；网站好比一本画册。网页是被包含于网站之中的个体，是“砖瓦”；网页围绕网站主题各分项，丰富和烘托主题；网页的目标是表现；网页好比画册中的每一个分页。1.3相关知识（1）网页制作的工具虽然HTML语言是功能强且语法简单的网页设计语言。但是，直接用HTML在普通的文本编辑器上编写制作复杂精美的网页是很不方便的。网页设计者不得不花大量的时间去测试所写的文档是否合乎其语法规则，又不能在网页设计的同时就了解文档在浏览器上地显示的确切效果。其次要记忆、掌握大量的HTML语言地语法规则也不是一件容易的事情。而现在可视化网页设计工具可以使得设计者网页设计轻松自如。网页设计的工具很多，当前流行的工具有：Frontpage：它是建立和管理专业网站的简易工具，用户可以精确地将网页中的每一个元素放置在网页地任意位置上；用户可以自定义主题。它具有方便地数据库管理功能，还能提供灵活的网页发布工具。Dreamweaver：它是Macromedia公司设计推出，可以最快的方式将Photoshop等文件移至网页；它能够通过网站地地图快速制作网站雏形、设计、更新和重组网页；提供了可视化编辑与原代码编辑同步的设计工具；集成了动态出版可视编辑及电子商务功能，在动态网页设计中网页的预览无需通过浏览器；利用它设计的网页一般不受平台的限制。Flash：它能制作可任意放大的动画，使用方便，它提供的交互动画文件容量很小，它的使用流技术播放动画。以上三种网页设计工具通常称为“网页设计三剑客”。网页设计的工具很多，常用的还有Interdev，HotmetalPro等等。这里不做一一介绍。（2）网页设计早期的网页外观是静态的，只有文字与静态的图片，用户只能被动地阅读网页制作者提供的信息。其网页的内容也是静态的，若无外来干预，其内容不会自动改变，也无法通过网页实现与访问网页者交互信息的功能。因此，为了克服静态网页的呆板、缺乏交互性等缺点，使网页变得绚丽多彩、充满互动性，动态网页便应运而生。动态网页技术包括网页的动态表现技术与网页的动态内容技术，前者是网页外观的动态表现技术，如GIF动画、FLASH技术、DHTML（动态HTML）技术、VHTML（虚拟HTML）技术、VRML（虚拟实现造型语言）技术等。而网页的动态内容技术是通过一定的计算机语言编程如CGI、ASP、JSP等，使得计算机按照网页设计者设置的网页格式，生成所需要内容的网页并传送给访问网页者浏览。（3）音频与视频随着多媒体技术的发展，人们已经不满足简单的文件传输，电子邮件，远程登陆等网络应用。人们希望网络提供实时交互的服务，如：视频会议、视频点播、远程多媒体教学和网上购物等。音频：通过计算机的声卡等多媒体设备来实现声音的传输和播放。一般有Wave波形音频、MIDI音频和CD音频，MP3视频：通过视频采集和处理实现图象的传输和播放。一般有AVI，MOV，MPEG等格式的文件。（4）简单介绍HTML语言的设计Html语言设计的代码书写可以在写字板或记事本等一些编辑平台中实现。下面举一个简单的实例来说明HTML语言的书写过程和其结构例1.1含有超文本标识的网页源程序。<HTML><HEAD><TITLE>含有超文本标识的网页源程序</TITLE></HEAD><BODY><H2>读书人的三个意境</H2><OL><LI>昨夜西风凋碧树，独上高楼，望尽天涯路。<LI>衣带渐宽终不悔，为伊消得人憔悴。<LI>众里寻她千百度，蓦然回首，那人却在灯火阑珊处。</OL><MARQUEEbgcolor="#87CEFA"width=75%scrollamount=1>⒈昨夜西风凋碧树，独上高楼，望尽天涯路。</MARQUEE><MARQUEEbgcolor="#FFC900"behavior=alternate>⒉衣带渐宽终不悔，为伊消得人憔悴。</MARQUEE><FONTsize="3"color="#FFFFFF"><MARQUEEbgcolor="#FF4500">⒊众里寻她千百度，蓦然回首，那人却在灯火阑珊处。</MARQUEE></FONT></BODY></HTML>例1．2简单的表单设计<formaction=/cgi-bin/post-querymethod=post>您的姓名:<inputtype=textname=网址value=http://><br>密码:<inputtype=passwordname=密码><br><inputtype=submitvalue="发送"><inputtype=resetvalue="重设"></form>1.4网页设计师必备的专业素质网页制作是一个系统工程，一个网页的优劣完全取决于设计者的综合素质和动机。不仅仅是一个技术的问题，还要重视艺术性。并且不可以偏废。技术是基础，艺术是升华，艺术效果表现用技术来实现。好的网页让人留恋往返。这不仅仅是技术的高超，而是艺术效果吸引了浏览者的眼球。所以这是一个综合的系统的工程。小结：网站是爸妈，网页是她们的孩子；爸爸妈妈的行为影响她的孩子，也是孩子成长的灯塔；她的孩子优秀也使得爸爸妈妈荣光。没有爸爸妈妈的孩子是无人问，没有孩子的爸爸妈妈只能孤独一生。《网页设计与制作》课程讲义理论学时部分第二章网页赏析授课学时：1授课内容：2.1网页设计与网站主题2.2各类网站的设计总体框架2.3网页颜色的使用风格2.4网页赏析基本要求：初步了解网页赏析要求；理解网页赏析的理论要求；掌握网页突破性设计的要素；分清各类网站的设计要求和框架；理解实例分析过程。重点与难点：网页的赏析分析。导入新内容：网页界面的构成要素，除了有传统媒体的文字、图形、色彩等基本构成要素以外，还有声音、视频、动画等多媒体要素，以及其他一些特效和交互功能。正因为如此，对于网页的赏析、评测也将是多角度、全方位的。虽说网页界面设计与平面设计非常类似，但也存在着一个很大的差异，那就是网页界面作品具有明确的实用功能，而一般的艺术作品只具单纯性观念。实际赏析和评测网页界面作品的第一点，是看它是否具有完整的功能，其次才是它的艺术效果。优秀的网页界面作品应该是实用的物质功能与审美的精神功能完美的结合。每一个人由于经历、经验、思维方式的不同，对事物的看法、认识常常也是不一样的。网络的基本特征是资源共享，互联网是大众化的网络，是“平民”网。虽然为了追求较完美的界面设计，我们在后面章节将从较专业的角度做了一些探讨，但是为了使“平民”能够接受，能够认同，网页的界面设计应该贴近大众，应该服务于大众。这就要求我们站在一般浏览者的角度，去设计、审视、理解网页作品。“平民”没有理解达芬奇蒙娜丽莎的微笑,但是知道蒙娜丽莎时时刻刻都是淡淡幸福的，能给人们带来无限的快乐。不同的环境不同的心情看到相同的网页都有不同的理解，给人的感受肯定也是不一样的。所以赏析无定规，只看自已识同，用自己的认识水平去理解。纷繁复杂的社会造就了五彩缤纷的网页。形态各异的网页最终谁能够占领市场，其相关的要素很多。但是与网页的设计界面关系是不可以忽视的。一个网页的页面设计完美，震撼，给人们心灵的触动，必然会在市场中有很高的点击率。如何设计点击率高的网页，我们应该从心理学的角度来考虑设计方案和组织。心理学中说到“注意”是人的心理对一定对象的选择集中。纷繁复杂的世界，有限的人的大脑只能在众多的事物中挑选某些特定的对象或说事物来进行反映，而不管其他的事物。所以说“注意”是贯穿心理活动的始终。所以我们经常说“心无二用”酒就是这个道理。网页设计也是一样，要使得人们去点击，必须设计出合乎人的心理的网页界面。设计网页的时候要按照如下几点来来组织设计：有强烈的刺激：一道强光，一声巨响，一种鲜艳的颜色等，这些都会引起人们的注意；有引人的兴趣：凡能满足人的需要，符合人的直接兴趣的事物，都容易引起人的注意。象球讯能引起球迷的注意，音乐广告可以被音乐爱好者的注意，有知识性的信息会给渴望得到的人的注意。有兴趣的话题，就会吸引相应的人群。【3】有巧妙的创意：创意给人震撼，一种心灵的触动，让人们有如听小说“欲说后事如何，且听下回分解”，“余音绕梁，三日未绝”，给人期待。总之，在设计网页之前，必须了解访问者的心理，需要了解访问者的浏览网页的感受，了解他们的耐心程度、年龄和性别，并了解他们浏览站点是为了娱乐、信息还是其他，这会给建立站点时确定色调和个性起到了十分重要的作用和决定性的影响。所以如果要想在众多竞争对手中脱颖而出，在设计时要综合考虑众多因素：从技术角度看要尽量减少带宽消耗因素，使网站去芜存精，删除不必要的细枝末节，让低速访问者也能得到较为理想的访问速度；从访问者的角度看要适当加入声音和视频等多媒体内容，做到有声有色，花开有声。2.1网页设计与网站主题网页设计与网站主题之间的关系归纳起来有三点，第一，设计应满足主题的要求，应该为主题服务；第二，设计使艺术和技术交融，应该是艺术和技术的完美结合。就是说，在保证“美”的前提下，不丧失网站的“功能”；第三，无论是“美”，还是“功能”，都是为了更好地表达网站的主题思想。当然，网站不同，其主题通常也会不同，对于“美”与“功能”的取向也有所不同。例如，我们常用的搜索引擎Google、百度、一搜等，它的功能就是“搜索”，所以说“功能”就是它的主题；而对于某些功能较单一的网站，如个人网站，可以以“美”作为网页设计的目的，它完全可以冲着一个“美”的主题去体现自身的理念，所以说“美”就是它的主题；又例如门户网站，网易、新浪，还有如全球著名的电子商务零售网站亚马逊等，“内容”就是它们的主题。网页设计的优秀与否，取决于设计师对主题的理解与掌握程度，好的页面设计肯定是服从于网站主题，鲜明地突出网站的诉求主题。要使网页从形式上获得良好的诱导力，可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。2.1.1网页突破性设计的要素主题鲜明:网页设计的优秀与否取决于设计者对主题的理解和把握程度，好的网页肯定服从于网站的主题，鲜明地突出网站的诉求主题。网页没有表达网站的主题就好象痴人说梦。没有逻辑，没有条理性，无意义可谈。色彩多变:色彩是自然美、生活美、艺术美的重要组成部分。它代表着情感（绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表深邃），代表着生活。没有色彩的世界是死寂而平淡的。在主题明确的前提下，网页可以用丰富的色彩来烘托主题，让浏览者耳目一新的感觉。给人清新，如坐春风，吃人生果，让人感觉身上三万六千个毛孔都渗透着激情。但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹，脱离主题。文化底蕴厚实:要有文化底蕴，让人回味，让人期待；没有文化的网页也只能算是过眼烟云，随风而去，不留痕迹。（“简约而不简单”广告语）表现夸张:针对某一内容，用夸张的形式表现，来一个艺术的夸张，给人一个全新的理念，全新的概念，全新的感受。常规突破:现在很多设计师突破常规思维，实现主题的表现。合理的结构：网页是传播信息的载体，其结构由各种视听要素组成，以满足人们实际的目标而设计。从整体结构上看其合理性，形式上丰富有条理，组织上有秩序，不单调，不混乱。总之，欣赏、评析一幅网页作品可以从主题的鲜明性、独创性、结构的合理性、色彩的艺术性以及内容的针对性。最根本的是不能偏离主题，只有保证在正确的方向的前提下才能创新设计、合理布局、“涂脂抹粉”、才能获得有效设计；否则，偏离主题的设计再好也只能“束之高阁”。2.2各类网站的设计总体框架门户类网站：门户类网站是互联网中的巨人，通常分为专业领域与搜索引擎类网站，拥有庞大的信息量和用户资源是这类网站的优势。门户网站将无数信息整合，分类，为网上访问者打开了方便之门。调查显示，大多数浏览者都是通过门户类网站来寻找它们感兴趣的信息资源，巨大的访问量给这类网站带来了无限商机。产品类网站：生产与消费是维系社会发展的两大重要支柱，而将两者结合起来的就是形形色色的产品：从传统的衣食住行到现代的通讯、软件、数码产品，浏览者都可以轻易地在互联网上找到。立足生产厂商的角度开发的产品网站是互联网开发的一种重要的形式，借助不断涌现的更具有人性化的网上营销模式，生产厂商得到了产品国际化的流通渠道和便捷、价廉的信息反馈。事实上电子商务已经悄悄地走进了人们地日常生活。从网站设计的角度出发，产品类型的网站重要的是要突出产品的个性，将产品个性与精美的设计融会贯通才是这类网站中的上品。娱乐类网站：娱乐人物总是人们关注的焦点，如果你是一个明星的超级FANS，那么第一时间更多更近地了解你的偶像，岂不是件乐事？通过网络，我们可以更全面地了解我们所钟爱的影视明星。娱乐与广告象是对孪生的姐妹，而广告又是支撑互联网的重要支柱，透过这层关系我们也就不难发掘这类网站的黄金本质了。游戏类网站：同世界各地的朋友并肩作战，或是棋逢对手地较量一番，真是人生的一大乐事，“游民”是个新兴的网络群体，主要是以年轻朋友居多，理所当然是游戏类网站的主要客户群。面对如此年轻、庞大的用户群，在线游戏网站及相关的游戏资讯网站也如雨后春笋般应运而生。游戏类网站由于本身固有的强大娱乐性和完善的交互设计经验，使得无数“游民”废寝忘食，这为游戏公司带来了滚滚财源。随着技术发展的突飞猛进与带宽环境的日渐改善，游戏类网站形式和内容有了很大的突破，可以说在线游戏已经迎来了一个美丽的春天。时尚类网站：对于充满活力而不安于现状的人来说，时尚类网站是他们梦想的乐园。时尚像个非常善变的美女，总是让你捉摸不透而难以追逐。名模、靓衫、宝马、香车总是给人无限的遐思，各种设计理念的交汇与撞击首先在多变的时尚大潮中，进而引发流行时尚的燎原之势。音乐类网站：在线音乐的发展经历了一波三折的过程，不论这个有多少起伏，能让一首新歌一夜之间传遍全球的也只有互联网。大多数音乐网站提供乐在线的音乐欣赏，这在一定程度上起到乐传统唱片行业发行方面的推进作用，即便是当初最反对网上传播MP3的SONY唱片不也正在积极寻求在网上销售唱片的新方式吗？看来防川之水在于“疏”而不在“堵”。杂志类网站：杂志类网站是传统媒体融入互联网的新形势，依托原有的影响力以及专业的咨询，轻松地在互联网中站住了脚，这类网站通常还带有书面出版物的很多特征，而实时的资讯更新与反馈使得杂志类网站如虎添翼。更有很多原来隶属于杂志社的网站由于在互联网上取得的成功，得以独立成为全新的多媒体杂志。传记类网站：为名人建一座网上展览馆也是非常有意思的事情，让更多的人去了解他而从中获益，这是数字时代对名人对伟人的纪念方式。目前单纯介绍人物的网站不是很多，面对日趋激烈的竞争形势，对于正在求职的毕业大学生而言，动手制作一个类似的网站将是非常出色的名片，或许能帮助你在众多竞争者中脱颖而出，当然如果参加网上求职岂不是更加方便？个人类网站：个人网站是互联网中色彩最为绚丽的风景。这里提供了充分展示个性的空间，可以说这些多姿多彩的个人网站就是互联网的基石，互联网正是因为亿万人的参与才会如此丰富，也是因为你、我、他的加入才使得互联网深深植根于我们的日常生活。2.3网页颜色的使用风格配色最先映入眼帘，它决定了主页的印象配色是观者访问主页时目光无法回避的设计要素。在看标题前的一瞬间已被决定了的配色效果不可轻视。不经意之间，观者对主页的印象就被固定下来。正如初次拜访别人家，在看清门牌之前，通过建筑物的外观和院子里的树木形状就可以把握那家人的性格一样。配色印象无法更改配色形成的印象非常稳固。不知不觉之间，印入心灵的影像就被牢牢锁定了。无论后面提供的新闻品质如何，配色效果就如同空气一样无声地环绕着整个主页。由浅色构成的主页，无论内容多么热烈，与淡淡的气氛混合之后，留下的还是淡淡的回味。配色不分场所，具有多重效果插图的内容或标题和配色的印象一致时，就能发挥最大的效用。欢乐的图画与欢乐的配色相叠加，传递出发自内心的喜悦。相反，与图画和标语的印象不和谐的配色，会引起混乱，产生破坏性效果。配色没有专用的场所，它与文字和图画相互协调，发挥着综合性作用。=1\*ALPHABETICA色调的选择配色决定印象的主要因素有以下三个：l色调——鲜艳的色调、柔和的色调…2色相——同系色、对比色、全色相型…3对比——强明暗对比、相同明度的弱对比…在这三项之中，最有决定权的是色调。例如，A是最鲜艳的色调，表现出充沛的精力和强大的力量。在这个色调的范围内，无论在色相和对比量上下多少工夫，都无法表现出稳重的印象。色调是明度与纯度的交点表示色彩的基准类型有色相、明度、纯度三种。这叫做色彩的三属性。明度和纯度交叉点叫色调，是色彩的第四个属性。色彩的四种属性1、分析色调=1\*GB3①鲜艳色调不与白、黑、灰进行混合的、只有纯色的配色是最鲜艳的色调。给人强有力的、生机勃勃的、年轻人的印象。=2\*GB3②亮色调将鲜艳的色调稍稍加一点白就成了亮色调。与=1\*GB3①相比，略微温柔一点，表现出乐趣，是大多数人的最爱。=3\*GB3③淡色调将=2\*GB3②再加白就成了这种色调。让人联想起婴儿的肌肤，给人以最温柔的印象。远离商业性印象。=4\*GB3④中间色调将=2\*GB3②的色调加一点黑就成了这种色调，是沉稳的成人的印象。=5\*GB3⑤浅浊色调将=3\*GB3③的淡色调稍稍加一点灰，就产生了明亮但不过于鲜艳的稳定的都市性印象。=6\*GB3⑥暗色调将=2\*GB3②的明色稍稍加上灰就成了暗色调。并不是=1\*GB3①、=2\*GB3②、=3\*GB3③那种单纯明快的气氛，而是表达了一种沉稳而安静的、素雅的气氛.=7\*GB3⑦深色调将=1\*GB3①的纯色加上黑色，就成了这种色调。传达了有力、强烈的男性印象。用色调表示年龄层用色调表现性别=2\*ALPHABETICB色相的效果=1\*GB3①同系色与同类色我们用红、黄、蓝这样的称呼来区别颜色，这种颜色的差异就叫做色相。看看将色相放置在圆周上的色相环图，就能更准确的理解各种颜色的关系了。色相环上相邻的色相群叫做同类色；相反方向的颜色叫对比色。根据这个位置关系，来进行配色变化。相邻的颜色具有稳定感色相环上位于同一。场所的颜色叫做同系色，距离很近的颜色叫做同类色。在这个范围内进行配色，传达了稳重而安定的印象。但是，这是自然界中不常存在的配色，所以实际上反而不自然，也可以说是内向的世界。通过色相环掌握他们的关系=2\*GB3②对比色与准对比色公开性强的商业性印象在色相环图上，正相反位置上的颜色叫做对比色，并不是正相反但是在相反一侧的颜色叫做准对比色。强烈的对比可以造成强烈的印象。与同系色不同，相反方向的、相互冲突的颜色混合在一起，画面的开放性就增强了，整体印象也变得轻松舒畅，强化了既重视信息又具有较高公开性的印象准对比色=3\*GB3③全色相（喜庆型）全色相具有开放的气氛从色相环上没有偏差的取出色相，开放、热闹、像节同一样的两己色就产生了。既不是同系色那种只有朋友的世界，也不是对色那种激烈的对立关系，全色相给画面带来随时随地都可以参与进去的气氛，这恰好是适合节日气氛的色相=3\*ALPHABETICC色彩的4种功能角色 =1\*GB3①主色主色突显主题在舞台上，主角站在聚光灯下，配角们退后一步来衬托他。配色上的主角也是一样，其配色要比配角明显清楚、强烈使得观者一看就知道那是主角，从而使视线固定下来，也能比较放心。画面整体统一，观众的情绪也就稳定下来。=2\*GB3②支配色（背景色）背景色支配气氛舞台的中心是主角，但是决定整体印象的却是背景色。无论主色多么华丽，如果背景色十分素雅，那么整体也会变得素雅；背景色如果明亮，那么整体也会给人明亮的印象。=2\*GB3②壁纸（背景色）提高格调用花纹、文字或具象图案构成的壁纸，效果类似于边框和背景色，能够表现出稳重的格调。运用细花纹可以表现安静和沉稳的效果；运用对比强烈的色调则会产生传统和信心十足的感觉。壁纸对于想传达趣味性强、稳重和格调高的网页有所增益，但与商业信息为主体的网页就不相匹配了。将①检索型网页整体铺上壁纸，商业性的印象就会减淡。=3\*GB3③融合色（能够溶在一起的颜色）反复融合在画面上不同的地方涂上相同的颜色，通过颜色的反复效果使同样的颜色产生共鸣，从而让画面具有整体感。中间对着左边，上边对着下边，这样把分开的地方涂上共同的颜色，像回音一样相互呼应，画面的整体就融合在了一起。将给人印象深刻的颜色分开配置融合色在画面上距离越远，产生共鸣的效果就越强。靠得太近反而变成一块，既无法相互呼应，也不能产生动态效果。而且，要尽量使用给人印象深刻的色调才会更有效果。越是鲜艳的颜色，越能表现出活跃的动感。=4\*GB3④强调色用小面积强烈的颜色加强紧张感画面整体使用压抑的颜色，然后在一小块面积上使用强烈的颜色，就能够起到着重强调的作用。整体的色调越压抑，越有效果。因为有了重点，画面整体也产生了轻快的动态，一个栩栩如生的网页就产生了。色彩多强烈也不过分面积越小，着重的效果越强。因为面积小，所以无论使用多么强烈的颜色，画面依然能够保持清爽。同样因为面积小，整体印象也不会受到影响。放心的使用能想到的鲜艳颜色吧。2.4网页赏析：举例说明各个网站的特点。（1）、北京2008奥运会：白色底为，表示纯洁，竞争的公平；红色加强了喜庆味和中国味。设计师大胆地采用了纯度较高、对比强烈的颜色组合，造就了网站的生动活泼的个性。无论从信息的流量还是业务范围讲，都称得上搜索引擎类网站中的佼佼者。她简洁明快的设计给人们提供了一个舒适的搜索空间，而且在诸多领域中的业务拓展，也赢得了广大用户的信任。这是主题和功能。（2）、百度搜索：在界面设计中使用全白色，醒目的徽标“百度”特别显眼。无形中给人们带到了一个广袤无边的宇宙空间，享受“众里寻她千百度，蓦然回首，那人却在灯火阑珊处”的美好意境。（3）、HAO123网站：百度是以“简约”著称。而HAO123却象是一个“大卖场”，没有奢华的色彩，没有精品店装饰的夺目耀眼。但是她强化了功能性的细分类，分设了新闻、科技、音乐、文学、电子商务、下载等等，并根据你的查询提供搜索，可谓方便之极。你能不说她是真正好网站吗？（4）、Pixar动画工作室：这是著名的Pixar动画制作室的作品，Pixar动画制作室运用艺术技巧在计算机动画领域创造性地制作出了许多独特新颖的动画巨片，它创造的动画常常能出其不意，又贴近生活，感染力极强。

（5）、故宫博物院：故宫的网页设计凝重，有厚实的文化。给人有历史的感觉。让人遐想皇宫的生活，来点击观看这段历史的希望。它采用了朱红的色系，用有很多铆钉的大门作背景，加上五爪金龙作近景，更加给人向往和森严感。打开门之后，又给人有种清新的感觉，又有历史不陈旧味。（6）、中国黑客联盟：中国黑客联盟网站大量使用了黑色为底色，用兰色的粗体大字来突显站名，又用了反差较大的黄色很小的字“进入主站”来提示“站门”的所在，象遥远处忽明忽暗灯塔还是幽灵的晃动？用色简单质朴，给人的感觉是怎样呢？是威严还是恐怖？是进入了天堂还是地狱？进去吧，结果谁能知道呢？向往还是恐惧？这正是黑客的行为心理，突出了主题元素，表现得淋漓尽致。是不是还有点“未经一番寒彻骨，焉得梅花扑鼻香”的感觉呢？（7）、柯达相机：（一）豪放而不失风情。（二）惊心骇目，强烈的震撼。（三）色彩掩盖不了它的豪迈气派。气象境界凌厉无前。（四）诗中说：“关东大汉，执铜牙铁板唱大江东去。”感叹大声铿锵，哪里还需要铜琵琶、铁绰板来伴唱呢？此时的无声胜有声，花开有声了。（8）、百威啤酒：作为啤酒生产商，百威网站的设计侧重于文化，优美的意境与情趣的追求。浏览者可以在这里领略到美与啤酒文化的完美结合。设计的颜色如同典雅、高贵、高品位的酒吧陈列柜，陈列了不同品种的啤酒，让点击者总能找到适合你的口味的百威啤酒。发挥艺术的感染力，让人们不禁垂涎三尺，当然网站的客户也就门庭若市。（9）、Rabbit游戏：网站的用色丰富，非常讲究，充满了神秘之感。图形和文字处理不落俗套，精细入微，三维立体感特别强烈，有稳于泰山之势，胜者为王的非凡气度。游戏的赛场区域有很重的金属气息。这种设计为网站平添了几分神秘的气息。总结：在实际应用中网页应当在满足完成功能的前提下才能讲究艺术，如果一帧页面无法完成其基本的表现或操作功能，则这样的页面再“美”也是无用的，因为网页的艺术性、欣赏性是服务于功能的。了解了网页界面的设计技术和方法，并将其融入自己的思想，消化理解，构成自己认识世界、认识设计的较完整的思维理念，才能有根有据、有凭有证，由里及表、由表及里地评测、鉴赏和判断设计作品的优劣。《网页设计与制作》课程讲义理论学时部分第三章网页规划与布局授课学时：1授课内容：3.1网页的组织结构3.1.1首页的结构3.1.2一般页面的结构3.1.3网站页面的组织结构3.2网页内容上的组织3.2.1综述3.2.2组织网页的方法3.3网页设计流程3.3.1综述3.3.2网页目标和风格3.3.3内容组织3.3.4页面的组织原则3.3.5网页制作3.3.6测试3.3.7发布、推广3.3.8反馈、评测基本要求：了解网页的组织结构，掌握网页内容上的组织方法；熟悉网页设计的流程和注意事项；熟悉网站设计，掌握网站与网页的区别。重点与难点：重点：网页规划原则，网站规划及其步骤；难点：网页规划和合理布局。3.1网页的组织结构综述网页的内容和组织取决于网站的主题和定位。确定了网站的定位和模式，就可以对网页的内容进行组织、规划和布局。3.1.1首页的结构首页(又称主页)是网站的脸面,是企业、商家或政府机构等形象代表。首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页链接、最新报道、联系方式、招贤纳士和栏目简介等。首页应视一件艺术品，精雕细琢，供浏览者欣赏和享用。但是不应该放广告，特别不能放很多。不应虎头蛇尾。不要机关重重。3.1.2一般页面的结构一般页面也称子页面，其结构往往是依据要表现的内容而定，形式比较单一。页面的主题突出，取向性强，主要用于描述同一类事情，如图片或文字，其表现力可以弱于首页，但是风格、模式和色彩上应与首页保持一致。3.1.3网站页面的组织结构页面的内容取决于网站的类型,而网站又是由一帧帧的页面有机组合而成。网站除了内容丰富、可读性强以外，在内容的组织上应该做到层次分明、严谨清晰。一般来说，设计网站常常采用顺序结构、层次结构、网状结构或复合结构来组织页面。1.顺序结构：它适合组织一些顺序性较强的页面内容，如电子图书，产品描述等，只需要简单地按照一定的顺序浏览即可，这样的结构很象幻灯片的演示。X2.htmX2.htmX3.htmlX4.htmX1.html2．层次结构：是最基本的一种网页组织形式。其优点是前后顺序清楚，关系明确。每一个页面在水平方向有极为密切的上下级关系，在竖直方向上具有并列关系。X1.htmlX1.htmlX6.htmlX4.htmlX5.htmlX2.htmlX3.htmlX7.html3．网状结构：是网页之间连接灵活，是一种较为人性化的设计。X1.htmlX1.htmlX6.htmlX4.htmlX5.htmlX2.htmlX3.htmlX7.html4．复合结构：在网页设计中页面之间的组织结构通常是不会采用以上单一的结构。而是使用两种或两种以上的结构，称为复合结构。3.2网页内容上的组织3.2.1综述建设网站的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的内容的有效组织是必不可少的。网站的内容丰富，信息量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳重复利用，使得网页较为整齐，脉络清晰，重点突出。3.2.2组织网页的方法1.突出个性：要使所设计的网页内容独特、个性鲜明，在网页的设计初期要仔细斟酌每一帧网页的性质，突出本页面的核心内容。2.具有可读性：每个网页的内容要精练，避免长篇累赘；背景颜色不可以太艳，背景图案不可以花哨，不能喧宾夺主，要与正文适当的搭配，易于阅读。3.完整性强：应当尽量把联系紧密的内容放在同一帧页面中，使得每一帧的内容相对较为独立，具有较好的完整性。4.布局合理：网页设计作为一种视觉语言，必定要讲究编排和布局，虽然网页设计不同平面设计，但是两者有许多相近之处，可以充分加以利用和借鉴。网页设计通过文字、图片的恰当组合，表达和谐与美，使得整体布局合理、有序，做到既丰富多样又简洁明了。可以通过视觉要素的理性分析和严格的形式构成，来提高对整体页面的把握能力和审美能力，使得页面达到最佳的视觉表现效果，较完美地体现设计者的思想和本页面的主题。5.重要信息放置在首页：眼睛是心灵的窗户。我们把报纸的最显眼的地方称报眼报纸的眼睛。网页也是一样有最显眼的地方此处也是应该较为重要的或是最新的内容的放在主要的地方。可以通过导航栏或将重点信息、论点等置于页面的醒目位置，还可以通过弹出窗口来发布重要要信息。3.3网页设计流程3.3.1综述发布、推广测试网页制作内容组织确定目标和风格发布、推广测试网页制作内容组织确定目标和风格反馈、评测反馈、评测3.3.2网页目标和风格：网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。除了突出主题，形成特色以外，还应该调查用户群的需求，通过了解他们的兴趣爱好、关心话题、反馈意见，不断地调整和修改网页内容，以求吸引更多的浏览者。网页内容的组织、整理最好能遵从以下几点：1。组织的内容确实对浏览者有用，确实围绕所定义的目标和所定向的群体，不要大而全覆盖面过广；2。内容有特色，有自己的独到见解，尽量避免平淡乏味；3。所提供的内容、超链接等要保证正确无误，设计完成之后一定要认真测试。3.3.3内容组织建设网站的第一步是收集资料，怎样分门别类，将这些素材合理地分配到由超链接组织起来的不同网页中，使自己的网页能吸引众多的浏览者，网页内容的有效组织是必不可少的。网站内容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来也有重点。如文字的合理编排，图片和文字的有机结合、前后呼应等等。内容较少的网站虽说同样需要条理化，以达到更为富有变化和清晰的视觉效果，但相对于前者的难度将大为降低。只要安排合理，使页面达到平衡，即使在页面某处大面积留空，也不会使人感到空荡，相反会给浏览者留下一个广阔的思考空间，耐人回味。3.3.4页面的组织原则1首先将页面含盖内容的整体布局的需要进行分组归纳，进行内在联系的组织排列，反复推敲标题图形与整体版面的关系，创造秩序使版面各元素成为丰富多彩而简洁统一整体2较长的文章或标题，不要编排在一起，要注意安排一定的距离。对待图片的安排也是，要互相错开，大小之间要有一定的间隔，这样可以使页面错落有致，避免重心偏离形成稳定形态。3较长的文章或标题，不要编排在一起，要注意安排一定的距离。对待图片的安排也是，要互相错开，大小之间要有一定的间隔，这样可以使页面错落有致，避免重心偏离形成不稳定形态。4页面有很多内容的时候很忌讳混乱，各部分内容各自为政、跨度太大，这样消弱了整体的可读性，让人抓不住核心内容。3.3.5网页制作网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。除了突出主题，形成特色以外，还应该调查用户群的需求，通过了解他们的兴趣爱好、关心话题、反馈意见，不断地调整和修改网页内容，以求吸引更多的浏览者。网页内容的组织、整理最好能遵从以下几点：1。组织的内容确实对浏览者有用，确实围绕所定义的目标和所定向的群体，不要大而全覆盖面过广；2。内容有特色，有自己的独到见解，尽量避免平淡乏味；3。所提供的内容、超链接等要保证正确无误，设计完成之后一定要认真测试3.3.6测试当所有网站页面制作完成之后，我们需要对每一帧页面进行审查和测试，测试内容主要包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，是否达到最初的设计目标和所要表达的内容，实现所规定的功能；浏览者是否可以方便、快速地寻找到所需要的内容。完整性测试就是保证页面内容显示正确，链接准确无误，无差错无遗漏。3.3.7发布、推广整个网站设计、测试完成以后，就可以去寻找ISP(InternetServiceProvider，互联网服务提供商)，将网站的所有内容上载到互联网上。发布网站的方案有多种，其中主要采用三种方案：①虚拟主机；②主机托管；③主机租用。在选择ISP时，最好还能了解ISP具有的服务能力和服务环境等内容，如：⑴服务器的硬件配置(包括服务器的类型、CPU、硬盘速度、内存大小、网卡速度等)⑵服务器所在的网内环境与速度⑶服务器所在的网络环境与Internet骨干网相联的速率⑷ChinaNet的国际出口速率⑸ISP与ChinaNet之间的专线速率⑹ISP向客户端开放的端口接入速率⑺用户自己的计算机配置、Modem的速率、接入线路的质量等上载后的网站往往希望大量的浏览者访问，提高自身的知名度，提升网站所有者的形象。我们可以尝试使用以下方法：⑴利用传统媒体(如广告、公关文档、促售宣传等)；⑵像对待商标一样，将网址印制在商品的包装和宣传品上；⑶与其他网站交换链接或购买其他网站的图标广告；⑷向互联网的搜索引擎网站提交本站点的网址和关键词；⑸在主页面的原代码中，使用META、TITLE标识加入网站的关键词，以利识别检索；⑹向访问率较高的导航网站，如雅虎、搜虎等注册；⑺通过在网站上设立有奖竞赛的方式，提高点击率。3.3.8反馈、评测网页设计的优劣是通过浏览者的认可而得出的，我们可以使用计数器、计时器、留言板、调查表以及有奖问答等形式收集数据，分析网站或某个网页被访问的次数或浏览者停留的时间，评测网页的设计或内容的新颖程度。设计出达到用户目的的网页，吸引尽可能多的人参观访问是一个值得研究的课题材。一定要注重信息的调整、更新和修改，使网页内容始终处于一个不断发展，日趋完善的动态环境中。能够吸引大量的浏览者访问网站只是成功的一半，若以新奇的版式、独特的内容和服务使浏览者再度来访，或向其他人介绍网址，宣传网站的内容，才可能是真正的成功。《网页设计与制作》课程讲义理论学时部分第四章网页设计创意授课学时：1授课内容：4.1网页创意设计中的基本要素4.1.1网页中的文字4.1.2网页中的图像4.1.3网页设计中色彩的属性及其应用4.2网页创意设计的程序4.2.1前期策划基本要求：通过对创意思维及创意手法的讲解，辅以对优秀网页作品的分析，启发学生全面的创新思维，进而从多角度的思维中独树一帜，培养学生的个性化意识。让学生对优秀设计的创意进行解读和阐释，并分析其创新之处，鼓励学生敢于发掘新意，提出自己独到的见解。重点与难点：启发学生全面的创新思维，培养学生的个性化意识。如何掌握不同性质网页的创意设计技巧。4.1网页创意设计中的基本要素任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接的效果。4.1.1网页中的文字在网页中,字体往往占据了很大的空间和页面,单一形态大小、颜色的字体，虽能传递信息，但不免让人们感到疲劳乏味。一.字体的设计方法：根据文字内容的属性及网站的主题可以适当的作如下变化。1.改变文字大小、比例人们已经习惯正常的视觉大小,突然间的变化会产生新的视觉感受,产生重新审视的兴趣。2.改变字体形态局部改变整体改变措施:拉伸、挤压、扭曲、撕裂、切除、省略、替换、粗细变化。3.文字的三维效果真实的空间：眼睛看得见，手能摸得到的。虚拟的空间：眼睛看得见，而不能触摸得到的。措施：添加投影、浮雕、透视效果，产生矛盾空间。4.色彩的改变色相、纯度、明度5.机理及质地纹理的改变及不同质感效果6.置换及同构将文字中部分笔画用实物、图形、符号、色块等替换，或利用文字外形与某一事物的相似点进行变化。二.文字的组合方法与形式1.字体的大小组合将大小不等的文字放到一个平面上进行组合，这样大的文字相当于一个图形，而小的文字就成为可供阅读的文字，或将小的文字编排成图形而大的图形成为主要的文字2.汉字与拉丁字母的组合如：“HONGKONG”与“喜”字的组合。3.汉字与具象形体的组合如：“永久”牌自行车标志“胖子”服饰4.文字组合的处理手段(1).添加法根据文字内容,笔画的多少进行添加文字的组合因素。A.添加与内容相关的文字B.添加与寓意相关的图形(2).删除法在不影响识别的前提下将某些笔画删除(3).重叠法将文字组合因素重叠为一体，产生富有层次的效果。(4).连笔法将文字组合因素产生连贯的整体感，可将两个以上的文字笔画连起来。(5).适形法将文字组合因素适合在一个图形内，产生适合图形的效果。(6).共用法将所设计内容的两个以上的文字笔画偏旁部首共用，产生你中有我我中有你的视觉趣味。(7).虚实形共用实为笔画，虚伪背景。利用实形周围空底显示字的形产生虚实相间的视觉效果。(8).几何形利用不同的几何形状构成文字,给人以自由和轻松感，现代感强5.文字编排的形式A.竖排式B.横排式C.斜排式D.曲线式E.渐变式运用文字字体大小产生渐变的效果。F.重叠式由句子重叠体现构成图形。G.分离式拉大字与字之间距离，形成点壮效果。(2).文字的头尾编排形式A.齐头散尾式B.散头齐尾式C.齐头齐尾式D.中轴分离式文字排列时从中间向两边分开,突出中间的垂直空间。E.分插式行与行之间的关系上、下、左、右曲直交叉，长短参差、错落地排列。F.自由式行与行不规则地排列，形成繁杂的视觉效果，其阅读功能减弱，作为背景图形用(3).图形化的文字编排效果运用大量的文字组成平面的或立体的图形，文字与图形的结合形成了有趣的、有视觉内涵的编排形式。4.1.2网页中的图像图形是一种视觉信息传递媒介，较符号文字在传递信息上的优势：易识别、不受地域、国度、知识体系等众多因素的影响。图形图象往往来源于现实世界的影像照片，在造型规律上有很强的客观制约性。所以设计师在对网页优化时应对图片作二次处理、加工，而处理时应从以下方面入手。图形图像的基本表现技巧：一.面积与视角图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人精巧细致的感觉。1.平直的视角给人一种平稳、安定、规矩的感觉。2.非常规的视角如：倒置、旋转、仰视、俯视增强画面动感，更具强烈的视觉冲击。二.局部与特写对于整体的图像局部与特写能让视线更加集中，这种手法有点到为止，意犹未尽的感觉。局部放大，重点表现这一部分，称为特写。特写能对图像产生瞬间的凝视，引发浏览者的兴趣点。三.合成与组合图像的合成是指用计算机将多幅图片的不同内容有选择的合成一个图像，合成后的图像传达更丰富的信息，能更集中的体现创意。图像的重要程度可以因面积、摆放位置、组合方式的不同而有所不同。四.虚实和影调图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。五.退底与轮廓图像的退底是仅保留所选图像，而将沿图像边缘的背景去掉，退底后的形象的外轮廓成自由形状，具体清晰分明的视觉形态，显得灵活自如。4.4.3网页设计中色彩的属性及其应用设计精良的网站总有其色调构成的总体倾向,以一种颜色或几种临近颜色为主导,使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。一.与网站风格色彩是网页设计中很难把握的重要方面，是确立网站风格的前提，网站色彩的倾向，决定着网站给浏览者的第一印象。如：活泼、庄重、雅致或热烈。二.色彩原理“色彩是破碎了的光，太阳的光与地球相撞，破碎分散，因而使整个地球形成美丽的色彩。”1.色彩的三要素明度、色相和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。(1).明度明度指色彩的明暗程度。(2).色相色相指色彩的相貌。如：红、黄、蓝、绿等。(3).纯度纯度指色彩的纯净程度，纯度越高，色相感越强。2.色彩的分类：原色、间色、邻近色、对比色、互补色3.色彩与心理色彩对人们头脑和精神心理的影响是客观存在的，如：色彩的知觉力，色彩的辨别力，色彩的象征力及情感。(1)色彩的感觉A.色彩的冷暖色彩的冷暖与人们对世界的经验分不开。如：阳光呈现红、橙、黄、等颜色，所以人们一看到红、橙、黄等色就联想到火热和烈日给人们的感受，故称“暖色”B.当人们看到绿、青蓝色时会与寒冷相联系.如冰川、海洋、夜空、树荫等色彩的冷暖归属不能一概而论，在特殊情况下，色彩的冷暖感觉会发生变化(2).色彩的进退和胀缩感觉a.长波长的暖色有前进的睡眠的感觉，短波的冷色有退缩的感觉b.明度高的色彩光量多、色刺激犬，有前进膨胀的感觉，反之有退缩的感觉c.不同北京的衬托也能产生前进、涨缩的感觉(3).色彩的轻重和软硬感觉明度高的色彩给人轻的感觉，明度低的色彩给人重的感觉。在色相方面，暖色给人轻的感觉，冷色给人重的感觉给人轻的感觉的颜色均有软的感觉，给人重的感觉的颜色均有硬的感觉(4).色彩的艳丽与素雅色彩饱和度高，亮度高的色彩艳丽，反之素雅(5).色彩的记忆性人们对色彩的记忆，由于年龄、性别、个性、职业、经历、所受教育、自然环境、社会背景的不同差异很大一般说来记忆性色彩强的色彩为：暖色、名度高、纯度高记忆性弱的色彩：冷色、明度低、纯度低(6).色彩的联想与象征：色彩的联想是通过以往的经验、记忆或知识将当前的色彩与其他具象或抽象及相联系起来的过程常见颜色的联想：a具象联想红色：血`火，太阳橙色：灯光柑橘秋叶都市黄色：光柠檬迎春花食品绿色：草地树叶禾苗蓝色：天空宇宙水冰紫色：丁香花葡萄茄子黑色：夜晚墨石炭白色：雪牛奶白云面粉灰色：乌云铁木b抽象联想红色：热烈热情危险活力吉祥喜庆夏季传统橙色：温暖欢喜嫉妒华丽甜蜜兴奋黄色：光明希望快活平凡权利清爽安静蓝色：平静神秘悠久理智深远科学快捷紫色：优雅高贵注重浪漫神秘女性温柔虚幻魅力黑色：严肃刚健恐怖死亡罪恶坚硬沉默绝望悲哀男性机械灰色：平凡天意谦逊灰心无聊消极谦虚随便（7）人对色彩的情感最基本的情感表现：好恶情感的差异的原因：a.年龄差异，年龄高：冷色明度纯度低年龄低：明度纯度高b．性别差异：男性：冷色或纯度高的色彩（如黑.灰）→色调集中女性：暖色.纯度较低的粉色及白色→色调分散c.种族差异原因：生活环境.社会文化.历史.宗教信仰等不同中国：红黄蓝天蓝浅蓝美国：淡黄红明灰明蓝法国：黑灰红蓝绿白德国：黑白天蓝咖啡菲律宾：淡黄蓝绿印度：红黄蓝绿埃及：绿红黑蓝绿三.web设计中的色彩应用原理确立网站色调确立网站色调的过程⑴决定主体色⑵选择辅助色⑶选择背景色⑷色彩调整确定主页的题材后，要了解哪些颜色适合哪些网站，如影视题材的站点，基本任何颜色都适合，但用黑色或深色则更符合夜间观众的视觉感受页面色彩搭配⑴色相相比⑵明度对比⑶饱和度对比⑷补色对比⑸面积对比⑹调和色调3.调和色彩的基本法则⑴建立主调统率页面色彩关系⑵善用金银黑白灰等中性色缓解中和，以烘托主题⑶拉开距离（从纯度和明度.面积上着手）四.色彩意象的设计应用当我们看到色彩时，除了感觉其物理方面的影响，心理也会立即产生感觉，这就是色彩的意象红色的色彩意象由于红色容易引起注意，所以在各种媒体中被广泛的采用；除了具有较佳的明视效果之外，更被用来传达有活力.热诚.温暖.前进等涵义的企业精神与形象。另外红色也常用来作为警告.危险.禁止.防火等标志用色.(例:中国人一看见红色就充满了喜悦和激情)2.橙色的色彩意象橙色明视度高，在工业安全用色中。橙色是警戒色。如火车头、登山服饰、救生衣的设计大都含有橙色。由于橙色明亮刺眼，有时会产生负面低俗的意象。所以运用时，要注意色彩的搭配及表现形式。由于符合大自然创造的色彩搭配模式，橙色与具有一定灰度的绿色搭配效果较好。3.黄色的色彩意象黄色明视度高，同样在生活中属警戒色（如交通标志上黄灯）高亮度的黄色在页面设计中很少大块面的出现，多半由于颜色本身过于刺眼，造成浏览者视觉的不愉快。但与黑色搭配较好，会强烈突出主体。在细节部分使用效果更加。4.绿色的色彩意象在页面设计中，绿色所传达的清爽、理想、希望、生长的意象。符合人们接近自然的生理需求。绿色在设计中应用很广，在工业上许多机械采用绿色，医疗机构场所，也常用绿色作空间色彩规划。5．蓝色的色彩意象由于蓝色沉稳的特性，具有理智、准确的意象。在商业设计中，强调科技、效率的商品或企业形象。大多选用蓝色作标准色。如：电脑、汽车、摄影器材等。另外受西方文化的影响。蓝色作为页面基调能营造出深邃、忧郁的意境。用其展示博大的胸怀或感性诉求方面比较合适。6．紫色的色彩意境紫色由于其强烈的女性化的性格，在商业设计用色中，受到相等大的限制，除了女性有关的商品或企业形象外，其它类设计不常作为主色调使用。紫色被称为“魔鬼”颜色。深紫色会造成恐怖的气氛，对比气体颜色较难控制紫色也有其优点：是高贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题材。7.褐色的色彩意象在商业上褐色用来表示原始材料的质感。如麻、木材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、麦类等，或强调古典优雅的企业或商品形象。8白色的色彩意象白色具有高级，科技的意象。痛需和其他色彩搭配使用。纯白色绘入寒冷，严峻的感觉。所以在使用白色时，都会搭配一些其他颜色。如象牙白、米白、乳白等。白色是永远流行的主色调，是能和任何颜色搭配的万能色。较容易控制。9.黑色的色彩意象黑色具有高贵、稳重、科技庄严的意象。黑色也是一种流行的主色调。适合与许多色彩搭配。以黑色为主色调可以创造出神秘的气氛，另外稳重的黑色可以烘托主体超凡气质和美感。10.灰色的色彩意象灰色具有柔和，高雅的意象。属中间色，男女皆能接受，所以，灰色也是永远的主要颜色。许多科技产品，尤其是和金属材料有关的，凡平却来用灰色来传达高级，科技的形象。以灰色作为设计的基调是当前设计流行的做法，在缓和过对比造成的强烈的反差，灰色显示了其杰出的能力。五、网页设计的配色技巧色彩的意象可以延伸设计潜制的效果。网页设计新手可能喜欢选用一些漂亮的图片作为色彩背景。但浏览一下大型网站，会发现它们更多的运用的是黑、灰、蓝、绿、黄等。其他的色彩作为背景。使得网页显得典雅，温馨而又不失活泼，同时大大加快了网页加载的速度。1.运用色素这里指在主色调选定的基础上，调整色彩的透明度或饱和度。将色彩变淡或加深调出新色彩或选用邻近色，使用页色彩统一、有层次感。2.使用对比色可以充分的利用补色原理进行搭配，同时注意使用灰色调进行调和，这样的作为色彩丰富，意境深远。3.用黑色与明度，纯度，饱和度高的色彩搭配对比强烈。不光雅致的同时更容易吸引眼球。4.文字与背景色的搭配深色字体配素淡，柔和的色彩，读起来自然流畅，深色字体搭配鲜明的字体。如字体作为装饰性来表现出观而选择中间色调明时，纯度可适当降低。总结；要想将色彩自然和谐的运用于网页设计中，使网页获得生命力。大自然是最好的老师。春夏秋冬都恩能够使设计和谐优美。色彩运用中应注意的问题；国家、种族、宗教信仰、风俗地理位置、文化修养、性别、年龄。例:儿童喜欢对比强烈，生活在草原上的人喜欢红色，生活在闹市中的人喜欢淡雅的颜色，生活在大沙漠中的人喜欢绿色。4.2网页创意设计的程序4.2.1前期策划：一,明确设计任务一个设计师:在接受任务之前,必须搞清楚服务对象的基本情况和意图,弄清楚所要设计的是一个什么样的任务.企业设计网站的原因很多:宣传新公司或服务的需要旧网站的改版、更新………………二.调查研究与分析任何主页都要根据主题的内容形成风格,只有熟悉题材和内容设计工作才能有的放矢,取得理想效果.分析的内容包括:1.目标市场分析分析受众群体的文化水平,价值观念,所在的国家,民族及喜好等。2.同类行业网站分析同类行业网站的总体色彩风格,排版布局,页面内容的选择及表现形式等。三创意开发由单图表现开始,确定设计方向,题材,构思多个方案,尝试从不同角度,方向,不同方式对网页主题进行挖掘和表现,然后将材料进行整理,选择其中较好的进行发散.四.修改及定案应收时的听取多方面的意见及时对收集材料汇集整理,修改,并最终定稿.4.2.2后期更新及维护网站中随着新信息的加入,老信息的删除,要不断的对网页进行更新并维护,使其能始终正常运行。更新前的准备：1.了解市场需求大多网页数网页都或多或少的与经济利益相挂钩,应以市场的导向，为其服务.2.了解询问者的心理设计网页需要了解你的观众,了解什么东西在吸引他们,需要了解他们的感受,则有助于你建立站点的色调和个性。小结:网站创意关乎一个网站的生死存亡,如果想在众多的竞争对手中脱颖而出,在创意、策划上下功夫是必要的,同维护和制作一样,这是一个没有重点的航程。《网页设计与制作》课程讲义理论学时部分第五章网页编程语言授课学时：10授课内容：5.1HTML5.1.1HTML的基本结构5.1.2HTML语言的语法5.1.3HTML语言的常用标识5.2CSS层叠样式表5.2.1层叠样式表简介5.2.2创建层叠样式表5.2.3层叠样式表的结构5.2.4层叠样式表应用基本要求：理解HTML语言中的各种文本格式、字符格式、段落设置、列表标记的作用；会用HTML语言中的标记设置颜色、文本格式和列表；掌握HTML的语法结构，掌握HTML语言中标记的使用方法；理解表格、框架、表单的作用。了解HTML、CSS的定义、概念和作用；理解CSS样式表的作用和意义；掌握CSS样式表的结构；掌握在网页中添加CSS的方法。掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式。重点与难点：HTML语言的语法、HTML语言中7类常见的标记的作用与应用；CSS样式表的功能、CSS样式表中的样式规则与选择器；HTMLHTML是一种超文本标记语言，用于创建页面并在浏览器中显示超文本文件的格式早在1945年就由VannevarBush提出，他在理论上建立了一个超文本文件系统。1965年TedNelson第一次使用“超文本”一词来形容这种管理信息的系统。与Bush一样，他的超文本文件系统“Xanadu”，最终也未获得成功。1967年，在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由AndriesVanDam主持，在美国布朗大学最终完成。1969年，美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP协议。HTML语言起源于标准综合标记语言(StandardGeneralizedMarkupLanguage简称SGML)，是由CERN(欧洲粒子物理实验室)首先提出来的。其最早版本起源于1992年，HTML4.01版于1999年12月24日被推荐使用。HTML最初用于发布信息，并没有在网络上使用。但它那极容易使用的显著特点和随着网络带宽的逐渐增加，人们便将其作为在各种网络环境之间，不同文件格式之间进行交流的一种语言格式。它通过文件格式标准化，统一使用一些标记符号(TAG)，对文件的内容进行标注，指出内容的输出格式，如字体大小、颜色，背景颜色，表格形式，各部分之间逻辑上的组织等。使用支持HTML的浏览软件，其它用户就可以对文件进行自由的跳跃式的阅读，还可自行调整显示和阅读的形式。由于它简单易学，表现力强，适用广泛,所以深受用户喜爱，迅速得到了推广和普及。超文本标记语言的领头先锋是美国麻省理工学院计算机科学实验室的WWW标准化组织，又称万维网联盟，其互联网地址为：。有关HTML语言的各种参考资料和W3C行将发布的各种新版特征、最新消息等内容，均可以在这个网站上查到。第一章已经介绍了一个典型的超文本语言程序（例1.1）。5.1.1HTML的基本结构超文本标记语言结构简单，语法较松散，易学易用。它是一种文字处理语言，而不是“程序”语言。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。序（HTML的版本声明）是超文本标记语言的附加标记，放在HTML文档的第一行。在一般的文档中也许没有，序只是用来告知浏览器所遵循的HTML版本，当前的浏览器一般不要求含有序，而且也不会处理序，因此该标记可以忽略。但是若想保持编写严格遵循标准通用标记语言（SGML）的HTML文档，那么就该保留序的位置。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"><!序><HTML><HEAD>

头部信息

</HEAD><BODY>

文档主体，正文部分

</BODY></HTML>其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。<HEAD>之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY>标记一般不省略，表示正文内容的开始。下面是一个最基本的超文本文档的源代码：━┓

┃

┃

┃

┃文件体

┃

┃

┃

┃

━┛━┓

┃文件头

━┛<HTML>

<HEAD>

<TITLE>一个简单的HTML示例</TITLE>

</HEAD>

<BODY>

<CENTER>

<H3>欢迎光临我的主页</H3>

<BR>

<HR>

<FONTSIZE=2>

这是我第一次做主页，无论怎么样，我都会努力做好！

</FONT>

</CENTER>

</BODY>

</HTML>━┓

┃

┃

┃

┃文件体

┃

┃

┃

┃

━┛━┓

┃文件头

━┛例5.1使用多种标记元素的超文本文档(L5-1.htm)。<HTML><HEAD><TITLE>对文字、图片、文档作不同处理</TITLE></HEAD><BODY><H2>链接图片、文档，改变字体、字号等</H2><OL><LI><FONTface="隶书">划却君山好，平铺湘流水。</FONT><LI><FONTface="华文行楷">巴陵无限酒，醉杀洞庭秋。</FONT></OL><IMGborder="0"src="Js.gif"width="108"height="70"><FONTsize="5">湖光、山色</FONT><BR><Ahref="">岳阳</A></BODY></HTML>说明：可以将例5.1写入“记事本”，保存文件的扩展名必须是.htm或.html；例中链接图片、文档，改变字体、字号等的主要标记有：<H2></H2>——设置标题文字，<FONT></FONT>——设置字体、字号等，<IMG>——设置图片超链接，<A></A>——设置文本等超链接。其他标记的含义请见后续例题或附录A。例5.1的运行结果见图5-1。图图5-1例5.1的执行结果5.1.2HTML语言的语法HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>

其中，x代表标记名称。<x>和</x>就如同一组开关：起始标记<x>为开启(ON)的某种功能，而结束标记</x>(通常为起始标记加上一个斜线/)为关(OFF)功能，受控制的文字信息便放在两标记之间。例如：<i>这是斜体字</i>。

标记之中还可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。例如：<xa1="v1",a2="v2",...,an="vn">受控文字</x>

其中，a1,a2,...,an为属性名称，而v1,v2,...,vn则是其所对应的属性值，属性值加不加引号，目前所使用的浏览器都可接受，但依据W3C的新标准，属性值是要加引号的，所以最好养成加引号得习惯。如“基本结构样板”中的头标记<HEAD>和</HEAD>，<HEAD>为起始标记，加斜线

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论