一网页设计概述.PPT教学课件.ppt

1、1,【网页设计与制作】,第一章 网页设计概述,大专部 沙声宏,2,网站与网页概念,站点的规划,站点的设计,常用名词解释,第一章 网页设计概述,网页版面布局设计,常用网页制作工具简介,3,第一讲 网站与网页概念,在学习网页制作之前，首先应了解一些网页与网站的基本知识，了解常用的网页制作工具，熟悉网站开发流程。 本讲要点： Internet与WWW 网页与网站,4,Internet是什么？ Internet意为国际互联网，也称环球网或因特网。它是将横跨全球的各种不同类型的计算机网络连接起来的全球性的网际网络。通过Internet，我们可以最快捷、全面地了解全球的最新信息，用网上宝贵的信息来丰富生活

2、、提高工作效率。,第一讲 网站与网页概念,5,万维网（World Wide Web）：简称WWW或3W，是目前Internet（因特网）上最流行的一种基于超文本形式的资源组织形式。 浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。 目前常用的浏览器有:IE、netscape和腾训TT Web采用浏览器/服务器工作模式。信息以页面（或称Web页）的形式存储在Web服务器中，通过浏览器为用户提供方便友好的信息浏览界面。 统一资源定位器URL。 超链接。,1. Internet与WWW,6,第一讲 网站与网页概念,7,2.网页与网站,(一)、什么是网页

3、？ 网页：在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为Web页。 网页是使用网页制作工作编辑生成或使用HTML语言编写的文本文件，网页里可以包含文字、表格、图像、声音和视频等网页元素。 每个网页都是磁盘上的一个文件，可以单独浏览。网页是组成网站的特殊成分，图像、声音、和视频等文件均需要通过网页才能让浏览者看到或听到。,8,1、网站的的概念 网站，也称作站点，英文的名称是Web Site。 从逻辑上讲网站就是一个建构在网络上、具有独立名称的逻辑上的独立体。再简单来讲，就是一组具有特殊连接方式的页面群，表现出来就是我们常说的一个网站，比如网易、搜狐、新浪、百度等知名网站。我们个人做的

4、网站虽然规模上不能和大站相比，但它在结构上也是完全独立的。 从物理意义上讲，所有的网站都架构在连接到因特网的服务器上，其具体网页文件都存放在一个网站文件夹中。 网站的分类方式有多种，这里我们仅就网站的内容与网站的交互性两方面来分类。,第一讲 网站与网页概念,9,2、网页是如何被浏览的？ 网页是能够被浏览器软件识别的文件，但有时也把用浏览器看到的网页文件的内容叫网页或页面。 HTML文件中还定义了网页中的各种对象（如：文字，图片，声音，图像，动画）的位置，外形和色彩，各种图像，声音，动画等文件则是网页的素材。,第一讲 网站与网页概念,一个Web网站往往由多个文件组成，如网页文件、文本文件、声音文

5、件、影像文件、程序文件等，而Web网站中第一个让人阅读的文件通常称之为homepage（首页），而将该网站中所有供人阅读的Web文件称之为网页。常见Web服务器中设置的缺省首页有index.htm，default.htm等。,10,网站、网页与浏览器,网页是如何显示在浏览器上的呢？,浏览器是专门用于浏览网页的软件，常用的浏览器软件有Microsoft的IE和Netscape的Navigator等。,网页浏览者在浏览网页时，实际上是将HTML文件及相关的文本、图像、声音等文件下载到自已本地的计算机中，然后由浏览器程序对HTML文件进行解释后显示网页内容。,11,2、服务器和客户机 浏览者在访问网

6、页时，是由浏览者本地的计算机向存放网页的远程计算机发出一个请求。远程计算机在收到请求后，将所需要的浏览内容（即网页）发送给本地计算机。那么本地的计算机被称为客户计算机（Client），远程存放网页的计算机被称为服务器（Server），根据服务器上运行的程序类型及服务器与客户所使用的通信协议的作用的不同，服务器可分为WWW（Web）服务器，FTP服务器等。,第一讲 网站与网页概念,12,13,3.域名：Internet规定了一套命令机制，称为域名系统DNS（Domain Name System）。按域名系统定义的计算机名字称为域名。 如： 当用户用域名来访问远程的计算机时,必须由Internet

