Tài liệu Thiết kế Web

•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 "[/I] Bạn copy và paste đoạn code sau vào HTML ở giữa hai thẻ ở trang redirect ----------------------------------------- ----------------------------------------- (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 "^ủa-bạn.com/" locally_linked=1 SetEnvIfNoCase Referer "^ủa-bạn.com$" locally_linked=1 SetEnvIfNoCase Referer "^ủa-bạn.com/" locally_linked=1 SetEnvIfNoCase Referer "^ủa-bạn.com$" locally_linked=1 SetEnvIfNoCase Referer "^$" locally_linked=1 • Order Allow,Deny • Allow from env=locally_linked >********************< 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 "^" locally_linked=1 SetEnvIfNoCase Referer "^" locally_linked=1 SetEnvIfNoCase Referer "^" locally_linked=1 SetEnvIfNoCase Referer "^" locally_linked=1 SetEnvIfNoCase Referer "^$" locally_linked=1 • Order Allow,Deny • Allow from env=locally_linked >********************< Ở đoạn code ở trên bạn thấy có cả lựa chọn ủ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 1- 2% 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: --------------------------------------------------- <..!-- 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; } ----------