Bài 9 : Cấu Trúc 1 Trang Blog bao gồm những gì ?

Hiii ! Trước khi đi vào cài đặt và tinh chỉnh cho trang web trở nên thân thiện và đẹp hơn thì trong bài học này, AnhThien8 sẽ cần bạn nắm được cấu trúc của 1 trang Web/ blog cơ bản có gì. Khi đã nắm được cấu trúc cơ bản của 1 Website thì chúng ta sẽ bắt đầu đi vào tinh chỉnh từng thành phần cụ thể. Bài này là một bài cực quan trọng về mặt tư duy layout trang, bạn nhé ! Sau này nếu bạn có ra ngoài đi làm các dự án liên quan đến Website/blog ở 1 cty nào đó thì cũng sẽ đụng phải kiến thức này mà thôi. Nhớ nhé !

Tổng quan về cấu trúc của 1 trang Web

Nhìn chung, cấu trúc của 1 trang web thường có 7 phần cơ bản.

  • Trang chủ (Home page)
  • Trang hiển thị bài viết ( Post page )
  • Logo trang Web
  • Header ( Phần đầu trang )
  • Thanh menu chính (Primary Menu)
  • Sidebar ( Phần cạnh trang )
  • Footer ( Phần Chân Trang )

Bây giờ, mình sẽ đi vào chi tiết từng phần.

1. Trang chủ – Home Page

Trang chủ là trang sẽ hiển thị ra đầu tiên khi bạn truy cập vào 1 trang web. Đó có thể là 1 trang tĩnh với nội dung hiển thị không thay đổi hoặc là 1 trang động với nội dung thay đổi theo bài viết do bạn cấu hình.

Ví dụ 1 : khi bạn truy cập vào trang web anhthienad.com của mình thì sẽ xuất hiện giao diện như này :

Trang chủ blog anhthienad.com
Trang chủ blog anhthienad.com

Đây là 1 trang chủ có cấu trúc cố định với nội dung hiển thị thay đổi theo thời gian. Nhiệm vụ của trang chủ là cung cấp thông tin tổng quan và giới thiệu chủ đề của trang web với độc giả. Tuy nhiên, bạn nên nhớ, phải tận dụng trang này để làm sao thu hút người độc mới vào là muốn click xem bài viết chi tiết bên trong.

Mẹo : Thường bạn có thể thấy các blogger ở Việt Nam hay làm trang loại này vì

  1. Nhìn trang sẽ gây được sự tin tưởng cho người đọc. Độc giả biết mình là ai.
  2. Vẫn cho người đọc xem được các bài viết mới của mình.
  3. Tặng quà và làm quen với người độc giả mới. Sau đó, lấy thông tin email của họ để làm quen với họ, tạo ra điểm nhấn khiến họ nhớ mình.

Ví dụ 2 : Blog của mình : https://lamairbnb.com/ Bạn quan sát xem.

Trang chủ làm airbnb
Trang chủ làm airbnb

Đây là loại trang chủ thứ 2, hiển thị layout trang theo hình chữ F, 1 layout phổ biến và được sử dụng rất rất nhiều trên thế giới. Như bạn thấy, trang chủ này không show quá nhiều về chủ nhân của blog nhưng cũng có 1 phần bên phải để tấm hình là mình và mô tả về blog này. Điều đó đem lại sự tin tưởng cho độc giả vì họ biết blog này của ai và họ đang tương tác với ai.

Các bài viết được hiển thị ra theo chiều dọc, tầm 5-10 bài viết. Nhìn có vẻ đơn giản là vậy chứ layout này được xem là layout thân thiện cho người dùng nhất thế giới. Cả facebook họ cũng tận dụng layout này vì muốn người đọc tập trung vào nội dung nhiều nhất có thể.

Tuy nhiên, với layout này, bạn sẽ khó thu hút được người độc nhận quà như layout đầu. Nên tùy vào mục đích của bạn mà bạn sắp xếp layout như thế nào.

AnhThienAD.com có rất nhiều bài viết hay, nếu cần tìm kiếm các bạn hãy dùng cú pháp sau trên Google: keyword + anhthienad

Như bài này, bạn chỉ cần gõ “cau truc trang web anhthienad” trên google là ra.

Lời khuyên của AnhThien8 : Hãy chọn layout thứ 2 này để bắt đầu sự nghiệp viết lách của bạn vì nó đơn giản, thân thiện và giúp bạn tiết kiệm thời gian tập trung xây dựng nội dung bài viết. Sau khi blog bạn phát triển lên được con số 5000 – 6000 visits/tháng thì có thể làm layout 1 nếu bạn thấy cần.

