网页设计1ppt课件VIP

1,.,课题目标,解释什么是HTMLHTML特点解释HTML文档结构HTML文档中各标记的使用网页页面的背景色超链接字体样式有序、无序列表图像表格,2,.,初识HTML,HTML是使用SGML（标准通用标记语言）定义的，它提供了一种将文本、图象、声音、动画结合在一个称为网页的文档中的方法。HTML（HypertextMarkupLanguage)超文本标记语言HTML基于两个概念：超文本：它提供了一种将同一文档不同部分或不同文档之间的信息联系起来的机制。标记语言：标记指的是HTML文档中的一些特殊的标记。这些标记（标识符）用于控制网页出版的文档格式、字符格式、段落格式等，还包括为达到网页交互效果而对脚本语言、java小程序等的支持和调用,3,.,HTML的特点,HTML是一个简单但功能强大的语言。它的简单性使得任何人都可以利用它来创建自己的网页通过超链接和URL，一个网页可以和其它网页相互连接起来。这样，使用者只要单击相应的超链接就可以访问其它网页中的相关信息利用URL，HTML甚至可以通过Telnet、WAIS、Gopher、FTP、Usernet或Email链接到其它文档HTML允许在HTML文档中结合多媒体文件。如果浏览器可以播放音频或视频文件，那么使用者可以通过单击来欣赏它们可以使用任何一个文本编辑器进行编写。,4,.,动态HTML(DHTML),动态HTML是一种概念，是一种通过各种技术的综合发展而得以实现的概念。动态HTML包括3部分内容：HTML规范、Script语言（javaScript和VBScript，其中javaScript使用更为广泛）和CSS(CascadingStyleSheets层叠样式表）。,5,.,HTML文档的结构,6,.,HTML文档的结构,一个HTML文档由一系列标识符组成，这些标识符均包含在尖括号中，而且成对出现。一个HTML文档总是由标识符开始，结束，当中包含两大部份头部：主体：,7,.,HTML文件示例,文件源代码如下：我的第一个HTML文件文件头HTML还是很好学的我的第一个网页例2-1,8,.,HTML语言语法,每个标记都括在一对尖括号内标记都有一个开始标记和一个结束标记有些标记不需要结束标记，如标记名不区分大小写，但是通常用大写以和普通正文区分标记可以有属性的取值如有时需要在一对标记内嵌入其它的标记对以取得所需的显示效果在HTML文档中进行注释，使用在脚本代码中使用/,9,.,文档头部分使用的标识符,1、指示文档的标题。2、有两个属性：name和http-equivname属性用于描述网页http-equiv属性相当于http文件头，可以直接影响网页的传输例：说明生成工具关键词对主页进行描述所用文字及语言等补,10,.,网页的页面属性,背景色、背景图片、网页文字颜色、链接颜色属性值:bgcolor:背景色text:非可链接文字的颜色link:：可链接文字的颜色alink:正被单击的可链接文字的颜色vlink：已经单击（访问）过的可链接文字的颜色#代表颜色，用16进制的“红-绿-蓝”来表示如link=#0000ff蓝色ff0000红00ff00绿redgreenblueyellowwhiteblackgrayteal青蓝色aqua浅蓝色lime浅绿色olive橄榄色maroon栗色fuchsia紫红色purple紫色,11,.,链接,跳转到不同网页.跳转到同一网页不同位置.要使用链接的地方.,在链接到的地方链接标识符有3个属性，如下：href:链接所指向的文件的地址name:引用锚点的名称target:打开链接的目标窗口,12,.,字体样式,1、标题字体：大字号2、字号、字形、颜色Size:17Face:楷体、隶书、黑体、Arial等Color:16进制颜色值3、特殊字体粗体上标斜体下标下划线删除线,13,.,网页布局,1、设置标尺线:设置标尺线的粗细，单位为像素:设置宽度，单位为像素或者窗口的百分比:设置对齐方式，left,right,center2、行的控制换行段落强制一行文字不换行文字的分区显示,14,.,网页布局,3、对齐方式.#值：left,right,center.4、列表无序列表有序列表,15,.,网页布局,无序列表.第一列（实心园点）第二列（空心圆圈）第三列（实心方块）,16,.,网页布局,有序列表.大写字母A,B小写罗马数字i,ii,大写罗马数字I,II小写字母a,b阿拉伯数字1,2从5开始从D开始,17,.,图像,HTML文档支持的图像文件类型目前有3种：bmp文件存储空间大，传输不够快，不常用。jpg文件常用gif文件常用，具有256色显示，存储空间小、支持动画效果、背景色可透明src:图像的URLalt:在不支持图像的浏览器中显示的文字串align:图像的对齐方式width,height:图像显示的宽度和高度border:图像的边框宽度,18,.,表格,基本语法：开始表格.表格标题定义表行.定义表头（可省）.定义表元,19,.,表格外观,1、边框尺寸border取值设置边框，默认值是0，没有有边框2、表格尺寸设置属性值的单位为像素或者百分比3、表元间隙、表元内部空白设置各个单元格之间的间隔距离单元格边框和单元内容的间隔单位为像素,20,.,表格的标题,表格表题align属性表示表格标题与表格的水平对齐方式left:左对齐center:居中对齐right:右对齐valign属性表示表格标题与表格的纵向对齐方式top:标题在上（默认值）bottom:标题在下,21,.,表格的背景颜色和背景图像,或或或,22,.,表格边框的颜色,表格边框颜色的亮度基本语法：#取值都是16进制RGB颜色数码,23,.,表格边框的显示状态,显示全部边框只显示上边框只显示下边框只显示上下边框只显示左边框只显示右边框只显示左右边框全部边框都不显示,24,.,表格中分隔线的显示,显示所有分隔线只显示行与行的分隔线只显示列与列的分隔线所有分隔线都不显示,25,.,跨多行多列的表格,定义跨多列的表格语法：或n为要跨的列数定义跨多行的表格，语法：或,26,.,控制表格内文字的布局,水平对齐leftcenterright纵向对齐topmiddlebottom表格在网页中的布局,27,.,总结,什么是HTMLHTML的特点HTML语言的结构和特点HTML语言中的各标记符网页页面的背景色超链接字体样式有序、无序列表图像表格,28,.,第二章,多窗口结构和表单,29,.,课题目标,多窗口结构表单文本框提交和重置按钮下拉选择框复选框单选按钮,30,.,多窗口结构,使用框架（frame)可以实现多窗口结构基本语法如下：和:标识框架:指出框架中显示的文件的地址和:用于不支持框架结构的浏览器,31,.,设置各窗口的尺寸,纵向排列多个窗口的基本语法：横向排列多个窗口的基本语法：赋值方式：以像素为单位如50，50，50以占浏览窗口的百分比为单位如：30%，20%，*倍数关系如：1，1，2其中*表示取剩余值,32,.,框架各窗口之间的关系,框架结构的每一个窗口都可以有一个名字。每个窗口中的链接都可以在框架结构中的任何一个窗口中打开。这利用链接的target属性实现。特殊值：Target=_blank链接目标网页在新窗口中打开Target=_self链接目标网页在本窗口中打开Target=_parent链接目标网页在父窗口中打开Target=_top链接目标网页在整个浏览器窗口中打开,33,.,设置边框的外观,1、各窗口边框的有无#:yesno或者10默认是有（yes或1)2、各窗口间空白区域大小3、边框颜色4、滚动条的有无yesnoauto(默认值)案例,34,.,表单Form,表单是一个网页上表单域的一个集合。表单可以使网页具有交互性。表单有一个表单处理程序，它是从表单收集信息的方法，一旦用户提交了表单，表单处理程序就开始运作，表单处理程序是表单上数据的脚本，它可以：存储用户在表单域中提交的数据使用用户提交的数据更新数据库将数据传递到站点上的一个Web页,35,.,Form的基本结构,Form都是以标识符开始，以标识符结束可以将多个form元素放在同一对标识符和中，不必加一个元素就放一对标识符。有4种基本的标识符：产生收集简单信息的form形式，radio,check产生下拉菜单的form形式给出每个菜单选项产生用于多行文本输入的form形式,36,.,Form的基本结构,form的基本结构如下：.其中，*的取值有text,password,checkbox,radio,image,hidden,submit,reset*的取值用于脚本进行相应处理时的识别名称，即表单处理程序中用的。,37,.,表单元素下拉菜单,内容1内容2.Size,value,multiple,text,selectedIndex,options,38,.,表单元素复选框,MakecoffeeSpillcoffeeOutlawsmiling.StartrumorsaboutKristinTalkaboutMartwithMattLookover,39,.,表单元素单选按钮,香蕉苹果桔子可以用checked属性设置单选按钮中默认的被选取选项,40,.,表单元素按钮,普通按钮Submit可以直接向服务器传送信息reset可以重新设置图像化按钮align:center,top,bottom（图像与文本的当前行的对齐方式）,41,.,表单元素文本输入,文字输入的基本语法：密码输入的基本语法：value可省设置输入框的宽度的基本语法：设置输入内容的最大输入宽度基本语法：,42,.,表单元素文本输入,Form的元素可以设置为隐藏，基本语法如下：Hereisahiddenelement.,43,.,表单元素文本输入,设置较大的文本输入区域基本语法为：.rows属性值为行数，cols属性值为列数可以设置对输入文本是否进行换行，默认值是不换行.软换行.硬换行,44,.,设置移动的文字Marquee,基本语法：.设置文字移动的方向：direction属性：left,right,up,down设置文字移动的方式：behavior属性：scroll,slide,alternate设置文字的循环次数：loop属性：数值，若未指定或取值为infinite则循环不止,45,.,设置移动的文字Marquee,设置文字移动的速度：Scrollamount属性：数值（象素）设置文字的移动延时：Scrolldelay属性：单位毫秒设置移动文字的外观：bgcolor属性：16进制数表示的RGB的颜色值设置移动文字的宽度、高度height,width属性：单位象素或者百分比hspace,vspace属性：文字周围的空白区域,46,.,、,标识符用来定义Script脚本代码，所有脚本代码都要放入到和标识符中标识符用来引用外部的JavaApplet小程序.标识符用来定义样式表代码,47,.,样式表简介,什么是样式表用于描述文档如何在屏幕上显示W3C推荐的样式表标准包括CSS和XSLCSS主要用于HTMLXSL主要用于XMLCSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面,48,.,样式表形式,嵌入式样式表内联样式（使用style属性）级联样式（使用style标记）外部样式表（将样式表作为文件）,49,.,样式表规则,用法：RuleSelectorproperty:value;property:value;.,规则选择器,声明,属性,属性值,50,.,样式表中的选择器,简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置)HTML选择器-选择器是HTML标记的名称类选择器使用HTML元素的CLASS属性ID选择器使用HTML元素的ID属性上下文选择器(引用元素的上下文),51,.,HTML选择器示例,Pfont-style:italic;font-weight:bold;color:limegreen这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。,52,.,类选择器示例,.watercolor:blue.dangercolor:red测试水测试危险无样式斜体,53,.,ID选择器示例,ID选择器#controlcolor:red这是火焰的颜色本段没有应用样式,54,.,上下文选择器示例,上下文选择器BODYcolor:blue;background:lavender;font-family:Arial;ULcolor:red芒果桔子苹果芒果桔子苹果,55,.,链接外部样式表,使用Link元素使用importimport“*.css”;,56,.,在HTML中引用样式表,Style元素Style属性Link元素,57,.,总结,多窗口结构表单文本框提交和重置按钮下拉选择框复选框单选按钮移动文字特殊标识符,58,.,第二部分,JavaScript脚本语言,59,.,第一章,JavaScript概述,60,.,课题目标,JavaScript简介JavaScript脚本语言中的基本数据类型、表达式、算术运算符JavaScript脚本语言的基本框架结构JavaScript脚本语言的内部函数,61,.,什么是JavaScript,JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。,62,.,JavaScrip语言特点,1、是一种脚本编写语言它采用小程序段的方式实现编程2、基于对象的语言它能运用自己已经创建的对象，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。3、简单性首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡,63,.,JavaScrip语言特点,4、安全性它不允许访问本地的硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。5、动态性它可以直接对用户或客户输入做出响应，无须经过Web服务程序6、跨平台性JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行,64,.,JavaScript的作用和基本语法规则,使用JavaScript的各种功能，可以增强站点的动态性和交互性。提供用户交互动态更改内容验证数据与其他任何语言一样，JavaScript也遵循一些基本的语法规则，如：区分大小写使用成对的符号使用注释/*多行*/,65,.,哪些浏览器支持JavaScript,Netscape在他的第二版浏览器中首次介绍了JavaScript，紧接着微软Microsoft也在他的浏览器IE3.0（InternetExplorerversion3）中提供了JavaScript的支持。如此这般，其它的浏览器也陆陆续续的开始支持JavaScript了。随着新版本的浏览器不断的扩展HTML，JavaScript也在不断地升级以适应HTML的扩展。,66,.,JavaScript作为客户端程序嵌入网页,使用Script标记使用外部文件在事件处理程序中使用JavaScript,67,.,编写第一个JavaScript程序,68,.,使用外部文件示例,祝学有所成!,document.write(嗨！你好吗？),test.js,69,.,在事件处理程序中使用JavaScript示例,JavaScript示例,70,.,JavaScript语言说明,1、脚本代码2、注释部分/脚本代码中的注释3、脚本代码放置的位置之间之间4、脚本语言JavaScript对变量名区分大小写Numbernumber是两个变量,71,.,使用Alert/Confirm/Write方法,使用窗口的Alert方法，可以生成一个对话框使用窗口的Confirm方法，可以生成一个确认对话框使用document的Write方法可以创建页面内容,72,.,变量,变量是一种引用内存位置的容器，用于保存在执行脚本时可以更改的值变量的命令约定变量名必须以字母或下划线(_)开头变量名可以包含数字由于JavaScript区分大小写，所以可用的字母包括A到Z（大写）和a到z（小写）的字符,73,.,声明变量,varnew_amount;varanswer=null;varold_cost=12.50;varresult=Unknownresult;vara,b,c;result=true;,74,.,变量的作用域,75,.,数据类型,在JavaScript中有四种基本的数据类型基本类型属于弱类型,76,.,运算符,算术运算符比较运算符逻辑运算符字符串运算符求值运算符,77,.,算术运算符,78,.,比较运算符,79,.,逻辑运算符,80,.,字符串运算符,x=yellow;y=green;z=x+y+white;则z为yellowgreenwhitew=y+9;则w为green9,81,.,求值运算符,通常这些运算符包括：条件运算符：(condition)?trueVal:falseValtypeof运算符typeof运算符返回字符串，该字符串代表操作数的类型,varx=5;document.write(typeof(x);,status=(age=18)?adult:minor,82,.,表达式,表达式用于在不同上下文中操作和计算变量。表达式是任意一组有效的文字、变量和运算符，其计算结果为一个值。表达式类型算术：计算结果为一个数字逻辑：计算结果为一个布尔值字符串：计算结果为一个字符串表达式通过运算符组合变量和文字,83,.,数组,数组用于存储具有相同数据类型的一组值，使用下标（索引）来区分各个值。在JavaScript中，数组的下标以零开始。JavaScript没有明确的数组数据类型，但却有内置的数组对象。要在程序中使用数组，必须使用数组对象及其相关联的方法。,84,.,创建数组,语法：arrayObjectName=newArray(element0,element1,.,elementN)初始化1.将指定的值作为其元素2.使用arrayName=newArray(N),对象名,元素值列表,85,.,数组赋值,在创建数组时将元素的值直接赋给数组。对数组的元素赋值。,86,.,访问数组元素,指定元素名指定元素的索引号,empRyanDiasemp0,87,.,数组对象的元素和方法,length属性sort方法join方法reverse方法,88,.,多维数组,89,.,条件语句,ifelse语句switch语句,if(condition)statements;elsestatements2;,switch(expression)casevalue1:statements;break;casevalue2:statements;break;.default:statements;,90,.,循环语句,fordowhilewhilebreakcontinue,91,.,函数,预定义函数eval函数isNaN函数用户自定义函数创建用户定义的函数调用函数return语句,functionfuncName(argument1,argument2,etc)statements;,92,.,对象,对象中包含定义对象自身的属性（变量）及用于处理数据的方法（函数）。要访问对象属性，必须指定对象名及属性：objectNpertyName要访问对象方法，必须指定对象名及需要的方法：objectName.method(),93,.,使用对象,创建网页时，可以插入：浏览器对象内置脚本语言对象（根据使用的脚本语言的不同而不同）HTML元素也可以创建自已的对象，并在程序中使用。,94,.,对象操作语句,JavaScript是一种基于对象（Object-Based）的语言，而不是面对对象（object-oriented）的语言。JavaScript中的对象操作语句：this语句forin语句with语句new语句,95,.,this语句,this语句的值指示当前对象，并且可以拥有标准属性，如名称、长度以及相应的值。只能用在函数作用域或其调用引用内。用法：this.属性名,functiondispname(name)alert(欢迎进入JavaScript世界,+name);输入您的名字：,96,.,for.in语句,forin语句用于在对象的各个属性，或数组的各个元素之间循环用法：for(variableinobject)statements;,color=newArray(红色,蓝色,绿色);for(varpropincolor)varrecord=color;record+=prop+=+colorprop+;document.write(record);,97,.,new语句,new操作符用于新建对象类型实例。用法objectName=newobjectType(param1,param2.,paramN),functionemployee(name,code,designation)=namethis.code=codethis.designation=designationnewemp=newemployee(JohnDias,A001,职员);document.write(雇员姓名：++);document.write(雇员代号：+newemp.code+);document.write(头衔：+newemp.designation);,98,.,with语句,with语句用于执行一组语句，所有这些语句都假定引用指定的对象。用法with(object)statements;,vara,b,c;varr=10;with(Math)a=PI*r*r;b=r*cos(PI);c=r*sin(PI/2);document.write(a+);document.write(b+);document.write(c+);,99,.,字符串对象,字符串对象用于操纵和处理文本字符串。用法stringNpertyNamestringName.methodName创建字符串的方法使用var语句，并对为其赋值（可选）使用赋值运算符(=)及变量名使用string()构造函数,100,.,字符串对象的属性和方法,属性length方法BigindexOf(ch,start)Blinksubstring(start,end)BoldtoLowerCase()FontcolortoUpperCase()Italicssubstr(start,length)SmalllastIndexOf(string,start),101,.,字符串对象示例,varbstr=大号;varsstr=小号;varblstr=粗体;varblkstr=“闪烁”;varucase=大写;varlcase=小写;document.write(这是+bstr.big()+文本);document.write(这是+sstr.small()+文本);document.write(这是+blstr.bold()+文本);document.write(这是+blkstr.blink()+文本);document.write(这是+ucase.toUpperCase()+文本);document.write(这是+lcase.toLowerCase()+文本);,102,.,math对象,Math对象拥有可用于表示复杂数学运算的属性和方法属性PILN10E方法abs(number)sin(number)cos(number),103,.,math对象示例,functiondoCalc(x)vara;a=Math.PI*x*x;alert(半径为+x+的圆的面积为+a);输入圆的半径：,104,.,Date对象,Date是内置对象，包含日期和时间信息。Date对象无属性，但有许多方法可以用来设置、获取和操作日期用法：DateObject=newDate(parameters),105,.,Date对象方法,set方法组get方法组to方法组parse和UTC方法组getYear():返回年getMonth()返回月011getDate()返回日getDay()返回星期数0日-6六getHours()返回小时023getMintes()返回分钟059getSecdonds()返回秒数getTime()返回毫秒数,106,.,Date对象示例,2003年的圣诞节是星期+daynamethedate.getDay();thedate.setYear(2004);document.write(2004年的圣诞节是星期+daynamethedate.getDay();/-,107,.,事件对象概念,事件可以由用户生成，也可以由系统生成每个事件都有与之相关联的Event对象Event对象提供下列信息：事件类型事件发生时光标的位置Event对象可以用作事件处理程序的一部分,108,.,事件的生命周期,事件的生命周期通常包含下列阶段：与发生的事件相关联的用户操作或条件立即更新Event对象以反映事件的状态触发事件调用相关联的事件处理程序事件处理程序执行其操作并返回,109,.,JavaScript事件,onClickonChangeonFocusonBluronMouseOveronMouseOutonLoadonSubmitonMouseDownonMouseUp,110,.,onClick事件示例,请输入表达式：结果：,111,.,onChange事件示例,functioncheckNum(num)if(num=)alert(请输入一个数字值);returnfalse;if(isNaN(num)alert(请输入一个数字值);returnfalse;elsealert(谢谢！);请输入一个数字：,112,.,onFocus/onBlur事件示例,113,.,onMouseOver/onMouseOut事件示例,varnum=0;functionshowLink(num)if(num=1)document.forms0.elements0.value=您选择了Aptech;if(num=2)document.forms0.elements0.value=您选择了Asset;if(num=3)document.forms0.elements0.value=您选择了Arena;AptechAssetArena,114,.,onLoad事件示例,您好functionhello()alert(您好);,115,.,onMouseDown/onMouseUp事件示例,116,.,onResize事件示例,window.onresize=notify;functionnotify()alert(窗口大小调整完毕！);请调整窗口的大小。,117,.,处理事件,为响应事件而执行的JavaScript代码段称为事件处理程序事件处理程序分为：HTML标记事件处理程序以属性的形式出现的事件处理程序object.eventh