Bộ mã nguồn mẫu giao diện của thư viện Violet.vn
(Phiên bản 1.02 – 11/3/2009)
Lịch sử sửa đổi
11/3/2009: Phiên bản đầu
24/3/2009: Phiên bản 1.02
Bổ sung thêm style side-left và side-right cho phép các block hiển thị bên trái và bên phải khác nhau
Bổ sung thêm các style cho từng block của side để có giao diện thay đổi theo từng loại block
Mục đích
Thư viện Violet.vn là môi trường để các giáo viên tạo các trang riêng (blog) để trao đổi tài liệu và kinh nghiệm, phương pháp giảng dạy
Trang riêng có thể sử dụng một số mẫu giao diện do thư viện cung cấp, sau đó lựa chọn hình nền và banner thích hợp
Theo góp ý của một số thành viên, số lượng mẫu giao diện chưa được phong phú. Do lực lượng thiết kế của Ban Quản trị còn mỏng, việc tạo thêm nhiều mẫu đòi hỏi nhiều thời gian.
Một số thành viên tích cực nêu ý kiến muốn có can thiệp sâu hơn vào giao diện của thư viện. Do đó Ban Quản trị Violet.vn quyết định chia sẻ mã mẫu giao diện để các thành viên có thể tự xây dựng mẫu giao diện mới, hình thức như sau:
Ban Quản trị cung cấp một gói giao diện gồm các file Stylesheet (css), kèm theo đó là các trang HTML mẫu
Các thành viên có thể chỉnh sửa Stylesheet để có được các giao diện mới.
Sau khi Stylesheet hoàn chỉnh, thành viên có thể liên hệ với Ban Quản trị để đưa mẫu trang web thành tài nguyên chung của cả thư viện violet.vn.
Tùy theo yêu cầu của tác giả, các trang riêng sử dụng mẫu do thành viên tự tạo sẽ phải đề thông tin bản quyền của tác giả.
Mong rằng hình thức này sẽ giúp giao diện của trang web ngày càng phong phú, tận dụng được sức sáng tạo của tất cả các thành viên, giúp các thầy cô giáo làm quen với tư duy mã nguồn mở (Open source) đang rất phổ biến trên thế giới.
Hướng dẫn sử dụng
Cấu trúc
Trong 1 gói giao diện gồm có:
File readme.doc, chứa nội dung hướng dẫn.
File main.html và comment.html là 2 file mẫu để người dùng có thể kiểm tra giao diện mới
Thư mục css chứa các file stylesheet, trong thư mục này có
Thư mục common, chứa các file stylesheet của hệ thống (không được phép chỉnh sửa)
Thư mục theme, chứa các file stylesheet của giao diện (đây là thư mục duy nhất mà người dùng có thể can thiệp vào để chỉnh sửa giao diện của mẫu)
Thư mục images, js chứa các file hỗ trợ (người dùng không được can thiệp, thêm, xóa file ở trong thư mục này)
Xây dựng mẫu giao diện
Để xây dựng mẫu giao diện, cần thực hiện các bước sau:
Mở nén gói giao diện
Mở file mẫu (main.html và comment.html)
Mở các file css trong thư mục css/theme, chỉnh sửa lại các file css này và kiểm tra sự thay đổi trong các file html. Chú ý: Người dùng chỉ được phép can thiệp vào các file css trong thư mục css/theme.
Các hình ảnh hỗ trợ cho mẫu (thường là hình nền của các div) có thể để trong thư mục css/theme/images
Sau khi giao diện hoàn thiện, liên hệ với quản trị qua email nguyenphuquang@gmail.com hoặc nick chat Yahoo phuquang_2000 để chỉnh sửa, hoàn thiện và đưa vào sử dụng
Khuyến cáo
Theo kinh nghiệm làm giao diện của Ban quản trị, các thành viên nên:
Người làm giao diện phải có kinh nghiệm về stylesheet
Sử dụng Macromedia Dreamwaver để soạn thảo các file css
Sử dụng các công cụ hỗ trợ như Firebug của Firefox để tìm hiểu về stylesheet của các khối trong giao diện.