网页设计入门篇课件.ppt

网页设计师应用教程第1章 网页设计基础 什么叫做Internet？Internet是全球范围内的，开放的，由众多网络互连而成的计算机网络，也称为因特网。Internet就是互联网，是用于连接各个计算机平台的网络。Internet本身可以提供多种网络服务，Web服务就是其中的一种。HTML是用来制作网页的计算机语言，使用该语言可以制作用于浏览的网页或网站。Internet提供的网络服务 在在InternetInternet里有许多用来提供服务的服务器，这些服务器提供的里有许多用来提供服务的服务器，这些服务器提供的服务大致可以分为以下几种：服务大致可以分为以下几种：WebWeb服务服务：使用使用httphttp超文本传输协议超文本传输协议 http:/http:/FtpFtp服务服务：文件传输协议文件传输协议 ftp:/ftp:/E Emailmail服务服务：mailto:mailto:后面可以直接输入后面可以直接输入E-mailE-mail地址，不需要地址，不需要“/”/”mailto:mailto:TelnetTelnet服务服务:使用使用TelnetTelnet协议远程登录服务器协议远程登录服务器,不需要不需要“/”telnet:/”telnet:NNTPNNTP服务服务:NNTP:NNTP网络新闻传输协议网络新闻传输协议 news:news:GopherGopher服务服务:信息查访服务信息查访服务 gopher:/gopher:/什么是Web服务?从广义上来讲从广义上来讲,Web,Web是是World Wide WebWorld Wide Web的简称的简称(也可以也可以称为称为W3W3或或WWW)WWW)。WebWeb服务只是服务只是InternetInternet中的一个服务，中的一个服务，只是这个服务太广了，以至于很多人都把只是这个服务太广了，以至于很多人都把WebWeb看成是看成是InternetInternet了。了。WebWeb使用的是使用的是HTTPHTTP即超文本传输协议，使用该协议即超文本传输协议，使用该协议可以将文档的不同部分或不同文档之间用链接建立起联系，可以将文档的不同部分或不同文档之间用链接建立起联系，但信息可以用交互的方式进行搜索。但信息可以用交互的方式进行搜索。什么是网页？网页是用网页是用htmlhtml语言编写的一种文件，将这种文件放语言编写的一种文件，将这种文件放在在WebWeb服务器上可以让互连网上的其它用户浏览。网页也服务器上可以让互连网上的其它用户浏览。网页也是通过是通过HTTPHTTP协议来传递给浏览者的。协议来传递给浏览者的。其中网页的表现形式很丰富，可以是文字也可以是其中网页的表现形式很丰富，可以是文字也可以是图片，甚至可以将一些多媒体文件如音频、视频等插入图片，甚至可以将一些多媒体文件如音频、视频等插入到网页里。网站是网页的集合，多个网页可以共同组成到网页里。网站是网页的集合，多个网页可以共同组成一个网站。网站的第一个网页称为首页。一个网站。网站的第一个网页称为首页。HTML(HyperHTML(Hyper Text Mark-up language)Text Mark-up language)是超文本标记语是超文本标记语言，是用来编写网页的语言。虽然目前由许多种用来编言，是用来编写网页的语言。虽然目前由许多种用来编写交互性网站的语言，如写交互性网站的语言，如asp/asp/jsp/php/jsp/php/等，但是归根等，但是归根结底用这些语言编写出来的程序也是生成一个标准的结底用这些语言编写出来的程序也是生成一个标准的HTMLHTML网页也传递给浏览者观看。网页也传递给浏览者观看。什么是html?在一个网站中，网页与网页之间并不是独立的，它在一个网站中，网页与网页之间并不是独立的，它们之间通过超级链接建立起联系。其中超级链接不仅仅们之间通过超级链接建立起联系。其中超级链接不仅仅可以指向网页，同样也可以指向文本、图片、音频、视可以指向网页，同样也可以指向文本、图片、音频、视频或其他类型的文件。频或其他类型的文件。什么是超级链接？1.1.网页类网页类：静态网页和动态网页：静态网页和动态网页2.2.图片类图片类：网页中传输常见的图片格式有：网页中传输常见的图片格式有jpg/gifjpg/gif二种格式二种格式（gifgif图片是图片是WebWeb中使用最多的一种图片格式，最多支中使用最多的一种图片格式，最多支持持256256种颜色，并且可以支持透明底色、动画和交互功种颜色，并且可以支持透明底色、动画和交互功能）能）(jpg(jpg图片的压缩率很高，一般用于不包含大色块的图片的压缩率很高，一般用于不包含大色块的图像，它可以支持图像，它可以支持16001600万种颜色万种颜色)在Web中，可以传输各种格式的文件，大致可以分为以下几类：3.3.音频类音频类：音频类文件常见的文件扩展名有：音频类文件常见的文件扩展名有：mid(MIDImid(MIDI文件文件).).wav(WAVwav(WAV文件文件).mp2).mp2或者或者.mp3.mp3 常见的声音流文件（可以一边下载，一边播放）常见的声音流文件（可以一边下载，一边播放）RealNetworksRealNetworks公司的声音流文件，其扩展名有公司的声音流文件，其扩展名有 .rara .ram .rpm .ram .rpm .raerae；还有；还有MicrosoftMicrosoft公司自己开公司自己开发的声音流文件发的声音流文件.wma.wma 4.4.视频类视频类：视频文件一般有：视频文件一般有AVIAVI文件、文件、MPGMPG文件和视频文件和视频流文件等。扩展名为流文件等。扩展名为.aviavi .mpg .mpg 常见的视频流文件有常见的视频流文件有QuickTimeQuickTime格式的文件（扩格式的文件（扩展名为展名为.qt.qt或或.movmov）、）、RealPlayRealPlay格式文件（扩展格式文件（扩展 名为名为.rmrm .ram .ram）、）、MicrosoftMicrosoft公司开发的公司开发的WMVWMV和和ASFASF文件（扩展名为文件（扩展名为.wma .wma .asfasf）等）等 5.5.下载类下载类：常见的文件压缩格式有：常见的文件压缩格式有ZIPZIP和和RARRAR二种文件二种文件格式。格式。在使用浏览器上网时，一般都会在浏览器中输入网址，在使用浏览器上网时，一般都会在浏览器中输入网址，通过这个网址来打开相应的网页，这个网址就是通过这个网址来打开相应的网页，这个网址就是URLURL。严。严格来说格来说URL(UniformURL(Uniform Resource Locator)Resource Locator)就是就是“统一资源定统一资源定位器位器”，简单来讲就是网址。，简单来讲就是网址。什么是URL?URLURL与现实生活中的地址类似，也是由几部分构成的，与现实生活中的地址类似，也是由几部分构成的，这几部分为：这几部分为：协议协议、域名域名或或ipip、虚拟路径虚拟路径和和文件名文件名四部分四部分构成的。构成的。如这个网址：如这个网址：http:/http:/ (表示名为表示名为“ibucmibucm”的商业公司的主机名为的商业公司的主机名为“www”www”的计的计算机提供基于算机提供基于httphttp的的WebWeb服务。服务。(http:/59.151.5.212/http:/59.151.5.212/)61 135 145 202 hao123 61 135 145 202 hao123的的IPIP地址地址URL的组成部分？其中第一部分是其中第一部分是“http:/”http:/”，这代表该网页使用的是，这代表该网页使用的是httphttp协议。在协议。在internetinternet中可以使用多种协议，中可以使用多种协议，httphttp是其中的一是其中的一种，如果使用的是种，如果使用的是FtpFtp，则，则URLURL的第一部分就会是的第一部分就会是“ftp:/”.ftp:/”.第二部分是第二部分是“”，这表示该，这表示该URlURl的地址的地址是是“”，其中，其中“com”com”是顶级域名，代表该是顶级域名，代表该网站是属于商业网站，网站是属于商业网站，“ibucmibucm”代表网站的提供者；代表网站的提供者；“www”www”代表主机名。代表主机名。注：注：URLURL的域名部分不区分大小写，同样域名也可以的域名部分不区分大小写，同样域名也可以用用IPIP地址来替换，即用圆点分开的地址来替换，即用圆点分开的4 4组数字，称为组数字，称为ipip地址。地址。常见的域名类型：域名域名解释解释.info 提供信息服务的企业.com商业公司.cc全球性国际顶级域名（用于商业领域）.net网络服务商.name适用于个人注册.edu教育机构.biz 网络商务向导，适用于商业公司.org非赢利组织.tv 全球性国际顶级域名（用于视听、电影、电视、广播等）：.gov政府机构.cn中国顶级域名.Mil军事部门.mobi手机域名在在InternetInternet内部，如果要访问一台计算机里的内容，内部，如果要访问一台计算机里的内容，只有通过只有通过ipip地址才能找到这台计算机。当用户在浏览器里地址才能找到这台计算机。当用户在浏览器里输入一个带域名的输入一个带域名的URLURL时，浏览器将会先发送一个消息时，浏览器将会先发送一个消息给给DNSDNS服务器（域名服务器），服务器（域名服务器），DNSDNS服务器负责将域名服务器负责将域名转化为对应的转化为对应的IPIP地址，再通过地址，再通过IPIP地址找到地址找到WebWeb服务器，然服务器，然后从后从WebWeb服务器里取得相应网页，并返回到客户端浏览器服务器里取得相应网页，并返回到客户端浏览器上。上。IP地址的工作机制？注：一般来说，使用注：一般来说，使用ipip地址访问网页要比使用域名访地址访问网页要比使用域名访问网页的速度稍快一点。在问网页的速度稍快一点。在WebWeb里，每一个网页或文件的里，每一个网页或文件的地址都是唯一的，一个地址都是唯一的，一个URLURL只能指向一个网页或文件，只能指向一个网页或文件，但是同一个网页却可以同时拥有多个但是同一个网页却可以同时拥有多个URL.URL.URL中的端口？在在InternetInternet里可以提供多项服务（如里可以提供多项服务（如WebWeb服务、服务、FtpFtp服服务等），为了节省资源，通常都会把务等），为了节省资源，通常都会把WebWeb服务与服务与FtpFtp服务服务架设在一台计算机里。当一个用户向这台计算机请求架设在一台计算机里。当一个用户向这台计算机请求WebWeb服务，而另一台计算机却向这台计算机请求服务，而另一台计算机却向这台计算机请求FtpFtp服务时，服务时，计算机就可以通过不同的端口来区分不同的服务。计算机就可以通过不同的端口来区分不同的服务。什么是端口？端口是计算机与外界通信的接口，一个端口是计算机与外界通信的接口，一个IPIP地址最多可地址最多可以拥有以拥有6553665536个端口。通常个端口。通常WebWeb服务使用的是服务使用的是8080或或80808080端口，端口，而而FtpFtp服务使用的是服务使用的是2121端口。计算机会监听所有的端口，当端口。计算机会监听所有的端口，当某个端口接收到请求，就会把请求递给该端口对应的应用某个端口接收到请求，就会把请求递给该端口对应的应用程序或服务，应用程序或服务接收到请求后进行处理，再程序或服务，应用程序或服务接收到请求后进行处理，再把处理结果从该端口传递给请求服务的计算机。把处理结果从该端口传递给请求服务的计算机。服务器与客户端 当用户在浏览网页时，实际上是由个人的计算机向当用户在浏览网页时，实际上是由个人的计算机向存放网页的计算机发出一个请求，对方的计算机在收到请存放网页的计算机发出一个请求，对方的计算机在收到请求后，将所需要的内容发送回来。相对的本地计算机称为求后，将所需要的内容发送回来。相对的本地计算机称为客户计算机，对方计算机被称为服务器。客户计算机，对方计算机被称为服务器。浏览器(Browser)是指在用户计算机上安装的、用来显示指定是指在用户计算机上安装的、用来显示指定InternetInternet文件的程序。文件的程序。网站网站空间（服务器）空间（服务器）互联网互联网 商品商品摊位（商场）摊位（商场）商业街商业街网页设计构思1.1.网页的主题网页的主题也就是网页的题材，常的题材有：科技、自然、生也就是网页的题材，常的题材有：科技、自然、生活、娱乐、体育、影视、旅游、文学、游戏等。原则：活、娱乐、体育、影视、旅游、文学、游戏等。原则：小而精；选择自己比较感兴趣、了解多的题材。小而精；选择自己比较感兴趣、了解多的题材。2.2.网页的命名网页的命名1.1.名称要合理、合法、易记；名称要合理、合法、易记；2.2.名称要体现网页的主名称要体现网页的主题，凝练、概括性强；题，凝练、概括性强；3.3.网页的字数要控制在网页的字数要控制在6 6个字以内个字以内（如（如“雅虎雅虎”“”“搜狐搜狐”“”“网易网易”）；）；4.4.名称要有一定的名称要有一定的内涵，能给浏览者更多的冲击力和想象力。内涵，能给浏览者更多的冲击力和想象力。3.3.网页的标志网页的标志网站标志（网站标志（logologo），是站点内容和特色的体现，简称），是站点内容和特色的体现，简称站标，一般放在主页和链接页上，如同商品的品牌一样。站标，一般放在主页和链接页上，如同商品的品牌一样。4.4.色彩搭配色彩搭配适合网页标准色的颜色有蓝色、黄橙色、黑适合网页标准色的颜色有蓝色、黄橙色、黑/灰灰/白白3 3大系大系;比较成功的配色有：比较成功的配色有：IBMIBM的深蓝色、肯德基的红色条和的深蓝色、肯德基的红色条和WindowsWindows视窗标志上的红蓝黄绿色块；微软视窗标志上的红蓝黄绿色块；微软MicrosoftMicrosoft网页采网页采用了蓝、橙、白色搭配。用了蓝、橙、白色搭配。5.5.字体字体同标准色一样，标准字体一般用于标志、标题和主菜同标准色一样，标准字体一般用于标志、标题和主菜单的特有字体。默认的网页字体为宋体。单的特有字体。默认的网页字体为宋体。一、网页的布局在网页布局过程中，应该遵循的原则有：对称平衡、异常平衡及对比、凝视和空白等。一般来说，网页的布局有下面几种常见的结构。型结构布局 T型布局 “三”型布局 网页的布局网页的布局网页布局网页布局大致可分为：大致可分为：“国国”字型字型 (例如：例如：CCTVCCTV网站网站）拐角型拐角型 （例如：（例如：TCSZTCSZ网站网站 例：例：左右框架型左右框架型 （例如：雅虎网站）（例如：雅虎网站）上下框架型上下框架型 （上下分为两页的框架）（上下分为两页的框架）综合框架型综合框架型 （例如：新浪网、搜狐网）（例如：新浪网、搜狐网）封面型封面型 （一般由标题和图片构成（一般由标题和图片构成 ）FlashFlash型型 （功能强大、信息丰富、视觉（功能强大、信息丰富、视觉及听觉效果强大的相当于多媒体。）及听觉效果强大的相当于多媒体。）变化型变化型 （即上面几种类型的结合与变化）（即上面几种类型的结合与变化）二、站点规划与设计流程图层 1、决定站点目标（确定它将提供什么样的服务）2、选择目标群众3、为兼容的浏览器创建站点4、组织站点结构5、创建设计图6、设计导航图7、计划和收集资源 1.5 1.5 网页制作的基本步骤网页制作的基本步骤1.5.1 1.5.1 整体规划整体规划 进进行行网网站站的的整整体体规规划划也也就就是是组组织织网网站站的的内内容容和和设设计计其其结结构构。网网页页制制作作者者在在明明确确网网页页制制作作的的目目的的及及要要包包括括的的内内容容之之后后，接接下下来来就就应应该该对对网网站站进进行行规规划划，以以确确保保文文件件内内容容条条理理清清楚楚、结结构构合合理理，这这样样不不仅仅可可以以很很好好地地体体现现设设计计者者的的意意图图，也也将将使使网网站站可可维维护护性性与与可可扩扩展性增强。展性增强。层状结构层状结构层状结构层状结构 层状结构（如图层状结构（如图层状结构（如图层状结构（如图1.81.81.81.8所示）类似于目录系统的树型结构，由网站所示）类似于目录系统的树型结构，由网站所示）类似于目录系统的树型结构，由网站所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细文件的主页开始，依次划分为一级标题、二级标题等等，逐级细文件的主页开始，依次划分为一级标题、二级标题等等，逐级细文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。化，直至提供给浏览者具体信息。化，直至提供给浏览者具体信息。化，直至提供给浏览者具体信息。主 页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题图1.8 层状结构default.html index.html homepage主页的命名 线性结构线性结构线性结构线性结构 线性结构（如图线性结构（如图线性结构（如图线性结构（如图1.91.91.91.9所示）类似于数据结构中的线性表，用于所示）类似于数据结构中的线性表，用于所示）类似于数据结构中的线性表，用于所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。浏览整个网站文件。这种结构一般都用在意义是平行的页面上。浏览整个网站文件。这种结构一般都用在意义是平行的页面上。浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的通常情况下，网站文件的结构是层状结构和线性结构相结合的通常情况下，网站文件的结构是层状结构和线性结构相结合的通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理。这样可以充分利用两种结构各自的特点，使网站文件既具有条理。这样可以充分利用两种结构各自的特点，使网站文件既具有条理。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。性、规范性，又可同时满足设计者和浏览者的要求。性、规范性，又可同时满足设计者和浏览者的要求。性、规范性，又可同时满足设计者和浏览者的要求。主 页页面1页面2页面3图1.9 线性结构 Web Web结构结构结构结构 WebWeb结结结结构构构构（如如如如图图图图1.101.10所所所所示示示示）类类类类似似似似于于于于InternetInternet的的的的组组组组成成成成结结结结构构构构，各各各各网网网网页之间形成网状连接，允许用户随意浏览。页之间形成网状连接，允许用户随意浏览。页之间形成网状连接，允许用户随意浏览。页之间形成网状连接，允许用户随意浏览。主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题图1.10 Web结构页面6三、主页的基本制作流程 1、指定网页标题2、采集网页内容3、准备网页图片4、设定网页框架5、设定网页背景6、创建其他页面元素 四、四、网站的后期工作网站的后期工作 1 1、测试网站、测试网站2 2、申请站点域名、申请站点域名3 3、上传站点内容、上传站点内容4 4、管理网站、管理网站5 5、宣传自己的网站、宣传自己的网站 宣传自己的网站宣传自己的网站如何让网站地址让别人知道，方法有二：如何让网站地址让别人知道，方法有二：1 1、用专门的软件，可以将网站登录到各大搜索引擎。用专门的软件，可以将网站登录到各大搜索引擎。2 2、手工登录。如打开手工登录。如打开百度（百度（）,在下面有个在下面有个链接链接“网站登录网站登录”，点击后会被要求填写网站地址、名称、，点击后会被要求填写网站地址、名称、内容等，然后就被收入百度的搜索引擎了，这样别人就可以内容等，然后就被收入百度的搜索引擎了，这样别人就可以搜索到你的网站了。搜索到你的网站了。五、思考主页的基本制作流程主要有哪些。网页的命名应遵循哪些基本原则。本章小结：掌握制作一个主页的基本工作流程。熟悉网页内容的规划方法、设计网页布局等。熟悉站点规划与设计流程、创建设计图。