第一章 基础知识 制作：秦洪英.

Presentation on theme: "第一章 基础知识 制作：秦洪英."— Presentation transcript:

1 第一章 基础知识 制作：秦洪英

2 主要内容 1.1 Internet与WWW 1.2 网站与网页 1.3 网页设计常用软件

3 1.1 Internet与WWW 1.1.1 什么是Internet
简单地说，Internet就是将世界各地的计算机网络、主机和个人计算机通过通信设施和通信协议（基于TCP/IP协议簇）互相连接起来所构成的互联网络系统。 Internet目前的用户已经遍及全球，有几亿人在使用Internet，并且它的用户数还在以等比级数上升。

4 1.1 Internet与WWW 1.1.2 WWW的基本概念 WWW是World Wide Web的缩写，简写成Web，中文叫做万维网。
现在Internet发展得最为蓬勃的部分就是WWW，浏览Web已成为当今最主要的Internet服务。WWW只是Internet的一部分，Internet还包括FTP、BBS等其他服务。 WWW的结构非常简单，主要分为两个部分：一部分为服务器端（Server），也称为网页的提供者；另一部分为客户端（Client），也称为网页的接收者。这种模式称为客户机/服务器（Client/Server）模式。

5 1.2 网站与网页 网站的种类 网页是网站的基本信息单位，是WWW的基本文档，它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的，通过链接实现与其他网页或网站的关联和跳转。 网页文件是一种在WWW上传输的能被浏览器识别显示的文本文件，扩展名是.htm或.html。 网站是由众多不同内容的网页组成的一个集合，通常把进入网站首先看到的那一页网页称为首页或主页（Homepage），由网页的内容体现网站的全部功能。

6 1.2 网站与网页 1.2.1 网站的种类 1、根据网站提供的服务分类 资讯类网站 交易类网站 互动游戏类网站 有偿资讯类网站 功能型网站
1.2 网站与网页 网站的种类 1、根据网站提供的服务分类 资讯类网站 交易类网站 互动游戏类网站 有偿资讯类网站 功能型网站 综合类网站

7 1.2 网站与网页 1.2.1 网站的种类 2．根据网站的性质分类 政府网站 企业网站 商业网站 教育科研机构网站 个人网站 非盈利机构网站
1.2 网站与网页 网站的种类 2．根据网站的性质分类 政府网站 企业网站 商业网站 教育科研机构网站 个人网站 非盈利机构网站 其他类型的网站

8 1.2 网站与网页 1.2.1 网站的种类 3．根据在大型搜索引擎上的设置分类 娱乐与休闲类网站 商业与经济类网站 艺术与人文类网站
1.2 网站与网页 网站的种类 3．根据在大型搜索引擎上的设置分类 娱乐与休闲类网站 商业与经济类网站 艺术与人文类网站 健康与医药类网站 新闻与媒体类网站 政府与政治类网站 电脑与网络类网站 社会与文化类网站 科学与教育类网站 参考资料类网站

9 1.2 网站与网页 网站建设的规划 网站规划是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位的作用。 一个网站的成功与否和建站前的网站规划有着极其重要的关系。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。   建立网站的步骤可分为： 申请 账号、申请网页空间、域名注册和网页制作4步。

10 1.2 网站与网页 1.2.3 网站设计的原则 在着手进行一个网站的设计之前，首先要明确以下几项设计原则： （1）内容与形式相统一。
1.2 网站与网页 网站设计的原则 在着手进行一个网站的设计之前，首先要明确以下几项设计原则： （1）内容与形式相统一。 （2）主题鲜明。 （3）风格统一。 （4）兼顾下载速度与美观。 （5）导航清晰。 （6）栏目设置合理。 （7）良好的兼容性。 （8）经常更新。

11 1.2 网站与网页 1.2.3 网站设计的原则 作为一个优秀网站，应该具备以下五大要素： 网站内容丰富。 页面下载速度快。
1.2 网站与网页 网站设计的原则 作为一个优秀网站，应该具备以下五大要素： 网站内容丰富。 页面下载速度快。 功能多样、使用方便。 网站品质优秀。 保护个人信息。

12 1.2 网站与网页 网页设计的原则 1．了解客户需求 2．遵循Web标准 3．运用形式美法则

13 1.2 网站与网页 网页版式设计 网页的设计首先涉及的是页面的版面编排问题。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，那样往往会搞得杂乱无章。因此，必须根据内容的需要将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大观众。

14 1.2 网站与网页 1.2.5 网页版式设计 1．版面布局的依据 （1）主次分明，中心突出。 （2）大小搭配，相互呼应。
1.2 网站与网页 网页版式设计 1．版面布局的依据 （1）主次分明，中心突出。 （2）大小搭配，相互呼应。 （3）图文并茂，相得益彰。 （4）动静要有度，平衡要对称。

