网页设计基础 PPT

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