Trang chủ > Blog, Drupal, Joomla > Tự thiết kế giao diện cho Joomla với Artisteer

Tự thiết kế giao diện cho Joomla với Artisteer

Nếu bạn chưa thích giao diện của Blogspot, Joomla, WordPress hay Drupal của mình thì với sự trợ giúp của phần mềm 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). hoặc Phiên bản kèm bẻ khóa
Trên màn hình khởi động, bạn chọn Try Standard Edition (nếu bạn chọn bản ko bẻ khóa), 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ọnWidth 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ụcTransparency 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 LayoutSuggest 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!

Chuyên mục:Blog, Drupal, Joomla
  1. qngnht
    08/01/2011 lúc 12:22

    có vẻ hay đây, để thử xem thế nào “D , cám ơn bạn

  2. 29/04/2011 lúc 09:29

    Thank bạn nhé

  3. 13/06/2011 lúc 16:41

    cám ơn bạn nhiều nhé

  4. 19/08/2011 lúc 03:47

    vui lòng hướng dẫn mình cách chuyển từ artisteer sang wordpress, sao trong phần thiết kế artisteer khi mình save thì được báo câu lệnh, không được phép save? help me thanks

  5. 22/10/2011 lúc 04:29

    để mình thử xem sao

  6. 05/11/2011 lúc 01:15

    rat hay.thanks

  7. phuc
    04/06/2012 lúc 10:22

    lam sao koa the lay code tu arissteer dem vao 1 ct lap trinh web

  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: