Archive for the ‘ CSS ’ Category

Kiểm tra website sau khi thiết kế

June 3rd, 2007 | Posted in Lập trình Web, CSS, Thiết kế web 1 Comment »

Đây là công đoạn khá quan trọng trong toàn bộ quá trình thiết kế web. Có rất nhiều cách để kiểm tra, thử nghiệm website sau khi được thiết xong. Bạn có thể mở chúng trên tất cả những browser mà máy mình có thể cài đặt như Opera, Firefox (FF), Internet Explorer (IE),… Thế nhưng vẫn chưa đủ vì vẫn còn những browser khác hoạt động trên những hệ điều hành khác như Safari, Camino trên Mac OSX hay một số browser hoạt động trên linux.

Bài viết này sẽ cung cấp cho bạn 3 cách để bạn có thể kiểm tra website sau khi thiết kế được tốt nhất.

1. Sử dụng dịch vụ hiển thị website trên nhiều browser và hệ điều hành.

Giải pháp này có lẽ là dễ làm nhất. Rất đơn giản, bạn chỉ việc cung cấp cho các dịch vụ trên địa chỉ website của bạn mà thôi. Sau đó, bạn chỉ việc chờ nhận được những hình ảnh được chụp của website khi hiển thị trên nhiều browser và hệ điều hành khác nhau. Bạn chỉ có thể xem được một số trang của mình mà thôi và thường là trang chủ. Nếu bạn muốn xem những trang tiếp theo bạn sẽ lại phải nhập địa chỉ và chờ… Mặc dù vậy, đây là lựa chọn hoàn hảo cho những trang web chỉ gồm một trang.

Dịch vụ trên được cung cấp tại Browsershot, BrowserCam. Tuy nhiên, đây vẫn chưa phải là cách duy nhất… Đọc tiếp »

Những điều cần biết khi viết mã CSS

June 2nd, 2007 | Posted in Lập trình Web, CSS, Thiết kế web 11 Comments »

Như chúng ta đã biết ở bài viết trước mình đã có lần để cập đến vấn đề “làm việc tốt với các trình duyệt (browser)” bằng cách sử dụng CSS để xóa đi những định dạng mặc định của từng browser. Lần này, các bạn sẽ được biết đến những điều cần tránh trong khi viết mã HTML và CSS nếu bạn muốn website của mình hiển thị tốt ở hầu hết các browser.

1. Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width)

Đây là nguyên tắc cơ bản vì cách căn lề của Internet Explorer khác với các trình duyệt khác và cũng là 1 lỗi của trình duyệt này. Lỗi này được gọi là “Box Model Bug” hình dưới là một hình ảnh minh họa cho lỗi này.

box-model-bug.png

Bạn có thể thấy rằng độ rộng của đối tượng “được” cộng thêm khi hiển thị ở IE nếu như có padding. Vậy đơn giản là không dùng padding cho các đối tượng có độ rộng cố định (fixed width). Đọc tiếp »

Những sai lầm khi viết mã HTML cho Email

May 30th, 2007 | Posted in Lập trình Web, Microsoft, SEO/SEM, CSS No Comments »

Việc quảng bá sản phẩm qua email đến khách hàng là một trong những chiến lược hàng đầu của bất cứ công ty nào trên thế giới. Điều này sẽ giúp bạn giữ được liên lạc với khách hàng của mình đồng thời gia tăng số lượng sản phẩm được tiêu thụ. Vậy làm thế nào để hiệu quả công việc quảng bá qua email đạt được kết quả tốt nhất? Sau đây là những sai lầm thường mắc phải khi gửi email quảng bá sản phảm đến khách hàng.

1. Gửi một email chỉ toàn là… hình ảnh.

Đây là một sai lầm rất dễ thấy và hay xảy ra với những người làm công việc thiết kế web hoặc thiết kế hình ảnh (graphic designer) đôi khi là từ những người… lười biếng. Ưu điểm và cũng là duy nhất của cách thức này là dễ làm và nhanh chóng. Nhưng nhược điểm thì vô kể, đầu tiên phải kể đến việc email của bạn sẽ bị chặn bới bộ lọc spam của nhiều dịch vụ email như Yahoo, Hotmail, Gmail hay bất kì dịch vụ email nào khác mà khách hàng của bạn đang sử dụng. Bên cạnh đó, hầu hết các dịch vụ webmail đều chặn việc hiển thị hình ảnh. Một điều đáng lưu ý nữa là khách hàng thường dành rất ít thời gian đọc email, và nhất là email quảng cáo sản phẩm. Hãy chắc chắn rằng bạn sẽ không bao giờ có kết quả cao trong việc quảng bá sản phẩm qua email với cách thức trên.

2. Không kiểm tra Email kĩ lưỡng khi gửi đi

