网页设计课程第1章ppt课件

网页制作与布局设计第一章网页设计概述,CNNIC发布第28次中国互联网络发展状况统计报告,2011年7月19日，中国互联网络信息中心（CNNIC）在京发布了第28次中国互联网络发展状况统计报告。报告显示，截至2011年6月底，中国网民规模达到4.85亿，较2010年底增加2770万人，增幅仅为6.1%，网民规模增长减缓；最引人注目的是，在大部分娱乐类应用使用率有所下滑，商务类应用呈平缓上升的同时，微博用户数量以高达208.9%的增幅，从2010年底的6311万爆发增长到1.95亿，成为用户增长最快的互联网应用模式。,中国网民数,相关概念,InternetWWW：WorldWideWebInternet的中文名称是因特网或国际互联网，是一个几乎覆盖了全世界的计算机网络。Internet提供的服务主要有万维网（WWW）服务、电子邮件（E-mail）服务、文件传输（FTP）服务、远程登录（Telnet）服务和新闻与公告类（Usenet）服务等。,第一章网页设计概述,1.1基础知识1.2Web标准1.3网站整体制作流程1.4静态页面制作流程1.5影响设计的技术因素,1.1基础知识,网站网站(WebSite)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。网页网页(Webpages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。,首页首页(Homepage)，也可以称之为主页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点，是浏览者访问一个网站的第一个网页。网页实际上就是一个用超文本标记语言HTML（hypertextmarkuplanguage）编写的文本文件，从而把文字、表格、图像、动画、声音和视频等各种媒体有机地组合在一起。,Question:如何查看网页的源代码,要查看这个HTML的源代码，有两种方法。一是在网页内点击鼠标右键，点击ViewSource(查看源文件)命令；二是选择浏览器菜单View(查看)中的Source(源文件)命令。,服务器、客户机、浏览器,服务器是提供资源和服务的计算机。客户机是供用户使用资源和享受服务的计算机。浏览者在访问网页时，使用的是客户机。浏览器向存放网页的WWW服务器（经常是在很远的地方）发出一个请求；收到请求后，WWW服务器将响应信号和网页发送给客户机。,客户机与服务器的交互,网页的基本元素,文本图片动画表单音/视频,GIF是英文GraphicsInterchangeFormat（图形交换格式）的缩写，将多幅图像保存为一个图像文件，从而形成动画,所以归根到底GIF仍然是图片文件格式，只能显示256色,SWF动画是其于矢量技术制作的，因此不管将画面放大多少倍，画面不会因此而有任何损害。,动态网页与静态网页,动态网页：由Web服务器接到用户访问请求后动态生成的页面；内容会随着访问的变化而相应变化静态网页：由纯粹的HTML语言实现的网页；网页文档存储在Web服务器的文件系统中，内容通常不随浏览者的不同需求而改变可以简单的从文件的扩展名来看一个网页文件是动态网页还是静态网页静态网页的URL的后缀是.htm、.html、.shtml、.xml等动态网页的URL的后缀是.asp、.aspx、.jsp、.php、.perl、.cgi等常用的动态网页技术有：JSP、ASP、PHP、CGI等,1.2Web标准,WEB标准，即网站标准。目前所说的WEB标准一般指网站建设采用基于XHTML语言的网站设计语言,WEB标准中典型的应用模式是DIV+CSS。通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。,WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准。,1.3网站整体制作流程,前期策划页面细化及实施后期维护,页面美工设计,软件生命周期：问题定义、可行性分析、总体描述、系统设计、编码、调试和测试、验收与运行、维护,静态页面制作,程序开发,1.4静态页面制作流程,观察图纸拆分图纸组装,分离颜色,提取尺寸,分离背景图,分离图标及特殊边框,分离图片,1.5影响设计的技术因素,屏幕显示分辩率浏览器类型浏览器：万维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。个人电脑上常见的网页浏览器包括微软的InternetExplorer、Mozilla的Firefox、Apple的Safari、Opera、HotBrowser、360安全浏览器、360极速浏览器、世界之窗、腾讯TT、搜狗浏览器、傲游浏览器、百度浏览器等。浏览器是最经常使用到的客户端程序。,常用网页设计工具,DreamweaverFlashFireworksPhotoshop,网页三剑客,都是Adobe公司的产品，前三者被称为网页三剑客，以前由MacroMedia公司出品，因而在功能上有着非常紧密的结合。,Dreamweaver,Dreamweaver是Adobe公司出品的一款“所见即所得”的网页编辑工具。Dreamweaver动态网页的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。,Flash,Flash是Adobe公司所推出的用来设计交互式多媒体动画的软件，它可以为你的网页加入专业且漂亮的交互式按钮及向量式的动画图案特效。Flash的动画绘图方式是采向量方式处理，这样图案在网页中放大或缩小时，不会因此而失真，而且可依颜色或区块做部份的选择来进行编辑，这是与其它绘图软件所不同的地方且最新的版本可加入MP3格式的音乐，不但音质直逼音乐CD，容量却只有CD的十分之一，非常适合应用于网络上。Flash是Adobe公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。Flash各种二维动画（运动动画、变形动画、遮罩动画、导向动画、音响动画及编程动画ActionScript、绘画动画）。,Fireworks,Fireworks是Adobe公司发布的一款专为网络图形设计的图形编辑软件。使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。Fireworks是Adobe公司网页设计“三剑客”之“火焰”，它以处理网页图片为特长，并可以轻松创作GIF动画。,FrontPage,MicrosoftFrontPage，简称FP，是美国微软公司推出的一款网页设计、制作、发布、管理的软件。FrontPage由于良好的易用性，被认为是优秀的网页初学者的工具。,网页设计技术,HTMLCSSDreamweaverJavascript美工在现实的网页设计中占有重要的地位，有兴趣的同学平常注意积累培养自己这方面的能力。,网站制作人才的核心能力,平面设计,设计先行,平面设计能力,网页制作,细节决