Chọn Theme cho site
Vào Site Administration bề ngoài Lựa chọn bộ màu giao diện. Một danh sách các màu nền được hiển thị như hình 5.1. Chọn nền Clouds và click “Lựa chọn” giao diện được thiết đặt. Click “tiếp tục” để hoàn tất việc cài đặt nền.
Hình 5.1: Hiển thị danh sách các màu nền
Chỉnh sửa font chữ, kích thước, màu chữ, cho các thành phần của site
Theo đường dẫn C:\AppServ\www\Moodle\theme\Clouds ta thấy các file định dạng styles của site (styles_fonts.css, styles_color.php, styles_layout.php, styles_moz.php, styles_tabs.php) chúng được tổ chức thành các phần: core, header, footer, admin, blocks, calendar, course, doc, grades, login, message, tabs, user, các module. Ở đây tôi chỉ trình bày một số thay đổi nhỏ trong một số thành phần của Website.
Để thay đổi các thuộc tính như kiểu chữ, kích thước của các thành phần đó ta tìm đến file styles_fonts.css. Ở đây tôi có một số thay đổi sau:
- Sửa font chữ, kích thước cho các phần body, td, th, li của toàn site:
body, td, th, li {
font-family:Arial, Verdana, Helvetica, sans-serif; font-size:95%;
letter-spacing:0.02em; }
- Vào khối phần header của file rồi chỉnh cỡ chữ cho thông tin login và tiêu đề chính của site như sau:
.logininfo,
#header-home .headermenu font { font-size:0.9em;
#header-home .headermain { font-size:1.5em;
}
Để thay đổi màu của các phần ta vào file styles_color.php. Sau đây ta sẽ đổi màu của các liên kết khi có chuột di chuyển tới với đoạn mã:
a: hover {
color:#CC3399; }
Thiết lập hiển thị trang chính
Vào Site Administration Bề ngoài Trang chính. Các thông số được thiết lập như sau:
- Tên Site đầy đủ: Chào mừng bạn đến với Website Elearning Khoa CNTT
- Tên Site rút gọn: Elearning
- Phần mô tả trang đầu:
“Để hiển thị thông tin một cách chính xác, phải dùng trình duyệt Internet Explorer 6 trở lên, chọn Encoding ở chế độ Unicode(utf-8) và độ phân giải màn hình từ 800x600 trở lên. Để gõ được tiếng Việt, phải dùng bộ gõ hỗ trợ Unicode như VietKey, UniKey...”
- Trang chính: Hiện các mục tin tức
- Trang chính khi đã đăng nhập: Hiện các khoá học
- Số mục tin tức để hiện: 3
- Số khoá học ở mỗi trang: 10
Để kết thúc ta click “Lưu lại các thay đổi ”
Chỉnh sửa Header
Copy 2 ảnh đã tạo sẵn logo.jpg và title.gif vào thư mục pix theo đường dẫn C:\AppServ\www\Moodle\theme\Clouds
Tìm đến file Header.html theo đường dẫn C:\AppServ\www\Moodle\theme\Clouds. Mở bằng trình soạn thảo Macromedia Dreamweaver 8 hay Front page thay đoạn mã tương ứng với phần trên cùng bên trái của trang (nơi thường đặt logo):
<img src="<?php echo "$CFG->wwwroot/theme/$CFG->theme" ? >/pix/header_left_bg.jpg">
</td>
Bằng đoạn mã sau để tạo logo và tiêu đề mới:
<td width="334">
<img src="<?php echo "$CFG->wwwroot/theme/$CFG->theme" ? >/pix/logo.bmp" width="118" height="124" />
<img src="<?php echo "$CFG->wwwroot/theme/$CFG->theme" ? >/pix/header.gif" width="211" height="107" />
</td>
Hearder sau khi chỉnh sửa có dạng như hình 5.2:
Hình 5.2: Header mới