bài 2 html - làm quen với css – định dạng style cho trang web và bố cục trang web

NHẮC LẠI BÀI TRƯỚCNhữ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 & XHTML Làm quen với

Trang 1

BÀI 2 HTML - LÀM QUEN VỚI CSS – ĐỊNH DẠNG STYLE

CHO TRANG WEB & BỐ CỤC TRANG WEB

Trang 2

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 & XHTML

Làm quen với Adobe Dreamweaver CS4

Khởi tạo một trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh

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 & XHTML

Làm quen với Adobe Dreamweaver CS4

Khởi tạo một trang web và làm việc với những thành phần trên trang web: văn bản, hình ảnh

Trang 3

MỤC TIÊU BÀI HỌC

Làm quen với HTML:

Khái niệm, cấu trúc

Cách viết mã HTML với môi trường soạn thảo

(notepad, Dreamweaver, …)

Làm việc với những thành phần:

• Văn bản

• Hình ảnh Làm quen với CSS

Khởi tạo CSS với Dreamweaver CS4

Bố cục trang web với CSS

Làm quen với HTML:

Khái niệm, cấu trúc

Cách viết mã HTML với môi trường soạn thảo

(notepad, Dreamweaver, …)

Làm việc với những thành phần:

• Văn bản

• Hình ảnh Làm quen với CSS

Khởi tạo CSS với Dreamweaver CS4

Bố cục trang web với CSS

Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 3

Trang 4

HTML

Trang 5

HTML – KHÁI NIỆM – CẤU TRÚC

HTML là ngôn ngữ đánh dấu (không phải ngôn ngữ

lập trình) - Hyper Text Markup Language

Sử dụng cấu trúc thẻ để mô tả trang web

(webpage: *.html)

Thẻ HTML:

Cấu trúc thẻ: <từ khóa>

Thường đi theo cặp: <html> … </html>

Nội dung của thẻ có thể là một đoạn ký tự hoặc một thẻ khác

HTML là ngôn ngữ đánh dấu (không phải ngôn ngữ

lập trình) - Hyper Text Markup Language

Sử dụng cấu trúc thẻ để mô tả trang web

(webpage: *.html)

Thẻ HTML:

Cấu trúc thẻ: <từ khóa>

Thường đi theo cặp: <html> … </html>

Nội dung của thẻ có thể là một đoạn ký tự hoặc một thẻ khác

Trang 6

Trang 7

Trang 8

HTML – LÀM VIỆC VỚI VĂN BẢN

Trang 9

Thẻ đoạn văn: <p>nội dung hiển thị</p>

Trang 10

Trang 11

Tạo danh sách (list) với HTML:

2 loại danh sách: danh sách thứ tự & danh sách

không thứ tự

Trong danh sách có thể chứa danh sách con

Trang 12

Định nghĩa bởi thẻ <ul>

Định nghĩa bởi thẻ <ol>

Trang 13

HTML – LÀM VIỆC VỚI HÌNH ẢNH

Chèn hình ảnh vào trang web:

<img src="đường dẫn tới ảnh" alt="…."/>

Đường dẫn tới ảnh:

-Đường dẫn tuyệt đối

- Đường dẫn tương đối

- Dạng link

Xác định văn bản thay thế,nếu hình ảnh không hiển thị

<img src="html-code.jpg" alt="Hình

minh họa" border="0" width="320"

height="319"/>

Trang 14

HTML – LÀM VIỆC VỚI TABLE

Sử dụng thẻ <table></table> để định dạng bảng

trong HTML:

Được chia thành nhiều hàng: <tr>…</tr>

Mỗi hàng được chia thành ngăn dữ liệu: <td>…</td>

Trang 15

HTML – LÀM VIỆC VỚI THẺ DIV

Thẻ <div> định nghĩa một bộ phần hoặc một phần trong tài liệu HTML

Được sử dụng cho nhóm khối thành phần trên web,

<div>nội dung …</div>

</body>

</html>

Trang 16

CASCADING STYLE SHEETS (CSS)

Trang 17

KHÁI NIỆM

Là những tệp tin/đoạn text, được kết hợp với 1 hoặc nhiều tệp tin HTML để định nghĩa các quy tắc cho

việc hiển thị trang web

CSS tạo ra định nghĩa cho các thành phần trong

Định nghĩa trong một file css riêng biệt

Là những tệp tin/đoạn text, được kết hợp với 1 hoặc nhiều tệp tin HTML để định nghĩa các quy tắc cho

việc hiển thị trang web

CSS tạo ra định nghĩa cho các thành phần trong

Định nghĩa trong một file css riêng biệt

Trang 18

KHÁI NIỆM

Một số quy tắc của CSS:

Quy tắc kế thừa : nếu luật CSS được áp dụng cho thẻ cha thì cũng được mặc định áp dụng cho các thẻ

con/nội dung trong đó

Quy tắc tầng : nếu có 2 luật CSS, một luật áp dụng

cho thẻ cha và một luật áp dụng cho thẻ con thì luật thứ 2 sẽ được áp dụng cho thẻ con

