SlideShare a Scribd company logo
1 of 29
Download to read offline
BÀI 3
BỐ CỤC, ĐỊNH DẠNG WEB VỚI CSS
NHẮC LẠI BÀI TRƯỚ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

Slide 3 - Bố cục, định dạng web với CSS

2
MỤC TIÊU BÀI HỌC
Bố cục website với CSS:
Mô hình CSS Box
Làm việc với div và AP div
Xếp chồng và xếp gối các thành phần
Tạo style cho nội dung hộp
Điều chỉnh vị trí

Tổ chức và phác thảo website

Slide 3 - Bố cục, định dạng web với CSS

3
BỐ CỤC WEBSITE VỚI CSS
BỐ CỤC WEBSITE VỚI CSS
Mô hình CSS Box:
CSS bố trí các thành phần trong trang bằng mô hình
Box
Trong Box có thể chứa văn bản, hình ảnh, nội dung đa
phương tiện, bảng, ….
Mỗi Box đảm nhiệm một vùng nhất định trên trang
Box được xác định bởi chiều rộng và chiều dài

Slide 3 - Bố cục web & Bảng (table) trên trang web

5
BỐ CỤC WEBSITE VỚI CSS

Các thiết lập
trong mô hình
Box:
-Lề
- Khoảng đệm
-Đường viền
Mô hình CSS Box
Slide 3 - Bố cục web & Bảng (table) trên trang web

6
BỐ CỤC WEBSITE VỚI CSS
Lề (margins):
Phần trong suốt bao quanh ngoài hộp
Thiết lập bằng nhóm thuộc tính margins
Tạo khoảng cách giữa các box hoặc đường biên trang

Khoảng đệm (padding):
Là khoảng cách giữa cạnh trong của hộp và nội dung
Thiết lập bằng nhóm thuộc tính padding

Đường viền (border):
Nằm trực tiếp giữa lề và khoảng đệm, trong suốt theo
mặc định
Thiết lập bằng nhóm thuộc tính border
Slide 3 - Bố cục web & Bảng (table) trên trang web

7
BỐ CỤC WEBSITE VỚI CSS
Ví dụ về CSS Box:
CSS:
.stylebox { width:450px; border:#F00 solid 1px; margin:10px 5px 5px 10px;
padding:4px 8px 10px 12px; background-color:#CCC; color:#F60}
HTML:
<div class="stylebox">nội dung box <div>

Slide 3 - Bố cục web & Bảng (table) trên trang web

8
BỐ CỤC WEBSITE VỚI CSS
Làm việc với AP Div:
AP Div (Absolute Positioned Div – div định vị tuyệt
đối): là cách đơn giản và trực quan nhất để đặt các
hộp (box) trên web
Vị trí của hộp sẽ được xác định bởi các thuộc tính top,
left
Các thuộc tính này thiết lập khoảng cách của hộp lần
lượt từ cạnh trên và cạnh trái trang
Khi DW tạo AP Div sẽ tự động đặt tên mặc định:
ApDiv1, ApDiv2,… Tuy nhiên nên thay đổi tên để có
tính miêu tả hơn (ví dụ: boxleft, boxright, …)

Slide 3 - Bố cục web & Bảng (table) trên trang web

9
BỐ CỤC WEBSITE VỚI CSS
Khởi tạo và tùy chỉnh style cho AP Div bằng các
bảng tương ứng:

Có thể sử dụng chuột để tùy chỉnh vị trí, kích
thước của AP Div vừa tạo hoặc sử dụng bảng
PROPERTIES để điều chỉnh
Slide 3 - Bố cục web & Bảng (table) trên trang web

10
BỐ CỤC WEBSITE VỚI CSS
Tùy chỉnh ApDiv với bảng PROPERTIES:

Điều chỉnh vị trí của
APDiv bằng thuộc tính
top, left

Hoặc có thể áp dụng
class riêng cho ApDiv

Điều chỉnh kích thước
của ApDIv bằng giá trị
width, height

Đặt giá trị hình nền và
màu nền với thuộc
tính Bg image, Bg color

Tùy chỉnh đặt tên cho
ApDiv
Slide 3 - Bố cục web & Bảng (table) trên trang web

11
BỐ CỤC WEBSITE VỚI CSS
Làm việc với div và định vị khối trên web:
Khởi tạo <div> và định vị giữa trang với bảng tương
ứng
Định vị tương đối và tuyệt đối
Xếp gối các hộp và z-index

Slide 3 - Bố cục web & Bảng (table) trên trang web

12
BỐ CỤC WEBSITE VỚI CSS
Khởi tạo <div> và định vị giữa trang với bảng tương ứng

Sử dụng ID cho trường hợp này

Slide 3 - Bố cục web & Bảng (table) trên trang web

13
BỐ CỤC WEBSITE VỚI CSS

Khai báo này giúp căn <div> ở giữa
trang
Slide 3 - Bố cục web & Bảng (table) trên trang web

14
BỐ CỤC WEBSITE VỚI CSS
Định vị tuyệt đối:
Thành phần được thiết lập giá trị absolute (tuyệt đối)
sẽ tuân thủ chính xác các giá trị vị trí và chỉ nằm trong
mối tương quan với bộ chứa nó
Bộc chứa có thể là <div> hoặc bản thân trang

Box #2 được chứa, hay lồng trong
Box #1
Slide 3 - Bố cục web & Bảng (table) trên trang web

15
BỐ CỤC WEBSITE VỚI CSS
Định vị tương đối:
Thành phần được định vị tương đối nhận các giá trị
cho thuộc tính vị trí (top, left) nhưng cũng nằm trong
luồng thông thường như các nội dung HTML xung
quanh

Box #2 giữ nguyên vị trí như
trước nhưng nó bị dịch chuyển
so với các nội dung đứng trước

Slide 3 - Bố cục web & Bảng (table) trên trang web

16
BỐ CỤC WEBSITE VỚI CSS
Xếp gối các hộp và z-index:
Thuộc tính z-index quy định cụ thể ngăn xếp của
phần tử (thứ tự chồng)
Một phần tử với ngăn xếp thứ tự lớn hơn là luôn luôn
ở phía trước của một phần tử với một trật tự ngăn
xếp thấp hơn.
z-index chỉ hoạt động trên các yếu tố vị trí (vị trí: tuyệt
đối, vị trí: tương đối, hoặc vị trí: cố định).

Slide 3 - Bố cục web & Bảng (table) trên trang web

17
BỐ CỤC WEBSITE VỚI CSS
Ví dụ về z-index:
#apDiv1 {
position:absolute; width:373px; height:199px; z-index:1; left: 95px;
top: 18px; background-color: #FF0000;}
#apDiv2 { position:absolute; left:322px; top:124px; width:328px; height:173px;
z-index:2; background-color: #00FF00;
}

