Với sự trợ giúp của Artisteer, thiết kế giao diện cho WordPress, Joomla, Blogger chỉ là “chuyện nhỏ”.
Điểm đặc biệt của Artisteer: hỗ trợ thiết kế giao diện cho dịch vụ Blogger, giao diện HTML và bốn CMS thông dụng hiện nay (Joomla, WordPress, Drupal, DotNetNuke).
 | Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 810x566. |
Trong bài này, người viết xin hướng dẫn cách thiết kế giao diện cho WordPress. Với các mã nguồn khác, bạn thực hiện gần như tương tự, chỉ khác ở một vài thành phần đặc trưng.
Giao diện của Artisteer được thiết kế theo phong cách của Office 2007, với các thẻ sau:
| Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 1024x739. |
Layout
Để thay đổi cách bố trí giữa hai thành phần menu ngang và header, bạn bấm mục Page Layout và chọn lại cách sắp xếp lại vị trí của chúng. Mặc định, giao diện tạo ra chỉ có hai cột. Bạn bấm Columns để thay đổi số cột và vị trí sắp xếp của các cột (ví dụ kiểu theme ba cột với hai sidebar được bố trí hai bên,…). Để thay đổi kích thước của từng cột, bạn bấm chọn Width Options rồi tùy chính tỷ lệ cho phù hợp.
Đối với WordPress thì trong thẻ Layout sẽ có thêm các mục như Vertical Menu Position (vị trí đặt menu dọc), Search Position (vị trí khung tìm kiếm), Categories Position (bảng danh mục blog), Archive Position (vị trí hộp lưu trữ), Blogroll Position (vị trí khung liên kết website). Bạn bấm vào từng mục để thay đổi vị trí cho từng thành phần trên.
Background
Tại thẻ Background có nhiều tùy chọn để bạn trang trí cho ảnh nền như: Image or Texture (ảnh hoa văn), Gradient (cách phối màu nền),… Bạn bấm Fill Color để thay đổi màu sắc của nền, hoặc chọn From File và tìm chọn ảnh có sẵn máy tính làm hình nền cho web. Nếu muốn tùy chỉnh lại các thông số như độ trong suốt hay vị trí ảnh nền, bạn chọn Options.
Sheet
Sheet là khung chứa toàn bộ nội dung của website (đặt bên trên background). Bạn có thể thay đổi kích thước khung thông qua mục Width và độ bo tròn của sheet tại mục Radius, thiết lập độ trong suốt và màu sắc của sheet trong mục Transparency và Fill Color. Mục Top Offset quy định khoảng cách từ đầu website đến sheet. Sau mỗi lần thao tác, bạn có thể xem sự thay đổi của giao diện ngay trong màn hình làm việc của Artisteer.
Header
| Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 1039x477. |
Tại khung Background, bạn bấm nút để chọn một mẫu có sẵn làm banner cho web, hoặc chọn From File để sử dụng ảnh trong máy tính. Ngoài ra, bạn có thể chèn thêm hoa văn vào banner bằng cách bấm Effects > Texture. Để thêm màu sắc cho banner, bạn chọn thêm ảnh minh họa nhỏ đặt trên banner thông qua khung Foreground, rồi áp dụng hiệu ứng cho chúng tại mục Effects, bấm Position để thay đổi kích thước ảnh. Tại hai dòng Headline và Slogan, bạn điền mô tả và slogan của website. Đặc biệt, tại khung Flash, chương trình cung cấp thêm các mẫu banner dạng flash rất sinh động. Nếu không thích flash có sẵn, bạn bấm From File và tìm chọn file flash do bạn tự thiết kế.
Menu, Vertical Menu
Thẻ Menu giúp bạn thay đổi lại màu sắc, hình dáng của thanh menu nằm ngang. Bạn bấm vào mục Styling để chọn một kiểu cho menu, sau đó chuyển qua khung Menu Bar để thay đổi màu sắc cho toàn thanh menu. Tại khung Item, bạn chọn màu sắc cũng như hiệu ứng khi rê chuột vào từng mục trong menu. Tương tự, mục Subitem chứa các thiết lập cho các mục menu con. Bạn bấm vào biểu tượng Subitem > Levels và chọn No Subitems (menu không xổ xuống) tại khung hiện ra, hoặc Multilevel (khi rê chuột vào mục, các menu con sẽ xổ xuống từ menu lớn).
Tương tự, thẻ Vertical Menu hỗ trợ tạo thanh menu dọc cho web với nhiều mẫu và cách phân cấp menu con rất chuyên nghiệp.
| Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 823x503. |
Articles
Thẻ Articles cho phép bạn trang trí mọi thứ cho bài viết trên web, từ font, màu sắc chữ cho đến các chi tiết nhỏ như biểu tượng thẻ Quote, biểu tượng người viết bài, khung Comment,…
| Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 881x542. |
Sidebar
Tùy theo giao diện mà bạn chọn, một website sẽ có một đến hai thanh Sidebar. Trên sidebar chứa các thành phần nhỏ như menu, khung tìm kiếm, các khung cập nhật bài viết, nhận xét mới (các thành phần này được gọi chung là block). Bạn bấm mục Header để chỉnh lại màu sắc cho phần trên cùng của block, chèn thêm các Icon cũng như áp dụng các hiệu ứng màu sắc cho đẹp mắt hơn. Tương tự, bấm Content để chọn màu nền, các kiểu hoa văn trang trí cho block.
Buttons
Nút bấm cũng là một chi tiết khá quan trọng trên web, giúp người xem truy cập vào nhiều nội dung được cung cấp. Bạn chọn lựa mẫu nút bấm, rồi thay đổi màu sắc, kích thước sao cho phù hợp với tổng thể giao diện web.
Footer
Với thẻ Footer, bạn dễ dàng tùy biến phần thông tin ở cuối website gồm: màu sắc, hyperlink, biểu tượng RSS.
Colors & Fonts
Sau khi đã chọn các thành phần trên, bạn chuyển sang thẻ Colors & Fonts > chọn Color Themes. Tại đây, bạn chọn một mảng màu gồm ba màu chủ đạo cho website. Bạn cũng có thể tự chọn ba màu tại khung bên cạnh. Xong, bấm nút Adjust để xem các mảng màu tương tự.
Nếu không muốn chỉnh sửa nhiều, bạn chọn thẻ Ideas, rồi bấm Suggest Design. Chương trình sẽ tự động tạo cho bạn một theme đồng bộ về màu sắc.
Tương tự, bạn bấm Suggest Layout, Suggest Sheet,… để chương trình tự động tạo ra thành phần mình muốn.
Sau khi đã hoàn tất, tại thẻ Ideas, bạn chọn Export để xuất theme ra thành một thư mục, rồi chọn Export Options… để đặt tên cũng như mô tả về giao diện.
Lưu ý: Với dịch vụ Blogger, sau khi tạo xong giao diện, bạn chỉ cần nhập tên truy cập và mật khẩu, Artisteer sẽ tự động liên kết đến blog và thay đổi giao diện mới giúp bạn. Quá tiện!
P.T
Link Download
www.mediafire.com/?e448a5u58tn2xve
