《《网页设计基础》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计基础》PPT课件.ppt（32页珍藏版）》请在三一办公上搜索。
1、主讲：白小军,网页设计基础,课程共享网址,学习目标,随着互联网的迅猛发展，我们可以方便的从网络上获取大量信息，同时，也可以将自己的信息发布到网上。网络上的信息多数是通过网页的形式展现出来的，一个成功的网站往往由很多个精美绚丽的网页组成。要制作出美观的网页，就要学习网页设计与制作的相关知识。同时，考虑到客户机的多样性和浏览器的多样性，我们设计网页时要特别注意兼容性和标准化问题，保证我们设计的网页能够在各种环境下正常展现。,内容提要,网页与网站基础 网页的基本构成元素 网页设计相关技术和工具 网页设计的方法,Internet：Internet是由遍布全世界的各种各样的网络通过TCP/IP协议连接成
2、的一个松散结合的全球网，它使网络上的各台主机可以互相交换信息。,Internet服务：Internet为用户提供了各种各样的服务，如：,WWW、EMAIL、FTP、即时通信等,WWW服务：WWW的含义是全球信息网（World Wide Web），简称为Web或“万维网”。它由欧洲核子物理研究中心（CERN）研制，是一个基于超文本(hypertext)方式的信息查询工具，通过http协议传输超文本信息。WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起，通过浏览器（browser）提供一种友好的信息查询界面。,WWW的三个核心要素：URL：统一资源定位器，即网址 HTTP
3、：超文本传输协议，在客户机和服务器间传递信息 HTML：超文本标记语言，信息的表示方式,请求,响应,服务器,客户端浏览器,URL：万维网采用统一的命名方案来访问Web上的资源。URL（Uniform Resource Locations,统一资源定位符）用于标识Web上的页面和资源。,URL一般由3部分构成，如下：,HTTP：协议是一组标准的规则，用于实现通信所需的数据表示、信号发送、身份验证及差错校验等，访问Web上的资源都需要遵循这些规则。HTTP是TCP/IP协议栈中的一个应用层协议，用于定义WEB浏览器与服务器之间交换数据的过程及数据本身的格式,HTML：超文本标记语言（Hyper T
4、ext Markup Language），用于创建网页文档。HTML文档是使用HTML标记和元素创建的，此文件以扩展名htm或html保存在Web服务器上。,网页：用户浏览的某一个页面。它是一个纯文本文件，是向访问者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析,示例1,浏览器：用户浏览网页的工具。将HTML文本解释为图形界面展现给用户，并作为代理负责用户与服务器的交互。目前常用的浏览器有：,微软的Internet Explorer Mozilla的Firefox Google的Chrome
5、.,网页的展示原理：客户通过浏览器看到的包含文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。浏览器对该文件进行解释，生成了多姿多彩的网页。除文本外，其它媒体素材（图像、声音、动画、影像等），都需要保存成单独的文件，通过URL嵌入到网页文件中。可以看出，WWW服务主要是通过一个个多媒体网页提供给用户各种信息的,静态网页和动态网页：根据网页的生成方式不同，将Web页面分为静态网页和动态网页两大类。静态网页是不包含服务器端代码的html文件，web服务器只是负责把静态网页发送给浏览器，由浏览器展示出来动态网页中含有服务器端代码，需要在服务器上执行这些代码，生成客户端需要的内容
6、后发送给浏览器展示,静态网页：网页的结构和内容都在设计阶段完全确定下来，以后每次用户访问该网页，看到的都是同样的内容。,动态网页：网页的内容在服务器端动态生成，然后传递给客户端展示。这样，当用户访问一个网页时，服务器可以根据用户请求的不同而生成不同的数据。,例如：用户个人主页,例如：邮箱登录页面,网站：是承载相关内容的一系列网页，为用户提供WWW服务的服务器或服务器集群。平时所说的访问某站点，实际上是访问提供这种服务的一台或多台计算机。,Web的工作原理：网页被放置在Web服务器上。用户通过URL请求web服务器时，服务器把相应的网页传送到用户浏览器（分静态和动态两种处理方式）浏览器收到页面代
7、码，将其解释为图形界面并展示,网站的结构：网站中的所有网页一般组织在一个虚拟目录下，如图示：,web,index.htm,images,style.css,about.html,h1.htm,h2.htm,h3.htm,首页文件的直接上级目录，是网站根目录,网站的特点：众多的网页确定的主题统一的风格便捷的导航栏目的分层,网站制作流程：确定站点的核心内容网站的规划网站外观的设计网页具体制作网站性能测试网站发布网站更新与维护。,网页设计的原则：页面整体效果统一，避免纷繁杂乱整个页面和谐一致，符合美学法则较快的下载速度。让页面简洁，避免使用大量的图片，取消自动下载的音乐和媒体素材网页链接无误，主要功
8、能都能正常访问兼容性好，在各种浏览器下显示效果统一，发布前在各种浏览器下都测试一遍,网页的基本元素：一个网页的基本元素主要包括文本、图像和超链接，其它元素包括声音、动画、视频、表格、导航栏、表单等,文本：是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以文本形式为主。与图像网页元素相比，文字虽然并不如图像那样容易被浏览者注意，但却能包含更多的信息并更准确地表达信息的内容和含义。,图像：图像元素在网页中具有提供信息并展示直观形象的作用。用户可以在网页中使用GIF、JPEG和PNG等多种文件格式的图像。目前应用最广泛的是GIF和JPEG两种格式。,动画：动画在网页中的作用是有效地吸引访问
9、者更多的注意。用户在设计制作网页时可以通过在页面中加入动画使页面更加活泼。,声音：声音是多媒体和视频网页重要的组成部分。用户在为网页添加声音效果时应充分考虑其格式、文件大小、品质和用途等因素。另外，不同的浏览器对声音文件的处理方法也有所不同，彼此之间有可能并不兼容。,视频：视频文件的采用使网页效果更加精彩且富有动感。常见的视频文件格式包括RM、MPEG、AVI等。,超链接：超链接是从一个网页指向另一个目的端的链接，超链接的目的端可以是网页，也可以是图片、电子邮件地址、文件和程序等。当网页访问者单击页面中某个超链接时，将根据自身的类型以不同的方式打开该目的端。例如，当超链接的目的端是一个网页时，
10、将会自动弹出窗口以显示网页内容。,表格：表格在网页中用来控制页面信息的布局方式。其作用主要有两个方面：一方面是使用行和列的形式布局文本和图像以及其他列表化数据；另一方面是精确控制网页中各种元素的显示位置。,交互式表单：表单在网页中通常用来联系数据库并接受访问用户在浏览器端输入的数据。表单的作用是收集用户在浏览器上输入的联系信息、接受请求、反馈意见、设置签名以及登录信息等。,导航栏：导航栏在网页中是一组超链接，其链接的目的端是网站中重要的页面。在网站中设置导航栏可以使访问者既快又容易地浏览站点中的其他网页。,其它元素：略,网页设计相关的技术：进行网页设计需要用到一系列相关的技术，主要包括：,HT
11、ML:用于定义网页的内容 CSS:用于定义网页的外观 客户端编程:定义页面的客户端行为，JavaScript等 服务器编程:定义服务器端行为，ASP、PHP、JSP等,网页设计相关的工具：为完成网页设计，需要用到一系列的工具：,文本编辑工具:手工编辑网页代码，Notepad等 可视化设计工具:大幅度提高设计效率 Microsoft的Expression Web Adobe的Dreamweaver 图片处理工具:制作精美的图片，美化网页 Adobe的Photoshop Fireworks 动画制作工具:制作精彩的动画图片，Adobe的Flash 编程工具：进行客户端和服务器端程序的开发,网页设计的重点：,网页内容,网页界面,+,=,网页设计的流程：,资源搜索,确定内容,确定界面,形成效果图,形成静态页面,网页设计中的两个核心问题：,布局问题：三种布局的方法（略）配色问题：多种颜色的搭配（略）,