Và tùy theme mà có theme sẽ cho bạn sẵn trang chủ như jnews của dự án hiquynhon.com mình làm, có theme thì không mà phải sử dụng 1 plugin thiết kế trang thứ ba như Elementor bản Pro có giá $49/năm để thiết kế. Và mình nghĩ bạn là người mới, cũng không quá cần đầu tư thời gian cho việc thiết kế đến độ hoàn hảo đâu. Cái chúng ta cần quan tâm nhất đó là làm 1 trang web, trang blog THẬT ĐƠN GIẢN, thân thiện người dùng trên các thiết bị. Nhanh, mượt và không rườm rà rối mắt.

2. Trang hiển thị bài post – Single Post Page

Đây là trang sẽ hiển thị nội dung chi tiết 1 bài viết mà bạn đăng lên. Ví dụ tại trang chủ của mình, bạn bấm vào nút KHÁM PHÁ NGAY thì bạn sẽ được đưa đến trang hiển thị bài post. Chỉ đơn giản vậy thôi.

3. Logo của trang Web

Thường thì logo của 1 trang web được mặc định nằm ở góc trên, bên trái của trang web đó. Đây cũng là vị trí mà mình nghĩ là hiển thị đẹp nhất. Tuy nhiên, bạn có thể lựa chọn logo hiển thị ở giữa của header vẫn được. Việc này tùy vào ý thích của bạn thôi.

Bạn có thể chọn logo là hình ảnh hoặc là chữ. Riêng mình thích sự đơn giản và dễ nhớ nên mình chọn logo dạng chữ.

Để thiết kế ra 1 logo, bạn có thể sử dụng công cụ Photoshop. Tuy nhiên, không phải ai cũng có thể dùng công cụ này vì nó đòi hỏi 1 lượng kiến thức nhất định. Vì vậy, để bạn có thể thực hành dễ dàng mà không bị gián đoạn, mình sẽ giới thiệu cho bạn công cụ thiết kế logo miễn phí có tên là Designbold, hàng Việt Nam chuẩn thế giới. Công cụ này sẽ giúp bạn thiết kế ra 1 logo chỉ trong 2 phút. Mình sẽ có bài hướng dẫn ở sau.

4. Header ( Đầu Trang )

Header là phần background ( hình nền ) trên cùng của trang web, chứa logothanh menu chính. Bạn có thể tùy chỉnh màu sắc và kiểu hiển thị của header.

5. Thanh menu chính

Thanh menu chính là lối tắt để đi vào trang, các chỉ mục, chứa các bài viết thuộc cùng 1 chủ đề trên trang web của bạn. Ví dụ, khi bạn click vào Tự làm Website trên trang web của mình, bạn sẽ được đưa đến 1 trang chứa tất cả bài viết hướng dẫn bạn tự làm website từ a-z.

6. Thanh Sidebar

Là khu vực hiển thị dọc ở bên phải khu vực hiển thị bài viết mới. Bạn có thể thêm vào bất cứ nội dung gì cho thanh Sidebar. Các nội dung sẽ được hiển thị từ trên xuống dưới.

Thanh sidebar bên cạnh
Thanh sidebar bên cạnh.

Mình hay cân nhắc để gì vào thanh sidebar cho hợp lý vì nó cũng hiển thị trên giao diện mobile nữa. Đổi khi, mình không biết để gì thì mình bỏ trống. Còn thường thì mình để khung search, khung about me, khung bài viết gần đây, bình luận gần đây và nếu site mình có nhiều visits thì mình để banner lên.

7. Footer

Thông thường, 1 trang web sẽ có 3 phần footer, đó là Footer 1, Footer 2 và Footer 3, để hiển thị các thông tin: phần giới thiệu về trang web, phần giới thiệu về tác giả và phần Footer Danh Mục. Đây là phần Footer của trang web mình tại dự án HiQuyNhon.com

Một footer khác của dự án lamairbnb

Footer trang làm airbnb

Và bạn có thể thấy, trang nào mình cũng để mục Điều khoản & chính sách về quyền riêng tư hay ( Privacy Policy ). Cái này rất cần thiết hiện nay và các bộ máy tìm kiếm như Google cũng thích điều này. Trang này gồm các điều khoản bảo vệ và bảo mật thông tin người dùng cũng như công bố rõ trách nhiệm của bạn về nội dung bạn sản xuất.

Kết luận

 Ok, vậy là chúng ta đã đi vào tìm hiểu về cấu trúc cơ bản của 1 trang web rồi. Bài này viết ngắn này chỉ là để giới thiệu với bạn 1 cách tổng quan và mục đích sử dụng của nó. Từ bài sau, chúng ta sẽ bắt đầu đi vào thực hành để cài đặt và tối ưu các thành phần cho trang Web.

Ok, hẹn gặp lại bạn ở bài kế tiếp!

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x