Khoa Công Ngh Thông Tin<br />
Trư ng i H c C n Thơ<br />
<br />
Dynamic HTML<br />
<br />
Thanh Ngh<br />
dtnghi@cit.ctu.edu.vn<br />
<br />
C n Thơ<br />
10-11-2005<br />
<br />
N i dung<br />
Gi i thi u<br />
Cascading Style Sheets (DHTML CSS)<br />
Document Object Model (DHTML DOM)<br />
S ki n (DHTML events)<br />
<br />
Printed with FinePrint trial version - purchase at www.fineprint.com<br />
<br />
2<br />
<br />
Gi i thi u<br />
Cascading Style Sheets (DHTML CSS)<br />
Document Object Model (DHTML DOM)<br />
S ki n (DHTML events)<br />
<br />
3<br />
<br />
Gi i thi u v DHTML<br />
DHTML là gì ?<br />
Không là chu n nh nghĩa b i W3C mà do các nhà cung c p<br />
trình duy t Web h tr cho chu n 4.x<br />
DHTML k t h p nhi u công ngh<br />
h tr thi t k trang Web<br />
Ngư i s d ng có th nh d ng ư c s hi n th c a các thành<br />
ph n trong c a s browser<br />
HTML 4.0 tách r i vi c trình bày tài li u ra kh i c u trúc c a nó<br />
<br />
Printed with FinePrint trial version - purchase at www.fineprint.com<br />
<br />
4<br />
<br />
Gi i thi u v DHTML<br />
CSS<br />
Dùng<br />
ng style và layout c a các tài li u HTML<br />
nh d ng ch 1 l n cho m i thành ph n c a trang HTML, sau ó<br />
ta có th áp d ng ng d ng này cho các trang khác<br />
Ch c n thay i ng d ng, t t c các thành ph n khác u t<br />
ng ư c c p nh t theo<br />
<br />
DOM<br />
nh nghĩa t p h p c a nh ng i tư ng cho trang HTML thông<br />
qua ó ta có th truy c p và khai thác các i tư ng<br />
W3C Document Object Model (DOM) : cho phép chương trình<br />
và các scripts truy c p m t cách ng, c p nh t n i dung, c u trúc<br />
và nh d ng c a các tài li u HTML<br />
Javascript có th i u khi n ư c t t c các ph n t c a trang<br />
HTML<br />
5<br />
<br />
Gi i thi u v DHTML<br />
<br />
Printed with FinePrint trial version - purchase at www.fineprint.com<br />
<br />
6<br />
<br />
Gi i thi u<br />
Cascading Style Sheets (DHTML CSS)<br />
Document Object Model (DHTML DOM)<br />
S ki n (DHTML events)<br />
<br />
7<br />
<br />
DHTML CSS<br />
CSS<br />
<br />
nh v trí hi n th<br />
<br />
position:relative<br />
position:absolute<br />
Các thu c tính : left, top, visibility, z-index<br />
Ví d 1 :<br />
div<br />
{<br />
position:relative;<br />
left:10;<br />
}<br />
<br />
Printed with FinePrint trial version - purchase at www.fineprint.com<br />
<br />
8<br />
<br />
DHTML CSS<br />
CSS<br />
<br />
nh v trí hi n th<br />
<br />
Ví d 2 :<br />
div<br />
{<br />
position:absolute;<br />
left:10;<br />
}<br />
<br />
9<br />
<br />
DHTML CSS<br />
<br />
Printed with FinePrint trial version - purchase at www.fineprint.com<br />
<br />
10<br />
<br />