THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2000 (PHẦN 2)
Phần 2 hướng dẫn tạo tiêu đề, nút, logo, baner, chữ 3D v.v với chương trình Xara WebStyle
2.0. Nếu dùng Xara WebStyle 3.0, Xara WebStyle 4.0 thì thư viện tạo tiêu đề, logo, v.v sẽ
phong phú hơn.
Bây giờ, bạn hãy khởi động chương trình Xara WebStyle bằng cách nhấp chọn Start >
Programs > Xara WebStyle 2 > Xara WebStyle 2.
Cửa sổ Xara WebStyle xuất hiện, nhấp chọn NavBars.
Một cửa sổ mới xuất hiện.
Bạn hãy nhấp vào mũi tên hướng tới (màu xanh) để chọn bộ nút liên kết hợp mắt cho trang
Web của bạn.
Tiếp tục, bạn hãy nhấp chọn nút Text. Một cửa sổ mới xuất hiện.
Trong cửa sổ này, bạn nhấp chọn (New Button Text Here). Dòng chữ này xuất hiện trong
mục Text, bạn hãy nhập vào chữ Giới thiệu. Tương tự như vậy, bạn hãy tạo ra một loạt các
nút khác với nội dung: Cài đặt, Lý thuyết, Xem phim, Bài tập, Tham khảo, Thoát (Đây là bộ
nút mà bạn sẽ dùng để liên kết trang các trang Web lại với nhau).
Xong, bạn chọn Font VNI-Times-Bold cho các chữ này đồng thời chọn Size in points là 10.
Sau khi thiết đặt các thông số cần thiết, bạn sẽ thấy kết quả hiển thị trong cửa sổ Viewing
Mouse Over State.
Tiếp theo, bạn hãy tiến hành thay đổi màu sắc cho bộ nút này. Bạn hãy nhấp chuột vào
mục Color.
Cửa sổ mới xuất hiện cho bạn một bảng gồm nhiều màu để chọn lựa.
Với bộ nút đã chọn, cửa sổ màu cho phép bạn thay đổi bốn màu: màu nền của trang chứa
các nút (Page Background), màu chữ (Text), màu nút (Main), màu của nút tròn khi bạn rê
chuột lên nút này (Light (Over)). tuy nhiên, nếu bạn không muốn chọn những màu định
sẵn, bạn có thể nhập thông số màu tùy ý RGB (Red, Green, Blue) bằng cách nhấp vào nút
Advanced.
Một cửa sổ mới sẽ xuất hiện cho bạn ba ô để nhập thông số màu.
Trong cửa sổ này, bạn chọn màu Text là màu trắng với thông số RGB lần lượt là: 255, 255,
255.
Tiếp theo, bạn chọn màu xanh cho màu nút (Main) với thông số màu RGB lần lượt là: 0,
102, 0.
Cuối cùng, bạn chọn màu cam cho nút tròn (Light (Over) - bạn sẽ nhìn thấy màu này khi rê
chuột lên nút). Thông số RGB của màu này lần lượt như sau: 255, 153, 0.
Khi thực hiện xong, bạn hãy xem kết quả hiển thị trên màn hình Viewing…
Bây giờ, bạn hãy tiến hành thay đổi kích thước cho bộ nút này bằng cách nhấp vào nút Size.
Một cửa sổ xuất hiện, bạn hãy nhập Width: 714, Height: 22 hoặc bằng cách nhấp và kéo
nút trên thanh trượt.
Lưu ý: Width là chiều dài của toàn bộ các nút mà bạn đang thiết kế.
Khi thực hiện xong các hiệu chỉnh cần thiết, bạn hãy tiến hành lưu lại bộ nút này bằng cách
nhấp chọn nút Save.
Một cửa sổ mới xuất hiện. Trong khung Output type, bạn nhấp chọn mục GIF; trong khung
Options, nhấp chọn Transparent; trong khung Number of colors, bạn chỉnh 256 colors đồng
thời chọn mục Diffused.
Khi hoàn tất việc chọn lựa, bạn có thể nhấp vào nút Browser Preview để xem lại một lần
nữa những gì đã thực hiện trên trình duyệt.
Cuối cùng, bạn hãy nhấp vào mục Save Graphic.
Một cửa sổ mới xuất hiện.
Trong cửa sổ này, tại mục Save in, bạn chọn thư mục chứa các trang Web đã lưu trong cửa
sổ FrontPage trước đó (Ở đây trang Web được lưu trong thư mục 1 CD LOGO).
Tiếp tục, bạn hãy nhấp vào biểu tượng để tạo một thư mục chứa bộ nút này. Một biểu tượng
cùng với chữ NewFolder xuất hiện trong khung bên dưới. Bạn nhập vào chữ images.
Bây giờ, bạn nhấp đúp chuột vào biểu tượng có chữ images này (chữ này sẽ xuất hiện trong
mục Save in khi bạn thực hiện đúng thao tác). Trong mục File name, bạn nhập tên cho
trang Web chứa bộ nút này là nut. Chọn xong nhấp chuột vào nút Save.
Lúc này, bạn dễ dàng nhận thấy các nút đã được lưu trữ vào thư mục images (bao gồm các
nút tĩnh (nút khi chưa đưa chuột tới), các nút thay đổi khi đưa chuột tới)
Tiếp tục công việc, bạn hãy tạo một thanh tiêu đề cho trang Web. Bạn nhấp vào nút Start
để trở về màn hình chính của Xara WebStyle.
Trong cửa sổ này, bạn nhấp chọn mục Button. Một cửa số mới xuất hiện.
Trong cửa sổ này, bạn nhấp vào mũi tên hướng tới màu xanh sau đó nhấp chọn một loại nút
phù hợp. Chọn xong, để nhập vào dòng tiêu đề, bạn nhấp chọn nút Text. Một cửa sổ mới
xuất hiện, bạn nhập dòng chữ “GIÁO TRÌNH ĐIỆN TỬ – HƯỚNG DẪN SỬ DỤNG LOGO” vào
khung Text, chọn Font VNI-Times-Bold, Size in points: 20, Vertical: -3.
Tiếp tục, bạn chọn nhấp chọn nút Size. Một cửa sổ xuất hiện. Trong cửa sổ này, tại khung
Graphic Size, bạn tiến hành hiệu chỉnh các thông số sau: Width: 715, Height: 42.
Sau khi hiệu chỉnh Size (kích cỡ), bạn hãy thay đổi màu sắc cho tiêu đề này bằng cách nhấp
chọn vào mục Color. Một cửa sổ mới xuất hiện.
Trong cửa sổ này, nhấp chọn mục Text vào nhập thông số màu RGB lần lượt là: 255, 255,
255. Sau đó, bạn nhấp sang mục Button và cũng nhập thông số màu RGB sau: 255, 0, 0.
Bạn hãy xem lại kết quả đã thực thi.
Cuối cùng, bạn tiến hành lưu trữ thanh tiêu đề này lại bằng cách nhấp chọn mục Save. Một
cửa sổ xuất hiện.
Trong cửa sổ này, bạn chọn mục GIF trong khung Output type, Transparent trong khung
Options, chọn mục Diffused vào 256 màu trong khung Number of colors. Xong nhấp chọn
Save Graphic.
Một cửa sổ mới xuất hiện.
Trong cửa sổ này, Xara WebStyle sẽ mặc định thư mục lưu trữ hiện hành là thư mục đã
được chọn trong lần lưu trữ gần nhất trước đó. Bây giờ, trong mục Save in, bạn hãy chọn
thư mục để lưu trữ thanh tiêu đề này (nếu thư mục này chưa được hiện hành).
Bạn nhớ rằng, phải lưu file này trong thư mục có chứa bộ nút (vừa tạo trước đó) - cụ thể ở
đây là thư mục images trong thư mục 1 CD LOGO.
Tiếp tục, trong mục File name, bạn nhập tên cho thanh tiêu đề này là logo homepage top.
Xong nhấp chọn Save để kết thúc công việc.
Trong suốt quá trình tạo nút, bạn có thể nhận thấy rằng khi lưu lại bộ nút liên kết, Xara
WebStyle tự động đặt tên cho các nút trong bộ nút này. Với tên mặc định này, bạn sẽ gặp
rất khó nhiều khó khăn vì tên nút không thể hiện được nội dung của nút.
Để giải quyết khó khăn trên trước khi tiến hành chèn các nút này vào trang Web, bạn hãy
tiến hành đổi tên toàn bộ các nút trong bộ nút này. Để thực hiện, bạn hãy mở cửa sổ
Exploring bằng cách nhấp phải vào nút Start > Explore.
Cửa sổ Exploring xuất hiện. Trong cửa sổ này, trong khung bên trái, bạn hãy tìm và nhấp
chọn vào thư mục images trong thư mục 1 CD LOGO.
Lúc này, trong khung bên phải, bạn sẽ thấy xuất hiện danh sách một loạt các nút. Tuy
nhiên, bạn không nhận biết đây là các nút gì.
Để thay đổi tên cho từng nút, hãy nhấp vào tên nút đó để nội dung nút được hiển thị.
Sau đó bạn nhấp phải chuột lên nó. Một menu xuất hiện, bạn nhấp chọn Rename và đổi tên
cho nó.
Ví dụ: Khi nhấp vào nut_b1, bạn thấy nút này có nội dung là Giới thiệu. Vì vậy bạn hãy đổi
tên nut_b1 thành gioi thieu
(Chú ý: Tên file không có dấu)
Tiếp tục, khi nhấp chọn vào nút nut_b1_over, bạn cũng sẽ thấy nó cũng có nội dung là Giới
thiệu. Tuy nhiên, bạn đừng lo lắng, bạn có thể nhận thấy màu của dấu tròn phía trước chữ
Giới thiệu có màu khác với nút vừa đổi tên. Vì vậy, bạn đặt tên cho nút này là gioi thieu
over cũng bằng cách nhấp phải chuột lên nó sau đó chọn Rename.
Lưu ý: Các nút có chữ over nằm ở cuối tên file sẽ được hiển thị trên màn hình khi bạn kéo
rê chuột đến. (Bạn hãy xem lại chi tiết phần này khi thiết kế chúng trong Xara WebStyle).
Tương tự cho các nút còn lại, bạn hãy đổi tên chúng cũng bằng các thao tác trên.
Lúc này, bạn đã có được một bộ nút được đổi tên như mong muốn.
Như vậy là bạn đã cơ bản hoàn tất việc tạo dữ liệu cho trang Web. Bạn hãy trở lại công việc
chính của mình là thiết kế trang Web và tạo các liên kết giữa chúng.
Copyright by webtailieu.net