MẸO THIẾT KẾ WEB

20 mẹo thiết kế web hữu ích nhất
Thiết kế Web tất nhiên không phải là một công việc đơn giản. Tuy nhiên, cũng có những cách giúp
bạn xây dựng một website với ít sức lực nhất. Sau đây là một trong số những cách đó.
1. Thiết kế thật đơn giản
Cách dễ nhất để tiết kiệm sức lực của bạn là thiết kế website thật đơn giản. Tuy nhiên, thật kỳ lạ là
nhiều nhà thiết kế lại lờ đi điều này. Bạn cần phải từ bỏ các đoạn Javascript chạy dọc chạy ngang
quá nhiều, những ảnh Gif động và những trang được làm mờ... Nói tóm lại, đơn giản khiến cho cuộc
sống dễ thở hơn.
2. Hãy tự chuẩn bị một cách kỹ càng
Nếu bạn sử dụng một ứng dụng soạn thảo trang Web WUSIWYG (What you see is what you get)
như Macromedia hay GoLive, bạn hãy ra thời gian nhập các thông số cài đặt FTP và chuẩn bị một
cách tốt nhất cho site của bạn (quá trình này được gọi là "định nghĩa site của bạn" (defining your
site) trong Dreamweaver). Làm điều này sẽ giúp bạn tránh được nhiều rắc rối do những chương
trình soạn thảo sẽ dễ dàng hơn trong việc theo dõi các file liên quan tới website của bạn.
3. Tạo các ứng dụng chuyển động (flash) mà không sử dụng chương trình Flash
Không có gì phải nghi ngờ rằng ứng dụng Flash rất là sinh động. Thiếu nó, một số nhà thiết kế
website chuyên nghiệp không thể thực hiện được những trang Web mang lại hiệu quả như ý muốn.
Tuy nhiên, nó khiến bạn phải tốn kém chi phí. Bạn cần biết là còn có những ứng dụng khác có thể
tạo ra các hiệu ứng flash mà chi phí lại thấp ơn. Ví dụ Swish () cho phép
bạn tạo ra các hiệu ứng flash với các đoạn văn bản trong khi EffectMaker
() cũng cho kết quả không kém.
4. Ghi chép lại các URL và đoạn code hay
Nghe có vẻ tầm thường nhưng đây lại là 1 kinh nghiệm hay. Hãy mở 1 văn bản Notepad hay Word
khi bạn duyệt web. Nếu bạn thấy một URL hay 1 ý tưởng nào đó thú vị, hay sao và dán nó vào văn
bản đang mở và sau đó, khi tìm kiếm ý tưởng cho việc thiết kế website, bạn có thể tham khảo văn
bản này
5. Thao tác tự động với nhiều hình ảnh cùng một lúc
Tại sao bạn lại phải tốn hàng giờ để tiêu chuẩn hoá hình ảnh trong khi có người khác làm hộ bạn ?
Phần mềm JPEGWizard tại địa chỉ sẽ nén hoặc
chỉnh lại kích thước của nhiều hình ảnh cùng 1 lúc hay thậm chí đổi tên chúng. Tuy nhiên, phần
mềm này yêu cầu bạn trả phí (69 USD) song chúng giúp bạn được rất nhiều việc. Cũng có vài phầm

mềm miễn phí khác tại địa chỉ như RealOptimizer Evaluation 1.5 vẫn
giúp bạn tiết kiệm được rất nhiều sức lực so với làm thủ công cho dù bị hạn chế về tính năng.
6. Thu thập các đoạn code
Kỹ thuật này mở rộng từ việc ghi chép lại các URL thú vị. Bạn hãy tạo một thư mục và đưa nó ra
ngoài màn hình Desktop. Nếu bạn có hay tình cờ có được cái gì đó hay, hãy lưu trữ chúng trong thư
mục này. Bạn sẽ kiểm soát được các đoạn code ưa thích của mình cũng như lưu trữ được các thông
tin phù hợp khác.
7. Sử dụng các đối tượng thư viện trong chương trình Dreamweaver
Hãy xây dựng 1 website mà bạn có thể chỉnh sửa nhiều trang một lúc chỉ bằng 1 hành động. Khi
làm việc với Dreamweaver, hãy sử dụng các mẫu thiết kế có dùng các đối tượng thư viện. Các yếu
tố thay đổi thường xuyên có thể được cập nhật mà thậm chí không cần mở file html. Chọn đoạn
HTML cho đối tượng bạn muốn, kéo nó vào thư viện và đặt cho nó một cái tên. Khi muốn sử dụng,
chỉ cần kéo các đối tượng đó vào trang Web của bạn. Bằng cách này, bạn có thể chỉnh sửa nhiều
trang có sử dụng chung một đối tượng một lúc. Chỉ cần bấm chuột vào đối tượng trong thư viện,
thay đổi nó sau đó lưu lại và bấm Update Now. Toàn bộ site sẽ được cập nhật.
8. Tự động tạo ra các thư viện ảnh
Nếu bạn đang tạo ra 1 album ảnh trực tuyến, hãy tìm 1 chương trình làm các công việc "chân tay"
cho bạn. Chương trình Express Thumbnail Creator không chỉ tạo ra các trang HTML phù hợp với kiểu
cách yêu cầu của bạn, mà nó còn điều chỉnh kích thước của những hình ảnh cho trang web và tạo ra
các hình ảnh thu nhỏ cho bạn.
9. Chuẩn hoá stylesheet của bạn
Hãy chuẩn hoá cách thức bạn sử dụng các stylesheet. Bằng cách này bạn sẽ có thể tạo ra những file
Javascript hay CSS mẫu mà có thể sử dụng trên các site khác nhau.Ngoài ra, bạn cũng nên nghĩ tới
việc hình thành một chuẩn hình thức cho các site mà bạn thiết kế. Về lâu dài, điều này sẽ giúp bạn
tiết kiệm được nhiều thời gian. Ngoài ra, bạn cũng nên tìm cách giữ bản quyền thiết kế của bạn,
bằng cách này bạn có thể sử dụng lại các yếu tố thiết kế của mình trên rất nhiều site.
10. Bắt chước cũng rất tốt cho bạn
Nếu như bạn cứ copy hàng loạt đoạn code vào trang Web của bạn thì cũng là không ổn nhưng
không có lý do gì khiến bạn không lấy các ý tưởng hay từ website của người khác. Nếu chịu khó suy
nghĩ về các ý tưởng của 1 site nào đó thì bạn sẽ biết được nó trông thế nào khi bạn mang chúng

