网页设计与制作第1章 概述

本章小结
掌握因特网、全球信息网、网页、HTML、浏览器、 超文本、超媒体、超链接和Web图像是进行网站制作应 必备的网络与网页的基础知识。 目前网上流行的Web图像格式有体积小支持动画的 GIF格式；采用32位真彩支持图像压缩的PNG格式；高 品质且压缩比率较大的JPG格式。 静态网页和动态网页的区别在于动态网页具有交互 性，它会依照不同的使用者、不同的时间而改变。 记事本、FrontPage和Dreamweaver都可以进行网页 编辑，静态网页的设计语言是超文本标记语言HTML， 用HTML语言编写的文件是HTML文件，它的扩展名 是.htm或.html。 网站的制作流程主要分为三个阶段：网站的分析与 规划，网站的制作和网站的维护。
1.2 网站制作的基本知识
跳转，它是WWW上使用最多的一种技术。它用以实现超文 本、超媒体以及与其他媒体之间的链接。 4．Web图像 较为常用的Web图像有BMP、TIIF、 GIF、PNG、 JPG/JPEG、 PSD 、PDF等，因此目前网上流行的格式主 要是JPG 、GIF和PNG。 BMP格式的图像是DOS和Windows兼容计算机系统标准 的Windows图像格式，是微软公司的专用格式，可以指定 是否采用压缩格式。它支持位图颜色、RGB、索引颜色和 灰度模式，但不支持Alpha通道。 TIIF格式的图像是一种支持压缩格式的位图图像文 件，可以被所有的图像编辑软件、绘图软件和排版软件 所支持。 GIF格式的图像是在各种图形处理软件上均能够处理
1.1 网络的基础知识
1.因特网Internet 因特网Internet是目前全球最大的计算机通信网， 它通过电话线、光纤传输材料，使用一定的通信规范， 把位于世界各地具有独立工作能力的计算机连接起来， 使之能够实现网络通信、资源共享。 2.全球信息网WWW 全球信息网WWW(World Wide Web)是一个大型的、分 布式的、全球性的、交互的、动态的、跨平台的超媒体 图形信息系统，是Internet中最流行、最主要的信息服 务方式，用户通过Internet能够浏览、查询和共享WWW 服务器站点上所有的超媒体信息。 3.网页 网页是WWW的基本文档，是在网络上用来同其他用户 交流信息的最基本的组成部分。网页界面的构成元素主
1.1 网络的基础知识
要有文字、超链接和图像，另外还有声音、视频图像和 动画等多媒体元素，以及由JavaScript、ActiveX控件。 制作的特殊效果和交互功能，以丰富网页内容，增 强网页功能。 4.HTML HTML是Hyper Text Markup Language的简写，中文 名称是“超文本标记语言”，它是因特网上非常流行的 网页设计语言。HTML能独立地运行于各种操作平台之上， 不受操作系统的影响。 5.浏览器 浏览器就是用于浏览网页的应用程序，它在接收HTML 页面时采用的是HTTP协议。目前使用较为广泛的的浏览 器有Microsoft公司的IE浏览器和Netscape公司的浏览器。 尽管它们使用不同的HTML文件标准，但在使用的时间均
1.3 网页制作的常用工具
Flash不仅是一个图形编辑、动画制作软件，它还包括 Flash动画播放插件它采用流的形式，可以一边下载一边 播放，它还支持Alpha通道。 3. Fireworks Fireworks是Macromedia公司推出的专业的网络图形 设计和处理工具。它是编辑矢量和位图的综合工具。 Fireworks有针对地提出了开发网页的整套方案，通过它 既可以编辑网页图像，又可以创建网页动画，从而避免 了同一作品的图形制作与动画制作过程中在不同的软件 之间频繁切换的繁琐，提供了一个真正完美的Web解决方 案。 Fireworks和Dreamweaver 结合紧密,可与Macromedia 公司的其它图形程序和HTML编辑器结合使用，为网站的 制作提供了一套完整的方案。
网页编辑工具
1.记事本编辑网页 作为文本文件的 HTML 文件，可以直接使用记事本方便地 编 写 HTML 代 码 ， 文 件 的 扩 展 名 为 .htm 或 .html 2.FrontPage编辑网页 FrontPage 是 Microsoft 推出的一个优秀的专业化网 页设计软件，它以设计开发基本的 HTML文档为基础，设 计特性丰富，能自动地将输入的数据及其格式转换为 HTML代码，但所转换的代码有些复杂，不便阅读。并且 设计出来的网页框架在预览的时间容易出现错位的现象。 3.Dreamweaver编辑网页 Dreamweaver是Macromedia公司推出的一款“所见即 所得”的网页编辑工具，它采用浮动面版的设计风格， 具有直观性与高效性。能将输入的数据及其格式转换为
站点规划完成后，就进入了具体的网站制作阶段， 在这一阶段主要是对具体的网页及其特效进行设计与制 作，主要任务有界面的设计与制作、界面的切割与导出、 模板的建立和具体网页的设计等。 可以用Photoshop或Fireworks对网站界面进行设计 与制作，但Fireworks 要比Photoshop更加灵活自由，更 加专业。设计过程中要注意尽量使用不同的图层进行编
主要内容
1.1 网络的基础知识
1.2 网站制作的基础知识
1.3 网页制作的常用工具 1.4 网站的制作流程
1.2 网站制作的基本知识
1.超文本 超文本（HyperText）就是指文档中设置了超链接 的文本，它所链接对象也是纯文本，使用了超链接的 文字带有下划线，当鼠标移至其下方时，鼠标指针会 变成手形，单击已定义好超链接的关键字，便可显示 与其相关的说明文字。 2.超媒体 超媒体（ HyperMedia ）是超文本的一种扩展，它 将所链接信息类型扩展到了全新视角的多媒体，综合 了文字、影像、图片、动画、声音等文件。使得超链 接可以显示图形，播放动画、音乐，也可以播放视频 信息。 3. 超链接 超链接（hyperlink）用来实现不同网页间的相互
1.4 网站制作的流程
栏目划分等。好的网站架构不仅能使网站的界面友好漂 亮、简洁明快，而且还能方便浏览，增强可读性。 网站架构设计的结果要用草图勾勒出来，并且要尽 量具体，栏目划分要合理，重点要突出。 这一阶段的最后一步工作是素材的准备，主要包括 图标、LOGO、广告语和内容介绍等的搜集工作。
网站的制作
1.2 网站制作的基本知识
的、经过无损压缩的、支持动画的、常用于网络传输的 一种图形文件格式。它仅支持8位图像色彩的索引颜色， 适合于对色彩数目要求不高的卡通图像等。在一些商业 网站上它的显示受到一定的限制。 PNG格式的图像，能存储32位信息的位图文件，其图 像质量要比GIF格式图像的质量好，通过对像素行和列的 扫描，获得较好的压缩效果。显示速度很快，但不支持 动画。它支持位图颜色、RGB、索引颜色和灰度模式，但 不支持带Alpha通道的位图颜色和索引颜色文件。 JPG/JPEG格式的图像又称作联合图片专家，是24位 的图像文件格式，也是一种高效率的压缩格式，可以将 图像体积减少至原大小的10％，从而减少下载时间。它 支持CMYK、RGB和灰度颜色模式，但不支持Alpha通道。 此格式的图像在打开时会自动解压缩，它适合于存储照 片之类的色彩丰富的图像。
1.2 网站制作的基本知识
PSD格式的图像是Photoshop软件的专用格式文件。 PDF格式的图像是一种可移植的文档格式，它可以包 含位图、矢量图形和电子文档。
主要内容
1.1 网络的基础知识 1.2 网站制作的基础知识
1.3 网页制作的常用工具
1.4 网站的制作流程
1.3 网页制作的常用工具
1.4 网站制作的流程
体网页的设计就简单了，引用模板后，只需在不同的页 面添加其相应的文字内容，也可以添加不同的广告与动 画等以丰富网站内容。
网站的维护
网站设计完成，经测试正确无误后，就可以将站点 上传到服务器，建立Web站供用户浏览了，但这并不意为 着网站的制作工作结束了，它还要由专业的人员进行定 期的更新与维护。网络的最大优势是其信息的实时性， 只有及时更新，快速反映才能吸引更多的用户访问站点 并多次浏览。
1.4 网站制作的流程
辑，以方便分类和管理，力求简约和精致，不要忽略每 个细节。 为了方便下载，需要对所设计的界面进行切割和导 出，在切割时要遵循原则有： 1）注意切割框架的完整性，一般的切割类型有国字型或 T字型等。 2）对于要输入文字的区域、大面积色块或单独的图片以 及flash动画等要单独切割成非图片格式以备插入。 3）若添加内容不固定，需要变长的区域要注意其伸缩性 切割，若有图案要保证可以重复排列。 模板的使用既可以减少工作量提高效率,又是使站点 保持风格的一致重要手段。在Dreamweaver中对导出的 HTML文件进行编辑，并进行背景颜色的设置，CSS样式的 添加，根据需要可设为不同的模板。有了模板再进行具
1.1 网络的基础知识
只需在地址栏中输入相应的URL地址即可。 6.静态网页 所谓静态网页是指网页的内容固定不变，当浏览器 通过 Internet 的 HTTP协议，向网站服务器请求提供网页 的内容时，网站服务器收到要求后，传送事先准备好的 HTML。网页内容只包含标准的 HTML代码，要改变网页内 容，只能重新进行手工编辑。 7.动态网页 动态网页中网页的内容具有交互性，它会依照不同 的使用者、不同时间的改变而改变。
主要内容
1.1 网络的基础知识 1.2 网站制作的基础知识 1.3 网页制作的常用工具
1.4 网站的制作流程
1.4 网站制作的流程
网站的制作流程主要分为三个阶段，网站的分析与 规划，网站的制作和网站的维护。
网站的分析与规划
这一阶段的主要任务是先对网站的内容、功能需求 进行分析总结，然后在此基础上确定网站建设的主题、 基本要求，明确网站建立的目的，最后给出一个网站的 准确定位。 规划的内容主要是从两个方面来考虑的：目录层次 结构与网站架构图。 网站目录层次结构是否合理，直接影响后期站点的 管理维护，内容的扩充与删除等工作，为了后续工作的 方便，网站目录结构的规划一定要考虑全面，仔细推敲， 合理规划。 网站的架构包括网站的风格，用色，版式，布局，