Giáo trình Xara Webstyle

Xara WebStyle là một trong những công cụ hổ trợ đồ hoạ tuyệt vời để thiếtkế các trang Web của bạn trên nền FrontPage hay Dreamweaver.. Tập sách nhỏ này cố gắng xin giới thiệu với các bạn

NỘI DUNG

Chương 1 Giới Thiệu Về Xara Webstyle Trang

03

Chương 2 Cài đặt xara webstyle ver 3.0 Trang08

Chương 3 Các chức năng chính Trang

09

Chương 4 CÁC THÀNH PHẦN TRONG Xara WebStyle Trag 15

2  Nguyễn Tấn Long

Lời đầu sách

Đến với thông tin, với kho tàng kiến thức nhân loại ngày nay đã trở thànhmột điều đơn giản Chỉ với một cú “nhấp” chuột bạn có thể tìm kiếm cho mìnhnhững thông tin cần thiết Cơ hội học hỏi ngày càng tốt và nhanh hơn với một tầmcao mới Các trang Web hổ trợ thông tin ngày càng đa dạng và đẹp mắt, thông tinđầy đủ hơn Việc thiết kế các trang Web trở nên dễ dàng với nhiều công cụ hổtrợ

Xara WebStyle là một trong những công cụ hổ trợ đồ hoạ tuyệt vời để thiếtkế các trang Web của bạn trên nền FrontPage hay Dreamweaver Bạn có thể tạo

ra các thanh tiêu đề, các bảng chọn lệnh, các tiêu đề 3D v.v… thật bắt mắt vớingười xem dù chỉ lướt qua trang Web của bạn cũng để lại ít nhiều ấn tượng Tấtnhiên việc thiết kế các trang Web của bạn còn phụ thuộc vào không ít nhiều yếutố khác nữa

Bên cạnh việc hổ trợ việc thiết kế các trang Web Xara WebStyle còn tạo

ra các mẫu đồ họa cho phép bạn đưa vào các chương trình soạn thảo ứng dụng,các chương trình có khả năng trình chiếu (Show) như PowerPoint, Flash haySWF’n Slide…

Cũng không có nhiều thay đổi từ Xara WebStyle version 3.0 đến XaraWebStyle version 4.0 Các chủ đề mẫu (Templates Themes) trong version 4.0 hổtrợ nhiều và đẹp mắt hơn Tuy nhiên các chức năng vẫn không có gì thay đổi

Tập sách nhỏ này cố gắng xin giới thiệu với các bạn một cách đầy đủ nhấtvề các chức năng cùng các bài tập trong từng chương, mong muốn đem lại cho cácbạn một cách khái quát và đầy đủ về ứng dụng Xara WebStyle

Không trình bày theo các đề mục, nội dung được trình bày theo từng chươngdành cho từng chủ đề Có lẽ cũng không có gì quá khó khăn để các bạn theo dõi

Với một tập sách nhỏ, chắc chắn còn nhiều hạn chế và thiếu sót, rất mongsự đánh giá và góp ý của các bạn Chúc các bạn thành công! Xin chân thành cảmơn!

Mọi đóng góp và hổ trợ xin liên hệ:

Nguyễn Tấn Long Trung Tâm GDTX Krông Năng-ĐăkLăk

ĐT: 0979178268

Chương 1

Giới Thiệu Về Xara Webstyle

Nhóm hổ trợ các hiệu ứng và xử lý đồ hoạ của hãng phần mềm Xara gồmcó: Xara Webstyle, Xara3D, Xara X,…

Xara WebStyle là một chương trình ứng dụng hổ trợ tạo ra các file đồ hoạ(Graphic) dùng để thiết kế WebSite bằng công cụ Dreamweaver và FrontPagechạy dưới môi trường Windows

Giao diện khởi động Xara WebStyle version 3.0

4  Nguyễn Tấn Long

Các đối tượng trong Xara WebStyle bao gồm:

Backgrounds: Ảnh nền

BannerAds: Thanh tiêu đề

Bullets: Chỉ mục

Buttons: Nút nhấn

Dividers: Đường phân cách

3Dheadings(Headings): Tiêu đề 3 chiều

Logos: Mẫu Logo

NavBars&Menus: Bảng chọn lệnh

Photos: Ảnh đồ hoạ

Theme Sets: Chủ đề mẫu