Mỗi khách hàng có thói quen đọc email bằng nhiều phần mềm khác nhau. Cũng sẽ không có vấn đề gì nếu như mỗi phần mềm hay dịch vụ webmail đều đọc email theo cách của… riêng mình. Nếu bạn thường xuyên làm công việc gửi email cho khách hàng qua email, hẳn bạn sẽ nhận thấy rằng email xem ở Yahoo! Webmail sẽ khác khá nhiều so với email được xem ở Gmail. Và thông thường những người viết mã cho email hay quên mất đi vấn đề quan trọng này.

Vậy, trước khi gửi email quảng bá sản phẩm, hãy kiểm tra email đó bằng cách gửi đến nhiều dịch vụ trước và xem bằng những phần mềm thông dụng khác nhau như Yahoo! Webmail, Gmail, Outlook Express, Thunderbird… Đọc tiếp »

Lập trình với CSS

May 22nd, 2007 | Posted in Lập trình Web, CSS 10 Comments »

1. Định dạng chữ mà không cần dùng đơn vị pixel.

Đôi khi, bạn tự hỏi làm sao những người thiết kế web lại dùng đơn vị em thay vì px? Rất đơn giản, chỉ với một thủ thuật nhỏ bạn cũng có thể làm được với đơn vị em thay vì px. Hãy thêm đoạn mã sau vào CSS.

CSS:
  1. body { font-size: 62.5% }

Với đoạn mã trên thì 1.0em sẽ tương đương với 10px và sẽ hoàn toàn dễ hơn cho bạn khi tính toán kích thước font chữ hơn. Và khi đó bạn có thể định dạng như sau:

CSS:
  1. p { font-size: 1.2em; line-height: 1.5em; }

2. Trình bày CSS sáng sủa hơn

Trình bày CSS một cách khoa học sẽ giúp việc phát triển, sửa chữa dễ dàng hơn bao giờ hết. Hãy chia các định dạng (styles) ra thành các block riêng biệt và trình bày chúng như những ngôn ngữ lập trình bạn vẫn thường làm.

CSS:
  1. h1 {}
  2.     h1#logo { font-size: 2em; color: #000; }
  3. h2 {}
  4.     h2.title { font-size: 1.8em; font-weight: normal; }

Bạn có thể tham khảo chi tiết hơn về cách vết mã CSS tại bài viết Phương pháp viết mã CSS

Đọc tiếp »

Vẽ biểu đồ với PHP và CSS

April 11th, 2007 | Posted in PHP, CSS, Thiết kế web No Comments »

Nếu như ở bài viết trước bạn đã có một lựa chọn cho mình khi sử dụng PHP để làm biểu đồ, thì lần này, bạn sẽ có một lựa chọn khác. Trước hết hãy xem Demo của biểu đồ:

cssgraph.gif

Có rất nhiều kiểu dáng biểu đồ để bạn có thể chọn giúp làm phong phú cho trang web của mình.

Làm việc tốt với các Browser

April 5th, 2007 | Posted in CSS 3 Comments »

Một điều đau đầu với những người làm việc với CSS đó là việc các trình duyệt (browser) hiển thị website theo cách không hề giống nhau. Điều này là do các định dạng mặc định (default styles) của mỗi browser khác nhau. Vậy, làm sao để hạn chế được thấp nhất các vấn đề có thể nảy sinh với browser khi làm việc với CSS. Có thể, bạn đã có lựa chọn của mình, ở đây sẽ có thêm 1 lựa chọn nữa cho bạn.

Với đoạn mã CSS dưới đây, bạn sẽ loại bỏ được gần như hoàn toàn những định dạng mặc định của các browser.

CSS:
  1. /* Normalize padding and margins */
  2. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
  3. form, fieldset, input, p, blockquote, th, td {
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7.  
  8. /* Normalize header sizes */
  9. h1, h2, h3, h4, h5, h6 {
  10.     font-size: 100%;
  11. }
  12.  
  13. /* Normalize list styles */
  14. ol, ul {
  15.     list-style: none;
  16. }
  17.  
  18. /* Normalize font style and weight on odd elements */
  19. address, caption, cite, code, dfn, em, strong, th, var {
  20.     font-style: normal;
  21.     font-weight: normal;
  22. }
  23.  
  24. /* Normalize table borders */
  25. table {
  26.     border-collapse: collapse;
  27.     border-spacing: 0;
  28. }
  29.  
  30. /* Normalize other borders */
  31.     fieldset, img {
  32.     border: 0;
  33. }
  34.  
  35. /* Normalize text-alignment */
  36. caption, th {
  37.     text-align: left;
  38. }
  39.  
  40. /* Normalize (remove) quotation marks */
  41. q:before, q:after {
  42.     content: '';
  43. }


Chú ý:
Với đoạn mã trên chỉ giúp bạn tránh được nhiều vấn đề gặp phải với CSS, nhưng không phải tất cả. Vì thế, khi gặp những vấn đề liên quan đến CSS, có lẽ Google là người trợ giúp tốt nhất.