网页课程设计

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