Các đối tượng chính trong Xara WebStyle.

Các đối tượng được tạo ra từ các Templates được lưu giữ lại cho các lầndùng kế tiếp Nếu muốn các bạn lưu lại các đối tượng này giống như cácTemplates mẫu

Một đối tượng trong Xara Webstyle bao gồm:

• Text: Văn bản trên đối tượng

• Color: Màu sắc cho đối tượng

• Texture: Màu nền mẫu cho đối tượng

• Bevel: Độ bóng của đối tượng (cạnh vác)

• Shadow: Bóng đổ

• Size: Kích thước của đối tượng

Chú ý: Cách bài trí phối màu và định dạng con chữ phụ thuộc nhiều vàoyếu tố thẩm mỹ của từng người dùng

Ngoài các đối tượng mẫu từ bộ cài đặt, các bạn có thể nhập (Import) cácđối tượng đồ hoạ từ các ứng dụng khác dưới Windows tạo ra các mẫu mới

Chức năng Revert trả về dạng mẫu ban đầu của đối tượng trước khi thay đổicác hiển thị

Xara WebStyle cho phép xuất các đối tượng đồ hoạ dưới dạng các file:

*.GIF (GIF tĩnh và GIF Animation động), JPG ở chế độ tối đa 256 màu, PNG ởchế độ tối đa 32 bits màu

Chức năng Transparent cho phép xuất các đối tượng sang chế độ trong suốtmàu nền

Có thể tải về và cập nhật phần mềm Xara tại địa chỉ: wwwxara.com

Tổ Hợp Phím Tắt Trong Xara WebStyle

6  Nguyễn Tấn Long

Phím (Tổ hợp phím) Chức năng

F1 Open this Help Mở chức năng trợ giúp

F2 Select Start Gọi chức năng khởi động.

F3 Select Design or Load Gọi chức năng thiết kế hoặc tải các đối tượngmẫu từ Website www.xara.comF4 Select Text or Import Gọi chức năng thay đổi kiểu văn bản hoặcchèn các đối tượng mới.F5 Select Color Gọi chức năng thiết lập màu sắc.

F6 Select Texture Gọi chức năng thiết lập màu nền mẫu.

F7 Select Bevel Gọi chức năng thiết lập độ bóng.

F8 Select Shadow Gọi chức năng tạo bóng đổ.

F9 Select Size Gọi chức năng thiết lập kích thước.

F10 Select NavBars&Menus Gọi chức năng tạo bảng chọn lệnh.

F12 Select Save Gọi hộp thoại lưu trữ

A BannerAds Mở các thanh tiêu đề mẫu.

B Buttons Mở các nút nhấn mẫu.

D Dividers Mở các đường ngăn cách mẫu.

G Backgrounds Mở các mẫu nền.

H Headings Mở các tiêu đề mẫu.

L Bullets Mở các đối tượng chỉ mục mẫu.

N NavBars&Menus Mở các bảng chọn lệnh mẫu.

O Logos Mở các Logo mẫu.

P Photos Mở các file đồ hoạ đã lưu.

T Theme Sets Mở các đối tượng mẫu theo chủ đề.

3 3Dheadings Mở các mẫu tiêu đề 3D mẫu.

CTRL+Z Revert Trả về định dạng ban đầu.

Câu Hỏi Ôn Tập Chương 1

Câu 1: Phần mềm Xara bao gồm các ứng dụng nào? Chức năng củaXara WebStyle?

Câu 2: Các dạng xuất của Xara WebStyle?

Câu 3: Thư mục mặc định lưu các file xuất của Xara WebStyle là thưmục nào?

Câu 4: Có thể xuất các đối tượng Xara WebStyle lên Internet đượckhông? Xara WebStyle hổ trợ đồ hoạ cho các ứng dụng thiết kế WebSitenào?

8  Nguyễn Tấn Long

Chương 2

CÀI ĐẶT Xara WebStyle VER 3.0

Chương 3

CÁC CHỨC NĂNG CHÍNH

Là chức năng dùng để khởi tạo các đối tượng mẫu trongXara WebStyle Khi làm việc với một chủ đề (Theme), các bạn có thể trở về hoặckhởi tạo một chủ đề mới bằng cách chọn nút lệnh Start trên màn hình giao diệnchính của Xara WebStyle (hoặc nhấn phím tắt F2)

