资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,同城旅游界面设计,项 目 一,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解,HTML5,的文档结构、新增标签,了解,CSS,样式规则,掌握,CSS3,选择器,学习,目标,通过实现同程旅游界面，学习,HTML5,与,CSS3,相关知识，了解,HTML5,与,CSS3,发展历史、基础标签和自适应网站标签的使用,04,了解自适应网站的概念,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,随着科技的发展，网络在人们的生活中占着主导地位，而旅游作为人们缓解压力的方式之一，旅游网站也慢慢的走进了我们的生活。本次任务主要是实现同程旅游的界面设计。,功能描述,情境入,01,使用响应式布局技术来设计同城旅游界面,01,02,03,04,头部包括同城旅游的,logo,主体包括各种,图片链接,底部包括本站点的版权信息,基本框架,系统环境,Windows 7系统及以上系统,软件环境,服务器,浏览器,SublimeText,Tomcat 7.0,电脑端：火狐浏览器,谷歌浏览器,手机端：Webkit内核浏览器,Android手机内置,浏览器,开发环境,04,任务技能,任务技能,HTML5概述,HTML5基础,网页编辑器及环境,CSS3初体验,CSS样式表,CSS选择器,任务技能,建设制造强国,1,2,HTML5,万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（,HTML,）的第五次重大修改（,W3CRecommendation,）。,2014,年,10,月,29,日，万维网联盟宣布，经过接近,8,年的艰苦努力，标准规范终于制定完成。,（,1,）快速迭代,（,2,）减低成本,（,3,）导流入口多,（,4,）分发效率高,HTML5,概述,HTML5,的发展,HTML5,的优点,HTML5,文档的基本结构,1,HTML5,语法,2,HTML5,新增标签,3,（1）用于向浏览器说明当前文档使用哪种HTML标签。,（2）和分别表示文档的开始和结束，用于告知浏览器其自身是一个HTML文档。,（3）为头部标签，用于定义HTML文档的头部信息，紧跟在标签后，里面包括的内容有、和等。,（4）为主体标签，用于定义HTML文档所要显示的内容，在浏览器中所看到的图片，音频，视频，文本等都位于内。该标签中的内容是展示给用户看的。,HTML5为了更大兼容各浏览器，在设计和语法方面发生了一些变化，语法变化的主要内容如下：,标签不在区分大小写,元素可以省略结束标签,允许省略属性的属性值,允许属性值不使用引号,HTML5,基础,HTML,5,和,HTML,相比，增加了结构标签，语义标签、特殊功能标签以及,audio,和,video,标签等。其中新增标签如表,标签,描述,用于,描述页面上,一处,完整,的,文章,用于,定义导航条，包括主导航条、页面导航、底部导航等,aside,用于,定于当前页面的,附属,信息，内容和,article,内容相关,hgroup,用于对网页或区段（,section,）的标题进行组合,用于对元素进行组合,header,用于,定义文档的页眉（介绍信息）,footer,用于,定义,section,或,document,的页脚,网页,编辑器,1,自适应,网页设计,2,手机端,访问网页环境部署,3,随着编写网页的语言在不断的更新，网页编辑器也在不断的开发。其中几款为大家所熟知的网页编辑器有,Notepad+,、,Dreamweaver,、,Sublime Text,随着智能手机的普及，设计的界面也需在手机端显示，为了能够在手机端正常显示，我们需要使网页宽度自动调整。,（1）在网页代码的头部，加入一行viewport元标签。,（2）不使用绝对宽度,（3）Media Query模块,，,自动探测屏幕宽度,（4）media,，,根据不同的屏幕分辨率，选择不同的,CSS,规则。,在,Sublime Text,制作完之后，点击浏览器就能出现效果，想要手机访问，我们不仅需要在头部添加响应式布局所对应代码，还需配置服务器的环境才可以在手机上访问,。,（1）下载tomcat软件，网址为tomcat.apache.org/download-70.cgi,（2）配置tomcat环境,（,3,）启动,Tomcat,软件,网页编辑器及环境,建设制造强国,1,2,CSS3,（,Cascading Style Sheet,，层叠样式表）是一种不需要编译、可直接由浏览器执行的标记性语言，用于控制页面的布局、文字的大小和颜色、图片位置、列表、表单等样式。,CSS3,的产生大大简化了编程模型,CSS3,主要是给文字、图片设置样式和布局，,CSS3,的标准格式为：,选择器,属性,1:,属性值,1,；属性,2:,属性值,2,CSS3,初体验,CSS3,概述,CSS3,样式规则,建设制造强国,1,2,CSS3,样式可以写在,HTML,标签内，用,style,属性表示，这个方法简便快捷,，,但是具有局限性，无法通用，该属性的语法格式为：,定义内部样式表即,CSS3,样式表写在,HTML,文档内，我们可以对整个,或者整个,设置样式，也可以对单个标签设置样式。,CSS3,样式表,定义标记的,style,属性,定义内部样式,建设制造强国,3,4,嵌入外部样式表就是在,HTML,代码中直接导入样式表的方法。基本语法,import url(,外部样式表的文件名称,);,链接外部样式表就是把外部的,CSS,文件链接到,HTML,中，基本语法为：,CSS3,样式表,嵌入外部样式表,链接外部样式表,类选择器根据类名来选择前面以“.”来标志,类选择器,标签选择器,ID,选择器,后代选择器,一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签，采用相应的CSS样式。,ID,选择器前面以,”#”,号来标志，根据元素,ID,来选择元素，具有唯一性，这意味着同一,id,在同一文档页面中只能出现一次，,ID,属性不允许有以空格分隔的词列表,后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。,CSS,选择器,子选择器,子代选择器与后代选择器的区别在于，子选择器仅是指它的直接后代。而后代选择器是作用于所有子后代元素。子选择器是通过,“”,进行选择,伪类选择器,有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候就需要用到伪类了。,05,任务实施,输入标题,输入标题,输入标题,第一步：在里面添加标签，使网页适应手机屏幕宽度。,第二步：,头部为同程旅游的,logo,，用,标签表示,第三步：,主体部分包括各种图片的超链接，需要用到列表样式,标签,第四步：,尾部主要为本站点的版权信息，版权信息的样式为文字居中，内间距为10px,点击输入说明文字,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务拓展,任务描述,通过本项目的学习,，对,HTML5,的发展、优势、文档结构具有初步了解，对,HTML5,新增的标签及属性有了初步认识，同时也掌握了,CSS3,选择器和自适应网站的相关概念。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,百度导航界面设计,项 目 二,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,掌握,HTML5,中常用的文本标签,掌握,CSS3,文本属性,掌握,CSS,字体属性,学习,目标,通过实现百度导航界面，学习,HTML5,与,CSS3,相关的文本标签、字体颜色以及弹性布局的使用。,04,了解流式布局和弹性布局,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境入,01,情境导入,百度导航是网络时代最受欢迎的导航之一，百度导航上的功能能够帮助人们解决所遇到的困难，同时百度导航除了搜索之外，还提供一系列的链接，为我们快速、准确的提供信息。本次任务主要是实现百度导航界面的设计。,功能描述,头部包括百度导航的,logo,01,02,03,主体包括搜索表单、本站点导航,等,底部包括本站点的版权信息,基本框架,系统环境,Windows 7系统及以上系统,软件环境,服务器,浏览器,SublimeText,Tomcat 7.0,电脑端：火狐浏览器,谷歌浏览器,手机端：Webkit内核浏览器,Android手机内置,浏览器,开发环境,04,任务技能,任务技能,HTML5文本标签,CSS,文本,属性,CSS,字体,属性,CSS导航栏,固定布局和流动布局的介绍,任务技能,1,段落标签,2,标题一共有,6,级，分别用,h1-h6,表示，其中标题最大的为,h1,，依次递减，,h6,最小。标题文本默认是全部加粗,是段落标签，主要功能是定义网页中的文本内容，段落标签可以使文本段落上下边距加大,HTML5文本标签,标题标签,3,标签与标签,4,标签主要用于换行，使用该标签只能输入空行，不能分割段落。该标签是一个单标签，不能成对出现，没有结束符号,标签主要用于软换行，,在文本中添加该标签时，当文本内容（中英文部分）在一行放不下时自动换行到下一行,标签是用户可以创建一个可折叠的控件，只显示想要的标题和文字，隐藏一些对标题或者文字描述的信息。,标签一般与,标签配合使用，显示的内容一般为,标签的内容，如果点击了,标签，则会显示出,标签中的内容,HTML5文本标签,标签与 ,标签,字体类型,1,字体风格,2,字体变形,3,在CSS中，有两种不同类型的字体系列：,通用字体类型：拥有相似外观的字体系统组合（例如“Serif”或“Monospace”）。,特定字体类型：具体的字体系列（例如“Times”或“Courier”）。,文本字体的设置用,font-style,属性，该属性有三个取值：,normal,（文本正常显示）、,italic,（文本斜体显示）、,oblique,（对于没有设计过斜体样式的文字强行用代码使其倾斜）,小型大写字母使用,font-variant,属性设置，小型大写字母即字母都是大写字母，但字体尺寸会比大写字母小,CSS字体属性,4,字体大小,5,文本的粗细程度使用,font-weight,属性设置，该属性功能为字体设置一个加粗程度，用数字或,normal,、,bold,、,bolder,设置，一般设置字体粗度的值为,100-900,，数字越大，字体越粗，在大多数浏览器中数字,400,相当于所写的,normal,，,700,相当于,bold,文本中字体的大小一般用,font-size,属性设置，可以用绝对值、相对值或,px,、,pt,、,em,来表示,CSS字体属性,字体加粗,文本对齐属性,1,文本水平对其,2,文本垂直对其,3,text-align,用来设定文本的对齐方式。有以下四种设置文本对齐的方式：left(居左，缺省值)，right(居右)，center(居中)，justify(两端对齐)。,文本水平对齐用,text-align,属性设置，该属性根据指定行与某一个点对齐进行设置块级元素文本的水平对齐方式,文本垂直对齐用,vertical-align,属性设置，在该属性中值可以是负数或者百分比的形式。在表格中，通常用这个属性来设置单元格内容的对齐方式,CSS文本属性,文本修饰属性,4,文本缩进属性,5,文本字符转换,6,设置文本划线用,text-decoration,属性，有四种属性值,none(,无，缺省值,),，,underline(,下划线,),，,overline(,上划线,),，,line-through(,当中划线,),设置文本缩进采用,text-indent,属性，有以下三种设置方式,length,长度，绝对单位,(cm,mm,in,pt,pc),、相对单位,(em,ex,px),或者,percentage(,百分比，相当于父对象宽度的百分比,),文本的大小写用,text-transform,属性,设置，有四种取值：,none,（默认值）、,uppercase,（大写）、,lowercase,（小写）和,capitalize,（首字母大写）。默认值,none,对文本不做任何改动，将使用原文档中的原有大小写,CSS文本属性,1,CSS导航栏分为垂直导航栏和水平导航栏，用和元素来设置,CSS导航栏,CSS导航栏,1,流体布局,2,在制作界面时自己设置的一个宽度（固定值）叫做固定宽度布局，比如说,980px,。使用这种布局通常需要设置一个整个的,DIV,布局，通常里面各个模块的宽度也是固定的，不会根据整个界面的变换而变换，所以说不管是手机端还是在,PC,端，访问的界面的宽度都是一样的，所显示的信息也是不变的,流动布局在设计页面时宽度和高度不再是固定值，而是采用百分比来设置的。现如今主流的网页都是响应式布局网页，在设计网页时采用的都是百分比设置网页的宽度。流体布局页面对用户更友好，因为它能自适应用户的设置。页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。,固定布局和流动布局,固定布局,05,任务实施,输入标题,输入标题,第一步：头部制作，把新浪导航页标题和图片在一行现实，调整图片的大小，设置一个下边框，带边框阴影。,第二步：主体热点网站链接的制作，采用无序列表和float属性来实现。,第三步：主体分类导航链接的制作，取消无序列表默认的无序符号，用float属性设置导航栏左浮动，设置无序列表中文字的大小，颜色和边框,第四步：底部版权信息制作，版权信息内容为Copyright 2016，该内容为一个段落，使用段落标签。,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务拓展,任务描述,本,项目,通过,对新闻网站导航网页和文本新闻网页设计的探析和练习，重点熟悉,HTML5,中常用的文本标签、,CSS,文本属性、字体属性、颜色值及颜色表示方法、,CSS,链接属性等，学会了网页元素的水平对齐、,CSS,导航栏的设计，学会了新闻网页和导航网页的设计方法。了解流式布局和弹性布局的优点和缺点，了解,CSS,框架的原理，为以后我们制作响应式网站打好基础,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,去哪儿旅游主界面设计,项 目 三,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,掌握HTML5图像标签的使用,掌握CSS3页面背景图像的设置,掌握CSS3新增边框属性,学习,目标,通过实现去哪儿旅游主界面，学习,HTML5,图像相关标签以及,CSS3,图像相关属性，了解和掌握,HTML5,和,CSS3,图像标签在实战中的应用,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,在这个信息化的时代，人们现在更多的是利用图片来表达信息，那么在网页编辑时图片的美化和布局是非常重要的，我们需要在表达自己想要表达的信息的同时还要考虑界面的美观，能够让用户在了解信息的同时还要满足用户的视觉享受。本次任务主要是实现去哪儿旅游主界面设计,。,功能描述,头部包括去哪儿旅游网站的,logo,、文本搜索框,等,01,02,03,主体包括推荐旅游城市的图片介绍,底部包括网站的超链接和站点的版权信息,基本框架,系统环境,Windows 7系统及以上系统,软件环境,服务器,浏览器,SublimeText,Tomcat 7.0,电脑端：火狐浏览器,谷歌浏览器,手机端：Webkit内核浏览器,Android手机内置,浏览器,开发环境,04,任务技能,任务技能,网页中图片格式,HTML5图像标签,背景属性,盒子模型,CSS3边框属性,HTML5图像过渡和变形,任务技能,1,在网页中添加图片时，图片的格式与代码中图片的格式必须一致，所以我们需要对图片的格式有一定的了解。在网页中主要使用以下几种图片格式：,JPG,、,PNG,、,GIF,、,BMP,、,PCX,、,TIFF,。其中使用最广泛的图片格式为：,JPG,、,PNG,、,GIF,网页中图片格式,格式,标签,1,标签,2,标签,3,是添加图片的标签，在,HTML5,中添加图片的基本格式为：,。,标签可以成对出现也可以写成,，在网页编写中,标签主要用于添加网站,logo,和添加网站信息介绍的图片,标签是,HTML 5,中的新标签。,标签代表一段独立的流内容，主要包括图像、文字、代码等。该标签添加标题时需要,标签，所有主流浏览器都支持,标签,定义图像映射内部的区域通常使用,标签，,area,元素始终嵌套在,标签内部。该标签是新增标签，属性有,rel,、,media,、,hreflang,。其中,rel,是规定当前文档与目标,URL,之间的关系，,media,是规定目标,URL,是为何种媒介,/,设备优化的，,hreflang,是规定目标,URL,的语言,HTML5图像标签,1,margin,属性,2,把,HTML,页面中的元素看作是一个矩形的盒子叫做盒子模型。盒子模型所具备的四个属性为：内容、填充、边框、边界。,CSS,盒子模型就是在网页设计中经常用到的,CSS,技术所使用的一种思维模型。盒子模型的四个属性分别是：,margin,、,border,、,padding,、,content,在CSS中通过margin属性设置元素边框与相邻元素之间的距离。,盒子模型,盒子,模型概念,border,是为图像添加边框的属性，,border,的属性值有三种，分别是：边框的粗细程度（,2px,）、边框的样式（,solid,）、边框的颜色（,#000,）,padding,是设置边框和内部元素之间的距离的属性,4,3,border,属性,padding,属性,属性,描述,margin-top,上外边距,margin-right,右外边距,magin-bottom,下外边距,margin-left,左外边距,margin,上外边距,右外边距,下边距,左边距,属性,描述,border-width,用来设置边框粗细主要参考值有,thin,定义细边框，,medium,定义中等边框,border-style,用来设置元素边框样式，主要参考值有,none,定义无边框，,solid,定义实线,border-color,用来设置边框的颜色,属性,描述,padding-top,上内边距,padding-right,右内边距,padding-bottom,下内边距,padding-left,左内边距,padding,上内边距,右内边距,下内距,左内距,border-image,属性,1,border-radius,属性,2,box-shadow,属性,3,border-image,是使用图像作为标签的边框的属性。但是,border-collapse,属性不能跟,border-image,属性同时使用,border-radius,是实现圆角边框的属性,box-shadow,是给边框添加阴影效果的属性，,box-shadow,的属性值包括：阴影宽度、阴影颜色等,CSS3边框属性,值,描述,border-image-source,表示用在边框的图片的路径,border-image-slice,表示图片边框向内偏移,border-image-width,表示图片边框的宽度,border-image-outset,表示边框图像区域超出边框的量,值,描述,length,定义圆角的形状,%,以百分比定义圆角的形状,值,描述,h-shadow,必需填写。表示水平阴影的位置。允许负值,v-shadow,必需填写。表示垂直阴影的位置。允许负值,blur,可选。表示模糊距离,spread,可选。表示阴影的尺寸,color,可选。表示阴影的颜色。请参阅,CSS,颜色值,inset,可选。表示将外部阴影,(outset),改为内部阴影,CSS,背景属性是,CSS3,中一个属性，通常用,background,来表示，主要是用来设置网页的背景，例如：背景颜色、背景图片等,CSS背景属性,background-,color属性,background-,image属性,background-,repeat属性,设置背景颜色通常使用,background-color,属性，该属性有三种表示方式：颜色名、,RGB,值、十六进制数。最常用的表示方式为十六进制数,在网页添加背景图片通常使用,background-image,属性，在,HTML5,中添加背景图片的代码为：,而在,CSS3,中添加背景图片为：,bodybackground-image:url(,图片名,.jpg);,设置图片平铺方向通常使用,background-repeat,属性，该属性必须在使用背景图片（,background-image,）属性的基础上使用，不可以单独使用,背景属性,background-position属性,背景定位通常使用,background-position,属性，该属性的值有三种方式,background-position,属性的默认设置的值是,top left,。,background-attachment属性,定义背景图片随滚动轴的移动方式通常使用,background-attachment,属性，在没有对,background-attachment,属性进行设置之前，,background-attachment,的默认属性值为,scroll,1,2,transition,是实现背景图像过渡的效果的属性，是,HTML5,增加属性,transform,是实现图形变形的属性,HTML5图像过渡和变形,transition属性,transform属性,值,描述,property,表示设置过渡效果的,CSS,属性的名称,transition-duration,表示完成过渡效果需要多少秒或毫秒,transition-timing-function,表示速度效果的速度曲线,transition-delay,表示过渡效果何时开始,值,描述,none,表示不进行转换,matrix(n,n,n,n,n,n),表示,2D,转换，使用六个值的矩阵,matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n),表示,3D,转换，使用,16,个值的,4x4,矩阵,translate(x,y),表示,2D,转换,translate3d(x,y,z),表示,3D,转换,scale(x,y),表示,2D,缩放转换,scale3d(x,y,z),表示转换，只是用,X,轴的值,05,任务实施,第一步：,头部样式制作分为三部分：网站,logo,、搜索框、搜索按钮，其中网站,logo,是使用的图片标签，搜索框和搜索按钮是表单标签,第三步：,主体部分主要包括导航栏和景点推荐部分,第四步：,底部信息样式设置，版权信息内容为,Copyright 2016,，该内容为一个段落，使用段落标签,任务实施,06,任务总结,任务技能,任务实施,任务拓展,任务描述,本,项目,通过,去哪儿,网旅游网站旅游目的地推荐网页的训练，熟悉了,HTML5,中的图像标签、,CSS,的背景设置、图像的设置以及,CSS3.0,中新增关于图片的便签的使用，学会在网页中合理地插入图像和应用图片设计景点推荐网页的方法,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,衣世界旗舰店主界面设计,项 目 四,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,掌握列表标签的属性和样式,掌握表格的创建和属性,掌握CSS3新增属性,学习,目标,通过实现衣世界旗舰店主界面，学习列表标签的使用和表格的创建等知识。,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,随着时代的发展，购物网站越来越多，已经成为我们生活不可或缺的一部分。而在编写购物网站的界面时，通常使用列表标签，我们在编写导航栏、图片排版、商品类型的排版中都需要用到列表标签。本次任务主要是实现衣世界旗舰店主界面设计。,功能描述,头部包括,衣世界的,logo,、商家信息,等,01,02,03,主体包括,商品的图片、商品的介绍,底部包括本站点的版权信息,基本框架,系统环境,Windows 7系统及以上系统,软件环境,服务器,浏览器,SublimeText,Tomcat 7.0,电脑端：火狐浏览器,谷歌浏览器,手机端：Webkit内核浏览器,Android手机内置,浏览器,开发环境,04,任务技能,任务技能,列表的作用,HTML5文本列表标签,CSS列表标签属性,HTML5创建表格,CSS定位,任务技能,建设制造强国,列表标签是,HTML,语言中不可或缺的标签，列表标签在网页布局时起到了关键的作用，在美化页面时，用,CSS,样式对列表进行修饰可以使页面的效果达到我们想要的效果,列表的作用,无序列表,1,有序列表,2,定义列表,3,无序列表类似于,Word,中的项目符号，无序列表项目排列没有顺序，以符号作为子项的标识，使用一组,标签，该标签中包含多组,元素，其中每组均为一个列表,有序列表用,标签表示，必须成对出现，列表内容用,标签表示，内容前面的符号一般有：字母、数字和罗马数字等,定义列表由自定义列表和自定义列表项组成，自定义列表以,标签（,definition lists,）开始，每个自定义列表项以,（,definition title,）开始，每个自定义列表项的定义以,（,definition description,）开始,HTML5文本列表,list-style-image,1,list-style,-position,2,list-style,-type,3,list-style-image,是定义列表内容前显示的图片的属性,，,将图像设置为列表项标志,list-style-position,是定义列表项的位置的属性，其属性值为：,outside,、,inside,list-style-type为列表显示类型，有9种常见属性值。,CSS列表标签属性,值,描述,disc,默认值。实心圆,circle,空心圆,square,实心方块,decimal,阿拉伯数字,lower-roman,小写罗马数字,表格的,基本结构,1,定义表,格的表头,单元格,2,合并,单元格,3,在编写页面时，表格标签是非常重要的标签，在美化界面是经常用表格标签来对文字和图片进行排版。在,HTML,中用,标签表示表格，表格标签必须成对出现，,是表格的行标签，,是表格的单元格标签，表示表格的一行有多少个单元格和每个单元格的内容,表格中常见的表头单元格分为垂直和水平两种。,在,HTML5,中合并单元格的两种方式为：上下合并单元格、左右合并单元格。合并单元格的属性值为,colspan,、,rowpan,HTML5创建表格,1,2,relative属性为相对定位；脱离文档流的布局，但还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。,absolute属性用于绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为body文档本身。,CSS定位,relative属性,absolute属性,05,任务实施,输入标题,输入标题,输入标题,第一步：,衣世界旗舰店主界面的头部包括旗舰店的,logo,和店铺标题两部分，其中店铺的,logo,是作为背景图片添加到界面中,第二步：,界面的主体包括：商品推荐标题、商品图片和介绍,第三步：,添加网站信息,点击输入说明文字,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务拓展,任务描述,通过本,项目,的学习，掌握HTML5列表标签、CSS列表属性、表格属性和定位属性等，学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息，学会了应用列表、表格以及CSS定位设计商品信息展示网页的方法。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,携程旅游,用户注册界面设计,项 目 五,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解表单的概念,了解表单元素的类型和属性,掌握,CSS3,设置表单的外观,学习目标,通过实现携程旅游用户注册界面，学习表单的类型及相关属性，以及使用,CSS3,改变表单外观的技能,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,随着网络的发展浏览网站已经成为人们生活中必不可少的一部分，然而当我们进入一个新的网站的时候通常需要先注册一个账号然后再登录账号。我们所见到的登录、注册页面通常是使用,HTML,中表单部分的知识来编写出来的，本次任务主要是实现携程旅游用户注册界面设计。,功能描述,头部包括携程旅游的,logo,01,02,03,主体包括用户名、手机号,等,底部包括,网站信息,基本框架,系统环境,Windows 7系统及以上系统,软件环境,服务器,浏览器,SublimeText,Tomcat 7.0,电脑端：火狐浏览器,谷歌浏览器,手机端：Webkit内核浏览器,Android手机内置,浏览器,开发环境,04,任务技能,任务,技能,表单的概述,表单基本元素的使用,HTML5,新增,input,属性,任务技能,1,表单的语法和属性,2,表单中的按钮标签主要是实现用户信息储存的功能，当用户点击按钮之后用户的信息会储存到服务器中，然后由服务器将用户信息上传到数据库中或者将相关信息返回到主页面中,表单的标签为,标签，表单的五个常用属性分别为：,name,、,method,、,action,、,enctype,、,target,。代码的基本格式为：,表单的概述,表单的介绍,文本输入框,1,密码输入框,2,文本域,3,标签是文本输入框的标签，文本输入框允许用户输入和编辑文本,密码输入框是一种特殊的文本输入框，主要用于输入保密信息，在浏览器中显示为黑点或者其他符号，增加了文本输入框的安全性,标签是文本域的标签，设置文本域的大小有两种方式：,HTML,格式：,。,CSS,格式：,textareawidth:50px;height:30px;,表单基本元素,属性值,含义,id,标示一个文本框,name,文本框名,value,文本框的初始值,size,文本框的长度,maxlength,在单行文本框中能够输入最大的字符数,单选按钮,4,复选框,5,下拉选择框,6,是单选按钮的,HTML,代码，单选按钮通常在需要用户在两个或多个选项中选择一个时使用,是复选框的,HTML,代码，复选框通常在需要用户在两个或多个选项中选择一个或多个时使用,下拉列表框包括两个控件：列表控件、选项控件，,HTML,标签分别为：,、,表单基本元素,属性值,含义,name,单选按钮组的名称，同一组按钮有相同名称,value,单选按钮进行数据传递时的选项值,checked,默认选择项,属性值,含义,name,复选框组的名称，同一组按钮都必须用同一个名称,value,复选框进行数据传递时的选项值,checked,默认选择项,7,提交按钮和重置按钮,8,在,HTML,中普通按钮一般用代码：,表示,在,HTML,中提交按钮一般用代码,表示，重置按钮一般用代码,表示，提交按钮的功能是提交用户信息到服务器中，重置按钮的功能是清空用户所输入的信息,普通按钮,表单基本元素,属性值,事件,name,普通按钮的名称,value,按钮上显示的文字,onmousedown,用户按下鼠标链时触发的事件,onmouseup,鼠标链抬起时触发的事件,onclick,点击按钮事件（包括鼠标链按下和抬起两个动作）,URL,1,E-mail,2,number,3,URL,属性的,HTML,代码为,，添加,URL,属性的主要作用是用户在输入信息时，输入的内容必须是一个,URL,地址才可以提交成功，否则无法提交,Email,属性的,HTML,代码为,。,Email,属性的主要作用是用户输入邮箱时，,判断,所输入的邮箱,是否,符合邮箱的格式,number,属性的,HTML,代码为：,。用户可以直接输入数字或者通过单击微调框中的向上或向下按钮选择数字,HTML5,新增,input,range,4,date,5,placeholder,6,range,属性的,HTML,代码为,，用户可以使用,max,、,min,和,step,属性控制控件的范围，其中,min,和,max,分别为控制控件的最小值和最大值，,step,为每单击一次跳转的步数,在,HTML5,中日期和时间的属性包括：,date,、,datetime,、,datetime-local,、,month,、,week,和,time,placeholder,属性描述输入域所期待的值。以下,标签中可以使用,placeholder,属性：,text,、,search,、,url,、,telephone,、,email,以及,password,。,placeholder,属性的,HTML,代码为：,HTML5,新增,input,05,任务实施,输入标题,输入标题,输入标题,第一步：,头部为标题部分，用,H1,标签，设置标题为居中显示,第二步：,主体部分为表单部分，用到的表单类型有,text,，,password,，,checkbox,等,第三步：底部为版权信息，,版权信息内容为,Copyright 2016,，该内容为一个段落，使用段落标签,点击输入说明文字,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务拓展,任务描述,通过本,项目,的学习，,了解表单的作用以及使用方法，熟悉了,HTML5,中的表单及控件标签，学会了应用表单及控件设计注册登录与留言网页的方法,。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
