网页设计与制作讲解
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
下图为大段文本的基 础 知 识
理论基础篇 第一章 网页设计概述
2）图像
其格式一般为JPG和GIF和PNG三种格式，最基本的图片是网页中的Logo、
Banner和网页背景中。
Logo： Logo是代表企业形象或栏目内容的标志性图片，一般位于网页 的左上角。 Logo的设计，要求形象鲜明、笔触简练，给人的第一印象要深 刻。 Banner： Banner是用于宣传某个栏目或活动的广告，一般制作成动画 形式，常用的是Flash动画。 为了便于相互交换及相互宣传，Banner的尺寸在IT业内有具体的约定。 如，位于网页顶部的Banner要求尺寸为468像素×60像素。文件大小一般不 要超过12KB。 Banner一般不是位于网页顶部，就是位于网页底部，小型广告有时也 被适当地安排在网页的两侧。
<HTML>
<head> <title>标题<／title> <／head> <body> 正文 <／body> <／HTML> 第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
2、网页的基本构成元素
网页的基本元素：文本、图像、超链接、表格、表单、导航栏、GIF动
画、Flash动画、框架等，还包括横幅广告、字幕、悬停按钮、日戳、计数
器、音频、视频等等。 1）文本 网页中的信息主要是以文本为主的，在网页中可以通过字体、大小、 颜色、底纹、边框等，来设置文本的属性。 建议： 正文文字不宜太大，一般9磅或12像素左右即可； 字体不宜过多，中文文字一般使用宋体； 颜色不要使用得太过斑驳。 大段文本文字的页面，可以参考一些优秀的杂志或报纸的编排设计。
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
图像应用范例1－Banner和Logo：
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
图像应用范例2－背景图应用
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
航栏，另一个框架中的内容可以随点击导航栏中的链接而改变。这样只须制 作一个导航栏的网页即可，而不必将导航栏的内容复制到各栏目的网页中去。 如图所示。
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
3、网页设计的基本原则
Web站点的设计是一项极具创造性、挑战性的工作。要想把 它做好，开发者必须具备一定的艺术素养及计算机专门设计软件 的使用经验。这样才能把适合的信息有效地传达给适合的受众。 以下三个方面需要考虑： (1) 确定内容 • WEB站点需要传输的最重要的信息是什么? • 哪一种多媒体方式能最有效地阐述它 ? • 在所有信息中，哪个需要特别关注 ?
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
表单页面：
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
6）导航栏
导航栏就是一组超链接，用来指向站点的主页和主要网页的 超级链接，方便浏览。 导航栏可能是按钮或者文本超链接，用于站内各部分内容间 的相互链接的指引。可以直接使用文本文字。而用图片做成的导 航栏，表现力以及和整个画面的配合要更好一些。 在导航栏中可能会用到翻滚图(Rollover Image)，就是当鼠 标悬停在该图片上时，在区域内的图片自动切换成其他颜色的图 片，以区分该栏与其他栏。下拉菜单在导航栏中也经常被使用。
第 一 节 网 页 设 计 的 基 础 知 识
• 哪个信息需要反复强调?
• 如何去强调? • 这个信息与其他部分如何平衡 ?
理论基础篇 第一章 网页设计概述
(2)确定内容最好的表现形式和用户分析 • 什么样的访问方式将使浏览者的数目最多 ? • 他们将使用什么样的计算机 ? • 他们是家庭用户还是办公用户 ? • 他们用的是什么浏览器 ?
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
5）表单
表单是用来收集站点访问者信息的域集。
站点访问者填表单的方式是输入文本、单击单选按钮与复选框，以及 从下拉菜单中选择选项。 在填好表单之后，站点访问者便送出所输入的数据。该数据就会被网
站设计者预先设置的表单处理程序，以各种不同的方式进行处理。
所示。
GIF动画示例
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
8）Flash动画
Macromedia的Flash虽然出现时间不长，业已成为最首要的Web动画
形式。Flash有很多重要的动画特征，如关键帧、运动路径、动画蒙版、
变形和洋葱皮等等。采用Flash，设计者不仅可以创作Flash电影，而且可 以把动画输出为QuickTime文件、GIF89a文件或其他不同的文件格式 (PICT，JPEG，PNG等)。如图所示的是一个完全由Flash动画创建的网页 页面。
• 用以选择文件格式、软件、插件和浏览器支持的最小配置是什
么? • 能确定浏览者需要的最小配置吗 ?
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
(3)确立一个创造性的、有效的设计方案 • 要考虑带宽的问题； • 要注重色彩的搭配； • 要考虑适应不同浏览器、不同分辨率的情况； • 要让浏览者容易找到要找的东西，使网页内容便于阅读； • 站点内容要精、专，更新要及时； • 要提供良好的交互性； • 简单即为美。
浙江师范大学教育学院
网页设计与制作
ZHEJIANG NORMAL UNIVERSITY
理论基础篇 第一章 网页设计概述
第一节 网页设计的基础知识
网页：是WWW上最基本的文档，用HTML(超文本标记语言)编
写。
网页中可以包含文字、声音、图形图像、动画、视频等多媒体信 息。也可以加入脚本语言。 网站：则是诸多网页的集成。如图所示。
第 一 节 网 页 设 计 的 基 础 知 识
END
下节提示：
第二节 多媒体在网页设计中的应用
３）超链接 超链接是网站的灵魂，它提供与图片和文字相关内容的链接，实现网
页之间以及各种信息之间的跳转。 超链接可在文本或图片中设置。
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
4）表格
表格是网页排版的得力助手。借助表格可精确地控制网页元素在网页 中的位置，组织整个网页的外观。通过在表格中放置相应的图片或其他内 容，即可高效、快捷地创建符合设计要求的页面。 表格使网页元素得以方便的固定在希望固定的位置上。
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
1、网页的基本特征
网页被称为 HTML文档，是一个纯文本的文档，一个网页包含了许
多HTML标记符，这些标记符是一些嵌入式的命令，提供网页的结构、外
观和内容等信息。 Web浏览器解释这些信息并显示网页。 下面这段代码就是最基本的网页源代码：（它代表网页的基本结构）
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
下面播放几段制作比较精致的Flash动画：
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
9）框架
框架也是网页的一种组织布局的形式。它将相互关联的多个网页的内容
组织起来，使它们在一个浏览器窗口中显示。比如可以在一个框架内放置导
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
下图是带有下拉菜单的导航栏
导航栏
第 一 节 网 页 设 计 的 基 础 知 识
理论基础篇 第一章 网页设计概述
7）GIF动画
动画是网页上最活跃的元素，通常认为制作精致、创意优秀的动画是 吸引浏览者最有效的方法。动画的制作手段有很多，技术发展也很快。尽 管各种形式的动画最终使用形式不一，GIF动画仍然是占据主体地位的网 页动画之一。因为GIF动画的标准简单，在诸多浏览器中都能播放。如图
