网页设计与制作.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页设计与制作教程,网页设计与制作,教材,配套电子教案,2007.6,1.1,网页概述,1.2,网页制作工具简介,1.3,HTML,基础,1.4,实践技能训练,第,1,章 网页基础知识,1.1.1,什么是网页,Web,直译过来就是,“,网,”,，可以理解为通过超级连接将各种文档连接起来的一个大规模的信息集合。,网页（,Web,页）实际上就是,HTML,文件，是一种可以在,WWW,网上传输，并能被浏览器认识和翻译成页面的文件。,WWW,是,“,World wide web,”,的缩写；,HTML,则是,“,HyperText Markup Language,”,的缩写，意为,“,超文本标记语言,”,，它是一种规范，一种标准。超文本就是指页面可以包含图片、链接、音乐等非文字的元素。,制作网页所需要的硬件和软件：,硬件：计算机主频最好的,P,以上，内存最好在,128MB,以上，必须有足够大的空间来存放网页素材。,软件：,Dreamweaver 8.0,是目前制作网页的最新版本，,Frontpage,也是一个不错的产品。处理网页图像和文字可以选择,Fireworks,，若要制作网页动画，可以选择,Flash,。,1.1,网页概述,1.1.2,网页中的基本元素,网页包括的主要元素有：,文本、图像、动画、声音、视频、表格、表单等。,1.1,网页概述,1.1.2,网页中的基本元素,1.,文本,文本是人类最重要的信息载体和交流的工具，网页的主体一般以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。,文本在网页中的主要功能是显示信息和超级链接，文本通过文字的具体内容与不同的格式来显示信息的重要内容，这是文本的直接功能。此外，文本作为一个对象，往往又是超级链接的触发体，通过文本表达的链接目标指向相关内容。,2.,图像,图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标志、网页背景、链接按纽、导航条、网页主图等，网页中使用图像的格式主要有：,GIF,、,JPEG,、,PNG,等格式。,1.1,网页概述,1.1.2,网页中的基本元素,-,图像,GIF,图像。,GIF(graphics interchange format),由,Compu-Serve,公司,1987,年,6,月制订。,GIF,通常对于卡通、图像、,Logo,、以及带有透明区域的图像、动化很有作用。,GIF,文件格式的扩展名是,“,.gif,”,.,JPEG,图像。,JPEG,（,joint photographic experts group,联合照片专家组）是一种特别为照片图像设计的图片压缩处理格式。,JPEG,文件采用先进的压缩算法，可以保持较好的图像保真度和较高的压缩比。,JPEG,文件格式的扩展名为,“,.jpg,”,.,PNG,图像。,PNG,（,portable network graphic,）即可移植网络图形。,PNG,图像是专门针对,Web,开发的一种无损压缩图像，它的压缩比要大大超过许多传统的图像无损压缩算法，同时还支持透明背景和动态效果。,PNG,文件格式的扩展名是,“,.png,”,1.1,网页概述,1.1.2,网页中的基本元素,3.,动画,动画实质上就是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。由于活动的对象比静止的对象更具有吸引力，因而，网页上通常有大量的动画。网页中使用较多的动画是,GIF,动画和,Flash,动画。,4.,声音,声音是多媒体网页的一个重要组成部分。用于网络声音文件格式非常多，常用的是,MIDI,、,MAV,、,MP3,和,AIF,等。,一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。可以在网页中添加一个链接来打开声音文件作为背景音乐，让播放音乐变得可以控制。,浏览器的不同，处理声音文件的方式也会有很大的差异和不一致的地方，最好将声音文件添加到,Flash,影片中，然后嵌入,SWF,文件以改善一致性。,1.1,网页概述,1.1.2,网页中的基本元素,视频,在网页中视频文件格式也非常多，常见的有,RealPlayer,、,MPEG,、,AVI,和,DivX,、,flash,等。,表格,表格是一种用来控制网页中页面布局的有效方式。为了达到理想的视觉效果，通常都不显示边框，我们所看到的网页如果具有横竖分明的风格，一般都是用表格来辅助布局的。,许多设计人员使用表格对网页进行布局。,Dreamweaver,提供两种方式来查看和操作表格：标准视图和布局视图。在标准视图中，表格显示为行和列的网格，而布局视图允许创建者在将表格用做基础结构的同时在网页上绘制、移动方框以及调整方框的大小。,1.1,网页概述,1.1.2,网页中的基本元素,表单,表单是一种特殊的网页元素。表单的主要用途是：收集联系信息、接受用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录。登录的用户名、密码、搜索引擎等都是表单。,表单由不同功能的表单元素组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本、选中单选按钮和复选框，以及从下拉列表框中选择选项。根据表单功能和处理方式的不同，通常可以将表单分为用户反馈表单、流言簿表单、搜索表单和用户注册表单等类型。,1.1,网页概述,1.1.3,网页的类型：,有,3,种不同的类型：基本网页、动态网页和模板网页。,1.,基本网页,基本网页又称静态网页，是相对动态网页而言的。工作原理如下。,客户端请求 服务器,接受响应,客户端浏览器 网页,1.1,网页概述,动态网页,动态网页中除了基本网页中的元素外，还包括一些程序，这些应用程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能完成。,应用程序服务器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序服务器将该网页传送回网页服务器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯,HTML,的静态网页。,动态网页是经过人与服务器对话的结果。如图网页上的登录、注册、网上购物等都属于此类网站。,1.1,网页概述,动态网页有两种：一种是普通动态网页，它不包含数据库；一种是包含数据库的动态网页。,普通动态网页，其工作的过程如图所示,1.1,网页概述,.,包含数据库的动态网页，如,Access,、,SQL,、,MYSQL,等，其工作过程如图所示：,1.1,网页概述,1.1,网页概述,3.,模板网页,模板是提供一个标准页面，它的模式固定，例如页面布局、字体排列等固定不变，只需要改变页面的内容，这有助于读者成批地建立页面风格相同的页面，从而使网站风格得到统一。模板能够带给你对网页功能和布局更为完整的概念，并且模板文件能够让你更容易的浏览页面代码。,1.2,网页制作工具简介,1.2.1,网页编辑工具,1.FrontPage,2.Dreamweaver,1.2,网页制作工具简介,1.2.2,网页动画制作软件,Flash,也是,Macromedia,公司推出的产品。,Flash8.0,可以更好的为网页设计师和开发人员服务，帮助他们提高工作效率，创造丰富的、极具诱惑力个感染力的动画作品。,Flash,的主要功能是制作动画，这种动画不能是纯粹的动画，还应该具有交互的特点，制作出来的作品应该达到令人目眩的感觉。,Flash8.0,兼容了以前的版本，凡是以前使用过,Flash5.0,、,Flash MX,以及,Flash MX 2004,的用户都可以立即上手，应用起来更方便、更快捷。,Flash8.0,的功能得到了极大的扩展，用它可以创造完整的动态站点，从内容显示到数据库的连通，以及视频的调整，给用户带来的惊喜是空前的。,凭借,Flash8.0,的开发环境及新的服务器技术优势，网页的开发者可以通过它建立新一带的网络动画，带来更具视觉震撼力的,Web,产品,。,1.2,网页制作工具简介,1.2.3,网络图像处理软件,Fireworks,是,Macromedia,公司专门为网页设计的,Web,图形工具软件，它可以用最少的步骤生成最小但质量很高的,JPEG,和,GIF,图像，这些图像可以直接用于网页上。,Fireworks,是,Web,图形工具的首选软件。,Photoshop,是由,Adobe,公司出品的著名的图形图像处理软件。它能够实现各种专业化的图像处理，是专门图像创作的首选软件。,1.3 HTML,基础,-,概念,HTML,则是,“,HyperText Markup Language,超文本标记语言,”,的缩写，它是构成,Web,页面的主要工具，是用来表示网上信息的符号标记语言。,在,Internet,上，如果要想全球范围内发布信息，需要一个能够被广泛理解的语言，也就是说所有的计算机都能够理解的用语出版的,“,母语,”,。,WWW,（,World wide web,）所使用的出版语言就是,HTML,语言。,通过,HTML,，将所需要表达的信息按某种规则,HTML,文件，通过专用的浏览器来识别，并将这些,HTML,“,翻译,”,成可以识别的信息，就是我们所见到的网页。,1.3 HTML,基础,-,功能,HTML,的功能如下：,出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。,通过超链接检索在线的信息。,为获取远程服务而设计表单，可用于检索信息、订购产品。,在文档中直接包含了电子表格、视频剪辑、声音剪辑以及其他的一些功能。,1.3 HTML,基础,1.3.1 HTML,语言结构的基本标志,文档标志,。,标志用于,HTML,文档的最前面，用来标识,HTML,文档的开始。而,标志恰恰相反，它放在,HTML,文档的最后边，又来标识,HTML,文档的结束，两个标志必须成对使用。,文件头标志,。,和,构成,HTML,文档的开头部分，在此标志之间可以使用,、,等标志对。,标志对之间的内容是不会在浏览器的框内显示出来。两个标志必须成对使用。,1.3 HTML,基础,1.3.1 HTML,语言结构的基本标志,文件主体标志,.,是,HTML,文档的主体部分，在此标志对之间可以包含,、,、,、,等众多标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须成对使用。,标志中还可以有如表,1-1,所示的属性。,属性,用途,示例,设置背景颜色,红色背景,设置文本颜色,蓝色文本,设置链接颜色,链接为蓝色,设置已经使用的链接的颜色,1.3 HTML,基础,1.3.1 HTML,语言结构的基本标志,文件标题标志,。,使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的,“,主题,”,。要将网页的主题显示到浏览器的顶部其实很简单，只要在,标志对之间加如显示的文本即可。,注意：,标志对只能放在,标志对之间。,下面是一个综合的例子，说明了,HTML,文档中最基本标志的使用。,显示在浏览器最上边蓝色条中的文本,红色背景、蓝色的文本,1.3 HTML,基础,1.3.2,页面格式标志,段落标志,.,标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，,标志还可以使用,align,属性，它用来说明对齐方式，语法是,。,align,可以是,Left,（左对齐）、,Center,（居中）和,Right,（右对齐）三个值中间的一个。,如：,表示标志对中的文本使用居中对齐方式。,.,标志队有来对文本进行预处理操作。,1.3 HTML,基础,1.3.2,页面格式标志,2,.,换行标志,是一个很简单的标志，它没有结束标志，因为它是用来创建一个回车换行的。在,的使用上面还有一定的技巧，如果把,加在,标志对的外边,将创建一个很大的回车换行,即,前面和后面的文本的行与行之间的距离很大,若放在,的里面,则,前面和后面的文本行与行之间的距离比较小,.,1.3 HTML,基础,1.3.2,页面格式标志,3.,列表标志,、,、,用来创建一个普通的列表,用来创建列表中的上层项目,用来创建列表中最下层项目,和,都必须放在,标志对之间。,下面是一个创建普通列表的例子,一个普通的列表,中国城市,北京,上海,广州,美国城市,华盛顿,芝加哥,dd,纽约,1.3 HTML,基础,1.3.2,页面格式标志,3.,列表标志,、,、,标志对用来创建一个表有数字的列表；,标志对用来创建一个标有圆点的列表；,标志对只能在,或,标志对之间使用，此标志对用来创建一个列表项，若,放在,之间则每个列表项加上一个数字，若,放在,之间则每个列表项加上一个圆点。,中国城市,北京,上海,广州,美国城市,华盛顿,芝加哥,纽约,1.3 HTML,基础,1.3.2,页面格式标志,标志对用来排版大块,HTML,段落，也用于格式化表，此标志对的用法与,标志对非常相似，同样有,align,对齐方式属性。,标题格式标志,HTML,语言提供了一系列对文本中的标题进行操作的标志对：,，,一共有,6,对标题的标志对。,是最大的标题，而,则是最小的标题，也就是说标志中,h,后面的数字越大标题文本就越小。如果,HTML,文档需要输出标题文本，就可以使用这,6,对标题中的任何一对。,1.3 HTML,基础,1.3.3,文本标志,1.,黑体字、斜体字、下划线标志对,用来使文本以黑体字的形式输出。,用来使文本以斜体字的形式输出。,用来使文本以下加一划线的形式输出。,2.,文字字型标志,文字字型标志还有,、,、,、,。这些标志对的用法和上面讲的一样，差别只是输出文本是字体不一样而已。,用来输出打字机风格字体的文本。,用来输出引用方式的字体，通常是斜体。,用来输出需要强调的文本（通常是斜体加黑体）。,则用来输出加重文本（通常是斜体加黑体）。,1.3 HTML,基础,1.3.3,文本标志,3.,文字大小、字体、颜色标志,是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性,size,和,color,的控制来实现的。,Size,属性用来改变字体的大小，它可以取值：,-N,、,N,和,+N,；而,color,属性则用来改变文本的颜色。颜色的取值可以是基本标志中讲过的十六进制,RGB,颜色码或,HTML,语言给定的颜色常量名。,1.3 HTML,基础,1.3.3,文本标志,文本标志的综合应用,文本标志的综合示例,最大的标题,使用,h3,的标题,最大的标题,黑体字文本,斜体字文本,下加一划线文本,打字机风格的文本,引用方式的文本,强调文本,加重文本,size,取值,+1color,取值为红色时的文本,1.3 HTML,基础,1.3.4,图像标志,图像属性赋值标志,标志并不是真正地将图像加入到,HTML,文档中，而是将标志对的,SRC,属性赋值。这个值是图像文件的文件名，包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到文档中。,所谓相对路径是指所要链接或嵌入到当前,HTML,文档的文件与当前文件的相对位置所形成的路径。,通常有如下情况：,假如,HTML,文件与图形文件（假设文件名为,logo.gif,）在同一个目录下，则可以将代码写成,。,.,假如图形文件放在当前的,HTML,文档所在的目录的一个子目录（子目录名假设是,images,）下，则代码应该为,。,.,假设图形文件放在当前的,HTML,文档所在的目录的上层目录（目录名假设是,home,）下，则相对路径就必须是准网址了。即用,“,./,”,表示网站，然后在后面紧跟文件在网站中的路径。假设,home,是网站下的一个目录，则代码应为,，若,home,是网站下的目录,king,下面的一个子目录，则代码应该为,了。,1.3 HTML,基础,1.3.4,图像标志,必须强调，,src,属性在,标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，,标志还有,alt,、,align,、,border,、,width,和,height,属性：,alt,属于是当鼠标移动到图像上时显示的文本。,align,是图形的对齐方式。,border,属性是图形的边框，可以取大于或者等于,0,的整数，默认单位是像素。,width,和,height,属性是图形的宽和高，默认单位是像素。,水平线标志,标志是在,HTML,文档中假如一条水平线，它可以直接使用，具有,size,、,color,、,width,和,noshade,属性。,size,是设置水平的厚度。,width,是设置水平线的宽度、默认单位为像素。,noshade,属性不需要赋值，而是直接加入标志即可使用，它是用来假如一条没有阴影的水平线（不假如此属性，水平线将有阴影）。,1.3 HTML,基础,1.3.5,表格标志,创建表格标志,标志对用来创建一个表格，下表所示的是属性。,属性,用途,设置表格的背景色,设置边框的宽度，若不设置宽度默认值为,0,设置边框的颜色,设置边框明亮部分的颜色（当,border,的只大于等于,1,才有用）,设置边框昏暗部分的颜色（当,border,的只大于等于,1,才有用）,设置表格的单元格之间的空间大小,设置表格的单元格边框与其内部内容之间空间大小,设置表格的宽度，单位用绝对像素值或总宽度的百分比,1.3 HTML,基础,1.3.5,表格标志,行、单元格和表格头标志,.,、,标志对用来创建表格的每一行。此标志对只能放在,标志对之间使用，而在此标志对之间加入文本是无用的，因为,之间只能紧跟,标志对才是有效的语法。,标志对用来创建表格中每一行中的每一个单元格，此标志对只有放在,标志对之间才识有效的，输入的文本也只有放在,标志对之间才有效（即才能被显示出来）。,1.3 HTML,基础,、,和,标志对之间的关系,标志,含义,最外层，创建一个表格,创建一行,要输出的文本只能放在此处,要输出的文本只能放在此处,要输出的文本只能放在此处,创建一个单元个（这里总共创建了三个单元格）,行末尾,最外层,1.3 HTML,基础,1.3.5,表格标志,此外，,还有,align,和,valign,属性，,align,是水平对齐方式，取值为,left(,左对齐,),、,center,（居中对齐）、,right,（右对齐）。,valign,是垂直对齐方式，取值为,top(,靠顶端对齐,),、,middle(,居中间对齐,),、,bottom(,靠底部对齐,),。,具有,width,、,colspan,、,rowspan,和,nowrap,属性。,width,是单元格的宽度，单位用绝对像素值或总宽度的百分比。,colspan,设置一个表格单元格跨占的列数（缺省值为,1,）。,rowspan,设置一个表格单元格跨占的行数（缺省值为,1,）。,nowrap,禁止对表格单元格内的内容自动断行。,标志对用来设置表格头，文字通常是黑体、居中。,1.3 HTML,基础,1.3.5,表格标志,标志对用来设置表格头，文字通常是黑体、居中。,1.3 HTML,基础,1.3.5,表格标志,表格标志的综合应用,表格标志的综合示例,意大利,英格兰,西班牙,AC,米兰,拂罗伦莎,曼联,纽卡斯尔,巴塞罗那,皇家社会,1.3 HTML,基础,1.3.5,表格标志,尤文图斯,桑普多利亚,利物普,阿申纳,皇家马德里,.,拉奇奥,国际米兰,切尔西,米德尔斯堡,马德里竞技,.,1.3 HTML,基础,1.3.6,链接标志,1.,创建连接页面标志,创建页面的标志对的,href,属性无论如何是不可缺少的，标志对之间假如需要链接的文本和图像（链接图像即加入,标志）。,Href,的值可以是网址或相对路径，也可以,mailto:,形式,。,对于第一种情况，语法为,这样就可以创建一个超文本链接了，例如：,这是我的网站,对于第二种情况，语法为,，这就创建了一个自动发送电子邮件的连接，,mailto,：后边紧跟着要自动发送的电子邮件的地址（即,E-mail,地址），例如：,这是我的电子邮箱（,E-mail,）,1.3 HTML,基础,1.3.7,标志帧,帧可以用来向浏览器窗口中装载多个,HTML,文件。也就是说每个,HTML,文件占据一个帧，而多个帧可以同时显示在同一浏览器窗口中，它们组成了一个最大的帧，也就是一个包含多个,HTML,文档的,HTML,文件（我们称它为主文档）。帧通常的使用方法是在一个帧中放置目录（即可以供选择的链接），然后将,HTML,文件显示在另一个帧中。,帧属性标志,标志对放在帧的主文档的,标志对的外边，也可以嵌套在其他帧的文档中，并且可以嵌套使用。此标志对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有,rows,和,cols,属性，使用,标志时这两个属性至少必须选择一个，否则浏览器窗口只显示第一个定义的帧，剩下的一概不管，,标志对也就没有祈祷任何作用了。,rows,是用来规定主文档中各个帧的行定位,而,cols,用来规定主文档中的各个帧 的列定位。这两个属性的取值可以是百分数、绝对像素值或者,“,*,”,，其中,“,*,”,代表那些未被说明的空间，如果同一个属性中出现多个,“,*,”,则将剩下的未被说明的空间平均分配。同时，所有的帧按照,rows,和,cols,的值从左到右，然后从上到下排列，,1.3 HTML,基础,1.3.7,标志帧,示例,说明,总共有三个按列排列的帧，每个帧占整个浏览器窗口是,1/3,总共有三个按行排列的帧，第一个帧占整个浏览器窗口的,40%,，剩下的空间平均分配给另外两个帧,总共有六个帧，先是在第一行中从左到右排列三个帧，然后在第二行中从做到右再排列三个帧，即两行三列，所占空间依据,rows,和,cols,属性的值，其中,200,的单位是像素,1.3 HTML,基础,1.3.7,标志帧,帧内容标志,.,标志放在,之间，用来定义某一个具体的帧。,标志具有,src,、,name,、,scrolling,和,noresize,属性，其中,src,和,name,属性都是必须赋值的。,src,是此帧的源,HTML,文件名（包括网络路径、相对路径或网址），浏览器将会在此帧中显示,src,指定的,HTML,文件。,name,是此帧的名字，这个名字是用来供超文本链接标志,中的,target,属性，用来指定链接的,HTML,文件将显示在哪一个帧中。例如定义一个帧，名字是,main,在帧中显示的,HTML,文件名是,jc.htm,，则代码为：,。当有一个链接，在单击了这个链接后，文件,new.htm,将要显示在名为,main,的帧中，则代码为,需要链接的文本,。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当单击链接以后在另一帧中显示被链接的,HTML,文件。,scrolling,用来指定是否显示滚动轴，取值可以是,“,yes,”,（显示）、,“,no,”,（不显示）、,“,auto,”,（若需要则会自动显示，不需要则自动不显示）。,noresize,属性值直接加入标志中就可以使用，不需要赋值，它用来禁止用户调整一个帧的大小。,1.3 HTML,基础,1.3.7,标志帧,.,标志对也是放在,标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。,帧标志的综合应用,下面是一个有关帧的综合应用的例子。,主文档：,帧标志综合示例,对不起,您的浏览器不支持,帧,!,1.3 HTML,基础,1.3.7,标志帧,目录页,meun.htm:,目录,目录,链接到第一页,链接到第二页,第一页,pagel.htm,第一页,这是第一页,!,第二页,page2.htm,第二页,这是第二页,!,1.3 HTML,基础,1.3.8,表单标志,创建表单标志,标志对用来创建一个表单，也就是定义表单的开始和结束位置，在标志对之间的一切都属于表单内容。,标志还有,action,、,method,和,terget,属性。,action,的值是处理程序的程序名（包含绝对路径和相对路径），如：,当用户提交表单时，服务器将执行网址,HTML,基础,1.3.8,表单标志,定义输入区标志,标志用来定义一个用户输入区，用户可以在其中输入信息。此标志必须放在,标志对之间。,标志中共提供了八种类型的输入区域，具体是哪一种类型由,type,属性来决定，这八种类型的具体内容见表,1-5,。,Type,属性取值,输入区域类型,输入区域示例,单行的文本输入区域，,size,与,maxlength,属性用来定义此种输入区域显示尺寸大小与输入的最大字符数,将表单内容提交给服务器的按钮,将表单的内容全部清楚，重新填写按钮,一个复选框，,checked,属性用来设置该复选框缺省时是否被选中，右边示例使用了三个复选框,隐藏区域，用户不能在其中输入，用来预设某些要传送的信息,使用图像来代替,submit,按钮，图像的源文件由,src,属性指定，用户单击后，表单中的信息和单击位置的,X,、,Y,坐标一起传送给服务器,输入密码的区域，当用户输入密码时，区域内将会显示,“,*,”,单选框类型，,radio,属性表示输入项是一个单选项，右边示例中使用了三个单选项,1.3 HTML,基础,1.3.8,表单标志,3.,创建列表框标志,标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于,标志对之间。,具有,multiple,、,name,和,size,属性。,name,是此列表的名字，它与上面介绍的,name,属性作用是一样的。,size,属性用来设置用来设置列表的高度，缺省时值为,1,，若没有设置（加入）,multiple,属性，显示的将是一个弹出式的列表框。,.,标志是用来指定列表框的一个选项，它放在,标志对之间。此标志具有,selected,和,value,属性。,Selected,属性用来指定默认的选项。,Value,属性用来给,指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用,区域的名字的,value,属性来获得该区域选中的数据项。,1.3 HTML,基础,1.3.8,表单标志,HTML,代码,浏览器显示的结果,请选择最喜欢的女歌手,:,祖海,宋祖英,韩红,孙悦,请选择最喜欢的男歌手,:,刘德华,张学友,郭富城,黎明,1.3 HTML,基础,1.3.8,表单标志,4.,创建文本框标志,用来创建一个可以输入多行的文本框,此标志对用于,标志对之间。,具有,name,、,cols,和,rows,属性。,cols,和,rows,属性分别用来设置文本框的列数和行数，这里的行和列是以字符为 单位的，如表,1-7,例子所示。,HTML,代码,浏览器显示的结果,你的意见对我很重要,:,请将意见输入此区域,1.3 HTML,基础,1.3.9,多媒体标志,多媒体标志用于插入音乐和各种多媒体插件。,插入背景音乐标志,用来插入背景音乐，但只适用于,IE,，其参数设定不多。,例如：,src=your.mid,设定,midi,档案及路径，可以是相对路径，也可以是绝对路径。,autostart=true,是否在音乐文件传完之后，就自动播放音乐。,true,表示是，,false,表示否（内定值）。,loop=infinite,是否自动反复播放。,loop=2,表示重复,2,次，,infinite,表示重复多次。,输入各种多媒体标志,用以插入各种多媒体，格式可以是,MIDI,、,MAV,、,AIFF,、,AU,等等，,netscape,及新版的,IE,都支持。其参数设定较多。,1.3 HTML,基础,1.3.9,多媒体标志,输入各种多媒体标志,用以插入各种多媒体，格式可以是,MIDI,、,MAV,、,AIFF,、,AU,等等，,netscape,及新版的,IE,都支持。其参数设定较多。,例如：,src=your.mid,设定,midi,档案及路径，可以是相对路径，也可以是绝对路径。,autostart=true,是否在音乐文件传完之后，就自动播放音乐。,true,表示是，,false,表示否（内定值）。,loop=true,是否自动反复播放。,loop=2,表示重复,2,次，,infinite,表示重复多次。,hidden=true,是否完全隐藏控制画面，,true,为是,no,为否（内定）。,Starttime=,分：秒,设定歌曲开始播放的时间。如,Starttime=00,：,30,表示从第,30,秒处开始播放。,Volume=0-100,设定音量的大小，数量是,0,到,100,之间。内定值为使用者系统本身设定。,Width=,整数,和,high=,整数,1.3 HTML,基础,1.3.9,多媒体标志,设定控制画面的宽度和高度（若,hidden=no,）。,Align=center,设定控制画面和旁边文字的对齐方式，其值可以是,top,、,bottom,、,center,、,baseline,、,left right texttop,、,middle,、,absmiddle,、,absbottom,。,Controls=smallconsole,设定控制画面的外貌。预设值是,console.,其中,console,一般正常的面板；,smallconsole,较小的面板；,piaybutton,只显示播放按钮；,pausebutton,只显示暂停按钮；,stopbutton,只显示停止按钮；,volumelever,只显示音量调整按钮。,1.3 HTML,基础,1.3.10,其他标志,适用于,IE,译为,“,跑马灯,”,。例如,status Bar,，其意思是指走动或卷动的文字，其参数设定较多。例如：,hello,behavior=scroll,设定文字的卷动方式，可选值为：,scroll,一般卷动，使内定值。,slied,例如幻灯片，一格格的,效果是文字一接触左边便全部消失。,alternate,文字向左右两边撞来撞去。,direction=left,设置文字卷动方向，,left,表示向左，是内定值，,right,表示向右。,bgcolor=#0000ff,设置文字卷动范围的背景颜色。,height=30 width=150,设置文字卷动范围，可以采取相对或绝对，如,30%,或,30,等，单位为像素。,hspace=0 vspace=0,设定文字的水平及垂直空白位置。,1.3 HTML,基础,1.3.10,其他标志,loop=infinite,设定文字卷动的次数，其值可以是正整数或,infinite,infinite,是内定的，表示无限次。,scrollamount=30,设定每,“,格,”,文字之间的间隔，单位是像素。,scrolldelay=500,设定文字卷动的停顿时间，单位是毫秒。,2.,是令文字闪烁，只适用于,netscape,用法直接，没有参数。例如：,天上的星星不说话，地上的孩子叫妈妈,显示的结果为：天上的星星不说话，地上的孩子叫妈妈,是放在,之间的标志，此处以公式的形式进行介绍。,该网页的描述，作用于寻找引擎的登录。,该网页的关键字，作用于寻找引擎的登录,。,1.3 HTML,基础,1.3.10,其他标志,是放在,之间的标志，此处以公式的形式进行介绍。,该网页的描述，作用于寻找引擎的登录。,该网页的关键字，作用于寻找引擎的登录。,以上两行命令的功能相同，都是要求浏览器重新载入该页面，不使用缓存中的信息，,expires,时间可以修改。,1.3 HTML,基础,1.3.10,其他标志,-,设定这是,HTML,文件及其编码语系，中文网页请使用,BIG5,，或者不设编码也可，纯英文网页建议使用,ISO-8859-1,。,表示该网页由什么编辑器写成。,这一行较为实用，能在预定的秒数内自动转到指定的网址，原始码中的,10,表示,10,秒。,1.3 HTML,基础,1.3.10,其他标志,用来将目前文件与其他,URL,做链接，但不会有链接按钮，用于,标志，格式如下：,1.4,实践技能训练,实例,1.,字体设置标记,实例说明,：本实例介绍字体设置标志的方法，效果如图,1-12,实例分析,：利用字体设置标志，设置字体的大小、颜色及字体的属性，完成字体设置的,HTML,网页的制作。,实例,2.,字符修饰标记,实例说明,：本实例介绍字符修饰标记的使用方法，效果如图,1-13,。,实例分析,：利用字符修饰标记，,、,，完成字符修饰,HTML,网页的制作,。,实例,3,：表格标记,实例说明,：本实例介绍表格标记的使用方法，效果如图,1-14,。,实例分析,：利用表格标记，,元素用于定义一个表格，每一个表格只有一对,。,用来定义表格单元，一张网页可以包含多个表格,单元。,用来定义表格的行，,用来定义表格的头。,网页设计与制作教程,网页设计与制作,教材,配套电子教案,2007.6,2.1,Dreamweaver 8.0,界面介绍,2.2,Dreamweaver 8.0,常用工具,2.3,Dreamweaver8.0,的功能简介,2.4,使用,Dreamweaver 8.0,处理图片,2.5,在,Dreamweaver 8.0,中规划站点,2.6,本地站点的搭建与管理,2.7,实践技能训练,第二章,Dreamweaver 8.0,入门,2.1.1 Dreamweaver 8.0,界面介绍,在首次启动,Dreamweaver8,时会出现如图,2-1,的一个界面,这是一个,“,工作区设置,”,对话框，在对话框左侧是,Dreamweaver8,的设计视图，右侧是,Dreamweave 8,的代码视图。,Dreamweaver8,设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局,。,2.1 Dreamweaver 8.0,界面介绍,2.1.1 Dreamweaver 8.0,界面介绍,Dreamweaver 8.0,标准工作界面大致可以分为以下几个区域,:,标题栏,:,菜单栏：,文档工具栏：,“,插入,”,栏：,文档窗口：,属性栏：,状态栏：,浮动面板组：,2.1 Dreamweaver 8.0,界面介绍,2.2.1,菜单栏工具,文件：用来管理文件。插入：用来插入各种元素,.,修改：具有对页面元素修改的功能。文本：用来对文本操作。命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。,2.2 Dreamweaver 8.0,常用工具,2.2.2,文档工具栏,“,文档,”,工具栏包含各种按钮，它们提供各种,“,文档,”,窗口视图（如,“,设计,”,视图和,“,代码,”,视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。界面如图,2-4,所示。,2.2 Dreamweaver 8.0,常用工具,2.2.3,“,插入,”,栏,插入面板集成了所有可以在网页应用的对象包括,“,插入,”,菜单中的选项。有常用、布局、表单、文本、,HTML,、应用程序、,Flash,元素和收藏夹共,8,个二级菜单共,167,个按钮。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、,Flash,和,ActiveX,等网页元素。面板的界面如图,2-5,所示。,2.2 Dreamweaver 8.0,常用工具,2.2.4,文档窗口,“,文档,”,窗口显示当前文档。可以选择下列任一视图：,“,设计,”,视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，,Dreamweaver 8.0,显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。,“,代码,”,视图是一个用于编写和编辑,HTML,、,JavaScript,、服务器语言代码以及任何其他类型代码的手工编码环境。,“,代码和设计,”,视图使您可以在单个窗口中同时看到同一文档的,“,代码,”,视图和,“,设计,”,视图。,2.2 Dreamweaver 8.0,常用工具,