Home > Wordpress > [Theme Development] Phần 4: thiết kế giao diện với HTML

[Theme Development] Phần 4: thiết kế giao diện với HTML

Ở phần này chúng ta sẽ tìm hiểu về HTML để thiết kế giao diện, qua HTML sẽ tới những phần khác như CSS và JavascriptLập trình theme phần 4

 

Tải mẫu thực hành

Trong toàn bộ serie này chúng ta sẽ cùng làm việc với một mẫu duy nhất đã được mình thiết kế trước, bạn hãy tải về và làm theo luôn nhé.

Mẫu này chỉ gồm một file PSD duy nhất cho trang index, bởi vì các trang con như page, category, single chúng ta cũng dựa vào phần index này mà làm thôi nên mình không thiết kế ra làm chi cho mất công.

Cài đặt cấu trúc giao diện HTML

Tạo các folder và file như bên dưới

  • /html
    • /img
    • /js
    • /less_file
    • favicon.ico
    • index.html
    • normalize.min.css

Bây giờ bạn chạy file index.html nó sẽ ra một trang trắng vì nó chưa có gì cả. Bây giờ hãy mở phần mềm Sublime Text 2 lên, vào File -> Open Folder để mở thư mục html mới giải nén ra lên nhé. Sau đó mở file index.html bạn sẽ thấy như thế này:

HTML Starter Template

Mỗi phần mình đã đều ghi chú hết rồi nên chắc không có gì khó hiểu phải không nào, dĩ nhiên là mình sẽ không giải thích qua ý nghĩa của từng phần nữa vì nếu bạn đã đọc tới đây thì bạn cũng đã hiểu được HTML cơ bản từ trước.

Viết giao diện HTML đơn giản

Ok, bây giờ chúng ta sẽ đi vào phần quan trọng nhất trong bài này, đó là viết cái khung của giao diện bằng HTML đơn giản trước. Nhưng trước khi viết thì chúng ta nên xem lại mẫu giao diện một lần cho rõ.

Nhìn vào mẫu thì bạn sẽ thấy được hai phần khác biệt:

  • Phần header của website màu đen và có chiều rộng trải dài toàn màn hình (Full Width).
  • Phần nội dung thì nhỏ hơn và được đặt giữa trình duyệt.
  • Phần chân trang (footer) là Full Width.

Như vậy, chúng ta phải viết HTML riêng cho phần header, nội dung và footer là như sau:

Cấu trúc HTML toàn cục

Trong đó, #header sẽ được chỉ định làm cái khung bao toàn bộ phần header của trang web, và #wrapper sẽ là cái khung bao toàn bộ phần nội dung.

Viết HTML cho Header

Bây giờ nhìn tiếp nè, ở phần header ta sẽ có 2 phần nhỏ nữa đó là tên của website đặt bên trái và menu đặt bên phải và cái thanh top bar màu xanh nằm phía trên, nghĩa là chúng ta sẽ có 2 thẻ div khác lồng vào header và một thẻ div nằm bên trên header, ta viết phần header thêm thành như sau:

Code HTML phần header

Ok, bây giờ chạy file lên thì ta có thế này:

HTML phần header

Đừng lo lắng, cứ để đấy và tới phần CSS chúng ta sẽ “làm đẹp” nó sau ha.

Viết HTML cho phần nội dung

Bây giờ chúng ta tiếp tục nhìn phần nội dung, phần này nó hơi nhiều phần mà nhìn ảnh các bạn có thể thấy nó bao gồm:

Cấu trúc phần nội dung

  1. Phần tin nổi bật (có 3 tấm ảnh).
  2. Phần nội dung
    • Nội dung bài viết
    • Sidebar bên phải.
  3. 2 cột lấy bài mới nhất ở category

Mỗi phần bên trong nó sẽ có nhiều phần riêng nữa, nhưng trước mắt là ta thấy nó đều nằm trong một khung lớn gọi là #wrapper mà ta đã viết ở đầu bài. Bây giờ trong khu vực #wrapper đó, bạn sẽ viết thêm một số thẻ div cho các phần chính như sau:

theme-dev-html-start-8

Bây giờ chúng ta sẽ tiến hành đi sâu vào từng phần nhỏ nhỏ bên trong nhé. Làm tới phần này bạn sẽ cần sử dụng ảnh chèn vào, bạn tải mấy cái ảnh tại đây, sau đó giải nén tất cả vào thư mục img nhé.

Bây giờ hãy nhìn phần đầu tiên là phần .featured-post, ta sẽ có 3 cái khung tượng trưng cho 3 bài, và mỗi khung ta sẽ có phần hình ảnh và tiêu đề bài viết. Vậy ta sẽ viết HTML như sau:

theme-dev-html-start-9a

Và kết quả sẽ là…

HTML đơn giản phần featured-post

Nhìn cũng không tệ phải hôn? Ờ cái coi, nếu ờ thì chúng ta viết tiếp phần .content nghen?

Ở phần .content, chúng ta sẽ có 2 phần chính là .content-main (bên trái) và .sidebar (bên phải), và bên trong phần .content-main thì sẽ có thêm một phần nữa là .content-category để hiển thị các bài trong một category nhất định ra.

Bây giờ trước tiên mình sẽ viết HTML cho phần .content-main trước, trong phần này ta có những phần như khung bên trái để hiển thị ảnh thumbnail, bên phải hiển thị tiêu đề bài viết, nội dung bài viết, nút mạng xã hội và nút xem thêm và lặp lại 2 lần cho 2 bài viết. Vậy thì ta sẽ có code như sau (không đụng chạm tới .content-category), hơi dài nên mình copy vào pastebin bạn xem nhé:

Codehttp://pastebin.com/QjMBgt0H

P/S: Nút mạng xã hội mình sẽ tạm để là dạng chữ trước, vì localhost không nhúng mấy nút này được.

Ok, bây giờ ta sẽ viết tiếp tục phần phân trang, thực ra phần này ta chỉ viết cho nó một cái class tượng trưng coi như đặt chỗ cho nó thôi, bởi vì phần này khi chuyển qua WordPress ta sẽ làm sau vì bây giờ mình không thể nhớ được hết class của cái phân trang của WP-PageNavi.

HTML cho phần phân trang

Giờ nhìn xuống bạn sẽ thấy .content-category còn trống chưa có gì, chúng ta sẽ viết HTML thêm cho cái này để nó hiển thị ra 2 khung hiển thị bài theo từng category phía dưới cột bên trái. Ta có code đầy đủ như sau:

Code HTML phần bài trong chuyên mục

Và kết quả là ta sẽ có 2 cái giống bên dưới.

Khung bài theo category

Đó là xong phần .main-content cột bên trái, bây giờ ta sẽ viết thêm cái sidebar cột bên phải nhé, cụ thể là chúng ta sẽ viết thêm vào phần .sidebar.

Code HTML cho sidebar

Sau đó ta sẽ có…

theme-dev-html-start-15

Viết HTML cho footer

Sau khi có phần header và content rồi thì phần cuối mà chúng ta cần làm trong bài này đó là viết HTML cho Footer, nhìn chung thì nó cũng không nhiều lắm mà chỉ có vỏn vẹn vài đoạn thế này thôi.

Code HTML phần footer

Và ta có kết quả tựa thế này (mình không chụp hết được)…

theme-dev-html-start-17

Ok, vậy là ta xong phần trang chủ bằng HTML đơn giản rồi, sẽ còn một trang nữa mà chúng ta cần làm đó là trang hiển thị nội dung một bài viết, mà thuật ngữ gọi là trang Single, phần này chúng ta sẽ làm ở bài 4 nhé.

Video hướng dẫn Click xem video

Theo ThachPham Blog

About Huy Nguyễn

Chào mọi người, mình là Huy. Mình thích rất nhiều thứ liên quan đến máy tính, thích web thích lập trình, thích thiết kế ... :3. Thích nhiều thứ, hiện tại mình đang tìm hiểu về Wordpress bạn nào có hứng thú thì trao đổi thêm vs mình nha.

Check Also

Webtut #03: Javascript trong thiết kế website

Đến hẹn lại lên, sau chủ đề về HTML và CSS, ngày 7/12 nhóm web …

Có 1 bình luận

  1. quá dữ :3

Leave a Reply

%d bloggers like this: