Thiết kế website bằng HTML và CSS

Nội dung

1 Các bước thiết kế website bằng HTML và CSS
2 Một số thư viện CSS giúp thiết kế website nhanh chóng và chuyên nghiệp hơn

Thiết kế website bằng HTML và CSS là bước đầu để tạo dựng nên một giao diện của một website. Một website có thể được chia thành nhiều phần khác nhau bao gồm các phần cơ bản là header, menu, phần nội dung và footer, với các thành phần trên các developer có thể thiết kế ra nhiều layout khác nhau. Các layout website khác nhau này có thể được thiết kế bằng cách sử dụng các thẻ của HTML và thuộc tính CSS để tạo kiểu.

Dưới đây là hướng dẫn về cấu trúc phổ biến nhất của bố cục trang web cho các bạn mới bắt đầu học thiết kế website bằng HTML và CSS.

Lưu ý: Phần header chứa logo của trang web, thanh tìm kiếm hay profile của người dùng. Thanh menu điều hướng chứa liên kết đến các danh mục bài viết khác nhau. Phần nội dung được chia thành 3 phần (cột) với thanh bên trái và phải chứa các liên kết đến các bài viết hoặc nội dung quảng cáo trong khi phần nội dung chính là phần chứa nội dung bài viết. Sau đó ở dưới cùng là phần footer chứa địa chỉ, liên kết, địa chỉ liên hệ, v.v.

Các bước thiết kế website bằng HTML và CSS

Phần Header

Phần header thường được đặt ở đầu trang web hoặc ngay dưới menu điều hướng chính. Nó thường bao gồm tên của trang web hoặc là logo công ty.

Ví dụ:

<!-- Đoạn code này mô tả phần tiêu đề bố cục trang web -->
<!DOCTYPE html>
<html>

<head>
  <title> Website Layouts </title>
  <style>
  .header {
    background-color: #ffbe00;
    padding: 15px;
    text-align: center;
  }
  </style>
</head>

<body>
  <div class="header">
    <h2 style="color:white;">
       Business Name
    </h2> 
  </div>
  <br>
  <center style="font-size:200%;"> Remaining Section </center>
</body>
</html>

Kết quả:

Menu điều hướng

Thanh điều hướng/Menu về cơ bản là một danh sách các liên kết cho phép khách truy cập qua trang khác một cách thoải mái với khả năng truy cập dễ dàng.

Ví dụ:

<!DOCTYPE html>
<html>

<head>
  <title> Website Layout </title>
  <style>
  /* CSS property for header section */
  
  .header {
    background-color: #ffbe00;
    padding: 15px;
    text-align: center;
  }
  /* CSS property for navigation menu */
  
  .nav_menu {
    overflow: hidden;
    background-color: #333;
  }
  
  .nav_menu a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .nav_menu a:hover {
    background-color: white;
    color: green;
  }
  </style>
</head>

<body>
  <!-- header of website layout -->
  <div class="header">
    <h2 style="color:white;font-size:200%;">Business Name</h2> 
  </div>
  <!-- navigation menu for website layout -->
  <div class="nav_menu"> <a href="#">Algo</a> <a href="#">DS</a> <a href="#">Language</a> </div>
  <br>
  <center style="font-size:200%;"> Remaining Section </center>
</body>
</html>

Kết quả:

Phần nội dung

Phần nội dung là phần chính của trang web. Bạn có thể chia phần nội dung theo bố cục n-cột. Các bố cục phổ biến nhất là:

Layout 1 cột: Bố cục này chủ yếu được sử dụng cho di động.

Layout 2 cột: Bố cục này chủ yếu được sử dụng cho máy tính bảng hoặc máy tính xách tay.

Layout 3 Cột: Bố cục trang web này chủ yếu được sử dụng cho máy tính để bàn.

Bạn cũng có thể tạo một layout responsive trong đó layout sẽ được thay đổi theo kích thước màn hình. Hãy xem ví dụ dưới đây, trong đó nếu chiều rộng của màn hình hơn 600px thì sẽ có bố cục 3 cột và nếu chiều rộng màn hình từ 400px đến 600px thì sẽ có bố cục 2 cột và nếu kích thước màn hình nhỏ hơn 400px thì sẽ hiển thị bố cục 1 cột.

