网站开发构件

1、网站开发构件讲座人：苗濛日期：2010年10月30日电子科技大学信息中心学生宿舍网络管理委员会研发部技术讲座主要内容网站软件介绍B/S软件体系统结构动态网站介绍2.动态网站开发所需要的Web构件3.开发选项卡实例通过实例了解Web构件网站软件简介B/S软件的体系结构 (Browser/Server) C/S软件的体系结构 (Client/Server)动态网站介绍B/S软件的体系结构左：C/S结构的QQ客户端登录界面 右：B/S结构的客户端登录界面 动态网站介绍左：静态网页的效果演示 右：动态网站的效果演示 动态网站开发所需要的Web构件客户端浏览器(IE,FF)可扩展的超文本标记语言(XHT

2、ML)层叠样式表(CSS) 客户端脚本编程语言 （JavaScript）Web服务器(Apache)服务器端脚本编程语言 (PHP)数据库管理系统 (MySQL)可扩展的超文本标记语言(HTML)HTML（HyperText Markup Language ）文档是一个放置了标记（tags）的ASCII文本文件 是一种超文本标记语言HTML语言是通过各种标记来标识文档的结构，以及标识超链接、图片、文字、段落、表单等信息。层叠样式表HTML是通过标签标识页面的结构和显示页面内容使用HTML标签所标识的内容，需要通过层叠样式表CSS（Cascading Style Sheets）来布局与美化。样式

3、可定义HTML元素如何被显示，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 客户端脚本编程语言 （JavaScript）HTML用来在页面中显示数据CSS用来对页面进行布局与美化客户端脚本语言则是一种有关因特网浏览器行为的编程，能够实现用户和浏览器之间的互动性。这样才能有能力传递更多的动态网站内容。开发页面特效 Web服务器保存并发布网站的服务器软件服务器端脚本编程语言 （PHP）服务器端脚本是用来协助Web服务器在服务器端完成业务工作的编程语言是对Web服务器功能的扩展，并外挂在Web服务器上一起工作。 数据库管理系统 （MySQL）网页上的内容几乎都是来自数据库

4、数据库管理系统也是一种软件 它负责存储和管理网站所需的内容数据，包括文字、图片以及声音等数据内容 实例开发（网页选项卡）合作开发过程使用数据库去存储网页内容使用HTML标识文档结构和添加内容使用CSS对页面进行布局和美化使用JavaScript完成用户与浏览器交互，实现页面特效使用Web服务器（Apache）发布到网上通过浏览器进行显示代码库文件card.htmlCss/card.cssJs/card.js在数据库中添加一些数据HTML网页选项卡 第一页 第二页 第三页 cssbody font-size:12px;#main width:300px;height:200px;#main h3

5、 width:80px;height:25px;background:#ddd;float:left;margin:0px;padding:0px;text-align:center;line-height:25px;font-size:12px;margin-right:2px;border:2px solid white;a color:white;#main #content background:#888;width:300px;height:175px;float:left;#tit .titin border:2px solid #888;background:#888;javas

6、cript$(function()$(#content).load(card.php?cid=1);var dt=null;$(#main #tit h3).mouseover(function()var obj=$(this);dt=setTimeout(function()obj.addClass(titin).siblings(h3).removeClass(titin);$(#content).load(obj.children(a).eq(0).attr(href);, 300).mouseout(function()clearTimeout(dt);););phpquery(sel

7、ect id, title from card where cid=$cid);while($row=$result-fetch_assoc()echo ;echo .$rowtitle.;echo ;mysqlcreate table card(id int,cid int,title varchar(60);insert into card(id, cid, title) values(1, 1, 1111111111111111111);insert into card(id, cid, title) values(2, 1, 2222222222222222222);insert in

8、to card(id, cid, title) values(3, 1, 3333333333333333333);insert into card(id, cid, title) values(4, 2, 444444444444444444);insert into card(id, cid, title) values(5, 2, 555555555555555555);insert into card(id, cid, title) values(6, 2, 666666666666666666);insert into card(id, cid, title) values(7, 3, 7777777777777777);insert into card(id, cid, title) values(8, 3, 8888888888888