Thiet ke web

Document Sample
Thiet ke web Powered By Docstoc
					Thiết kế Web
Các bước để có một website

Tuy nhiên để giải toả một chút cái nóng đang đốt cháy bạn, tôi có một vài mẹo để bạn bắt đầu với một lĩnh vực mới mà bây giờ người ta hay gọi nó với một cái tên là – câu lạc bộ webmaster.

Dùng một dịch vụ Free

Dịch vụ host free có ưu điểm là bạn không mất đồng nào để mua host và domain mà vẫn có trang web của mình trên mạng. Nhưng trái lại bạn hầu như phải phụ thuộc vào dịch vụ đó rất nhiều ví dụ như dung lượng rất giới hạn, bandwidth cũng rất ít, vô số các banner quảng cáo và một điều tệ là có thể chết bất cứ lúc nào.

Một điều nữa là khi bạn dùng những host free thì bạn không có tên miền cho riêng mình mà dạng như http: //www.doteasy.com/~username

Tuy nhiên để bắt đầu với việc làm web, một host và domain free cũng là một ý tưởng hay để bắt đầu với.

Bạn vào Google hoặc Yahoo và search với từ khóa, free blog, free host, free domain … thì nó sẽ cho bạn rất nhiều kết quả. Và bạn chỉ việc chọn một trong những thứ đó.

Tôi có biết một trang web cho host free rất uy tín và KHÔNG có banner. Bạn có thể đăng ký và dùng thử Doteasy.com

Bạn cần biết về HTML

Cho dù hiện nay có rất nhiều phần mềm thiết kế web dạng HTML Editor, tuy nhiên cho dù công cụ đó có mạnh đến đâu thì nó cũng chỉ là công cụ. Bạn mới là người quyết định. Do vậy nếu một chút kiến thức về HTML bạn cũng không có, thì thật rất khó cho bạn khi bạn muốn làm web.

Về HTML bạn có thể đọc phần Cơ bản về HTML có trên Vietphotoshop.com

Bạn nên biết sử dụng thành thạo một phần mềm thiết kế web

Bạn nên học cách sử dụng một trong hai phần mềm thiết kế web sau: Dream Weaver hoặc Microsoft Frontpage. Đây là hai phần mềm mạnh nhất về thiết kế web bằng HTML đang có trên thị trường. Về Microsoft Frontpage, bạn cũng có thể học cách sử dụng qua chương sách “Bước đầu đến với Frontpage” có trên Vietphotoshop.

Bạn nên biết cách sử dụng một chương trình đồ hoạ

Sau khi bạn đã biết được nhưng tag cơ bản của HTML, biết sử dụng phần mềm thiết kế web thì đã đến lúc bạn nên biết về một phần mềm đồ hoạ. Nó giúp bạn tạo banner, button, hình ảnh … cho trang web của bạn. Đây là một bước rất quan trọng trong việc thiết kế web.

Về cơ bản, bạn có thể học phần mềm đồ hoạ Adobe Photoshop. Với kiến thức khá vững về phần mềm này, bạn có thể tự tạo ra layout, banner, button thậm chí là logo cho riêng website của bạn.

Bạn nên học về PHP

Bây giờ chiều hướng của người lướt web đã thay đổi với trước kia rất nhiều. Trước đây mọi người chỉ đọc web, bây giờ mọi người thức vọc web. Có nghĩa là người đọc muốn

được tham gia vào trang web để viết bài, gửi bài, tham gia thảo luận, nhận xét … họ không còn thụ động như xưa nữa mà đã rất chủ động. Cho nên nhu cầu một trang web động về nội dung là thực sự cần thiết.

Chính vì vậy hiện nay những trang web động sử dụng MySQL có thể cập nhật liên tục mà không mất thời gian như những trang web tĩnh dạng HTML nữa. Đây là một xu hướng mới và nó sẽ dần thay thế những trang web ban sơ dạng HTML.

Cuối cùng, như bạn thấy, để trở thành một webmaster cũng không phải là dễ. Do vậy nếu bạn chỉ cần một chút quyết tâm và lòng đam mê, bạn sẽ đi qua hết được những “cửa ải” mà tôi nói ở trên. Đến lúc đó hãy tạo ra một trang web với nội dung thật hấp dẫn, và hãy quay lại Vietphotoshop chúng ta cùng liên kết nhé!

Chúng tôi luôn chờ bạn và sẵn sàng giúp đỡ bạn.

© Bá tước Monte Cristo – www.vietphotoshop.com

Tạo một trang Redirect (định hướng) tự động Tuy nhiên sau một thời gian tồn tại, trang của bạn lại thu hút được nhiều người đến xem vì nội dung của nó. Bạn sẽ có ý định mua host và domain cho mình thay vì dùng host free. Nhưng vấn đề thường là trang của bạn trước đây đã được nhiều Search Engine indexed rồi, nhiều người book mark site của bạn rồi, hoặc nhiều người đã quá quen với tên miền đó của bạn. Bây giờ mà bạn bỏ đi không một lời từ biệt thì teo mất! cho nên việc tốt nhất lúc này là đặt một trang tự động chuyển địa chỉ URL. Nó nên là một trang đơn giản với hình logo của bạn, và có thể chạy lệnh redirect một cách tự động và gửi khách đến thăm sang địa chỉ được chỉ định bởi bạn. Ở trong trang redirect này bạn nên ghi thông tin là:

[I]"Chúng tôi đã chuyển sang dùng tên miền mới. Bạn sẽ được tự động chuyển trong 5 giây. Nếu trong 5 giây trình duyệt không tự động chuyển bạn hãy nhấn vào link sau

