programming4:theme
Khác biệt
Đây là những khác biệt giữa hai phiên bản của trang.
Phiên bản sau | Phiên bản trước | ||
programming4:theme [2016/06/16 11:03] – được tạo ra hoaquynhtim99 | programming4:theme [2016/06/20 07:36] (hiện tại) – [Xây dựng giao diện cơ bản] hoaquynhtim99 | ||
---|---|---|---|
Dòng 1: | Dòng 1: | ||
- | ====== Thiết kế giao diện cho hệ thống NukeViet | + | ====== Thiết kế giao diện cho hệ thống NukeViet |
===== Tìm hiểu về Công việc thiết kế giao diện cho NukeViet ===== | ===== Tìm hiểu về Công việc thiết kế giao diện cho NukeViet ===== | ||
Dòng 8: | Dòng 8: | ||
| 1 | Vẽ (Design) | Chuyên viên đồ họa (Designer) | Vẽ giao diện web dưới dạng Layout có thể cắt HTML được | Photoshop hoặc các phần mề đồ họa tương đương | File đồ họa gốc và ảnh jpg hoặc PNG toàn trang | | | 1 | Vẽ (Design) | Chuyên viên đồ họa (Designer) | Vẽ giao diện web dưới dạng Layout có thể cắt HTML được | Photoshop hoặc các phần mề đồ họa tương đương | File đồ họa gốc và ảnh jpg hoặc PNG toàn trang | | ||
| 2 | Cắt (Cut) | Kỹ thuật viên | Cắt giao diện đã được vẽ ra HTML | Photoshop hoặc các phần mề đồ họa tương đương, các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor...) | Trang web được thể hiện dưới dạng HTML| | | 2 | Cắt (Cut) | Kỹ thuật viên | Cắt giao diện đã được vẽ ra HTML | Photoshop hoặc các phần mề đồ họa tương đương, các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor...) | Trang web được thể hiện dưới dạng HTML| | ||
- | | 2.1 | Hợp chuẩn HTML (Valid) | Kỹ thuật viên | Chuẩn hóa giao diện đã cắt đạt chuẩn W3C | Các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor...) | HTML đạt các chuẩn | + | | 2.1 | Hợp chuẩn HTML (Valid) | Kỹ thuật viên | Chuẩn hóa giao diện đã cắt đạt chuẩn W3C | Các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor...) | HTML đạt các chuẩn |
| 3 | Ghép giao diện | Kỹ thuật viên | Ghép HTML vào hệ thống NukeViet | Các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor...) | Giao diện được ghép đúng như được thiết kế, hợp chuẩn và không bị xung đột javascript với NukeViet (khi kéo thả block và sử dụng một số chức năng khác) | | | 3 | Ghép giao diện | Kỹ thuật viên | Ghép HTML vào hệ thống NukeViet | Các trình duyệt phổ biến và một vài trình soạn thảo code (Notepad++, EmEditor...) | Giao diện được ghép đúng như được thiết kế, hợp chuẩn và không bị xung đột javascript với NukeViet (khi kéo thả block và sử dụng một số chức năng khác) | | ||
- | Bài viết này hướng dẫn công việc Ghép giao diện cho hệ thống NukeViet | + | Bài viết này hướng dẫn công việc Ghép giao diện cho hệ thống NukeViet |
===== Tổng quan về theme của NukeViet ===== | ===== Tổng quan về theme của NukeViet ===== | ||
- | Các theme được đặt trong thư mục '' | + | Các theme được đặt trong thư mục '' |
- | * Thư mục block: Chứa các file template (.tpl) | + | * Thư mục blocks: Chứa các block của giao diện. |
* Thư mục chứa các file css. Mỗi file css của module có tên là tên của module, khi người dùng truy cập một module thì file css này sẽ được load tự động, khi đóng gói module các file này cũng sẽ được đóng gói tự động. | * Thư mục chứa các file css. Mỗi file css của module có tên là tên của module, khi người dùng truy cập một module thì file css này sẽ được load tự động, khi đóng gói module các file này cũng sẽ được đóng gói tự động. | ||
* Thư mục images: Chứa các file ảnh, một theme nên chứa các thư mục con: admin, | * Thư mục images: Chứa các file ảnh, một theme nên chứa các thư mục con: admin, | ||
Dòng 26: | Dòng 26: | ||
* File favicon.ico: | * File favicon.ico: | ||
* File theme.php: File chức năng của theme. | * File theme.php: File chức năng của theme. | ||
+ | |||
+ | > Chú ý: Cấu trúc trên chỉ mang tính tương đối, tùy vào mục đích của người làm giao diện mà có thể bố trí các thư mục hoặc file khác nhau và khác với cấu trúc gợi ý trên. | ||
===== Xây dựng giao diện cơ bản ===== | ===== Xây dựng giao diện cơ bản ===== | ||
- | Để xây dựng một giao diện cơ bản từ giao diện đã có ta tiến hành copy một theme đã có, đặt lại tên theme, xóa các phần sau: | + | Để xây dựng một giao diện cơ bản từ giao diện đã có ta tiến hành copy một theme đã có, điển hình là theme default. Xem cách [[programming4:theme:copy-from-deault-theme|xây dựng giao diện |
- | * Tất cả các file trong thư mục, hoặc cả thư mục blocks. | + | |
- | * Các file trong thư mục '' | + | |
- | * Tất cả các thư mục trong thư mục modules. | + | |
- | * Các file và thư mục trong thư mục images, để lại thư mục admin, arrows, icons và file index.html. | + | |
- | * Thư mục js | + | |
- | Bước tiếp theo cấu hình lại cho theme bằng | + | |
- | * < | + | |
- | * Các < | + | |
- | * < | + | |
- | Chỉnh lại CSS và các ảnh để được giao diện theo ý. | + | |
- | + | ||
- | Nếu muốn | + | |
__**Lưu ý: | __**Lưu ý: | ||
Dòng 47: | Dòng 37: | ||
Ví dụ: | Ví dụ: | ||
<code php> | <code php> | ||
- | $xtpl-> | + | $xtpl-> |
</ | </ | ||
Để hiển thị từ “tiêu đề trang” thì trong file tpl ta cần viết {TITLE}. | Để hiển thị từ “tiêu đề trang” thì trong file tpl ta cần viết {TITLE}. | ||
Dòng 55: | Dòng 45: | ||
Ví dụ: | Ví dụ: | ||
<code php> | <code php> | ||
- | $xtpl-> | + | $xtpl-> |
</ | </ | ||
Để xuất chữ Tiêu đề thì trong file tpl cần đặt {TITLE.title}. | Để xuất chữ Tiêu đề thì trong file tpl cần đặt {TITLE.title}. | ||
* Lệnh đánh dấu khối prase sẽ đánh dấu những phần nằm trong cặp < | * Lệnh đánh dấu khối prase sẽ đánh dấu những phần nằm trong cặp < | ||
- | * Trong các file tpl trong thư mục layout, có thể bỏ bớt các phần, tuy nhiên cần đảm bảo được các biến '' | ||
- | |||
===== Xây dựng giao diện nâng cao ===== | ===== Xây dựng giao diện nâng cao ===== | ||
Ngoài các phần cơ bản, NukeViet cũng cung cấp môi trường giúp người dùng tối ưu hóa đến mức tối đa các giao diện: | Ngoài các phần cơ bản, NukeViet cũng cung cấp môi trường giúp người dùng tối ưu hóa đến mức tối đa các giao diện: |
programming4/theme.txt · Sửa đổi lần cuối: 2016/06/20 07:36 bởi hoaquynhtim99