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

《网页设计与制作第1章概述剖析.》由会员分享，可在线阅读，更多相关《网页设计与制作第1章概述剖析.（22页珍藏版）》请在金锄头文库上搜索。

1、第1章 概述,机械工业出版社,学习要求,提前预习，上课认真听讲 课后及时复习，独立认真完成作业,本章重点,学习网站制作必备的网站和网页制作基础知识 网页编辑工具和动画制作工具的特征 网站制作的流程。,主要内容,1.1 网络的基础知识 1.2 网站制作的基础知识 1.3 网页制作的常用工具 1.4 网站的制作流程,1.1 网络的基础知识,1.因特网Internet 因特网Internet是目前全球最大的计算机通信网，它通过电话线、光纤传输材料，使用一定的通信规范，把位于世界各地具有独立工作能力的计算机连接起来，使之能够实现网络通信、资源共享。 2.全球信息网WWW 全球信息网WWW(World

2、Wide Web)是一个大型的、分布式的、全球性的、交互的、动态的、跨平台的超媒体图形信息系统，是Internet中最流行、最主要的信息服务方式，用户通过Internet能够浏览、查询和共享WWW 服务器站点上所有的超媒体信息。 3.网页 网页是WWW的基本文档，是在网络上用来同其他用户交流信息的最基本的组成部分。网页界面的构成元素主,要有文字、超链接和图像，另外还有声音、视频图像和动画等多媒体元素，以及由JavaScript、ActiveX控件。 制作的特殊效果和交互功能，以丰富网页内容，增强网页功能。 4.HTML HTML是Hyper Text Markup Language的简写，中文

3、名称是“超文本标记语言”，它是因特网上非常流行的网页设计语言。HTML能独立地运行于各种操作平台之上，不受操作系统的影响。 5.浏览器 浏览器就是用于浏览网页的应用程序，它在接收HTML 页面时采用的是HTTP协议。目前使用较为广泛的的浏览器有Microsoft公司的IE浏览器和Netscape公司的浏览器。尽管它们使用不同的HTML文件标准，但在使用的时间均,1.1 网络的基础知识,只需在地址栏中输入相应的URL地址即可。 6.静态网页 所谓静态网页是指网页的内容固定不变，当浏览器通过Internet的HTTP协议，向网站服务器请求提供网页的内容时，网站服务器收到要求后，传送事先准备好的HT

4、ML。网页内容只包含标准的HTML代码，要改变网页内容，只能重新进行手工编辑。 7.动态网页 动态网页中网页的内容具有交互性，它会依照不同的使用者、不同时间的改变而改变。,1.1 网络的基础知识,主要内容,1.1 网络的基础知识 1.2 网站制作的基础知识 1.3 网页制作的常用工具 1.4 网站的制作流程,1.超文本 超文本（HyperText）就是指文档中设置了超链接的文本，它所链接对象也是纯文本，使用了超链接的文字带有下划线，当鼠标移至其下方时，鼠标指针会变成手形，单击已定义好超链接的关键字，便可显示与其相关的说明文字。 2.超媒体 超媒体（HyperMedia）是超文本的一种扩展，它将

5、所链接信息类型扩展到了全新视角的多媒体，综合了文字、影像、图片、动画、声音等文件。使得超链接可以显示图形，播放动画、音乐，也可以播放视频信息。 3. 超链接 超链接（hyperlink）用来实现不同网页间的相互,1.2 网站制作的基本知识,跳转，它是WWW上使用最多的一种技术。它用以实现超文本、超媒体以及与其他媒体之间的链接。 4Web图像 较为常用的Web图像有BMP、TIIF、 GIF、PNG、JPG/JPEG、 PSD 、PDF等，因此目前网上流行的格式主要是JPG 、GIF和PNG。 BMP格式的图像是DOS和Windows兼容计算机系统标准的Windows图像格式，是微软公司的专用格

6、式，可以指定是否采用压缩格式。它支持位图颜色、RGB、索引颜色和灰度模式，但不支持Alpha通道。 TIIF格式的图像是一种支持压缩格式的位图图像文件，可以被所有的图像编辑软件、绘图软件和排版软件所支持。 GIF格式的图像是在各种图形处理软件上均能够处理,1.2 网站制作的基本知识,的、经过无损压缩的、支持动画的、常用于网络传输的一种图形文件格式。它仅支持8位图像色彩的索引颜色，适合于对色彩数目要求不高的卡通图像等。在一些商业网站上它的显示受到一定的限制。 PNG格式的图像，能存储32位信息的位图文件，其图像质量要比GIF格式图像的质量好，通过对像素行和列的扫描，获得较好的压缩效果。显示速度很

7、快，但不支持动画。它支持位图颜色、RGB、索引颜色和灰度模式，但不支持带Alpha通道的位图颜色和索引颜色文件。 JPG/JPEG格式的图像又称作联合图片专家，是24位的图像文件格式，也是一种高效率的压缩格式，可以将图像体积减少至原大小的10，从而减少下载时间。它支持CMYK、RGB和灰度颜色模式，但不支持Alpha通道。此格式的图像在打开时会自动解压缩，它适合于存储照片之类的色彩丰富的图像。,1.2 网站制作的基本知识,PSD格式的图像是Photoshop软件的专用格式文件。 PDF格式的图像是一种可移植的文档格式，它可以包含位图、矢量图形和电子文档。,1.2 网站制作的基本知识,1.1 网

8、络的基础知识 1.2 网站制作的基础知识 1.3 网页制作的常用工具 1.4 网站的制作流程,主要内容,1.3 网页制作的常用工具,网页编辑工具 1.记事本编辑网页 作为文本文件的HTML文件，可以直接使用记事本方便地编写HTML代码，文件的扩展名为.htm或.html 2.FrontPage编辑网页 FrontPage是Microsoft推出的一个优秀的专业化网页设计软件，它以设计开发基本的HTML文档为基础，设计特性丰富，能自动地将输入的数据及其格式转换为HTML代码，但所转换的代码有些复杂，不便阅读。并且设计出来的网页框架在预览的时间容易出现错位的现象。 3.Dreamweaver编辑网

9、页 Dreamweaver是Macromedia公司推出的一款“所见即所得”的网页编辑工具，它采用浮动面版的设计风格，具有直观性与高效性。能将输入的数据及其格式转换为,HTML代码，且冗余代码相对较少。 Web图像与动画制作工具 1.Photoshop Photoshop是Adobe公司推出的功能强大的文本图像处理软件，采用专业的图像编辑标准，采用层、通道、路径、滤镜和蒙板等图像处理技术，得到让广大平面设计人员十分青睐的设计效果。它支持大部分的图像格式，适用于打印、图像修复、Web浏览或其它用途的较佳品质的图像。 2.Flash Flash是Macromedia公司推出的一款动画设计与编辑软件

10、,利用它制作的动画文件只需几K字节就可以实现许多令人心动的效果，用在网页设计上不仅可以使网页更加生动，而且体积小下载速度快。,1.3 网页制作的常用工具,Flash不仅是一个图形编辑、动画制作软件，它还包括Flash动画播放插件它采用流的形式，可以一边下载一边播放，它还支持Alpha通道。 3. Fireworks Fireworks是Macromedia公司推出的专业的网络图形设计和处理工具。它是编辑矢量和位图的综合工具。Fireworks有针对地提出了开发网页的整套方案，通过它既可以编辑网页图像，又可以创建网页动画，从而避免了同一作品的图形制作与动画制作过程中在不同的软件之间频繁切换的繁琐

11、，提供了一个真正完美的Web解决方案。 Fireworks和Dreamweaver 结合紧密,可与Macromedia公司的其它图形程序和HTML编辑器结合使用，为网站的制作提供了一套完整的方案。,1.3 网页制作的常用工具,1.1 网络的基础知识 1.2 网站制作的基础知识 1.3 网页制作的常用工具 1.4 网站的制作流程,主要内容,1.4 网站制作的流程,网站的制作流程主要分为三个阶段，网站的分析与规划，网站的制作和网站的维护。 网站的分析与规划 这一阶段的主要任务是先对网站的内容、功能需求进行分析总结，然后在此基础上确定网站建设的主题、基本要求，明确网站建立的目的，最后给出一个网站的准

12、确定位。 规划的内容主要是从两个方面来考虑的：目录层次结构与网站架构图。 网站目录层次结构是否合理，直接影响后期站点的管理维护，内容的扩充与删除等工作，为了后续工作的方便，网站目录结构的规划一定要考虑全面，仔细推敲，合理规划。 网站的架构包括网站的风格，用色，版式，布局，,栏目划分等。好的网站架构不仅能使网站的界面友好漂亮、简洁明快，而且还能方便浏览，增强可读性。 网站架构设计的结果要用草图勾勒出来，并且要尽量具体，栏目划分要合理，重点要突出。 这一阶段的最后一步工作是素材的准备，主要包括图标、LOGO、广告语和内容介绍等的搜集工作。 网站的制作 站点规划完成后，就进入了具体的网站制作阶段，在

13、这一阶段主要是对具体的网页及其特效进行设计与制作，主要任务有界面的设计与制作、界面的切割与导出、模板的建立和具体网页的设计等。 可以用Photoshop或Fireworks对网站界面进行设计与制作，但Fireworks 要比Photoshop更加灵活自由，更加专业。设计过程中要注意尽量使用不同的图层进行编,1.4 网站制作的流程,辑，以方便分类和管理，力求简约和精致，不要忽略每个细节。 为了方便下载，需要对所设计的界面进行切割和导 出，在切割时要遵循原则有： 1）注意切割框架的完整性，一般的切割类型有国字型或T字型等。 2）对于要输入文字的区域、大面积色块或单独的图片以及flash动画等要单独

14、切割成非图片格式以备插入。 3）若添加内容不固定，需要变长的区域要注意其伸缩性切割，若有图案要保证可以重复排列。 模板的使用既可以减少工作量提高效率,又是使站点保持风格的一致重要手段。在Dreamweaver中对导出的HTML文件进行编辑，并进行背景颜色的设置，CSS样式的添加，根据需要可设为不同的模板。有了模板再进行具,1.4 网站制作的流程,体网页的设计就简单了，引用模板后，只需在不同的页面添加其相应的文字内容，也可以添加不同的广告与动画等以丰富网站内容。 网站的维护 网站设计完成，经测试正确无误后，就可以将站点上传到服务器，建立Web站供用户浏览了，但这并不意为着网站的制作工作结束了，它

15、还要由专业的人员进行定期的更新与维护。网络的最大优势是其信息的实时性，只有及时更新，快速反映才能吸引更多的用户访问站点并多次浏览。,1.4 网站制作的流程,掌握因特网、全球信息网、网页、HTML、浏览器、超文本、超媒体、超链接和Web图像是进行网站制作应必备的网络与网页的基础知识。 目前网上流行的Web图像格式有体积小支持动画的GIF格式；采用32位真彩支持图像压缩的PNG格式；高品质且压缩比率较大的JPG格式。 静态网页和动态网页的区别在于动态网页具有交互性，它会依照不同的使用者、不同的时间而改变。 记事本、FrontPage和Dreamweaver都可以进行网页编辑，静态网页的设计语言是超文本标记语言HTML，用HTML语言编写的文件是HTML文件，它的扩展名是.htm或.html。 网站的制作流程主要分为三个阶段：网站的分析与规划，网站的制作和网站的维护。,本章小结,