Chức năng dùng để “tải” một đối tượng bạn đã tạo ratrước đó (Project) Hoặc hiển thị tất cả các đối tượng mẫu sẵn có (All) hay theomột chủ đề (Theme Sets) cần lựa chọn Các thay đổi trở nên dễ dàng và mauchóng hơn

 Nguyễn Tấn Long

Chức năng Import cho phép các bạn chèn các đối tượngkhông có trong mẫu Templates của bộ cài Xara WebStyle từ các ứng dụng đồ hoạdưới môi trường Windows Các bạn sẽ làm phong phú thêm bộ sưu tập của chínhmình

Hổ trợ cách trình duyệt các đối tượng Xara WebStyletheo chủ đề Cho phép các bạn xem và lựa chọn các đối tượng cần tạo theo mộtchủ đề yêu thích

Các bạn có thể xem các hướng dẫn chi tiết về XaraWebStyle tại mục Tutorial này, có rất nhiều lý thú và bổ ích Tuy nhiên đòi hỏibạn phải cần có một ít vốn liếng kha khá về Anh ngữ để nắm bắt được các vấnđề

Đôi dòng về phiên bản Xara WebStyle mà bạn đangdùng, địa chỉ trang chủ và hãng của ứng dụng đưa bạn ghé thăm trang chủ và cậpnhật phiên bản mới nhất từ địa chỉ này

Kết thúc phiên làm việc với Xara WebStyle bạn chọnmục này hay kích chuột vào biểu tượng Close trên thanh tiêu đề như bất kỳ mộtứng dụng chạy dưới nền Windows

Một khi bạn chọn một đối tượng bất kỳ theo một chủ đề, các chức năng hổtrợ tương ứng sẽ xuất hiện

Các đối tượng mẫu trong một trang được chọn theo chủ đề

Chức năng thiết kế hổ trợ các mẫu đồ hoạ theo chủ đềbạn chọn Các đối tượng mẫu trong từng chủ đề được chứa trong các trang (Page).Số lượng các trang nhiều hay ít trong mỗi chủ đề là khác nhau Khi các bạn tạo racác đối tượng mới trong một chủ đề Các đối tượng này được lưu lại và số trangtrong chủ đề đó cũng tăng lên

Chức năng

hiệu chỉnh phần văn

bản trong một đối

tượng: Kiểu Font chữ,

kích thước, cách hiển

thị với các đối tượng

khác,v.v…

 Nguyễn Tấn Long

Hiệu ứng thay đổi màu sắc chi tiết cho từng phần ápdụng trên đối tượng các bạn tạo ra

Ảnh nền (mặt nền) “Load” cho đối tượng được chọn.Ngoài các nền mẫu, các bạn dễ dàng thay đổi các ảnh nền khác theo ý muốn bằngcách chỉ ra đường dẫn đến tập tin cần tạo ảnh nền trên ổ đĩa

Chức năng thay đổi độ xiên, cạnh vác của một đốitượng Thường một điều các bạn hay nhầm lẫn giữa chức năng Bevel và chứcnăng Shadow của một đối tượng Tuy nhiên hai hiệu ứng này hoàn toàn khácnhau, bạn sẽ nhận ra điều đó trong các bài tập thực hành

Hiệu ứng tạo bóng đổ cho một đối tượng Có nhiều lựachọn với các kiểu dáng bóng đổ phù hợp cho từng đối tượng

Cho phép thay đổi kích thước của một đối tượng

Lưu ý: Kích thước của một đối tượng trong Xara WebStyle nói riêngvà trong các ứng dụng Web nói chung được đo bằng đơn vị Pixel

Hổ trợ xác lập các hiệu ứng cho thanh tiêu đề, cácthanh Menu ngang

Chương 4

Các THÀNH PHẦN trong

Xara WebStyle

Các đối tượng Backgrounds mẫu.

Đây là thành phần hổ trợ cho việc bạn tạo ra các ra các ảnh nền lý tưởngcho trang Web của bạn Từ các mẫu nền sẵn có với vài thao tác cơ bản như thayđổi màu sắc, kích thước của đối tượng là bạn đã tạo ra được mẫu mới

 Nguyễn Tấn Long