vào website của mình.
11. Tạo 1 trang mẫu (template)
Trước khi bạn bắt đầu thiết kế website, hãy tạo 1 trang mẫu. Nó chứa tất cả các nhân tố xuất hiện ở
mọi trang của website. Ví dụ: Địa chỉ liên hệ ở cuối các web page, các tag lệnh ALT hay màu của các
đường link.
12. Sử dụng kỹ thuật ảnh GIF 1 ảnh điểm
Kỹ thuật này rất hay và đơn giản. Nó sẽ giúp website của bạn duy trì khuôn dạng ban đầu khi xem
ở các chế độ phân giải màn hình khác nhau. Ban đầu, HTML được xây dựng để cho mọi người dễ học
chứ không phải là một ngôn ngữ giúp trình bày một trang Web. Kỹ thuật này sử dụng 1 hình ảnh
đóng vai trò 1 dấu cách trong suốt có kích thức 1x1. Bạn có thể dùng nó để chèn vào bất cứ vị trí
nào khi việc để khoảng cách giữa các đối tượng gặp khó khăn – hay dùng nhất là giữa các bảng
biểu. Để biết thêm thông tin về kỹ thuật này, bạn có thể truy nhập địa chỉ:

13. Hãy tải về các đoạn mã
Việc có được các đoạn mã viết sẵn dễ dàng hơn bạn tưởng nhiều. Bạn đừng cho là mình đang lấy
cắp của người khác. Có nhiều nơi để bạn khai thác ví dụ như , nơi có
chứa mọi thể loại script cho bạn tải về. Scriptsearch.com cho phép bạn tải về mọi thứ, từ ASP script
tới JavaScript
14. Sử dụng bản đồ ảnh
Tại sao bạn lại phải tạo mỗi ảnh cho một nút bấm điều hướng trong khi có thể tạo một ảnh lớn cho
tất cả các nút bấm một cách dễ dàng. Miễn đó là một ảnh thuần tuý (plain image), nó có thể tải về
nhanh hơn so với nhiều ảnh nhỏ. Cách dễ nhất để tạo bản đồ ảnh là sử dụng một trình soạn thảo
WYSIWYG như Dreamweaver.
15. Sử dụng các hình ảnh làm sẵn
Hầu hết các hình ảnh trên Web đều được đăng ký bản quyền. Tuy nhiên, cũng có rất nhiều nơi cho
phép bạn có các hình ảnh để bạn thiết kế cho website của riêng mình. ScreamDesign
( có rất nhiều nút bấm và mũi tên cho bạn sử dụng. Free GIFs
and Animations ( cho thấy bạn cần tránh lấy những thứ gì - chẳng
hạn đừng sử dụng những hình lấp lánh quá mức.
16. Tiết kiệm thời gian bằng việc lập kế hoạch

Sử dụng nhiều giấy viết hơn nữa. Đã có nhiều người phải tốn rất nhiều thời gian do đi nhầm đường
vì không suy nghĩ kỹ trên mọi góc độ trước khi bắt tay vào việc thiết kế. Sẽ là dễ dàng hơn cho bạn
khi thiết kế ở một vị trí như thế này: Nhấm nháp 1 chút cà phê với 1 cây bút trong tay. Giấy viết
của bạn thì không bao giờ bị sập như máy vi tính và bản vẽ thì rất dễ hiểu đối với cả đội ngũ thiết
kế của bạn. Chỉ khi có được thiết kế trên giấy tốt thì bạn mới nên sờ tới chiếc máy vi tính. Điều này
sẽ giúp bạn nâng cao được năng suất làm việc.
17. Hãy làm đầy màn hình của mình
Nếu đôi khi bạn thấy rằng trang Web của bạn không đầy bề rộng của màn hình, mặc dù trong 1
bảng biểu đặt bề ngang là 100%, bạn hãy thử đặt toàn bộ trang trong1 table có chiều rộng được
đặt 100% mà không có spacing hay padding. Bạn sẽ thấy rằng bất kỳ các bảng biểu này nằm trong
bảng lớn này sẽ được đẩy tới sát bên lề của màn hình, cho dù bạn dùng chế độ phân giải hay kích
thước màn hình nào. Kỹ thuật này cũng rất có ích nếu bạn muốn đặt cái gì đó luôn luôn ở giữa màn
hình: Bạn chỉ căn chỉnh cả theo chiều dọc và ngang ở giữa table chủ.
18. Xóa bỏ các dấu gạch chân ở dưới các đường link
Nếu bạn muốn loại trừ những dấu gạch chân gây khó chịu ở phía đường link, chỉ cần thêm một đoạn
code đơn giản vào đoạn header (giữa "the" và "tags"). Đoạn mã như sau:
19. Mẹo Javascript
Nếu bạn muốn nhanh chóng thử nghiệm 1 vài dòng Javascript, hãy mở 1 trình duyệt và đánh vào
thanh địa chỉ "Javascript:" và sau đó đoạn script mà bạn muốn chạy. Những script này cũng có thể
được bookmark vào Favorite và được sử dụng như những ứng dụng, ví dụ bạn có thể tạo một
Javascript và đặt vào Favorite để điều chỉnh kích thước 1 cửa số xuống 800 x 600
20. Tạo hiệu ứng di chuột mà không cần tới ảnh
Bằng việc bổ sung thêm một tính năng onMouseover vào một ô ở trong bảng, bạn có thể thay đổi
background của 1 ô sang bất kỳ 1 màu nào mà bạn muốn - giống như 1 rollover. CSS Rollover có
hiệu quả hơ nhiều so với rollover image và có nhiều giá trị hoạt động hơn so với một vài dòng lệnh
Javascript yêu cầu đưa ra 1 hình ảnh mỗi khi bạn di chuột sang một ảnh khá
conmouseover="this.bgColor='#000000';"
onmouseout="this.bgColor='#cccccc';"
Theo Quantrimang
Những đoạn Javascript là đồ nghề không thể thiếu với dân thiết kế web. Tuy nhiên, để tìm

được những đoạn mã phù hợp, có thể bạn phải bỏ ra khá nhiều thời gian “lùng sục” khắp
nơi trên Internet. Vậy tại sao bạn không sử dụng JavaScript Collector (JC), một tập hợp
của 201 đoạn mã JavaScript với rất nhiều chủ đề khác nhau.
JC 1.1.04 có dung lượng 601KB, tải miễn phí tại www.snapfiles.com/get/jscollector.html
hay www.echip.com.vn.
Chạy chương trình lần đầu tiên, một hộp thoại sẽ hỏi bạn có muốn thiết lập đường dẫn đến
các file thực thi của trình duyệt web đang cài trong máy hay không. Bạn nên chọn Yes, tiếp
đó nhấn nút Change Internet Explorer Path/Mozilla Firefox Path/Opera Path và chọn file
thực thi (*.exe) của trình duyệt tương ứng. Nhấn Save Browser Settings để lưu các thay
đổi.
Chương trình gồm 201 đoạn mã hay được sưu tầm từ nhiều nguồn khác nhau và sắp xếp
theo cấu trúc hình cây với 23 mục (Background Effect, Banners, Forms, Games, Text
Effect, Mouse Effect, Tool & Utilities…)
Muốn xem script nào, bạn chỉ cần nhấn vào tên của script đó và code sẽ được hiển thị ở
khung bên phải. Để kiểm tra script này có phù hợp với nhu cầu của mình hay không, bạn
nhấn vào biểu tượng của các trình duyệt web phía dưới để xem trước script này sẽ thể hiện
như thế nào khi đưa lên web. Nếu cần phải thay đổi tham số của script, bạn nhấn Edit Code
và soạn lại theo ý thích.
* Thêm Script: Muốn đưa thêm những đoạn mã khác vào cơ sở dữ liệu của chương trình,
bạn chọn thẻ Add Snippets, copy những script đó vào các chủ đề tương ứng, sau đó nhấn
Save Snippet để lưu lại.
* Tìm kiếm Script: Khi bộ sưu tập script của bạn đã quá đầy và không thể nhớ chính xác
đoạn mã mình cần nằm ở mục nào, hãy nhập vào chuỗi kí tự cần tìm trong thẻ Search
Snippets và nhấn Search để chương trình tìm kiếm giúp bạn.
(www.echip.com)