Slide 3 - Bố cục web & Bảng (table) trên trang web

18
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Tổ chức và phác thảo website là các công việc cần
thiết nằm trong giai đoạn thiết kế của quá trình thiết
kế web
Sản phẩm chính của các công việc này:
Sơ đồ chi tiết về mối liên hệ giữa các trang web trong
website
Phác thảo chi tiết về mặt hình thức của từng trang
web trong website

Tầm quan trọng:
Phát hiện sớm các bất hợp lý trong yêu cầu
Tạo bố cục nhất quán cho các trang trong website
Công việc thực hiện dễ dàng hơn
Slide 3 - Bố cục web & Bảng (table) trên trang web

20
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Tổ chức website là công việc định nghĩa ra các trang
web trong website và mối liên hệ giữa chúng
Các bước thực hiện:
Xác định các trang cần có trong website
Xác định vị trí của trang web
Xác định mối liên hệ giữa các trang trong website
Trang
chủ
Sản
phẩm

Trang cấp 1

Ví dụ:

Trang con cấp 2

Slide 3 - Bố cục web & Bảng (table) trên trang web

Laptop

Máy ảnh

Dịch vụ

Bảo
hành
21
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Liên kết trang: là công việc xác định link giữa các
trang web
Các loại liên kết thông dụng:
Liên kết theo đường thẳng
Liên kết dựa trên cơ sở dữ liệu
Liên kết phân cấp
Liên kết kết hợp giữa các loại trên

Slide 3 - Bố cục web & Bảng (table) trên trang web

22
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Liên kết theo đường thẳng:
1 chiều
2 chiều

Là loại liên kết phù hợp cho các website hướng
người dùng đi theo một thứ tự các bước nào đó
Ví dụ:
Website hướng dẫn
Website xử lý đơn mua hàng
Slide 3 - Bố cục web & Bảng (table) trên trang web

23
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Liên kết dựa trên có sở dữ liệu : Là loại liên kết khi
ngay tại các trang web chính, một số lượng lớn các
liên kết phụ thuộc vào các phần tử trong cơ sở dữ
liệu
Ví dụ:
Các trang web
liệt kê

Slide 3 - Bố cục web & Bảng (table) trên trang web

24
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Liên kết phân cấp: Là loại liên kết thông dụng nhất,
dựa trên liên kết này, người dùng sẽ đi theo từng
cấp để tới được thông tin mình cần
Ví dụ:
Website tin tức

Slide 3 - Bố cục web & Bảng (table) trên trang web

25
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Phác thảo website:
Là công việc tạo ra bản phác họa của từng trang web
trong website
Các bước thực hiện:
• Phác thảo layout
• Phác thảo chi tiết

