Photosho
p
+ html5, css3 + Flash + Action Scri
p
t 3.0












ĐỒ HỌA
DÀNH CHO WEB





LAB


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM

105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


2
Nội dung
Phần I: Thiết kế giao diện với Photoshop 4
Lab 1: Xử lý ảnh cho web 5
Lab 2: Chỉnh màu cơ bản 9
Lab 4: Màu sắc trong photoshop 15
Lab 5: Web Layout: Grid System 20
Lab 6: Thiết kế banner cho web
30
Lab 7: Thiết kế giao diện shop hoa tươi 39
Lab 8: Tạo layout web Shopping
56
Lab 9: Thiết kế giao diện website Kinh Đô 60
Phần II: Layout web với HTML + CSS 61
Lab 10: HTML – Hyper Text Markup Language 62
Lab 11: CSS - Cascading Style Sheet 69
Lab 12: FORM 72
Lab 13. Layout web với HTML & CSS 82
Lab 14: HTML5 – CSS3 92
Lab 15. Responsive Web Design 148
Phần III:Thiết kế banner động với Flash + Action script 162
Lab 1. Thao tác cơ bản 163
Lab 2: Layout basic 168

Lab 3. Layout with photoshop 174
Lab 4. Thiết kế giao diện bằng Flash kết hợp photoshop 179
Lab 5. Motion Tween 184
Lab 6. Motion Guides, Shape Tween 188
Lab 7. Motion Preset 199
Lab 8. Motion with mask 202
Lab 9. Tạo chuyển động dạng marquee 204
Lab 10. Button 211


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


3
Lab 12. Tạo slide ảnh đơn 217
Lab 13. Action script basic 225
Lab 14. Text in flash 234
Lab 15. Xử lý nhạc nền cho web Flash 238
Lab 16. Tạo form liên hệ 242
Lab 17. Sử dụng css trong Flash 246
Lab 18: Chuyển Flash sang HTML5 cho thiết bị di động 251
Phần IV: Convert PSD to Template Joomla
254
Lab 1: CÀI ĐẶT JOOMLA 2.5

255
Lab 2: Quản lý nội dung web 260
Lab 3: Thiết kế template Joomla 268



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


4







Phần I: Thiết kế giao diện với Photoshop





TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ

ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


5

Lab 1: Xử lý ảnh cho web
Đặc điểm của hình
Độ phân giải của ảnh (Image resolution)
- Tổng số điểm ảnh trên 1 inch vuông được gọi là độ phân giải của ảnh, đơn
vị là ppi (Pixel per inch) hay dpi (dot per inch). Ảnh có độ phân giải càng
cao thì càng mịn và sắc nét. Tuy nhiên Resolution càng lớn thì dung lượng
file càng lớn, gây khó khăn cho việc chỉnh sửa và lưu trữ.
- Bạn đừng cố gắng tăng độ phân giải của 1 tấm ảnh có độ phân giải thấp
lên độ phân giải cao (ví dụ từ 72 ppi lên 300 ppi), khi đó Photoshop sẽ
dùng giải thuật nội suy (interpolation) để thêm pixel vào hình ảnh dựa trên
các pi
xel đã có sẵn và điều này sẽ không thêm được thông tin gì mới cho
ảnh cả, nó chỉ thêm pixel vào và làm cho tập tin có dung lượng lớn hơn mà
thôi.
Các Resolution hay sử dụng:

R =72 dpi:
dùng trong thiết kế Web, các ấn phẩm xem trực tiếp trên màn hình.

R =150


300 dpi:
Dùng trong thiết kế các ấn phẩm in ấn.

Ruler (Thước đo)
Cho phép xác định vị trí (tọa độ) của hình ảnh.
Tạo các đường hướng dẫn (Guides) bằng cách click & drag từ thanh thước
dọc hay ngang.


Active image area (Vùng ảnh)


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


6

Vùng chứa hình ảnh cho phép in.
Để ẩn hay thể hiện các thanh công cụ bạn hãy chọn tên của nó trên menu
Window.

Thực hành
Ghép các ảnh cùng kích thước và ghi tên sản phẩm.



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


7
B1. Mở các file ảnh

