Bài giảng Lập trình web - Chương 2: Dynamic HTML

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 />