网页设计概述

1.1 网页和网站

3.网站
网站是指在因特 网上，根据一定的规 则，使用HTML等工 具制作的用于展示特 定内容的相关网页的 集合。简单地说，网 站是一种通讯工具。
1.1 网页和网站

网站由域名\网站源程序\网站空间三部分构成。

域名（俗称网址）形式比如： www.neusoft.com、www.neusoft.edu.cn (一级域名)，bbs.neusoft.edu.cn （二级域 名）； 网站空间由专门的独立服务器或租用的虚拟主 机承担； 网站源程序则放在网站空间里面，表现为网站 前台和网站后台。


1.1 网页和网站


根据网站所用编程语言分类：例如asp网站、php网 站、jsp网站等； 根据网站的用途分类：例如门户网站（综合网站）、 行业网站、娱乐网站等； 根据网站的持有者分类：政府网站、企业网站、商业 网站、教育科研机构网站、个人网站、其它非盈利机 构网站以及其它类型等。 根据网站的内容分类： 网站搜索(比如百度)、资讯（比如新华网）、下载 (比如华军软件园)、图片（比如图片天下）等； 网址（比如hao123）、音乐（比如百度MP3）、 视频（影视）、等； 商务（比如阿里巴巴）、网店（比如淘宝）等； 问答（比如百度知道）、咨询（比如威客）、百科、 博客、播客、格子等。
(4) 动态网页技术可以实现更多的功能，例如用户注册、登 录、在线调查管理、企业事务处理等；
(5) 当用户请求时先由服务器运行得到结果后才返回一个完 整的（静态）网页给客户端浏览器；动态网页是保存在服务 器上的文件，与客户端的文件是不相同的两个文件。
1.3 网页制作工具
常用的动态网页制作工具有：
ASP（Active Server Pages) 微软公司推出 服务器端：Windows 2000+IIS、Windows XP+IIS ； 客户端：普通浏览器即可 特点：将VBscript、或JavaScript嵌入到HTML中。 优点：简单易学、容易上手；缺点：不能跨平台 JSP(JavaServer Pages) 是Sun公司推出的网站开发技术，是将纯Java代码嵌入HTML 中实现动态功能的一项技术。JSP是将Java程序片段 （Scriptlet）和JSP标记嵌入普通的HTML文档中。 优点：跨平台；缺点：复杂难学
1.5 网站风格设计


2. 页面布局
页面布局一般要遵循以下原则：
静态网页和动态网页

动态网页： (1) 动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后 缀，并且在某些动态网页网址中有一个标志性的符号——“?”；
(2) 动态网页的内容能根据某种条件的改变而自动改变、能 与服务器端交互信息，如计数器、聊天室、论坛 ……
(3) 动态网页以数据库技术为基础，并可读写服务器端的文 件，大大降低网站维护的工作量；
网页设计概述
网页设计概述

1.1 网页和网站 1.2 网页中的主要元素 1.3 网页制作工具 1.4 网页设计的基本流程 1.5 网站风格设计
1.1 网页和网站



基本术语： WWW（World Wide Web）：也可以简写为W3、 3W、Web等，称为国际互联网（Internet），又 称万维网，它是Internet上基于客户/服务器体系 结构的分布式多平台的超文本、超媒体信息服务系 统，允许用户在一台计算机上通过Internet存取另 一台计算机 (俗称Web服务器) 上的信息。 HTTP（ Hyper Text Transfer Protocol 超文本 传输协议）：是一个用于在客户端和服务器间请求 和应答的协议。是互联网上应用最为广泛的一种网 络传输协议。 URL（Uniform Resource Locator 统一资源定 位符）：网址， 如 http://www.neusoft.edu.cn/。
1.1 网页和网站
1．网页
网页是指用html（Hyper Text Markup Language： 超文本标记语言）编写的，通过因特网（Internet）传 输，并被web浏览器解释成可以显示出来的、集合文本、 图片、声音和动画等信息元素的页面文件。
2．网页的类型
根据页面内容可以分为首页（主页）、栏目页、 内容页等类型；按制作技术分为静态网页与动态网页。
1.5 网站风格设计