7、的DNS的名字服务器(Name Server)将域名翻译成对应的32位IP地址,然后才能完成对远程的计算机的访问。,第一讲 网站与网页概念,14,4、虚拟主机 虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个“虚拟”的服务器主机，每台虚拟主机都具有独立的域名和IP地址（或共亨的IP地址），具有完整的Internet服务器功能。 虚拟主机之间完全独立，在外界看来，每台虚拟主机和一台独立的服务器主机完全一样。多台虚拟主机共亨真实主机的资源，这样就可以把网络的开销费用均摊到每台虚拟主机上。 可利用虚拟主机技术建立个人主页，在大型网站上（提供存放主页的免费空间，提供免费域名）申请主页空间和域

8、名（免费或收费），获得成功后，把你制作的网页存放在虚拟主机上，这样你就好象在Internet上拥有了自己的服务器和网站。,第一讲 网站与网页概念,15,7. 网站的发布 (3)免费主页空间 如果只是想建立一个小型的、功能简单的网站，当然也可采用以上形式，但这需要有相应有费用支持，投资与效益的比例关系需要权衡。如果目前还不想投资太多，那么免费主页空间将是较好的选择。但现在较好的免费主页空间不多，且一般不支持ASP、JSP、CGI等高级功能。,第一讲 网站与网页概念,16,网站设计是一个系统工程，具有特定的工作流程，遵循这个流程，才能设计出令人满意的网站。网站设计主要分为网站规划、网站制作、后期维

9、护三个阶段，如下图所示：,第二讲 站点的规划,17,总体规划,第二讲 站点的规划,制作网页如同泼墨作画，首先要进行构思，然后再加以实现。这种构思就是网站规划。网站规划的总体原则有两个：一是为读者提供有用信息，二是要美观。,18,第二讲 站点的规划,1、搜集材料 确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集。对搜集到材料就去粗取精，去伪存真。,最好是同一主题的，容量不要太大，除非你上网真的不要钱！另外最最需要注意的一点是：版权！ 有些作者会在原文中写明“引用时请注明出处！” ，或是“可以任

10、意发布，但请保持原文的完整性！”，这样的比较好办，如果是“版权所有，禁止抄袭”，那只好另找资料了 。,19,2、确定网站的主题 网站的主题是指建立的网站所要包含的主要内容。例如，教育、旅游、体育、新闻、医疗、时尚、娱乐、搜索等。其中每一大类又可细分为若干小类。一般来说，确定网站主题应遵循以下原则： (1)主题鲜明：一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。 (2)明确设立网站的目的。 (3)体现自己的个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，办出自己的特色。,第二讲 站点的规划,20,网站命名和标志 在个人网站中，网站的名称起着很重要的作用，它在很大程度上决定了

11、整个网站的定位。一个好的名称必须简洁、有概括性、有特色、容易记，还要符合自己主页的主题和风格。 网站命名应遵循以下的原则： （1）体现网站的主题，凝练，概括性强。 （2）合法、合情并合理。 （3）字数不要太多，一般控制在6个字以内。 （4）有个性，体现一定的内涵，可给浏览者更多的视觉冲击力和空间想像力,21,规划网站 规划网站就象设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。 规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。规划网站的内容应包括：栏目的设置、目录结构、网站的风格（即颜色、搭配、网站标志LOGO、版面布局、

12、图像的运用）等。,第三讲 站点的设计,22,制作网站主要包括以下步骤： (1)建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。 (2)在站点根文件夹下创建子文件夹。为了使文件安排比较清晰，将页面文件和图像文件分开存放。 (3)向站点添加所需要的空网页。 (4)设计网页尽寸。页面大小一般选择800600规格。 (5)设计网页属性，包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。 (6)向网页中插入文本、图像、动画等对象。 (7)建立所需要的超级链接。 (8)预览和保存网页。,第三讲 站点的设计,23,一、主题栏的设置 在设计网站的主题栏与版块时应注意以下几个