Cách thức thực hiện:
• Vẽ bằng tay trên giấy
• Sử dụng công cụ chuyên phác thảo web: Balsamiq
Mockups, iPlotz, Microsoft Expression Blend, Mockup
Screens, ForeUI, …

Slide 3 - Bố cục web & Bảng (table) trên trang web

26
TỔ CHỨC VÀ PHÁC THẢO WEBSITE
Phác thảo web bằng Balsamiq Mockups:
Sử dụng trên web:
http://www.balsamiq.com/products/mockups
Sử dụng trên phần mềm Balsamiq Mockups ở máy
tính

Vùng cung cấp các
hình phác họa cho các
thành phần trên web

Vùng vẽ phác thảo cho
toàn trang web

Slide 3 - Bố cục web & Bảng (table) trên trang web

27
TỔ CHỨC VÀ PHÁC THẢO WEBSITE

Slide 3 - Bố cục web & Bảng (table) trên trang web

28
TỔNG KẾT
Các thành phần trên webpage được định nghĩa bởi
mô hình hộp (box). Mô hình này định nghĩa được
bằng các thuộc tính margins, padding, border
Với thuộc tính z-index, có thể định nghĩa xếp gối các
box trên webpage.
Tổ chức và phác thảo website là công đoạn cần thiết
và quan trọng trong quá trình thiết kế website

Slide 3 - Bố cục web & Bảng (table) trên trang web

29

More Related Content

What's hot

Slide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bảnSlide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bảnSống Khác
 
Slide 7 - Thiết kế Web cơ bản
Slide 7 - Thiết kế Web cơ bảnSlide 7 - Thiết kế Web cơ bản
Slide 7 - Thiết kế Web cơ bảnSống Khác
 
Slide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bảnSlide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bảnSống Khác
 
Slide 8 - Thiết kế Web cơ bản
Slide 8 - Thiết kế Web cơ bảnSlide 8 - Thiết kế Web cơ bản
Slide 8 - Thiết kế Web cơ bảnSống Khác
 
Bài 7 Xây dựng website - Giáo trình FPT
Bài 7 Xây dựng website - Giáo trình FPTBài 7 Xây dựng website - Giáo trình FPT
Bài 7 Xây dựng website - Giáo trình FPTMasterCode.vn
 
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTBài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
 
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...MasterCode.vn
 
Bài 3 Tạo style cho font và văn bản - Giáo trình FPT
Bài 3 Tạo style cho font và văn bản - Giáo trình FPTBài 3 Tạo style cho font và văn bản - Giáo trình FPT
Bài 3 Tạo style cho font và văn bản - Giáo trình FPTMasterCode.vn
 
Slide 1 - Thiết kế Web cơ bản
 Slide 1 - Thiết kế Web cơ bản Slide 1 - Thiết kế Web cơ bản
Slide 1 - Thiết kế Web cơ bảnSống Khác
 
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTBÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTMasterCode.vn
 
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPTBÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPTMasterCode.vn
 
Nhập môn HTML 2
Nhập môn HTML 2Nhập môn HTML 2
Nhập môn HTML 2Ly hai
 
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...MasterCode.vn
 
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theoBài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theoMasterCode.vn
 

What's hot (20)

Slide3
Slide3Slide3
Slide3
 
Slide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bảnSlide 2 - Thiết kế Web cơ bản
Slide 2 - Thiết kế Web cơ bản
 
Slide 7 - Thiết kế Web cơ bản
Slide 7 - Thiết kế Web cơ bảnSlide 7 - Thiết kế Web cơ bản
Slide 7 - Thiết kế Web cơ bản
 
Slide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bảnSlide 3 - Thiết kế Web cơ bản
Slide 3 - Thiết kế Web cơ bản
 
Slide 8 - Thiết kế Web cơ bản
Slide 8 - Thiết kế Web cơ bảnSlide 8 - Thiết kế Web cơ bản
Slide 8 - Thiết kế Web cơ bản
 
Bài 7 Xây dựng website - Giáo trình FPT
Bài 7 Xây dựng website - Giáo trình FPTBài 7 Xây dựng website - Giáo trình FPT
Bài 7 Xây dựng website - Giáo trình FPT
 
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTBài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPT
 
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
 
Bài 3 Tạo style cho font và văn bản - Giáo trình FPT
Bài 3 Tạo style cho font và văn bản - Giáo trình FPTBài 3 Tạo style cho font và văn bản - Giáo trình FPT
Bài 3 Tạo style cho font và văn bản - Giáo trình FPT
 
Slide2
Slide2Slide2
Slide2
 
Slide 1 - Thiết kế Web cơ bản
 Slide 1 - Thiết kế Web cơ bản Slide 1 - Thiết kế Web cơ bản
Slide 1 - Thiết kế Web cơ bản
 
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTBÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
 
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPTBÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
 
Web2022 slide 8
Web2022   slide 8Web2022   slide 8
Web2022 slide 8
 
Nhập môn HTML 2
Nhập môn HTML 2Nhập môn HTML 2
Nhập môn HTML 2
 
Web1012 slide 7
Web1012   slide 7Web1012   slide 7
Web1012 slide 7
 
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
 
Slide5
Slide5Slide5
Slide5
 
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theoBài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo
Bài 4: Template & điều hướng trang Web - Giáo trình FPT - Có ví dụ kèm theo
 
Slide4
Slide4Slide4
Slide4
 

Viewers also liked

Adana pegasus ucuz uçak bileti telefon
Adana pegasus ucuz  uçak bileti telefonAdana pegasus ucuz  uçak bileti telefon
Adana pegasus ucuz uçak bileti telefonhasan ahmet
 
Bursa pegasus ucuz uçak bileti telefon
Bursa pegasus ucuz  uçak bileti telefonBursa pegasus ucuz  uçak bileti telefon
Bursa pegasus ucuz uçak bileti telefonhasan ahmet
 
çAnakkale pegasus ucuz uçak bileti telefon
çAnakkale pegasus ucuz  uçak bileti telefonçAnakkale pegasus ucuz  uçak bileti telefon
çAnakkale pegasus ucuz uçak bileti telefonhasan ahmet
 
Bitlis pegasus ucuz uçak bileti telefon
Bitlis pegasus ucuz  uçak bileti telefonBitlis pegasus ucuz  uçak bileti telefon
Bitlis pegasus ucuz uçak bileti telefonhasan ahmet
 
Düzce pegasus ucuz uçak bileti telefon
Düzce pegasus ucuz  uçak bileti telefonDüzce pegasus ucuz  uçak bileti telefon
Düzce pegasus ucuz uçak bileti telefonhasan ahmet
 
Historias do Asorey (Semanas da Ciencia)
Historias do Asorey (Semanas da Ciencia)Historias do Asorey (Semanas da Ciencia)
Historias do Asorey (Semanas da Ciencia)iesasorey
 
Adıyaman pegasus ucuz uçak bileti telefon
Adıyaman pegasus ucuz  uçak bileti telefonAdıyaman pegasus ucuz  uçak bileti telefon
Adıyaman pegasus ucuz uçak bileti telefonhasan ahmet
 
Balıkesir pegasus ucuz uçak bileti telefon
Balıkesir pegasus ucuz  uçak bileti telefonBalıkesir pegasus ucuz  uçak bileti telefon
Balıkesir pegasus ucuz uçak bileti telefonhasan ahmet
 
Bartın pegasus ucuz uçak bileti telefon
Bartın pegasus ucuz  uçak bileti telefonBartın pegasus ucuz  uçak bileti telefon
Bartın pegasus ucuz uçak bileti telefonhasan ahmet
 
Disclosure profile
Disclosure profileDisclosure profile
Disclosure profileemily64
 
Elazığ pegasus ucuz uçak bileti telefon
Elazığ pegasus ucuz  uçak bileti telefonElazığ pegasus ucuz  uçak bileti telefon
Elazığ pegasus ucuz uçak bileti telefonhasan ahmet
 
Batman pegasus ucuz uçak bileti telefon
Batman pegasus ucuz  uçak bileti telefonBatman pegasus ucuz  uçak bileti telefon
Batman pegasus ucuz uçak bileti telefonhasan ahmet
 
çOrum pegasus ucuz uçak bileti telefon
çOrum pegasus ucuz  uçak bileti telefonçOrum pegasus ucuz  uçak bileti telefon
çOrum pegasus ucuz uçak bileti telefonhasan ahmet
 
Burdur pegasus ucuz uçak bileti telefon
Burdur pegasus ucuz  uçak bileti telefonBurdur pegasus ucuz  uçak bileti telefon
Burdur pegasus ucuz uçak bileti telefonhasan ahmet
 
Doppl development iteration #1
Doppl development   iteration #1Doppl development   iteration #1
Doppl development iteration #1Diego Perini
 
Ankara pegasus ucuz uçak bileti telefon
Ankara pegasus ucuz  uçak bileti telefonAnkara pegasus ucuz  uçak bileti telefon
Ankara pegasus ucuz uçak bileti telefonhasan ahmet
 
Doppl development iteration #7
Doppl development   iteration #7Doppl development   iteration #7
Doppl development iteration #7Diego Perini
 

Viewers also liked (20)

Slide 04
Slide 04Slide 04
Slide 04
 
Diapositivas celuluisfer
Diapositivas celuluisferDiapositivas celuluisfer
Diapositivas celuluisfer
 
