Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 4 : Sử dụng CSS + Javascript - Trần Duy Hoàng

Nội dung text: Bài giảng môn Lập trình và Thiết kế Web 1 - Bài 4 : Sử dụng CSS + Javascript - Trần Duy Hoàng

1. Bài 4 : Sử dụng CSS + Javascript Môn : Lập trình và Thiết kế Web 1 KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN 2007 Authored by: Trần Duy Hoàng - Lương Vĩ Minh
2. Bài 4 : Sử dụng CSS + Javascript Môn : Lập trình và Thiết kế Web 1 Contents 1. Lợi ích khi sử dụng CSS trong thiết kế web: 2 2. CSS (Cascading Style Sheet): 2 3. CSS dạng Linked: 3 Cú pháp : 3 Cách định nghĩa css trong Dreamweaver 3 Liên kết (link) file css vào file web .htm từ Dreamweaver: 6 Áp dụng Mẫu định dạng trong file css cho nội dung trang web: 6 4. Bài tập 8 Bài tập 1 : 8 Bài tập 2 : 8 Bài tập 3 : 8 9/26/2007 | ng CSS +Javascript CSS ng ụ d ử BàiS 4 : 1
3. 1. Lợi ích khi sử dụng CSS trong thiết kế web: Hãy thiết kế trang web về các bảng Thời khóa biểu của 1 trường Đại học: TKB của Khoa CNTT: Thứ 2 Thứ 3 Thư 4 Thứ 5 Thứ 6 Thứ 7 CN Tiết 1 TKWeb 1 LTĐT TK CSDL Tiết 2 HĐH TK CSDL TKWeb 1 TKWeb 1 CSDL Tiết 3 CSDL LTĐT HĐH TK CSDL LTĐT TKWeb 1 Tiết 4 CSDL HĐH TKB của khoa Hóa, khoa Lý, khoa Toán, khoa Sinh, Với ví dụ trên, ta cần định dạng văn bản nhiều nơi. Khi có nhu cầu thay đổi định dạng (VD: thay màu s ắc cho từng môn khác nhau) thì phải tốn nhiều công sức và thời gian. Trước nhu cầu vậy, ta cần tạo ra các mẫu định dạng chung (cho từng môn) rồi áp dụng các mẫu định dạng cho từng môn học. Khi có nhu cầu thay đổi, ta chỉ cần thay đổi trên mẫu. Do các định dạng đã được định nghĩa trong tập tin css, nên phần mã HTML của trang web được thu gọn lại nhiều, giúp cho việc kiểm soát mã HTML được dễ dàng hơn. 2. CSS (Cascading Style Sheet): Là một dạng tài liệu chứa các thông tin về các mẫu định dạng mà tài liệu thông tin này có thể được nhiều trang web sử dụng. Các mẫu này dùng để định nghĩa cách thức hiển thị (đường kẻ khung, khoảng cách giữa các dòng, ) và đ ịnh dạng (màu chữ, kiểu chữ, màu nền, ) của phần nội dung của trang web. Chú ý: Có một số trình duyệt không hỗ trợ CSS. Các loại CSS: (gồm 3 loại) Loại Định nghĩa – Cú pháp – Ví dụ Độ ưu tiên Format Định dạng bình thường. 1 Được định nghĩa ngay tại thẻ HTML cần định dạng. Inline Phạm vi sử dụng: Tại thẻ HTML được định nghĩa. 2 Cú pháp, VD (Xem thêm trong trang 2 Bài 3 - HDTH). Được định nghĩa ở bên trong thẻ . 9/26/2007 | Embeded Phạm vi sử dụng: Trong file .htm đã định nghĩa. 3 CSS Cú pháp, VD (Xem thêm trong trang 3 Bài 3 - HDTH). Được định nghĩa ở trong 1 file .css riêng lẽ. Javascript Phạm vi sử dụng: Áp dụng cho các trang web liên kết đến Linked 4 file .css này. Đây là dạng css được sử dụng nhiều nhất. Cú pháp, VD (Xem phần tiếp theo) ng CSS ngCSS + ụ d Chú ý: Nếu cùng một nội dung trên trang web mà sử dụng nhiều kiểu định dạng thì nội dung đó sẽ áp dụng định dạng có độ ưu tiên cao nhất. ử BàiS 4 : 2
4. 3. CSS dạng Linked: Đây là loại css được sử dụng nhiều nhất. Nó dùng để định nghĩa các mẫu định dạng và lưu trong một file riêng lẽ (có phần mở rộng .css). Chỉ những trang web cần sử dụng các mẫu thì sẽ liên kết đến file css có chứa mẫu đó. Cú pháp : Cú pháp Giải thích Ví dụ .Selector1 Selector: VD1: Định nghĩa mẫu cho thẻ HTML { + Tên thẻ HTML (nếu mẫu này p Property1: Value; định dạng cho thẻ). { Property2: Value; + Tên mẫu mới do người dùng color : #008000; } định nghĩa (các tên này không font-weight : bold được trùng lập nhau trong cùng } .Selector2 một file css). { VD2: Định nghĩa mẫu mới Property1: Value; .Mau1 Property2: Value; { } color : #008000; font-weight : bold } Cách định nghĩa css trong Dreamweaver - Bước 1: Tạo file css mới hoặc mở file css có sẳn để chèn thêm mẫu định dạng mới. File New 9/26/2007 Basic page | Chọn CSS ng CSS +Javascript CSS ng ụ d ử BàiS 4 : 3
5. - Bước 2: Định nghĩa mẫu định dạng mới. Chọn Menu Window - CSS Style Chọn nút Add Class : định nghĩa một mẫu định dạng mới (có thể áp dụng cho bất kì thẻ Tag nào) Tag : định nghĩa lại mẫu định dạng cho 1 Tag nhất định Advanced : định nghĩa mẫu định dạng cho những Taq có ID nhất định. Name : tên của định dạng. 9/26/2007 | Javascript ng CSS ngCSS + ụ d ử BàiS 4 : 4
6. Nhập các thông tin định dạng. Kết quả ta được một định nghĩa mẫu mới. - Bước 3: Định nghĩa thêm các mẫu mói nếu cần (quay lại bước 2). - Bước 4: Lưu file css (File Save). 9/26/2007 | ng CSS +Javascript CSS ng ụ d ử BàiS 4 : 5
7. Liên kết (link) file css vào file web .htm từ Dreamweaver: Chú ý: Phần này chỉ thực hiện khi file css chưa từng được liên kết vào file web.htm. Nếu file css đã liên kết vào file web htm, ta bỏ qua bước này. - Bước 1: Mở trang web.htm cần tạo liên kết đến file .css - Bước 2: Tạo liên kết. Từ menu Text CSS Style Attach Style Sheet Chọn file .css cần liên kết. Áp dụng Mẫu định dạng trong file css cho nội dung trang web: (áp dụng cho định dạng ô trong bảng Thời khóa biểu) Thứ 2 Thứ 3 Thư 4 Thứ 5 Thứ 6 Thứ 7 CN Tiết 1 TKWeb 1 LTĐT TK CSDL Tiết 2 HĐH TK CSDL TKWeb 1 TKWeb 1 CSDL Tiết 3 CSDL LTĐT HĐH TK CSDL LTĐT TKWeb 1 Tiết 4 CSDL HĐH - Bước 1: Chọn ô trên bảng cần áp dụng mẫu Mau1 trong file formatTable.css - Bước 2: Chọn cell cần định dạng. Vào cửa sổ Property chọn style : style1 - Bước 3: Từ cửa sổ Modify Style, chọn tên mẫu cần áp dụng trong danh sách Class Ok - Bước 4: Kiển tra lại kết quả áp dụng mẫu. Chọn ô vừa mới áp dụng mẫu, chuyển qua chế độ Code. 9/26/2007 | Javascript ng CSS ngCSS + ụ d ử BàiS 4 : 6
8. Bảng so sánh mã lệnh HTML cho 1dòng trong thời khóa biểu: Không sử dụng css, chỉ sử dụng định dạng bình thường Sử dụng CSS linked 9/26/2007 | ng CSS +Javascript CSS ng ụ d ử BàiS 4 : 7
9. 4. Bài tập Bài tập 1 : Hoàn thành bài ví dụ Thời khóa biểu Bài tập 2 : Làm highline menu cho trang web (kết hợp Java script) Tham khảo đoạn mã lệnh sau. HightLight MENU function HightLight(what, onoff) { var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); what.className = className; } 9/26/2007 | Bài tập 3 : Javascript Sử dụng CSS cho tất cả trang web đã làm. Tổ chức thư mục lưu file css. Mỗi loại định dạng (VD: Định dạng cho table, định dạng cho font, ngCSS + ụ d định dạng cho paragraph, định dạng border cho hình, .) lưu trong một file css riêng. ử BàiS 4 : 8