13、问题： 1）突出主题。把主题栏放在最明显的地方，让浏览者更快、更明确地知道网站所表现的内容。 2）设计一个最近更新栏目，让浏览者一目了然地知道更新内容。 3）栏目不要设置太多，一般不超过10个。,第三讲 站点的设计,24,二、目录结构设计 目录结构设计一般应注意以下问题： 1）按栏目内容建立子目录。 2）每个栏目下分别为图像文件创建一个子目录IMAGE（图像较少时可不创建） 3）目录的层次不要太深，主要栏目最好能直接从首页到达。 4）尽量使用意义明确的非中文目录。,25,例：设计班级网站,网站标志,网站简介,版权信息,网 站 导 航,这是网站结构图,这是网站主页,26,三、站点形象设计 1.网

14、站标志LOGO LOGO最重要的作用就是表达网站的理念，便于人们识别，广泛地用于站点链接和宣传。如同商标一样，LOGO是站点特色和内涵的集中体现。如果是企业网站，最好是在企业商标的基础上设计，保持企业形象的整体统一。 设计LOGO的原则是：以简洁、符号化的视觉艺术把网站的形象和理念展示出来。,第三讲 站点的设计,27,2网页的色彩 不同的色彩搭配产生不同的效果，并能影响浏览者的情绪。网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。,第四讲 网站结构与网页布局,（1）红色：是热烈、冲动的色彩，代表热情、喜悦、庆典。 （2）橙色：橙色是一种富足的、快乐而幸福的色彩。

15、（3）黄色：灿烂、辉煌，象征着照亮黑暗的智慧之光和财富与权利。 （4）绿色：代表植物、生命、生机，显得和谐、宁静、健康，给人安全、舒适的感觉。 （5）蓝色：是永恒、沉稳的象征，多做为商品、企业形象的标准色。 （6）紫色：浪漫、爱情，由于具有强烈的女性化性格，除了和女性有关的商品和形象，其他类的设计不常用它为主色。 （7）黑、白、灰色 黑色高贵、稳重是科技的象征，为许多科技产品用色。 白色代表纯洁、简单，具有高级、科技的象征。 灰色代表阴暗、消极，具有平凡、温和、中立的感觉，属于中间色。,28,3网页的文字 注意以下基本原则: （1）不要使用超过3种字体类型，否则网页看起来将显得杂乱，没有主题。

16、 （2）不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息 （3）最好不要使用不停闪烁的文字。 （4）标题的字体比正文要稍大一些，颜色也应有所区别。,29,4.图像的运用 网页上应适当地添加一些图像，使用图像一般应注意以下几个问题： 1）图像是为主页的内容服务的，不以让图像喧宾夺主。 2）图像要兼顾大小和美观。图片不仅要好看，还应在保证图片质量的情况下尽量缩小图片的大小（即字节数）。图像过大会影响网页的传输速度。 3）合理地采用JPEG和GIF图像格式。颜色较少的（256色以内）图像，可处理为GIF格式，色彩比较丰富的图像，最好处理为JPEG格式。 5.页面设计

17、网页页面的整体布局是不可忽视的。要合理地运用空间，让网页疏密有致、井井有条。 版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站标志（LOGO）、主菜单等最重要的模块放在突出的位置，然后再排放次要模块（例如搜索、计数器、版权信息、E-mail地址等）。 其他页面的设计应和首页保持相同的风格，并有返回首页的链接。,第三讲 站点的设计,30,注意：页面文字的颜色一定要区分链接的颜色。有些色彩是不能搭配在一起做为主色的，如蓝色和褐色搭配是最老土的组合。平时我们一定要注意这类问题。 在网页配色时，最忌讳的是将所有颜色都用上，要尽量控制在3种色彩以内，背景和文字的对比要大，以便突出文字内容。,网页色

18、彩整体规划,背景与文字,网站徽标和页眉,导航条、小标题,链接颜色设置,31,“左右对称”型网页布局,网页基本内容一般包括：页面标题、网站徽标、页眉、导航栏、主内容区、页脚。,网页设计实用教程,“同”字型网页布局,页面布局类型 : （1）“同”字型 （2）“匡”字型 （3）“回”字型 （4）“川”字型 （5）左右对称型： （6）上下型： （7）自由型：,第四讲 网站结构与网页布局,32,第四讲 网站结构与网页布局,1.4.1 网站结构 1归类站点内容 2项目放置的位置 3导航草图设计 4创建设计草图,33,5网页版面和布局 网页布局主要有以下3种结构。 型结构 T型结构 三型结构,34,6网站信