B2. Crop ảnh theo kích thước 200x180px, Resolution: 72dpi
Chọn Crop tool > Set tham số như hình

Vẽ vùng chọn để cắt các file hình vừa mở có cùng kích thước.

B3. Sắp xếp hình thẳng hàng


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ



8

B4. Thêm tên sản phẩm, giá và nút đặt mua sản phẩm

Copy và sửa thông tin sản phẩm




TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


9

Lab 2: Chỉnh màu cơ bản
Chỉnh màu tự động
Cách 1:
Image / Adjustment / Auto Level (Ctrl + Shift + L)
> Tự động cân bằng ánh sáng.

Cách 2:
Image / Adjustment / Auto Color (Ctrl + Shift + L)


Cách 3:


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


10
Image / Adjustment / Auto Contract (Ctrl + Shift + Alt + L)


Chỉnh ảnh ngược sáng

Ảnh ngược sáng là ảnh chụp có chủ đề cùng hướng với ánh sáng còn máy
ảnh thì ngược hướng với ảnh sánh, kết quả phần chủ để thường bị tối, còn
nền thì sáng rõ.
Thực hiện
Chỉnh độ tương phản ngược cho bức ảnh (Tương phản ngược là vùng sáng
tối hơn, vùng tối sáng hơn).
Chọn hình ảnh
Chọn Ctrl + M (Image/ Adjustment/ Curver) > chỉnh thuộc tính như hình.


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM

105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


11


Các công cụ chấm sửa ảnh

Red Eye Tool (J)

Công cụ Red Eye Tool cho phép xóa hiện tượng mắt đỏ khi chụp ảnh có đèn Flash.
Path tool (J)

Loại bỏ các lỗi lớn của ảnh, là công cụ chấm sửa ảnh rất hiệu quả, đặc biệt đối với
ảnh hư hỏng nặng.



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ



12
Thực hiện :
1. (J) Chọn công cụ Path Tool
2. Click & Drag tạo vùng chọn xung quanh vùng ảnh bị lỗi.
3. Đặt con trỏ bên trong vùng chọn và rê nó đến vùng ảnh không có lỗi nhưng có
màu sắc tương đồng.
Clone Stamp tool (S)

Cho phép copy hình ảnh từ vùng này đến vùng khác, ứng dụng trong việc chấm sửa
và ghép ảnh.

Thực hành Tẩy mụn bằng photoshop
Với photoshop thì việc trị mụn thật đơn giản, chỉ vài cú click chuột thì bạn có thể nói
lời giả từ mụn?
Để thực hiện bài này bạn phải tải ảnh này về máy.



Bước 2: Chỉnh ánh sáng trên ảnh cho phù hợp
Nhấn Ctrl + M (Image/ Adjustment/ Curver) rồi chỉnh như hình.


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ



13


Bước 3: Xóa lỗi lớn (Mụn) và các lỗi nhỏ trên ảnh bằng Path tool (Phím J):
+ Chọn Path tool / Vẽ vùng chọn mụn / kéo thả vùng chọn đến vùng bên cạnh.


+ Sử dụng Spot Healing brushtool để chấm các lỗi nhỏ hơn.



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


14

Lặp lại đến khi hết mụn.
Xóa mắt đỏ (red eye)
Hiện tượng mắt đỏ hay xuất hiện với ảnh chụp đêm với đèn Flash.


Thực hiện:

B1. Tải ảnh về máy của bạn và mở với photoshop.
B2. Chọn công cụ Red eye tool (j) Click vào phần mắt màu đỏ.

B3. Tạo mắt trong xanh
+ Tạo layer mới (Nhấn F7 / Create a new layer / chọn mode color)


+ Chọn công cụ Brush tool / chọn màu xanh và vẽ màu phần mắt cần làm trong
xanh / giảm opacity cho layer tô màu để ảnh tự nhiên.



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


15

Lab 4: Màu sắc trong photoshop
Cơ bản về màu

A-C. Mode RGB color:
sử dụng trong các thiết bị điện tử.
D. Mode CMYK color:
Sử dụng trong các thiết bị in ấn.

