网页设计基础一.ppt

1、网页设计基础（一）,Internet,Internet是计算机交互网络的简称，是一个全球性的计算机互联网络，中文名称为“国际互连网”、“因特网”、“网际网”或“信息高速公路”等。 它是通过将不同地区而且规模大小不一的网络互相连接而形成的，利用通信设备和线路将全世界上不同地理位置的功能相对独立的数以千万计的计算机系统互连起来，以功能完善的网络软件（网络通信协议、网络操作系统等）实现网络资源共享和信息交换的数据通信网。,Internet的起源和发展,Internet的雏形形成阶段 1969年 ARPANET Internet的发展阶段 1985年NSFNET Internet的商业化阶段1995年

2、停止NSFNET，彻底商业化,Internet的最早起源于美国国防部高级研究计划署DARPA（Defence Advanced Research Projects Agency）的前身ARPAnet（阿帕网），该网于1969年投入使用。由此，ARPAnet成为现代计算机网络诞生的标志。 1983年，美国国防部将阿帕网分为军网和民网，渐渐扩大为今天的互联网。之后有越来越多的公司加入。,其中最引人注目的是美国国家科学基金会ASF（National Science Foundation）建立的NSFnet。NSF在全美国建立了按地区划分的计算机广域网并将这些地区网络和超级计算机中心互联起来。NFSn

3、et于1990年6月彻底取代了ARPAnet而成为Internet的主干网。,Internet的第二次飞跃归功于Internet的商业化，商业机构一踏入Internet这一陌生世界，很快发现了它在通信、资料检索、客户服务等方面的巨大潜力。于是世界各地的无数企业纷纷涌入Internet，带来了Internet发展史上的一个新的飞跃。 1994年internet进入中国。,Internet的功能,信息的获取与发布。 电子邮件（E-mail） 电子商务 网上交际 网络电话 网上事务处理,域名的发展,域名类似于互联网上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的互联网协

4、议（IP）地址相对应。 相对于IP地址而言，更便于使用者理解和记忆。 域名属于互联网上的基础服务，基于域名可以提供WWW、EMAIL、FTP等应用服务。 例如: 比 0容易记忆。,目前互联网上的域名体系中共有三类顶级域名 一是地理顶级域名，共有243个国家和地区的代码。例如.CN代表中国，.JP代表日本，.UK代表英国等等. 另一类是类别顶级域名，共有7个：.COM(公司)，.NET(网络机构)，.ORG(组织机构)，.EDU(美国教育)，.GOV(美国政府部门)，.ARPA(美国军方)，.INT(国际组织)。由于互联网最初是在美国发展起来的，所以最初的域名体系也主要

5、供美国使用，所以.GOV，.EDU，.ARPA虽然都是顶级域名，但却是美国使用的。只有.COM，.NET，.ORG成了供全球使用的顶级域名。相对于地理顶级域名来说，这些顶级域名都是根据不同的类别来区分的，所以称之为类别顶级域名。 随着互联网的不断发展，新的顶级域名也根据实际需要不断被扩充到现有的域名体系中来。新增加的顶级域名是.BIZ(商业)，.COOP(合作公司)，.INFO(信息行业)，.AERO(航空业)，.PRO(专业人士)，.MUSEUM(博物馆行业)，.NAME(个人)。,WWW与HTTP,WWW是World Wide Web的缩写，也可以简写为3W、Web等，称为国际互联网（In

6、ternet），又称万维网，它是基于超文本的信息查询和信息发布的系统。使用WWW的服务不仅可以提供文本信息，还可以包括声音、图形、图像以及动画等多媒体信息，它为用户提供了图形化的信息传播界面网页。,WWW就是以Internet上众多的WWW服务器所发布的相互链接的文档为基础，组成的一个庞大的信息网，目前它已经成为继书刊、广播、电视之后的第四媒体，具有越来越重要的影响力。,HTTP 网页在Internet上使用超文本传输协议（Hyper Text Transfer Protocol，HTTP）进行传送，要打开Internet上某一网页，只要在浏览器地址栏中输入网页地址即可。,Web页/网页（We

7、b page） 通过WWW发布的包含有文本、图片、声音和动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就组成了网站。 超级链接（Hyperlink） Web页中当用户单击它时可以转到其他Web页或当前页面的其他地方的文字、图片等对象 主页（Home page） 用户在Web服务器上看到的第一个Web页 首页中往往列出了网站的信息目录，或指向其他站点的超链接，主页是一个网站的入口。,网站的设计与制作,网站概述,1.网站工具 2.设计原则 3.网站分析 4.网站类别 5.网站色彩 6.网站图形 7.网站结构 8.网站技巧 9.网站特点,网站工具,1.网站设计工具：Ph