19、息布局图,35,一、HTML文件 用超文本标记语言编写的超文本文件称为HTML（HyperText mark-up language）文件，它能不受各种操作系统限制，独立地运行于各种操作系统平台之上。 HTML文件作用：HTML语言主要用于静态网页设计，自1990年起HTML语言就一直被用作World Wide Web（WWW）上的信息表示语言，用于描述网页的格式，设计它与WWW上其它主页的链接信息。 HTML文件是网页的源文件，是一个放置了标记的ASCII文本文件，通常以.htm或.html为扩展名。,第五讲 网页制作工具简介,36,第五讲 网页制作工具简介,早期的网页一般是由专业人员利用H

20、TML语言编写实现的。目前，已出现多种可视化程度很高的网页制作工具，不需要掌握专业的网页制作技术也能创作出富有特色、丰富多彩的网页。 二、网页制作三剑客 Dreaweaver、Flash和Firework被称为“网页制作三剑客”。 1、Dreamweaver Dreamweaver是Macromedia公司推出的网页制作产品，它是一个用于可视化设计与管理网页和网站的工具，支持最新的WEB技术。它与MACROMEDIA公司的FLASH、FIREWORKS、FREEHAND 配合使用，功能更为强大，是目前专业人士首选的网页制作工具。,37,网页通常具有丰富多彩的图像和动画。对于网页中的图像和动画，

21、既要求质量高，同时还要求文件所占存储空间小。 2、图像制作工具Fireworks Fireworks是Macromedia公司专门设计的WEB图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。Fireworks是WEB图形工具的首选软件。 3、动画制作工具Flash Flash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件。网页设计者可以随心所欲地设计各种动态LOGO（商标、图案）、动画、导航条，还可带有动感音乐，以及其他多媒体的各项功能。由于矢量图形不会因为缩放而失真，因此在WEB上应用广泛。,第五讲 网页制作工具简介

22、,38,第五讲 网页制作工具简介,三、图像处理工具Photoshop Photoshop是由Adobe公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专业图像创作的首选软件。,39,第6讲 常用名词解释,1、 URL（Uniform Resource Locator的缩写），统一资源定位器。 它是全球www网服务器资源的标准寻址定位源码，用于确定资源相应的位置及所需检索的文件。其优点是用字符串来指向所需的信息，从而进行资料的检索。,URL,互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的URL来进行标识，这样才能方便查找。 对于Web来说，可以简单并通俗把

23、URL理解为网址。每个Web网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。,40,例如， 其意思就是采用http超文本传输协议访问搜狐网的首页，由于网页均是通过http超文本传输协议进行访问，默认下，“http:/”可以省略不输。,URL 由3部分组成: Internet协议 域名 主机路径及文件名 协议有： http:/超文本传输协议 ftp: 文本传输协议 telnet:远程登陆协议,URL,41,2.HTTP 通信协议：也就是上面举例中的“http”部分，它包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻

24、组）等。,42,3、超文本、超媒体、超链接 超文本文件（HyperText）就是指在文本中包含了与其他文本的链接的文件。超级链接文本下方带有下划线。 超媒体（Hypermedia）进一步扩展了超文本所链接的信息类型。 超媒体文件就是一种文字、影像、图片、动画、声音综合在一起的文件。 超链接（Hyperlink）是WWW上使用最多的一种技术。它是超文本、超媒体、超链接以及与其媒体之间的链接，也是一种从源端点到目标端点的一种链接。在网页中，当鼠标移到超链接处，会呈现手的的形状，表示单击该处，可以链接到该提示所指的页面。,第6讲 常用名词解释,43,3、主页 主页（HOME PAGE），也称为首页，

25、它和一般网页一样，是一个单独的网页，可以存放各种信息。主页是特殊的网页，是这个站点中所有网页文件的起点和交点，也是浏览者浏览一个网站的起点。主页应给出站点的基本信息和主要内容，使浏览者一目了然地了解站点的基本主题，了解站点的信息是否对自己有用。,第6讲 常用名词解释,44,HTML超文本标记语言（Hyper Text Markup Language）。 HTML是标记语言，定义了一系列的特殊标记，以便区分页面的不同部分，定义了内容的显示位置和风格。 例： 这是标题 你好，这是正文！ ,HTML语言,45,浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。 采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。,超链接,46,将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。