网页制作.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/24,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,#,本,PPT,由曾乐设计，使用需征得许可。,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/24,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,#,本,PPT,由曾乐设计，使用需征得许可。,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,本,PPT,由曾乐设计，使用需征得许可。,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/24,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,#,本,PPT,由曾乐设计，使用需征得许可。,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/11/24,#,任务1-1 制作“蓝梦音乐网”欢迎页面,任务描述,我们欣赏下“蓝梦音乐网”的首页。,大家觉得这张网页怎么样？,欣赏完“蓝梦音乐网”的首页，大家很想把它制作出来，但又觉得无从下手。,万丈高楼平地起，要实现“蓝梦音乐网”首页这么复杂的网页，需要夯实专业基础，不断地积累知识。不断地积累知识。为实现自己的目标，我们就从制作最简单的,“欢迎进入蓝梦音乐网”,网页开始吧,。,引导训练,1-1,任务分析,什么是网页？网页有什么特殊性？,网页是如何呈现出来的？,网页是如何做出来的？,提问,任务目标,3,了解网页、网站的概念,掌握,了解,熟悉,掌握,了解,熟悉,5,掌握网页的文档结构,熟悉,HBuilder,工具制作网页,4,2,了解万维网的概念,1,了解互联网的概念,任务实施,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,网页,是由文字、图片、动画、声音等多种媒体信息以及超链接构成的超文本。网页文件是由,超文本标记语言,（,HyperText Markup Language,，简称,HTML,）编写的，能够在万维网上（,World Wide Web,简称,WWW,或,3W,）传输并能被浏览器解析和显示的文本文件。,网页,在一个文档内可以加入,图片、声音、动画、影视,等内容，这些内容可以统称为,资源,，并且它可以从,一个文件跳转到另一个文件,，与世界各地主机的文件链接。,任务实施,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,超文本,任务实施,Hyper,（超或超级）,T,M,L,Text,（文本）,Markup,（标记）,Language,（语言）,H,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,超文本标记语言,（,HTML,）没有严格的计算机语言的语法结构，是由标记符组成的代码集合，标记符（又称标签）用“,”括起来，其格式为：,任务实施,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,网站,是一个沟通工具，它由众多不同内容的网页构成，人们可以利用它来发布自己想要公开的资讯或者利用它来提供相关的网络服务。,网站,任务实施,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,万维网,也称环球信息网，它建立在客户机,/,服务器模型之上，以超文本标记语言与超文本传输协议（,HyperText Transfer Protocol,，简称,HTTP,）为基础，能够提供面向因特网（,Internet,）服务的、一致的用户界面的信息浏览系统。,万维网,因特网,是一组全球信息资源的总汇。它由许多小的网络（子网）互联而形成的一个逻辑网，每个子网中包含相互连接的,若干台计算机（主机）。它是一个信息资源和资源共享的集合。它提供的主要服务有万维网（,WWW,）、文件传输（,FTP,）、电子邮件（,E-mail,）、远程登录（,Telnet,）等等。,任务实施,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,因特网,任务实施,1.,认识网页,（,1,）,添加文本字段,（,2,）,添加密码字段,2.,制作网页,”蓝梦音乐网”首页是利用,HTML,语言制作出来的,该文件,是一个超文本，它是由文字、图片、动画等多种媒体信息以及超链接构成的,网页文件由万维网传输并通过浏览器解析后呈现在浏览器上,。,“蓝梦音乐网”是一个网站,蓝梦音乐网,首页,排行榜,歌手,歌单,精选,登录,注册,音乐节,任务实施,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,HTML,是制作网页的基本语言,HTML,指令代码没有严格的计算机语言的语法结构,HTML,标记符格式为：,HTML,标记符（也称标签）用“,”括起来。,标签和属性都不区分大小写。,HTML,文件的扩展名为“,.htm,”或“,.html,”,HTML,文档结构由两部分组成，分别为头部与主体部分,任务实施,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,头部部分,：,元标签（,）,:,用于描述,HTML,网页文档的属性。,标题标签（,）：用于设置网页的标题,脚本（,）：用于设置文档使用的脚本,样式（,）：用于定义文档使用的样式,主体部分,包含了,HTML,中大部分标签,1,）使用,记事本中编写代码,欢迎进入蓝梦音乐网,欢迎进入蓝梦音乐网！,任务实施,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,2,）使用,Hbuilder,编写代码,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,任务实施,HBuilder,是由国内,Dcloud,（数字天堂）专为前端打造的开发工具，具有最全的语法库和浏览器兼容性，能够方便的制作手机,App,。它支持,HTML,、,CSS,、,JavaScript,、,PHP,的快速开发，是一款功能强大、操作方便的工具，深受广大前端开发者的喜爱。,任务实施,创建项目,1）打开HBuilder软件，单击“文件”|“新建”|“项目”菜单，打开“新建项目”对话框，如图所示。,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,任务实施,创建HTML文件,1,）右击“musicProject”项目，弹出菜单对话框，单击“新建”|“目录”菜单，创建“task-1”文件夹，右击“task-1”文件夹，单击“新建”|“html”菜单，打开“新建html”对话框，输入文件名为“welcome.html”。如图所示。,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,任务实施,2）单击“创建”按钮，出现“welcome.hmtl”编辑区域，在和标签内输入对应的文本，输入情况如图所示。,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,任务实施,3）单击“运行”|“运行到浏览器”|“chrome”,就会以谷歌浏览器打开“welcome.html”,展示网页运行效果。运行效果图如图所示,1.,认识网页,（,1,）,认识,HTML,文档结构,（,2,）,编写代码,2.,制作网页,HTML标记符（也称标签）用“”括起来。,标签和属性都不区分大小写。,HTML文件的扩展名为“.htm”或“.html”,HTML文档包含头部和主体两部分。头部部分是指HTML代码结构中代码头部，用标签标识，其包含在HEAD标签内的部分我们叫HTML头部信息。主体部分是指HTML代码结构中代码主体，用标签标识。,任务小结,独立训练,请大家用两种方法制作“时空电音网”欢迎网面。第一种方法用记事本制作，用IE浏览器显示。第二种方法用HBuilder工具制作，用谷歌浏览器显示。,任务描述,Thanks!,任务,2-1,制作“蓝梦音乐网”音乐节页面,内容回顾,HTML,的文档结构由几部分构成？,HBuilder,创建项目包含哪几个主要步骤？,任务描述,音乐节是音乐领域一项重大活动，为了让广大网民了解音乐节，我们需要制作音乐节网页，展示音乐节的相关内容。音乐节网页需要介绍的内容有主要形式、演出形式和一些著名的音乐节,。设计效果图如右图。,引导训练,1-1,任务分析,该网页中的字体有几种表现形式？,除了文本，该网页还包含什么内容？,如何实现首行缩进与分段？,提问,任务目标,1,了解,HTML,中的特殊符号,掌握,了解,熟悉,掌握,了解,熟悉,5,掌握段落标签,熟悉换行标签,3,4,掌握横线标签,6,掌握图片标签,熟悉标题标签,2,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,网页中标题和文章中的标题具有一致性，都是用于概括一篇文章或一个段落,HTML提供了六级标题，分别是、，其中字号最大，字号最小。标题在网页中独占一行，并且以粗体显示。,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,标题设置：,音乐节,主要形式,演出形式,著名音乐节,巴斯音乐节,亚杰创业音乐节,克什克腾草原音乐节,“,恒大星光,”,音乐节,/h3,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,编写代码并运行,任务实施,1.,添加标题,2.,添加段落,4.,添加横线,3.,插入特殊符号,5.,添加图片,6.,添加换行标签,在网页中，要把文章按段落有条理的显示出来，需要使用段落标签,。,使用格式：,文章段落,说明：,align,属性用于设置段落的对齐方式，可以设置为,left,（左对齐）,center,（居中）,right(,右对齐,),。,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,为了添加音乐节网页中关于各标题的描述，我们需要使用,标签,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,编写代码并运行,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,属性,说明,width,用于设置横线的长度，设置长度时既可以用占网页的宽度的百分比，也可以用具体数字来固定横线长度，单位为像素。,size,用于设置横线的粗细，以像素(px)为单位。,align,用于设置段落的对齐方式，可以设置为left（左对齐）,center（居中）,right(右对齐)。,color,属性用于横线的颜色。,在网页中，有时需要用一根横线对网页内容进行分隔，这时候就需要使用标签.,使用格式：,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,为了为了实现“音乐节”内容和和“主要形式”之间的分隔，需要使用横线标签。,编写代码并运行,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,在网页中，一些字符已经被,HTML,使用，如“,”、“,”,”,(,英文双引号,),等等，所以不能在网页代码中直接使用它们。如果我们需要在网页中显示这些特殊符号，就需要使用这些符号的转义码。,常见特殊字符转义码。,特殊字符,转义码,引号（,）,&,空格,元（）,版权（）,注册商标（）,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,段落的首行需要缩进，不能直接在段落首行单击空格键输入“空格”字符，而是需要插入空格（,）这个转义码,编写代码并运行,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,在网页中，为了实现图文并茂，需要使用图片标签。,使用格式如下：,如何添加图片？,img,标签的属性,属性,说明,src,用于设置图片文件的路径，在实际应用中，文件的路径采取相对路径。,height,用于设置图片在网页中的高度，其单位为像素(px),width,用于设置图片在网页中的宽度，其单位为像素(px),alt,用于设置的图片的文字说明。在我们浏览网页时，如果图片因网络原因无法显示，那么在该图片的位置就会显示该图片的文字说明，以便浏览者清楚该图片的用途。,align,用于设置段落的对齐方式，可以设置为left（左对齐）,center（居中）,right(右对齐)。,hspace,用于设置图片与文本间的横向间距，单位是像素(px)。,vspace,用于设置图片与文本间的纵向间距，单位是像素(px)。,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,需要采用图文并茂的方式描述著名的音乐节，需要使用,标签,编写代码并运行,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,不同内容块之间需要使用空行或在一个段落中某两句话之间需要换行，就需要使用换行标签。,该标签是一个单独标签。,任务实施,1.,添加标题,2.,添加段落,3.,添加横线,4.,插入特殊符号,5.,添加图片,6.,添加换行标签,图文出现了错位显示，为解决这个问题，我们使用,标签,编写代码并运行,任务小结,42,网页,常用的,基本,标签包括标题,(-),、段落（,）、横线（,）、图片（,）和换行（,）等等。,在使用标签时，我们需要根据网页效果设置好标签的属性。,灵活运用好标签，能使网页显示画面美观、漂亮。,独立训练,43,电影节是电影领域一项重大活动，为了让广大网民了解电影节，我们需要制作电影节网页，设计该网页的具体要求如下：,1.,使用标签设置不同的文本表现形式,2.,插入图片,3.,实现分段与段落缩进,任务描述,Thanks!,任务,2-2,美化,“蓝梦音乐网”注册页面,内容回顾,标题标签可以分为几级？,段落标签的属性,align,有哪些属性值,？,img,标签有哪些常用属性,？,任务描述,网页最基本的要求是页面美观大方和具有吸引力。为了实现上述要求，我们需要对“蓝梦音乐网”进行美化。,1.,设置一级标题“音乐节”文字的颜色为,blue,；,2.,设置二级标题“主要形式”、“演出形式”和“著名音乐节”文字的颜色为,royalblue,；,3.,把“巴斯音乐节”、“亚杰创业音乐节”等著名音乐节设置为列表标签，颜色设置为,steelblue,，字体为粗体；,4.,在页面上添加音乐播放控件，并能播放名为“,bgmusic.mp3,”的音乐文件；,5.,在页面添加视频播放控件，并播放名为“,yajie.mp4,”的视频文件；,6.,在页面顶部加一移动字幕，并使它从右边移到左边，循环出现。,效果图如右。,引导训练,2-2,任务分析,该网页中出现了哪些新元素？,与之前的网页相比较美观度是否有变化？,提问,任务目标,1,了解,marquee,标签,掌握,了解,熟悉,掌握,了解,熟悉,4,掌握列表标签,5,掌握文本格式化标签,熟悉视频标签,3,熟悉声音标签,2,任务实施,50,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,网页中美化标题可以使用字体标签，该标题能设置文本字体、大小和颜色。,任务实施,51,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,字体标签的使用格式如下：,文字内容,属性,说明,color,用于设置文字内容的颜色，属性值可以是英文颜色单词，如blue（蓝色），也可以是十六进制的数字值，如#FFFFFF（白色）。,size,用于设置文字内容字体的大小。size的设置值为1-7，1为最小字体，7为最大字体。当在网页中出现时，表示比预设的字体大一级。通常预设的字体为3。,face,用于设置文字内容的字体，如“宋体”。设置文字内容的字体时，操作系统要安装该字体，否则浏览器以系统中的默认字体显示。,任务实施,52,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,编写代码并运行,任务实施,53,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,当需要对网页内容按某种逻辑方式进行分组时，需要使用列表标签。,常用的列表标签有三种，分别是：,有序列表,无序列表,自定义列表,任务实施,54,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,什么是有序列表？,有序列表是指各条目之间是有逻辑顺序的,，如“1、2、3、”或“a、b、c、”。,有序类表用来标记，列表中的每一项用来标记。其使用格式如下,：,列表项1,列表项2,任务实施,55,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,编写代码并运行,任务实施,56,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,无序列表是指需列表的各条目之间无顺序关系，使用实心圆、小正方形或空心圆等列举条目,无序列表使用标签来创建，列表中的每一项用来标记。其使用格式如下：,列表项1,列表项2,type,属性：用来设置列表项逻辑顺序的表示方式，共有以下几种方式。,disk,（实心圆）,square,（小正方形）,circle,（空心圆）,什么是无序列表？,任务实施,57,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,编写代码并运行,用无序列表列举著名的音乐节,其中,type,属性设为,disk,。,任务实施,58,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,自定义列表不但可以列表项，而且还能对列表进行简短描述。,自定义列表以标签开始，自定义列表项用引导，自定义列表项的简短描述进用引导。其使用格式如下：,列表项1,列表项描述1,列表项2,列表项描述2,什么是自定义列表,？,任务实施,59,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,自定义列表以标签开始，自定义列表项用引导，自定义列表项的简短描述进用引导。其使用格式如下：,列表项1,列表项描述1,列表项2,列表项描述2,编写代码并运行,任务实施,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,为了使网页丰富多彩，文本显示凸显特色，我们可以使用文本格式化标签。,常用文本格式化标签如下。,标签,描述,定义粗体文本。,定义大号字。,定义突出文字。,定义斜体字。,定义小号字。,定义加重语气。,定义下标字。,定义上标字。,任务实施,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,本文本是粗体,本文本被强化,本文本是大号字,本文本被突出,本文本是斜体,本文本是小号字,本文本包含,下标,本文本包含,上标,任务实施,62,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,对列举的著名的音乐节加粗，则需要使用文本格式化标签中的加粗标签。,编写代码并运行,任务实施,63,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,标签播放音频，该标签是一个HTML5标签，必须要支持HTML5的浏览器才能使用它。,使用格式如下：,属性,值,描述,autoplay,autoplay,如果出现该属性，则音频就绪后马上播放。,controls,controls,如果出现该属性，则向用户显示控件，比如播放按钮。,loop,loop,如果出现该属性，则每当音频播放结束时重新开始播放。,preload,preload,如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用,autoplay,，则忽略该属性。,src,url,要播放的音频的,URL,。,任务实施,64,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,在音乐节网页中，需要在页面上添加音乐播放控件，播放文件名为“,bgmusic.mp3,”，可以使用,标签。,编写代码并运行,任务实施,65,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,属性,值,描述,autoplay,autoplay,如果出现该属性，则视频在就绪后马上播放。,controls,controls,如果出现该属性，则向用户显示控件，比如播放按钮。,height,pixels,设置视频播放器的高度。,loop,loop,如果出现该属性，则当媒介文件完成播放后再次开始播放。,muted,muted,规定视频的音频输出应该被静音。,poster,URL,规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像,preload,preload,如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。,src,url,要播放的视频的 URL。,width,pixels,设置视频播放器的宽度。,标签是一个,HTML5,标签，必须要支持,HTML5,的浏览器才能使用它。,使用格式如下：,任务实施,66,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,在音乐节网页中，需要在在页面添加视频播放控件，播放的文件名为“,yajie.mp4,”，可以使用,标签。,编写代码并运行,任务实施,67,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,Product,标签可以让文字在网页上动态滚动。该标签的格式如下：,属性,说明,direction,用于设置文字的运动方向，可以设置向左（left）和向右（right）运动。,behavior,用于设置文字的运动方式，可以设置为转动（scroll）、运动一遍（slide）和来回交替运动（alternate）。,loop,用于设置循环次数，若未指定则一直循环。,scrollamount,用于设置滚动速度，数字越大，速度越快。,scrolldelay,用于设置文字滚动间隔，单位是毫秒。,任务实施,68,1.,美化标题,3.,添加文本格式化标签,4.,添加声音标签,5.,添加视频标签,6.,添加,marquee,2.,使用列表,1.,有序列表,2.,无序列表,3.,自定义列表,在音乐节网页中，需要在页面顶部加一移动字幕“听蓝梦音乐，放松好心情！”，并使它从右边移到左边，循环出现，可以使用,标签。,编写代码并运行,任务小结,69,通过美化音乐节网页，我们学会了字体（,）标签、文本格式化标签、列表标签、音频标签、视频标签和,marquee,标签的使用。,字体标签能够设置字体、颜色和字体大小。,文本格式化标签能够实现文字加粗、倾斜、加下划线、上升和下沉。,列表包括有序列表、无序列表和自定义列表。,音频标签能实现播放音频文件。,视频标签能实现播放视频文件。,marquee,标签可以让文字在网页上动态滚动。,独立训练,对“时空电影网”电影节页面进行美化。具体要求如下：,1.设置一级标题“电影节”文字的颜色；,2.强化描述电影节中的文本“威尼斯电影节、戛纳电影节、柏林电影节”；,3.设置二级标题“著名电影节”文字的颜色；,4.把各个电影节的的网址设置为斜体；,5.把“戛纳电影节”、“威尼斯电影节”等著名音乐节设置为无序列表标签；,6.在页面上添加音乐播放控件，并能播放名为“bgmusic.mp3”的音乐文件；,7.在页面添加视频播放控件，并播放名为“movieFest.mp4”的视频文件。,任务描述,Thanks!,任务,3-1,制作“蓝梦音乐网”歌手页面,内容回顾,常用的,HTML,标签有哪些？,图象标签有哪些属性？,字体标签有哪些属性？,列表分为几类？如何使用列表标签的属性？,如何使用音频、视屏标签？,如何使用,marquee,标签？,任务描述,歌手栏目是“蓝梦音乐网”六大栏目之一，该网页要求能展示全部歌手的照片和姓名，也能实现按,中国,、欧美和日韩分类展示歌手的照片和姓名。,引导训练,3-1,任务分析,网页内容是如何实现有序组织的？,歌手分类如何实现？,提问,任务目标,1,了解如何使用表格实现,HTML,元素的布局,掌握,了解,熟悉,掌握,了解,熟悉,5,掌握表格标签,熟悉如何实现表格行，列合并,4,任务实施,77,制作歌手网页右侧部分,制作歌手网页左侧部分,歌手页面,是以五列的方式显示歌手的照片和名字。为实现该网页的效果，我们,可以,使用表格有序组织网页中的元素。,任务实施,78,制作歌手网页右侧部分,制作歌手网页左侧部分,表格简介,表格包含表格标题（由,标签定义）,和若干行（由,标签定义），每行被分割为若干单元格（由,或,标签定义,只用于标题行中）。文本、图片、列表、段落、表单、水平线等,HTML,的元素就存放在单元格中。,使用格式：,表格标题,列标题,单元格内容,任务实施,制作歌手网页右侧部分,制作歌手网页左侧部分,表格（table）常用属性,属性,值,描述,align,Left（左）Center（中）Right（右）,设置表格相对周围元素的对齐方式。,bgcolor,rgb(x,x,x)#xxxxxxColorname（颜色名）,设置表格的背景颜色,有三种方式设置表格背景颜色。,border,Pixels（像素）,设置表格边框的宽度。,bordercolor,rgb(x,x,x)#xxxxxxColorname（颜色名）,设置表格边框的颜色，有三种方式设置表格边框的颜色。,cellpadding,pixels（像素）%,设置单元格边沿与其内容之间的空白，既可以设置为像素，也可以设置为百分比。,cellspacing,pixels（像素）%,设置单元格之间的空白，既可以设置为像素，也可以设置为百分比。,width,Pixels（像素）%,规定表格的宽度，既可以设置为像素，也可以设置为百分比。,任务实施,制作歌手网页右侧部分,制作歌手网页左侧部分,如何实现如下表格？,编写代码并运行,任务实施,制作歌手网页右侧部分,制作歌手网页左侧部分,在歌手网页中，我们需要在页面右侧显示歌手的照片和名字，一行显示5个歌手，总共显示3行，照片和名字在单元格中居中显示,需要设置该表,格的哪些属性？,编写代码并运行,任务实施,制作歌手网页右侧部分,制作歌手网页左侧部分,在歌手网页中，网页总体上分为左右两栏，左边是实现对歌手分类，右边是以五列的方式显示歌手的照片和名字。把左边看成表格的1列，则需在原有表格的基础上添加1列，设计成一个3行6列的表格，其中第一列跨3行。,通过设置单元格（）,标签的rowspan属性实现行,合并，通过设置colspan属,性实现列合并,单元格内容,编写代码并运行,任务小结,83,1,.在网页设计中，表格最主要的功能是什么？,2.如何实现行合并，如何实现列合并？,独立训练,84,制作内地电影网页，该网页需要展示最新热播和排行榜，设计该网页的具体要求如下：,1.,使用表格布局该网页；,2.,在单元格中插入图片,；,任务描述,Thanks!,任务,3-2,制作“蓝梦音乐网”注册页面,内容回顾,表格由哪几部分构成，对应的标签命名是什么？,在网页设计中，表格最主要的功能是什么？,如何实现行合并，如何实现列合并？,任务描述,用户注册是“蓝梦音乐网”一个最重要的功能，通过用户注册，用户可以成为该网站的会员，享受会员服务。设计该网页的具体要求如下：,1.,使用表格布局该网页；,2.,在网页的顶部加上该网站的,LOGO,；,3.,使用表单实现用户输入。,引导训练,3-2,任务分析,如何用表格布局？,网页中出现了哪些新元素？,对这个网页整体感觉怎么样？,提问,任务目标,1,了解网页的概念,掌握,了解,熟悉,掌握,了解,熟悉,5,掌握表格标签,6,掌握常见的表单元素,熟悉如何实现表格行，列合并,4,熟悉如何创建表单,3,熟悉使用表格实现,HTML,元素的布局,2,2,3,任务实施,91,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,认识,border,、,cellspacing,、,cellpadding,属性,border,cellspacing,cellpadding,任务实施,92,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,编写代码,编写代码并运行,如何实现该表格？,任务实施,93,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,属性,属性值,说明,align,center,表格在网页中居中显示,width,80%,表格在网页中总是占居,80%,的宽度,border,1,表格的边框宽度为,1,像素,bordercolor,grey,表格的边框颜色为灰色（,grey,）,cellspacing,0,表格的单元格间距为,0,像素,cellpadding,5,表格的单元格填充距离为,5,像素,12,行,*2,列的表格，其中第,1,行、第,2,行和第,12,行应进行列合并,，其中属性设置如下,。,任务实施,94,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,编写代码并运行,任务实施,95,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,表单不是可视化的,HTML,元素，运行代码，页面不会出现新的效果。,使用格式：,表单元素,属,性,说,明,name,设置识别表单的名称，为了防止表单在提交到后台处理程序时出现混乱，需要设置一个与表单功能相符的名称。,method,设置提交表单时所用,HTTP,方法。提交方法有,get,和,post,两种方法。,（,1,）,get,：使用该方法时，表单数据会附加,URL,之后，由客户端直接发送到服务器，所以速度比,post,方法快，但缺点是数据长度不能太长。没有指定,method,时，默认值是,get,。,（,2,）,post,：使用该方法时，表单数据是作为一个数据块与,URL,分开发送的，所以通常没有数据长度上的限制，缺点是速度比,get,慢。,action,设置提交表单的地址。当用户单击表单上的提交按钮后，客户端的数据就会发送到服务器端的地址，由服务器端的处理程序接受数据并进行处理。,任务实施,96,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,编写代码并运行,表单不是可视化的,HTML,元素，所以运行上述代码时，不会出现新的效果。,在用户注册页面中，由于需要的传输的数据比较多，所以使用,post,方法，设置表单的名称为,register,。设置提交表单的地址为“,register.jsp,”,任务实施,97,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选框,钮,（,8,）,添加文本域,（,9,）,添加提交按钮与重置按钮,3.,添加表单元素,我们设置该元素的名称为,username,。,文本字段用于创建单行文本输入框，供用户输入单行文本信息。,使用格式：,input type=”text”name=,“名称”,size=”,长度,”maxlength=”,最大长度,”value=”,默认值,”,任务实施,98,1.,设计用户注册页面表格,2.,添加注册页面表单,（,1,）,添加文本字段,（,2,）,添加密码字段,（,3,）,添加文件域,（,4,）,添加单选按钮,（,5,）,添加,邮件地址,（,6,）,添加,下拉列表,（,7,）,添加,复选