Mode Bitmap
Loại ảnh bitmap là ảnh chỉ có hai màu đen và trắng. Trong ảnh bitmap, những
Options sửa chữa của photoshop không thể thực hiện được, như vậy nó phải được
chỉnh sửa từ khi ảnh còn là grayscale. Ảnh bitmap có dung lượng nhỏ gấp nhiều lần
các mode ảnh khác.
Mode bitmap được sử dụng trong xuất film cho các kỹ thuật in công nghiệp (Offset,
Helio, ).
Mode Grayscale
Ảnh Grayscale theo cách nói của người Việt là ảnh trắng đen, là dạng ảnh 8 bit nó
gồm 256 màu chuyển từ đen đến trắng. Khi một hồ sơ ảnh màu chuyển sang dạng
này tất cả thông tin về màu sẽ bị xóa khỏi hồ sơ.
Ảnh Gray được sử dụng trong nhiếp ảnh ngày xưa, hiện tại vẫn được sử dụng cho
một số dạng ảnh nghệ thuật.
Mode CMYK


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


16

CMYK : Cyan – Meganta – Yellow – Black.
Là dạng ảnh được cấu tạo từ 4 kênh màu phối hợp, gồm:
• Cyan:

Màu xanh lam.
• Magenta:
Màu hồng cánh sen.
• Yellow:
Màu vàng tươi.
• Black:
Màu đen.
Mode CMYK được ứng dụng trong việc thiết kế các ấn phẩm in ấn.
Thông số của hệ màu này là 100%.
Mode RGB
RGB : Red – Green – Blue.
Ảnh Mode RGB là mode căn bản trong photoshop. Loại ảnh này có hơn 16,7 triệu
màu có thể quan sát và điều chỉnh theo từng kênh màu đỏ (Red), xanh lá (Green) và
Xanh da trời (Blue), những kênh màu này gọi là channel. Trong ảnh này có 3 kênh
Red, Green và Blue.
Mode RGB được sử dụng trong việc thiết kế các ấn phẩm hiển thị trên màn hình,
thiết kế web, và thiết kế trong in kỹ thuật số.
Thông số của hệ màu này là 255.



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ



17
Thực hành thiết kế trang intro

B1. Tạo file mới > tô màu nền

Nhấn phím ‘
D
’ > nhấn Alt + Delete > tô màu nền đen
B2. Tạo các nút
Tiếp theo bạn sẽ tạo vùng chọn hình tròn và tô màu cho nút.
Chọn công cụ vùng chọn hình tròn > Vẽ vùng chọn (nhấn giữ phím shift trong lúc
vẽ)


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


18

Tiếp theo bạn tạo layer mới > chọn màu xanh cho foreground > nhấn Alt + Delete để
tô màu cho vùng chọn
Nhấn Ctrl + D để bỏ chọn.

Thêm text cho nút

> Chọn công cụ Type Tool > Chọn font > nhập text
> Chọn Add Layer Style trên bảng Layer > Chọn hiệu ứng Outer Glow và chọn tham
số như hình


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


19

Chọn button ( gồm hình tròn và text ) > Click kéo và giữ phím Alt để Copy thêm 4
nút.


B3. Đổi màu cho các button
Chọn từng nút hình tròn > nhấn Ctrl + U > chọn màu mới > OK
Làm tương tự để đổi màu các nút còn lại theo yêu cầu của bạn.



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com



Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


20

Lab 5: Web Layout: Grid System

Ở bài trước, chúng ta đã có tổng quan về cấu trúc website của mình. Bài viết này,
tôi sẽ giới thiệu đến các bạn một số hệ thống lưới thường được sử dụng cho web
design. Lưới thì có nhiều kiểu, tùy mục đích sử dụng và nhu cầu của mỗi người mà
dùng những kiểu lưới khác nhau.
Các bạn có thường xuyên sử dụng lưới không? Các bạn có biết tại sao mình phải
sử dụng lưới khi thiết kế không? Hãy thử nhìn 2 l
ayout dưới đây :

