网页设计综合案例篇省名师优质课赛课获奖课件市赛课一等奖课件.ppt

本资料仅供参考，不能作为科学依据。谢谢。本资料仅供参考，不能作为科学依据。谢谢,网页设计综合案例篇,第1页,综合案例篇,网站静态页面前端开发基础,餐饮类网站静态页面设计,第2页,9,.网站静态页面前端开发基础,9,.,1,html基础,9,.,2 css基础,9,.3,javascript脚本基础,9,.4 案例幻灯片效果,第3页,9.1.1 html介绍,9.1 html基础,我们精心制作出一张,psd,效果图，并不是能够被浏览器或者手机展示出来网站。要让浏览器或者手机能够显示网站，必须将效果图转换为浏览器或者手机能够认识语言，这种语言就是,html,语言。,html,英语意思是,Hypertext Marked Language,，即超文本标识语言。为何是超文本呢？其实还能够翻译为超级文本，它意思是能够比我们平时写书信要强很多文本，能够加入图片、声音、动画、影像，还能够从网页中一个链接跳转到另一个页面。这就是为何叫超文本标识语言原因。,第4页,9.1.2 html文档结构,对于从来没有过编程经验同学，学习,html,可能会比较难，因为，它既不像汉语也不像英语，能够直接从左到右读出一个语义出来。当前计算机极难直接了解人类自然语言，所以必须以一个特殊格式来表示网页外观。,这种格式就是,html,文档格式，以下是一个简单,html,页面代码：,第5页,html,文档主要由,3,部分组成：,html,部分、文档头,head,、文档体,body,：,（,2,）文档头,头部以,标签开始，以,标签结束。这部分包含显示在网页导航栏中标题和其它在网页中不显示信息。,标题包含在,和,/title,标签之间，表示这个网页页面标题，以下：,.,第6页,（,3,）主体部分,主体部分以,标签开始，以,标签结束。主体部分包含再网页中显示文本、图像和链接等，以下：,.,第7页,9.1.3 惯用标签,html,语言一些基本语法单位，我们称为标签，也称为,html,标签或者,html,元素。,html,标签能够大写、也能够小写，如标题,和,所表示意思是一样，不过当前,html,规范中，推荐使用小写，这也是一个好书写习惯。,第8页,html,标签有以下一些特点，需要引发我们注意：,（,1,）标签是由尖括号包围，比如,（,2,）标签普通式成对出现，比如,和,需要成对出现，,表示开始，,表示结束。不过也有单独出现标签，如图像标签,就是单独出现，不过需要在反坚括号,(),前加一个斜线（,/,），表示结尾。成对出现标签和单独出现标签有什么区分呢？主要是成对出现标签，在两个标签中间有内容，如,我们,，而单独出现标签是没有内容，如,第9页,标题标签,html,标题是经过,、,、,、,、,、,等标签进行定义，它们表示不一样大小标题文字，和,word,一样，一级标题最大，六级标题最小，以下代码：,下面介绍一些惯用标签：,这是一级标题,这是二级标题,这是三级标题,这是四级标题,这是五级标题,这是六级标题,第10页,标题标签代码在浏览器显示效果也如标题标签一样呈递减方式。,第11页,段落标签,另一个惯用标签是,标签，表示段落，段落就是写文章时候分段。代码以下：,这是第一段落。,这是第二段落。,段落标签代码在浏览器显示效果也会如段落一样行距间隙较大。,链接标签,链接标签用,表示，它用来实现从一个页面跳转到另一个页面功效，普通链接标签下有一条横线，表示链接意思。,下面是三个链接到,BAT,（baidu、阿里巴巴、腾讯）首页,a,标签例子：,第12页,淘宝,腾讯,baidu,链接标签代码在浏览器显示效果会引导、提醒用户点击。,第13页,图像标签,网页中图像是用,标签来表示，,img,标签有,src,属性，表示图像在磁盘或者网络中存放位置。普通来说，我们也需要定义一张图像在网页中大小，使用宽度,(width),和高度,(height),属性来定义图像大小。下面用代码表示一个宽为80像素，高为45像素logo图像，就能在浏览器中显示出来了。,第14页,文本格式化标签,html,定义了很多格式化输出标签，比如斜体字、粗体字、强调字等。,标签表示文字加粗。,标签表示斜体字。,表示强调字，它意思是在一段文字中，,标签修饰字更突出。下面是一些惯用文本格式化标签：,Document,body,background-color:#aa0;,加粗字,斜体字,大号字,强调字,删除字,中国,北京,文字,上标,第15页,对,du,应上面文本格式化标签代码次序，在浏览器显示效果各不相同。,表格标签,表格由,标签来定义。每个表格都有若干行（由,标签定义），每行被分割为若干单元格（由,标签定义）。字母,td,指表格数据（,table data,），即数据单元格内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等正当,html,标签。表格代码以下所表示：,第16页,左面表格标签代码在浏览器显示成了一个消费统计表格,第17页,9.2.1 css介绍,9.2 css基础,我们看到丰富多彩网页，它外观是由什么决定呢？网页外观是由,css,定义。,css,是,Cascading Style Sheet(,级联样式表,),缩写。它是为网页添加布局效果一个样式语言，因为它使用简单方便，凡是编写网页代码，都需要学习它。,css,主要用于定义,html,布局、外观。比如，某个字体颜色、字体大小、内外边距。图像宽度、高度等。下面我们将对,css,进行详细介绍。,第18页,一个,css,语法规则由两部分组成：选择器、一条或者多条样式语句。,selector declaration1;declaration2;.declarationN,selector,是选择器，表示需要改变,html,元素。,declaration,表示样式语句，用来定义一个样式，普通是一个属性和一个值组成。,9.2.1 css介绍,比如设置,h1,字体为深灰色，字号为,16,像素,里,h1,就是选择器（,selected,）,表示选择,h1,标签，对,h1,标签进行外观和布局设置。,第19页,9.2.3 css属性选择器,为了灵活选择,html,中标签，设置标签布局。,css,定义了几个选择器：,id,选择器、类选择器、属性选择器等。,（,1,）,id,选择器,Id,选择器选择特定,idhtml,标签，并为它们指定样式。,id,选择器以“,#”,来表示。如右图：,第20页,（,2,）,css,类选择器,并不是每个,html,标签（如,div,）都需要一个,id,，也能够使用类来定义,html,标签布局和外观。在,css,中，类选择器以一个点号显示，以下：,.red color:#ff0000;,在上面例子中，全部属于,red,类,html,标签字体均设置为红,(#ff0000),。,在下面,html,代码中，,h1,和,p,元素都有,red,类。这意味着二者都将恪守,.red,选择器中规则。,第21页,（,3,）,css,属性选择器,css,属性选择器用来对带有指定属性,html,标签设置样式，当类选择器和,id,选择器使用不太方便时候，能够使用属性选择器。需要注意是，在低版本浏览器上（如,IE6,）是不支持属性选择器，这是因为，这些浏览器已经开发了超出,10,年，,css,一些新特征最近几年才出来。不过不用担心，这些浏览器已经退出了历史舞台，当前极少使用了。,第22页,属性选择器还有一些变种，用来实现更强大属性选择器，见下表：,第23页,下面代码是属性选择器惯用形式：,css,属性选择器制订各种形式,第24页,9.2.4 网页中应用样式表,要想在浏览器中显示出预期,css,样式表效果，就要让浏览器识别并正确调用,css,。这里介绍三种在,html,页面中插入,css,样式表方法：一是链入外部样式表；二是内部样式表、三是内嵌样式。,（,1,）链入外部样式表,链入外部样式表是把样式表保留为一个样式表文件，扩展名为,css,。然后在页面中用,标识导入样式文件到网页中。这个,标识必须放到页面,区内，以下：,第25页,一个外部样式表文件,(,如,mystyle.css,文件,),能够应用于多个页面。当你改变这个样式表文件时，全部页面样式都随之而改变。在制作大量相一样式页面网站时，非常有用，不但降低了重复工作量，而且有利于以后修改、编辑，也降低了浏览器重复下载代码样式表文件，这对提升网站访问速度是很主要，也是当前用得最多一个样式导入方式。,使用外部样式表时，只需要在外部样式表中写上样式就能够了，使用任何文本编辑器都能够书写，这里推荐大家使用,dreamweaver,、,sublime,等流行工具下面是一个,mystyle.css,例子：,第26页,（,2,）内部样式表,内部样式表是把样式表放到页面,区里，这些定义样式就应用到页面中了，样式表是用,标识插入，从下例中能够看出,标识使用方法：,第27页,3,、内嵌样式表,内嵌样式表是在,html,标签中使用，用这种方法，能够很简单对某个元素单独定义样式。内嵌样式使用是直接将在,html,标签中加入,style,属性。而,style,属性内容就是,css,属性和值，以下例：,第28页,9.2.5 css惯用属性,1,）,css,背景,css,能够使用纯色作为背景，也能够使用一幅图片作为背景。能够使用,background-color,属性为标签设置背景色。这个属性接收任何正当颜色值。,下面这条规则设置全部,div,背景为红色：,div background-color:red;,background-color,其默认值是,transparent,。,transparent,是,透明,意思。也就是说，假如一个元素没有指定背景色，那么背景就是透明，这么其上层元素背景才能可见。,第29页,（,2,）,css,文本属性,css,文本属性用来定义文本外观，如颜色、字体大小，对齐方式，缩进等。,text-indent,属性实现文本缩进，这个属性用来将首段首行进行缩进，下面语句，将,p,标签缩进,2,个,em,单位。,p text-indent:2em;,text-align,属性用来定义一个元素中文本对齐方式。它值普通有,left,、,center,、,right,，分别表示左对齐、居中、右对齐。,text-decoration,属性是一个惯用属性，普通用来对文字添加下划线，比如链接标签,a,，默认就带有下划线。,text-decoration,能够取,none,、,underline,、,overline,、,line-through,和,blink,。它们意思分别是：,none,：表示关闭原本应用到一个标签上全部样式，比如,a,标签默认有下划线，假如将,text-decoration,设置为,none,，那么就表示去掉下划线。,underline,：会对元素加下划线,overline,：,overline,与,underline,恰好相反，会在文本顶端画一个上划线。,第30页,line-through,：在文本中间画一条线。,blink,：让文本闪烁起来，不过有浏览器不支持这个特征，需慎重使用。,line-height,属性非常主要，使用也非常多，表示文字行间高度。下面规则表示设置,p,标签行高为,24,像素：,pline-height:24px,下面代码总结了一些惯用,css,文本属性：,第31页,上面代码在浏览器中各种文本效果在实际设计表现中利用频率很高。,第32页,（,3,）,css,字体属性,css,字体属性定义文本字体名字、大小、加粗和格调（如斜体）等。使用字体名字，能够使用,font-family,属性，以下定义了,body,中全部文本使用微软雅黑字体。,bodyfont-family:,微软雅黑,假如用户电脑上没有微软雅黑，可能出现一个不确定字体，这时候，能够多指定几个字体，以下：,bodyfont-family:,微软雅黑,宋体,楷体,这么会从左到右，选择字体。,第33页,9.2.,6,css盒模型,css,盒子模型又称框模型，它是,html+css,最关键知识之一，了解这个概念能够更加好了解,html,各个元素是怎样布置在浏览器页面中。,第34页,上面这个图表示,html,每个标签都能够含有这些属性，它分别定义了每个标签外边距,(margin),、边框（,border),、内边距（,padding),和内容（,content),。这几个属性含义分别是：,外边距（,margin),：最外层外边距，和另一个,html,元素距离，当然能够为,0,。外边距是透明，没有颜色，肉眼无法看到。,边框,(Border,）：围绕在内边距和外边距之间边框，能够有宽度，而且也能够有颜色。边框也能够有样式，如点画线，实心线等，后面会详细介绍。,内边距,(Padding),：内容和边框之间距离，内边距是透明。,内容,(content),：内容区表示盒子模型内容，主要显示文本、图像、链接等。,第35页,（,1,）外边距（,margin,）属性,margin,属性定义了外边距，它能够单独设置上，下，左，右边距，也能够一次改变全部属性。单独设置上下左右边距好处是：能够设置左边距为,10px,，右边距为,0px,。这么能够灵活控制元素总体大小。,单独指定上下左右边距属性是：上边距（,margin-top,）、（下边距）,margin-bottom,、（左边距）,margin-left,、（右边距）,margin-right,。,全部边距能够取以下值：,第36页,除了写出完整,margin-left,，,marging-right,等，,margin,也能够简写。普通情况,margin,能够有四个值，以下：,margin:35px 40px 65px 90px;,表示：,上边距为,35px,右边距为,40px,下边距为,65px,左边距为,90px,细心读者，会发觉,margin:35px 40px 65px 90px,等价于,margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:90px;,第37页,margin,也能够接收,3,个值，以下：,margin:35px 40px 65px;,表示：,上边距为,35px,左右边距为,40px,下边距为,65px,等价于：,margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:40px;,margin,也能够接收,2,个值，以下：,margin:25px 50px;,上下边距为,25px,左右边距为,50px,等价于,margin-top:25px;margin-right:50px;margin-bottom:25px;margin-left:50px;,margin,也能够接收,1,个值，以下：,margin:25px;,全部,4,个边距都是,25px,等价于,margin-top:25px;margin-right:25px;margin-bottom:25px;margin-left:25px;,第38页,2,）边框（,border,）属性,边框（,border,）属性允许你指定一个元素边框样式和颜色。,css,边框有以下属性：,第39页,左面代码在浏览器中效果将有虚线红色边框和实线绿色边框两种。,第40页,（,3,）填充,(padding,）属性,填充,(padding,）属性定义元素边框与元素内容,之间空间。,padding,取值和,margin,相同，,能够为,30px,、,10%,、,auto,等类似值。,第41页,（,4,）盒模型完整示例,下面代码是一个完整盒模型示例（见图,9.15,），代码中它设置了内边距,padding,、边框,border,、外边距,margin,：（图）,填充属性应用效果,第42页,第43页,经过本例，我们还需要了解盒模型整个元素占用总宽度和总高度，其计算公式分别以下：,第44页,假如将静态网页比作成一个人，那么,html,就是人骨骼、,css,则是血肉、而,javascrpit,就是人动态。而了解,javaScript,现在最好方式之一就是了解它历史。这有利于全方面了解,javaScript,在整个计算机理论和工业界中所处主要位置。,9.,3 javaScript,脚本基础,第45页,9.3,.,1 javaScript介绍,javaScript,诞生于,1995,年前后，这是有当初非常牛逼,Netscape(,网景,),企业创造。,javaScript,最初主要用来处理网页前端验证，如当用户输入密码时候，验证密码是否包含字母和数字。,经过,20,多年发展，,javaScript,当前功效已经非常强大了。我们现在所看到网站大多数效果，都是用,javaScript,实现，所以掌握,javaScript,是制作网站很主要技能之一。另外，在工业界中，大家常把,javaScript,简称为,js,，所以,javaScript,和,js,实则表述为同一脚本语言。,第46页,9.3,.,2 html中使用javaScript,javaScript,必须放在,html,与,标签之间。以下文：,上面代码，,和会指明了,javaScript,开始和结束。浏览器会将,和,之间代码，了解为,javaScript,。可能你在有些教材中，发觉有以下写法：,传统,javaScript,代码，,标签中使用,type=text/javaScript,，但现在浏览器默认使用,javaScript,作为脚本语言，所以不需要显示指定脚本属于哪一个语言了。,第47页,9.3,.,3 javscript变量,了解javaScript语法，我们先从变量开始。变量是javaScript中表示计算结果或值一个抽象概念，和数学中变量x、y、z差不多。变量能够经过变量名访问。,变量名命名规范需要恪守两条简单规则：,一是第一个字符必须是字母、下划线(_)或美元符号($)，不能以数字开始；,二是后面字符能够是下划线、美元符号、任何字母或数字字符.,下面变量都是正当：,上面,var,表示申明一个变量，,var,是,javaScript,关键字，不能用作变量名。,变量赋值直接使用等号,(=),，以下代码：,第48页,9.3,.,4 javaScript操作html标签,很多时候我们都需要使用,javaScript,来操作,html,，以下这几个情况是经常发生：,一是登录失败时候，改变某个,html,标签显示内容，以提醒用户名或者密码错误；二是改变某个,html,标签,css,样式，如改变标签颜色、字体大小、背景色等。,javaScript,使用,document.getElementById(id),方法来操作某个,html,标签，,id,表示某个,html,标签唯一标识。下面是一个改变标签内容例子：,第49页,9.3,.,5 javaScript注释,当代码写多了，难免有不好了解和阅读地方，这时候，你需要给代码写一些注释。写注释是一个很好习惯，它不但能够帮助你在未往返想起代码意思，而且能够帮助您团体组员了解你代码意图。,javaScript,注释分单行和多行注释，单行注释以,/,开始，下面是使用单行注释例子：,多行注释以,/*,开始，以,*/,结尾，下面是使用多行注释例子：,第50页,9.3.6函数,一个函数代码包含了一对花括号中，用关键词,function,来表示函数，以下,函数也能够带有参数，传入参数不一样，返回结果可能也不一样。,函数也能够带有参数，传入参数不一样，返回结果可能也不一样。,第51页,这里是一个加法函数，传入,2,个参数,x,和,y,，函数功效是把,x,加,y,和返回。,function,是函数关键字，不能更改，,add,是函数名，,x,和,y,是参数。,当写好函数需要执行，调用函数代码以下：,当写好函数需要执行，调用函数代码以下：,这里,total,值是,3+4,和为,7,。,第52页,9.3.7 javaScript运算符,javaScript,运算符和数学中运算符差不多，前面我们接触了,=,、,+,等运算符，其意义也和数学中意义一样。,javaScript,主要有：算数运算法、赋值运算符、关系运算符等。,1.,算数运算符,算数运算符主要执行变量之间算数运算，下表取,y=4,，解释了惯用算数运算符运算规则：,第53页,2.,赋值运算符,赋值运算符用于给变量赋值，下面表格解释赋值运算符赋值规则，设,x=10,，,y=5,：,第54页,3.,关系运算符,关系运算符主要用于比较功效，每一个关系运算符都返回一个布尔值。布尔值是一个特殊值，它要么为真,(true),，要么为,(false),。,如姚明是一个篮球运动员？这句话为真，所以其布尔值为真,(true),。,又如姚明是女性？这句话是假，所以其布尔值为假,(false),。,惯用关系运算符有小于,(),、小于等于,(=),。下面是,2,个例子，注释中是得到布尔值。,第55页,9.3.,8 javaScript三种流程控制,编程语言中有三种流程控制结构，分别是次序结构、条件结构和循环结构。,1.,条件结构,条件结构就是按照条件执行对应语句。首先我们来看一下条件语句，条件语句依据不一样条件，执行不一样代码。惯用条件语句有以下三种：,（,1,）,if,语句,当条件为,true,时，执行花括号中语句。,（,2,）,if.else.,语句,第56页,（,2,）,if.else if.else,语句,if.else ifelse,语句，当条件,1,为真时，执行条件,1,中语句，当条件,1,为假时，执行条件,2,语句，当条件,2,为假时，执行最终一个,else,语句。,第57页,2.,循环结构,循环是重复执行相同代码，比如上课点名，就能够使用循环来减轻老师负担。不用循环，点名时候我们可能写以下代码：,假如有几十个人需关键点名，那么这么写比较麻烦，不妨使用循环来实现这个功效。循环有,for,循环和,while,循环，,for,循环语法是：,第58页,语句,1,在循环（代码块）开始前执行，进行必要初始化；,语句,2,定义运行循环（代码块）条件，只有满足条件，才能每次执行循环中代码；,语句,3,在循环中代码被执行之后执行；,While,循环会在指定条件为真时循环执行代码块。语法以下：,下面代码打印出,0,到,4,：,第59页,9.3.,9 javaScript与html交互,javaScript,能够操作,html,，当,html,网页被加载时，浏览器会创建页面文档对象模型（,Document Object Model,），文档对象模型简称,DOM,，,javaScript,经过操作,DOM,来控制,html,中标签。,javaScript,能够创建、访问,html,中各种元素。比如能够更改一个,p,标签内容，添加一个,div,标签等。总结起来，能够经过以下几个方式取得,html,标签元素：,1.,经过id,查找,html,元素,在,DOM,中查找,html,标签最简单方法，是经过使用标签,id,属性，下面例子经过,getElementById,函数查找,id=intro,元素：,第60页,假如找到该元素，则该方法将以对象形式返回该元素。假如未找到该元素，则,x,将被设置为空（,undefined,）。,2.,经过标署名查找,html,元素,能够经过,getElementsByTagName,函数查找特定标署名元素。本例查找,id=main,元素，然后查找,id=main,元素中全部,元素：,第61页,3,经过类名找到,html,元素,本例经过,getElementsByClassName,函数来查找,class=intro,元素：,var x=document.getElementsByClassName(intro);,第62页,9,.4 案例幻灯片效果,第63页,