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:
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ác