http://www.yournewsite.com"[/I]

Bạn copy và paste đoạn code sau vào HTML ở giữa hai thẻ ở trang redirect ----------------------------------------<..HEAD> <..META HTTP-EQUIV=REFRESH CONTENT="X;URL=http://www.mynewurl.com"> <../HEAD> -----------------------------------------

(bỏ hai dấu chấm đi nhé)

X ở trên là số lượng thời gian trước khi nó được chuyển sang địa chỉ mới. Bạn nên đặt thời gian là 5 giây để người đọc có thể biết được cái gì đang xảy ra.

Bằng cách đơn giản này bạn có thể di chuyển domain thật đơn giản mà không phải lo mất nhiều độc giả.

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Bảo vệ hình ảnh khỏi bị lấy bằng direct link Bảo vệ hình của bạn bằng .htaccess thì khá đơn giản. Những gì bạn cần làm là cho hết hình vào một thư mục mà bạn muốn bảo vệ. Tiếp đến là tạo một file text trong ASCII đặt tên là .htaccess và lưu nó lại trong thư mục chưa file hình. Chú ý là tên file bắt đầu bằng dấu chấm và tất cả đều là chữ thường không có in hoa. Mở notepad của Window lên, Copy và dán đoạn code sau vào notepad.

>*******************<

SetEnvIfNoCase Referer "^http://www.domain-của-bạn.com/" locally_linked=1 SetEnvIfNoCase Referer "^http://www.domain-của-bạn.com$" locally_linked=1

SetEnvIfNoCase Referer "^http://domain-của-bạn.com/" locally_linked=1 SetEnvIfNoCase Referer "^http://domain-của-bạn.com$" locally_linked=1 SetEnvIfNoCase Referer "^$" locally_linked=1 <FilesMatch ".(gif|png|jpe?g)$"> Order Allow,Deny Allow from env=locally_linked </FilesMatch>

>********************<

Thay chữ domain-của-bạn thành tên domain thật của bạn ví dụ là www.bantayden.com. Nếu bạn muốn cho phép những domain khác có thể dùng link hình đó thì bạn copy hai dòng đầu tiên và cho tên của domain đó vào. Ví dụ tôi muốn cho trang www.appznet.org dùng hình của tôi tôi làm như sau

>********************<

SetEnvIfNoCase Referer "^http://www.bantayden.com/" locally_linked=1 SetEnvIfNoCase Referer "^http://www.bantayden.com$" locally_linked=1 SetEnvIfNoCase Referer "^http://www.appznet.org/diendan/" locally_linked=1 SetEnvIfNoCase Referer "^http://www.appznet.org/diendan$" locally_linked=1 SetEnvIfNoCase Referer "^$" locally_linked=1 <FilesMatch ".(gif|png|jpe?g)$"> Order Allow,Deny Allow from env=locally_linked </FilesMatch>

>********************<

Ở đoạn code ở trên bạn thấy có cả lựa chọn http://domain-của-bạn.com là bởi vì có những domain không cần phải gõ www mà chỉ cần gõ thẳng tên domain vẫn có thể vào

những domain không cần phải gõ www mà chỉ cần gõ thẳng tên domain vẫn có thể vào được. Do vậy nếu bạn chỉ luôn vào một địa chỉ là www.domain-của-ban.com thì bạn xoá hai dòng ở dưới đi cũng được.

Thêm nữa nếu bạn muốn cho những trang khác xem được hình thì bạn cứ copy dòng thứ nhất và thứ hai dán xuống dưới và thêm domain của trang đó. Vậy là xong, file này có thể bảo vệ những hình có định dạng là ".gif", ".png", ".jpg" và ".jpeg".

Khi bạn đã copy và chỉnh sửa xong bạn lưu file lại dưới tên là .htaccess và upload nó lên host bằng trình FTP nhé.

Lưu ý: khi bạn upload lên bạn sẽ không thấy file này hiện lên ở một số trình FTP ví dụ như Cute FTP. Vì đây được coi là file hệ thống cho nên Unix nó ẩn file này đi. Để xoá file này cũng có một vài cách dùng câu lệnh trên FTP. Nhưng cách đơn giản hơn là dùng phần mềm FlashFTP có thể nhìn thấy file này trên host và xoá nó.

Nếu bạn không muốn phức tạp như thế thì tạo lại một file .htaccess khác với nội dung trắng và upload đè lên là mọi việc lại trở lại bình thường.

Bá tước Monte Cristo - www.bantayden.com

Một banner đẹp là tập hợp của những điều giản dị Author:Granny's Mettle ======================

1. Kích thước nên phù hợp với tiêu chuẩn:

Và hãy luông giữ cho nó phù hợp với tiêu chuẩn. Có một banner to, rộng cũng tốt và cũng rất cuốn hút sự chú ý của người đọc. Tuy nhiên, nếu ai cũng làm như thế thì bạn sẽ làm gì khác biệt không? có một chuyên gia thiết kế nhận định là:"tôi biết nếu banner của bạn lớn hơn một xíu nó sẽ cuốn hút hơn sự chú ý của người đọc nhưng nếu ai cũng

làm như thế thì chúng ta sẽ đi tới đâu?". Cho nên tôi khuyên bạn nên làm ở mức tiêu chuẩn. Theo một thông số không phải là chính thức thì banner tằm 778x140 là dạng tiêu chuẩn và được nhiều site sử dụng nhất.

