《网站前端开发技术-CSS-JavaScript-jQuery教学教案.docx》由会员分享，可在线阅读，更多相关《网站前端开发技术-CSS-JavaScript-jQuery教学教案.docx（14页珍藏版）》请在课桌文档上搜索。
1、第O章网站策划与创建近些年来，互联网网站在全球迅猛发展，渗透到各个行业和领域，已经改变了当代人的工作和生活方式,用户可以随时从互联网上了解当天最新天气信息、新何动态和旅游信息，可看到当天报纸和G新杂忐，可以足不出户在家里炒股、网上购物、收发电子邮件，享受远程医疗和远程教育等等，随着互联网技术发展,网邦设计与开发技术得到了广泛应用.在学习网站设计技术之前,我们有必要了解一些有关互联网、刈站与网页的基本知识.同时，在正式创建网站之时，还必须先对待建网站进行一个全面清晰的规划，这是设计一个网站的必茁茶础，在学习本章中,将通过完成三个任务来达到学习目标：(1)体验互联网与网站剖析：(2)网站烷划和设计
2、：(3)创建网站站点，任务0.1互联网与网站剖析1 .雌在动手制作网站之前，必须要先规划设计好网站的结构和内容，对于初学者来说，往往不知该如何者手迸行网站规划。在本项任务中，先上网体验，学习掌握网站的基础知识，例析几个典型网站.通过观摩学习他人网站，认知网站，积察知识和经验，为项利地规划设计出自己的网站奠定基础.2.学习目标学习目的掌握网站班咄知识、分析互联网站的方法与步骤知根目标1 .Internet与应用：2 .网站基础知识：3 .网页基础知识。技能目标1 .分析已有网站的主鹿、特点：2 .分析网站的内容构成：3 .分析网站的信息表现形式：4 .编写简通的技术文档.素项目标培养学生团队侨作
3、意识,分析问题、解决问题及媒合创新的能力。重点1 .网站与网页的基础知识。2 .正确分析网站的内衣构成.难点I娟写技术文档3.基础知识每个网站设计开发的初学拧都有必要知道几方面的知识.包括：万维网如何工作、HTM1.谙如何使用层会样式表（CSS）.JavaScript编程、XM1.标准、极务器脚本技术、使用SQ1.管理数据等.下面介绍一些网站相关的基本概念和翦础知识：1互联网（InteEet,又译因特网、网际网）互岷网专指全球域大的、开放的、由众把网络互联而成的，主要采用TCP/IP协议的计算机网络.它是一个国际性的网络集合体，涉及到通信技术和计分机技术等.这种网络可以将世界各地各种各样的物理
4、网络互联起来,而不管这些网络的类型是否相同、规模是否一样、井医是远还是近，一旦连入Intemet便构成了一个整体.可以这样认为,凡是采用TCP/IP（传输控制协议/网际协议）井健终与Internet上的任何一台电脑进行通信的电脏部可以看成是Intemet的,部分。人们使用互联网可以与远在千里之外的朋友相互发送邮件、共同完成一项工作、共同娱乐.2万维网（Wor1.dWideWeb,简称WWW或W3）万维网,常常被当成因特网的同义词.其实万维网是战若因特网运行的一项服务,是一个信息资源空间，它是一个以Internet为基础的计蚌机网络平台，允许用户的计停机通过Intemet获取另一台计算机上的信息
5、资源，3网站（WebSite）网站是指在因特网上按照一定规则使用HTM1.等工具制作的，用于展示特定内容的相关网页集合.简单地说.网站是一种通讯平台,就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的刈络眼务.也可以通过网页浏览涔来访问网站，获取自己需要的资讯或者享受网络服务。网站空间由专门的独立服务器或租用的虚拟主机承担,网站源程序则放在网站Ii1.i务器空间里面.4网页（WebPage）网页是网站中的一“页”，是构成网站的范本元素，换句话讲，一个网站就是由若干个网页组成.网页是一个文件，它存放在某一台与互联网相连的计亢机中，网页经由网址（UR1.）来识别与存
6、取.人们上忖时在浏览器中所看到的内容就是阳贞.5）统一资源定位涔（UniformResource1.ocations.简称UR1.Web上每一个网页都有一个独立的地址，这此地址称作统资源定位器（UR1.）,也被称为网页地址，俗称“网址:UR1.地址是在Internet上寻找信息资源，获取网页文件的方法，如果己经知道某个网页的UR1.，就可以直接打开该附页。UR1.的格式如下：苏议:主机地拉（域名）/跖径/文件名例如；6）浏览器浏览器是一个应用软件，它可以把在互联网上找到的网页文件翻译W择成网页内心显示出来，网页内容可以包含文本、图形、动画、音频和视叙.所有的网页称含有能好技显示的结构,浏览器通
7、过阅读这些结构来显示页面.最常用的显示结构称为HTM1.标签,用于段落的HTM1.标签类似这样：vp,在HTM1.中用如下格式定义段落：ThisisaParagraph人们可以利用网页浏览器,询入网址来访问网站获取自己需要的信息或者享受网络服务.现在最常用的浏览器包括：InternetExp1.orer,NetscapeNavigator.Firefox.Mozi1.1.a.ChrOme等等。7）什么是HTM1.HTM1.的英文全称为HyPerteXtMarked1.angUage,翻译为超文本标记语言，是一种用来生成WWW网页的标记语言.它是定义网页格式的语古,不是一种编程语言.这种标记用古
8、有一套标记标签（markuptag）,HTM1.使用标记标签来描述网页.目前最新标准的HTM1.已经是HTM1.5.8）层被样式表（CaSCadingSty1.eSheets）CSS层段样式表定义如何显示HTM1.元素，即可以控制HTM1.显示的样式，如字体标签和酸色磔性等，这个定义通常被保存在外部的XSS文件或内部标签中，仅仅通过编制一个简单的CSS样式表文档，就能铭同时改变站点中所有页面布局的外观.H1.于允许同时帏制多理页面的样式和布局.CSS可以称得上Web设计领域的一个突破.作为网站开发者可以为每个HTM1.元素定义样式,并符之应用于你布望的任意多的贞面中.如需进行全局变换,只需陆单
9、地改变样式，然后网站中的所有元素均会被自动地更新。9）JavaScript编程JavaScript是因特网上生流行的脚本语言，并旦可在所有主要的浏览器中运行，比方说InternetExp1.orer,Mozi1.1.a.Firefox,NetscapefiOPera等.JaVaSCriPt用于向HTM1.页面添加交互行为.它是一种脚本语言,即一种轻量级（易学）的编程语*.但却功能强大。JavaScript程序由数行可执行的计蚱机代码加成,这种程序是一种代码执行不进行预编译的解择性语言。与HTM1.和CSS一样，JaVaSCriPt也是一种关键技术，任何涉及构建网站的人员都应该然统运用这一技术。
10、5.程序代码编写3.2.2应用image对象实现动画1 .实例效果2 .任务要求3 .程序设计思路强调：动Si设计方法之一，就是将一组具有连续动作画面的图片连续交替显示出来，其视觉效果就是动S1.首先应该在页面中，定义一个图片标记用于显示一个图片。然后利用该图片对望.逐一显示一组连续的图片.4 .技术重点图片对象image.关I一个图片信息可以保存在一个叫image的对象中.此时象包含了图片路径(UR1.)、图片当前的卜我状态、图片的高度和宽度等信息。通常情况卜你会将此对象指向在document.images数俎中存在的IS片,也就是放在网页中的图片,但是有时候你可能要处理一些不在网页中的图片
11、对象.这时快image对也就派上用场了.而使用Image忖象就可以做到提前下载图片的目的,如下边的代码一样,使用image对象的src麻性指定图片的路径(UR1.),这样就将images目录下的图片pic2,gifb本到客户端了:varmy1.mg=newImage();my1.mg.src=imagespic2.gif;这段代码将迫使浏览器开始从限务涔卜俄指定的图片，如果客户铝的媛存(Cache)中有这个图片的话,浏览器会自动将其植施,那样，当用户将限标移动到图片上边的时候,图片将会立即变换，不会有时间的延迟.5 .程序代码编写6 .编程技术拓展在程序中指定每个image对生的SrC侬件的谙
12、句,不使用每个图片胞独定义的方法.而是来用使用for循环来定义，使得语句更加简化，教学设计说明：本章内容开始实例编程设计，将知识学习与技能训练融入范例制作过程中，让学习者一亶参与实践,实现在“学中做、做中学M每个范例都包括：实例效果、任务要求、程序设计思路、技术要点、程序代码编写，及其电点代码分析、任务拓展或技术拓展等“具体教学设计：让学习从任务目标出发，有针对性地引导学生.完成任务，学会如何将技术用于实践,同时掌握针对项目要求进行制作的方法,最终掌握网页交互设计的实用技能和最新技术.教帅演示实例效果,讲解任务要求.强调关键技术,然后要求学生自主完成程序调试.教学过程中教师辅导，对有针对性问遨
13、统一强调.作业，根据情况让学生将本次实例拓展部分作为提交作业，或者课堂时间不携课后完成的实例或者有难度的实例作为作业.第5章页面动态文字效果：学时本章将学习如何让页面中文字鲜活地动起来,包括文字在单行文木框、多行文木框、以滤境方式动态变化等。下面分别探讨各种动态文字显示效果。5.1单行文本根中的文字5.1.1单行文本推文字动击移动1.实例效果2 .任务要求3 .程序设计思路强调：设计思路网状态栏显示相同，只是将显示对象由状态栏换成单行文本框即可。当然要在文档区域中首先定义一个文本枢。单击页面的同说按钮和公告按钮,会在多行文本框中依顺序和逆序显示文字信息.如图4.10所示.4 .任务要求在页面的
14、表格中插入多行文本框、按钮和单行文本框.单击阅读按钮将依顺序显示每条文字，单击公告栏按钮将逆序显示每条文字，同时在单行文本框中提示为第几条伯恩.5 .程序设计思路1首先在页面中创建一个去格并设就表格各种属性。2)脚本程序编写，完成两个任务，3)将编写的两个功能函数.分别赋予给两个按钮.4 .技术要点前面学过的在文本框中显示文字，都是通过其记号找到对应的对象，来完成文字的赋伯显示。而本例中则使用了文档元素按位置访问的格式，来找到显示文字的文本板对象，这也是常用的一种方式.例如：documcnt.fbrms1.0j.c1.cmcnts0.va1.uc=Tcxt:我示文档区域中第I个表单中的第I个元
15、素，将其属性Va1.Ue赋值为Text.这种访问方式是按照位置进行的,基于HTM1.文档中某类标签的数琏，若当中的某个标签被删除，这种用数组表示的方式就会出现错促.一个要避免这种请况发生.其次，在定义函数中巧妙地使用return语句.珞所需要的变现或返回.例如:rcum(Texi).第三，针时两个按钮使用了OnC1.iCk事件调用相应函数，以便完成特定任务。例如：onC1.ick=nex(Message=TXa1.TextInput)(acrtC这是最后条信息了!”)：TimcrSct=fa1.se;e1.seTcxtNumber+=1;显示第几条估恩message=TextNumber+1;
16、月在单行文本框中显示第几条信息的提示ckKumcnt.forms|0j.e1.cincnts2|.va1.uc=message:找到要显示的信息条Text=Tex(In(TextNunber:/将文字段赋值给HeIpTex1.HcIpIcxt=Text:其次，巧妙地设置了逻辑变MTimeSei的初始做为fa1.se,2)在页面中的两个按钮元素，分别利用。nC1.ick事件调用了相应的函数。第9章动态位置变化动态位置变化效果是指网页元素的位置动态地发生变化.这种变化可以是以某一段时间为周期进行循环变化，或者是在用户的某种操作下发生的变化.有些是图片或者图形位置的变化，有些是文字的位置发生变化，在
17、技术方面要想到，这些网页元素一定是放在一个容器中，迪雷使用层.设置相关位置属性发生改变.9.1 动态对联广告9.1.1 随滚动条移动的对联广告1 .实例效果在网页区域的两恻显示对联广告图片，如图9.1所示。InternetExp1.orerJJa1.We.GiIimteretP*rXIt)随电动条手动图片广告图9.1可移动对联广告2 .任务要求在网页文档区域两侧显示图片广告，当页面出现滚动条托动时图片则显示在相对固定的位前.即广告将的着滚动条而向下或向上移动使其呈现在距离顶端不变的位黄处。3 .程序设计思路这种效果涉及两个方面技术：首先编耳htm1.代码；然后涉及控制时联显示和滚动的代码.包括
18、对联最初显示的坐标位置，以及当潦动条潇动时对联距离页面顶端的位置变化.4 .技术要点将图片放在层里,通过层坐标控制其在浏览器中位置,即可以知道具体位置姐性.其次,需要知道窗口当前的滚动情况,即当前负面位于何位置及窗口大小.然后比较图片位置和窗口之间关系，来确定层中图片向何方向移动和如何移动。具体涉及以下两个屈性：1）通过定义层对望将对联广告图片显示在页面上.这里是document.write）方法呈现其相应的屈性.2）在页面出现滚动条时,注意document.body.scro1.11op中的SCrOIrrOP属性，以及显示对联广告层对象的StyIe-POSTop属性。5 .程序代码编写1）
19、htm1.代码2） ad-01.js代码6.任务扩展扩展：在该效果的基础上，再加上单击关闭广告效果。实例效果如图9.2所示。本实例采用另外种编程方法，实现任务要求,?惜有美用功能的质凝动条移动时联广.回冈图9.2带有关闭效果的对联广告1htm1.代码2SCrO1.IJS代码编程9.1.2QQ在线咨询链接上下浮动型代码1 .实例效果在网页M域两侧显示几个朋背滚动条移动而位置固定的图片锥接.如图9.3所示.QQQ在统咨敬我上下存动代码-WnAowaInternet,念:在收等由与授上下浮动SI代码图9.3上下浮动型广告jJojJ2 .任务要求在贞向的两I川各显示两组图片链接.当页面滚动条向上或向下
20、改变时图片相对位置同定。当双标指向图片时分别给出提示信息：QQ客服和QQ在线技术支持，单击就按时会流接到相应网页，3 .程序设计思路这种效果涉及两个方面技术：首先利用JaVaSCriPt面向刻象编程，定义图片显示在页面上：然后考虑如何设也特定图片、位置生标及其属性，页面显示要用到SetInterVaIO函数不断刷新,随时确定图片显示际性。4 .技术要点1)定义一个在层中显示链接图片及其M性设置的对望构造的数f1.oaters。,其中定义add1.tem()方法.参数包括层的id、横向坐标、纵向坐标和显示属性.2)定义控制在线QQ咨询客眼代码显示方法p1.ay(),以便随时刷新确认图片(置.5
21、.程序代码编写9.1.3任务扩展：位于页面带有FIaSh浮动广告的代码编写1 .实例效果在网页区域故示一个图片和F1.ash动画的浮动广告,随着窗I滚动条变化而位置会出于相对窗口固定位置，如图9.4所示.图9.4显示图片和F1.ash动祷的浮动广告2 .任务要求在页面左右端呈现图片广告，页面中部显示一个F1.aSh动画，当鼠标拖动滚动条时它们会动态昭示在页面相对固定的位置。3 .程序设计思路将图片和F1.ash动向分别放在层里.通过层位置捽制器在浏览器中位置，可以知道具体位置属性。其次，御要知道腐口当前的滚动情况，即当前页面位于何位置及窗口大小。然后，比较图片位置和窗11之间关系，来确定层中图
22、片向何方向移动和如何移动.4 .技术要点在页面中使用程序技术加入层，并将gif或f1.ash动画放入其中。这里另外涉及到用JaVaSCriPt程序实现网页中添加图层，5 .程序代码编写9.2鼠标控制的变化9.2.1 跟随鼠标移动的蛇形文字1 .实例效果在网页区域显小组羸随取标运动的文字串,如图9.5所示.图9.5跟随S标移动文字2 .任务要求在网页区域显示一-个谶施就标运动的文字串,并且后一个字母跟着前一个按照蛇形前进轨迹运动C3 .程序设计思路这种效果也涉及两个方面技术：首先确定鼠标当前的位置,可以通过event对望的姐性来获取：每个文字放在单独层里,然后考虑前面第1个文字位置如何跟着取标位
23、置进行移动,这里位置的变化要分开考虑其对应层的横坐标和纵坐标,这种变化一定是校博沿着蛇形擢行轨进蠹近取标的当前位置,然后让后面文字沿前一个文字路径移动即可.这里其实涉及移动动画的制作，考虑技术就要用到SetTimeoUto方法,文字逐渐移动到目的处,4 .技术要点1)双标位置获取同前面例子2)采用SEng对象的SP1.itO方法,将字符申中的好个字母提取出来，即messageArray=messge.sp1.it():并组成一个数组.其横坐标设为：varxpos=newAray();for(i=OJ=message.Iength-Iji+)xposi=-50;5 .程序代码编写9.2.2围绕鼠
24、标旋转的尾巴1 .实例效果在页面中呆现困绕夙标旋转的尾巴，其效果如图9.6所示.图9.6围绕网标旋转的尾巴2 .任务要求在网页区域叔示一串大小不一的色块,始终附究依标进行螺施状旋转.同时施转的平面不断地发生周期变化。3 .程序设计思路这种效果涉及的技术包括：鼠标移动和图形的坐标发生改变，前者已经学会；集一个具体色块的运动，涉及到数学函数的轨迹：y1.=a1.+b1.*sin(c1.+x1.);y2=a2+b2*sin(c2+x2);/参数的不同变化会产生不同轨迹4 .技术要点实际上用到技术前面已经学习。这里另外涉及到用JaVaSCr1.Pt程序动态地实现网页中添加层显示色块，并使之用者以标移动的同时按照数学函数的物理规律进行运动.5 .程序代码编写
