第4章 网页设计工具1.ppt

1、第 4章 网页设计工具 第 4章 网页设计工具 4.1 HTML基础 4.2 多媒体技术 4.3习题 第 4章 网页设计工具 主要内容 超文本标记语言的概念、语法、基本结构及常用标记 DreamWeaver的概念、功能及简单使用 Flash的概念、特征及简单应用 Fireworks的特征、工作流程及实例 核心知识点 超文本标记语言的语法、基本结构及常用标记 DreamWeaver的功能及简单使用 重点难点 超文本标记语言的概念、语法、基本结构及常用标记 DreamWeaver、 Flash和 Fireworks的功能及简单应用 学习目标 理解超文本标记语言的概念 掌握超文本标记语言的语法、基本

2、结构及常用标记 掌握 DreamWeaver的基本功能 使用 Flash和 Fireworks绘制简单的图形 第 4章 网页设计工具 4.1 HTML基础 4.1.1 超文本标记语言的概念 HTML的全称是 Hypertext Markup Language，中文名称是超文本标记语言。它是在普通文本文件的基础上，加上一系列标记描述其格式、颜色，再加上图像、声音、动画和视频等，形成精彩的画面。用 HTML编写的文件的扩展名是 .html或 .htm。 HTML网页文件一般是纯内容的网页文件，没有任何网站程序，通常称为静态网页。 第 4章 网页设计工具 4.1 HTML基础 4.1.2 超文本标记

3、语言的语法 超文本标记语言 HTML是标记的集合，被一对尖括号“ ”括起来，标记一般成对出现。网页的内容和各种标记的有机结合就构成了千姿百态的网页“世界”。 标记和属性构建了 HTML的语法。浏览器只要读到 HTML的标记和属性，就会将其解释成网页或网页的某个组成部分。它们的基本构成如下： 第 4章 网页设计工具 4.1 HTML基础 1标记 2属性 3值 4嵌套标记 5空格符 6特殊字符 第 4章 网页设计工具 4.1 HTML基础 4.1.3 超文本标记语言的基本结构 HTML文件通常都是以 开始，以结尾，中间有两大部分：第一部分是 区段，称为头部；第二部分是 区段，称为体部。 HTML语

4、言的基本结构如下： 第 4章 网页设计工具 基本结构样板程序 部分从这里开始 这里是基本结构样板程序的 HTML正文。 部分在这里终止 4.1 HTML基础 第 4章 网页设计工具 4.1 HTML基础 4.1.4 超文本标记语言的标记简介 1 HTML语言的常用标记 （ 1） 标记指出了本文件是个 HTML文件，当浏览器遇到 标记时会按照 HTML标准解释后面的文本，直到遇到结束标记 就停止上述解释。 （ 2） 和 构成 Html文档的开头部分，在此标记对之间可以使用 、 等等标记对。 （ 3） 标记用于设置浏览器窗口标题栏中显示的文本信息，那些信息一般是网页的“主题”。 （ 4） 是 HT

5、ML文档的主体部分，在此标记对之间可包含 、 、 等等众多的标记。 （ 5） 在浏览器处理 HTML文件时，将忽略注释标记及其注释内容。 第 4章 网页设计工具 4.1 HTML基础 （ 6） 标记 标记对是用来创建一个段落。 标记还可以使用 align属性来说明对齐方式，语法是： 。 （ 7） 标记 使用 标记可以按照原样显示文本。实现“所见即所得”的效果。 （ 8） 标记 采用标记 换行分段将会产生一个空白行间距，而 标记仅仅创建一个回车换行，保留了原先的行间距。 （ 9） 标记 要将图像放到网页中，通常使用，其格式为： （ 10） 标记 标记是在 HTML文档中加入一条水平线，它可以直接

6、使用。 第 4章 网页设计工具 4.1 HTML基础 2文本格式的控制 （ 1） 标记 HTML语言提供了一系列标题字体，它是一种比正文大一些的粗体文字。 是最大的标题，而 则是最小的标题。 （ 2） 对输出文本的字体大小、颜色进行随意地改变。 例如： 这是红色 3号字隶书字体 （ 3）粗体字 、斜体字 、下划线 、删除线strike /strike、文字闪烁 blink /blink （ 4）打字机字体 、引文 、强调 和特别强调 （ 5）引文区块 （ 6）区分块 第 4章 网页设计工具 4.1 HTML基础 3列表 （ 1） 、 和 用来创建一个普通的列表； 用来创建列表中的上层项目； 用

7、来创建列表中最下层项目。 和 都必须放在 标记对之间。 （ 2） 、 和 标记对用来创建一个标有数字的列表；标记对用来创建一个标有圆点的列表；标记对只能在 或 标记对之间使用，此标记对用来创建一个列表项，若 放在 之间则每个列表项加上一个数字，若在之间则每个列表项加上一个圆点 第 4章 网页设计工具 4.1 HTML基础 4创建表格 （ 1） 表格一般由表、表头、格行和单元格四部分组成。标记对用来创建一个表格 （ 2） 标记对用来设置表格头，通常是黑体居中文字。 （ 3） 标记对用来创建表格中的每一行。 （ 4） 标记对用来创建表格中一行中的每一个格子。 第 4章 网页设计工具 4.1 HTM

8、L基础 5锚与超链接 （ 1）通过文本链接 例如： 这是我们学校的网站 （ 2）通过图像链接 例如： （ 3）建立锚点 例如： 此处创建了一个锚点 （ 4）通过锚点链接 点击此处将使浏览器跳到“锚点名”处 第 4章 网页设计工具 4.1 HTML基础 6表单 表单使网页具有交互的功能，使用户不再单纯地接收和阅读来自 WEB服务器的信息，也可以把自己的要求发送给服务器，经过服务器上的 ASP或 CGI等脚本程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。 表单的基本结构： 网页上的表单是由 标记和 等标记组合而成的。表单的基本语法格式为： （定义表单） （定义输入的类

