Tài liệu Thiết kế web

Bài 4 Hướng dẫn chỉnh sửa và thiết kế giao diện web Joomla Nhắc lại bài cũ • • • • • Joomla có những loại thành phần mở rộng nào? Việt hóa Joomla CMS như thế nào? Thay đổi giao diện website như thế nào? Quản lý đa phương tiện tại Media Manager; Có mấy nhóm thành viên trong website Joomla; Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Mục tiêu bài học • Tìm hiểu chi tiết cách thức quản lý giao diện website Joomla thông qua phần Template Manager; • Chỉnh sửa một template có sẵn để tạo giao diện web như ý muốn; • Hiểu rõ cấu trúc của một Template, những kiến thức căn bản để xây dựng 1 Template cho website Joomla. Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Template Manager Quản lý giao diện website Joomla bằng Template Manager -Giao diện website Joomla bao gồm 2 loại: giao diện cho trang frontend và giao diện cho trang backend; -Tất cả các giao diện của web Joomla được quản lý tại Extension - Template Manager; -Sau khi cài đặt Joomla, hệ thống có sẵn 3 template tạo giao diện trang frontend: Milkyway, JA Purity, Beez Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Template Manager Các thông số cấu hình Template Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Tạo 1 bản sao của Template Beez: -Tạo bản sao Template để tránh trường hợp Template bị hỏng nếu quá trình chỉnh sửa Template có sai sót. -Tạo một thư mục mới có tên mynewtemplate. Nếu website được đặt trên hosting, thì việc này sẽ được xử lý trong File Manager: Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez -Copy toàn bộ các thư mục và file trong thư mục Beez vào trong thư mục mynewtemplate Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Đặt tên cho Template mới là mynewtemplate trong file templateDetails.xml Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Sửa dòng beez thành mynewtemplate Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Lựa chọn Template mynewtemplate làm template mặc định Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Thay đổi màu sắc giao diện bằng cách thay mã màu trong CSS của Template Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Các file CSS trong template - Thay đổi mã màu trong các file này Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Thay đổi Logo: -Thiết kế 1 file ảnh định dạng .gif có tên là logo.gif có kích thước 300x97px -Copy file ảnh trên và dán vào thư mục ../template/mynewtemplate/images Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Thay đổi màu sắc trên giao diện web bằng cách sửa CSS: Để sửa CSS của Template, vào Template Manager, lựa chọn tenplate cần sửa rồi chọn Edit CSS Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Danh sách các file CSS của Template: Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Lựa chọn file template.css và sửa: Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Kết quả như sau: Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Chỉnh sửa Template Beez Một số chỉnh sửa khác: -Bằng cách can thiệp vào các file CSS còn có thể chỉnh sửa các thành phần khác như như font chữ, cỡ chữ, kích thước các vùng trên website ... -Sử dụng FireBug của fiefox để hỗ trợ sửa CSS -Ngoài ra còn có thể thêm hoặc bớt các vị trí đặt module thông qua việc chỉnh sửa file templateDetails.xml và file thiết lập cấu trúc phân vùng của Template (thường là file index.php trong thư mục template). Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Thiết lập website đa giao diện Sử dụng chức năng Menu Assignment để thiết lập website đa giao diện cho Joomla Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla Xây dựng 1 Template mới Cấu trúc file và thư mục trong Template: Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla