网页设计ppt课件.ppt

网页设计,云南师范大学商学院艺术设计系,因特网起源于美国国防部高级研究计划管理局建立的阿帕网。网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。,许多公司都拥有自己的网站，他们利用网站来进行宣传、产品资讯发布、招聘等等。随着网页制作技术的流行，很多个人也开始制作个人主页，这些通常是制作者用来自我介绍、展现个性的地方。也有以提供网络资讯为盈利手段的网络公司，通常这些公司的网站上提供人们生活各个方面的资讯如时事新闻、旅游、娱乐、经济等,在因特网的早期，网站还只能保存单纯的文本。经过几年的发展，当万维网出现之后，图像、声音、动画、视频，甚至3D技术开始在因特网上流行起来，网站也慢慢地发展成我们现在看到的图文并茂的样子。通过动态网页技术，用户也可以与其他用户或者网站管理者进行交流。也有一些网站提供电子邮件服务。,第一章 因特网与网络和网站建设,它由域名（俗称网址），网站源程序和网站空间三部分构成。域名（俗称网址）形式比如：(一级域名)，,网站组成,衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是这个网站的真实流量。建设网站考虑因素：1、网站的客户服务群体；2、网站的内容方向和性质；3、网站的功能描述和结构分析；4、网站的用户体验；5、网站的盈利方式；6、网站的未来发展方向。,根据网站所用编程语言分类：例如asp网站、php网站、jsp网站等；根据网站的用途分类：例如门户网站（综合网站）、行业网站、娱乐网站等；根据网站的持有者分类：例如个人网站、商业网站，政府网站等。根据网站的内容分类：网站搜索(比如百度)、资讯（比如新华网）、下载(比如华军软件园)、图片（比如图片天下）等；网址（比如hao123265）、音乐（比如百度MP3）、视频（影视）、等；商务（比如阿里巴巴）、网店（比如淘宝）、黄页（比如世界黄页）、个人主页等；问答（比如百度知道）、咨询（比如威客）、百科、博客（比如livespaces）、播客、视客、推客、格子等。,网站分类,下一节 网站的盈利,门户网站，是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初提供搜索引擎、目录服务，后来由于市场竞争日益激烈，门户网站不得不快速地拓展各种新的业务类型，希望通过门类众多的业务来吸引和留驻互联网用户，以至于目前门户网站的业务包罗万象，成为网络世界的“百货商场”或“网络超市”。从现在的情况来看，门户网站主要提供新闻、搜索引擎、网络接入、聊天室、电子公告牌、免费邮箱、影音资讯、电子商务、网络社区、网络游戏、免费网页空间，等等。在我国，典型的门户网站有新浪网、网易和搜狐网等,返回,网站流量（traffic）是指网站的访问量，是用来描述访问一个网站的用户数量以及用户所浏览的网页数量等指标，常用的统计指标包括网站的独立用户数量、总用户数量（含重复访问者）、网页浏览数量、每个用户的页面浏览数量、用户在网站的平均停留时间等,行业网站所谓行业门户，可以理解为“门+户+路”三者的集合体，即包含为更多行业企业设计服务的大门，丰富的资讯信息，以及强大的搜索引擎。“门”，即为更多的行业及企业提供服务的大门。据统计，经历1998、1999和2003年的创业高峰，截止2006年底国内行业网站已有3000多家，预计到2007年底将达到4510家。增速也从两年前的28%提升到35%，预计2007年增长率将接近50%。,返回,另据统计，3000多家行业网站中，规模较大的约占10%，主要分布在化工、服装、五金等行业.,个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。 个人网站=顶级域名+虚拟主机+网页,网页: 需要自己运用各种网页软件制作. 做好网页后上传到虚拟主机,再把域名绑定到虚拟主机上,你的个人网站就可以对外供别人浏览了,返回,什么是域名？从技术上讲，域名只是一个Internet中用于解决地址对应问题的一种方法。可以说只是一个技术名词。但是，由于Internet已经成为了全世界人的Internet，域名也自然地成为了一个社会科学名词。,什么要注册域名？ 越来越多的人所认识，电子商务、网上销售、网络广告已成为商界关注的热点。“上网”已成为不少人的口头禅。但是，要想在网上建立服务器发布信息，则必须首先注册自己的域名，只有有了自己的域名才能让别人访问到自己。所以，域名注册是在互联网上建立任何服务的基础。同时，由于域名的唯一性，尽早注册又是十分必要的。,域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两类：一是国家顶级域名,目前200多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是cn，美国是us，日本是jp等；二是国际顶级域名简称iTDs），例如表示工商企业的 .Com，表示网络提供商的.net，表示非盈利组织的.org等。目前大多数域名争议都发生在com的顶级域名下，因为多数公司上网的目的都是为了赢利。为加强域名管理，解决域名资源的紧张，Internet协会、Internet分址机构及世界知识产权组织（WEPO）等国际组织经过广泛协商， 在原来三个国际通用顶级域名：（.org）的基础上，新增加了7个国际通用顶级域名：firm（公司企业）、store（销售公司或企业）、Web（突出WWW活动的单位）、arts（突出文化、娱乐活动的单位）、rec (突出消遣、娱乐活动的单位)、info (提供信息服务的单位)、nom(个人)，并在世界范围内选择新的注册机构来受理域名注册申请。如www.ttsd.biz.tm 国别:TM,土库曼斯坦,分类:BIZ,商业,二级域名是指顶级域名之下的域名，在国际顶级域名下，它是指域名注册人的网上名称，例如 ibm，yahoo，microsoft等；在国家顶级域名下，它是表示注册企业类别的符号，例如com，edu，gov，net等。,我国在国际互联网络信息中心（Inter NIC） 正式注册并运行的顶级域名是CN，这也是我国的一级域名。在顶级域名之下，我国的二级域名又分为类别域名和行政区域名两类。类别域名共6个， 包括用于科研机构的ac；用于工商金融企业的com；用于教育机构的edu；用于政府部门的 gov；用于互联网络信息中心和运行中心的net；用于非盈利组织的org。而行政区域名有34个，分别对应于我国各省、自治区和直辖市。三级域名用字母（ AZ，az，大小写等）、数字（09）和连接符（）组成， 各级域名之间用实点（.）连接，三级域名的长度不能超过20个字符。 如无特殊原因，建议采用申请人的英文名（或者缩写）或者汉语拼音名 （或者缩写） 作为三级域名，以保持域名的清晰性和简洁性。,型号:英文国际顶级域名(domcom型) 价格:65元/年内容:.com域名是目前国际最广泛流行的通用域名格式,全球的用户超过1000万个。所有国际化公司都会注册.com域名;当然也可以选择.net/.org.COM - -适用于商业实体,它是最流行的顶级域名 .NET - -最初用于网络机构如ISP .ORG -设计是用于各类组织机构,包括非盈利团体 以上三类域名任何人都可注册。.com. net. org,返回,网站盈利网站的盈利基本模式有：出卖广告位，收取会员费，提取经纪费，获得联盟收益等。,网站盈利模式的拓展,1. 厂商赞助：这种情况一般是我们在站点上为主机提供商制作一个广告条，来抵消或者减少租赁费用。具体的操作还需要大家跟主机提供商联系协调。,2. 广告投放：目前百度、搜狐新闻、易趣、21cn 等网站都提供有图片、文字链接广告的合作，大家可以直接跟他们的广告部门邮件联系。如果你的页面访问量和网站内容与他们的要求相符，就可以获得合作机会。需要注意的是广告条的配色风格尽量和网站本身的风格融合在一起，特别是色调要保持一致，如果因为加入的广告影响了网站的访问量，就得不偿失了。此外，不推荐采用弹出式的广告，一来这种广告非常容易引起访问者的反感，二来在 Windows XP SP2 推出后，弹出式广告会逐渐退出历史舞台，这也是大势所趋。,3. 其它形式的收入：等你的个人网站有实力做到这一步后，可以考虑跟大型网站甚至传统厂商联合举办活动等方式来扩大收入来源了，这时候你完全不是处于被动的找客户的“无奈”状态，一般厂商会主动联系你的。而且这时候你已经积累了很多经验，网站的未来你应该会有自己的打算，就不用为旺财多操心了。如果你觉得网站已经没有更大的发展空间，那就将它转让给大型网站吧。,第二章网页设计的构成,网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网页是由网站组成的页面。 如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 在互联网上应用最为广泛的功能是网页的浏览,浏览器窗口中显示了一个页面被称为网页.网页中可以包括:文字图片动画视频音频等 网页的学名称作HTML文件，是一种可以在www网上传输，并被浏览器认识和翻译成页面显示出来的文件。,一.什么是网页,二.网站设计要求,(一)、建设网站前的市场分析,1、相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联网上开展公司业务。 2、市场主要竞争者分析，竞争对手上网情况及其网站策划、功能作用。3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。,(二)、建设网站目的及功能定位,1、为什么要建立网站，是为了树立企业形象，宣传产品，进行电子商务，还是建立行业性网站？是企业的基本需要还是市场开拓的延伸？2、整合公司资源，确定网站功能。根据公司的需要和计划，确定网站的功能类型：企业型网站、应用型网站、商业型网站（行业型网站）、电子商务型网站；企业网站又分为企业形象型、产品宣传型、网上营销型、客户服务型、电子商务型等。3、根据网站功能，确定网站应达到的目的作用。4、企业内部网（Intranet）的建设情况和网站的可扩展性。,4、确定网站内容的实现方式。如产品中心使用动态程序数据库还是静态页面；营销网络是采用列表方式还是地图展示,(三)、网站导航内容,1、根据网站的目的确定网站的结构导航。一般企业型网站应包括：公司简介、企业动态、产品介绍、客户服务、联系方式、在线留言等基本内容。更多内容如：常见问题、营销网络、招贤纳士、在线论坛、英文版等等。,2、根据网站的目的及内容确定网站整合功能。如FLASH引导页、会员系统、网上购物系统、在线支付、问卷调查系统、在线支付、信息搜索查询系统、流量统计系统等。,3、确定网站的结构导航中的每个频道的子栏目。如公司简介中可以包括：总裁致词、发展历程、企业文化、核心优势、生产基地、科技研发、合作伙伴、主要客户、客户评价等；客户服务可以包括：服务热线、服务宗旨、服务项目等。,1.网页设计之精彩配色,第三章 网页设计的设计法则,颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。,著名网站的颜色搭配方法，让我们的学习少走弯路，快速提高我们的网页制作水平,(1)、网页颜色原理和象征意义,红色：热情、奔放、喜悦、庄严 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 蓝色：天空、清爽、科技 绿色：植物、生命、生机 灰色：庄重、沉稳 紫色：浪漫、富贵 棕色：大地、厚朴,介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。1）这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。这样的配色可以显示独特的个性，又不失大型网站的风采。,2）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。如图2。,3）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），如图3。,4)现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非常的科学合理。如图4,5）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。如图5,6）橘红色如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。字体使用黑色RGB为（0，0，0）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。如图6,7）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。如图7,8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。这样的搭配显得风格独特，颜色和谐而庄重。如图8,9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。如此简单，但是却栩栩如生，跃然网上。如图9,10）下面举出这个例子是想证明一个道理只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。如图10,网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速的提高我们的制作水平。可以说。网页颜色搭配得当，成功也就走了一半。,2.版面设计布局,就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局,布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。,1、正常平衡-亦称匀称。多指左右、上下对照形式，主要强调秩序，能达到安定?诚实、信赖的效果。,2、异常平衡-即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能?达到强调性、不安性、高注目性的效果。,3、对比-所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与?今、新与旧、贫与富等对比。,4、凝视-所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。,5、空白-空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品?位的优越感，这种表现方法对体显网页的格调十分有效。,6、尽量用图片解说-此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。,7、网页的白色背景太虚，则可以加些色快;,10、表格太规矩，可以改用导角试试。,9、左面文字过多，右面则可以插一张图片保持平衡;,8、版面零散，可以用线条和符号串联;,3、版面编排设计要求1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。,第四章Flash软件学习,第一课 Flash的工作环境 Flash界面讲解、帧、层及时间轴在创建动画中的作用、Flash动画演示及简单剖析 第二课 绘图工具 各类绘图工具讲解、使用铅笔工具绘图、移动、旋转、变形对象 第三课 颜色的填充和渐变 为形状和线条填充或改变颜色、创建和应用线性渐变、Alpha通道的使用,第四课 素材的获得 图像及动画的导入和编辑、将位图转换为矢量图、文本工具的使用 第五课 简单动画的制作 库及其元素的讲解、Motion与Shape效果的实现与叠加、Mask效果的实现 第六课 简单交互的实现 按钮的制作、给组件添加简单行为,第七课 声音的动用 声音的导入与编辑、声音与事件同步的控制 第八课 深入行为 行为指令讲解并示例、创建可编辑文本区域、高级动态网页设计及连接第九课 网页的发布 输出为swf,HTML文件参数的设定、其它各种输出格式讲解,经典网站,第五章艺术风格网站和商业性网站创作演练,