第一课 网页设计概述 20110221

1.1.3 网页的基本功能
媒介的作用：使用者与信息之间的媒介。 媒介的作用：使用者与信息之间的媒介。一方面是发布
者，功能是发布信息；另一方面是浏览者，功能是提供浏 功能是发布信息；另一方面是浏览者， 览的信息，通过浏览网页找寻需要的信息。 览的信息，通过浏览网页找寻需要的信息。
互动的作用：浏览者与网页制作单位之间互动的窗口， 互动的作用：浏览者与网页制作单位之间互动的窗口，
1.3.1 网页编辑工具
Dreamweaver Macromedia公司开发的 公司开发的Dreamweaver软件是一种专业 公司开发的 软件是一种专业 的网页编辑器，用于对站点、网页和Web应用程序进行设 的网页编辑器，用于对站点、网页和 应用程序进行设 计、编码和开发。可直接编写HTML代码还可以在可视化 编码和开发。可直接编写 代码还可以在可视化 编辑环境中工作， 编辑环境中工作，Dreamweaver 都会为您提供帮助良多的 工具，丰富您的 创作体验。 练习） 工具，丰富您的We可以实现网页浏览者和网页设计者的交互， 动态网页可以实现网页浏览者和网页设计者的交互， 网页浏览者和网页设计者的交互 实现交互技术有两种： 实现交互技术有两种：一种是客户端技术如常用的 JavaScript和VBScript；另一种是服务器端技术如目前 和 ； 常用的ASP和PHP。 常用的 和 。
可以单向或双向传递信息。 可以单向或双向传递信息。
传输的作用：作为传输各种电子文件或信息之用， 传输的作用：作为传输各种电子文件或信息之用，如下
载说明书、更新文件、驱动程序等。 载说明书、更新文件、驱动程序等。
1.2 网页中的主要元素
网页的基本要素一般包括：文字、图像、 网页的基本要素一般包括：文字、图像、动画和链接标志 等，除此之外，网页的元素还包声音、多媒体和视频等。 除此之外，网页的元素还包声音、多媒体和视频等。
1.4.1 网站的设计流程
确定网站的主题 规划网站的整体结构 收集整合网页素材 确定网页版面布局。 确定网页版面布局。 制作网页。 制作网页。 添加网页特效。 添加网页特效。 测试和发布网站。 测试和发布网站。
1.4.2 网页的设计与制作
确定网页的版面布局 。（2）对称性。（ 。（3）对比性。 （1）平衡性。（ ）对称性。（ ）对比性。 ）平衡性。（ 。（5）比例。 （4）疏密度。（ ）比例。 ）疏密度。（ （6）韵律感。 ）韵律感。
网页与网站的区别与联系： 网页与网站的区别与联系：
网站是一个文件夹， 网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文 件或文件夹。网页是一个页面文件，用来发布各种信息。 件或文件夹。网页是一个页面文件，用来发布各种信息。 网页是网站的构成要素，是网站信息发布与表现的一种主要形式； 网页是网站的构成要素，是网站信息发布与表现的一种主要形式； 网站是网页通过超链接形成的集合。 网站是网页通过超链接形成的集合。
网页（ 语言编写的， 网页（WEB）：是用 ） 是用html语言编写的，通过 语言编写的 通过www网传 网传
输，并被web浏览器翻译成可以显示出来的集合文本、图 并被 浏览器翻译成可以显示出来的集合文本、 浏览器翻译成可以显示出来的集合文本 片、声音和动画等信息元素的页面文件。（见凤凰网） 声音和动画等信息元素的页面文件。（见凤凰网） 。（
1.4.3 网页的测试
浏览器兼容性测试：目前浏览器有Internet Explorer 与 浏览器兼容性测试：目前浏览器有 Netscape两大主流浏览器，二者对 两大主流浏览器， 两大主流浏览器 二者对HTML和CSS等语法的 和 等语法的 支持度是不同的。 支持度是不同的。在Dreamweaver中提供了可以检查网页 中提供了可以检查网页 中是否含有某版本浏览器不能识别的语法功能， 中是否含有某版本浏览器不能识别的语法功能，设计者可 以借助其进行检查。 以借助其进行检查。 平台的兼容性测试：设计要为用户着想， 平台的兼容性测试：设计要为用户着想，必须最少在一台 PC和一台 和一台Mac机上测试你的网站网页，看看兼容性如何； 机上测试你的网站网页， 和一台 机上测试你的网站网页 看看兼容性如何； 超链接完好性测试：超链接是连接网页之间、 超链接完好性测试：超链接是连接网页之间、网站之间的 桥梁，浏览者是不愿意访问一个经常出现“找不到网页” 桥梁，浏览者是不愿意访问一个经常出现“找不到网页” 的问题的网站，作为设计者必须检测超链接的完好性， 的问题的网站，作为设计者必须检测超链接的完好性，保 证链接的有效性，不要留下太多的坏链接。 证链接的有效性，不要留下太多的坏链接。
《网页设计与制作》 网页设计与制作》
第1章 网页设计概述
主要内容
这一章是学习网页制作前的必备知识。 这一章是学习网页制作前的必备知识。
1 2 3 4
网页与网站 网页中的主要元素 网页制作工具 网页设计的基本流程
1.1 网页与网站
1.1.1 网页 1.1.2 网站 1.1.3 网页的基本功能
1.1.1 网页
网页的排版布局是决定网站美观与否的一个重要方面,通 网页的排版布局是决定网站美观与否的一个重要方面 通 过合理的、有创意布局,才可以把文字、图像等内容完美地展 过合理的、有创意布局 才可以把文字、 才可以把文字 现在浏览者前面。 现在浏览者前面。 网页设计与制作 一般分为静态网页制作和动态网页制作两类。 一般分为静态网页制作和动态网页制作两类。
1.2 网页中的主要元素
除上述几种要素之外，在网页上经常使用的还有动画、 除上述几种要素之外，在网页上经常使用的还有动画、 视频、声音等各种信息的形式。 视频、声音等各种信息的形式。 动画：目前网络上常用的动画类型有 和 动画两种。 动画：目前网络上常用的动画类型有gif和Flash动画两种。 动画两种 视频：是多媒体网页的一个重要组成部分，常用的视频格 视频：是多媒体网页的一个重要组成部分， 式有avi、 式有 、mpeg和mov等，视频会大大增加网页的文件量， 和 等 视频会大大增加网页的文件量， 从而使用访问速度受到影响， 严禁喧宾夺主） 从而使用访问速度受到影响，因此要慎用（严禁喧宾夺主）。 音频：在网页中插入音频会增加网页的生动性。 音频：在网页中插入音频会增加网页的生动性。常用的音 频格式有rm(ram)、midi、wav和mp3等格式。音频文件和 、 等格式。 频格式有 、 和 等格式 视频文件一样都会增加网页的文件量，因此要慎用。 视频文件一样都会增加网页的文件量，因此要慎用。
网页的类型
根据页面内容可以分首页、主页、专栏网页、 根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页 等类型； 等类型； 按制作技术分为静态网页与动态网页
凤凰网页面截图
1.1.2 网站
网站： 网站：就是把一些网页等信息文件通过超链接的形式关联
起来形成的信息文件的集合。信息可以是网页形式也可以 起来形成的信息文件的集合。 是其他的文档形式。 是其他的文档形式。
ASP （Active Server Pages） ） PHP （Hypertext Preprocessor） ） JSP （Java Server Pages） ）
1.4 网页设计的基本流程
1.4.1 网站的设计流程 1.4.2 网页的设计与制作 1.4.3 网页的测试 1.4.4 网页上传和发布
1.2 网页中的主要元素
图像：现在网络上使用的绝大多数图片和图像是gif、 图像：现在网络上使用的绝大多数图片和图像是 、jpeg
文件格式。 和png文件格式。 文件格式 网页上使用图像要注意的问题： 网页上使用图像要注意的问题：
JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例 格式适合于照片图像， 格式适合于包含纯色的图像， 格式适合于照片图像 格式适合于包含纯色的图像 如插图和线条图。 如插图和线条图。 利用图像编辑软件来放大或缩小图像 屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此 。制作图像时， 屏幕显示图像的分辨率一般为 再高的分辨率。尝试各种不同的 再高的分辨率。尝试各种不同的JPEG压缩率 压缩率 使用合适的色彩模式。 使用合适的色彩模式。 慎用动画
1.3 网页制作工具
1.3.1 网页编辑工具 1.3.2 网页图像编辑工具 1.3.3 动态网页技术
1.3.1 网页编辑工具
超文本标识语言HTML（Hyper Text Markup Language） （ 超文本标识语言 ） 全称是超文本标记语言，利用标记来描述网页的字体、 全称是超文本标记语言，利用标记来描述网页的字体、大 小、颜色及页面布局的语言，使用任何的文本编辑器都可 颜色及页面布局的语言， 以编辑HTML文档。是一种专门用于Web页制作的语言， 文档。是一种专门用于 页制作的语言， 以编辑 文档 页制作的语言 用来描述超文本各个部分的内容， 用来描述超文本各个部分的内容，告诉浏览器如何显示文 本，怎样生成与别的文本或图像的链接点。（练习） 怎样生成与别的文本或图像的链接点。 练习）
1.3.2 网页图像编辑工具
Photoshop：是Adobe公司开发的，是当今最流行的图形图 ： 公司开发的， 公司开发的 象处理软件之一，它能够实现各种专业化的图像制作、 象处理软件之一，它能够实现各种专业化的图像制作、处 理及合成。 理及合成。 Fireworks：是由Macromedia公司开发的图形处理工具， ：是由 公司开发的图形处理工具， 公司开发的图形处理工具 它是第一个专门为制作网页图形而设计的软件， 它是第一个专门为制作网页图形而设计的软件，同时也提 供专业的网页图形设计及制作的解决方案。 供专业的网页图形设计及制作的解决方案。 Flash：Macromedia公司出品的 ： 公司出品的Flash是目前非常流行的一 公司出品的 是目前非常流行的一 种交互式Web矢量动画软件。 矢量动画软件。 种交互式 矢量动画软件 Dreamweaver和Flash、Fireworks三个软件被称为“网页 和 三个软件被称为“ 、 三个软件被称为 三剑客” 是现在公认的比较标准的网页制作利器。 三剑客”，是现在公认的比较标准的网页制作利器。