Tin tức

Cách sử dụng phần mềm thiết kế web Xsite Pro

25/10/2012

Hướng dẫn sử dụng phần mềm thiết kế web Xsite Pro dành cho những người không chuyên.

Phần mềm thiết kế web XSite Pro cung cấp cho người dùng nhiều công cụ thiết kế web chuyên nghiệp như trình soạn thảo nội dung WYSIWYG, tạo và chỉnh sửa thanh điều hướng, chèn mã quảng cáo, tạo sơ đồ website (Sitemap), kiểm tra trang và tối ưu hóa bộ máy tìm kiếm (SEO) cho website… Phần mềm thiết kế web XSite Pro có cách sử dụng khá đơn giản, hướng dẫn theo từng bước, nhờ đó, bạn sẽ không cần tốn nhiều thời gian và vất vả trong việc tìm học các ngôn ngữ lập trình phức tạp nữa.

Phần mềm thiết kế web XSite Pro 2.5 có dung lượng cài đặt 50,7 MB, tương thích tốt với các hệ điều hành Windows, tải tại địa chỉ: http://www.mediafire.com/?bt9n0l5t8w7mk0v.

Ngoài ra, bạn cần tải thêm các thành phần tích hợp để làm cho phần mềm hiết kế web XSite Pro đầy đủ tính năng hơn, gồm có: gói giao diện mẫu, gói tiện ích trợ giúp, với dung lượng 262 MB, tải tại trang chủ: http://www.xsitepro.com/download- xsitepro- resources.html.

Bây giờ, bạn có thể bắt tay vào thiết kế website theo các gợi ý sau.

1. Tạo dự án mới

Khi vào giao diện chính của chương trình, bạn bấm nút Add Project bên dưới thanh công cụ để tạo một dự án mới. Trong cửa sổ hiện ra, bạn điền thông tin vào các khung: Project Title – tên dự án, Keyword(s) – từ khóa, Description – mô tả về dự án, bấm OK. Thông tin dự án được hiển thị ngay trong cửa sổ của Xsite Pro, bên trái là danh sách dự án và bên phải là thông tin chi tiết.

2. Tạo trang mới và chỉnh sửa thông tin trang

Để tạo một trang mới cho dự án, bạn bấm vào dự án rồi bấm Add Web site, chọn một kiểu trang ở hộp thoại hiện ra. Nếu chọn kiểu trang Blank Website thì bạn nhập vào các thông tin Website Title – tiêu đề trang, Website Slogan – câu khẩu hiệu của website, Keywords – từ khóa (mặc định là từ khóa của dự án), Description – mô tả ngắn về trang web, bấm OK. Còn đối với các lựa chọn kiểu trang khác, bạn kéo thanh trượt ở bên trái để tìm một mẫu website vừa ý, bấm vào hình thu nhỏ để hiển thị ảnh lớn hơn ở khung xem trước bên phải, bấm OK, rồi cũng điền vào các thông tin cơ bản như trên.

Trong thẻ Web Site information, bạn có thể thay đổi các thông tin trang đã tạo như Website Title, Website Slogan, Keywords, Description và Other Notes. Khi xong, bạn bấm Save để lưu lại các thay đổi.

3. Thiết kế giao diện

Đây là bước khá quan trọng trong quá trình thiết kế website, bạn sử dụng các công cụ trong thẻ Page Layout để bố trí, sắp xếp các khung nội dung trên trang, thiết lập giao diện. Các vị trí cần thiết kế là Page Margins – viền ngoài của trang, Header Panel – phần đầu của trang, Info bar – thanh thông tin nằm dưới Header Panel, Left Panel – khung bên trái, Right Panel- khung bên phải, Main Panel Header- phía trên phần nội dung chính, Main Panel – phần nội dung chính, Main Panel Footer – phía dưới phần nội dung chính, Page Footer – phần chân trang.
Ví dụ, muốn thiết kế vị trí Header Panel thì bạn thiết lập Color – màu nền, Image – hình nền và các thông số trong hai mục Basic Header, Advanced Header. Đặc biệt, phần mềm thiết kế web XSite Pro còn cung cấp một công cụ khá mạnh Designer giúp cho việc thiết kế được nhanh chóng và dễ dàng hơn. Thẻ Design của tính năng này trang bị đầy đủ các công cụ soạn thảo văn bản như sao chép, dán, canh lề, chèn hình ảnh, chèn tập tin đa phương tiện, chèn bảng, chọn font chữ, màu chữ, chèn dạng tin RSS Feed, chèn quảng cáo Google Adsense… Bên cạnh đó, nếu thành thạo về ngôn ngữ HTML thì bạn sử dụng thẻ Source để nhập nội dung. Thẻ Preview giúp xem trước kết quả của quá trình thiết kế.

Đối với một số vị trí có thiết lập thanh điều hướng (Navigation Menu), bạn cần đánh dấu chọn vào ô Include Links rồi bấm nút Menu Settings. Trong hộp thoại hiện ra, bạn chọn một kiểu hiệu ứng dành cho menu ở khung Style Selection, có hai dạng Dynamic – menu động, Static – menu tĩnh, bấm Next. Đến bước 3, bạn thay đổi các tùy chọn: Menu Option Spacing – khoảng cách giữ các menu, Menu Background – ảnh nền của menu và menu con và thiết lập về màu sắc, font chữ trên menu, màu sắc sau khi đã bấm chuột lên menu, khi đưa trỏ chuột đến menu, bấm Next, bấm Finish.