Adana pegasus ucuz uçak bileti telefon
Adana pegasus ucuz  uçak bileti telefonAdana pegasus ucuz  uçak bileti telefon
Adana pegasus ucuz uçak bileti telefon
 
Bursa pegasus ucuz uçak bileti telefon
Bursa pegasus ucuz  uçak bileti telefonBursa pegasus ucuz  uçak bileti telefon
Bursa pegasus ucuz uçak bileti telefon
 
çAnakkale pegasus ucuz uçak bileti telefon
çAnakkale pegasus ucuz  uçak bileti telefonçAnakkale pegasus ucuz  uçak bileti telefon
çAnakkale pegasus ucuz uçak bileti telefon
 
Bitlis pegasus ucuz uçak bileti telefon
Bitlis pegasus ucuz  uçak bileti telefonBitlis pegasus ucuz  uçak bileti telefon
Bitlis pegasus ucuz uçak bileti telefon
 
Düzce pegasus ucuz uçak bileti telefon
Düzce pegasus ucuz  uçak bileti telefonDüzce pegasus ucuz  uçak bileti telefon
Düzce pegasus ucuz uçak bileti telefon
 
Historias do Asorey (Semanas da Ciencia)
Historias do Asorey (Semanas da Ciencia)Historias do Asorey (Semanas da Ciencia)
Historias do Asorey (Semanas da Ciencia)
 
Adıyaman pegasus ucuz uçak bileti telefon
Adıyaman pegasus ucuz  uçak bileti telefonAdıyaman pegasus ucuz  uçak bileti telefon
Adıyaman pegasus ucuz uçak bileti telefon
 
Balıkesir pegasus ucuz uçak bileti telefon
Balıkesir pegasus ucuz  uçak bileti telefonBalıkesir pegasus ucuz  uçak bileti telefon
Balıkesir pegasus ucuz uçak bileti telefon
 
Bartın pegasus ucuz uçak bileti telefon
Bartın pegasus ucuz  uçak bileti telefonBartın pegasus ucuz  uçak bileti telefon
Bartın pegasus ucuz uçak bileti telefon
 
Disclosure profile
Disclosure profileDisclosure profile
Disclosure profile
 
Elazığ pegasus ucuz uçak bileti telefon
Elazığ pegasus ucuz  uçak bileti telefonElazığ pegasus ucuz  uçak bileti telefon
Elazığ pegasus ucuz uçak bileti telefon
 
Batman pegasus ucuz uçak bileti telefon
Batman pegasus ucuz  uçak bileti telefonBatman pegasus ucuz  uçak bileti telefon
Batman pegasus ucuz uçak bileti telefon
 
çOrum pegasus ucuz uçak bileti telefon
çOrum pegasus ucuz  uçak bileti telefonçOrum pegasus ucuz  uçak bileti telefon
çOrum pegasus ucuz uçak bileti telefon
 
Burdur pegasus ucuz uçak bileti telefon
Burdur pegasus ucuz  uçak bileti telefonBurdur pegasus ucuz  uçak bileti telefon
Burdur pegasus ucuz uçak bileti telefon
 
Doppl development iteration #1
Doppl development   iteration #1Doppl development   iteration #1
Doppl development iteration #1
 
Proyecto de aula III
Proyecto de aula IIIProyecto de aula III
Proyecto de aula III
 
Ankara pegasus ucuz uçak bileti telefon
Ankara pegasus ucuz  uçak bileti telefonAnkara pegasus ucuz  uçak bileti telefon
Ankara pegasus ucuz uçak bileti telefon
 
Doppl development iteration #7
Doppl development   iteration #7Doppl development   iteration #7
Doppl development iteration #7
 

Similar to Web1012 slide 3

Bài 7 - Xây dựng layout cho trang web.docx
Bài 7 - Xây dựng layout cho trang web.docxBài 7 - Xây dựng layout cho trang web.docx
Bài 7 - Xây dựng layout cho trang web.docxTrongNguyn1
 
Baigiang css
Baigiang cssBaigiang css
Baigiang csshmtsystem
 
Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...
Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...
Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...MasterCode.vn
 
Slide6 - Co ban HTML5
Slide6 - Co ban HTML5Slide6 - Co ban HTML5
Slide6 - Co ban HTML5Đặng Til
 
Bài giảng Revit Structure 2015
Bài giảng Revit Structure 2015Bài giảng Revit Structure 2015
Bài giảng Revit Structure 2015Huytraining
 
Bai giang revit structure 2015
Bai giang revit structure 2015Bai giang revit structure 2015
Bai giang revit structure 2015Duong Tran
 
Bai giang revit structure 2015 nguyen hoanganh
Bai giang revit structure 2015   nguyen hoanganhBai giang revit structure 2015   nguyen hoanganh
Bai giang revit structure 2015 nguyen hoanganhDzung Nguyen Van
 
