Trang chủ » Thiết kế website (Design Web)

Tiêu chuẩn thiết kế, tối ưu hóa html,css,image

Dưới đây là bộ tiêu chuẩn thiết kế website, tối ưu thẻ html,image...Múc đích: tốt cho bộ máy tìm kiếm, tốc độ truyền tài dữ liệu nhanh, website có thẩm mỹ cao. Tham khảo các bạn nhé:

1. Tiêu chuẩn tối ưu

           Dung lượng file CSS: 50K

           Dung lượng file HTML: 70K

           Dung lượng ảnh tối đa

o          CSS image: 20K

o          <img> image: 250K

o          Ảnh động:  40K

           Kích thước file Media: (chưa tính)

           Tổng kích thước ảnh: 750K

           Số lượng element: 1200

           Độ sấu tối đa của các heading: (tính từ <html>)

o          h1: 7

o          h2: 10

o          h3: 13

           Số lượng ảnh (Tất cả ảnh): 100

           Số lượng media (flash, video...): 2

           Tổng dung lượng media: (chưa tính)

2. Quy tắc về hiển thị (font, color...)

Font

           Số lượng font: 2 (1 cho các heading, 1 cho nội dung)

           Loại font:

o          Giới hạn trong Arial, Tahoma, Verdana, Times New Roman, Courier New

o          Sử dụng các font tương ứng của Windows và Mac

         Arial, Helvetica, sans-serif

         Verdana, Geneva, sans-serif

         Tahoma, Geneva, sans-serif

         Courier New, Courier, monospace

         Times New Roman, Times, serif

           Kích thước: Font chuẩn là 0.7em và 0.75em (11px và 12px)

           Đơn vị kích thước: em

           Chiều cao dòng: 1.25em với font serif,  1.5em với font sans-serif,  1em với font monospace (sử dụng em)

           Chỉ sử dụng left alignment với đoạn văn.

Colors

           Số màu tối đa (trừ đen và trắng): 3

o          Màu link: làm sao cho người dùng hiểu phần nào CLICK ĐƯỢC và phần nào KHÔNG CLICK ĐƯỢC

o          Màu chính

o          Màu phụ

o          Ngoài ra: Có thể sử dụng các màu cùng tone với các màu trên nhưng khác nhau về độ đậm nhạt

           Độ tương phản cho phép giữa background và text: ≥ 4.5 (sử dụng công cụ tính http://snook.ca/technical/colour_contrast/colour.html, xem thông số Contrast ratio)

Ảnh

           Kích thước tối đa: 640×480

           Định dạng ảnh:

o          Nội dung: JPEG

o          Icon: GIF

o          Các loại khác: Tùy, khuyến khích sử dụng PNG vì ảnh PNG nén đúng cách sẽ cho chất lượng/dung lượng tốt nhất.

           Ảnh động:

o          Thời gian hoạt động: 10s ÷ 15s

o          Số lượng tối đa trên 1 trang: 3 (trừ ảnh quảng cáo, cần có quy tắc cho ảnh quảng cáo)

o          Không sử dụng ảnh động cho các icon.

Media

 

3. Quy tắc HTML

Cấu trúc

Các trang sẽ có 1 cấu trúc bắt buộc sau (kể cả đặt tên)

...

<div id=”wrapper”>

    <div id=”header”>

        <h1><a href=”/”>Website name</a></h1>

        <!-- Không dùng <img />, mà sử dụng image replacement -->

        ...

    </div>

 

    <div id=”main-nav”>

        <ul>

            <li>....</li>

       </ul>

    </div>

 

    <div id=”body”>

        <div id=”left-col”>....</div>

        <div id=”right-col”>....</div>

        <div id=”content”>....</div>

    </div>

 

    <div id=”footer”>

        ...

        <div id=”copyright”>...</div>

        <address>(Company information)</address>

        ....

    </div>

</div>

Các module chính (là nội dung chính của trang) sẽ có cấu trúc bắt buộc sau (trừ header và footer)

...

<div id=”ModuleName” class=”box primary”>

    <h1><a href=”/”>Module header</a></h1>

 

    <div class=”box-content”>

        ...

    </div>

    ...

</div>

...

Các module phụ sẽ có cấu trúc bắt buộc sau (trừ header và footer)

...

<div id=”ModuleName” class=”box”>

    <h3><a href=”/”>Module header</a></h3> <!-- Có thể có hoặc không -->

 

    <div class=”box-content”>

        ...

    </div>

    ...

</div>

...

Markup

Đoạn văn

<p>This is a paragraph</p>

Đoạn trích dẫn

<blockquote>Tôi nói đồng bào nghe rõ không</blockquote>

Chữ đậm

<strong>chữ đậm</strong>

Chữ in nghiêng

<em>chữ in nghiêng</em>

Chữ gạch chân

<ins>chữ gạch chân</ins>

Chữ gạch ngang

<del>chữ gạch ngang</del>

Đặt trong ngoặc kép

<q>Chợ Điện Tử</q>

Input caption

<label for=”input-id”>Username</label>

...

<input id=”input-id” type=”text” value=”username” />

Table header

<th>Table header</th>

Message

<span class=”msg-error”>This is an error message</span>

<span class=”msg-info”>This is an info message </span>

<span class=”msg-warning”>This is an message </span>

<span class=”msg-success”>This is an success message </span>

Các list dạng title-description

<dl>

    <dt>This is an title</dt>

    <dd>This is a description for “This is an title”</dd>

    <dt>This is another title</dt>

    <dd>This is a description for “This is another title”</dd>

</dl>

Quy tắc chung

           Phải đóng tất cả các thẻ <br /> <input/> <img /> <hr />

           Phải dùng thuộc tính alt với <img />

           Nên đặt width

           Phải dùng title với <a></a>

           Phải dùng type với <input />

           Không dùng inline script, inline style

           Trong thẻ <a> chỉ được đặt các thẻ <span><em><strong><ins><del> bên trong

           Không được đặt các thẻ khác trong <span><em><strong><ins><del>

           Sử dụng HTML URL Encode với tất cả URL

           Sử dụng đường dẫn tuyệt đối với tất cả URL

Validate : http://validator.w3.org/

Quy tắc CSS

           Không dùng float với các thẻ <span><em><strong><ins><del> trừ khi đặt trong thẻ <a>

           Tránh tất cả các giải pháp IE Hack

           Không dùng CSS Expression (trừ trường hợp dùng PNG Transparent)

           Không sử dụng CSS reset

           Giữ nguyên margin nguyên thủy của các thẻ, trừ trường hợp bắt buộc.

           Dùng CSS Shorthand với list-style, background, border, margin, padding, font

Tag: thiết kế website, tối ưu hóa html, css, image,

Nguồn tin: datnq blog

  • Lượt xem: 430
  • Bình luận: 74

Bình luận

Viết bình luận

  • Họ và tên *
  • Email *
  • Comment *
SEO | Thiết kế website | Thanh toán trực tuyến | Tối ưu hóa html | Title trang | Meta tag | Back link | Liên kết website | Rewrite url | Tạo robot.txt | Tạo sitemap | Thủ thuật SEO | Mã nguồn mở | Quảng cáo trức tuyến | Kiếm tiền online | Tin tức thương mại điện tử | eBay Việt Nam | PayPal Việt Nam
Copyright © 2009 HoangClick.com. All Rights Reserved. Designed by Thenv

hoangClick.com: Tư vấn Website quảng bá danh nghiệp - Kinh doanh trực tuyến - Làm việc online - Kiếm tiền hiệu quả

123