Tạo Website Layouts Cơ Bản

1. Website layouts

Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là:

Header: Tiêu đề của trang web, thường thì đây là chỗ của logo website

Navigation Menu: Đây là phần menu điều hướng, giúp cho người đọc có thể truy cập vào các phần khác nhau của trang web

Content: Đây là phần chứa nội dung chính của trang web, cũng có thể là nơi hiển thị quảng cáo của website (thường thì nằm ở hai bên website và ở giữa là nội dung bài viết)

Footer: Đây là phần cuối của website, thường là nơi chứa tên của cá nhân hoặc tổ chức sở hữu website và cũng là nơi chứa thông tin bản quyền. Một số website có thể cho vào navigation link ví dụ như About, Contact,…

Chúng ta có thể xem hình ảnh dưới đây để hiểu rõ hơn về cấu trúc cơ bản của một trang web (nó có thể có nhiều biến thể khác không tuân theo trật tự sắp xếp này, tuy nhiên đây là layout cơ bản nhất và có khá nhiều website dùng)

Header

Navigation Menu

Content

footer

2. Tạo layouts cơ bản

a. Định hình website

Trước khi muốn tạo ra được một website với các phần nội dung chia 3 xẻ 7, phân trái bổ phải thì chúng ta cần xác định trước cấu cúc của website mà mình cần tạo, cần phải vẽ ra và xác định rõ vị trí cần bố trí các nội dung thế nào, dài rộng là bao nhiêu (tốt nhất là vẽ ra giấy, xấu cũng được nhưng nó giúp ta nhìn theo và code dễ dàng hơn). Ở đây chúng ta thiết kế theo bố cục của hình trên.

b. Tạo “xương sống” cho trang web

Con người cần phải có bộ xương thì web cũng vậy nó cũng cần có một “bộ xương” HTML trước khi muốn tô điểm thêm màu mè cho nó. Chúng ta bắt đầu viết HTML cho web nào.

Header

Như ở trên Header là “Tiêu đề của trang web, thường thì đây là chỗ của logo website”, ở đây chúng ta có thể chọn hình ảnh hay chữ làm tiêu đề tùy thích, mình chọn chữ cho đơn giản

<header>

<h1>This is my branding</h1>

<p>Say something about website</p>

</header>

Và đây là kết quả thu được:

This is my branding

Navigation Menu

Tiếp theo là tạo một thanh menu điều hướng cho người dùng dễ dàng thao tác hơn. Ở đây chúng ta dùng nav là một thẻ chuẩn HTML5 để tạo navigation menu

<nav>

<ul>

<li><a href=”#link”>Home</a></li>

<li><a href=”#link”>News</a></li>

<li><a href=”#link”>About</a></li>

</ul>

</nav>

Ta dùng combo ul và liđể tạo ra các mục có trong thanh menu, nếu muốn thêm mục thì chỉ cần thêm một dòng li vào là được.

Kết quả:

Home

News

About

Content

Sau khi có được phần “biển hiệu” và thanh menu, tiếp theo chúng ta tiếp tục tạo nội dung cho trang web. Ở đây ta dùng section để xác định phần này là nội dung chính của trang web và dùng article để chứa các phần nội dung nhỏ bên trong bao gồm nội dung bài viết, quảng cáo, etc. Giả sử ở đây chúng ta có 3 phần nội dung như hình trên. Vì đây là tạo layouts cơ bản nên chúng ta sẽ tạo 3 cột bằng nhau chứ không chia nhỏ lớn như hình trên (làm vậy cho nhanh đấy :v)

<section>

<article>

<h1>Column</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>

</article>

<article>

<h1>Column</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>

</article>

<article>

<h1>Column</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>

</article>

</section>

Đây là kết quả của đống code trên:

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis

Footer

Cuối cùng là phần cuối của một trang web cơ bản ” thường là nơi chứa tên của cá nhân hoặc tổ chức sở hữu website và cũng là nơi chứa thông tin bản quyền”

<footer>

<p> Chaomungban </p>

</footer>

kết quả:

Chaomungban

Hãy đến với chúng tôi Công ty TNHH Dịch vụ Công nghệ  Web Hội An  để sở hữu một website với layout cơ bản thu hút được người dùng.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

web hoi an
web hoi an
web hoi an