網(wǎng)站開發(fā)構(gòu)件

1、網(wǎng)站開發(fā)構(gòu)件講座人：苗濛日期：2010年10月30日電子科技大學(xué)信息中心學(xué)生宿舍網(wǎng)絡(luò)管理委員會(huì)研發(fā)部技術(shù)講座主要內(nèi)容網(wǎng)站軟件介紹B/S軟件體系統(tǒng)結(jié)構(gòu)動(dòng)態(tài)網(wǎng)站介紹2.動(dòng)態(tài)網(wǎng)站開發(fā)所需要的Web構(gòu)件3.開發(fā)選項(xiàng)卡實(shí)例通過實(shí)例了解Web構(gòu)件網(wǎng)站軟件簡介B/S軟件的體系結(jié)構(gòu) (Browser/Server) C/S軟件的體系結(jié)構(gòu) (Client/Server)動(dòng)態(tài)網(wǎng)站介紹B/S軟件的體系結(jié)構(gòu)左：C/S結(jié)構(gòu)的QQ客戶端登錄界面 右：B/S結(jié)構(gòu)的客戶端登錄界面 動(dòng)態(tài)網(wǎng)站介紹左：靜態(tài)網(wǎng)頁的效果演示 右：動(dòng)態(tài)網(wǎng)站的效果演示 動(dòng)態(tài)網(wǎng)站開發(fā)所需要的Web構(gòu)件客戶端瀏覽器(IE,FF)可擴(kuò)展的超文本標(biāo)記語言(XHT

2、ML)層疊樣式表(CSS) 客戶端腳本編程語言 （JavaScript）Web服務(wù)器(Apache)服務(wù)器端腳本編程語言 (PHP)數(shù)據(jù)庫管理系統(tǒng) (MySQL)可擴(kuò)展的超文本標(biāo)記語言(HTML)HTML（HyperText Markup Language ）文檔是一個(gè)放置了標(biāo)記（tags）的ASCII文本文件 是一種超文本標(biāo)記語言HTML語言是通過各種標(biāo)記來標(biāo)識(shí)文檔的結(jié)構(gòu)，以及標(biāo)識(shí)超鏈接、圖片、文字、段落、表單等信息。層疊樣式表HTML是通過標(biāo)簽標(biāo)識(shí)頁面的結(jié)構(gòu)和顯示頁面內(nèi)容使用HTML標(biāo)簽所標(biāo)識(shí)的內(nèi)容，需要通過層疊樣式表CSS（Cascading Style Sheets）來布局與美化。樣式

3、可定義HTML元素如何被顯示，可以有效地對(duì)頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。 客戶端腳本編程語言 （JavaScript）HTML用來在頁面中顯示數(shù)據(jù)CSS用來對(duì)頁面進(jìn)行布局與美化客戶端腳本語言則是一種有關(guān)因特網(wǎng)瀏覽器行為的編程，能夠?qū)崿F(xiàn)用戶和瀏覽器之間的互動(dòng)性。這樣才能有能力傳遞更多的動(dòng)態(tài)網(wǎng)站內(nèi)容。開發(fā)頁面特效 Web服務(wù)器保存并發(fā)布網(wǎng)站的服務(wù)器軟件服務(wù)器端腳本編程語言 （PHP）服務(wù)器端腳本是用來協(xié)助Web服務(wù)器在服務(wù)器端完成業(yè)務(wù)工作的編程語言是對(duì)Web服務(wù)器功能的擴(kuò)展，并外掛在Web服務(wù)器上一起工作。 數(shù)據(jù)庫管理系統(tǒng) （MySQL）網(wǎng)頁上的內(nèi)容幾乎都是來自數(shù)據(jù)庫

4、數(shù)據(jù)庫管理系統(tǒng)也是一種軟件 它負(fù)責(zé)存儲(chǔ)和管理網(wǎng)站所需的內(nèi)容數(shù)據(jù)，包括文字、圖片以及聲音等數(shù)據(jù)內(nèi)容 實(shí)例開發(fā)（網(wǎng)頁選項(xiàng)卡）合作開發(fā)過程使用數(shù)據(jù)庫去存儲(chǔ)網(wǎng)頁內(nèi)容使用HTML標(biāo)識(shí)文檔結(jié)構(gòu)和添加內(nèi)容使用CSS對(duì)頁面進(jìn)行布局和美化使用JavaScript完成用戶與瀏覽器交互，實(shí)現(xiàn)頁面特效使用Web服務(wù)器（Apache）發(fā)布到網(wǎng)上通過瀏覽器進(jìn)行顯示代碼庫文件card.htmlCss/card.cssJs/card.js在數(shù)據(jù)庫中添加一些數(shù)據(jù)HTML網(wǎng)頁選項(xiàng)卡 第一頁 第二頁 第三頁 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