Tự học lập trình HTML và JS 2

Khoa Công Nghệ Thông Tin Trường Đại Học Cần Thơ Dynamic HTML Đỗ Thanh Nghị dtnghi@cit.ctu.edu.vn Cần Thơ 10-11-2005 Nội dung Giới thiệu  Cascading Style Sheets (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Printed with FinePrint trial version - purchase at www.fineprint.com Giới thiệu  Cascading Style Sheets (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Giới thiệu DHTML  DHTML ?     Không chuẩn định nghĩa W3C mà nhà cung cấp trình duyệt Web hỗ trợ cho chuẩn 4.x DHTML kết hợp nhiều công nghệ để hỗ trợ thiết kế trang Web Người sử dụng định dạng hiển thị thành phần cửa sổ browser HTML 4.0 tách rời việc trình bày tài liệu khỏi cấu trúc Printed with FinePrint trial version - purchase at www.fineprint.com Giới thiệu DHTML  CSS     Dùng để định style layout tài liệu HTML Định dạng lần cho thành phần trang HTML, sau ta áp dụng định dạng cho trang khác Chỉ cần thay đổi định dạng, tất thành phần khác tự động cập nhật theo DOM    Định nghĩa tập hợp đối tượng cho trang HTML thơng qua ta truy cập khai thác đối tượng W3C Document Object Model (DOM) : cho phép chương trình scripts truy cập cách động, cập nhật nội dung, cấu trúc định dạng tài liệu HTML Javascript điều khiển tất thành phần trang Web Giới thiệu  Cascading Style Sheets (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Printed with FinePrint trial version - purchase at www.fineprint.com DHTML CSS  CSS định vị trí hiển thị     position:relative position:absolute Các thuộc tính : left, top, visibility, z-index Ví dụ : div { position:relative; left:10; } DHTML CSS  CSS định vị trí hiển thị  Ví dụ : div { position:absolute; left:10; } Printed with FinePrint trial version - purchase at www.fineprint.com DHTML CSS DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 10 DHTML CSS 11 DHTML CSS  CSS cho phép hiển thị  Ví dụ : h1 { visibility:visible; }  Ví dụ : h1 { visibility:hidden; } Printed with FinePrint trial version - purchase at www.fineprint.com 12 DHTML CSS 13 DHTML CSS  CSS định dạng số z    Dùng để đặt phần tử sau phần tử khác, mặc định Chỉ số z lớn độ ưu tiên cao Ví dụ : h1 { z-index:1; } h2 { z-index:2; } Printed with FinePrint trial version - purchase at www.fineprint.com 14 DHTML CSS 15 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 16 DHTML CSS  CSS định dạng hiển thị text hình ảnh  Ví dụ : h1 { width:100%; filter:glow; } 17 DHTML CSS  CSS định dạng hiển thị text hình ảnh Printed with FinePrint trial version - purchase at www.fineprint.com 18 DHTML CSS  CSS định dạng hiển thị text hình ảnh 19 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 20 DHTML CSS 21 DHTML CSS  CSS định dạng màu   background-attachment:scroll background-attachment:fixed Printed with FinePrint trial version - purchase at www.fineprint.com 22 DHTML CSS 23 Giới thiệu  Cascading Style Sheets (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Printed with FinePrint trial version - purchase at www.fineprint.com 24 DHTML DOM  DOM    Định nghĩa tập hợp đối tượng cho trang HTML thơng qua ta truy cập khai thác đối tượng Javascript truy cập cách động, cập nhật nội dung, cấu trúc định dạng tài liệu HTML Ví dụ : My header document.getElementById('header').style.color="red" 25 DHTML DOM Printed with FinePrint trial version - purchase at www.fineprint.com 26 DHTML DOM 27 DHTML DOM Printed with FinePrint trial version - purchase at www.fineprint.com 28 DHTML DOM 29 DHTML DOM Printed with FinePrint trial version - purchase at www.fineprint.com 30 DHTML DOM 31 DHTML DOM Printed with FinePrint trial version - purchase at www.fineprint.com 32 DHTML DOM 33 Giới thiệu  Cascading Style Sheets (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Printed with FinePrint trial version - purchase at www.fineprint.com 34 DHTML events 35 DHTML events Printed with FinePrint trial version - purchase at www.fineprint.com 36 DHTML events 37 DHTML events Printed with FinePrint trial version - purchase at www.fineprint.com 38 DHTML events 39 DHTML events Printed with FinePrint trial version - purchase at www.fineprint.com 40 Ví dụ DHTML  http://www.w3schools.com/dhtml/dhtml_examples.asp  Printed with FinePrint trial version - purchase at www.fineprint.com 41 42 Printed with FinePrint trial version - purchase at www.fineprint.com 43 44 Printed with FinePrint trial version - purchase at www.fineprint.com 45 46 Printed with FinePrint trial version - purchase at www.fineprint.com 47 48 ... version - purchase at www.fineprint.com 26 DHTML DOM 27 DHTML DOM Printed with FinePrint trial version - purchase at www.fineprint.com 28 DHTML DOM 29 DHTML DOM Printed with FinePrint trial version... version - purchase at www.fineprint.com 22 DHTML CSS 23 Giới thiệu  Cascading Style Sheets (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Printed with FinePrint trial... (DHTML CSS)  Document Object Model (DHTML DOM)  Sự kiện (DHTML events)  Giới thiệu DHTML  DHTML ?     Không chuẩn định nghĩa W3C mà nhà cung cấp trình duyệt Web hỗ trợ cho chuẩn 4.x DHTML