K thu t trong thi t k layout webỹ ậ ế ế
3.1 Các ph n m m s d ngầ ề ử ụ
Có r t nhi u ph n m m h tr cho công vi c thi t k website c aấ ề ầ ề ỗ ợ ệ ế ế ủ
nhi u nhà s n xu t ph n m m trên th gi i, trong đó n i b t và phề ả ấ ầ ề ế ớ ổ ậ ổ
bi n nh t là hãng Adobe. T i Vi t Nam h u h t các nhà thi t k đãế ấ ạ ệ ầ ế ế ế
s d ng thi t k layout dùng ph n m m c a Adobe.ử ụ ế ế ầ ề ủ
3.1.1 Photoshop:
Ph n m m x lý hình nh, qu n lý nh theo d ng bitmap. Ng iầ ề ử ả ả ả ạ ườ
thi t k dùng photoshop đ th hi n layout cho các trang trongế ế ể ể ệ
website cho giai đo n đ u tiên sau b c tìm ý t ng và phát th oạ ầ ướ ưở ả
3.1.2 Firework:
Ng i thi t k cũng có th s d ng ch ng trình này đ t o layout.ườ ế ế ể ử ụ ươ ể ạ
Đây là ph n m m qu n lý d li u theo d ng vector. ầ ề ả ữ ệ ạ
3.1.3 Flash:
Ph n m m dùng đ t o hình nh chuy n đ ng. u đi m n i b tầ ề ể ạ ả ể ộ Ư ể ổ ậ
c a Flash là t o ra đ c nh ng hình nh chuy n đ ng m m m i,ủ ạ ượ ữ ả ể ộ ề ạ
m n màng v i dung l ng l u tr th p. H u h t các chuy n đ ngị ớ ượ ư ữ ấ ầ ế ể ộ
trên website chúng ta th y đ u đ c t o b ng Flash. Ngoài ra cácấ ề ượ ạ ằ
phiên b n sau này c a Flash đ c k t n i v i ngôn ng l p trìnhả ủ ượ ế ố ớ ữ ậ
actionscript và c s d li u. Vì v y Flash không ch là m t ngở ở ữ ệ ậ ỉ ộ ứ
d ng dành cho ng i thi t k mà c nh ng ng i l p trình trongụ ườ ế ế ả ữ ườ ậ
vi c t o ra cái đ p trong th gi i websiteệ ạ ẹ ế ớ
3.1.4 Dreamweaver:
Ph n m m t o file HTML ph bi n. Sau khi thi t k hoàn ch nh bênầ ề ạ ổ ế ế ế ỉ
photoshop chúng ta dùng ph n m m này đ chuy n file thi t kầ ề ể ể ế ế
theo d ng web.ạ
3.1.4 K thu t t o file HTML và CSS: ỹ ậ ạ
Đ t o đ c m t file d ng website đòi h i ki n th c c b n c nể ạ ượ ộ ạ ỏ ế ứ ơ ả ầ
bi t đó là ngôn ng HTML. File HTML đ t o ra n i dung c aế ữ ể ạ ộ ủ
website và CSS là ph n đi u khi n n i dung y hi n th theo thi tầ ề ể ộ ấ ể ị ế
k đ c t o s n bên Photoshop. ế ượ ạ ẳ
B n có th h c qua khóa đào t o HTML và CSS c a m t trung tâmạ ể ọ ạ ủ ộ
nào đó kho ng 2-3 tháng có nh ng khái ni m v nó. Đ ng th i ph iả ữ ệ ề ồ ờ ả
ph i tr i qua vài d án th c t đ hoàn thi n k năng này. Trong tàiả ả ự ự ế ể ệ ỹ
li u tôi không đ c p chi ti t k thu t t o HTML mà đây là nh ngệ ề ậ ế ỹ ậ ạ ữ
khái ni m ban đ u giúp các b n ti p c n và hi u đ c web là cáiệ ầ ạ ế ậ ể ượ
gì.
3.2 Nh ng đ t tr ng c a thi t k webữ ặ ư ủ ế ế
3.2.1 Đ c đi m c a file thi t k .ặ ể ủ ế ế
Chu n web ph bi n hi n nay đ c thi t k thích h p cho màn hình cóẩ ổ ế ệ ượ ế ế ợ
kích th c 1024×768px. Vì th kích th c c a m t trang web s cóướ ế ướ ủ ộ ẽ
chi u ngang là 1000px, Đ cao c a file có th ng n hay dài tuỳề ộ ủ ể ắ
theo n i dung c a trang. Kích th c 1 trang web v i màn hìnhộ ủ ướ ớ
1024×768px không có thanh cu n đ ng và thanh cu n ngangộ ứ ộ
th ng s có kích th c các chi u l n nh t là (WxH)1000×550px.ườ ẽ ướ ề ớ ấ
Đ phân gi i s d ng cho web là 72px/inch.ộ ả ử ụ
Ch đ màu RGBế ộ
Khi thi t k web t t c s xem xét đ p x u đ u tr c ti p qua mànế ế ấ ả ự ẹ ấ ề ự ế
hình. Vì th c n có m t màn hình đ p, màu màn hình đ c đi uế ầ ộ ẹ ượ ề
ch nh chu n nh t. Khác v i hàng in hình nh c n ph i đ c ch tỉ ẩ ấ ớ ả ầ ả ượ ấ
l ng cao nh t khi phóng l n, nh ng đ i v i website n u thi t kượ ấ ớ ư ố ớ ế ế ế
c a chúng ta view t t nh t, đ p nh t ch đ zoom 100% là đ tủ ố ấ ẹ ấ ở ế ộ ạ
yêu c u.ầ
3.2.2 Đ s c nétộ ắ
V i thi t k web, đ s c nét c a các đ ng biên đ c đ c bi t chúớ ế ế ộ ắ ủ ườ ượ ặ ệ
tr ng nh m t o s chính xác đ n t ng pixel trong file. C n ph i làmọ ằ ạ ự ế ừ ầ ả
rõ bóng đ các nút, s phân bi t gi a 2 màu g n k ph i là rõở ổ ự ệ ữ ầ ề ả
ràng.
Ví d : biên màu đ (red) và màu đen (back) thì ph i đ m b o t iụ ỏ ả ả ả ạ
đ ng biên này không có b t kỳ màu trung gian nào, zoom l n fileườ ấ ớ
đ ki m soát đ ng biên.ể ể ườ
3.2.3 Các lo i file nh trên website:ạ ả
Khi d li u khi lên internet c n ph i quan tâm đ n dung l ng fileữ ệ ầ ả ế ượ
hình nh nh m tăng t c đ truy c p c a ng i s d ng. Vì v yả ằ ố ộ ậ ủ ườ ử ụ ậ
save m t hình nh d ng file phù h p nh t góp ph n làm gi mộ ả ở ạ ợ ấ ầ ả
d ng l ng file mà v n đ m b o ch t l ng nh hi n th .ụ ượ ẫ ả ả ấ ượ ả ể ị
JPG: thích h p v i nh ng hình nh có nhi u màu và di n tích l nợ ớ ữ ả ề ệ ớ
nh nh ch p, nh có dùng màu chuy n (gradient). nh JPG khôngư ả ụ ả ể Ả
h tr tính trong su t.ỗ ợ ố
GIF: dành cho nh có size nh , ít màu nh icon, văn b n text màả ỏ ư ả
dùng d ng hình. H tr hình trong su t và hình đ ngạ ỗ ợ ố ộ
PNG: cũng đ c ch p nh n hi n th internet trong các phiên b nượ ấ ậ ể ị ả
m i c a các trinh duy t. h tr tính trong su t t t h n d ng GIF.ớ ủ ệ ộ ợ ố ố ơ ạ
SWF: đây là d ng nh chuy n đ ng đ c t o b ng Flash, Swift,ạ ả ể ộ ượ ạ ằ
Flex,… Đ c tính d ng file này là dung l ng file nh , s chuy nặ ạ ượ ẹ ự ể
đ ng m n màng và uy n chuy n. H u h t các hình đ ng trên webộ ị ể ể ầ ế ộ
hi n nay là s d ng d ng file này ệ ử ụ ạ
3.2.4 Font ch ữ
Ch có m t ít font ch đ c h tr th ng nh t trên cáctrình duy tỉ ộ ữ ượ ỗ ợ ố ấ ệ
mà thôi. Vì v y t t c các font ch d ng văn b n trên web ph iậ ấ ả ữ ạ ả ả
đ c ch n l a trên các font ch đó. Nói nh th thì không có nghĩượ ọ ự ữ ư ế
là chúng ta không có cách khi mu n dùng nh ng font đ p đ trangố ữ ẹ ể
trí cho web. V i nh ng tr ng h p này, Ta s tr nh ng text này ớ ữ ườ ợ ẽ ữ ữ ở
d ng hình nh đ đ a vào webạ ả ể ư
Các font ch đ c h th ng ch p nh n và luôn hi n th đúng font ữ ượ ệ ố ấ ậ ể ị ở
các trình duy t: Arial, Times New Roman, Courier New, Georgia,ệ
Geneva, Venada
Ki u mã đ c s d ng cho ti ng Vi t là Unicode, không s d ngể ượ ử ụ ế ệ ử ụ
ki u VNI.ể
Đi u quan tr ng trong thi t k là s phân bi t gi a text d ng hìnhề ọ ế ế ự ệ ữ ở ạ
nh và text d ng text trong trang HTML. Trong photoshop cácả ở ạ
option này đ c th hi n các d ng: none, smooth, strong, shape,ượ ể ệ ở ạ
…Ta đ c bi t quan tâm ki u ặ ệ ể none đ minh ho cho các text th t sể ạ ậ ự
là text bên HTML, v i ki u none này thì size thích h p nh t là sizeớ ể ợ ấ
10,11,12. Size 12 là đ c ph bi n nh t v a đ c nh t cho các n iượ ổ ế ấ ừ ọ ấ ộ
dung bài vi t trong trang web.ế
Các size khác, các font khác n u mu n s d ng đ hi n th trênế ố ử ụ ể ể ị
website t t nh t không s d ng d ng none, và khi chuy n quaố ấ ử ụ ạ ể
HTML thì ph n v trí ch a text này chúng ta s c t thành m t hìnhầ ị ứ ẽ ắ ộ
nh đ đ a vào web. ả ể ư
Trong Fireworks thì đ c hi u là text d ng No anti-alias s t ngượ ể ở ạ ẽ ươ
đ ng v i d ng ươ ớ ạ none c a photoshop. ủ
3.2.5 Trình duy t web và nh h ng đ n vi c hi n th .ệ ả ưở ế ệ ể ị
Internet Explorer: là trình duy t căn b n và ph bi t nh t vì ch c nệ ả ổ ế ấ ỉ ầ
cài windows vào máy thì IE s đ c bao g m. Nên đa ph n ng iẽ ượ ồ ầ ườ
s d ng dùng ch ng trinh này đ duy t web. Các phiên b n c aử ụ ươ ể ệ ả ủ
IE đang ph bi n trên các máy tính hi n nay là: IE6, IE7,IE8,.ổ ế ệ
FireFox : C n ph i cài đ t m i có th s d ng đ c, trình duy tầ ả ặ ớ ể ử ụ ượ ệ
này h tr thêm r t nhi u ti n ích khác. Có nhi u ti n ích dành choỗ ợ ấ ề ệ ề ệ
ng i phát tri n web trong trình duy t này. ườ ể ệ
Opera: Đ c đi m c a opera đ c đánh giá là khá đ p v giao di nặ ể ủ ượ ẹ ề ệ
trình duy tệ
Safari, Netscape,… và r t nhi u nh ng trình duy t khác cùng t nấ ề ữ ệ ồ
t i trên thi t k web.ạ ế ế
Do nhi u nhà s n xu t khác nhau, kèm theo v i nhi u phiên b nề ả ấ ớ ề ả
khác nhau, vì v y s có s ch nh l nh v trí s p x p, và s khôngậ ẽ ự ệ ệ ị ắ ế ự
th ng nh t các trình duy t. Đi u này, gây khó khăn r t nhi u choố ấ ở ệ ề ấ ề
vi c t o file HTML t file hình ành. Đòi h i trong quá trình làm vi cệ ạ ừ ỏ ệ
chúng ta c n ki m tra trên các trình duy t ph bi n nh t nh IE,ầ ể ệ ổ ế ấ ư
FF,Opare, đ cho chúng hi n th gi ng nhau và đúng nh thi t kể ể ị ố ư ế ế
ban đ u.ầ