2. Nội dung của trang phải phù hợp với banner.

Bên cạnh những hình đồ họa được thiết kế tỉ mỉ, thì banner của bạn cũng phải có nội dung cân bằng với nó. Nội dung trên banner nên ngắn gọn, đơn giản và phải thể hiện được mục tiêu và hướng đi của trang web. Nhưng trên hết nó phải thu hút được sự chú ý.

Nội dung trên banner nên trực tiếp và ngắn gọn bởi vì một điều đơn giản là nó không đủ chỗ cho một bài diễn văn. Hơn nữa, không phải ai cũng muốn đọc hoặc cố gắng đọc những gì bạn viết trên đó. Cho nên hãy giữ nó ở mức tối thiểu. Hãy nhờ sự giúp đỡ của bạn bè, gia đình để cùng nhau có một câu ngắn gọn, súc tích chỉ trong 5 chữ. Bạn thậm chí có thể tạo lên sự khác biệt bằng một câu slogan thật ý nghĩa của bạn.

3. Màu sắc và hình động nên phù hợp

Trang web của bạn nếu có màu sắc và hình động thì nó nên phù hợp và mạch lạc trong suốt toàn bộ trang. Màu sắc nên bắt mắt và dễ nhìn một xíu, trong khi đó thì những hình đồ họa nên càng đơn giản nhưng hiệu quả càng tốt và dung lượng nên nhỏ để giảm thời gian load. Dù cho banner của bạn có là một đoạn intro flash đẹp như mơ và câu slogan đầy ý nghĩa, nhưng tất cả những điều đó sẽ trở thành vô nghĩa khi một ai đó đã chọn nút X màu đỏ trước khi nó kịp có cơ hội để thể hiện mình. Hãy giữ cho banner của bạn load thật nhanh ở cả những người dùng internet tốc độ không cao. Vì không phải ai cũng có may mắn được dùng đường truyền ADSL như của bạn.

4. Nhận xét từ gia đình và bạn bè

Người ta nói rằng nới tốt nhất để có những lời nhận xét chân thành là từ thành viên gia đình và bạn bè thân thiết. Họ có thể cho bạn những lời nhận xét cả tích cực và tiêu cực để bạn chỉnh sửa cho hoàn thiện hơn bởi vì họ là những người mong bạn thành công. Hơn nữa họ không cảm thấy ngại khi phải nói thẳng ra rằng banner của bạn nhìn thấy ... ghớm! Cho nên hãy mở rộng tâm hồn để đón nhận những lời nhận xét cho dù nó là tích cực hay tiêu cực và hãy đánh giá nó thật nghiêm túc.

© www.vietphotoshop.com - Dịch bởi Bá Tước Monte Cristo

Chọn font chữ thế nào cho đúng

Rất nhiều nhà thiết kế web cứ ngộ nhận sự lựa chọn font chữ. Điều đó là không nên bởi vì font chữ đóng góp rất nhiều vào diện mạo của trang web và tính dễ đọc của nội dung trong nó. Nếu phải liệt kê ra thì hiện nay có khoảng hơn 20.000 font chữ, và con số này không dừng lại ở đó bởi vì ngày nào cũng có người ngồi thiết kế thêm font khác. Với quá nhiều sự khác biệt như vậy thì bạn phải đánh dấu xuất phát điểm của mình ở đâu bây giờ?

Điều đầu tiên bạn cần làm là hạn chế sự lựa chọn font lại. Bạn chỉ nên chọn những font nào hỗ trợ cho những thành phần thiết kết. Font chữ thể hiện tính cách. Nó có thể hạnh phúc và vui nhộn như những đứa trẻ, nghiêm túc và trang trọng như một người lớn tuổi, nó u buồn với màu đen, vui tươi với màu vàng. Font chữ có thể ngỗ nghịch, kín đáo, dè dặt, quỷ quyệt, gian xảo, tự tin và thích thú cho nên bạn phải chọn chúng với tính cách mà font chữ đó thể hiện. Nếu không trang web của bạn sẽ là một trò hề trên Net.

Đây là một vài điều KHÔNG - KHÔNG: Như đã nói ở trên bạn có rất nhiều sự lựa chọn cho font chữ và đó cũng là lý do bạn phải thật sự tỉnh táo khi chọn font chữ cho mình. Đừng dùng chữ VIẾT HOA trong toàn bộ đoạn văn nếu không chẳng có ai muốn đọc nó đâu. Nó chỉ gây tốn thời gian bởi vì

người đọc thấy chán ngán với font chữ dạng đó. Cuối cùng, ai muốn mắt mình bị đau khi phải đọc những thứ như thế? Một điều nữa là bạn không nên sử dụng font chữ quá nhỏ hoặc quá lớn. Kích thước tiêu chuẩn là từ 12-14, nếu hơn hoặc kém mức trên là font của bạn đang trong vùng "nguy hiểm". Bên cạnh giá trị thẩm mỹ của font chữ, tính dễ đọc cũng nên được đặc biệt quan tâm bởi vì font làm ra để đọc được chứ không phải chỉ để trang trí. Người thiết kế font cũng phải nghĩ rằng font mình làm ra phải để người khác đọc được. Theo sau tính dễ đọc và giá trị thẩm mỹ là sự cuốn hút độc giả. Nó phải được thiết kế khéo léo sao cho nó thể hiện được tính cách của font đó. Nếu thiếu nó có thể sẽ là một thiếu sót lớn.

