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 (http://www.swishzone.com) 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 (http://www.effectmaker.com) 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ỉ http://www.pegasusimaging.com/jpegwizard.htm 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ỉ http://www.download.com 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ỉ: http://www.dsiegel.com/tips/wonk5/single.html. 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ư http://www.bignosebird.com, 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 (http://www.andyart.com/free.html) có rất nhiều nút bấm và mũi tên cho bạn sử dụng. Free GIFs and Animations (http://www.fg-a.com/gifts.html) 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) . 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. đó. 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