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