Ví dụ: Đoạn code dưới đây là layout website có reponsive được thiết kế đơn giản với HTML và CSS

<!DOCTYPE html>
<html>

<head>
  <title> Website Layout </title>
  <style>
  * {
    box-sizing: border-box;
  }
  /* CSS property for header section */
  
  .header {
    background-color: #ffbe00;
    padding: 15px;
    text-align: center;
  }
  /* CSS property for navigation menu */
  
  .nav_menu {
    overflow: hidden;
    background-color: #333;
  }
  
  .nav_menu a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .nav_menu a:hover {
    background-color: white;
    color: green;
  }
  /* CSS property for content section */
  
  .columnA,
  .columnB,
  .columnC {
    float: left;
    width: 31%;
    padding: 15px;
    text-align: justify;
  }
  
  h2 {
    color: green;
    text-align: center;
  }
  /* Media query to set website layout

            according to screen size */
  
  @media screen and (max-width:600px) {
    .columnA,
    .columnB,
    .columnC {
      width: 50%;
    }
  }
  
  @media screen and (max-width:400px) {
    .columnA,
    .columnB,
    .columnC {
      width: 100%;
    }
  }
  </style>
</head>

<body>
  <!-- header of website layout -->
  <div class="header">
    <h2 style="color:white;font-size:200%">Business Name</h2> 
        </div>
  <!-- navigation menu of website layout -->
  <div class="nav_menu"> <a href="#">Algo</a> <a href="#">DS</a> <a href="#">Language</a> </div>
  <!-- Content section of website layout -->
  <div class="row">
    <div class="columnA">
      <h2>Column A</h2>
      <p>Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.</p>
    </div>
    <div class="columnB">
      <h2>Column B</h2>
      <p>Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.</p>
    </div>
    <div class="columnC">
      <h2>Column C</h2>
      <p>Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.</p>
    </div>
  </div>
</body>
</html>

Kết quả:

Khi chiều rộng của kích thước màn hình lớn hơn 700px:

Khi chiều rộng của kích thước màn hình lớn hơn 400px và nhỏ hơn 600px:

Và khi chiều rộng của kích thước màn hình nhỏ hơn 400px:

Phần Footer

Phần Footer được đặt ở cuối trang web và thường bao gồm các thông tin như thông tin liên hệ, bản quyền, giới thiệu về chúng tôi, liên kết, fanpage, v.v.

Ví dụ:

<!DOCTYPE html>
<html>

<head>
  <title> CSS Website Layout </title>
  <style>
  /* Style for footer section */
  
  .footer {
    margin-top: 10px;
    background-color: #ffbe00;
    padding: 15px;
    text-align: center;
  }
  
  .footer a {
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #000000
  }
  </style>
</head>

<body>
  <center style="font-size:200%; padding: 20px 0"> Upper section </center>
  <!-- footer Section -->
  <div class="footer"> <a href="#">About</a>
    <br> <a href="#">Career</a>
    <br> <a href="#">Contact Us</a> 
  </div>
</body>
</html>

Kết quả:

Một số thư viện CSS giúp thiết kế website nhanh chóng và chuyên nghiệp hơn

Thực tế trong các dự án chúng ta rất ít tự tạo HTML hay CSS trong việc xây dựng giao diện web hay layout. Việc tự tạo CSS tiêu tốn rất nhiều thời gian của developer.

Hiện nay đã có nhiều thư viện CSS được xây dựng để giúp các developer đơn giản hóa trong việc thiết kế hơn. Thư viện CSS cho phép bạn tạo ra những thiết kế tuyệt đẹp mà không cần đổ mồ hôi. Nó cũng giúp làm giảm những nỗ lực phụ, cho phép bạn tập trung vào việc thúc đẩy năng suất. Dưới đây là một vài thư viện hàng đầu để giúp cho công việc của bạn:

Tailwind CSS
Bootstrap CSS
Material-UI
Materialize
Foundation

Với kiến thức cơ bản về dựng layout bằng HTML và CSS cùng với các thư viện CSS hỗ trợ trên sẽ giúp chúng ta xây dựng nên các giao diện website nhanh chóng và chuyên nghiệp hơn.