15 1.2 网站与网页 1.2.5 网页版式设计 2．网页布局的类型 网页布局大致可分为：
1.2 网站与网页 网页版式设计 2．网页布局的类型 网页布局大致可分为： “国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、自由型等。

16 1.2 网站与网页 网页色彩设计 1．色彩的基础知识 色彩是艺术表现的要素之一。在网页设计中，要根据和谐、均衡和重点突出的原则将不同的色彩进行组合，搭配出美丽的页面。 作为网页设计师，做到有针对性的用色是相当重要的。针对不同的主题来布置色彩，如健康类的网站就不能采用较为刺激的大红和黄、橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，以及一些不利于健康的联想。

17 1.2 网站与网页 1.2.6 网页色彩设计 2．网页设计的标准色彩
1.2 网站与网页 网页色彩设计 2．网页设计的标准色彩 “标准色彩”是指展示网站形象和延伸内涵的色调。作为网站标准色彩的设计要遵循的基本原则是标准色彩不要超过三种。如果一个网站标准色彩超过三种则会让人眼花缭乱。标准色彩主要用于网站的标志、标题、主菜单和大色块，给人以整体统一的感觉，至于其他色彩的使用，只可作为点缀和衬托，绝不能喧宾夺主。

18 1.2 网站与网页 图形与文字的设计 图形和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。

19 1.2 网站与网页 1.2.7 图形与文字的设计 1．图形设计的原则
1.2 网站与网页 图形与文字的设计 1．图形设计的原则 图形是网站的特色之一，它有醒目、吸引人以及传达信息的功能。好的、适量且清晰的图形可以为页面增色，反之则会惹来浏览者的反感。在图形使用上，要采用一般浏览器均支持的压缩图形格式，如JPEG、GIF等，JPEG的压缩效果较好，适合中大型的图片，可以节省传输时间。 使用图形的一般规则如下： （1）图形的主体要清晰可见，去除不必要的噪声。 （2）图形的意义要简单明了。 （3）图形内的文字要清楚容易辨认。 （4）图形内文字的装饰不要过分花哨，造成文字辨识不易。

20 1.2 网站与网页 1.2.7 图形与文字的设计 2．文字设计的原则
1.2 网站与网页 图形与文字的设计 2．文字设计的原则 文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息。文字设计是增强视觉传达效果，提高作品的诉求力，赋予版面审美价值的一种重要构成技术。文字排列组合的好坏，直接影响其版面的视觉传达效果。网页上的文字要易于阅读，文字太细、颜色太浅、页面太长或超出屏幕宽度都是有违网站设计“美学原则”的。在文字的组合中，要注意以下几个方面： （1）人们的阅读习惯。 （2）字体的外形特征。 （3）要有一个设计基调。 （4）注意负空间的运用。 （5）在有图片的版面中，文字的组合应相对较为集中。

21 1.2 网站与网页 1.2.7 图形与文字的设计 3．文字和图形的组合设计
1.2 网站与网页 图形与文字的设计 3．文字和图形的组合设计 文字、标题、图片等的组合会在页面上形成各种各样的线条和形状，这些线条与形状的组合构成了主页的总体艺术效果，搭配好这些线条和形状能增强页面的艺术魅力。 （1）直线（矩形）的应用。 （2）曲线（弧形）的应用。 （3）曲线、直线（矩形、弧形）的综合应用。

22 1.2 网站与网页 1.2.7 图形与文字的设计 4．设计图形与文字时还应注意的事项 （1）标题的呈现方式。 （2）连结点的呈现方式。
1.2 网站与网页 图形与文字的设计 4．设计图形与文字时还应注意的事项 （1）标题的呈现方式。 （2）连结点的呈现方式。 （3）重要信息呈现方式。 （4）内文设计部分。

23 1.2 网站与网页 1.2.8 网页音效设计 网页中背景音乐或指令音乐等音效的使用能够带给浏览者愉悦感、联想和想象。 1．指令音
1.2 网站与网页 网页音效设计 网页中背景音乐或指令音乐等音效的使用能够带给浏览者愉悦感、联想和想象。 1．指令音 当浏览者进行访问某个页面或者单击等交互动作时，伴随动作会产生一些短暂而且适宜的音效，比如在交互过程中页面间的转换经常伴随“嗖”、“唰”等声音，按钮则伴随“咔哒”等声音，以此给浏览者一定的心理暗示，同时对内容起到烘托作用。 2．背景音乐 不同的音乐表达不同的情感，如欢乐、喜悦、彷徨、忧愁、愤怒、激情、沧桑、坚强、希望等。相对于指令音而言，此类音乐一般播放时间都比较长，适合作为网页的背景音乐使用。

24 1.3 网页设计常用软件 1.3.1 Dreamweaver 8的主要功能和特点 1.3.2 Photoshop CS2的主要功能和特点
1.3 网页设计常用软件 Dreamweaver 8的主要功能和特点 Photoshop CS2的主要功能和特点 Flash 8的主要功能和特点