Nếu các mẫu sẵn có trong Templates không đáp ứng được yêu cầu của bạn,hãy dùng chức năng Import để chèn một file ảnh mới vào bộ sưu tập của mình

Chọn chức năng Import từ màn hình giao diện chính

Trong mục chọn Import from, chỉ ra đường dẫn đến với file ảnh cần chèn,chọn file ảnh cần chèn  chọn lệnh Import để chèn file ảnh vào bộ sưu tập mẫuTemplate của Xara WebStyle

Có nhiều chức năng giúp bạn hiệu chỉnh lại file ảnh vừa chèn theo mongmuốn

Đây là chức năng cho phép bạn hiệu chỉnh độ sáng tối(Brightness), sự bão hoà (Saturation), sự tương phản (Contrast), thay đổi độ bóngmờ (Blur Sharpen) và trạng thái (Tint) màu sắc của đối tượng

nền của file ảnh

Lưu ý: Khi gia tăng chỉ số Tranperent tiến dần đến 100 (từ 0% đến 100%)khi đó màu của file ảnh tiền dần về màu nền

Chức năng Rotate giúp bạn thay đổi hướng thể hiện của đối tượng bằngcách xoay đối tượng theo một góc chỉ định trong mục Angle

Chức năng Size&Crop cho phép bạn định dạng lại kích thước của file ảnh,chọn một phần hoặc một góc độ của file ảnh bằng cách cắt file ảnh theo lựa chọncủa chính bạn

Chọn chức năng Crop nếu muốn tác động lên phần đã chọn của File ảnh.Nếu muốn huỷ bỏ thao tác lựa chọn này, chọn nút lệnh Uncrop, File ảnh sẽtrả về kích thước và định dạng ban đầu

 Nguyễn Tấn Long

Một phần của File ảnh được chọn.

Một phần của đối tượng được cắt ra (Crop) từ file ảnh ban đầu.

Chọn nút lệnh Save để lưu lại đối tượng ảnh sau khiđược xử lý.

Có 3 lựa chọn dành cho bạn khi lưu lại một đối tượng đồ hoạ đã xử lý trongXara WebStyle : *.GIF (Graphic Image File-Ứng dụng file đồ hoạ dưới môitrường Windows); JPEG hay *.JPG (File Interchange Format-Các file ảnh đượctruy xuất dưới ứng dụng phần mềm Photoshop); *.PNG ( Format Graphics-các ứngdụng đồ hoạ-độ phân giải màu tối đa 32 bits màu)

 Nguyễn Tấn Long

Thành phần Thanh tiêu đề được chọn.

BannerAdr là thành phần giúp bạn tạo ra các thanh tiêu đề thật sống độngvà bắt mắt Một thành phần không thể thiếu để làm cho trang Web của bạn thêmphần sinh động

mang tên BannerGifAnimator có trong đĩa chương trình kèm theo bộ sách này, rấthay.

Từ màn hình giao diện chính, chọn thành phần BannerAdr để khởi tạo cácthanh tiêu đề mẫu

Chọn qua các trang để tìm kiếm đối tượng phù hợp với nhu cầu của bạn

Lưu ý: Hầu như các Templates mẫu ban đầu đều có phần văn bản (Text)mặc định, không phù hợp với nhu cầu của người dùng Tuy nhiên các bạn khôngnên quan tâm quá mức đến vấn đề này vì bạn có thể thay đổi lại chúng một cáchdễ dàng

 Nguyễn Tấn Long

Đối tượng được duyệt

Khi một đối tượng trong trang được duyệt đến sẽ được hiển thị tại màn hìnhchính

Ở đó bạn có thể thực hiện một số thao tác khi kích phải chuột tại màn hìnhchính

Một số chức năng áp dụng cho đối tượng mẫu trên màn hình chính

Copy bitmap to clipboard: Sao chép đối tượng mẫu và gởi vào bộ nhớ đệm.Đối tượng này được dán vào bất kỳ một chương trình nào có khả năng xử lý ảnhchạy dưới nền Windows

Chức năng Text áp dụng cho đối tượng được chọn

Trở lại vấn đề thay đổi nội dung phần văn bản trên đối tượng Bạn chọn vàonút lệnh Text trên màn hình giao diện chính để thay đổi các thành phần văn bảnmặc định trên đối tượng cho phù hợp