Một điêu quan trọng nữa là bạn không nên sử dụng nhiều hơn 3 loại font trong thiết kế. Bởi vì nó sẽ làm cho trang web rắc rối và lộn xộn. Khoảng trắng và chữ cũng nên được quan tâm để tối ưu hoá nội dung của nó.

Nếu bạn vẫn không chắc lắm về sự lựa chọn font chữ cho mình, bạn nên hỏi ý kiến những chuyên gia về thiết kế để giúp đỡ bạn chọn font. Hãy nhớ rằng font chữ cúng như những thành phần khác có thể tạo nên sự thành công của trang web cũng như mang đến thất bại. Và bây giờ bạn muốn thử chọn font đúng cách hay muốn thử thách?

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Thế nào thì được gọi là nội dung hấp dẫn Sau đây là một vài điểm để bạn lấy làm chuẩn cho hai chữ "Nội dung" hấp dẫn.

1. Phù hợp

Nội dung phải phù hợp với trang web của bạn. Tại sao bạn phải đi lấy hoặc viết những bài chẳng liên quan gì đến trang web của bạn? có lẽ bạn sẽ nghĩ điều đó là tất nhiên, nhưng tôi thì thấy nhiều trang chẳng liên quan gì đến tin tức nhưng trang chủ cũng trích

dẫn những tin tức nóng hổi đang được đăng ở Vnexpress.net.

2. Chính xác

Thông tin đăng trên trang web của bạn phải càng chính xác càng tốt. Một phần trong những lý do bạn thêm nội dung cho trang web của bạn là bạn đang muốn cho người đọc thấy rằng bạn là người khá rành về vấn đề bạn đang viết. Nhưng nếu thông tin của bạn lại thiếu chính xác thì người ta sẽ nghĩ bạn không phải là một tay cừ như bạn nghĩ.

3. FREE - Miễn phí

Nếu bạn sông bằng nghế bán thông tin thì không phải tất cả những một phần thông tin của bạn nên được cho miễn phí. Làm sao người ta có thể biết thông tin của bạn giá trị đến mức nào nếu chưa một lần được xem mà đã phải trả tiền rồi. Ví dụ tôi muốn bán web host trên vietphotoshop.com thì tôi sẽ viết nhiều bài viết về chủ đề webhost và domain. Không phải tôi chỉ muốn chia sẻ thông tin về vấn đề đó mà tôi muốn cho bạn thấy tôi biết về host và domain như thế nào.

Cuối cùng nhưng không kém phần quan trọng là nội dung trên trang của bạn nên là những gì "độc nhất vô nhị" đừng nên chỉ copy và paste ở những trang khác và lấy làm của mình. Nếu trong trường hợp bạn hơi yếu về khoản viết lách, thì cũng không cần phải cố ngồi viết ra một bài nào đó mà lại mong nó mang nhiều thông tin. Nếu trong trường hợp này bạn có thể "mượn" thông tin của người khác và dùng trong trang của bạn. Nhưng nên nhớ là phải credit cho họ nhé! Nhưng nếu bạn có thể tự viết ra những bài viết dựa trên kinh nghiệm của bạn thì sẽ là điều tốt nhất

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Chọn màu phù hợp Bạn đừng nên đánh giá thấp quá trình lựa chọn màu sắc cho trang web của mình. Đừng

chọn màu theo kiểu sai thì sửa. Dưới đây là những kinh nghiệm quý báu nhất liên quan đến việc chọn màu cho trang web. Đọc nó và hãy bắt đầu công việc thu hút sự chú ý của người đọc.

Cách sử dụng màu và pattern

Nếu có thể bạn cho phép người đọc trên trang web của bạn có thể lưa chọn màu sắc, skin tuỳ theo sở thích của họ. Tiếp đến là việc tạo độ tương phản cao giữa chữ và hình nền, tạo ra độ tương phản giữa chữ và hình nền là điều nên làm, tuy nhiên bạn đừng nên dung pattern hay là texture background đằng sau chữ. Một màu đặc hoặc không có gì thường tốt hơn nhiều.

Bạn cũng đừng nên dựa quá nhiều vào ý nghĩa chỉ dẫn của màu sắc cho những đoạn thông tin quan trọng. Sử dụng màu sắc như là một cách để phân biệt những thành phần khác nhau trên một trang web có thể khá thú vị và vui mắt. Nhưng tránh lạm dụng màu sắc khi bạn phải dung nhiều màu cùng một lúc. Nên mạch lạc và đặt giới hạn cho số lượng màu mà bạn sẽ dung cho trang web.

Lựa chọn màu phù hợp

Màu an toàn nhất, dễ đọc hơn và chuyên nghiệp là sự kết hợp của chữ đen nền trắng. Theo khả năng trung bình của mắt người - màu đỏ và xanh lá cây sẽ rõ ràng nhất nếu được đặt ở giữa. Trắng, đen, vàng và xanh dương thì rõ ràng hơn khi được đặt ở vùng biên. Nếu muốn xác định hai nhóm nội dung, đừng nên sử dụng kết hợp hai màu đỏ và xanh lá, hãy luôn nhớ rằng hầu hết những người bị bệnh mù màu là mù với hai màu đỏ và xanh lá. Cũng tương tự như thế với hai màu Xanh dương và Vàng bởi vì có ít nhất 12% số người bị mù với hai mùa Vàng và Xanh dương.

Với mục đích để thu hút sự chú ý của người đọc thì màu đỏ hoặc những màu sặc sỡ khác có thể giúp ích được cho mục đích của bạn. Những màu sáng khác cũng rất tốt cho chế độ hiển thị nội dung trên màn hinh fmáy tính mà có thể được xem trong một thời