Bài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy TrainingBài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy TrainingQuoc Huy Phan
 
Bài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy TrainingBài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy TrainingQuoc Huy Phan
 
Bootstrap learning for every one and all
Bootstrap learning for every one and allBootstrap learning for every one and all
Bootstrap learning for every one and allvietdv1
 
Thiết kế giao diện với Liquid
Thiết kế giao diện với LiquidThiết kế giao diện với Liquid
Thiết kế giao diện với LiquidTien Nguyen
 
Asp net mvc3 music store egroups vn
Asp net mvc3 music store   egroups vnAsp net mvc3 music store   egroups vn
Asp net mvc3 music store egroups vnNguyen Van Hung
 
Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)
Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)
Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)Trung tâm Advance Cad
 
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầu
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầuHướng dẫn tạo CSS cơ bản cho người mới bắt đầu
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầuThyPhanThBch
 

Similar to Web1012 slide 3 (20)

Bài 7 - Xây dựng layout cho trang web.docx
Bài 7 - Xây dựng layout cho trang web.docxBài 7 - Xây dựng layout cho trang web.docx
Bài 7 - Xây dựng layout cho trang web.docx
 
Baigiang css
Baigiang cssBaigiang css
Baigiang css
 
Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...
Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...
Bài 7: Lập trình với CSDL – Sử dụng DESIGNER & Triển khai ứng dụng - Lập trìn...
 
Slide6 html5
Slide6 html5Slide6 html5
Slide6 html5
 
Slide6 - Co ban HTML5
Slide6 - Co ban HTML5Slide6 - Co ban HTML5
Slide6 - Co ban HTML5
 
Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3
 
Presentation
PresentationPresentation
Presentation
 
Postgre Diagram
Postgre DiagramPostgre Diagram
Postgre Diagram
 
Web1012 slide 2
Web1012   slide 2Web1012   slide 2
Web1012 slide 2
 
Bài giảng Revit Structure 2015
Bài giảng Revit Structure 2015Bài giảng Revit Structure 2015
Bài giảng Revit Structure 2015
 
Bai giang revit structure 2015
Bai giang revit structure 2015Bai giang revit structure 2015
Bai giang revit structure 2015
 
Bai giang revit structure 2015 nguyen hoanganh
Bai giang revit structure 2015   nguyen hoanganhBai giang revit structure 2015   nguyen hoanganh
Bai giang revit structure 2015 nguyen hoanganh
 
Bài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy TrainingBài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy Training
 
Bài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy TrainingBài giảng Revit Structure 2015 - Huy Training
Bài giảng Revit Structure 2015 - Huy Training
 
Bootstrap learning for every one and all
Bootstrap learning for every one and allBootstrap learning for every one and all
Bootstrap learning for every one and all
 
Css
CssCss
Css
 
Thiết kế giao diện với Liquid
Thiết kế giao diện với LiquidThiết kế giao diện với Liquid
Thiết kế giao diện với Liquid
 
Asp net mvc3 music store egroups vn
Asp net mvc3 music store   egroups vnAsp net mvc3 music store   egroups vn
Asp net mvc3 music store egroups vn
 
Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)
Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)
Giáo trình xuất bản vẽ Autodesk Inventor 2015 ( Advance CAD)
 
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầu
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầuHướng dẫn tạo CSS cơ bản cho người mới bắt đầu
Hướng dẫn tạo CSS cơ bản cho người mới bắt đầu
 

