12 th thu t thi t k cho website th ng m i nh (Th Ba, 22/09/2009-2:38 PM) ủ ậ ế ế ươ ạ ỏ ứ
Thi t k web có th là m t công vi c không m y d dàng, v y b n sế ế ể ộ ệ ấ ễ ậ ạ ẽ
c n nh ng k năng nào? Có th t thi t k nó không? Và khi nào c n đ nầ ữ ỹ ể ự ế ế ầ ế
m t website? ộ
Thi t k web có th là m t công vi c không m y d dàng, v y b n s c n nh ng kế ế ể ộ ệ ấ ễ ậ ạ ẽ ầ ữ ỹ
năng nào? Có th t thi t k nó không? Và khi nào c n đ n m t website? Sau khiể ự ế ế ầ ế ộ
thành l p và v n hành công ty hay là khi vi c kinh doanh c a b n đ c ti n hành trênậ ậ ệ ủ ạ ượ ế
trang web.
Dù có vài câu h i khi n b n băn khoăn song ch có m t câu h i mà b n ph i c g ngỏ ế ạ ỉ ộ ỏ ạ ả ố ắ
tìm ra câu tr l i, và s ch có đ c nh ng câu tr l i phù h p nh s tr giúp c aả ờ ẽ ỉ ượ ữ ả ờ ợ ờ ự ợ ủ
ng i t v n ho c công ty thi t k web. ườ ư ấ ặ ế ế
D i đây là nh ng đi u b n nên xem xét khi lên k ho ch, thi t k và xây d ngướ ữ ề ạ ế ạ ế ế ự
website, sao cho có m t trang web có n i dung thu hút khách truy c p và dành đ c thộ ộ ậ ượ ứ
h ng trên công c tìm ki m. ạ ụ ế
1. Hãy có m t logo đ p. B i nó là th ng hi u và là đi u khi n m i ng i nh t iộ ẹ ở ươ ệ ề ế ọ ườ ớ ớ
website c a b n. Logo th ng đ c đ t phía trên cùng c a website vì khách thăm sủ ạ ườ ượ ặ ở ủ ẽ
d nhìn th y v trí này tr c tiên khi t i trang web c a b n. Logo/ th ng hi u có thễ ấ ị ướ ớ ủ ạ ươ ệ ể
“ ph n ánh” r t nhi u đi u vì th nó r t quan tr ng. ả ấ ề ề ế ấ ọ
2. Bài text trên m i trang c n đ c liên quan t i nhau và có t i thi u 250 t , th t t tỗ ầ ượ ớ ố ể ừ ậ ố
n u nh ng bài text này có ch a các t khóa v s n ph m và d ch v c a b n. Songế ữ ứ ừ ề ả ẩ ị ụ ủ ạ
cũng có th s d ng các bài copy c a chuyên gia v vi t text cho website.ể ử ụ ủ ề ế
3. Hình nh cũng r t quan tr ng , hình nh đ p v s n ph m có th thay muôn l i, cònả ấ ọ ả ẹ ề ả ẩ ể ờ
hình nh không m y “ thuy t ph c” có th nh h ng t i giao di n c a website. Songả ấ ế ụ ể ả ưở ớ ệ ủ
b n cũng không nên t i lên quá nhi u hình nh. ạ ả ề ả
4. M i trang nên có: Th meta keywords, meta descriptions và tiêu đ trang riêng vìỗ ẻ ề
chúng là m t ph n r t quan tr ng trong xây d ng website. ộ ầ ấ ọ ự
5. Hãy th dùng CSS (đ nh ki u trình bày trang HTML) đ thu n ti n h n cho các côngử ị ể ể ậ ệ ơ
c tìm ki m cũng nh giúp nh ng thay đ i v màu s c, phông hay c ch đ c th cụ ế ư ữ ổ ề ắ ỡ ữ ượ ự
hi n d dàng h n. ệ ễ ơ
6. Nên s d ng các th H1-H6 đ làm n i b t tiêu đ chính trên trang text vì đi u nàyử ụ ẻ ể ổ ậ ề ề
có liên quan t i tiêu đ website c a b n và các th H2 s phù h p cho các tiêu đ c aớ ề ủ ạ ẻ ẽ ợ ề ủ
các đo n văn ti p theo. Nên s d ng ch in đ m đ làm n i b t các t khóa trongạ ế ử ụ ữ ậ ể ổ ậ ừ
đo n văn, nh ng cũng không nên dùng nó quá nhi u. ạ ư ề
7. N u b n s d ng đi u h ng text thì các công c tìm ki m s l p ch m c choế ạ ử ụ ề ướ ụ ế ẽ ậ ỉ ụ
website c a b n hi u qu h n. ủ ạ ệ ả ơ
8. Hãy đ m b o cho ng i s d ng cu i cùng d dàng mua ho c tìm ki m đ c cácả ả ườ ử ụ ố ễ ặ ế ượ
s n ph m và d ch v c a b n, nên ti n hành nâng c p đ h ng t i s đ i m i vàả ẩ ị ụ ủ ạ ế ấ ể ướ ớ ự ổ ớ
mang l i doanh thu. ạ
9. Nh ng đ ng d n t các trang t i trang bên trong khác cũng ph i t t, hãy qu ng cáoữ ườ ẫ ừ ớ ả ố ả
các s n ph m ho c d ch v khác, hãy s d ng chúng đ ng i dùng tìm th y nh ngả ẩ ặ ị ụ ử ụ ể ườ ấ ữ
y u t khác trên website c a b n d dàng h n nh ng cũng không nên quá l m d ngế ố ủ ạ ễ ơ ư ạ ụ
chúng.
10. Hãy xây d ng m t s đ web đ các ph ng ti n tìm ki m l p ch m c d dàngự ộ ơ ồ ể ươ ệ ế ậ ỉ ụ ễ
h n, b n có th t i m t s đ web XML t các công c webmaster trên Google vì đi uơ ạ ể ả ộ ơ ồ ừ ụ ề
đó khi n vi c l p ch m c cho m i trang trên website c a b n thu n ti n h n. ế ệ ậ ỉ ụ ọ ủ ạ ậ ệ ơ
11. N u đang thu th p b t kỳ thông tin nào t website qua m u khai báo thì b n nên cóế ậ ấ ừ ẫ ạ
m t chính sách riêng. ộ
12. Cu i cùng hãy cài đ t Google Analytics, đi u này r t quan tr ng, vì chúng cung c pố ặ ề ấ ọ ấ
nh ng d li u vô giá v khách truy c p c a b n. ữ ữ ệ ề ậ ủ ạ
Trên đây ch là vài đi m c n chú ý, song chúng l i r t c n thi t khi b n b t đ u thi tỉ ể ầ ạ ấ ầ ế ạ ắ ầ ế
k và xây d ng m t webiste cho mình. B n hãy nên tìm đ n m t công ty thi t k webế ự ộ ạ ế ộ ế ế
đ có th thi t k và xây d ng m t website nh ý cũng nh chuyên nghi p h n trongể ể ế ế ự ộ ư ư ệ ơ
công cu c “chi n th ng” khách hàng m c tiêu. ộ ế ắ ụ
Làm th nào đ xây d ng m t website cá nhân t m t m u website mi n phí (Th Ba,ế ể ự ộ ừ ộ ẫ ễ ứ
02/02/2010-5:24 PM)
Ngày nay các trang và blog cá nhân đã tr nên r t ph bi n.ở ấ ổ ế
Th t không m y d th y ng i nào không s h u trang webậ ấ ễ ấ ườ ở ữ
riêng cho mình. Vì nó là m t trong nh ng k t n i thu n ti n,ộ ữ ế ố ậ ệ
th m chí còn là n i đ “ c m nh n” v cu c s ng hay tácậ ơ ể ả ậ ề ộ ố
ph m ngh thu t. ẩ ệ ậ
Ngày nay các trang và blog cá nhân đã tr nên r t ph bi n. Th t không m y d th yở ấ ổ ế ậ ấ ễ ấ
ng i nào không s h u trang web riêng cho mình. Vì nó là m t trong nh ng k t n iườ ở ữ ộ ữ ế ố
thu n ti n, th m chí còn là n i đ “ c m nh n” v cu c s ng hay tác ph m nghậ ệ ậ ơ ể ả ậ ề ộ ố ẩ ệ
thu t. ậ
Trang cá nhân không ch là m t cách th hi n v b n thân t t nh t mà còn là n i sỉ ộ ể ệ ề ả ố ấ ơ ẻ
chia nh ng suy nghĩ, ý t ng, c m xúc, tình c m cũng nh m i đi u x y ra xungữ ưở ả ả ư ọ ề ả
quanh trong cu c s ng c a b n. Đó là t i sao mà chúng ta l i c g ng t o trang riêngộ ố ủ ạ ạ ạ ố ắ ạ
d a trên template web mi n phí. V i ngân quĩ th t ‘ thân thi n’ nên ch m t kho ng 2ự ễ ớ ậ ệ ỉ ấ ả
gi là b n có th dành cho mình 1 trang riêng. ờ ạ ể
V y nên, bài báo này s ch cho b n cách t o m t trang và ti n hành m i tùy ch nh c nậ ẽ ỉ ạ ạ ộ ế ọ ỉ ầ
thi t d a trên web template. Sau đó b n s đ c thêm ph n gi i thi u v các nhà cungế ự ạ ẽ ọ ầ ớ ệ ề
c p tên mi n và máy ch c a chúng tôi. ấ ề ủ ủ
Hãy ch n m t m u thi t kọ ộ ẫ ế ế.
N u b n không ph i là nhà thi t k web, thì cách nhanh và đ n gi n nh t đ có m tế ạ ả ế ế ơ ả ấ ể ộ
website nhìn chuyên nghi p là s d ng các m u website đ c làm tr c. B n có thệ ử ụ ẫ ượ ướ ạ ể
tìm ki m các m u web mi n phí t r t nhi u ngu n. Song Free Templates Online làế ẫ ễ ừ ấ ề ồ
ngu n khá tin c y vì đó cung c p các m u web ch t l ng phù h p v i các tiêuồ ậ ở ấ ẫ ấ ượ ợ ớ
chu n web. Tôi đã ch n cho mình m u ẩ ọ ẫ web template # 63 d i đây:ướ
Sau khi t i đ c m u web, hãy ch n th m c fonts và files có d ng “.psd” và “html”. ả ượ ẫ ọ ư ụ ạ
Tùy ch nh m u webỉ ẫ
Đây là lúc c n tùy ch nh m u web. N u b n không có th i gian hay am hi u nhi u đầ ỉ ẫ ế ạ ờ ể ề ể
tri n khai toàn b quá trình này thì có th s d ng các d ch v ch nh s a m u web. T iể ộ ể ử ụ ị ụ ỉ ử ẫ ạ
đây b n có th có m c giá d ch v r t phù h p. Các nhà phát tri n web c a h s hoànạ ể ứ ị ụ ấ ợ ể ủ ọ ẽ
t t yêu c u c a b n m t cách chính xác, d dàng và chuyên nghi p. Nh ng n u b nấ ầ ủ ạ ộ ễ ệ ư ế ạ
không ng i khó khăn thì cũng t tùy ch nh đ c và s b t đ u t b n HTML. ạ ự ỉ ượ ẽ ắ ầ ừ ả
Hãy dùng Adobe Photoshop CS+, Adobe Dreamweaver 8+ ho c b t kỳ trình so n th oặ ấ ạ ả
HTML nào khác đ ti n hành m i tùy ch nh c n thi t. Tr c khi b t đ u b n nên càiể ế ọ ỉ ầ ế ướ ắ ầ ạ
đ t các font ch c n thi t ( chúng th ng đ c thay th trong th m c “các ngu nặ ữ ầ ế ườ ượ ế ư ụ ồ
ho c font” – Vào ặthis tutorial đ có đ c chi ti t. Sau đó hãy m file d ng “.psd” trongể ượ ế ở ạ
photoshop và h c cách làm. ọ
Tr c h t, chúng ta s tùy ch nh ph n đ u c a m u web b ng công c horizontalướ ế ẽ ỉ ầ ầ ủ ẫ ằ ụ
Type, hãy nh p tên công ty và thay đ i tagline. Đ ng lo l ng khi slice không đ dài vìậ ổ ừ ắ ủ
tiêu đ web c a b n có th t đi u ch nh đ c trong gi i h n c a nó. B n cũng dề ủ ạ ể ự ề ỉ ượ ớ ạ ủ ạ ễ
dàng tùy ch nh kích th c c a slice b ng cách ch n Slice Select Tool và làm n i logoỉ ướ ủ ằ ọ ổ
(b ng kích chu t trái + CTRL). Hãy kích chu t trái đ kéo các border slice. ằ ộ ộ ể
Sau khi xong nh ng thay đ i này, hãy l u l i logo đã ch nh và thay logo đó vào. Khiữ ổ ư ạ ỉ
slice v n đ c ch n, hãy vào “ File” -> “save for Web and Devices”. B n không nênẫ ượ ọ ạ
đi u ch nh thi t l p b i coder đã hoàn t t công vi c này. Hãy n nút Save vào saveề ỉ ế ậ ở ấ ệ ấ
files t i Image directory và thay tên file d ng .jpg. ớ ạ
Ti p đ n là ch nh s a tiêu đ các text. N u b n th y t t c các tiêu đ text trên m uế ế ỉ ử ề ế ạ ấ ấ ả ề ẫ
web này h p lý thì hãy l u chúng l i. ợ ư ạ
Hãy l u l i các nút menu. B n có th s d ng Hirizontal Type Tool đ s a tên c a cácư ạ ạ ể ử ụ ể ử ủ
nút. Tôi đã s a nút chính và đ i tên nó là “My Gallery”. ử ổ
Hãy l u các nút menu này đ thay th nh ng nút cũ trên web và các th m c hình như ể ế ữ ư ụ ả
(Images folder).
Sau đó, hãy đ i nh ph n trung tâm c a m u web. L u ý r ng kích th c c a nhổ ả ở ầ ủ ẫ ư ằ ướ ủ ả
c n phù h p v i các m c riêng đ tránh gây nh h ng t i b c c. Hãy l u nh m iầ ợ ớ ụ ể ả ưở ớ ố ụ ư ả ớ
thay hình cũ trên folder hình nh. ả
Bây gi hãy ch nh các nh t hai phía. Photoshop v n giúp b n th c hi n đi u đó.ờ ỉ ả ừ ẫ ạ ự ệ ề
Tr c tiên, hãy đ nh rõ kích th c hình nh theo pixel. 188 x 187 px là kích th c nhướ ị ướ ả ướ ả
phù h p cho website. Sau đó, hãy t o m t layer m i d i layer có nh ng m c tên đ cợ ạ ộ ớ ướ ữ ụ ượ
có s n và paste nh m i lên nó. B n cũng có th l p l i b c này v i hình nh thẵ ả ớ ạ ể ặ ạ ướ ớ ả ứ
hai. N u b n đã th c hi n đúng t t c các b c thì các nh m i này s đ c hi n thế ạ ự ệ ấ ả ướ ả ớ ẽ ượ ể ị
cùng mũi tên trên chúng. ở
M i nh đ c chia thành 4 slice (nh đã hi n th trên screenshot phía d i). Đi u nàyỗ ả ượ ư ể ị ướ ề
có nghĩa là b n nên l u riêng l i t ng slice, thay các folder cũ b ng folder m i và l uạ ư ạ ừ ằ ớ ư
chúng vào t ng folder m t. ừ ộ