网站风格设计决定了网站为浏览者提供的第一印象与直 观反映，是网站吸引浏览者的重要参照指数之一，和网 站内容与网站功能具有相同的重要地位。 1. 色彩搭配


白色和黑色背景的网页颜色搭配最方便。 亮色与暗色配合最容易突出画面，如黑与白，红与黑， 黄与紫。 近似颜色搭配能给人一种柔和的感觉，如墨蓝与淡蓝， 深绿与浅绿。 一个页面最好有一个主色调，而且色彩最好不要超过 三五种，最好采用同一个色系。
3.动画

网页动画主要分为flash动画和gif动画。 其中，flash动画运用的最广泛，gif动画 通常用于制作简单的、只有几帧图片的交 替动画。
Gif动画
4.超链接

所谓超链接是指从一个网页指向一个目标 的链接关系。这个目标可以是另一个网页， 也可以是一幅图片、一个电子邮件地址、 一个文件甚至是一个应用程序。它表明了 网页文件之间的相互链接关系。


8.视频

网页中的视频文件格式： ASF、WMV、RM、RMVB
1.3 网页制作工具

HTML

Hypertext Markup Language 超文本标记语言 告诉浏览器如何显示文档内容，如文本、图像和其 它媒体
1.3 网页制作工具

HTML的编辑环境