8、otoshop.Fireworks.Freehand.CorelDraw. 2.网站编辑工具：Dreamweaver.Frontpage.CSS.DHTML 3.网站动画工具：Flash.Ulead GIF.Swish. 4.网站开发工具：ASP.PHP.JSP.XML.Perl.CGI.JaveScriptVB.Script. 5.网站上传工具：LeapFTP.CuteFTP.FlashFTP,网站分析,1.首先了解客户需求 表现形式、标准色彩、版面结构、字体大小样式等. 2.分析客户需求 分析哪一种形式、色彩、结构更适合客户需求. 3.整体创意阶段 一般是2种-3种方案设计、最复杂的是设计

9、首页，因为他不但要符合该网站的类型风格和需求的要求，同时还要集中体现该网站的中心思想，重点内容的体现. 4.具体实施阶段,网站类别,功能上分：静态网页和动态网页 类型上分：商业个人娱乐 静态网页不需要数据交换，只是作为宣传 动态网页不仅仅要宣传，还要进行数据的 交换与储存.,静态、动态网页 静态网页：以.htm、.html、.shtml、.xml等为后缀的网页。 动态网页 ：在服务器端运行的网页，属于动态网页。以.asp 、.php 、.jsp 、.aspx 、.cgi 、.pl后缀名 所谓“动态”，并不是指网页上简单的GIF动态图片或是Flash动画，动态网站具备以下几个基本特征： 1.交互

10、性 ：网页会根据用户的要求和选择而动态地改变和响应。2.自动更新：即无须手动更新HTML文档，便会自动生成新页面，可以大大节省工作量。,网站色彩,常见的模式 RGB（红色、绿色、蓝色） CMYK（青色、洋红、黄色、黑色） HSB（色相、饱和度、亮度等）,网站色彩,色调 暖色调。即红色、橙色、黄色、赭色等色彩的搭配，可使主页呈现温馨、和煦、热情的氛围。冷色调。即青色、绿色、紫色等色彩的搭配，可使主页呈现宁静、清凉、高雅的氛围。对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会

11、适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。,红色：强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，愤怒，热情，活力的感觉 橙色：也是一种激奋的色彩，具有轻快，欢欣，热烈温馨，时尚的效果。黄色：亮度最高，有温暧感，具有快乐、希望、智慧和轻快的个性，给人感觉灿烂辉煌绿色：介于冷暖色中间，显得和睦，宁静，健康，安全的感觉。和金黄、淡白搭配，产生优雅，舒适的气氛。蓝色：永恒、博大，最具凉爽、清新，专业的色彩。和白色混合，能体现柔顺，淡雅，浪漫的气氛，给人感觉平静、理智.紫色：

12、女孩子最喜欢这种色，给人神秘、压迫的感觉黑色：具有深沉，神秘，寂静，悲哀，压抑的感受白色：具有洁白，明快，纯真，清洁的感受灰色：具有中庸，平凡，温和，谦让，中立和高雅的感觉黑、白色：不同时候给人不同的感觉，黑色有时感觉沉默、虚空，有时感觉庄严肃穆。白色有时感觉无尽希望，有时却感觉恐惧和悲哀。,网站图形,图形：矢量图与位图 常用的有：JPG、GIF、PNG、BMP 大小：最好不要超过30K,网站技巧,1.注意分辨率（800 x6001024x768) 2.点、线、面的运用,网页的基本元素,一般来说，组成网页的元素有文字、图形、图像、声音、动画、影像、超链接以及交互式处理等。它们的特点如下。,1文

13、字 网页的主体，负责传达信息的功能。在网页制作时，可通过字体、字型、字号和颜色等变化来美化页面格局。,2图形 WWW上的图形文件格式主要有JEPG、GIF和PNG三种格式，其中JPEG格式可支持真彩色和灰度的图形，而GIF文件只能储存256色的图片。,3动画 动画是动态的图形，添加动画可以使网页更加生动。常用的动画格式包括动态GIF图片和Flash动画，前者是用数张GIF图片合成的简单动画；后者采用矢量绘图技术，生成带有声音效果及交互功能的复杂动画。,4声音和视频 声音是多媒体网页中的重要组成部分。在将声音添加到网页之前，首先要对声音文件进行分析和处理，包括用途、格式、文件大小和声音品质等。支

14、持网络的声音文件格式很多，主要有MIDI、WAV、MP3和AIF等。,一般来说，不要使用声音文件作为背景音乐，那样会影响网页的下载速度。可以在网页中添加一个打开声音文件的链接，让音乐变得可以控制。在网页中也可以插入视频文件，视频文件使网页变得精彩生动，网页中支持的视频文件格式主要有Realplay、Mpeg、AVI和DivX等。,5表格 在网页中使用表格可以控制网页中信息的结构布局，精确定位网页元素在页面中出现的位置，使网页元素整齐美观。,6超链接 超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点，正是超链接的使用，使互联网变得丰富多彩，可以在文本和图片上设置超链接。,7导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。其作用是引导浏览者游历所有站点。实际上，导航栏就是一组超链接，链接的目标就是站点中的主要网页。 一般情况下，导航栏应放在网页中引人注目的位置，通常在网页的顶部或者一侧，导航栏可以是文本链接，也可以是一些图标和按钮。,8信息提交表单 表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。表单是提供交互功能的基本元素，例如问卷调查、信息查