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

《网站前端开发技术-CSS-JavaScript-jQuery教学教案.docx》由会员分享，可在线阅读，更多相关《网站前端开发技术-CSS-JavaScript-jQuery教学教案.docx（58页珍藏版）》请在优知文库上搜索。

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、。10） XM1.简介XM1.英文全称EXtenSibIeMarkup1.anguage.译为可扩展标记语言。XM1.ift设计为传输和存储数据，其焦点是数据的内容,而HTM1.用来显示数据，其焦点是数据的外观.二者不同在于HTM1.旨在显示信息，而XM1.旨在传输侑息.XM1.是万维网联盟W3CWor1.dWideWebConsortium）的推荐标准.大批软件开发商采用这个标准.目前XM1.在Web中起到的作用不会亚干一直作为Web基石的HTM1.XM1.无所不在，XM1.及各种应用程序之间进行数据传输的最常用的工具,并目在信息存储和描述领域变得越来越流行。XM1.应用在Web开发的许多方

11、面,常用于简化数据的存储和共享.例如,XM1.把数据从HTM1.分离出来,如果需要在HTM1.文档中显小动态数据,那么每当数据改变时将花费大量的时间来编辑HTM1.-通过XM1.数据能够存储在独立的XM1.文件中.这样就Ur以斤注于使用HTM1.进行布局和显示，并确保修改底层数据不再需要XjHTM1.进行仟何的改变,通过使用几行JaVaSCriPt,你就可以读取一个外部XM1.文件，然后更新HTM1.中的数据内容.XM1.简化数据传输,通过XM1.,可以在不兼容的系统之间轻松地交换数据.对开发人员来说其中一项最费时的挑战，是在因特网上的不我容系统之间交换数据.由于可以通过各种不兼容的应用程序来

12、读取数据,以XM1.交换数据降低了这种复杂性.XM1.简化平台的变更,升级到新的系统（帔件或软件平台）总是非常责时的，必须转换大量的数据，不兼容的数据经常会丢失。XM1.数据以文本格式存储，这使汨XM1.在不损失数据的情况下，更容易犷展或升欲到新的操作系统、新应用程序或新的浏览器.11）服务器脚本技术和使用SQ1.管理数据ASP（ActiveServerPages）和PHP等,都是用于创建动态交互性站点的强行力的唳务器给脚本语言这些脚本代码只能在服务器端执行,无法在浏览器中查看ASP或PHP的代码，只能看到出它们输出的纯粹HTM1.代码这样的脚本程序主要用于.动态地编辑、诙变或者添加页面的任何

13、内容；对由用户从HTM1.表单提交的自彻或者数据作出响应：访问数据或拧数据除.并向浏览器返I可结果：为不同的用户定制网页，提高这些页面的可用性等等.SQ1.,指结何化杳询语言，足用于访问和处理数据库的标准的计算机语言。使用SQ1.能步访问和处理数据系统中的数据,这类数据库包括:OraC1.e,Sybase,SQ1.Server,DB2,Access等等，使用它可以面向数据库执行杳询：可从数据库取回数据：可在数据阵中插入新的记录：可见痂数据库中的数据：可从数据库州除记录：可创建新数掘座：可在数据旅中创建新衣：可在数据库中创建存储过程：可在数据库中创建视图：可以设置表、存储过程和视图的权限等等，在

14、进行网站后台数据处理时，结合ASP或PHP的脚本程序,就“以使或杂的数据信息得到计算、控制，并在网页上显示出来提供给用户。4 .项目任务连接互联网,访问几个典型网站.并对其进行剖析,深入了解网站的内容和结构特点.这里对“稚虎中Br网站进行剖析，作为示例供大家参考.在浏览器中输入44雅虎中BF网JihttP:CmyahO进入网站主页，如图0.1所示。j-Mt-*工PMXtWXA1.t)Wtf-JJ5JnR&-J白J图0.1稚虎中IH网站主页二对该网站进行如下剖析:网站名床雅虎中国主题大型门户搜索网站，拥有互联网最全面的服务功能给网民提供多元化的网络服务。拥有三大核心业务功能：一个是电子时件：第：

15、个是搜索：笫三个是社区，提供生活服务引擎.是以全网搜索为基础，为生活服务消费者营造的一个海奴、方使、可伯的生活服务平台.用户群亿万中文用户总体风格整洁，简单，色彩较少，以突出功能为主信息内容电子邮箱焦点新闻、热门事件音乐图片知识空论定搜索热点家庭服务信息租房买房信息餐馔美食信息休闲媒乐信息工作教行信息旅游票务信息健康保健信刖交友聚会信息商务服务信息购物打折信息栏目结构5 .任务要求剖析一个网站，主要在于分析清楚该网站的定位目标、本即是什么，网站的功能情况、整体风格，以及网站的内容安排和栏目结构,6 .分析思路分析一个网站，首先应从主超着手，网站的主题是什么，具备哪些功能.它的用户群有哪些.总体风格有何特点：再进一步分析网站包括哪技信息内容.这些信息内容是如何组织分类的，形成了哪些栏目结构；再进一步观察其页面的布局形式，信息内容采用了哪些表现形式。这样，由点到面，一步步逐层深入，真正地详细了解一个网站。7 .技术要点剖析网站,并非是简单地浏览一下各个网页走7观花应该带着问题以专业制作人员的角度去访问网页.Internet上的网站数收，可以说是E速增长,非常庞大。按照其功能可以分成几大类型：门户网