9、型） （提交表单） 第 4章 网页设计工具 4.1 HTML基础 其中， .标记用于定义表单。在标记中， action属性给出表单提交后要执行的页面，也就是处理该表单的页面； Method属性可取 get和 post值： get值说明用户提交的表单数据在提交后会出现在表单处理页面的地址栏中。 post值说明用户提交的表单内容放在输入缓冲区中，保密性高，是页面之间进行数据传递的主要方式； target是打开窗口的目标属性，共有四种取值，如下表 第 4章 网页设计工具 4.1 HTML基础 Target属性 目 的 Target=”_blank” 页面在一个新窗口中打开 Target=”_self

10、 ” 文件在本窗口中打开，为默认情况 Target=”_parent” 文件在父框架中打开（设计使用了框架） Target =”_top” 文件在整个浏览器窗口打开 第 4章 网页设计工具 4.1 HTML基础 type属性取值 输入区域类型 单行的文本输入区域， size与 maxlength属性用来定义输入区域的大小与输入的最大字符数 将表单内容提交给服务器的按钮 将表单内容全部清除，重新填写的按钮 复选框， checked属性用来设置该复选框默认时是否被选中 隐藏区域，不能输入，用来预设某些要传送的信息 使用图像来代替 Submit按钮，图像的源文件名由 src属性指定 输入密码的区域，

11、当用户输入密码时，区域内将会显示” *”号 单选按钮类型， checked属性用来设置该单选框默认时是否被选中 第 4章 网页设计工具 4.2 多媒体技术 多媒体译自英文“ Multimedia”，它是由 Multiple和Media构成的复合词。 多媒体技术是指把文字、音频、图形、图像、动画和视频等多媒体信息通过计算机进行数字化采集、压缩 /解压缩、编辑、存储等加工处理，再以单独或合成形式表现出来的一体化技术。 多媒体技术的应用很广，包括娱乐、教育、视频制作、信息咨询、虚拟现实技术及远程传输。其中，多媒体技术在 Internet上的应用，是其最成功的表现之一。 DreamWeaver、 Fl

12、ash和 Fireworks，是 Adobe公司的产品，并称为网页制作的“三剑客”。它们作为网页设计工具在 Internet上的应用，是多媒体技术在 Web上的集中体现。 第 4章 网页设计工具 4.2 多媒体技术 4.2.1 Adobe DreamWeaver CS3 1常用网页设计工具 早期制作网页必须在文本编辑器中编写 HTML语句，这样，开发者就必须十分熟练地掌握HTML的格式以及各种标签的属性。 FrontPage 、 InterDev、 DreamWeaver等。 DreamWeaver以其强大的功能和方便的操作，赢得了越来越多的网页制作专业人士的青睐。 第 4章 网页设计工具 4

13、.2 多媒体技术 2 Adobe DreamWeaver CS3简介 Adobe DreamWeaver CS3是 Adobe公司最新推出的一款功能强大的网页制作软件，它继承了以前版本易学易用的优点，同时又增加了许多新特点，比如图形的编辑、 CSS样式表、表格的嵌入、 FTP上传与支持建立网站应用程序等功能。它将可视布局工具，应用程序开发功能和代码编辑支持组合为一个功能强大的工具系统，使每个级别的开发人员和设计人员都可利用它快速地创建网页界面。 Dreamweaver CS3支持 ActiveX、 JavaScript、Flash、 ShockWave等特性。 第 4章 网页设计工具 4.2

14、多媒体技术 3 Dreamweaver CS3的启动与工作界面 第 4章 网页设计工具 4.2 多媒体技术 4 Adobe DreamWeaver CS3基本功能简介 建立一个网站的主要步骤：在本地磁盘新建一个文件夹 在 Dreamweaver中把文件夹定义成站点 在站点内添加网页 编辑网页 测试、上传网站。 下面我们围绕该步骤简单介绍一下DreamWeaver的功能。 建立一个站点 第 4章 网页设计工具 4.2 多媒体技术 新建页面 第 4章 网页设计工具 编辑页面 4.2 多媒体技术 第 4章 网页设计工具 4.2 多媒体技术 测试网站 一个大型商业网站的测试一般按照这几方面进行：功能测

15、试、性能测试、可用性测试、兼容性测试、安全测试。下面我们简单介绍一下DreamWeaver中的链接测试。 链接测试可分为三个方面。首先，测试所链接的页面是否存在；其次，测试所有链接是否正确；最后，保证整个网站没有孤立页面。具体步骤如下： 第 4章 网页设计工具 4.2 多媒体技术 第 4章 网页设计工具 4.2 多媒体技术 上传网站 第 4章 网页设计工具 4.2 多媒体技术 第 4章 网页设计工具 4.2 多媒体技术 第 4章 网页设计工具 4.2 多媒体技术 1 Adobe DreamWeaver CS3的新功能 Dreamweaver CS3是一个可视化的网页设计和网站管理工具，支持最新的 Web技术，包含 HTML检查、 HTML格式化选项、 HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全 FTP功能、处理 Flash和Shockwave等媒体格式和动态 HTML、基于团队的 Web创作。在编辑上可以选择可视化方式或者喜欢的源码编辑方式。 Dreamweaver CS3包含有一个崭新的、简洁高效的界面，且产品性能也得到了改进。此外，该产品还包含了众多新增的功能，这些新增功能改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。 （ 1） Spry构件