Tài liệu WEB1012 - Slide 2

  • Số trang: 29 |
  • Loại file: PDF |
  • Lượt xem: 137 |
  • Lượt tải: 0
xomthong

Tham gia: 05/05/2016

Mô tả:

WEB1012 - Slide 2
Bài 2 (Cascading Style Sheet) CuuDuongThanCong.com WEB1012 - Xây dựng trang Web Bài 2 https://fb.com/tailieudientucntt NHẮC LẠI BÀI TRƯỚC  Những khái niệm về website: • Thành phần của trang web • Tên miền, địa chỉ IP • Client – server  Công việc thiết kế website  Những kiến thức cơ bản về HTML 3 CuuDuongThanCong.com https://fb.com/tailieudientucntt MỤC TIÊU BÀI HỌC  Làm quen với CSS (Cascading Style Sheets)  Khởi tạo CSS: • Khởi tạo với Notepad • Các cách viết CSS: • • • Embedded Inline Links  Bố cục trang web với CSS 4 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS (Cascading Style Sheet) CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS (Cascading Style Sheet)  Được sử dụng để thể hiện thêm các thuộc tính cho thành phần HTML  Được thêm vào thành phần HTML bằng các cách sau: • Inline – được viết luôn trong thẻ HTML • Internal – viết trong thẻ  External style sheet: 10 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4  2 cách tạo CSS trong Dreamweaver: Sử dụng môi trường Design với các bảng liên quan CSS Sử dụng môi trường soạn thảo Code 12 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4  Sử dụng môi trường Design với các bảng liên quan:  1. sử dụng bảng INSERT kết hợp với bảng PROPERTIES, hộp thoại CSS Rule definition Common: Layout Forms Data Spry InContext Edditing Text Favorites Cung cấp các chức năng cho phép chèn hình ảnh, form, nội dung đa phương tiện vào web 13 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4  Ví dụ: định nghĩa CSS cho thẻ

: • Bước 1: sử dụng bảng INSERT chèn thẻ

, nhập nội dung bất kỳ 14 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES để chỉnh sửa style (CSS) cho thẻ

15 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Bước 3: đặt giá trị cho các thuộc tính trong hộp thoại CSS Rule definition Cột phân loại các thuộc tính Giá trị của các thuộc tính 16 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4 Thiết lập các giá trị liên quan 17 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Kết quả: • Chỉnh sửa style với bảng CSS STYLES: • Đây là bảng hiển thị toàn bộ thuộc tính của các thành phần trên web 18 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4  Ví dụ: nhấn chuột chọn nội dung thẻ

, thuộc tính và giá trị style của thẻ sẽ được hiển thị trên bảng CSS STYLES Vùng hiển thị thuộc tính và giá trị Vùng chỉnh sửa giá trị của các thuộc tính 19 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4  Sử dụng môi trường soạn thảo mã Code: Viết trong cặp thẻ ở HTML Viết mã CSS Nội tuyến (inline) Viết trong một file .css riêng biệt 20 CuuDuongThanCong.com https://fb.com/tailieudientucntt KHỞI TẠO CSS VỚI DREAMWEAVER CS4 • Viết CSS trong cặp thẻ … 21 CuuDuongThanCong.com https://fb.com/tailieudientucntt

- Xem thêm -