Giáo trình thiết kế web nâng cao
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.92 MB, 88 trang )
BỘ CƠNG THƯƠNG
TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH
GIÁO TRÌNH
THIẾT KẾ WEB NÂNG CAO
NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG
(Lưu hành nội bộ)
Dùng cho đào tạo: Trung cấp
Nam Định, năm 202….
BỘ CƠNG THƯƠNG
TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH
GIÁO TRÌNH
THIẾT KẾ WEB NÂNG CAO
NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG
(Lưu hành nội bộ)
CHỦ BIÊN: LÊ HỮU TOẢN
Nam Định, năm 202….
LỜI GIỚI THIỆU
Trong những năm gần đây, cùng với sự phát triển của Cơng nghệ thơng tin thì
mạng máy tính cũng được phát triển rộng rãi, kéo theo ứng dụng của mạng máy tính là
internet và các dịch vụ cũng trở nên không thể thiếu trong cuộc sống hiện đại. Để phục
vụ việc học tập và nghiên cứu của sinh viên Công nghệ thông tin, trường Cao đẳng
Công nghiệp Nam Định, chúng tơi biên soạn giáo trình Thiết kế Web nâng cao. Giáo
trình bao gồm 3 bài, mỗi bài đều có phần kiến thức lý thuyết, câu hỏi và phần thực
hành cụ thể:
Bài 1. CSS
Bài 2. Công cụ trong thiết kế Web
Bài 3. Thiết kế giao diện Web bằng Photoshop
Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng một ứng dụng Web tĩnh
từ cơ bản đến nâng cao bằng công nghệ HTML, CSS và Photoshop. Được biên soạn
với phương châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh
viên những kiến thức cơ bản phục vụ cho nghiên cứu, thiết kế ứng dụng Web.
Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập và nghiên cứu của sinh viên
trường Cao đẳng Công nghiệp Nam Định. Do thời gian có hạn nên trong phạm vi cuốn
giáo trình, khơng thể đề cập được tất cả những vấn đề nóng hổi trong lĩnh vực thiết kế
Web. Nhóm tác giả rất mong nhận được các ý kiến đóng góp từ các thầy cơ để tài liệu
hồn chỉnh hơn.
Nam Định, ... tháng ... năm 20….
Chủ biên
1
MỤC LỤC
LỜI GIỚI THIỆU ............................................................................................................ 1
MỤC LỤC ....................................................................................................................... 2
DANH MỤC CHỮ VIẾT TẮT ....................................................................................... 5
DANH MỤC BẢNG, HÌNH VẼ ..................................................................................... 6
Bài 1. CSS........................................................................................................................ 8
1.1. KHÁI NIỆM CSS .................................................................................................... 8
1.2. QUY ƯỚC VỀ CSS ................................................................................................. 9
1.2.1. Cú pháp CSS .......................................................................................................... 9
1.2.2. Đơn vị CSS .......................................................................................................... 10
a. Đơn vị chiều dài ........................................................................................................ 10
b. Đơn vị màu sắc ......................................................................................................... 10
1.2.3. Vị trí đặt CSS....................................................................................................... 11
1.3. SỬ DỤNG STYLE TRONG CSS .......................................................................... 12
1.3.1. Mức độ ưu tiên style. ........................................................................................... 12
1.3.2. Cách khai báo style .............................................................................................. 13
1.3.3. Một số Style cơ bản ............................................................................................. 13
1.3.3.1. Background ....................................................................................................... 13
1.3.3.2. Font Chữ ........................................................................................................... 14
1.3.3.3. Text ................................................................................................................... 15
1.3.3.4. Định dạng liên kết ............................................................................................ 15
1.3.3.5. Span & Div ....................................................................................................... 16
1.3.3.6. Margin & Padding ............................................................................................ 16
1.3.3.7. Border ............................................................................................................... 17
1.3.3.8. Height & Width ................................................................................................ 17
TÓM TẮT NỘI DUNG BÀI 1 ...................................................................................... 19
BÀI TẬP BÀI 1 ............................................................................................................. 20
BÀI THỰC HÀNH BÀI 1 ............................................................................................. 21
HƯỚNG DẪN TỰ HỌC Ở NHÀ ................................................................................. 27
NỘI DUNG THẢO LUẬN BÀI 1 ................................................................................ 28
Bài 2. CÔNG CỤ TRONG THIẾT KẾ WEB ............................................................... 29
2.1. CÁC BƯỚC THIẾT KẾ MỘT ỨNG DỤNG ........................................................ 29
2.1.1. Phân tích người dùng ........................................................................................... 29
2.1.2. Thiết kế các chức năng và cấu trúc trang ............................................................ 29
2.1.3. Xây dựng nội dung .............................................................................................. 30
2
2.1.4. Thiết kế và kiểm tra bố cục trang web ................................................................ 30
2.1.5. Kiểm tra và đánh giá........................................................................................... 31
2.2. MỘT SỐ NGUYÊN TẮC QUAN TRỌNG TRONG THIẾT KẾ WEB ............... 31
2.2.1. Thiết kế giao diện hướng đến người dùng........................................................... 31
2.2.2. Định hướng thiết kế ............................................................................................. 31
2.2.3. Trang cuối cùng (dead-end)................................................................................. 32
2.3. CẤU TRÚC WEBSITE .......................................................................................... 32
2.3.1. Trang chủ - home page ........................................................................................ 32
2.3.2. Trang liên hệ - contact ......................................................................................... 32
2.3.3. Trang giới thiệu thông tin - about us ................................................................... 32
2.3.4. Trang giới thiệu về sản phẩm/dịch vụ - products/services .................................. 32
2.3.5. Trang hướng dẫn hoặc chính sách - policies ....................................................... 33
2.3.6. Một số cấu trúc website mẫu ............................................................................... 33
2.4. CÔNG CỤ THIẾT KẾ ........................................................................................... 35
2.4.1. Công cụ soạn thảo ............................................................................................... 35
2.4.1.1. Notepad++ ........................................................................................................ 35
2.4.1.2. Microsoft FrontPage ......................................................................................... 36
2.4.1.3. Macromedia Dreamwave.................................................................................. 38
2.4.2. Công cụ tạo và xử lý ảnh tĩnh .............................................................................. 40
2.4.3. Cơng cụ tạo và xử lý ảnh động ............................................................................ 43
TĨM TẮT NỘI DUNG BÀI 2 ...................................................................................... 46
BÀI TẬP BÀI 2 ............................................................................................................. 47
BÀI THỰC HÀNH BÀI 2 ............................................................................................. 48
NỘI DUNG THẢO LUẬN BÀI 2 ................................................................................ 52
Bài 3. THIẾT KẾ GIAO DIỆN WEB BẰNG PHOTOSHOP ...................................... 54
3.1. XÂY DỰNG BỐ CỤC TRANG WEB .................................................................. 54
3.2. THIẾT KẾ LAYOUT WEB ................................................................................... 56
3.2.1. Thành phần thiết kế ............................................................................................. 56
3.2.2. Thiết kế Layout .................................................................................................... 57
3.3. XUẤT PSD SANG TRANG WEB HTML ............................................................ 67
3.3.1. Ý nghĩa ................................................................................................................ 67
4.3.2. Các bước thực hiện .............................................................................................. 68
a. Giai đoạn 1: Cắt layout .............................................................................................. 68
b. Giai đoạn 2: Định dạng lại layout cho trang web với HTML và CSS ...................... 68
TÓM TẮT NỘI DUNG BÀI 3 ...................................................................................... 72
BÀI TẬP BÀI 3 ............................................................................................................. 73
3
BÀI THỰC HÀNH BÀI 3 ............................................................................................. 74
HƯỚNG DẪN TỰ HỌC ............................................................................................... 77
NỘI DUNG THẢO LUẬN BÀI 3 ................................................................................ 78
PHỤ LỤC ...................................................................................................................... 80
TÀI LIỆU THAM KHẢO ............................................................................................. 85
4
DANH MỤC CHỮ VIẾT TẮT
ARPA
Advanced Research Projects Agency
TCP/IP
Transmission Control Protocol/Internet Protocol
WWW
World Wide Web
HTML
HyperText Markup Language
SGML
Standard Generalized Markup Language
CGI
Common Gateway Interface
ISP
Internet Service Provider
URL
Uniform Resource Locator
HTTP
HyperText Transfer Protocol
RFC
Request For Comments
IETF
Internet Engineering Task Force
MIME
Multipurpose Internet Mail Extensions
URI
Uniform Resource Identifier
URN
Uniform Resource Name
UA
User Agent
SMTP
Simple Mail Transfer Protocol
NNTP
Network News Transfer Protocol
FTP
File Tranfer Protocol
DNS
Domain Name System
HTTPS
Hypertext Transfer Protocol Secure
SSL
Secure Socket Layer
TLS
Transport Layer Security
CSS
Cascading Style Sheets
GUI
Graphical User Interface
STL
Standard Template Library
DWT
Dynamic Web Templates
SEO
Search Engine Optimization
5
DANH MỤC BẢNG, HÌNH VẼ
Hình 2- 1. Minh họa về CSS ................................................................................................ 8
Hình 2- 2. Minh họa về tác dụng thuộc tính Margin .......................................................... 17
Hình 2- 3. Các kiểu đường viền trong thiết kế ................................................................... 17
Hình 2- 4. Minh họa về bài thực hành số 1 ........................................................................ 21
Hình 2- 5. Minh họa về bài thực hành số 2 ........................................................................ 23
Hình 2- 6. Minh họa về bài thực hành số 3 ........................................................................ 24
Hình 2- 7. Minh họa về bài thực hành số 4 ........................................................................ 24
Hình 2- 8. Minh họa về bài thực hành số 5 ........................................................................ 25
Hình 2- 9. Minh họa về bài thực hành số 6 ........................................................................ 26
Bảng 2- 1. Bảng đơn vị chiều dài ....................................................................................... 10
Bảng 2- 2. Bảng đơn vị màu sắc ......................................................................................... 10
Bảng 2- 3. Thuộc tính định vị ảnh nền ............................................................................... 14
Hình 3- 1. Phần Footer giúp định hướng chức năng .......................................................... 32
Hình 3- 2. Trang web bán hàng trực tuyến ......................................................................... 34
Hình 3- 3. Trang web mơ hình B2B ................................................................................... 34
Hình 3- 4. Trang web cổng thơng tin điện tử tỉnh Nam Định ............................................ 35
Hình 3- 5. Màn hình làm việc của NotePade++ ................................................................. 36
Hình 3- 6. Màn hình làm việc chính của Microsoft FrontPage .......................................... 37
Hình 3- 7. Màn hình làm việc của Dreamwave .................................................................. 38
Hình 3- 8. Các chức năng trong mục Insert của DreamWave ............................................ 39
Hình 3- 9. Chế độ Split khi lập trình trên DreamWave ...................................................... 39
Hình 3- 10. Các đối tượng trên bảng Insert được chia thành nhóm ................................... 40
Hình 3- 11. Màn hình làm việc của Photoshop .................................................................. 41
Hình 3- 12. Các nhóm chức năng trên thanh cơng cụ Photoshop ...................................... 42
Hình 3- 13. Màn hình làm việc của Macromedia Flash ..................................................... 44
Hình 3- 14. Minh họa bài thực hành số 5 ........................................................................... 48
Hình 3- 15. Minh họa bài thực hành số 6 ........................................................................... 49
Hình 3- 16. Minh họa bài thực hành 7................................................................................ 50
Hình 3- 17. Màn hình làm việc của DreamWave ............................................................... 52
Hình 3- 18. Thanh cơng cụ Macromedia Dreamwave ....................................................... 52
Hình 3- 19. Thanh cơng cụ Macromedia Dreamwave ....................................................... 53
Hình 3- 20. Thanh cơng cụ Macromedia Dreamwave ....................................................... 53
Hình 4- 1. Bố cục trang web được thiết kế bằng vẽ tay ..................................................... 54
Hình 4- 2. Bố cục trang web được thiết kế bằng phần mềm .............................................. 55
Hình 4- 3. Layout 2 cột với kích thước cố định ................................................................. 55
6
Hình 4- 4. Layout 3 cột có kích thước khác nhau .............................................................. 55
Hình 4- 5. Layout 4 cột hoặc layout kết hợp ...................................................................... 56
Hình 4- 6. Các thành phần cơ bản khi thiết kế ................................................................... 57
Hình 4- 7. Hình ảnh tạo mới file tài liệu Photoshop .......................................................... 58
Hình 4- 8. Tạo layer mới để thay đổi background ............................................................. 59
Hình 4- 9. Tạo màu cho layer ............................................................................................. 59
Hình 4- 10. Lựa chọn vùng làm header cho trang web ...................................................... 59
Hình 4- 11. Thay đổi màu nền cho header ......................................................................... 60
Hình 4- 12. Vùng được lựa chọn làm thanh điều hướng .................................................... 60
Hình 4- 13. Thiết lập thơng số ............................................................................................ 61
Hình 4- 14. Kết quả thu được ............................................................................................. 61
Hình 4- 15. Phần hiển thị header và thanh điều hướng ...................................................... 62
Hình 4- 16. Tạo tên website vào header ............................................................................. 62
Hình 4- 17. Nhập danh mục chức năng .............................................................................. 63
Hình 4- 18. Tạo nút Hover button ...................................................................................... 63
Hình 4- 19. Giao diện thu được .......................................................................................... 63
Hình 4- 20. Thiết kế chức năng tìm kiếm ........................................................................... 63
Hình 4- 21. Tạo layer khung hình ...................................................................................... 64
Hình 4- 22. Thiết kế layer hình ảnh .................................................................................... 64
Hình 4- 23. Hình ảnh chèn đúng vị trí ................................................................................ 64
Hình 4- 24. Tạo nội dung cho khung hình.......................................................................... 65
Hình 4- 25. Thiết kế dải dây băng chứa tiêu đề.................................................................. 65
Hình 4- 26. Nội dung được chèn vào trang thiết kế ........................................................... 65
Hình 4- 27. Thiết kế layer footer 1 ..................................................................................... 66
Hình 4- 28. Thiết kế layer footer 2 ..................................................................................... 66
Hình 4- 29. Hình ảnh trang web khi thiết kế hồn thiện .................................................... 67
Hình 4- 30. Hình ảnh trang web sau khi định dạng bằng HTML và CSS.......................... 71
Hình 4- 31. Trang chủ website bán hàng kĩ thuật số .......................................................... 74
Hình 4- 32. Trang chủ website bán đồ trang sức................................................................ 75
Hình 4- 33. Trang chủ website của một công ty ................................................................ 76
Hình 4- 34. Trang chủ website Business Co. ..................................................................... 77
7
Bài 1. CSS
MỤC TIÊU
- Trình bày được khái niệm và cú pháp cơ bản của CSS
- Trình bày các phương pháp nhúng CSS vào một trang web để định dạng các
thành phần: font chữ, màu chữ, đường viền, liên kết...
- Sử dụng CSS và nắm rõ được mức độ ưu tiên của các Style khi gọi chúng.
- Áp dụng các style CSS vào trong thiết kế giao diện website.
1.1. KHÁI NIỆM CSS
CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho
các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
Khác với HTML, CSS cung cấp cho người dùng hàng trăm thuộc tính để trình
bày dành các đối tượng giúp mang lại hiệu quả. Ngoài ra, CSS cịn được hỗ trợ bởi hầu
hết các trình duyệt, nên người dùng hồn tồn có thể n tâm khi trang web chạy trên
các hệ thống khác nhau như Windows, Linux hay trên một máy Mac.
Với việc sử dụng các mã định dạng trực tiếp trong HTML sẽ làm tốn hao nhiều
thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra
phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở
ngoài. Giúp tăng hiệu quả đồng bộ khi người dùng tạo một website có hàng trăm trang
hay cả khi muốn thay đổi một thuộc tính trình bày nào đó trên các trang web.
Ngồi ra, CSS cịn cho phép người dùng áp đặt những kiểu trình bày thích hợp
hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS
được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
Hình 2- 1: Minh họa về CSS
8
1.2. QUY ƯỚC VỀ CSS
1.2.1. Cú pháp CSS
Cú pháp CSS cơ bản:
Selector { property:value; }
Trong đó:
- Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Các
đối tượng này có thể là tên các thẻ HTML, class hay id.
Ví dụ: body, h2, p, img, #title, #content, .username,…
Trong CSS ngoài viết tên selector theo tên thẻ, class, id. Chúng ta cịn có thể viết
tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là
#entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm
trong #entry.
Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó như thẻ
<img> và thẻ <a> cùng có class tên vistors nhưng đây lại là hai đối tượng khác nhau, 1
cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên khi viết CSS ta
ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần. Nên trong trường
hợp này, nếu người dùng có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ ghi là img
.visitors.
Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector đại
diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm
cho chúng có text màu đỏ.
- Property: Chính là các thuộc tính quy định cách trình bày: Background-color,
font-family, color, padding, margin…
Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính
cho một selector thì chúng ta phải dùng một dấu “;” để phân cách các thuộc tính. Tất
cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau
selector.
Ví dụ: Định màu nền cho một trang web là xanh nhạt (light cyan):
Trong HTML: <body bgcolor=”#00BFF3”>
Trong CSS: body { background-color:#00BFF3; }
Ví dụ: Định dạng màu nền, màu chữ và cỡ chữ cho trang web
Body { background:#FFF; color:#FF0000; font-size:14pt }
Đối với một trang web có nhiều thành phần có cùng một số thuộc tính, chúng ta
có thể thực hiện gom gọn lại như sau:
h1 { color:#0000FF;
text-transform:uppercase }
h2 { color:#0000FF;
text-transform:uppercase;}
h1, h2, h3 { color:#0000FF;
text-transform:uppercase;}
h3 { color:#0000FF;
text-transform:uppercase;}
9
- Value: Giá trị của thuộc tính. Như ví dụ trên value chính là #FFF dùng để định
màu là nền trắng. Đối với một giá trị có chứa khoảng trắng, người dùng cần toàn bộ
giá trị trong một dấu ngoặc kép. Ví dụ: font-family:”Times New Roman”
Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với
đơn vị của nó. Nó sẽ làm CSS bị vơ hiệu trên một số trình duyệt như Mozilla Firefox
hay Netscape.
- Chú thích trong CSS: Cũng như nhiều ngơn ngữ web khác. Trong CSS, người
dùng cũng có thể viết chú thích cho các đoạn code để dễ dàng tìm, sửa chữa trong
những lần cập nhật sau. Chú thích trong CSS được viết như sau /* Nội dung chú thích
*/
Ví dụ: Sử dụng chú thích trong CSS
/* Màu chữ cho trang web */
body { color: red }
1.2.2. Đơn vị CSS
Trong CSS hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời
gian, cường độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị
đo chiều dài và màu sắc. Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc trong
CSS.
a. Đơn vị chiều dài
Bảng 2- 1. Bảng đơn vị chiều dài
Đơn vị
Mô tả
%
Phần trăm
In
Inch (1 inch = 2.54 cm)
Cm
Centimeter
Mm
Millimeter
1 em tương đương kích
font hiện hành, nếu
Em hành có kích cỡ
1em=14px. Đây là một
hữu ích trong việc
trangsắc
web.
b. Đơn vị màu
thước
font hiện
14px thì
đơn vị rất
hiển thị
Đơn vị
Mô tả
ex
1ex bằng chiều cao của chữ in
thường của font hiện hành. Do
đó, đơn vị này khơng những phụ
thuộc trên kích cỡ font chữ mà
cịn phụ thuộc loại font chữ vì
cùng 1 cỡ 14px nhưng chiều cao
chữ x của font Times và font
Tohama là khác nhau.
pt
Point (1 pt = 1/72 inch)
pc
Pica (1 pc = 12 pt)
px
Pixels (điểm ảnh trên màn
hình máy tính)
Bảng 2- 2. Bảng đơn vị màu sắc
Đơn vị
Mơ tả
Color-name
Tên màu tiếng Anh. Ví dụ: black, white, red, green, blue...
RGB (r,g,b)
Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với
nhau tạo ra nhiều màu.
10
RGB (%r,%g,%b)
Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.
Hexadecimal RGB
Mã màu RGB dạng hệ thập lục. Ví dụ: #FFFFFF: trắng,
#000000: đen, #FF00FF: đỏ tươi.
1.2.3. Vị trí đặt CSS
Có ba cách để nhúng CSS vào trong một tài liệu HTML:
- Cách 1 nội tuyến (kiểu thuộc tính): Đây là một phương pháp cơ bản nhất để
nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp
dụng. Trong trường hợp này người dùng sẽ không cần phải khai báo selector trong cú
pháp.
Lưu ý: Với phương pháp nội tuyến thì người dùng khơng thể cùng lúc khai báo nhiều
thuộc tính cho nhiều thẻ.
Ví dụ: Định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:
<html>
<head>
<title>Ví dụ</title>
</head>
<body style=”background-color=#FFF;”>
^_^ Welcome To CSS ^_^
</body>
- </html>
Cách 2 bên trong (thẻ style): Là một phương cách thay thế cách thứ nhất bằng
cách rút tất cả các thuộc tính CSS vào trong thẻ style để thuận tiện cho cơng tác bảo
trì, sửa chữa.
Ví dụ: Định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:
<html> <head>
<title>Ví dụ</title>
<style type=”text/css”>
body { background-color:#FFF } p { color:#00FF00 }
</style></head><body>
^_^ Welcome To CSS ^_^
</body> Lưu ý: Thẻ style nên đặt trong thẻ head. Đối với những trình duyệt cũ, không thể
nhận ra thẻ <style> dẫn đến hiển thị nội dung chứa trong thẻ. Để tránh tình trạng này,
người dùng nên đưa vào thêm dấu <!-- ở trước và --> ở sau khối code CSS. Như ví dụ
trên sẽ viết lại là:
<style type=”text/css”>
</style>
^_^ Welcome To CSS ^_^
</body>
</html>
11
- Cách 3 Bên ngoài (liên kết với một file CSS bên ngồi): Tương tự như cách 2
nhưng thay vì đặt tất cả các mã CSS trong thẻ style người dùng sẽ đưa chúng vào trong
một file CSS (có phần mở rộng .css) bên ngồi và liên kết nó vào trang web bằng
thuộc tính href trong thẻ link.
Ví dụ: Tạo file style.css chứa mã CSS để định dạng cho trang noidung.html
Trang style.css chứa nội dung định dạng:
p { color:#333; text-align:left; width:500px }
Trang noidung.html sử dụng thẻ <link> để liên kết:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
1.3. SỬ DỤNG STYLE TRONG CSS
1.3.1. Mức độ ưu tiên style.
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc tồn bộ CSS mà
trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên
ngồi liên kết vào trang web, CSS nhúng trong thẻ <style>, các CSS nội tuyến. Sau đó,
trình duyệt sẽ tổng hợp tồn bộ CSS này vào một CSS ảo nếu có các thuộc tính CSS
giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng. Theo ngun tắc
đó trình duyệt sẽ ưu tiên cho các CSS:
+ Nội tuyến trước.
+ CSS bên trong.
+ CSS bên ngồi.
+ CSS mặc định của trình duyệt.
Ví dụ: Xác định các thuộc tính được thực thi
+ Trang web noidung.html có liên kết tới file style.css có nội dung như sau:
p { color:#333; text-align:left; width:500px }
+ Trong thẻ <style> của trang noidung.html cũng có một đoạn CSS liên quan:
p {background-color:#FF00FF; text-align:right;
width:100%; height:150px}
+ Trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:
color:#000”}
→ Trình duyệt sẽ thực hiện theo nguyên tắc ưu tiên và
sẽ được áp dụng các thuộc
tính sau:
p {background-color:#FF00FF; width:100%;
height:200px; text-align:center; border:1px solid #FF0000; color:#000}
Chú ý: Để thay đổi độ ưu tiên cho một thuộc tính, CSS cung cấp thuộc tính
!important. Người dùng đặt thuộc tính này sau một thuộc tính thì trình duyệt sẽ hiểu
đây là một thuộc tính được ưu tiên.
selector { property:value !important}
Cùng một thuộc tính cho một selector thì nếu cả hai thuộc tính đều đặt
!important thì cái sau được lấy.
Ví dụ: Selector p có nhiều thuộc tính khác nhau. Xác định các thuộc tính mà
selector p được sử dụng.
12
p
{
width:500px;
text-align:left
p{
background-color:#FF0000;
!important; color:#333 !important }
width:100%
p{background-color:#FF00FF;
height:150px !important;
width:100% height:150px !important;
text-align:left !important;
text-align:right;}
border:1px solid #FF0000; color:#333
border:1px solid #FF0000; color:#000” }
1.3.2. Cách khai báo style
Thông thường các Style sẽ được khai báo và lưu trữ trong một file CSS (có phần
mở rộng .css) liên kết nó vào trang web bằng thuộc tính href trong thẻ link.
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Ví dụ: Gọi một file CSS vào trang web
<html> <head>
<title>Ví dụ</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
^_^ Welcome To CSS ^_^
</body>
</html>
Sau đó hãy tạo một file style.css với nội dung:
body { background-color:#FFF }
p { color:#00FF00 }
Lưu ý: Trong CSS chúng ta cịn có thể sử dụng thuộc tính @import để nhập một file
CSS vào CSS hiện hành. Cú pháp: @import url(link)
1.3.3. Một số Style cơ bản
1.3.3.1. Background
Màu nền (background-color): Thuộc tính background-color giúp định màu nền
cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng
giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt.
body { background-color:cyan }
h1 { background-color:red }
h2 { background-color:orange}
Ảnh nền (background-image): Việc sử dụng ảnh nền giúp trang web trông sinh
động và bắt mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử
dụng thuộc tính background-image.
body { background-image:url(logo.png)}
h1 { background-color:red}
h2 { background-color:orange}
13
p {background-color: #FDC689}
Lặp lại ảnh nền (thuộc tính background-repeat)
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Khơng lặp lại ảnh.
Định vị ảnh nền (thuộc tính background-position)
Bảng 2- 3. Thuộc tính định vị ảnh nền
Ý nghĩa
Giá trị
Background-position:5cm 2cm
Ảnh được định vị 5cm từ trái qua và
2cm từ trên xuống.
Background-position:20% 30%
Ảnh được định vị 20% từ trái qua và
30% từ trên xuống
Background-position:bottom left
Ảnh được định vị ở góc trái phía dưới
Thuộc tính Background rút gọn
background:<background-color> | <background-image> |
repeat> | <background-attachment> | <background-position>
Ví dụ: Bỏ qua hai thuộc tính background-attachment và background-position:
background:transparent url(logo.png) no-repeat;
1.3.3.2. Font Chữ
Thuộc tính font-family: Cho phép định nghĩa một danh sách ưu tiên các font sẽ
được dùng để hiển thị một thành phần trang web. Có hai loại tên font được dùng
để chỉ định trong font-family: family-names và generic families.
- Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
- Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…
Ví dụ: Thiết lập thuộc tính Font cho body, h1, h2, h3
body { font-family:”Times New Roman”,Tohama,sans-serif }
h1, h2, h3 { font-family:arial,verdana,serif }
Thuộc tính font-style: Thuộc tính font-style định nghĩa việc áp dụng các kiểu in
thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang
web
h1 { font-style:italic; }
h2 { font-style:oblique; }
Thuộc tính font-variant: Thuộc tính font-variant được dùng để chọn giữa
chế độ bình thường và small-caps của một font chữ. Một font small-caps là một
font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ
in thường. Nếu như font chữ dùng để hiển thị khơng có sẵn font small-caps thì trình
duyệt sẽ hiện chữ in hoa để thay thế.
14
Thuộc tính font-size: Kích thước của một font được định bởi thuộc tính font-size.
Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị
xxsmall, x-small, small, medium, large, x-large, xx-large, smaller, larger.
body { font-size:20px }
h1 { font-size:3em } h2 { font-size:2em }
Font rút gọn: Cấu trúc rút gọn cho các thuộc tính nhóm font:
Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>
Ví dụ: Rút gọn các thuộc tính của h1
h1 { font-style: italic;
font-variant:small-caps;
font-weight: bold; font-size: 35px;
font-family: arial,verdana,sans-serif; }
h1 {font: italic bold 35px arial, verdana,
sans-serif; }
1.3.3.3. Text
Thuộc tính color: Để định màu chữ cho một thành phần nào đó trên trang web
chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ
trợ.
body { color: #000}
h1 { color: #0000FF }
Thuộc tính text-indent: Cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dịng
đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản trong CSS.
p {text-indent:30px }
Thuộc tính text-align: Giúp người dùng căn chỉnh văn bản cho các thành phần
trong trang web. Thuộc tính này có tất cả 4 giá trị: Left (căn trái – mặc định), right
(căn phải), center (căn giữa) và justify (căn đều).
Thuộc tính letter-spacing: Thuộc tính letter-spacing được dùng để định khoảng
cách giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành
phần
là 5px chúng ta sẽ viết CSS sau:
h1, h2 { letter-spacing:7px }
p { letter-spacing:5px }
Thuộc tính text-decoration: Thuộc tính text-decoration giúp thêm các hiệu ứng
gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng
đặc biệt là văn bản nhấp nháy (blink).
1.3.3.4. Định dạng liên kết
Các trạng thái của liên kết: liên kết chưa được thăm (a:link), khi rê chuột lên liên
kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt
– đang giữ nhấn chuột (a:active).
Ví dụ 1: Áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa
thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các liên kết đã
thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu tím.
a:link
{ color:#00FF00 } a:hover { color:#FF00FF}
a:visited
{ color:#FF0000} a:active { color:# 662D91}
15
1.3.3.5. Span & Div
Span: Thẻ <span> trong HTML là một thẻ trung hịa, nó khơng thêm hay bớt bất
cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hịa này mà
nó là một cơng cụ đánh dấu tuyệt vời để người dùng có thể viết CSS định dạng cho các
phần tử mong muốn.
Ví dụ: Trình bày đoạn văn: “Khơng có gì q hơn độc lập, tự do” yêu cầu tô đậm 2 từ
độc lập, tự do.
Khơng có gì q hơn <span class=”nhanmanh”>độc
lập</span>, <span class=”nhanmanh”> tự do</span>.
Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên:
.nhanmanh { font-weight:bold }
Div: Nhóm khối phần tử với thẻ <div>. Cũng như <span>, <div> cũng là một
thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử
lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là <span> dùng để
nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử.
1.3.3.6. Margin & Padding
Margin: Thuộc tính margin trong CSS cũng được dùng để căn lề cho cả trang
web hay một thành phần web này với các thành phần web khác hay với viền trang.
Ví dụ: Thực hiện căn lề cho trang web.
body {
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
border:1px dotted #FF0000
} hơn chúng ta sẽ viết như sau:
Hoặc gọn
body {
margin:80px 30px 40px 50px;
border:1px dotted #FF0000 }
Cú pháp như sau:
margin:<margin-top>|<margin-right>| <margin-bottom> | <margin-left>
Hoặc: margin:<value1>|< value2> – với value 1 là giá trị
marginbottom và value2 là giá trị margin-left và margin-right.
16
margin-top và
Hình 2- 2. Minh họa về tác dụng thuộc tính Margin
Padding: Được hiểu như một thuộc tính đệm. Padding khơng ảnh hưởng tới
khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa
phần nội dung và viền của một đối tượng.
Cú pháp: Tương tự margin.
Padding:
1.3.3.7. Border
Thuộc tính border-width: Border-width là một thuộc tính CSS quy định độ rộng
cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium
(vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
Thuộc tính border-color: Border-color là thuộc tính CSS quy định màu viền cho
một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
Thuộc tính border-style: Border-style là thuộc tính CSS quy định kiểu viền thể
hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị:
dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none
hay hidden dùng để ẩn đường viền.
Hình 2- 3. Các kiểu đường viền trong thiết kế
Ví dụ: Định viền cho 3 thành phần h1, h2, p như sau:
h1 { border-width:thin;
border-color:#FF0000;
border-style:solid }
h2 { border-width:thick;
border-color:#CCC;
border-style:dotted }
p { border-width:5px;
border-color:#FF00FF;
border-style:double }
1.3.3.8. Height & Width
Thuộc tính Width: Width là một thuộc tính CSS dùng để quy định chiều rộng cho
một thành phần web.
17
Ví dụ: Định chiều rộng cho thành phần p của trang web.
p { width:700px; }
Thuộc tính Max-width: Là thuộc tính CSS dùng để quy định chiều rộng tối đa
cho một thành phần web.
Thuộc tính Min-width: Là thuộc tính CSS dùng để quy định chiều rộng tối thiểu
cho một thành phần web.
Thuộc tính Height: Là một thuộc tính CSS dùng để quy định chiều cao cho một
thành phần web.
Ví dụ: Định chiều cao cho thành phần p của một trang web.
p { height:300px }
Thuộc tính Max-height: Quy định chiều cao tối đa cho một thành phần web.
Thuộc tính Min-height: Quy định chiều cao tối thiểu cho một thành phần web.
Lưu ý: Việc định chiều cao chính xác cho một thành phần sẽ tạo thanh cuộn văn
bản nếu chiều cao văn bản lớn hơn chiều cao đã định. Các thuộc tính max/min width/height được sử dụng trong những trường hợp người dùng khơng chắc giá trị
chính xác cho width, height một thành phần.
18
TÓM TẮT NỘI DUNG BÀI 1
1. Khái niệm CSS
CSS (Cascading Style Sheets) là một ngơn ngữ quy định cách trình bày cho
các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
- Cú pháp CSS cơ bản: Selector { property:value; }
- Đơn vị chiều dài sử dụng trong CSS: %, inch, cm, mm, em, ex, pt, pc
- Đơn vị màu sắc: color name, RGB, Hexa RGB...
- Vị trí đặt CSS: có 3 cách đặt
+ Nội tuyến (Kiểu tuyến tính): Nhúng trực tiếp CSS vào từng thẻ HTML
+ Bên trong thẻ style: Rút tất cả các thuộc tính CSS vào thẻ style và đặt ở phần
đầu trang web
+ Ngoại tuyến: Đặt tất cả thuộc tính CSS vào một file .CSS ở ngoài và thực
hiện liên kết tới trang web cần định dạng.
- Mức độ ưu tiên Style: Theo thứ tự từ cao đến thấp CSS nội tuyến, CSS bên
trong, CSS bên ngồi và CSS mặc định của trình duyệt .
2. Các style cơ bản trong CSS
- Background: gồm các thuộc tính background-color, background-image,
background-repeat, Background-position...
Thuộc tính Background rút gọn
background:<background-color> | <background-image> |
repeat> | <background-attachment> | <background-position>
- Font: gồm các thuộc tính font-family, font-style, font-variant, font-size
Thuộc tính Font rút gọn
Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>
- Thuộc tính Margin và Padding
Margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left>
Padding:
- Thuộc tính border: border-width , border-color, border-style...
- Thuộc tính Height & Width: max-width, min-width, max-height, min-height.
19
BÀI TẬP BÀI 1
Câu 1: Xác định các hệ màu sử dụng trong CSS? Lấy ví dụ minh họa
Câu 2: Trình bày các thuộc tính CSS để làm việc với bảng trên trang web?
Câu 3: Thuộc tính Float trên CSS có chức năng gì? Cho ví dụ minh họa?
Câu 4: So sánh sự thay đổi trong các phiên bản CSS, CSS2 và CSS3? Cho ví dụ.
Câu 5: Trình bày một số bộ chọn Selectors được bổ sung trong phiên bản CSS3? Mơ tả
tính năng của các bộ chọn đó.
20
BÀI THỰC HÀNH BÀI 1
Bài thực hành số 1: Thiết kế trang web có nội dung như hình minh họa.
Hình 2- 4. Minh họa về bài thực hành số 1
Yêu cầu và hướng dẫn thực hiện:
Yêu cầu
STT
1
2
3
– Tiêu đề: Bài tập số 1
Trang web
– Lề trái=lề phải=lề trên=50
– Đặt màu nền cho trang web
Nội dung hiển thị - Tạo table như hình minh họa
Định dạng
- Thiết kế 2 tập tin style1.1.css và style1.2.css
để định dạng cho bảng biểu với kết quả
như hình minh họa
Kết quả 1: kết
hợp với tập tin
style1.1.css
4
5
Hướng dẫn: thiết kế tập tin style1.1.css như sau:
h2{ background:#FF9966;
font-family:"Courier New", Courier, monospace; font-size:16px;
border-bottom:solid;
width:500px;
}
21
Ghi chú
6
table ,tr,td,th{
border-collapse:collapse; border-color:#CC0000; border:1px
solid #990000;
}
th{ background:#FF6600; color:#FFFFFF;
}
Kết quả 2:
Kết
hợp
với tập tin
style1.2.css
7
Hướng dẫn: thiết kế tập tin style1.2.css như sau:
table, tr, td, th{
border-collapse:separate; border:1px inset #3300FF;
width:450px;
font-family:"Courier New", Courier, monospace; font-size:12px;
}
table tr th{ background:#660066; color:#FFFFFF; height:50px;
font-size:15px;
}
.canhgiua{
text-align:center; background:#660066; color:#FFFFFF;
width:10%;}
22