Quy tắc dựa trên mức độ : nếu có 2 luật CSS cùng

được áp dụng cho một đối tượng, luật nào có giá trị weight/specific lớn hơn thì sẽ được áp dụng

Quy tắc !important : nếu luật được thêm từ khóa

"!important" thì nó sẽ được áp dụng, không phụ

thuộc vào các quy tắc khác

Một số quy tắc của CSS:

Quy tắc kế thừa : nếu luật CSS được áp dụng cho thẻ cha thì cũng được mặc định áp dụng cho các thẻ

con/nội dung trong đó

Quy tắc tầng : nếu có 2 luật CSS, một luật áp dụng

cho thẻ cha và một luật áp dụng cho thẻ con thì luật thứ 2 sẽ được áp dụng cho thẻ con

Quy tắc dựa trên mức độ : nếu có 2 luật CSS cùng

được áp dụng cho một đối tượng, luật nào có giá trị weight/specific lớn hơn thì sẽ được áp dụng

Quy tắc !important : nếu luật được thêm từ khóa

"!important" thì nó sẽ được áp dụng, không phụ

thuộc vào các quy tắc khác

Trang 19

KHÁI NIỆM

4 loại thẻ chọn trong CSS:

Classes : Đối tượng áp dụng luật là các thẻ div thuộc class tương ứng

ứng

Pseudo-class : Đối tượng áp dụng luật là các lớp giả

đã được định nghĩa sẵn như: link, active, hover, ….

4 loại thẻ chọn trong CSS:

Classes : Đối tượng áp dụng luật là các thẻ div thuộc class tương ứng

ứng

Pseudo-class : Đối tượng áp dụng luật là các lớp giả

đã được định nghĩa sẵn như: link, active, hover, ….

Trang 20

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the

style.</p>

</body>

</html>

Trang 22

KHỞI TẠO CSS VỚI DREAMWEAVER CS4

Trang 23

2 cách tạo CSS trong Dreamweaver:

CSS

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

Trang 24

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:

LayoutFormsDataSpryInContext EdditingText

Favorites

Trang 25

Ví dụ: định nghĩa CSS cho thẻ <h1>:

Bước 1: sử dụng bảng INSERT chèn thẻ <h1>, nhập nội dung bất kỳ

Trang 26

Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES để chỉnh sửa style (CSS) cho thẻ <h1>

Trang 27

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

Trang 28

Thiết lập các giá trị

liên quan

Trang 29

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

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

Trang 30

• Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, 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í dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tính

và giá trị style của thẻ sẽ được hiển thị trên bảng CSS STYLES

Vùng chỉnh sửa giá trị của các thuộctính

Trang 31

Sử dụng môi trường soạn thảo mã Code:

Viết trong cặp thẻ <head> ở

HTML

Viết trong một file css riêng biệt

Trang 32

Viết CSS trong cặp thẻ <head>…</head>

Trang 33

Viết CSS Inline

<html>

<body>

<h1 style="family:Tahoma, Geneva, sans-serif; size:24px;

font-style:italic; color:#F00">thực hành với thẻ <h1></h1>

</body>

</html>

Trang 34

Viết trong một file css riêng biệt:

• Bước 1: khởi tạo một file css bằng cách lựa chọn File > New … lựa chọn CSS trong hộp thoại New Document

Trang 35

• Bước 2: soạn thảo mã CSS cho thẻ <h1>, sau đó lưu file tại thư mục web (thư mục có chứa file html)

Trang 36

• Bước 3: trong file html, viết lệnh để gọi file css

<head>

<title>WEB101- Thiết kế web</title>

<title>WEB101- Thiết kế web</title>

</head>

<body>

</body>

Trang 37

BỐ CỤC WEBSITE VỚI CSS

Trang 38

Layout là bố cục trình bày sắp xếp các thành phần

của một trang web

Layout website thường chia theo dạng cột

website

header

content v.v…

của một trang web

Layout website thường chia theo dạng cột

Navigator (điều hướng) footer

Trang 39

Trang 40

TỔNG KẾT

HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn

ngữ tạo nên các trang web thông qua các thẻ đánh dấu

Thẻ là thành phần đánh dấu văn bản Nội dung

trong thẻ sẽ được trình duyệt xử lý dựa trên thẻ

chứa nó

CSS là ngôn ngữ đơn giản, hoạt động cùng với

HTML để định dạng về mặt hình thức cho trang web

Có 3 vị trí để đặt CSS: trong thẻ <head>, cùng

dòng với thẻ (inline), ở một file css bên ngoài

của một trang web, thường được chia theo dạng cột

HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn

ngữ tạo nên các trang web thông qua các thẻ đánh dấu

Thẻ là thành phần đánh dấu văn bản Nội dung

trong thẻ sẽ được trình duyệt xử lý dựa trên thẻ

chứa nó

CSS là ngôn ngữ đơn giản, hoạt động cùng với

HTML để định dạng về mặt hình thức cho trang web

Định dạng
Số trang	40
Dung lượng	3,94 MB