4. Tạo hệ thống trang

Khi đã thiết kế xong giao diện website ở thẻ Page Layout, bạn cần tạo ra hệ thống các trang con, kết hợp với tạo sơ đồ web để giúp người xem định hướng được hoạt động của họ trên website. Để thêm trang mới, bạn bấm nút Add Page ở thẻ Web Pages và điền vào các thông tin Page Title – tiêu đề trang, Keywords, Description. Riêng đối với hai khung Menu Settings và Sitemap Settings, bạn đánh dấu chọn vào ô Show on Info Bar – hiển thị trên thanh thông tin, Show on Page Footer – hiển thị liên kết ở chân trang, Show on Sitemap – hiển thị ở trong sơ đồ web, bấm Create.

Trang mới được tạo ra sẽ nằm trong danh sách bên trái, bên phải hiển thị thông tin chi tiết của trang, với các thẻ Page Settings – thiết lập trang, Design – nhập nội dung trang (được sử dụng trình soạn thảo nội dung WYSIWYG), Source – chỉnh sửa trang dựa vào mã HTML và Page Analysis – phân tích nội dung trang. Nếu muốn kiểm tra mức độ thân thiện của các thành phần trên trang đối với các công cụ tìm kiếm thì bạn cần khai thác triệt để tính năng Page Analysis. Bốn khung: Search Engine Optimization Summary, Page Components Summary, Readability Summary, Accessibility cung cấp cho bạn cái nhìn tổng thể về điểm mạnh, điểm yếu của trang hiện tại. Từ đó, bạn hãy làm theo định hướng của chương trình để cải thiện chỉ số xếp hạng trên công cụ tìm kiếm, giúp khách truy cập dễ dàng tìm thấy nội dung trên trang web.

Ngoài việc có thể thay đổi những thông tin đã tạo, tính năng Advanced Settings còn giúp thêm một số thiết lập nâng cao. Hộp thoại Advanced Page Settings gồm có các thẻ Page Layout (giúp lựa chọn mẫu giao diện), Scheduling (chọn thời gian hiển thị trang), Scripts (thêm vào mã JavaScript), Events (thêm vào các sự kiện Onload và OnUpload để kích hoạt mã JavaScript), Robots (thiết lập sử dụng tập tin robots.txt).

5. Các thiết lập khác

- Tạo sơ đồ website:

Ở thẻ Other, bạn bấm vào nút Site Maps rồi thay đổi các tùy chọn ở hộp thoại hiện ra. Bước (Step) 1 – Select, bạn có thể chọn hai kiểu sơ đồ website Alphabetical (sắp xếp theo thứ tự A, B, C), Base on the Page Order from the Web Pages Tab (sắp xếp theo thứ bậc trang ở thẻ Web Pages). Bước (Step) 2 – Style, bạn nhập thông tin tiêu đề vào các ô của khung Site Maps Title, chọn cách hiển thị tiêu đề trang ở khung Page Title, chọn chế độ hiển thị phần chú thích trang ở khung Page Description.

- Cấu hình website:

Tính năng Web Site Settings giúp cấu hình hệ thống website trước khi đưa vào hoạt động trên Internet. Thẻ Page Titles Setting giúp thiết lập cách chèn tên website vào tiêu đề của từng trang (Start – phía trước, End – phía sau), chọn Use only the Web site title for the homepage để chỉ hiển thị tên website ở trang chủ, chọn ký tự ngăn cách ở ô Separate title with. Thẻ File Naming Settings giúp quy định File Extension (phần mở rộng phía sau địa chỉ URL), Convert Filenames to Lowercase (chuyển các ký tự in hoa thành in thường trong địa chỉ liên kết). Thẻ Folder Settings giúp tạo các thư mục lưu trữ định dạng âm thanh, hình ảnh, video, tập tin Scripts.

Ngoài ra, thẻ Other còn có nhiều thiết lập khác như tạo pop up quảng cáo, tạo liên kết đến trang khác, hướng dẫn đăng ký sơ đồ website với bộ máy tìm kiếm Google, tạo khung tìm kiếm… Bạn có thể tự mình khám phá những tính năng hữu ích này.

6. Đưa website lên hosting

Sau khi đã hoàn thành công đoạn thiết kế, bạn bấm nút Preview ở góc phải cửa sổ để kiểm tra thành quả. Nếu không phát hiện gì sai sót, bạn bấm vào thẻ Publishing Details rồi điền vào các thông số: Domain name – tên miền, Home Directory – thư mục trên hosting (ví dụ publish_html), FTP Server – địa chỉ FTP (ví dụ ftp.tonghop24.tk), FTP Directory – thư mục trên hosting, FTP Username – tên tài khoản, FTP Password – mật khẩu đăng nhập hosting. Để kiểm tra tính chính xác của các thông số đã nhập, bạn bấm nút Test FTP Connection và bấm OK ở hộp thoại FTP Connection Success nếu kết nối thành công. Cuối cùng, bấm nút Publish My Web Site để đưa toàn bộ website lên hosting.

Hy vọng với bài viết hướng dẫn sử dụng phần mềm thiết kế web Xsite Pro sẽ giúp bạn hoạn thiện website tốt hơn.