(精品)第4章网页设计工具

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,4,章,网页设计工具,第,4,章,网页设计工具,4.1 HTML,基础,4.2,多媒体技术,4.3,习题,主要内容,超文本标记语言的概念、语法、基本结构及常用标记,DreamWeaver,的概念、功能及简单使用,Flash,的概念、特征及简单应用,Fireworks,的特征、工作流程及实例,核心知识点,超文本标记语言的语法、基本结构及常用标记,DreamWeaver,的功能及简单使用,重点难点,超文本标记语言的概念、语法、基本结构及常用标记,DreamWeaver,、,Flash,和,Fireworks,的功能及简单应用,学习目标,理解超文本标记语言的概念,掌握超文本标记语言的语法、基本结构及常用标记,掌握,DreamWeaver,的基本功能,使用,Flash,和,Fireworks,绘制简单的图形,4.1 HTML,基础,4.1.1,超文本标记语言的概念,HTML,的全称是,Hypertext Markup Language,，中文名称是超文本标记语言。它是在普通文本文件的基础上，加上一系列标记描述其格式、颜色，再加上图像、声音、动画和视频等，形成精彩的画面。用,HTML,编写的文件的扩展名是,.html,或,.,htm,。,HTML,网页文件一般是纯内容的网页文件，没有任何网站程序，通常称为静态网页。,4.1 HTML,基础,4.1.2,超文本标记语言的语法,超文本标记语言,HTML,是标记的集合，被一对尖括号“,”,括起来，标记一般成对出现。网页的内容和各种标记的有机结合就构成了千姿百态的网页“世界”。,标记和属性构建了,HTML,的语法。浏览器只要读到,HTML,的标记和属性，就会将其解释成网页或网页的某个组成部分。它们的基本构成如下：,4.1 HTML,基础,1,标记,2,属性,3,值,4,嵌套标记,5,空格符,6,特殊字符,4.1 HTML,基础,4.1.3,超文本标记语言的基本结构,HTML,文件通常都是以,开始，以,结尾，中间有两大部分：第一部分是,区段，称为头部；第二部分是,区段，称为体部。,HTML,语言的基本结构如下：, , , , ,基本结构样板程序, , , ! HTML,的,部分从这里开始,这里是基本结构样板程序的,HTML,正文。, ! HTML,的,部分在这里终止, ,4.1 HTML,基础,4.1 HTML,基础,4.1.4,超文本标记语言的标记简介,1,HTML,语言的常用标记,（,1,）, ,标记指出了本文件是个,HTML,文件，当浏览器遇到,标记时会按照,HTML,标准解释后面的文本，直到遇到结束标记,就停止上述解释。,（,2,）, ,和,构成,Html,文档的开头部分，在此标记对之间可以使用,、,等等标记对。,（,3,）, ,标记用于设置浏览器窗口标题栏中显示的文本信息，那些信息一般是网页的“主题”。,（,4,）, ,是,HTML,文档的主体部分，在此标记对之间可包含,、,、,等等众多的标记。,（,5,）,在浏览器处理,HTML,文件时，将忽略注释标记及其注释内容。,4.1 HTML,基础,（,6,）,标记,标记对是用来创建一个段落。,标记还可以使用,align,属性来说明对齐方式，语法是：,。,（,7,）,标记 使用,标记可以按照原样显示文本。实现“所见即所得”的效果。,（,8,）,标记 采用标记,换行分段将会产生一个空白行间距，而,标记仅仅创建一个回车换行，保留了原先的行间距。,（,9,）,标记 要将图像放到网页中，通常使用，其格式为：,（,10,）,标记,标记是在,HTML,文档中加入一条水平线，它可以直接使用。,4.1 HTML,基础,2,文本格式的控制,（,1,）,标记,HTML,语言提供了一系列标题字体，它是一种比正文大一些的粗体文字。,是最大的标题，而,则是最小的标题。,（,2,）,对输出文本的字体大小、颜色进行随意地改变。,例如：,这是红色,3,号字隶书字体,（,3,）粗体字,、斜体字,、下划线,、删除线,strike,.,/strike,、文字闪烁,blink,.,/blink,（,4,）打字机字体,、引文,、强调,和特别强调,（,5,）引文区块,（,6,）区分块,4.1 HTML,基础,3,列表,（,1,）,、,和,用来创建一个普通的列表；,用来创建列表中的上层项目；,用来创建列表中最下层项目。,和,都必须放在,标记对之间。,（,2,）,、,和,标记对用来创建一个标有数字的列表；,标记对用来创建一个标有圆点的列表；,标记对只能在,或,标记对之间使用，此标记对用来创建一个列表项，若,放在,之间则每个列表项加上一个数字，若在,之间则每个列表项加上一个圆点,4.1 HTML,基础,4,创建表格,（,1,）,表格一般由表、表头、格行和单元格四部分组成。,标记对用来创建一个表格,（,2,）,标记对用来设置表格头，通常是黑体居中文字。,（,3,）,标记对用来创建表格中的每一行。,（,4,）,标记对用来创建表格中一行中的每一个格子。,4.1 HTML,基础,5,锚与超链接,（,1,）通过文本链接,例如：,这是我们学校的网站,（,2,）通过图像链接, ,例如：,（,3,）建立锚点,例如：,此处创建了一个锚点,（,4,）通过锚点链接,点击此处将使浏览器跳到“锚点名”处,4.1 HTML,基础,6,表单,表单使网页具有交互的功能，使用户不再单纯地接收和阅读来自,WEB,服务器的信息，也可以把自己的要求发送给服务器，经过服务器上的,ASP,或,CGI,等脚本程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。,表单的基本结构：,网页上的表单是由,标记和,等标记组合而成的。表单的基本语法格式为：,（定义表单）,（定义输入的类型）,（提交表单）,4.1 HTML,基础,其中，,.,标记用于定义表单。在标记,中，,action,属性给出表单提交后要执行的页面，也就是处理该表单的页面；,Method,属性可取,get,和,post,值：,get,值说明用户提交的表单数据在提交后会出现在表单处理页面的地址栏中。,post,值说明用户提交的表单内容放在输入缓冲区中，保密性高，是页面之间进行数据传递的主要方式；,target,是打开窗口的目标属性，共有四种取值，如下表,4.1 HTML,基础,Target,属性,目 的,Target=”_blank”,页面在一个新窗口中打开,Target=”_self ”,文件在本窗口中打开，为默认情况,Target=”_parent”,文件在父框架中打开（设计使用了框架）,Target =”_top”,文件在整个浏览器窗口打开,4.1 HTML,基础,type,属性取值,输入区域类型,单行的文本输入区域，,size,与,maxlength,属性用来定义输入区域的大小与输入的最大字符数,将表单内容提交给服务器的按钮,将表单内容全部清除，重新填写的按钮,复选框，,checked,属性用来设置该复选框默认时是否被选中,隐藏区域，不能输入，用来预设某些要传送的信息,使用图像来代替,Submit,按钮，图像的源文件名由,src,属性指定,输入密码的区域，当用户输入密码时，区域内将会显示”*”号,单选按钮类型，,checked,属性用来设置该单选框默认时是否被选中,4.2,多媒体技术,多媒体译自英文“,Multimedia”,，它是由,Multiple,和,Media,构成的复合词。,多媒体技术是指把文字、音频、图形、图像、动画和视频等多媒体信息通过计算机进行数字化采集、压缩,/,解压缩、编辑、存储等加工处理，再以单独或合成形式表现出来的一体化技术。,多媒体技术的应用很广，包括娱乐、教育、视频制作、信息咨询、虚拟现实技术及远程传输。其中，多媒体技术在,Internet,上的应用，是其最成功的表现之一。,DreamWeaver,、,Flash,和,Fireworks,，是,Adobe,公司的产品，并称为网页制作的“三剑客”。它们作为网页设计工具在,Internet,上的应用，是多媒体技术在,Web,上的集中体现。,4.2,多媒体技术,4.2.1 Adobe,DreamWeaver,CS3,1,常用网页设计工具,早期制作网页必须在文本编辑器中编写,HTML,语句，这样，开发者就必须十分熟练地掌握,HTML,的格式以及各种标签的属性。,FrontPage,、,InterDev,、,DreamWeaver,等。,DreamWeaver,以其强大的功能和方便的操作，赢得了越来越多的网页制作专业人士的青睐。,4.2,多媒体技术,2,Adobe,DreamWeaver,CS3,简介,Adobe,DreamWeaver,CS3,是,Adobe,公司最新推出的一款功能强大的网页制作软件，它继承了以前版本易学易用的优点，同时又增加了许多新特点，比如图形的编辑、,CSS,样式表、表格的嵌入、,FTP,上传与支持建立网站应用程序等功能。它将可视布局工具，应用程序开发功能和代码编辑支持组合为一个功能强大的工具系统，使每个级别的开发人员和设计人员都可利用它快速地创建网页界面。,Dreamweaver,CS3,支持,ActiveX,、,JavaScript,、,Flash,、,ShockWave,等特性。,4.2,多媒体技术,3,Dreamweaver,CS3,的启动与工作界面,4.2,多媒体技术,4,Adobe,DreamWeaver,CS3,基本功能简介,建立一个网站的主要步骤：在本地磁盘新建一个文件夹在,Dreamweaver,中把文件夹定义成站点在站点内添加网页编辑网页测试、上传网站。,下面我们围绕该步骤简单介绍一下,DreamWeaver,的功能。, 建立一个站点,4.2,多媒体技术, 新建页面, 编辑页面,4.2,多媒体技术,4.2,多媒体技术, 测试网站,一个大型商业网站的测试一般按照这几方面进行：功能测试、性能测试、可用性测试、兼容性测试、安全测试。下面我们简单介绍一下,DreamWeaver,中的链接测试。,链接测试可分为三个方面。首先，测试所链接的页面是否存在；其次，测试所有链接是否正确；最后，保证整个网站没有孤立页面。具体步骤如下：,4.2,多媒体技术,4.2,多媒体技术, 上传网站,4.2,多媒体技术,4.2,多媒体技术,4.2,多媒体技术,1,Adobe,DreamWeaver,CS3,的新功能,Dreamweaver,CS3,是一个可视化的网页设计和网站管理工具，支持最新的,Web,技术，包含,HTML,检查、,HTML,格式化选项、,HomeSite,/BBEdit,捆绑、可视化网页设计、图像编辑、全局查找替换、全,FTP,功能、处理,Flash,和,Shockwave,等媒体格式和动态,HTML,、基于团队的,Web,创作。在编辑上可以选择可视化方式或者喜欢的源码编辑方式。,Dreamweaver,CS3,包含有一个崭新的、简洁高效的界面，且产品性能也得到了改进。此外，该产品还包含了众多新增的功能，这些新增功能改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。,（,1,）,Spry,构件,4.2,多媒体技术,（,2,）,Spry,效果,（,3,）高级,Photoshop CS3,集成,（,4,）浏览器兼容性检查,（,5,）,Adobe CSS Advisor,（,6,）,CSS,布局,（,7,）治理,CSS,（,8,）,Adobe Bridge CS3,（,9,）,Adobe Device Central CS3,4.2,多媒体技术,4.2.2 Adobe Flash CS3,1,Adobe Flash CS,简介,Adobe Flash CS3,之前的版本曾是,MicroMedia,公司的三大网页设计利器之一。它以流控制技术和矢量技术等为代表，制作出来的动画具有短小精悍的特点。该软件一推出，就受到了广大网页设计者的青睐，被广泛用于网页动画的设计，成为当今最流行的软件之一。,Adobe Flash CS3,是,Adobe,公司收购,Macromedia,公司后将享誉盛名的,Macromedia Flash,更名为,Adobe Flash,后的一款动画软件。在,Adobe Flash CS3,中，工具栏变成,CS3,通用的单双列，面板可以缩放成图标，也可以是半透明的图层，沿用以前,ADOBE,的风格。,4.2,多媒体技术,2,Flash,的基本应用,采用,Flash,动画技术可以增强主页的吸引力，动态的,Flash,更是令人兴奋，下面是低版本的,Flash MX,的基本应用。,Flash,的基本应用主要包括以下领域：,（,1,）片头：,（,2,）导航条：,（,3,）辅助说明：,（,4,）制作静态图形：,（,5,）制作动画：,（,6,）,Active,支持：,（,7,）开发网络应用程序：,4.2,多媒体技术,3,Adobe Flash CS3,的新增功能,（,1,）改进了钢笔工具，比以前的钢笔更加好用。,（,2,）,Flash CS3,编程方面的改进, 时间轴上的运动补间动画可以有选择的转换为,MXML,代码，以供,Action Script3,和,Flex,使用。, 可以只发布没有隐藏的图层，也就是有选择的输出图层。, 改进的代码调试器，类似,Flex,的调试器。,（,3,）属性面板可以监测你绘制的图形，而不是统一显示为形状。,（,4,）圆角矩形可以单独对四个边角进行调整。,（,5,）可以导入分层的,PSD,文件，并且可以决定哪些层需被导入。还可以保留图层上的组、样式、蒙板和智能滤镜、路径的可编辑性。,（,6,）导入,AI,文件的支持。,4.2,多媒体技术,4,Flash,的基本概念,（,1,）时间轴和帧,Flash,做出来的动画我们通常称为影片,.,当,Flash,影片以一定的速度播放时，在我们眼中看到的即是一段连续的动画,.,（,2,）图层,（,3,）移动变形和形状变形,在,Flash,中形状变形指对象从前一个关键帧的形状变形到后一个关键帧的形状。,（,4,）遮罩和引导线,遮罩和引导线是层的两种特殊类型。,遮罩层对应被遮罩的层，遮罩层上的对象外形会对被遮罩层上的对象产生遮罩效果。,引导线就是引导层里实例对象按路径运动的轨迹，它的制作过程能被我们看见，但在实际动画的播放过程中将隐藏不见。,4.2,多媒体技术,5,Flash,实例,现在综合运用,Flash,的绘图工具，绘制一个苹果。,步骤：,（,1,）使用椭圆工具绘制椭圆,（,2,）使用封套工具调整椭圆，使其大致成为苹果的形状,（,3,）以放射状渐变色填充椭圆,（,4,）使用填充变形工具调整渐变色的中心位置,（,5,）最后绘制果柄，如图所示。,4.2,多媒体技术,4.2.3 Adobe Fireworks CS3,1,Adobe Fireworks CS3,简介,Fireworks CS3,是用来设计和制作专业化网页图形的工具，使用,Fireworks,，您可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像,Fireworks CS3,用业界领先的优化工具在最佳图像品质和最小压缩大小之间达到平衡。,Adobe Fireworks CS3,和,Adobe Flash CS3,共同构成的集成工作流程可以让你创建并优化图像，同时又能避免由于进行编辑而丢失信息或浪费时间。,4.2,多媒体技术,2,Fireworks MX,的新增功能,（,1,）实时颜色,（,2,）,Adobe Flash,集成,（,3,）绘制工具和控件,（,4,）改进的操作性能,（,5,）控制面板,（,6,）橡皮擦工具,（,7,）新的文档配置文件,（,8,）裁剪区域工具,（,9,）隔离模式,（,10,）用于,Flash,的符号,习题,一选择题,1,在,HTML,文档中创建有数字的列表应使用（ ）标记。,A, B, C, D,2,下列哪一标记用于设置浏览器窗口标题栏中显示的内容。,A, B, C, D,3,要实现“所见即所得”的效果，应使用标记（ ）。,A, B, C, D,习题,二,填空,1,是网页中的特殊文本。它链接到因特网上其它的网页，这些文本被用特殊方式显示（例如用不同的颜色，或添加了下划线），当我们将鼠标移动到这些文本时，鼠标的箭头就变成了一只手的形状。,2,定义,HTML,页面的表单，要用,HTML,标记,。,3,HTML,网页文件一般是纯内容的网页文件，没有任何网站程序，通常称为,。,习题,三简答题,1,网页制作的“三剑客”指的是,MacroMedia,公司的哪三大产品,?,2,使用,Dreamweaver,Mx,2004,上传网页的步骤是什么,?,3,简述,Flash MX,的应用,?,本 章 结 束,谢 谢！,