网页设计与制作全套教学课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1．字体的选择。 2．字号、行距的选择。 3．特殊字体的使用。 4．字体的颜色。
1.2 网页中的主要元素
1.2.2图像
现在网络上使用的绝大多数图片和图像是 gif、jpeg和png文件格式。
网页上使用图像要注意的问题：
•JPEG格式适合于照片图像，GIF格式适合 于包含纯色的图像，例如插图和线条图。
1.3 网页制作工具
1.3.3动态网页技术
动态网页可以实现网页浏览者和网页设计 者的交互，实现交互技术有两种：一种是客户 端技术如常用的JavaScript和VBScript；另一 种是服务器端技术如目前常用的ASP和PHP。
页、内容网页和功能网页等类型；按制作技术 分为静态网页与动态网页。
1.1 网页和网站
1.1.2 网站
网站就是把一些网页等信息文件通过超链 接的形式关联起来形成的信息文件的集合。信 息可以是网页形式也可以是其他的文档形式。
网页与网站的区别与联系：
网站是一个文件夹，其中的文件不仅是网 页还有网站所需的其他文件或文件夹。网页是 一个页面文件，用来发布各种信息。网页是网 站的构成要素，是网站信息发布与表现的一种 主要形式；网站是网页通过超链接形成的集合。
目录
• 第1章 网页设计概述
• 第2章 HTML语言基础
•
第3章 Dream weaver基础
•
第4章 网页中的基础元素
•
第5章 网页页面布局
•
第6章 网页中的层和时间轴
•
第7章 表单的应用
• 第8章 在网页中使用行为
• 第9章 CSS样式使用
•
第10章 网页中的多媒体应用
•
第11章 模板和库
•
第12章 站点测试和发布
•利用图像编辑软件来放大或缩小图像 •屏幕显示图像的分辨率一般为72dpi。制 作图像时，不必使用比此再高的分辨率。
1.2 网页中的主要元素
1.2.2图像
•如果建立的图像中只有黑色和白色，处理 时可将它保存为黑白图像格式，这样可以减少 图像文件的大小。
•如果设计的GIF格式图像包含了渐变和直 线，应尽量使得它们水平，因为GIF格以每条水 平线为基础来压缩。
网页设计与制作
2020年3月
教学目标
通过本章的学习，能够让学生了解网站的设计与工 作流程，掌握HTML的基本概念和结构，能利用HTML制 作网页,了解和DHTML/XML的区别，能熟练掌握利用 Dreamweaver制作网页，利用Fireworks制作图片、利 用Flash制作动画；并能有机地结合，制作出精美的网页。
2．Fireworks。是由Macromedia公司开发 的图形处理工具，它是第一个专门为制作网页图 形而设计的软件，同时也提供专业的网页图形设 计及制作的解决方案。
3.Flash。Macromedia公司出品的Flash是 目前非常流行的一种交互式Web矢量动画软件。
Dreamweaver和Flash、Fireworks三个软 件被称为“网页三剑客”，是现在公认的比较标 准的网页制作利器。
•
第13章 Flash 8简介ห้องสมุดไป่ตู้
•
第14章 Fireworks8简介
第1章 网页设计概述
$ [知识目标]
掌握网页、网站及主页的概念 了解网页中的主要元素 了解各种网页制作工具
8 [能力目标]
各种网页制作工具的配合使用 网站的整体规划 网站的设计流程
第1章 网页设计概述
• 1.1 网页和网站 • 1.2 网页中的主要元素 • 1.3 网页制作工具 • 1.4 网页设计的基本流程 • 本章小结
1.3 网页制作工具
1.3.1 网页编辑工具
1．超文本标识语言（HTML） 2．FrontPage简介 3．Dreamweaver
1.3.2 网页图像编辑工具 1.3.3 动态网页技术
1.3 网页制作工具
1.3.2 网页图像编辑工具
1．Photoshop。是Adobe公司开发的，是 当今最流行的图形图象处理软件之一，它能够实 现各种专业化的图像制作、处理及合成。
1.2 网页中的主要元素
网页的基本要素一般包括：文字、图像、 动画和链接标志等，除此之外，网页的元素还 包声音、多媒体和视频等。
1.2.1 文本 1.2.2 图像 1.2.3 链接标志 1.2.4 其他的基本要素
1.2 网页中的主要元素
1.2.1文本
是网页中最基本的元素。网页中文字的设 计一般从以下几个方面来考虑：
•尝试各种不同的JPEG压缩率
•使用合适的色彩模式。
•慎用动画。
1.2 网页中的主要元素
1.2.3链接标志
链接也叫超链接（Hyperlink），是从一个 网页指向另一个目的端的链接，是页面间的链 接关系。
链接标志（载体）指的是网页中特殊的文 本或图像，它们常常用不同的颜色和下划线来 标识，在浏览器中，访问者可以用鼠标单击它 们，能够从当前的网页转到链接的目的端位置。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有gif 和Flash动画两种。
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
1.1 网页和网站
1.1.1 网页 1.1.2 网站 1.1.3 网页的基本功能
1.1 网页和网站
1.1.1 网页
1．网页 网页（WEB）：是用html语言编写的，通 过www网传输，并被web浏览器翻译成可以显 示出来的集合文本、图片、声音和动画等信息 元素的页面文件（网页示例）。
2．网页的类型 根据页面内容可以分首页、主页、专栏网
2．视频。是多媒体网页的一个重要组成部 分，常用的视频格式有avi、mpeg和mov等， 视频会大大增加网页的文件量，从而使用访问 速度受到影响，因此要慎用。
3．音频。在网页中插入音频会增加网页的 生动性。常用的音频格式有rm(ram)、midi、 wav和mp3等格式。音频文件和视频文件一样 都会增加网页的文件量，因此要慎用。
1.2 网页中的主要元素
1.2.2图像
现在网络上使用的绝大多数图片和图像是 gif、jpeg和png文件格式。
网页上使用图像要注意的问题：
•JPEG格式适合于照片图像，GIF格式适合 于包含纯色的图像，例如插图和线条图。
1.3 网页制作工具
1.3.3动态网页技术
动态网页可以实现网页浏览者和网页设计 者的交互，实现交互技术有两种：一种是客户 端技术如常用的JavaScript和VBScript；另一 种是服务器端技术如目前常用的ASP和PHP。
页、内容网页和功能网页等类型；按制作技术 分为静态网页与动态网页。
1.1 网页和网站
1.1.2 网站
网站就是把一些网页等信息文件通过超链 接的形式关联起来形成的信息文件的集合。信 息可以是网页形式也可以是其他的文档形式。
网页与网站的区别与联系：
网站是一个文件夹，其中的文件不仅是网 页还有网站所需的其他文件或文件夹。网页是 一个页面文件，用来发布各种信息。网页是网 站的构成要素，是网站信息发布与表现的一种 主要形式；网站是网页通过超链接形成的集合。
目录
• 第1章 网页设计概述
• 第2章 HTML语言基础
•
第3章 Dream weaver基础
•
第4章 网页中的基础元素
•
第5章 网页页面布局
•
第6章 网页中的层和时间轴
•
第7章 表单的应用
• 第8章 在网页中使用行为
• 第9章 CSS样式使用
•
第10章 网页中的多媒体应用
•
第11章 模板和库
•
第12章 站点测试和发布
•利用图像编辑软件来放大或缩小图像 •屏幕显示图像的分辨率一般为72dpi。制 作图像时，不必使用比此再高的分辨率。
1.2 网页中的主要元素
1.2.2图像
•如果建立的图像中只有黑色和白色，处理 时可将它保存为黑白图像格式，这样可以减少 图像文件的大小。
•如果设计的GIF格式图像包含了渐变和直 线，应尽量使得它们水平，因为GIF格以每条水 平线为基础来压缩。
网页设计与制作
2020年3月
教学目标
通过本章的学习，能够让学生了解网站的设计与工 作流程，掌握HTML的基本概念和结构，能利用HTML制 作网页,了解和DHTML/XML的区别，能熟练掌握利用 Dreamweaver制作网页，利用Fireworks制作图片、利 用Flash制作动画；并能有机地结合，制作出精美的网页。
2．Fireworks。是由Macromedia公司开发 的图形处理工具，它是第一个专门为制作网页图 形而设计的软件，同时也提供专业的网页图形设 计及制作的解决方案。
3.Flash。Macromedia公司出品的Flash是 目前非常流行的一种交互式Web矢量动画软件。
Dreamweaver和Flash、Fireworks三个软 件被称为“网页三剑客”，是现在公认的比较标 准的网页制作利器。
•
第13章 Flash 8简介ห้องสมุดไป่ตู้
•
第14章 Fireworks8简介
第1章 网页设计概述
$ [知识目标]
掌握网页、网站及主页的概念 了解网页中的主要元素 了解各种网页制作工具
8 [能力目标]
各种网页制作工具的配合使用 网站的整体规划 网站的设计流程
第1章 网页设计概述
• 1.1 网页和网站 • 1.2 网页中的主要元素 • 1.3 网页制作工具 • 1.4 网页设计的基本流程 • 本章小结
1.3 网页制作工具
1.3.1 网页编辑工具
1．超文本标识语言（HTML） 2．FrontPage简介 3．Dreamweaver
1.3.2 网页图像编辑工具 1.3.3 动态网页技术
1.3 网页制作工具
1.3.2 网页图像编辑工具
1．Photoshop。是Adobe公司开发的，是 当今最流行的图形图象处理软件之一，它能够实 现各种专业化的图像制作、处理及合成。
1.2 网页中的主要元素
网页的基本要素一般包括：文字、图像、 动画和链接标志等，除此之外，网页的元素还 包声音、多媒体和视频等。
1.2.1 文本 1.2.2 图像 1.2.3 链接标志 1.2.4 其他的基本要素
1.2 网页中的主要元素
1.2.1文本
是网页中最基本的元素。网页中文字的设 计一般从以下几个方面来考虑：
•尝试各种不同的JPEG压缩率
•使用合适的色彩模式。
•慎用动画。
1.2 网页中的主要元素
1.2.3链接标志
链接也叫超链接（Hyperlink），是从一个 网页指向另一个目的端的链接，是页面间的链 接关系。
链接标志（载体）指的是网页中特殊的文 本或图像，它们常常用不同的颜色和下划线来 标识，在浏览器中，访问者可以用鼠标单击它 们，能够从当前的网页转到链接的目的端位置。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有gif 和Flash动画两种。
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
1.1 网页和网站
1.1.1 网页 1.1.2 网站 1.1.3 网页的基本功能
1.1 网页和网站
1.1.1 网页
1．网页 网页（WEB）：是用html语言编写的，通 过www网传输，并被web浏览器翻译成可以显 示出来的集合文本、图片、声音和动画等信息 元素的页面文件（网页示例）。
2．网页的类型 根据页面内容可以分首页、主页、专栏网
2．视频。是多媒体网页的一个重要组成部 分，常用的视频格式有avi、mpeg和mov等， 视频会大大增加网页的文件量，从而使用访问 速度受到影响，因此要慎用。
3．音频。在网页中插入音频会增加网页的 生动性。常用的音频格式有rm(ram)、midi、 wav和mp3等格式。音频文件和视频文件一样 都会增加网页的文件量，因此要慎用。