网页设计入门篇.ppt

网页设计师应用教程 第第1 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的简称的简称( (也可以也可以 称为称为“W3“W3“或或“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万种颜色万种颜色) 在在WebWeb中，可以传输各种格式的文件，大致中，可以传输各种格式的文件，大致 可以分为以下几类：可以分为以下几类： 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?URL? URLURL与现实生活中的地址类似，也是由几部分构成的与现实生活中的地址类似，也是由几部分构成的 ，这几部分为：，这几部分为：协议协议、域名域名或或ipip、虚拟路径虚拟路径和和文件名文件名四部四部 分构成的。分构成的。 如这个网址：如这个网址：http:/ ( (表示名为表示名为“ “ibucmibucm” ”的商业公司的主机名为的商业公司的主机名为“ “www”www”的计算机的计算机 提供基于提供基于httphttp的的WebWeb服务。服务。 ( (12/12/) ) 61 135 145 202 hao123 61 135 145 202 hao123的的IPIP地址地址 URLURL的组成部分？的组成部分？ 其中第一部分是其中第一部分是“ “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. URLURL中的端口？中的端口？ 在在InternetInternet里可以提供多项服务（如里可以提供多项服务（如WebWeb服务、服务、FtpFtp服服 务等），为了节省资源，通常都会把务等），为了节省资源，通常都会把WebWeb服务与服务与FtpFtp服务服务 架设在一台计算机里。当一个用户向这台计算机请求架设在一台计算机里。当一个用户向这台计算机请求WebWeb 服务，而另一台计算机却向这台计算机请求服务，而另一台计算机却向这台计算机请求FtpFtp服务时，服务时， 计算机就可以通过不同的端口来区分不同的服务。计算机就可以通过不同的端口来区分不同的服务。 什么是端口？什么是端口？ 端口是计算机与外界通信的接口，一个端口是计算机与外界通信的接口，一个IPIP地址最多可地址最多可 以拥有以拥有6553665536个端口。通常个端口。通常WebWeb服务使用的是服务使用的是8080或或80808080端口端口 ，而，而FtpFtp服务使用的是服务使用的是2121端口。计算机会监听所有的端口，端口。计算机会监听所有的端口， 当某个端口接收到请求，就会把请求递给该端口对应的应当某个端口接收到请求，就会把请求递给该端口对应的应 用程序或服务，应用程序或服务接收到请求后进行处理，用程序或服务，应用程序或服务接收到请求后进行处理， 再把处理结果从该端口传递给请求服务的计算机。再把处理结果从该端口传递给请求服务的计算机。 服务器与客户端服务器与客户端 当用户在浏览网页时，实际上是由个人的计算机向当用户在浏览网页时，实际上是由个人的计算机向 存放网页的计算机发出一个请求，对方的计算机在收到请存放网页的计算机发出一个请求，对方的计算机在收到请 求后，将所需要的内容发送回来。相对的本地计算机称为求后，将所需要的内容发送回来。相对的本地计算机称为 客户计算机，对方计算机被称为服务器。客户计算机，对方计算机被称为服务器。 浏览器浏览器(Browser)(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型布局 “三”型布局 网页的布局 网页布局 大致可分为： “国”字型 (例如：CCTV网站） 拐角型 （例如：TCSZ网站 例： 左右框架型 （例如：雅虎网站） 上下框架型 （上下分为两页的框架） 综合框架型 （例如：新浪网、搜狐网） 封面型 （一般由标题和图片构成 ） Flash型 （功能强大、信息丰富、视觉 及听觉效果强大的相当于多媒体。） 变化型 （即上面几种类型的结合与变化） 二、 站点规划与设计流程图层 1、决定站点目标（确定它将提供什么样的服务） 2、选择目标群众 3、为兼容的浏览器创建站点 4、组织站点结构 5、创建设计图 6、设计导航图 7、计划和收集资源 1.5 网页制作的基本步骤 1.5.1 整体规划 进行网站的整体规划也就是组织网站的内容和 设计其结构。网页制作者在明确网页制作的目的及要 包括的内容之后，接下来就应该对网站进行规划，以 确保文件内容条理清楚、结构合理，这样不仅可以很 好地体现设计者的意图，也将使网站可维护性与可扩 展性增强。 层状结构层状结构 层状结构（如图层状结构（如图1.81.8所示）类似于目录系统的树型结构，由网站所示）类似于目录系统的树型结构，由网站 文件的主页开始，依次划分为一级标题、二级标题等等，逐级细文件的主页开始，依次划分为一级标题、二级标题等等，逐级细 化，直至提供给浏览者具体信息。化，直至提供给浏览者具体信息。 主 页 页面1页面2页面3 页面4页面5页面6页面7 一级标题 二级标题 图1.8 层状结构 default.html index.html homepage主页的命名 线性结构线性结构 线性结构（如图线性结构（如图1.91.9所示）类似于数据结构中的线性表，用于所示）类似于数据结构中的线性表，用于 组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地 浏览整个网站文件。这种结构一般都用在意义是平行的页面上。浏