HTML (HyperText Markup Language) là ngôn ngữ
đánh dấu siêu văn bản được thiết kế ra để tạo nên các
trang web. Tập tin (File) HTML là một văn bản có chứa
các thẻ đánh dấu (markup tags), các thẻ đánh dấu này
giúp các trình duyệt Web hiểu được cách trình bày và
hiển thị trang Web. File HTML có phần mở rộng
(Extension) là htm hay html và có thể được tạo ra bằng
bất cứ chương trình xử lý văn bản đơn giản nào.
87 trang |
Chia sẻ: lylyngoc | Lượt xem: 1550 | Lượt tải: 2
Bạn đang xem trước 20 trang tài liệu Chương 3. 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
Bùi Quang Trường
Bộ môn CNTT – Khoa HTTT.KT
– Trường ĐH Thương Mại
11/18/2013 Công cụ thiết kế Web - HTML 2
Nội dung
• Ngôn ngữ đánh dấu siêu văn bản HTML
• PHP, Javascript
• Một số công cụ hỗ trợ thiết kế website
11/18/2013 Công cụ thiết kế Web - HTML 3
3.1. Ngôn ngữ 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
11/18/2013 Công cụ thiết kế Web - HTML 4
3.1.1. Tổng quan về HTML
• HTML (HyperText Markup Language) là ngôn ngữ
đánh dấu siêu văn bản được thiết kế ra để tạo nên các
trang web. Tập tin (File) HTML là một văn bản có chứa
các thẻ đánh dấu (markup tags), các thẻ đánh dấu này
giúp các trình duyệt Web hiểu được cách trình bày và
hiển thị trang Web. File HTML có phần mở rộng
(Extension) là htm hay html và có thể được tạo ra bằng
bất cứ chương trình xử lý văn bản đơn giản nào.
11/18/2013 Công cụ thiết kế Web - HTML 5
3.1.1. Tổng quan về HTML
• Trong File HTML các phần tử (Element) được đánh
dấu bằng các thẻ HTML. Các thẻ này được bao bởi
dấu . Thông thường các thẻ HTML được
dùng theo một cặp (thẻ bắt đầu) và </tên
thẻ> (thẻ kết thúc), văn bản nằm giữa cặp thẻ này là
nội dung của phần tử. Các thẻ HTML không phân
biệt chữ hoa và chữ thường, có nghĩa là các kiểu
chữ đều được xem như nhau.
11/18/2013 Công cụ thiết kế Web - HTML 6
Cấu trúc cơ bản
3
3.1.1. Tổng quan về HTML
Một document HTML luôn bắt đầu bằng và kết thúc bằng (trong
đó bạn cũng có thể viết nhỏ hoặc viết hoa và ). Nhờ có cặp TAG
này mà Browser biết được đó là HTML - document dành cho trình duyệt. Những
chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết
giữa cặp TAG và . Trong một document html, chú thích được
dùng như sau:
Như vậy một trang web viết bằng html sẽ có cấu trúc như sau:
11/18/2013 Công cụ thiết kế Web - HTML 7
Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có
thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề.
Tiêu đề của trang web
Welcome to my Homepage!
Tiêu đề của trang web
Tiêu đề của trang web
Tiêu đề của trang web
Tiêu đề của trang web
là to nhất và là nhỏ nhất. Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải
dùng thêm một cặp TAG nữa : Tất cả những gì nằm giữa cặp TAG này đều được định
hướng vào phía giữa của trang.
3.1.1. Tổng quan về HTML
11/18/2013 Công cụ thiết kế Web - HTML 8
Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp
tag . Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một
cặp tag nữa, đó là Giữa và là tên của trang web được
browser trình bày phía trên cùng của menubar. Như vậy một trang web với "đầu" sẽ
có cấu trúc như sau:
Trang web dau tien cua toi
Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn.
Trong "head" ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine...
Next
3.1.1. Tổng quan về HTML
11/18/2013 Công cụ thiết kế Web - HTML 9
3.1.2. Các thẻ HTML
I. C¸c thÎ ®Þnh cÊu tróc tµi liÖu
1.1 HTML
1.2 HEAD
1.3 TITLE
1.4 BODY
11/18/2013 Công cụ thiết kế Web - HTML 10
1.1 HTML
•
• ... Toµn bé néi cña tµi liÖu ®îc ®Æt ë ®©y
•
11/18/2013 Công cụ thiết kế Web - HTML 11
1.2 HEAD
•
• ... PhÇn më ®Çu (HEADER) cña tµi liÖu ®îc ®Æt ë
®©y
•
11/18/2013 Công cụ thiết kế Web - HTML 12
1.3 TITLE
Tiªu ®Ò cña tµi liÖu
11/18/2013 Công cụ thiết kế Web - HTML 13
1.4 BODY
•
• .... phÇn néi dung cña tµi liÖu ®îc ®Æt ë ®©y
•
11/18/2013 Công cụ thiết kế Web - HTML 14
1.4 BODY (TT)
11/18/2013 Công cụ thiết kế Web - HTML 15
3.1.2. Các thẻ HTML (TT)
II. C¸c thÎ ®Þnh d¹ng khèi
2.1. ThÎ tr×nh bµy mét ®o¹n P
2.2. C¸c thÎ ®Þnh d¹ng tiªu ®Ò H1/H2/H3/H4/H5/H6
2.3 ThÎ ng¾t xuèng dßng BR
2.4 ThÎ ®Þnh d¹ng v¨n b¶n(v¨n b¶n ®îc ®Þnh d¹ng
tríc trong tµi liÖu HTML vµ khi tr×nh duyÖt hiÓn
thÞ th× sÏ tu©n theo ®Þnh d¹ng nµy) PRE
11/18/2013 Công cụ thiết kế Web - HTML 16
3.1.2. Các thẻ HTML (TT)
III. C¸c thÎ ®Þnh d¹ng danh s¸ch
Có ph¸p:
Môc thø nhÊt
Môc thø hai
Cã 4 kiÓu danh s¸ch:
Danh s¸ch kh«ng s¾p xÕp ( hay kh«ng ®¸nh sè)
Danh s¸ch cã s¾p xÕp (hay cã ®¸nh sè) , mçi
môc trong da nh s¸ch ®îc s¾p xÕp thø tù.
Danh s¸ch thùc ®¬n
Danh s¸ch ph©n cÊp
11/18/2013 Công cụ thiết kế Web - HTML 17
3.1.2. Các thẻ HTML (TT)
IV. C¸c thÎ ®Þnh d¹ng ký tù
4.1. C¸c thÎ ®Þnh d¹ng in ký tù
4.2. C¨n lÒ v¨n b¶n trong trang Web
4.3. C¸c ký tù ®Æc biÖt
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web
4.5. Chän kiÓu ch÷ cho v¨n b¶n
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt
11/18/2013 Công cụ thiết kế Web - HTML 18
4.1. C¸c thÎ ®Þnh d¹ng in ký tù
11/18/2013 Công cụ thiết kế Web - HTML 19
4.2. C¨n lÒ v¨n b¶n trong trang Web
11/18/2013 Công cụ thiết kế Web - HTML 20
4.3. C¸c ký tù ®Æc biÖt
11/18/2013 Công cụ thiết kế Web - HTML 21
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c
trang Web
Sau ®©y lµ mét sè gi¸ trÞ mµu c¬ b¶n:
11/18/2013 Công cụ thiết kế Web - HTML 22
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c
trang Web (TT)
Cú pháp:
11/18/2013 Công cụ thiết kế Web - HTML 23
4.4. Sö dông mµu s¾c trong thiÕt kÕ c¸c
trang Web (TT)
Sau ®©y lµ ý nghÜa c¸c tham sè cña thÎ BODY:
11/18/2013 Công cụ thiết kế Web - HTML 24
4.5. Chän kiÓu ch÷ cho v¨n b¶n
•Có ph¸p:
<FONT
FACE = font-name
COLOR = color
SIZE = n >
...
11/18/2013 Công cụ thiết kế Web - HTML 25
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt
•§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ .
•Có ph¸p:
11/18/2013 Công cụ thiết kế Web - HTML 26
4.6. Kh¸i niÖm v¨n b¶n siªu liªn kÕt
(TT)
ý nghÜa c¸c tham sè:
HREF ®Þa chØ cña trang Web ®îc liªn kÕt, lµ mét URL nµo
®ã.
NAME ®Æt tªn cho vÞ trÝ ®Æt thÎ.
TABLEINDEX Thø tù di chuyÓn khi Ên phÝm Tab
TITLE Văn b¶n hiÓn thÞ khi di chuét trªn siªu liªn kÕt.
TARGET Më trang Web ®îc liªn trong mét cöa sæ míi (_blank)
hoÆc trong cöa sæ hiÖn t¹i (_self), trong mét frame
(tªn frame).
11/18/2013 Công cụ thiết kế Web - HTML 27
3.1.2. Các thẻ HTML (TT)
V. C¸c thÎ chÌn ©m thanh, h×nh ¶nh
1. §a ©m thanh vµo mét tµi liÖu HTML:
2. ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi
liÖu HTML:
11/18/2013 Công cụ thiết kế Web - HTML 28
§a ©m thanh vµo mét tµi liÖu HTML
Cú pháp:
<BGSOUND
SRC = url
LOOP = n
>
11/18/2013 Công cụ thiết kế Web - HTML 29
ChÌn mét h×nh ¶nh, mét ®o¹n video
vµo tµi liÖu HTML
Cú pháp:
<IMG
ALIGN = TOP/MIDDLE/BOTTOM
ALT = text
BORDER = n
SRC = url
WIDTH = width
HEIGHT = height
HSPACE = vspace
VSPACE = hspace
TITLE = title
DYNSRC = url
START = FILEOPEN/MOUSEOVER
LOOP = n
>
11/18/2013 Công cụ thiết kế Web - HTML 30
3.1.2. Các thẻ HTML (TT)
VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu
Sau ®©y lµ c¸c thÎ t¹o b¶ng chÝnh:
... Định nghĩa một bảng
... Định nghĩa một hàng trong
bảng
... Định nghĩa một ô trong bảng
... Định nghĩa ô chứa tiêu đề củ
cột
... Tiêu đề của bảng
11/18/2013 Công cụ thiết kế Web - HTML 31
VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu
(TT)
Cú pháp:
<TABLE
ALIGN = LEFT / CENTER / RIGHT
BORDER = n
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKGROUND = url
BGCOLOR = color
CELLSPACING = spacing
CELLPADDING = pading
>
Tiªu ®Ò cña b¶ng biÓu
... §Þnh nghÜa c¸c dßng
<TR
ALIGN = LEFT/CENTER/RIGHT
VALIGN = TOP/MIDDLE/BOTTOM>
... §Þnh nghÜa c¸c « trong dßng
<TD
ALIGN = LEFT / CENTER / RIGHT
VALIGN = TOP / MIDDLE / BOTTOM
BORDERCOLOR = color
BORDERCOLORDARK = color
BORDERCOLORLIGHT = color
BACKBROUND = url
BGCOLOR = color
COLSPAN = n
ROWSPAN = n
>
... Néi dung cña «
...
...
11/18/2013 Công cụ thiết kế Web - HTML 32
3.1.2. Các thẻ HTML (TT)
VII. FORM
1. HTML Forms:
2. T¹o Form:
3. T¹o mét danh s¸ch lùa chän:
4. T¹o hép so¹n th¶o v¨n b¶n :
11/18/2013 Công cụ thiết kế Web - HTML 33
T¹o Form
Cú pháp:
<FORM
ACTION = ulr
METHOD = GET | POST
NAME = name
TARGET = frame_name | _blank | _self
>
11/18/2013 Công cụ thiết kế Web - HTML 34
T¹o mét danh s¸ch lùa chän
Cú pháp:
Tªn môc chän
thø nhÊt
Tªn môc chän thø hai
11/18/2013 Công cụ thiết kế Web - HTML 35
T¹o hép so¹n th¶o v¨n b¶n
Cú pháp:
<TEXTAREA
COLS=sè cét
ROWS=sè hµng
NAME=tªn
>
Văn bản ban đầu
11/18/2013 Công cụ thiết kế Web - HTML 36
3.1.3 Sử dụng Frontpage thiết kế
web tĩnh bằng HTML
1. Khởi động FrontPage
2. Tạo 1 trang web mới
3. Tạo 1 website mới
4. Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề...
5. Ðịnh dạng đoạn
6. Ðịnh dạng ký tự
7. Tạo hyperlink
8. Tạo các điểm dừng(Bookmark) trong trang
9. Chèn hình ảnh
10.Tạo table
11.Mở trang web hoặc web site đã có
11/18/2013 Công cụ thiết kế Web - HTML 37
Khởi động FrontPage
• Click chuột vào Start/Programs/Microsoft FrontPage. Màn hình sau sẽ
xuất hiện:
11/18/2013 Công cụ thiết kế Web - HTML 38
Tạo 1 trang web mới
• Chọn File/New/Page
11/18/2013 Công cụ thiết kế Web - HTML 39
Tạo 1 website mới
• Chọn File/New/Web
11/18/2013 Công cụ thiết kế Web - HTML 40
Ðặt thuộc tính trang web: tiêu đề, ảnh
nền, nhạc nền, lề...
• Click File/Properties, Chọn tab General
11/18/2013 Công cụ thiết kế Web - HTML 41
Ðặt thuộc tính trang web: tiêu đề, ảnh
nền, nhạc nền, lề...(TT)
• Click File/Properties, Chọn tab Background:
11/18/2013 Công cụ thiết kế Web - HTML 42
Ðặt thuộc tính trang web: tiêu đề, ảnh
nền, nhạc nền, lề...(TT)
• Click File/Properties, Chọn tab Margin:
11/18/2013 Công cụ thiết kế Web - HTML 43
Ðịnh dạng đoạn
•Thanh formatting:
11/18/2013 Công cụ thiết kế Web - HTML 44
Ðịnh dạng ký tự
11/18/2013 Công cụ thiết kế Web - HTML 45
Tạo hyperlink
• Chọn Insert/Hyperlink
11/18/2013 Công cụ thiết kế Web - HTML 46
Tạo các điểm dừng(Bookmark) trong
trang
• Chọn chức năng Insert/Bookmark
11/18/2013 Công cụ thiết kế Web - HTML 47
Chèn hình ảnh
• Di chuyển con nháy đến vị trí muốn chèn hình, click nút
11/18/2013 Công cụ thiết kế Web - HTML 48
Tạo table
• Chọn Table/Insert/Table
11/18/2013 Công cụ thiết kế Web - HTML 49
Mở trang web hoặc web site đã có
• Click biểu tượng
11/18/2013 Công cụ thiết kế Web - HTML 50
3.1.4. Định dạng website với CSS
1. Giới thiệu
2. Một Số Quy Ước Về Cách Viết CSS
3. Background
4. Font Chữ
5. Text
6. Pseudo-classes For Links
7. Class & ID
8. Span & Div
9. Box Model
10. Margin & Padding
11. Border
12. Height & Width
13. Float & Clear
14. Position
15. Layers
11/18/2013 Công cụ thiết kế Web - HTML 51
Giới thiệu
1. CSS là gì?
2. Tại sao CSS?
11/18/2013 Công cụ thiết kế Web - HTML 52
Một Số Quy Ước Về Cách Viết
CSS
1. Cú pháp CSS
2. Đơn vị CSS
3. Vị trí đặt CSS
4. Sự ưu tiên
11/18/2013 Công cụ thiết kế Web - HTML 53
Cú pháp CSS
Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.
Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng
code sau:
+ Trong HTML:
+ Trong CSS: body { background-color:#00BFF3; }
Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }
Ví dụ: body { background:#FFF; bolor:#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; } h3 { color:#0000FF; text-
transform:uppercase; }
Chú thích trong CSS được viết như sau /* Nội dung chú thích */ Ví dụ: /* Màu chữ
cho trang web */ body { color:red }
11/18/2013 Công cụ thiết kế Web - HTML 54
Đơn vị CSS
Đơn vị chiều dài
Đơn vị màu sắc
11/18/2013 Công cụ thiết kế Web - HTML 55
Vị trí đặt CSS
+ Cách 1: Nội tuyến (kiểu thuộc tính)
11/18/2013 Công cụ thiết kế Web - HTML 56
Vị trí đặt CSS (TT)
+ Cách 2: Bên trong (thẻ style)
11/18/2013 Công cụ thiết kế Web - HTML 57
Vị trí đặt CSS (TT)
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
11/18/2013 Công cụ thiết kế Web - HTML 58
Vị trí đặt CSS (TT)
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
11/18/2013 Công cụ thiết kế Web - HTML 59
Sự ưu tiên
11/18/2013 Công cụ thiết kế Web - HTML 60
Background
1. Màu nền (thuộc tính background-color
2. Ảnh nền (thuộc tính background-image)
3. Lặp lại ảnh nền (thuộc tính background-repeat)
4. Khóa ảnh nền (thuộc tính background-
attachment)
5. Định vị ảnh nền (thuộc tính background-
position)
11/18/2013 Công cụ thiết kế Web - HTML 61
Màu nền (thuộc tính background-
color
Ví dụ:
11/18/2013 Công cụ thiết kế Web - HTML 62
Ảnh nền (thuộc tính background-
image)
ảnh logo của blog Pearl
Viết CSS để đặt logo này làm ảnh nền
trang web như sau:
body {
background-image:url(logo.png)
}
h1 {
background-color:red
}
h2 {
background-color:orange
}
p {
background-color: FDC689
}
11/18/2013 Công cụ thiết kế Web - HTML 63
Lặp lại ảnh nền (thuộc tính
background-repeat)
• Thuộc tính này có 4 giá trị:
+ 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.
11/18/2013 Công cụ thiết kế Web - HTML 64
Khóa ảnh nền (thuộc tính
background-attachment)
Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web,
đây là giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web.
Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn
đang cuộn trang web.
11/18/2013 Công cụ thiết kế Web - HTML 65
Định vị ảnh nền (thuộc tính
background-position)
Ví dụ:
Thuộc tính background rút gọn
11/18/2013 Công cụ thiết kế Web - HTML 66
Font Chữ
1. Thuộc tính font-family
2. Thuộc tính font-style
3. Thuộc tính font-variant
4. Thuộc tính font-weight
5. Thuộc tính font-size
11/18/2013 Công cụ thiết kế Web - HTML 67
Text
1. Thuộc tính color
2. Thuộc tính text-indent
3. Thuộc tính text-align
4. Thuộc tính letter-spacing
5. Thuộc tính text-decoration
6. Thuộc tính text-transform
11/18/2013 Công cụ thiết kế Web - HTML 68
Pseudo-classes For Links
Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho
một đối tượng liên kết ở một trạng thái xác định như khi 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ụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái
liên kết:
11/18/2013 Công cụ thiết kế Web - HTML 69
Class & id
1. Nhóm phần tử với class
2. Nhận dạng phần tử với id
11/18/2013 Công cụ thiết kế Web - HTML 70
Nhóm phần tử với class
11/18/2013 Công cụ thiết kế Web - HTML 71
Nhận dạng phần tử với id
11/18/2013 Công cụ thiết kế Web - HTML 72
Span & div
1. Nhóm phần tử với
2. Nhóm phần tử với
11/18/2013 Công cụ thiết kế Web - HTML 73
Nhóm phần tử với
11/18/2013 Công cụ thiết kế Web - HTML 74
Nhóm phần tử với
11/18/2013 Công cụ thiết kế Web - HTML 75
Box Model
11/18/2013 Công cụ thiết kế Web - HTML 76
Margin & padding
1. Thuộc tính margin
2. Thuộc tính padding
11/18/2013 Công cụ thiết kế Web - HTML 77
Thuộc tính margin
11/18/2013 Công cụ thiết kế Web - HTML 78
Thuộc tính padding
• Cú pháp:
Padding: | | <padding-
bottom> |
11/18/2013 Công cụ thiết kế Web - HTML 79
Border
1. Thuộc tính border-width
2. Thuộc tính border-color
3. Thuộc tính border-style
11/18/2013 Công cụ thiết kế Web - HTML 80
Height & width
1. Thuộc tính width
2. Thuộc tính max-width
3. Thuộc tính min-width
4. Thuộc tính height
5. Thuộc tính max-height
6. Thuộc tính min-height
11/18/2013 Công cụ thiết kế Web - HTML 81
Float & clear
1. Thuộc tính float
2. Thuộc tính clear
11/18/2013 Công cụ thiết kế Web - HTML 82
Thuộc tính float
Thuộc tính float có 3 giá trị:
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.
11/18/2013 Công cụ thiết kế Web - HTML 83
Thuộc tính clear
Thuộc tính clear có tất cả 4 thuộc tính:
• left (tràn bên trái)
• right (tràn bên phải)
• both (không tràn)
• none.
11/18/2013 Công cụ thiết kế Web - HTML 84
Position
1. Absolute position
2. Relative position
11/18/2013 Công cụ thiết kế Web - HTML 85
Absolute position
11/18/2013 Công cụ thiết kế Web - HTML 86
Relative position
• Sự định vị tương đối cho một thành phần là sự định
vị được tính từ vị trí gốc trong tài liệu. Các thành
phần đã được định vị tương đối sẽ để lại khoảng
không trong tài liệu. Các thành phần được định vị
tương đối sẽ nhận giá trị position là relative.
11/18/2013 Công cụ thiết kế Web - HTML 87
Layers
• #logo1 {
• position:absolute; top:70px; left:50px; z-index:1
• }
• #logo2 {
• position:absolute; top:140px; left:100px; z-index:2
• }
• #logo3 {
• position:absolute; top:210px; left:150px; z-index:3
• }
• #logo4 {
• position:absolute; top:280px; left:200px; z-index:4
• }
• #logo5 {
• position:absolute; top:350px; left:250px; z-index:5
• }