chế độ hiển thị nội dung trên màn hinh fmáy tính mà có thể được xem trong một thời gian dài. Những màu này cũng thích hợp với những người dùng lớn tuổi. Nếu bạn muốn màu sắc trên trang web phải khác biệt với nhau thì những màu xanh đậm, đỏ, màu tía, màu xám, vàng và da cam là những gam màu tốt.

Sử dụng mùa để nói về công ty hay trang web của bạn

Những màu sáng như vàng để làm hình nền có thể được dùng để highlight cho những sản phẩm hạ giá. Những màu sắc phù hợp với thương mại là màu be, xanh dương, màu đỏ tía và màu xanh lá đậm ở trên hình nền trắng hoặc một màu thật nhẹ. Bạn đừng nên tạo thoi quen cho mình khi sử dụng chữ màu xám, hoặc màu nhạt cho những đoạn văn quan trọng. Nó cũng không tốt khi bạn sử dụng nhiều tông màu Xanh cùng một lúc. Bạn đừng tạo cho người đọc cảm giác bạn còn là một amatơ khi sử dụng những màu sặc sỡ để hihglight một cái gì.

Chọn màu dựa trên chế độ xem Khi bạn trong điều kiện thiếu ánh sáng, sử dụng chữ nhẹ, mỏng với màu vàng nhạt hoặc đỏ với màu nền là mùa xanh đậm, xanh lá hoặc đỏ. Nếu bạn làm việc trong môi trường đủ ánh sáng thì chữ đen, mảnh trên nền trắng là tốt nhất.

Những hướng dẫn ở trên là dựa trên kinh nghiệm của tôi ... tuy nhiên bạn phải cảmnhận được những phản ứng của người đọc trên trang của bạn để đưa ra kết luận cuối cùng. Nếu những hướng dẫn trên không phù hợp với bạn thì đó là lúc bạn phải tìm ra thông tin hoặc học từ kinh nghiệm của chính bạn để phản ứng lại với nó.

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Đường liên kết và các dạng liên kết Cho nên khi bạn mở trang đó ra, cứ chỗ nào là đường link thì sẽ thành màu đỏ và khi bạn click vào đó hoặc di chuột qua nó bạn sẽ không thấy có thay đổi gì. Bởi vì tất cả các

bạn click vào đó hoặc di chuột qua nó bạn sẽ không thấy có thay đổi gì. Bởi vì tất cả các đường link đã được định dạng thành màu đỏ. Chúng ta bắt đầu bằng đoạn code dưới đây:

--------------------------------------------------<..style type="text/css">

<..!--

a:link { color: red; }

a:visited { color: red; }

a:hover { color: red; }

a:active { color: red; }

-->

-------------------------------------------------------

2. Nếu bạn muốn làm đường link của bạn không có gạch chân khi ai đó di chuột qua bạn chỉ cần thêm một trạng thái là Text-decoration: none vào chỗ a:hover vào giữa hai dấu ngoặc {}

-----------------------------------------------------a : h o v e r { c o l o r: r e d; t e x t-d ecor ation: non e; } -----------------------------------------------------(Viết liền)

Do vậy nếu bạn không muốn có đường gạch chân ở trên những đường link, bạn chỉ việc thêm dòng Text-decoration: none vào tất cả 4 trạng thái và những đường liên kết sẽ không có đường gạch chân nữa.

3. Bạn cũng có thể thêm hình nền vào đường link của bạn khi ai đó di chuột qua nó. Để làm được vậy bạn phải thêm màu nền là background-color: vào trạng thái di chuột của nó như sau:

