Bài giảng Một số công cụ thiết kế website
3.1.1. Tổng quan về HTML 3.1.2. Các thẻ của HTML 3.1.3. Sử dụng Frontpage thiết kế web tĩnh 3.1.4.Định dạng website với CSS
Bạn đang xem trước 20 trang tài liệu Bài giảng Một số công cụ thiết kế website, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Chương 3. MỘT SỐ CÔNG
CỤ THIẾT KẾWEBSITE
9/8/2010 Công cụ thiết kếWeb - CSS 2
Nội dung
• Ngôn ngữ ñánh dấu HTML
• PHP, Javascript
• Một số công cụ hỗ trợ thiết kế website
9/8/2010 Công cụ thiết kếWeb - CSS 3
3.1. Ngôn ngữ ñánh dấu HTML
3.1.1. Tổng quan về HTML
3.1.2. Các thẻ của HTML
3.1.3. Sử dụng Frontpage thiết kế web tĩnh
3.1.4. Định dạng website với CSS
9/8/2010 Công cụ thiết kếWeb - CSS 4
CSS
• CSS=Cascading Style Sheet: Mẫu quy ñịnh cách
thức thể hiện các thẻ HTML
• Style ñược ñưa vào HTML 4.0 ñể giải quyết một số
vấn ñề.
• Giúp tiết kiệm ñược rất nhiều thời gian và công sức
cho việc thiết kế web.
• Có thể ñịnh nghĩa nhiều style vào một thẻ HTML
(Cascading)
9/8/2010 Công cụ thiết kếWeb - CSS 5
Các loại style
• Có 4 loại style:
– Inline Style (Style ñược qui ñịnh trong 1 thẻ HTML cụ thể)
– Internal Style (Style ñược qui ñịnh trong phần của
1 trang HTML )
– External Style (style ñược qui ñịnh trong file .CSS ngoài)
– Browser Default (thiết lập mặc ñịnh của trình duyệt)
• Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống
9/8/2010 Công cụ thiết kếWeb - CSS 6
Cách chèn CSS
• Đặt trong …
• Với Internal style:
<!--
Nội dung ñịnh nghĩa style
-->
9/8/2010 Công cụ thiết kếWeb - CSS 7
Cách chèn CSS (tt)
• Với External style:
– Định nghĩa style trong file riêng (thường có ñuôi .CSS)
– Nhúng file CSS ñã ñịnh nghĩa vào trang web:
<link href=“ñịa chỉ file" rel="stylesheet"
type="text/css">
• Với Inline style:
Khai báo và sử dụng style
9/8/2010 Công cụ thiết kếWeb - CSS 9
Chú ý khi viết style
• Style phân biệt chữ hoa, chữ thường
• Để ghi chú trong style sử dụng:
/*
Đoạn ghi chú
*/
9/8/2010 Công cụ thiết kếWeb - CSS 10
Khai báo style
selector {
Property1: Value1;
Property2: Value2;
}
9/8/2010 Công cụ thiết kếWeb - CSS 11
Style áp dụng cho thẻ cụ thể
• Trường hợp 1 thẻ: Đặt selector là tên_thẻ
p {
color: red;
}
• Khai báo ñồng thời nhiều thẻ: Viết danh sách tên thẻ
phân cách bởi dấu phảy
h1,h2,h3,h4,h5,h6{
font-family:arial;
}
9/8/2010 Công cụ thiết kếWeb - CSS 12
Tạo lớp
• Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp
p.loai1{
color:red;
}
p.loai2{
color:blue;
}
• Không gắn với thẻ cụ thể: bỏ phần tên_thẻ ñi, giữ lại dấu chấm:
.loai3{
color:green;
}
9/8/2010 Công cụ thiết kếWeb - CSS 13
Sử dụng lớp
• Đặt thuộc tính class của thẻ=“tên_lớp”:
• Ví dụ:
Đoạn này màu ñỏ
Style không có hiệu lực
Tiêu ñề màu xanh
9/8/2010 Công cụ thiết kếWeb - CSS 14
Định danh
• Tương tự như class. Thay dấu chấm (.) thành dấu thăng (#).
• Cho thẻ cụ thể: tên_thẻ#ñịnh_danh{…}
• Tổng quát: #ñịnh_danh{…}
• Ví dụ:
p#doan1{
color:red;
}
#loai2{
color:blue;
}
9/8/2010 Công cụ thiết kếWeb - CSS 15
Sử dụng ñịnh danh
• Mỗi ñịnh danh là duy nhất trên trang
• Đặt thuộc tính id của thẻ = ñịnh_danh
• Ví dụ:
Đoạn này màu ñỏ
Tiêu ñề xanh
Một số trường hợp cụ thể
9/8/2010 Công cụ thiết kếWeb - CSS 17
CSS Basic
1. CSS Background
2. CSS Text
3. CSS Font
4. CSS Border
5. CSS Margin
6. CSS Padding
7. CSS List
9/8/2010 Công cụ thiết kếWeb - CSS 18
CSS Advanced
1. CSS Dimension
2. CSS Classification
3. CSS Positioning
4. CSS Pseudo-class
5. CSS Pseudo-element
6. CSS Media Types
9/8/2010 Công cụ thiết kếWeb - CSS 19
CSS cho nền
9/8/2010 Công cụ thiết kếWeb - CSS 20
CSS cho nền (tt)
9/8/2010 Công cụ thiết kếWeb - CSS 21
CSS và cho bản
9/8/2010 Công cụ thiết kếWeb - CSS 22
CSS và cho bản (tt)
9/8/2010 Công cụ thiết kếWeb - CSS 23
CSS và font
9/8/2010 Công cụ thiết kếWeb - CSS 24
CSS và font (tt)
9/8/2010 Công cụ thiết kếWeb - CSS 25
CSS và font (tt)
9/8/2010 Công cụ thiết kếWeb - CSS 26
CSS và font (tt)
9/8/2010 Công cụ thiết kếWeb - CSS 27
CSS và ñường viền
9/8/2010 Công cụ thiết kếWeb - CSS 28
9/8/2010 Công cụ thiết kếWeb - CSS 29
9/8/2010 Công cụ thiết kếWeb - CSS 30
9/8/2010 Công cụ thiết kếWeb - CSS 31
9/8/2010 Công cụ thiết kếWeb - CSS 32
9/8/2010 Công cụ thiết kếWeb - CSS 33
9/8/2010 Công cụ thiết kếWeb - CSS 34
A.bar1 {
COLOR: #6fa37e;
FONT-FAMILY: "verdana";
FONT-SIZE: 12pt;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A.bar1:hover {
COLOR: red;
FONT-SIZE: 13pt
}
A.bar2 {
COLOR: #003300;
FONT-FAMILY: ".VnTime";
FONT-SIZE: 12pt;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A.bar2:hover {
COLOR: red;
FONT-SIZE: 13pt
}
.Item {
cursor: hand;
font-family: .VnArial;
font-size: 14;
font-style: normal;
background-color:#006666;
color:ffffeb
}
.Item2 {
cursor: hand;
font-family: .VnArial;
font-size: 14;
font-style: normal;
background-color:#FFFFFF;
color:blue
}
.colorbook {
font-family: .Arial;
font-size: 16;
font-style: normal;
background-color:#000000;
color:#ffffff
}
Ví dụ
9/8/2010 Công cụ thiết kếWeb - CSS 35
§¨ng ký
