Thiết Kế Web

Hướng dẫn layout giao diện ba cột đơn giản

Bài trước mình đã hướng dẫn các bạn Xây dựng menu dọc một cấp đơn giản. Tiếp theo bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chính. Ở bài đầu tiên này …

Bài trước mình đã hướng dẫn các bạn Xây dựng menu dọc một cấp đơn giản. Tiếp theo bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chính. Ở bài đầu tiên này mình sẽ hướng dẫn layout một giao diện ba cột đơn giản bằng HTML và CSS các bạn nhé.

Dưới đây hình ảnh giao diện ba cột sau khi chúng ta tiến hành xong việc layout bằng HTML và CSS.

main

Giao diện trên gồm có những phần sau đây:

  • Top Head
  • Left Menu
  • Main Info
  • Right Menu
  • Foooter

Chúng ta bắt đầu vào việc đầu tiên là tạo hai file index.htmlstyle.css. Sau khi các bạn tạo xong hai file trên thì các bạn mở file index.html lên để chúng ta sẽ tạo phần HTML tròng file này.

HTML

Bước 1: Mình sẽ tạo một thẻ <div> cho khối Top Head và gắn cho nó một id=”top” nhé.

Bước 2: Tiếp tục tạo một thẻ <div> cho khối Main và mình sẽ gán cho nó một id=”main”.

Khối Main là khối nó chữa các khối con khác. Cụ thể là ba khối: Left Menu, Main Info và Right Menu. Như vậy chúng ta sẽ lần lượt tạo ba thẻ <div> cho ba khối Left Menu, Main Info và Right Menu nằm trong thẻ <div> của khối Main nhé. Ở ba khối này mỗi khối chúng ta sẽ gán cho nó một id cụ thể là: id=”left”, id=”info”, id=”right”.

Bước 3: Chúng ta còn thiếu khối Footer nên ở bước này chúng ta sẽ tạo một thẻ <div> chứa khối footter nhé và cũng sẽ gán cho nó một id=”footer”.

Sau đây chúng ta sẽ ghép tất cả ba bước trên thành một file index.html hoàn chính nhé.

Hiện tại bây giờ chúng ta mới chỉ hoàn thành xong phần code HTML mà thôi. Để có được một layout hoàn chính và đẹp như hình trên thì chúng ta sẽ phải dùng tới CSS để chính sửa và định dạng cho phần HTML này. Như vậy thì việc các bạn và mình phải làm là mở file style.css để định dạng cho phần giao diện của chúng ta thôi.

Khi mình tạo các thẻ <div> để chứa các khối thì mình đã gán cho mỗi thẻ một id cụ thể rồi nên giờ mình sẽ tiến hàng viết các lệnh CSS nhé. Cũng giống như phần HTML ở đây mình cũng sẽ chia ra từng bước một rồi sau đó ghép chúng lại với nhau để cho các bạn dẽ hình dung nhé.

Ở đây mình sẽ tiến hành viết CSS luôn cho từng khối chứ không giải thích từng dòng lệnh các bạn nhé. Nếu bạn nào chữa hiểu hết HTML và CSS thì có thể xem lại ở đây Tìm hiểu thẻ DIV cơ bản và nâng caoCác lệnh thường gặp trong CSS.

CSS

Trước tiên thì chúng ta sẽ định dạng cho toàn bộ site và phần thẻ <body> nhé.

Tiếp theo chúng ta sẽ đi định dạng cho từng khối.

Bước 1: CSS cho khối Top Head

Bước 2: CSS cho khối Main: Khối này sẽ chữa ba khối con bên trong nó.

Bước 3: CSS cho khối Left Menu: Khối này sẽ nằm bên trái nên chúng ta sẽ dùng câu lệnh float cho nó.

Bước 4: CSS cho khối Main Info: Khối này nằm giữa hai khối Left Menu và Right Menu.

Bước 5: CSS cho khối Right: Khối này sẽ nằm bên phải nên chúng ta sẽ dùng câu lệnh float cho nó.

Bước 6: CSS cho khối Footer: Khối này nằm dưới ba khối cùng nổi (float) nên chúng ta phải xóa float bằng lệnh clear trong CSS nhé.

Dứoi đây là phần CSS mình sẽ ghép các bước trên lại với nhau nhé. Chúng ta sẽ có một file style.css như sau:

Sau khi các bạn đã viết code cho hai file index.htmlstyle.css thì các bạn chạy file index.html để xem thành quả nhé. Nhưng nhớ là dẫn file style.css vào file index.html nhé. Trên đây là mình đã hướng dẫn các bạn tạo một giao diện layout dạng ba cột đơn giản. Nếu các bạn một layout các dạng khác thì hãy chính sửa lại chút nhé. Chúc các bạn thành công !

 

Thẻ:, , ,
comments powered by Disqus
Powered by HTH Company