【PPT】网页设计基础知识.

第一章网页设计基础知识1.1internet基础1.2网页设计工具1.3网站建设流程1.4HTML语言1.1internet基础1.1.1INTERNET的概述Internet是相互连接的网络集合。Internet是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。1.1.1INTERNET的概述Internet最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部高级研究计划署协助开发的ARPANET。最初是只允许国防部人员进入的封闭式网络。到1987年，在美国国家科学基金会的推动下，将之主要从军事用途转向科学研究和民事用途，形成了今天的Internet主干网雏形NSFNET。全球网络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融入我们的日常生活。从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，在10多年的时间里，中国Internet发生了飞速的发展，截至2006年底，我国网民人数达到了1.37亿，即每十人中就有一人是网民。10%的网民普及率将是互联网发展的高速拐点，突破10%之后，中国互联网将迎来更快速的增长期。另外网站数、IP地址等也迅速增长，分别达到84.3万和9800万。从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。Internet所提供的服务主要是、E-mail、FTP、网上传呼、在线聊天、网上购物等等，而其中是最常用的服务。1.1.1INTERNET的概述1.1.2•(WorldWideWeb)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。如图所示。internet浏览器WEB服务器客户端HTTP网络协议用户通过浏览器访问WEB服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即URL，统一资源定位器。URL的一般格式为：“协议名：//主机名[/文件夹名/文件名]”常用的协议名如下：HTTP：超文本传输协议，用于转换网页。FTP：文件传输协议，主要用于传输文件，许多提供软件下载的网站使用“FTP”作为下载的网址。MAILTO：传送E-mail协议，主要用于传输电子邮件。例如：:[e-mail]1.1.3网页与网站构建的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了的纵横交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。网站点概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多，可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面，仅在某台WEB服务器的占据很小的空间。一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的index.htm或index.html等。1.1.4域名与IP地址•在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。•IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。10网络号主机号012381624310网络号主机号01238162431110网络号主机号01238162431A类地址的范围为：1.0.0.0—126.255.255.255B类地址的范围：128.0.0.0-191.255.255.255C类地址的范围：192.0.0.0-223.255.255.255ABC1.1.4域名与IP地址•IP地址是一串难以记忆的数字，因此在1985年开始，引入了域名的概念，用具有含义的字符来表示网络中的主机，以便于浏览者访问。域名与IP地址如何对应呢？通过DNS域名解析系统将域名解析到相应的IP地址上，实现这二者之间的对应关系。•我们知道新浪网的域名：，但很少有人知道新浪网WEB服务器的IP地址是多少？•域名的分类：域名系统是一个分层的树状结构组织，如图所示。最上面是一个无名的根域，下层为顶级域名，接着是二级……1.1.4域名与IP地址根域ComnetorgjpcntwIbmhpyahooComedunetSinaebayalibaba图1.2域名结构图域名域名机构附注：全称Com商业机构CommercialorganizationEdu教育机构EducationalinstitutionGov政府部门governmentInt国际性机构InternationalorganizationMil军队militaryNet网络机构NetworkingorganizationOrg非盈利机构Non-profitorganization表1.1按组织分类的顶级域名表1.2按地理区域分类的项级域名域名国家附注：全称cn中国Chinaca加拿大Canadajp日本Japankr韩国Korearu俄罗斯Russiatw台湾Taiwanhk香港HongKong域名的书写格式为：叶节点名.二级域名.顶级域名例如：，：web服务器名，sohu：企业名称，com：顶级域名。1.2网页制作工具•目前网页制作工具较多，大多数网页制作工作都是通过“所见即所得”的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。1.2.1网页编辑工具网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是notepad(记事本)、Ultraedit等。所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。但与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，因此我们这本教材主要介绍的网页编辑工具是Dreamweaver。1.2.2图形和图像处理工具•目前常用的图形和图像处理工具主要：Photoshop及Firework。•Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了ImageReady，能够实现各种专业化的图像处理、动画的制作等。•Fireworks是由MacorMedia公司出品的首选WEB图形图像处理软件。它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成FireworkHTML，直接导入到网页中，使用非常方便。本教材将在以后的章节做详细的介绍。1.2.3动画制作工具•Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。本教材将在以后的章节做详细的介绍。1.3网站建设流程•要建设一个优秀的网站，通常应该遵循以下工作流程：确定站点的核心－网站的规划－网站外观的设计－网页具体制作－网站性能测试－网站发布－网站更新与维护。规划设计维护发布开发1.3.1网站规划•一个网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。1．明确建立网站的目标和用户需求2．确定网站的风格3．网站的技术问题1.3.2网站设计•对网站进行详细的规划之后，就可进入到设计阶段。•好的Web站点要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣，突出网站的特点。1．网站的版式设计2．色彩在网页设计中的作用3．网页形式与内容相统一4．三维空间的构成和虚拟现实5．多媒体功能的利用1.3.3网页制作静态网页的制作：采用HTML（超文本标记语言）生成的网页，供浏览者浏览。此阶段需要根据设计阶段制作的示范网页，通过去Dreamweaver等软件在各个具体网页中添加实际内容，如：文字、图像、FLASH动画、多媒体文件等。这类静态网页缺少动态的交互，因此还需添加网页的交互性，即动态网页的制作。动态网页的制作：动态网页的编程目前常用的技术为.ASP\.PHP\.JSP等，实现客户端与服务器的交互。比如说：会员注册、信息查询、产品选购、留言、论坛等。1.3.4站点的测试和上传网站制作完毕，在本机上进行测试，查看网站上是否存在某些错误，如网站是否存在链接的错误，图片是否正常显示，网页程序代码是否有错等。测试完毕，后用上传工具传到WEB服务器上。1.3.5站点更新和维护要充分发挥网站的市场功能，及时更新最新的产品信息。一个企业要有专业的网站维护人员或交给专业的网络公司来承担这项工作。1.4HTML语言网页的本质是HTML，HTML-超文本标记语言，超文本使网页之间具有跳转能力，使浏览者可以选择阅读路径。使用HTML编写的WEB页面称之为HTML文件，这种文件一般以“.html”或者“.htm”为扩展名，可以使用记事本、Altraedit标记型软件编辑，也可使用Dreamweaver、Frontpage等所见即所得类网页制作工具来快速创建HTML文件。HTML文件通常分为头部和主体两部分，头部（HEAD）包含了编写页面的说明信息，如页面的类型、使用的字符集、使用的编写工具以及页面的标题等，这部分内容不会显示在网页中；主体（BODY）则包含希望表达的信息，可以是正文、图像、指向另一个WEB页面的超链接指针等。一、HTML标签的格式HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：标签HTML语言元素/标签1）标签分为成对标签和非成对标签，比如：title、table、font等属于成对标签，而br、hr等属于非成对标签，标签忽略大小写，书写格式非常灵活。2）可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项间用空格来进行分隔。例如：imgsrc=images/girl.gifwidth=100height=873）HTML中使用的注释语句为!—注释内容--，注释内容可插入文本中任何位置，注释内容不会显示在网页中。二、常见标签如下介绍1）HTML…/HTML标识HTML文件的开始与结束。中间是一些HTML语言的元素。它允许网络浏览器把文件内容确认为HTML文件。2）HEAD…/HEAD头部标签，其中的信息不会出现在网页中。但其中包含了许多网页的属性信息，例如网页的题目、关键词、网页类型和语言内码等。（1）title…title标题标签，网页的标题将会显示在浏览器的标题栏上。（2）meta…meta标签，包括了Mime字符集信息、网页关键字、网页说明信息等，这些信息有助于网站的推广。3）BODY和/BODY主体标签，它是文档的主干，包含了文档的内容。可以通过多种途径来表现这些内容。例如，对于可视浏览器，可以把主体想象成一张画布，在画布上出现