----------------------------------------------------a:hover { color: red; text-decoration: none; background-color: #CCCCCC; } -----------------------------------------------------

4. Bạn cũng có thể thay đổi con trỏ khi ai đó di chuột qua đường link. Bạn thử đổi con trỏ thành dấu chấm hỏi biểu tượng của giúp đỡ.

----------------------------------------------------a:hover {

a:hover { color: red; text-decoration: none; cursor: help; } ----------------------------------------------------

Một vài trạng thái con trỏ khác bạn cũng có thể dùng:

---------------------------------------------------auto crosshair help move pointer text wait e-resize ne-resize n-resize nw-resize s-resize se-resize ----------------------------------------------------

Bạn nên cẩn thận khi sử dụng những trạng thái của con trỏ trên trang web bởi vì nếu bạn dùng không đúng cách có thể làm cho người đọc nhầm lẫn và khó hiểu.

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Những điều nên và không nên khi thiết kế web

Những điều nên và không nên khi thiết kế web 2. Nên giữ cấu trúc trang web của bạn thật mạch lạc

Có một vài webmaster muốn thay đổi cách nhìn của trang web vì họ muốn tránh sự nhàm chán bằng cách thay đổi cấu trúc của trang web ở những trang khác nhau. Ví dụ ở trang chủ thì thanh menu nằm dọc, sang đến những trang sau thì lại nằm ngang, hoặc vài trang khác lại là dạng menu trượt …

Người lướt web thích sự mạch lạc, do vậy trang web của bạn cũng nên như vậy. Hãy thử xem các bản Window đều hao hao giống nhau về cấu trúc mặc dù tính năng thì khác nhau một trời một vực.

3. Đừng nên dùng Pop up

Pop up có lẽ là một dạng mã làm cho người lướt web cảm thấy khó chịu nhất. Bởi vì người ta bị ép buộc phải đọc cái mà người ta không muốn đọc. Giống như bạn đang đi đường bị ai đó ném một tờ giấy vào mặt bắt bạn phải đọc.

Có một vài lần tôi có dạo qua một vài forum thấy có một bảng pop up hiện ra với lời lẽ khá lịch sự là yêu cầu tôi đăng ký làm thành viên. Bảng pop up đó cứ lẽo đẽo theo tôi, khi tôi kéo chuột xuống dưới nó cũng xuống theo, kéo lên trên nó cũng lên theo mà không sao tắt nó đi được.

Vấn đề đặt ra là nếu nội dung của trang đó hấp dẫn tôi, thì không cần phải nhắc tôi tự khắc sẽ đăng ký thành viên. Còn nội dung nghèo nàn thì cho dù admin của trang đó đăng ký nick cho tôi, chỉ cho tôi password và thậm chí login vào giùm tôi. Tôi chỉ việc post bài thôi cũng chưa chắc tôi đã tham gia chứ huống gì tôi phải đăng ký thành viên vì cái pop up đó.

Do vậy bạn hãy thật thận trọng khi dung pop up.

4. Nên du`ng hệ thống thanh di chuyển tiêu chuẩn

Có nhiều webmaster muốn cho trang web của mình sinh động nên nghĩ ra nhiều loại thanh di chuyển (navigation). Có người cho nó xoay mòng mòng quanh một quả cầu, có người cho nó chạy loanh quanh, có người cho nó trượt lên trượt xuống … những kiểu này chỉ làm người xem nhức mắt và nhầm lẫn.

Những trang web lớn họ đều dung navigation rất đơn giản là nằm ngang phía trên hoặc phần trên bên tay trái.

5. Nên để trang web của bạn phù hợp với màn hình 800 x 600 Px

Hiện nay màn hình 800 x 600 không còn chiếm đa số nhưng không hẳn là nó đã biến mất và vẫn chiếm khoảng 40% tổng số những người online. Cho nên khi bạn thiết kế, bạn hãy để tâm đến 40% này.

Việc kéo thanh trượt lên hoặc xuống không thành vấn đề vì việc đó khá dễ dàng với con chuột hỗ trợ con lăn. Nhưng việc kéo thanh trượt sang ngang là cả một vấn đề lớn và vô cùng khó chịu với người lướt web.

6. Đừng tự động tái định hướng người dung sang một trang khác

Đôi khi có những webmaster muốn người xem chú ý đến một trang đặc biệt nào đó nên đã đặt đoạn mã tái định hướng mỗi khi ai click vào một trang cụ thể. Việc này có thể làm người dùng thấy khó chịu và không an tâm. Nếu bạn thực sự phải chuyển người dung đến một trang nào đó, hãy để một đường link thay vì tự động chuyển họ.

Vấn đề then chốt ở đây là chúng ta tránh áp đặt những gì mình nghĩ cho người dùng, nên cho họ sự lựa chọn.

7. Nên giữ dung lượng của trang chủ không vượt quá 60Kb

Trang web có thể bao gồm chữ, hình ảnh và những định dạng khác như Flash và hình động. Nhưng khi bạn cộng tất cả các thành phần đó lại, thì dung lượng của nó không nên vượt quá 60 K.

Bởi theo các nghiên cứu được tiến hành, nếu trang web của bạn mất hơn 4 giây để load thì bạn đã mất một nửa sổ người đến thăm, còn nếu hơn 5 giây thì bạn mất trắng. Bạn thử tự hỏi mình bạn có thực sự kiên nhẫn khi phải chờ một trang nào đó ở kết quả tìm kiếm của Google khi nó load chưa?

8. Đừng canh giữa tất cả mọi thứ

Canh giữa tất cả chữ vào giữa giống thể thơ lục bát rất khó đọc, hãy tưởng tượng khi bạn đọc một cuốn sách mà tất cả chữ nghĩa đều được căn giữa.

Quy luật in trên giấy đã xuất hiện từ rất sớm và ai cũng phải công nhận rằng căn lề trái là cách dễ đọc nhất. Vậy trước khi bạn nên làm gì, hãy nhớ đến những gì ngành in ấn đang làm.

9. Đừng dùng Javascript cho con trỏ chuột

Tôi cũng có nhiều lần được chiêm ngưỡng những Javascript cho con trỏ chuột như đồng hồ chạy theo chuột, ánh sao lấp lánh, mũi tên, thanh gươm … nói chung nhìn nó đẹp và vui nhộn nhưng nó chỉ thích hợp với những trang cho trẻ con dưới 5 tuổi. Với những người như tôi, tôi chẳng thấy thích một cái đồng hồ hoặc một loạt ngôi sao cứ bám như đia lấy con chuột của tôi.

Do vậy hãy loại bỏ những thứ đó và chỉ nên dung khi thực sự cần thiết.

10. Tham khảo những “ông kẹ” trên net

“Ông kẹ” ở đây tôi muốn đề cập đến là các trang web lớn với hang triệu người truy cập một ngày như Yahoo, Google, MSN … bạn nên tham khảo cách thiết kế, trình bày, font chữ, màu sắc, hiệu ứng của họ.

Vì họ là công ty lớn, làm ăn lâu dài và họ đầu tư cả tấn tiền vào nghiên cứu rồi cho nên những gì họ dung là kết quả của cả một quá trình đúc rút kinh nghiệm từ những sai lầm. Cho nên hãy tham khảo cách họ làm và học hỏi ở họ.

© Bá tước Monte Cristo – www.vietphotoshop.com

10 lỗi thường gặp khi thiết kế web 1) Lựa chọn màu sắc nghèo nàn

Một điều quan trọng nhất khi thiết kế website mà bạn luôn phải nhớ đó là giữ nó thật đơn giản. Càng rườm rà rắc rối càng không cần thiết. Trang web của bạn không nên nhiều hơn 3 màu và chữ trong bài viết nên là màu có tính tương phản cao với nền. Không còn gì bực mình hơn khi phải đọc chữ màu vàng trên nền màu hồng, hoặc chữ màu cam trên nền màu xanh lá cây. Có thể theo bạn là rất đẹp nhưng với độc giả thì lại là một vấn đề khác và thường là khó chịu.

2) Thanh navigation rắc rối

Nếu độc giả của bạn không thể tìm được họ đang ở đâu và làm thế nào để quay về trang chủ thì họ cũng sẽ đi mà không từ biệt. Chính vì thế thanh navigation (thanh di chuyển) của bạn nên được logic và mạch lạc ở tất cả các trang. Theo kinh nghiệm của nhiều người thì độc giả thích nhất là có thanh navigation dọc ở bên trái, sau đó là thanh navigation ngang ở dưới banner.

3) Font chữ và màu sắc lộn xộn.

Cũng như là thanh navigation của bạn, bạn cũng nên thiết kế sao cho font chữ và màu sắc của trang thật mạch lạc. Nếu trang chủ của bạn font là Arial Font, kích thước là 10 thì những trang sau cũng nên dùng chung một font và kích thước như thế. Tất nhiên những vùng đặc biệt như là copyright, điều lệ ... thì bạn nên dùng font phù hợp. Tuy nhiên, trong hầu hết các trường hợp, bạn nên sử dụng cùng một loại font và kích thước xuyên suốt toàn bộ trang.

Bạn nên nhớ rằng 90% những người lướt web tìm thông tin bằng cách dùng các Search Engine để tìm thông tin mình cần và các Search Engine lại tìm keyword (từ khóa) trong domain của bạn và sau đó quyết định nó sẽ xếp hạng trang web của bạn ntn. Nếu bạn muốn người đọc tìm được trang của bạn bằng cách gõ keyword "Free web host, Domain registration" thì bạn nên chọn những domain mà có chứa hoặc dính líu đến mấy từ domain, host hoặc webhosting.

4) Đoạn văn quá dài

Đây là một lỗi chung hay mắc phải bởi rất nhiều webmaster.

Để cho trang web của bạn đọc được một cách dễ dàng, bạn nên cắt nhỏ đoạn "diễn văn" đó ra và dùng những câu phụ đề. Hầu hết mọi người thì chỉ đọc lướt qua để dò xem mình cần cái gì cho nên nếu đoạn văn của bạn nhỏ và sắp xếp logic, nó sẽ giúp cho người đọc cảm thấy dễ chịu hơn.

5) Không có thông tin liên lạc của webmaster.

Đừng để độc giả của bạn phải tìm thông tin liên lạc, đặc biệt nếu site của bạn về bán hàng hóa online. Bạn nên để thông tin liên lạc ở mỗi trang. Nếu thông tin liên lạc của bạn khó có thể tìm thấy hoặc không có thì làm cho khách hàng không muốn buôn bán gì với bạn hết. Tuy nhiên nếu website của bạn có diễn đàn hoặc một cái gì gần như thế thì

với bạn hết. Tuy nhiên nếu website của bạn có diễn đàn hoặc một cái gì gần như thế thì thông tin liên lạc lại không thực sự quan trọng. Vì khách hàng có thể liên lạc trực tiếp với bạn qua diễn đàn, sổ lưu bút ...

6) Trang load quá lâu

Nếu trang của bạn không được load dưới 10 giây, thì file HTML của bạn là quá lớn. Bạn hãy kiểm tra lại những hình đồ họa của mình. Liệu bạn sử dụng nhiều hình ảnh quá không? nó có cần phải định lại dung lượng không? Người ta hay quen dùng định dạng .JPG cho những file hình nhiều màu sắc và định dạng .GIF cho những hình đặc hoặc đơn màu. Bạn cũng nên nhớ định dạng độ cao, chiều rộng cho bảng trong khi thiết kế với HTML bởi vì chữ sẽ được load trước hình ảnh. Những hình GIF động làm giảm đáng kể tốc độ load của site.

7) Không có META tag

Meta tag là một dạng code ẩn, người đọc không thấy nó hiện trên trình duyệt nhưng nó lại được nhìn thấy bởi những Search Engine. Thực ra hiện nay các META tag không còn quan trọng như trước đây nữa, nhưng các công cụ tìm kiếm vẫn một phần nào đó dựa vào những META tag này để hiển thị thông tin về trang web của bạn.

8) Sử dụng frame

Frame có thể tạo ra rất nhiều phiên toái cho bạn. Nhiều Search Engine không index những trang dùng frame, frame đôi khi không cho phép người đọc book mark site của bạn và nó gây khó khăn khi in ấn.

9) Chữ chạy nhảy

Thẻ marquee là một tính năng rất thú vị, nhưng có nhiều người lại lạm dụng nó. Mặc dù ý tưởng dùng chữ marquee là khá hay và hấp dẫn, nhưng bạn nên nhớ rằng không phải

ai cũng thấy cách này là một cách hay đâu. Nếu bạn quyết định dùng marquee, thì bạn phải xác định rõ ràng là nó có thực sự mang lại hiểu quả và tăng thêm sức hấp dẫn cho site của bạn hay không. Có một vài trường hợp dùng marquee khá là hiệu quả như thông báo thông tin mới, thông tin nóng nhưng có nhiều trường hợp marquee text làm người đọc thấy khó chịu.

10) Chọn độ phân giải không phù hợp

Hiện nay đa phần người lướt web dùng màn hình với độ phân giải là 800x600. Nếu bạn thiết kế trang web để phù hợp với độ phân giải là 1024x768 Px hoặc cao hơn, thì bạn phải nhớ rằng rất nhiều người phải kéo thanh cuộn ngang để xem thông tin. Tôi không biết bạn nghĩ ntn, nhưng tôi nghĩ nó khá là khó chịu. Tuy nhiên hiện nay những màn hình 1024x768 đang dần trở lên thịnh hành và bạn cũng không nên quá lo lắng nữa.

Nhưng nếu bạn muốn trang web của bạn có thể hiển thị ở mọi độ phân giải, bạn nên định dạng bảng bằng chế độ phần trăm thay vì pixel. Ví dụ khi bạn định dạng bảng là 100% width thay vì "800" thì khi màn hình là 800 hay 1024 nó vẫn hiện đầy đủ hết.

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Một số cách phá banner và pop up

geocities.com Ở góc trên bên phải của banner có một dấu "X" nó dùng để đóng cửa sổ lại. Đoạn code này dùng để gọi một Javascript "yfOC" được ẩn trên server của họ. Để phá cái banner đó đi bạn chỉ phải gọi một đoạn code có thể đóng nó lại khi người dùng mở trang web.

<BODY onLoad="yfOC(-1)">

Cách thứ hai bạn có thể dùng đoạn code sau

<HTML> <HEAD> <TITLE>Your Title Goes Here</TITLE> <BODY> </HEAD> </BODY> <noscript><noscript><plaintext><plaintext> </HTML>

hypermart.net

<!--#echo banner=""-->

Now to get rid of the banner use a no-script tag around the code, like this:

<noscript><!--#echo banner=""--></noscript>

.tk Domains

Thêm đoạn code sau vào giữa hai thẻ <head và < /head> ở trang đầu tiên của bạn để loại bỏ banner popup.

<script> if (window.top != window.self) { window.top.location=window.self } </script> <script> subwin = window.open("http://YourHost.com/YourAccount/PopupPage",

subwin = window.open("http://YourHost.com/YourAccount/PopupPage", "subwindow","height=100,width=486"); </script>

<script language="JavaScript"> setup='toolbar=no,location=no,directories=no,status= no,menubar=no,width=200,height=150' setup += 'scrollbars=no,resizable=no' pop = window.open ("","subwindow",setup) pop.document.write('<head>'); pop.document.write('<Title>'); <!-- This is the title to change for on the new window you open --> pop.document.write('Iran Hackers'); pop.document.write('</Title>'); pop.document.write('<script language="javascript">'); pop.document.write('setTimeout('); pop.document.write('"self.close()'); <!-- This is the line to change for how long the window is open --> <!-- Its milliseconds , so 5000 is 5 seconds, 1000 is 1 second. --> pop.document.write(';",5000)'); pop.document.write('</'); pop.document.write('script>'); pop.document.write('</head>'); <!-- This changes the colour of the main background. --> pop.document.write('<body bgcolor=#FFFF80>'); <!-- This is the actual content of the window you are opening --> pop.document.write('<center><h3>Dont forget to visit</h3></center>'); pop.document.write('<center><h3><a href="http://www.ghostbone.com"

target="_blank">ghostbone.com</a></h3></center>'); pop.document.write('<center><h6>For all your BannerKillers :)</h6></center>'); pop.document.write('</body>');

</script>

tripod.com

Bạn chỉ việc copy và dán đoạn code này vào

<html> <script LANGUAGE="JavaScript"> <!-function open () {return true;} //--> </SCRIPT> <head> <title>Your title goes here</title> </head> <body>

netfirms.com

<noembed> <xmp> <body> </xmp> </noembed>

Virtual Avenue

<HTML> <HEAD> <TITLE>Your Title Goes Here</TITLE>

<TITLE>Your Title Goes Here</TITLE> </HEAD> <BODY> <!-- Your homepage goes here -->

</BODY> </HTML>

<script LANGUAGE="JawaScript"> <!-- --> </noscript> <script language="JavaScript">

Freeservers

<HTML> <HEAD> <script LANGUAGE="Javascript"> <!--if (parent.frames.length) top.location.href= document.location; // ---> </SCRIPT> </HEAD> <BODY> <!--- Your web site goes here --->

TalkCity

<script language="javascript"> var winname1="tcn";

var winname2="av"; var windowname=winname1+winname2; adWindow = window.open("http://www.yahoo.com", windowname, "toolbar=no,

location=no, directories=no, menubar=no, scrollbar=no, resizable=no, status=no, width=1, height=1") adWindow.close() </script> <html> <head> <title>Web Site Title Goes Here</title> </head> <body> <!--- Your web site goes here--->

easyspace.com

</HEAD> <BODY> <!-- your homepage goes here --> </BODY> </HTML> <NOSCRIPT>

angelfire.com

<HTML> <HEAD> <NOSCRIPT> <!-- <BODY> --> </NOSCRIPT> <TITLE>Your Page Title Goes Here</TITLE>

<TITLE>Your Page Title Goes Here</TITLE> </HEAD> <BODY> <!-- Your homepage goes here --!>

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Nguồn: www.webdesign.org


				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:439
posted:9/25/2008
language:Vietnamese
pages:28