Web1012 slide 3

  • 1. BÀI 3 BỐ CỤC, ĐỊNH DẠNG WEB VỚI CSS
  • 2. NHẮC LẠI BÀI TRƯỚ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 Slide 3 - Bố cục, định dạng web với CSS 2
  • 3. MỤC TIÊU BÀI HỌC Bố cục website với CSS: Mô hình CSS Box Làm việc với div và AP div Xếp chồng và xếp gối các thành phần Tạo style cho nội dung hộp Điều chỉnh vị trí Tổ chức và phác thảo website Slide 3 - Bố cục, định dạng web với CSS 3
  • 4. BỐ CỤC WEBSITE VỚI CSS
  • 5. BỐ CỤC WEBSITE VỚI CSS Mô hình CSS Box: CSS bố trí các thành phần trong trang bằng mô hình Box Trong Box có thể chứa văn bản, hình ảnh, nội dung đa phương tiện, bảng, …. Mỗi Box đảm nhiệm một vùng nhất định trên trang Box được xác định bởi chiều rộng và chiều dài Slide 3 - Bố cục web & Bảng (table) trên trang web 5
  • 6. BỐ CỤC WEBSITE VỚI CSS Các thiết lập trong mô hình Box: -Lề - Khoảng đệm -Đường viền Mô hình CSS Box Slide 3 - Bố cục web & Bảng (table) trên trang web 6
  • 7. BỐ CỤC WEBSITE VỚI CSS Lề (margins): Phần trong suốt bao quanh ngoài hộp Thiết lập bằng nhóm thuộc tính margins Tạo khoảng cách giữa các box hoặc đường biên trang Khoảng đệm (padding): Là khoảng cách giữa cạnh trong của hộp và nội dung Thiết lập bằng nhóm thuộc tính padding Đường viền (border): Nằm trực tiếp giữa lề và khoảng đệm, trong suốt theo mặc định Thiết lập bằng nhóm thuộc tính border Slide 3 - Bố cục web & Bảng (table) trên trang web 7
  • 8. BỐ CỤC WEBSITE VỚI CSS Ví dụ về CSS Box: CSS: .stylebox { width:450px; border:#F00 solid 1px; margin:10px 5px 5px 10px; padding:4px 8px 10px 12px; background-color:#CCC; color:#F60} HTML: <div class="stylebox">nội dung box <div> Slide 3 - Bố cục web & Bảng (table) trên trang web 8
  • 9. BỐ CỤC WEBSITE VỚI CSS Làm việc với AP Div: AP Div (Absolute Positioned Div – div định vị tuyệt đối): là cách đơn giản và trực quan nhất để đặt các hộp (box) trên web Vị trí của hộp sẽ được xác định bởi các thuộc tính top, left Các thuộc tính này thiết lập khoảng cách của hộp lần lượt từ cạnh trên và cạnh trái trang Khi DW tạo AP Div sẽ tự động đặt tên mặc định: ApDiv1, ApDiv2,… Tuy nhiên nên thay đổi tên để có tính miêu tả hơn (ví dụ: boxleft, boxright, …) Slide 3 - Bố cục web & Bảng (table) trên trang web 9
  • 10. BỐ CỤC WEBSITE VỚI CSS Khởi tạo và tùy chỉnh style cho AP Div bằng các bảng tương ứng: Có thể sử dụng chuột để tùy chỉnh vị trí, kích thước của AP Div vừa tạo hoặc sử dụng bảng PROPERTIES để điều chỉnh Slide 3 - Bố cục web & Bảng (table) trên trang web 10
  • 11. BỐ CỤC WEBSITE VỚI CSS Tùy chỉnh ApDiv với bảng PROPERTIES: Điều chỉnh vị trí của APDiv bằng thuộc tính top, left Hoặc có thể áp dụng class riêng cho ApDiv Điều chỉnh kích thước của ApDIv bằng giá trị width, height Đặt giá trị hình nền và màu nền với thuộc tính Bg image, Bg color Tùy chỉnh đặt tên cho ApDiv Slide 3 - Bố cục web & Bảng (table) trên trang web 11
  • 12. BỐ CỤC WEBSITE VỚI CSS Làm việc với div và định vị khối trên web: Khởi tạo <div> và định vị giữa trang với bảng tương ứng Định vị tương đối và tuyệt đối Xếp gối các hộp và z-index Slide 3 - Bố cục web & Bảng (table) trên trang web 12
  • 13. BỐ CỤC WEBSITE VỚI CSS Khởi tạo <div> và định vị giữa trang với bảng tương ứng Sử dụng ID cho trường hợp này Slide 3 - Bố cục web & Bảng (table) trên trang web 13
  • 14. BỐ CỤC WEBSITE VỚI CSS Khai báo này giúp căn <div> ở giữa trang Slide 3 - Bố cục web & Bảng (table) trên trang web 14
  • 15. BỐ CỤC WEBSITE VỚI CSS Định vị tuyệt đối: Thành phần được thiết lập giá trị absolute (tuyệt đối) sẽ tuân thủ chính xác các giá trị vị trí và chỉ nằm trong mối tương quan với bộ chứa nó Bộc chứa có thể là <div> hoặc bản thân trang Box #2 được chứa, hay lồng trong Box #1 Slide 3 - Bố cục web & Bảng (table) trên trang web 15
  • 16. BỐ CỤC WEBSITE VỚI CSS Định vị tương đối: Thành phần được định vị tương đối nhận các giá trị cho thuộc tính vị trí (top, left) nhưng cũng nằm trong luồng thông thường như các nội dung HTML xung quanh Box #2 giữ nguyên vị trí như trước nhưng nó bị dịch chuyển so với các nội dung đứng trước Slide 3 - Bố cục web & Bảng (table) trên trang web 16
  • 17. BỐ CỤC WEBSITE VỚI CSS Xếp gối các hộp và z-index: Thuộc tính z-index quy định cụ thể ngăn xếp của phần tử (thứ tự chồng) Một phần tử với ngăn xếp thứ tự lớn hơn là luôn luôn ở phía trước của một phần tử với một trật tự ngăn xếp thấp hơn. z-index chỉ hoạt động trên các yếu tố vị trí (vị trí: tuyệt đối, vị trí: tương đối, hoặc vị trí: cố định). Slide 3 - Bố cục web & Bảng (table) trên trang web 17
  • 18. BỐ CỤC WEBSITE VỚI CSS Ví dụ về z-index: #apDiv1 { position:absolute; width:373px; height:199px; z-index:1; left: 95px; top: 18px; background-color: #FF0000;} #apDiv2 { position:absolute; left:322px; top:124px; width:328px; height:173px; z-index:2; background-color: #00FF00; } Slide 3 - Bố cục web & Bảng (table) trên trang web 18
  • 19. TỔ CHỨC VÀ PHÁC THẢO WEBSITE
  • 20. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Tổ chức và phác thảo website là các công việc cần thiết nằm trong giai đoạn thiết kế của quá trình thiết kế web Sản phẩm chính của các công việc này: Sơ đồ chi tiết về mối liên hệ giữa các trang web trong website Phác thảo chi tiết về mặt hình thức của từng trang web trong website Tầm quan trọng: Phát hiện sớm các bất hợp lý trong yêu cầu Tạo bố cục nhất quán cho các trang trong website Công việc thực hiện dễ dàng hơn Slide 3 - Bố cục web & Bảng (table) trên trang web 20
  • 21. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Tổ chức website là công việc định nghĩa ra các trang web trong website và mối liên hệ giữa chúng Các bước thực hiện: Xác định các trang cần có trong website Xác định vị trí của trang web Xác định mối liên hệ giữa các trang trong website Trang chủ Sản phẩm Trang cấp 1 Ví dụ: Trang con cấp 2 Slide 3 - Bố cục web & Bảng (table) trên trang web Laptop Máy ảnh Dịch vụ Bảo hành 21
  • 22. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Liên kết trang: là công việc xác định link giữa các trang web Các loại liên kết thông dụng: Liên kết theo đường thẳng Liên kết dựa trên cơ sở dữ liệu Liên kết phân cấp Liên kết kết hợp giữa các loại trên Slide 3 - Bố cục web & Bảng (table) trên trang web 22
  • 23. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Liên kết theo đường thẳng: 1 chiều 2 chiều Là loại liên kết phù hợp cho các website hướng người dùng đi theo một thứ tự các bước nào đó Ví dụ: Website hướng dẫn Website xử lý đơn mua hàng Slide 3 - Bố cục web & Bảng (table) trên trang web 23
  • 24. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Liên kết dựa trên có sở dữ liệu : Là loại liên kết khi ngay tại các trang web chính, một số lượng lớn các liên kết phụ thuộc vào các phần tử trong cơ sở dữ liệu Ví dụ: Các trang web liệt kê Slide 3 - Bố cục web & Bảng (table) trên trang web 24
  • 25. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Liên kết phân cấp: Là loại liên kết thông dụng nhất, dựa trên liên kết này, người dùng sẽ đi theo từng cấp để tới được thông tin mình cần Ví dụ: Website tin tức Slide 3 - Bố cục web & Bảng (table) trên trang web 25
  • 26. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Phác thảo website: Là công việc tạo ra bản phác họa của từng trang web trong website Các bước thực hiện: • Phác thảo layout • Phác thảo chi tiết Cách thức thực hiện: • Vẽ bằng tay trên giấy • Sử dụng công cụ chuyên phác thảo web: Balsamiq Mockups, iPlotz, Microsoft Expression Blend, Mockup Screens, ForeUI, … Slide 3 - Bố cục web & Bảng (table) trên trang web 26
  • 27. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Phác thảo web bằng Balsamiq Mockups: Sử dụng trên web: http://www.balsamiq.com/products/mockups Sử dụng trên phần mềm Balsamiq Mockups ở máy tính Vùng cung cấp các hình phác họa cho các thành phần trên web Vùng vẽ phác thảo cho toàn trang web Slide 3 - Bố cục web & Bảng (table) trên trang web 27
  • 28. TỔ CHỨC VÀ PHÁC THẢO WEBSITE Slide 3 - Bố cục web & Bảng (table) trên trang web 28
  • 29. TỔNG KẾT Các thành phần trên webpage được định nghĩa bởi mô hình hộp (box). Mô hình này định nghĩa được bằng các thuộc tính margins, padding, border Với thuộc tính z-index, có thể định nghĩa xếp gối các box trên webpage. Tổ chức và phác thảo website là công đoạn cần thiết và quan trọng trong quá trình thiết kế website Slide 3 - Bố cục web & Bảng (table) trên trang web 29