Thiết kế website thật dễ dàng với Incommedia Website X5

Lưu ý,  nếu muốn các menu của web hiển thị ở phía dưới trang thì đánh kiểm vào ô Show first level menu at the bottom of the page.

            -Choose Template Style: Kế đến, bạn cần lựa chọn một trong hai dạng Custom Template hoặc Default Template để xây dựng mẫu của website.

Đối với dạng Custom Template, bạn sẽ được tự tay thiết kế một mẫu web mang phong cách cá nhân bằng cách chọn từng mục ở Model Layout. Ở mục Title Bar (thanh tiêu đề) giúp thay đổi màu nền (Color), chèn hình nền (Image), kiểu lặp lại hình nền (Repeat), kiểu canh chỉnh (Alignment) và kích thước của thanh tiêu đề (Width-bề rộng, Height-bề cao). Các việc làm này cũng thực hiện tương tự đối Page Contents (nội dung trang) và Footer (phần chân trang).

Còn đối với dạng Default Template,  Incomedia WebsiteX5 sẽ cung cấp cho bạn một thư viện gồm nhiều mẫu website đã được thiết kế sẵn, thuộc nhiều chủ đề như: Abstract, Geometry, Company, Nature, Themes, Animated, Interior Design, Panorama,… Bạn nhấn vào từng mẫu của từng chủ đề để tiến hành lựa chọn, nếu cần tối ưu màu sắc của mẫu thì kéo thanh trượt ở mục Color Customization.

             -Edit Template Graphic:  Ở đây, bạn có thể chỉnh sửa giao diện mẫu trang web theo ý thích bằng các công cụ mà chương trình cung cấp. Trong đó có Insert Text ( <!--[if !vml]-->)-chèn vào văn bản, Insert Image ( <!--[if !vml]--><!--[endif]-->)-chèn hình ảnh, Insert Flash Animation ( <!--[if !vml]--><!--[endif]-->)-chèn hiệu ứng Flash, Insert Slideshow ( <!--[if !vml]--><!--[endif]-->)-chèn bài trình diễn, Insert Search Field ( <!--[if !vml]--><!--[endif]-->)-chèn trường tìm kiếm, Insert HTML Code ( <!--[if !vml]--><!--[endif]-->)-chèn ngôn ngữ HTML. Ở thẻ Header, bạn chọn các yếu tố về Background Properties (hình nền), Text Properties (đoạn văn ngắn-bạn có thể chọn thêm hiệu ứng cho chữ, cỡ chữ, Insert Flash Animation (chèn các Flash động) và cũng thực hiện tương tự đối với thẻ Footer.

Bước 2: Plan Website-Tạo sơ đồ website

 

            Việc tạo sơ đồ web giúp cho trang web của bạn có khoa học hơn, giúp cho người truy cập hiểu được các tiêu đề và định hướng được hoạt động của họ trên trang web. Ở đây, việc tạo sơ đồ cũng giống như việc tạo cây thư mục trong Windows Explorer, tức là bạn chọn vào Menu rồi nhấn New Level để tạo ra menu chính rồi lần lượt tạo các menu thứ cấp (hoặc tạo ra các trang thuộc menu) bằng cách nhấn vào menu chính tương ứng rồi chọn New Level (hoặc New Page). Lưu ý, bạn không nên viết các menu bằng tiếng Việt có dấu tại đây bởi vì không hiển thị được nhưng đến bước 4 thì bạn sẽ nhập được tiếng Việt, sau khi tạo xong rồi nhấn Next.

Bước 3: Create Pages-Xây dựng nội dung web

Đây là một bước tương đối quan trọng nó quyết định chất lượng của website mà bạn tạo ra. Bạn tiến hành soạn thảo trang web bằng cách kéo thả (drag and drop), tức là bạn nắm giữ chuột kéo các đối tượng ở khung Object bên phải vào khung bên trái.

Ở khung này, bạn sẽ nhìn thấy các công cụ: Object Content ( <!--[if !vml]--><!--[endif]-->)-thêm nội dung cho đối tượng, Cell Format ()-định dạng cho ô khi đối tượng được chèn nội dung, Alignment ( <!--[if !vml]--><!--[endif]-->)-điều chỉnh đối tượng, Enlarge by one row ( <!--[if !vml]--><!--[endif]-->) – phóng to một hàng, Add a new row ( <!--[if !vml]--><!--[endif]-->)-thêm hàng mới, tối đa là 28 hàng, Add a new column ( <!--[if !vml]--><!--[endif]-->)-thêm cột mới, tối đa là 6 cột. Các đối tượng chính gồm có:

-Text: là nơi bạn nhập vào văn bản, chỉnh sửa các văn bản, thay đổi màu sắc, font chữ, chèn hình ảnh (Insert Image), chèn công thức toán học (Insert Equation), chèn các đoạn mã HTML (Enable HTML code),…khi xong nhấn OK để hoàn tất.

          -Image: giúp chèn các hình ảnh vào web, bên cạnh đó ở tính năng này còn cung cấp cho bạn một số công cụ chỉnh sửa hình ảnh. Ở thẻ General, bạn chọn đường dẫn đến tập tin ảnh ở ô Image File và lưu ý đến mục Save Options giúp tối hình ảnh sang định dạng JPG (JPG quality, Resample Method). Trong cửa sổ Preview bên phải, bạn nhấn vào nút Edit để cắt, thêm hiệu ứng, bộ lọc, thêm khung cho hình ảnh. Còn thẻ Display giúp tự động thay đổi kích thước ảnh (Automatically Resize Image), phóng to hình ảnh (Image Zoom).

-Table: chèn các loại bảng với đầy đủ văn bản, hình ảnh, công thức.

-Flash Animation: đưa các dạng Flash động vào web, bạn nhấn vào nút Select tại Local File để duyệt đến tập tin trên ổ cứng hoặc nhập vào đường dẫn đến tập tin flash trên Internet tại Internet File.

Ngoài ra, còn nhiều đối tượng khác như: Video/Sound, Image Gallery-thư viện ảnh, Slide Show-album ảnh, Email Form-Email liên lạc với bạn, HTML Code-nhập mã HTML, Product List-danh sách sản phẩm.

Sau khi thiết kế cho trang chủ xong, bạn tiếp tục nhấn Next để thiết kế cho các trang khác cũng bằng những đối tượng và công cụ nêu trên.

Bước 4: Advanced Settings-Những thiết lập nâng cao

            Ở bước này giúp cho website của bạn mang một giao diện với phong cách chuyên nghiệp. Bạn có thể tùy thích thêm bớt các tính năng cũng như chỉnh sửa giao diện trang web. Trong số những thiết lập nâng cao này bạn cần lưu ý các  mục quan trọng:

            -Main Menu: Gồm có bốn thẻ tính năng: General, Text, Graphic, 3D Style giúp thay đổi các thiết lập mặc định của các menu chính. Ở thẻ General, bạn đánh dấu kiểm vào Create button as image để tạo các nút dạng 3D (khi đó thẻ 3D Style mới hiện ra) và có thể tăng hay giảm độ rộng menu (Width), khoảng cách giữa chữ và viền (Inner Margin), khoảng cách giữa các nút (Outer Margin). Kế đến thẻ Text, giúp thay đổi font và cỡ chữ (Font), kiểu font (Font Style), điều chỉnh vị trí chữ (Alignment). Lưu ý, để viết tiếng Việt cho menu bạn cần chọn các font chữ VNI và phù hợp với bảng mã, kiểu gõ. Thẻ Graphic, bạn bấm vào các nút màu tương ứng để thay đổi về màu nền của menu (Background Color), màu nền menu khi đưa chuột đến (Background Color on Mouse Over), màu chữ (Text Color), màu chữ khi đưa chuột đến (Text Color on Mouse Over),…Ở thẻ 3D Style giúp tăng thêm các hiệu ứng đẹp mắt cho menu.