My Blog ! Blog cá nhân của AnhThien8

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).
Bạn tải bản dùng thử của Artisteer 2.4 tại  đây (dung lượng 76,21MB).  Phiên bản kèm crack
Trên màn hình khởi động, bạn chọn Try Standard Edition, rồi  chọn mã nguồn để tạo template.

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:

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

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.

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,…

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!

_________________________________________
Viết Bởi: anhthien8
Đăng trên: My Blog ! Blog cá nhân của AnhThien8

Mọi thông tin phát hành từ My Blog ! Blog cá nhân của AnhThien8 xin vui lòng ghi rõ nguồn gốc