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

Bài giảng Lập trình web - Chương 2: Dynamic HTML bao gồm những nội dung về Cascading Style Sheets (DHTML CSS), Document Object Model (DHTML DOM); sự kiện (DHTML events). Mời các bạn tham khảo bài giảng để bổ sung thêm kiến thức về lĩnh vực này.

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 để địng style layout tài liệu HTML Định dạng lần cho thành phần trang HTML, sau ta áp dụng địng dạng cho trang khác Chỉ cần thay đổi địng 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 phần tử trang HTML Giới thiệu DHTML 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) 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; } Printed with FinePrint trial version - purchase at www.fineprint.com DHTML CSS CSS định vị trí hiển thị Ví dụ : div { position:absolute; left:10; } DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 10 DHTML CSS 11 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 12 DHTML CSS CSS cho phép hiển thị Ví dụ : h1 { visibility:visible; } Ví dụ : h1 { visibility:hidden; } 13 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 14 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; } 15 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 16 DHTML CSS 17 DHTML CSS CSS định dạng hiển thị text hình ảnh Ví dụ : h1 { width:100%; filter:glow; } 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 CSS định dạng hiển thị text hình ảnh Printed with FinePrint trial version - purchase at www.fineprint.com 20 DHTML CSS 21 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 22 DHTML CSS CSS định dạng màu background-attachment:scroll background-attachment:fixed 23 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 24 Giới thiệu Cascading Style Sheets (DHTML CSS) Document Object Model (DHTML DOM) Sự kiện (DHTML events) 25 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" 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 DHTML DOM Printed with FinePrint trial version - purchase at www.fineprint.com 34 Giới thiệu Cascading Style Sheets (DHTML CSS) Document Object Model (DHTML DOM) Sự kiện (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 DHTML events 41 Ví dụ DHTML http://www.w3schools.com/dhtml/dhtml_examples.asp Printed with FinePrint trial version - purchase at www.fineprint.com 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 Printed with FinePrint trial version - purchase at www.fineprint.com 49 ... 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... 20 DHTML CSS 21 DHTML CSS Printed with FinePrint trial version - purchase at www.fineprint.com 22 DHTML CSS CSS định dạng màu background-attachment:scroll background-attachment:fixed 23 DHTML... < /html> 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