网站前端开发技术-CSS-JavaScript-jQuery教学教案.docx

《网站前端开发技术-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;月在单行文本框中显示第几条信息的提示ckKumcnt.forms|0j.e1.cincnts2|.va1.uc=message:找