Lựa chọn phần văn bản cần hiệu chỉnh tại mục Select text to edit (chọnphần văn bản cần hiệu chỉnh)

Nhập lại nội dung hiệu chỉnh tại mục Edit text Trong mục Font chọn lạiFont chữ hổ trợ Tiếng Việt tương ứng với mã của bộ gõ VietKey trên máy bạnnếu muốn Điều chỉnh kích cỡ con chữ tại mục Size in point

Lưu ý: Các thanh tiêu đề mẫu có số lượng văn bản hổ trợ khác nhau Tuynhiên các bạn có thể sử dụng một phần trong số đó-các đối tượng khác không ápdụng trên đối tượng bạn muốn tạo ra, bạn huỷ bó bằng thao tác xoá phần văn bảnhổ trợ trên hoặc nhập trắng văn bản

 Nguyễn Tấn Long

Chức năng hiệu ứng màu đươc gọi

Một đối tượng đồ hoạ bắt mắt được người xem là một đối tượng mà trong nócó sự hài hoà về kiểu dáng, màu sắc, kích thước Trong đó quan trọng nhất vẫn làcách phối màu lên đối tượng Các bạn có thể dành một ít thời gian để xem qua vànắm bắt cơ bản kỹ thuật phối màu trong đồ hoạ từ đĩa chương trình “Tuyển TậpGiáo Trình Đồ Hoạ” của nhóm phát triển phần mềm Sinh Viên-SSDG hoặc chạytập tin “Gtrinhmythuat.EXE” được chép trên đĩa CD kèm theo bộ sách này

khi lưu đối

tượng các bạn

nên hiệu chỉnh lại kích thước sao cho phù hợp với mong muốn trong việc trình bàytrên trang Web của bạn

Chọn nút lệnh Save

để lưu lại đối tượng

Lưu ý: Đối tượng

ảnh Banner Ads khi xuất

sẽ có phần mở rộng mặc

định là: *.gif

 Nguyễn Tấn Long

Buttons là thành phần nút nhấn được sử dụng tạo ra các nút lệnh, các nútliên kết trên các trang Web hoặc hổ trợ cho các chương trình khác Với thànhphần Buttons trong Xara WebStyle bạn sẽ tạo ra các Hover Button trên trang Webcủa mình một cách đơn giản và đẹp mắt

Mặc dù chức năng chính của Buttons là tạo ra các nút nhấn, các nút lệnhliên kết, chạy và gọi các chương trình Buttons còn được sử dụng để tạo ra cáctiêu đề, hiệu ứng trong các chương trình ứng dụng về soạn thảo như Word, PowerPoint, …

Thao tác gọi một đối tượng mẫu Buttons trong Xara WebStyle cũng tương tựnhư các đối tượng mẫu trong các thành phần khác

Từ Menu lệnh Start chọnchức năng Buttons trên màn hình chính Chọn các đối tượng mẫu cần tạo sau khiduyệt qua các trang Thao tác hiệu chỉnh văn bản, màu sắc, kích thước,… và lưuđối tượng tương tự như các thành phần đã giới thiệu trước đó

Thành phần Buttlets trong Xara WebStyle cũng giống như các đối tượngBullets trong trình ứng dụng soạn thảo văn bản Winword tạo ra các chỉ mục chovăn bản

Thành phần Bullets không chỉ mang một chức năng là tạo ra các chỉ mục,hổ trợ cho các phân cấp văn bản Có thể dùng các đối tượng Bullets để tạo ra cácnút nhấn giống như một chức năng Buttons thực sự

Lưu ý: Khi lưu một

đối tượng đồ hoạ trong

Xara WebStyle các bạn

cần lưu ý đến chức năng

trong suốt màu nền

(Transparent) trên đối

tượng khi xuất sang một

trình ứng dụng khác

Để gọi chứcnăng Transparent trênđối tượng, trong hộpthoại lưu chọn vàochức năng

 Nguyễn Tấn Long

Để tạo ra các đường phân cách các đối tượng, các thành phần, dùng đườngviền để trang trí trên trang Web của bạn Thành phần Dividers trong XaraWebStyle đảm nhiệm chức năng đó

Các đối tượng mẫu trong Dividers

Chức năng

Browser Preview

cho phép xem

trước đối tượng

trước khi lưu

Một đối tượng được hiển thị trên trình duyệt Web bằng IE