Chúng ta dễ dàng nhận thấy, với bấy nhiêu yếu tố, nhưng cách sắp xếp của layout
bên phải trông gọn gàng, chặt chẽ và đẹp mắt hơn nhiều. Còn layout bên trái thì lộn
xộn, trông như được sắp đặt một cách ngẫu nhiên.
Vậy, hệ thống lưới rất quan trọng trong mỗi thiết kế, nếu bạn muốn có được những
bố cục chặt chẽ, gọn gàng thì bạn không thể nào bỏ qua đư
ợc hệ thống lưới.
Đối với web design, hệ thống lưới được nhiều người dùng nhất đó là multi-columns
và modular.


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM

Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


21

1. Multi-columns :
Đối với hệ thống lưới multi-columns, các bạn có thể tham khảo thêm tại 2 website
/>


960 Grid System đơn giản là hệ thống lưới cho nội dung website có độ rộng là 960
pixel.
Với hệ thống lưới này có 2 phần : 12 column và 16 column.
Trong hệ thống 12 column, mỗi cột sẽ có độ rộng là 60px, lề trái và phải mỗi bên là
10 px, khoảng cách giữa các cột là 20px. Ngoài ra, ta có thể linh hoạt kết hợp các
cột lại như sau :

Từ đó, ta thấy độ rộng các cột có thể là 60, 140, 220, 300, 380, 460, 540, 620, 700,
780, 860 và 940 pixel.
Tương tự, trong hệ thống 16 column, mỗi cột sẽ có độ rộng là 40 px. Ta cũng có thể
kết hợp chúng lại như sau :


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com



Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


22

Độ rộng mỗi cột có thể là 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700,
760, 820, 880 và 940 pixel.
Đây là một ví dụ cho việc sử dụng hệ thống 12 column, các bạn có thể tham khảo
thêm nhiều ví dụ khác tại website của 960 Grid System

Ngoài 960 Grid System, các bạn còn có thể sử dụng 978 Grid System, tham khảo
tại website :
/>


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


23

Với hệ thống Grid này, các bạn xem demo tại đây để biết thêm về kích thước cũng
như khoảng cách của mỗi cột

/>

2. Modular Grid
Modular Grid là hệ thống lưới mà không chỉ chia ra nhiều cột mà còn chia nhiều
hàng, tạo thành các hình vuông hay hình chữ nhật đều nhau, giúp cho việc thiết kế
linh hoạt hơn

Với hệ thống lưới này, khi chia các phần trong website của bạn sẽ dễ dàng hơn.


TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com


Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


24

Dưới đây là một ví dụ website sử dụng modular grid



TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ
ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM
105 Bà Huyện Thanh Quan, Q3, TP. HCM
Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com



Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ


25
Web Layout: Content Overview

Đối với một website có giao diện đẹp, màu sắc bắt mắt, nội dung thú vị, cách sử
dụng dễ dàng sẽ gây ấn tượng với người truy cập, từ đó họ sẽ còn trở lại thăm web
của bạn nhiều lần nữa. Vì vậy, bước này là bước giúp bạn hình thành nên diện mạo
trang web của bạn, kết hợp các yếu tố hình thành nên trang web lại với nhau một
cách chặt chẽ và hiệu quả nhất.
Nếu bạn nghĩ đây là lúc bạn bắt đầu với Photoshop, Illustrat
or hay Fireworks? Có lẽ
là không, hay ít ra là không nếu bạn muốn có nhiều hơn 1 ý tưởng cho trang web.
Ngay lúc này đây, một tờ giấy trắng và cây bút chì là thứ cần thiết để bạn tập trung
vào thiết kế mà không bận tâm đến những công nghệ đằng sau nó. Thực tế, nếu
bạn phác thảo ra nhiều ý tưởng trên giấy trong 10 phút thì bạn cũng sẽ layout trên
máy được như thế.
Dựa trên t
hông tin của bản survey, thông tin về sitemap, bây giờ bạn cần phác thảo
ra các khu vực cần thiết cho web của bạn. Vì thế, mục đích của phần Content
Overview này là một bản phác thảo mô tả chi tiết của một trang web. Khi này chưa
sử dụng hình ảnh và text thật mà chỉ thực hiện những đường nét phác thảo
(wireframe) để tượng trưng cho vị trí các yếu tố. Nơi bạn sẽ đặt logo, navigation,
main cont
ent, sidebar và footer? Làm thế nào để chúng có mối quan hệ chặt chẽ với
nhau?