所见及所得的编辑器，如：Dreamweaver、 FrontPage 文本编辑工具，如：记事本、EditPlus、 Visual Studio. Net
1.3 网页制作工具
常用的动态网页制作工具有：
PHP (Hypertext Preprocessor) (超文本预处理器）是一种HTML内嵌式的语言（类似于ASP） 服务器端：Unix，Linux，或者Windows操作系统下； 客户端：普通浏览器。 优点：免费、开放源代码；缺点：缺乏大公司的支持。
ASP.NET 微软产品,其前身是asp
1.3 网页制作工具

本课程的定位：
Βιβλιοθήκη Baidu
静态网页的设计与制作 课程用到的软件dreamweaver CS3
1.4 网页设计的基本流程

网站创建三步曲：
1、网站的整体规划和设计 主题和内容的确定 网站栏目的确定 网站目录结构的设计 网站链接结构的设计 网站的风格设计 2、网站素材的准备和收集 3、网页的设计制作
5.表格

表格的两大用途：显示数据和排版
6.表单
7.音频


网页中的音频文件格式：
WAV格式：无损的音乐。完全未经压缩，10MB/分 钟。Windows系统使用的标准数字音频格式。 MP3格式：能够以较小的比特率、较大的压缩比达 到近乎完美的CD音质。 MIDI格式：文件一般较小，常用于提供背景音乐。 WMA格式：适合在网络上在线播放。 RealAudio：流动的旋律。流音频格式，主要用于 提供网络实时广播。Real的文件格式主要有：ra、 rm、rmx等。
Flash软件
Ulead Gif Animator软件
Swish软件
1.3 网页制作工具




动态网页技术 动态网页可以实现网页浏览者和网页设计者的交互。实 现交互技术有两种：一种是客户端技术如常用的 JavaScript和VBScript；另一种是服务器端技术如目 前常用的ASP、JSP和PHP。 最新技术 Ajax
1.3 网页制作工具



常用网页图形制作软件 Fireworks Fireworks是Macromedia公司发布的一款专为网络图形 设计的图形编辑软件，使用Fireworks可以轻松地制作 出尺寸较小的图形、GIF动画。 Photoshop Photoshop是Adobe公司推出的功能强大的平面图像处 理软件，Photoshop在图像编辑、桌面出版、网页图像 编辑、广告设计、婚纱摄影等各行各业有着广泛的应用， 它已成为许多涉及图像处理的行业的事实上的标准。 CorelDRAW CorelDraw是加拿大Corel公司开发的著名绘图软件包， 它既是一个大型的矢量图形制作工具软件，也是一个大 型的工具软件包。
网站链接结构的设计
星状链接结构：每个页面相互之间都建立有链 接。优点是浏览方便，随时可以到达自己喜欢的 页面。缺点是链接太多，容易使浏览者迷路。
在实际的网站设计中，我们希望浏览者既可以方便快捷的到达自己需要 的页面，又可以清晰的知道自己在什么位置。所以，最好的方法是：首 页和一级页面之间有星状链接结构，一级和二级页面之间有树状链接结 构。如果站点内容庞大，分类明细，需要超过三级页面，那么建议在页 面里显示导般条，可以帮助浏览者明确自己所处的位置。
1.4 网页设计的基本流程
网站目录结构的设计
目录结构的好坏，对站点本身的上传维护，内容未来的扩 充和移植有着重要的影响
网站链接结构的设计
首页
树 状 链 接 结 构
一级页面
一级页面
二级页面
二级页面
二级页面
二级页面
首页链接指向一级页面，一级页面链接指向二级页面。浏览时，一级级 进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置， 不会迷路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的 子页面，必须绕经首页。
Fireworks软件
Photoshop软件
CorelDRAW软件
1.3 网页制作工具



常用网页动画制作软件 Flash Flash是Macromedia公司开发的一款优秀的网页动画 开发软件，从简单的动画到复杂的交互式Web应用程序， 它使用户可以创建任何作品。通过添加图片、声音和视 频，可以使Flash应用程序媒体丰富多彩。 Ulead Gif Animator Ulead GIF Animator是Ulead（友立）公司发布的一 个制作动画GIF的工具，网页设计者可以快速、轻松地 创建和编辑网页动画文件。 Swish 虽然网上的动画早已是flash的天下，但Flash的设计太 过繁琐，Swish是一款非常方便的Flash制作工具，可 以简单地在网页中加入Flash动画。

Asynchronous JavaScript and XML(异步JavaScript和 XML ) 在 2005 年由 Google 推广开来的编程模式 无刷新更新页面

Flex
静态网页和动态网页

静态网页： （1）静态网页文件以.htm、.html、.shtml等常见形式为后缀， 不含有“?”； （2）网页内容一经发布到网站服务器上，无论是否有用户访问， 每个静态网页内容都固定地保存在网站服务器上；静态网页是 一个独立不变的文件。 （3）静态网页的内容相对稳定，因此容易被搜索引擎检索； （4）静态网页没有数据库的支持，在网站制作和维护方面工作 量较大； （5）静态网页交互性仅限于客户端，在功能方面有较大的限制。 （6）网页上能动的元素只是一种动态效果，不等于动态网页。
1.2 网页中的组成元素

文本 图像 动画 超链接 表格 表单 音频 视频
1.文本

文本是网页存在的基础.在网页中,网页的 设计与制作者可以通过设置字体、字号、 颜色等来改变文本的视觉效果。
2.图像



制作网页时可用的图片格式： GIF图形采用非失真的压缩方式,在压缩的过程中,像 素信息不会被牺牲掉,被牺牲的是图形的颜色,GIF图 片文件最多只能保存256色,对于颜色不多、线条清 楚的图，采用GIF格式。GIF图像支持透明的背景色 和动画格式。 JPG/JPEG图片文件采用失真的压缩方式，图片在压 缩的过程中，图形的像素信息会被减去一些，但图片 的颜色不会丢失。因此，全彩的连续色调、没有明显 边缘的图，如风景照，适合采用JPG文件格式显示。 其不支持透明的背景色和动画格式。 PNG是Fireworks的默认文件格式，支持高级别无损 耗压缩，受最新的web浏览器支持,支持透明图像的 制作。