1,【网页设计与制作】,第一章 网页设计概述,大专部 沙声宏,2,网站与网页概念,站点的规划,站点的设计,常用名词解释,第一章 网页设计概述,网页版面布局设计,常用网页制作工具简介,3,第一讲 网站与网页概念,在学习网页制作之前，首先应了解一些网页与网站的基本知识，了解常用的网页制作工具，熟悉网站开发流程。 本讲要点： Internet与WWW 网页与网站,4,Internet是什么？ Internet意为国际互联网，也称环球网或因特网。它是将横跨全球的各种不同类型的计算机网络连接起来的全球性的网际网络。通过Internet，我们可以最快捷、全面地了解全球的最新信息，用网上宝贵的信息来丰富生活、提高工作效率。,第一讲 网站与网页概念,5,万维网（World Wide Web）：简称WWW或3W，是目前Internet（因特网）上最流行的一种基于超文本形式的资源组织形式。 浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。 目前常用的浏览器有:IE、netscape和腾训TT Web采用浏览器/服务器工作模式。信息以页面（或称Web页）的形式存储在Web服务器中，通过浏览器为用户提供方便友好的信息浏览界面。 统一资源定位器URL。 超链接。,1. Internet与WWW,6,第一讲 网站与网页概念,7,2.网页与网站,(一)、什么是网页？ 网页：在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为Web页。 网页是使用网页制作工作编辑生成或使用HTML语言编写的文本文件，网页里可以包含文字、表格、图像、声音和视频等网页元素。 每个网页都是磁盘上的一个文件，可以单独浏览。网页是组成网站的特殊成分，图像、声音、和视频等文件均需要通过网页才能让浏览者看到或听到。,8,1、网站的的概念 网站，也称作站点，英文的名称是Web Site。 从逻辑上讲网站就是一个建构在网络上、具有独立名称的逻辑上的独立体。再简单来讲，就是一组具有特殊连接方式的页面群，表现出来就是我们常说的一个网站，比如网易、搜狐、新浪、百度等知名网站。我们个人做的网站虽然规模上不能和大站相比，但它在结构上也是完全独立的。 从物理意义上讲，所有的网站都架构在连接到因特网的服务器上，其具体网页文件都存放在一个网站文件夹中。 网站的分类方式有多种，这里我们仅就网站的内容与网站的交互性两方面来分类。,第一讲 网站与网页概念,9,2、网页是如何被浏览的？ 网页是能够被浏览器软件识别的文件，但有时也把用浏览器看到的网页文件的内容叫网页或页面。 HTML文件中还定义了网页中的各种对象（如：文字，图片，声音，图像，动画）的位置，外形和色彩，各种图像，声音，动画等文件则是网页的素材。,第一讲 网站与网页概念,一个Web网站往往由多个文件组成，如网页文件、文本文件、声音文件、影像文件、程序文件等，而Web网站中第一个让人阅读的文件通常称之为homepage（首页），而将该网站中所有供人阅读的Web文件称之为网页。常见Web服务器中设置的缺省首页有index.htm，default.htm等。,10,网站、网页与浏览器,网页是如何显示在浏览器上的呢？,浏览器是专门用于浏览网页的软件，常用的浏览器软件有Microsoft的IE和Netscape的Navigator等。,网页浏览者在浏览网页时，实际上是将HTML文件及相关的文本、图像、声音等文件下载到自已本地的计算机中，然后由浏览器程序对HTML文件进行解释后显示网页内容。,11,2、服务器和客户机 浏览者在访问网页时，是由浏览者本地的计算机向存放网页的远程计算机发出一个请求。远程计算机在收到请求后，将所需要的浏览内容（即网页）发送给本地计算机。那么本地的计算机被称为客户计算机（Client），远程存放网页的计算机被称为服务器（Server），根据服务器上运行的程序类型及服务器与客户所使用的通信协议的作用的不同，服务器可分为WWW（Web）服务器，FTP服务器等。,第一讲 网站与网页概念,12,13,3.域名：Internet规定了一套命令机制，称为域名系统DNS（Domain Name System）。按域名系统定义的计算机名字称为域名。 如： 当用户用域名来访问远程的计算机时,必须由Internet的DNS的名字服务器(Name Server)将域名翻译成对应的32位IP地址,然后才能完成对远程的计算机的访问。,第一讲 网站与网页概念,14,4、虚拟主机 虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个“虚拟”的服务器主机，每台虚拟主机都具有独立的域名和IP地址（或共亨的IP地址），具有完整的Internet服务器功能。 虚拟主机之间完全独立，在外界看来，每台虚拟主机和一立的服务器主机完全一样。多台虚拟主机共亨真实主机的资源，这样就可以把网络的开销费用均摊到每台虚拟主机上。 可利用虚拟主机技术建立个人主页，在大型网站上（提供存放主页的免费空间，提供免费域名）申请主页空间和域名（免费或收费），获得成功后，把你制作的网页存放在虚拟主机上，这样你就好象在Internet上拥有了自己的服务器和网站。,第一讲 网站与网页概念,15,7. 网站的发布 (3)免费主页空间 如果只是想建立一个小型的、功能简单的网站，当然也可采用以上形式，但这需要有相应有费用支持，投资与效益的比例关系需要权衡。如果目前还不想投资太多，那么免费主页空间将是较好的选择。但现在较好的免费主页空间不多，且一般不支持ASP、JSP、CGI等高级功能。,第一讲 网站与网页概念,16,网站设计是一个系统工程，具有特定的工作流程，遵循这个流程，才能设计出令人满意的网站。网站设计主要分为网站规划、网站制作、后期维护三个阶段，如下图所示：,第二讲 站点的规划,17,总体规划,第二讲 站点的规划,制作网页如同泼墨作画，首先要进行构思，然后再加以实现。这种构思就是网站规划。网站规划的总体原则有两个：一是为读者提供有用信息，二是要美观。,18,第二讲 站点的规划,1、搜集材料 确定网站主题后，要围绕主题搜集材料，作为自己制作网页的素材。搜集的材料越多，制作网站越容易。材料既可以从图书、报纸、光盘、多媒体上获得，也可以从网上搜集。对搜集到材料就去粗取精，去伪存真。,最好是同一主题的，容量不要太大，除非你上网真的不要钱！另外最最需要注意的一点是：版权！ 有些作者会在原文中写明“引用时请注明出处！” ，或是“可以任意发布，但请保持原文的完整性！”，这样的比较好办，如果是“版权所有，禁止抄袭”，那只好另找资料了 。,19,2、确定网站的主题 网站的主题是指建立的网站所要包含的主要内容。例如，教育、旅游、体育、新闻、医疗、时尚、娱乐、搜索等。其中每一大类又可细分为若干小类。一般来说，确定网站主题应遵循以下原则： (1)主题鲜明：一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。 (2)明确设立网站的目的。 (3)体现自己的个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，办出自己的特色。,第二讲 站点的规划,20,网站命名和标志 在个人网站中，网站的名称起着很重要的作用，它在很大程度上决定了整个网站的定位。一个好的名称必须简洁、有概括性、有特色、容易记，还要符合自己主页的主题和风格。 网站命名应遵循以下的原则： （1）体现网站的主题，凝练，概括性强。 （2）合法、合情并合理。 （3）字数不要太多，一般控制在6个字以内。 （4）有个性，体现一定的内涵，可给浏览者更多的视觉冲击力和空间想像力,21,规划网站 规划网站就象设计师设计大楼一样，只有图纸设计好了，才能建成一座漂亮的楼房。 规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，根据实际情况设计各个页面之间的链接。规划网站的内容应包括：栏目的设置、目录结构、网站的风格（即颜色、搭配、网站标志LOGO、版面布局、图像的运用）等。,第三讲 站点的设计,22,制作网站主要包括以下步骤： (1)建立本地站点。建立站点根文件夹，用于存放首页、相关网页和网站中用到的其他文件。 (2)在站点根文件夹下创建子文件夹。为了使文件安排比较清晰，将页面文件和图像文件分开存放。 (3)向站点添加所需要的空网页。 (4)设计网页尽寸。页面大小一般选择800600规格。 (5)设计网页属性，包括页面标题、背景图像、背景颜色、链接颜色、文字颜色等。 (6)向网页中插入文本、图像、动画等对象。 (7)建立所需要的超级链接。 (8)预览和保存网页。,第三讲 站点的设计,23,一、主题栏的设置 在设计网站的主题栏与版块时应注意以下几个问题： 1）突出主题。把主题栏放在最明显的地方，让浏览者更快、更明确地知道网站所表现的内容。 2）设计一个最近更新栏目，让浏览者一目了然地知道更新内容。 3）栏目不要设置太多，一般不超过10个。,第三讲 站点的设计,24,二、目录结构设计 目录结构设计一般应注意以下问题： 1）按栏目内容建立子目录。 2）每个栏目下分别为图像文件创建一个子目录IMAGE（图像较少时可不创建） 3）目录的层次不要太深，主要栏目最好能直接从首页到达。 4）尽量使用意义明确的非中文目录。,25,例：设计班级网站,网站标志,网站简介,版权信息,网 站 导 航,这是网站结构图,这是网站主页,26,三、站点形象设计 1.网站标志LOGO LOGO最重要的作用就是表达网站的理念，便于人们识别，广泛地用于站点链接和宣传。如同商标一样，LOGO是站点特色和内涵的集中体现。如果是企业网站，最好是在企业商标的基础上设计，保持企业形象的整体统一。 设计LOGO的原则是：以简洁、符号化的视觉艺术把网站的形象和理念展示出来。,第三讲 站点的设计,27,2网页的色彩 不同的色彩搭配产生不同的效果，并能影响浏览者的情绪。网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。,第四讲 网站结构与网页布局,（1）红色：是热烈、冲动的色彩，代表热情、喜悦、庆典。 （2）橙色：橙色是一种富足的、快乐而幸福的色彩。 （3）黄色：灿烂、辉煌，象征着照亮黑暗的智慧之光和财富与权利。 （4）绿色：代表植物、生命、生机，显得和谐、宁静、健康，给人安全、舒适的感觉。 （5）蓝色：是永恒、沉稳的象征，多做为商品、企业形象的标准色。 （6）紫色：浪漫、爱情，由于具有强烈的女性化性格，除了和女性有关的商品和形象，其他类的设计不常用它为主色。 （7）黑、白、灰色 黑色高贵、稳重是科技的象征，为许多科技产品用色。 白色代表纯洁、简单，具有高级、科技的象征。 灰色代表阴暗、消极，具有平凡、温和、中立的感觉，属于中间色。,28,3网页的文字 注意以下基本原则: （1）不要使用超过3种字体类型，否则网页看起来将显得杂乱，没有主题。 （2）不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息 （3）最好不要使用不停闪烁的文字。 （4）标题的字体比正文要稍大一些，颜色也应有所区别。,29,4.图像的运用 网页上应适当地添加一些图像，使用图像一般应注意以下几个问题： 1）图像是为主页的内容服务的，不以让图像喧宾夺主。 2）图像要兼顾大小和美观。图片不仅要好看，还应在保证图片质量的情况下尽量缩小图片的大小（即字节数）。图像过大会影响网页的传输速度。 3）合理地采用JPEG和GIF图像格式。颜色较少的（256色以内）图像，可处理为GIF格式，色彩比较丰富的图像，最好处理为JPEG格式。 5.页面设计 网页页面的整体布局是不可忽视的。要合理地运用空间，让网页疏密有致、井井有条。 版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站标志（LOGO）、主菜单等最重要的模块放在突出的位置，然后再排放次要模块（例如搜索、计数器、版权信息、E-mail地址等）。 其他页面的设计应和首页保持相同的风格，并有返回首页的链接。,第三讲 站点的设计,30,注意：页面文字