Tài liệu tập huấn tạo Website cho đơn vị

địa chỉ mà mình đã được cấp. 
Sau khi tạo xong địa chỉ website, các bạn có thể truy cập ngay vào trang của đó bằng 
cách nhấn vào dòng chữ “Chuyển sang trang riêng” hoặc mở trình duyệt web và vào 
theo địa chỉ đã được cấp. 
Công việc tiếp theo của chúng ta là tạo giao diện, menu, thư mục, cho website của 
mình. 
5. Sử dụng Photoshop và Flash để thiết kế đồ họa cho website. 
Đối với một trang web ngoài nội dung, tổ chức thư mục trên đó thì các phần tử đồ họa 
(baner, hình nền, biểu tượng) có vai  trò quan trọng về yếu tố mỹ thuật cho trang đó. Nó 
đảm bảo cho trang web của bạn đẹp, độc đáo và hấp dẫn người xem. 
Sau khi tạo xong trang web riêng của các bạn hãy sử dụng Photoshop và Flash để thiết 
kế baner, hình nền cho trang của mình. 
5.1. Sử dụng Photoshop để thiết kế baner 
Các bạn khởi động phần mềm Photoshop. Tạo một trang giấy mới (Ctrl N). Hộp thoại 
New hiện ra. Bạn có thể điền tên trang này  là “banner”. Kích thước banner  trong các trang 
web của violet.vn có chiều ngang (width)  là 770 pixels, còn chiều cao thì  tùy ý. Tuy nhiên 
bạn không nên để chiều cao quá lớn làm cho banner choán hết cả màn hình máy tính. Bạn nên 
để ở độ cao (height): 100 pixels đến 200 pixel thôi. 
Nhấn OK để đồng ý tạo trang giấy mới. Trang giấy có kích thước đúng như bạn đặt đã 
hiện ra, và bây giờ các bạn sẽ đưa các thông tin cần thiết vào đây để thể hiện nội dung của 
baner. 
Một banner cũng có những yêu cầu về nội dung và mỹ thuật của nó:
·  Nội dung: 
+ Đơn vị chủ quản (nếu có). 
+ Tên đơn vị (là tên trang web). 
+ Địa chỉ liên lạc. 
Ví dụ: ·  Mỹ thuật: 
+ Dùng Font chữ dễ đọc, rõ ràng: không dùng chữ quá hoa lá, uốn lượn, hay chữ có 
nét quá mảnh. Nên dùng chữ  in hoa với dòng tên trang web, chữ  thường với dòng địa chỉ. 
Dòng địa chỉ chỉ cần nhỏ, vừa đủ để đọc được, không nên quá lớn và chiếm nhiều diện tích. 
Mầu của chữ cũng nên nổi bật so với nền 
+ Phần nền trang trí nên có tông màu thích hợp, không quá lòe loẹt khiến người xem 
nhức mắt như màu hồng tươi, màu xanh nõn chuối sáng rực, v..v Bạn có thể thêm lô gô – 
biểu trưng của đơn vị, ảnh minh họa, Lôgô phải rõ ràng và chính xác. Ảnh minh họa: đã là 
minh họa thì chỉ ở một phần của banner. Nếu choán cả banner thì chỉ nên mờ nhạt đằng sau 
chữ làm nền. 
Ví dụ: 
5.1.1. Tô màu nền: 
Chọn  công  cụ  tạo  vùng  chọn  hình  chữ  nhật:  Rectangular Marquee  Tool  (M) 
khoanh lấy toàn bộ phần banner. Lúc này bạn đang chọn trên Layer background. 
Bạn chọn mầu để đổ lên vùng chọn này bằng cách nhấn vào ô Set foregronund color 
. Bảng Color Picker hiện ra. Bạn chọn lấy một mầu như mong muốn và nhấn OK. Trở lại 
vùng chọn, bạn nhấn Alt + Delete để đổ màu lên vùng chọn. (*) 
5.1.2. Tạo thanh đầu trang (header): 
Mỗi website thuộc hệ thống website của violet.vn khi thành viên đăng nhập vào thì sẽ 
hiển thị lời chào và tên thành viên đó phía trên cùng bên phải website. 
Ví dụ: 
PHÒNG GIÁO DỤC VÀ ĐÀO TẠO QUẬN HAI BÀ 
TRƯỜNG THCS TÔ HOÀNG 
Địa chỉ: 27 Đại Cồ Việt, Hai Bà Trưng, Hà Nội. Điện thoại: (04) 8692236
Xin chào cô giáo: Đỗ Thị Hà 
Xin chào thầy giáo: Ngô Văn Chinh 
Vì vậy bạn cần tạo một mảng mầu nằm ngang phía trên có độ cao khoảng 30 pixel. 
Mảng mầu này có mầu sáng vì lời chào hiển thị chữ màu đen (mặc định). 
Bạn  tạo  một  layer  mới  chứa  mảng  mầu  này:  trên  thanh  menu  chọn: 
Layer®Layer(Ctrl + Shift + N). Bảng New Layer hiện ra. Bạn điền tên cho layer này vào 
mục Name để dễ quản lý. Ví dụ tôi đặt tên là “đầu trang”: dau trang 
Sau đó nhấn OK  để tạo layer mới.(**) 
Trên  Layer  đầu  trang  bạn  lại  tạo  một  vùng  chọn  bằng  công  cụ  Rectangular 
Marquee Tool (M). Trên thanh tùy chọn của công cụ này, mục Style, chọn Fixed size. 
Ô Width (chiều rộng) bạn chọn bằng nhiều ngang của banner: 770 pixel 
Ô Heitgh (chiều cao) bạn chọn khoảng 30 pixel 
Nhấn chuột lên trang giấy, bạn sẽ thấy vùng chọn hiện ra có kích thước đúng như bạn 
đã đặt. Bạn di chuyển vùng chọn  lên phía trên cùng của banner. Chọn mầu và đổ  lên vùng 
chọn. (như mục (*)) 
5.1.3. Viết tên đơn vị, địa chỉ: 
Chọn công cụ  Type Tool  (T),  click  chuột vào màn hình khi  hiện  ra con  thanh 
type nhấp nháy thì bạn gõ chữ. Gõ xong bạn chọn công cụ Move Tool (V) để thoát khỏi công 
cụ Type Tool (T) 
Để thay đổi font chữ, cỡ chữ, kiểu chữ, căn lề, mầu chữ, vv bạn chọn trên thanh 
tùy chọn: 
Bạn tạo hiệu ứng cho chữ như: bóng đổ,  tỏa sáng, nổi bóng, vvnhư sau: Trong 
bảng layer, bạn chọn đến layer chữ đó và chọn vào  Add a layer style. Bảng Layer  style 
hiện ra và bạn chọn hiệu ứng mà mình mong muốn:
Blending Options: lựa chọn chung. 
Drop Shadow: bóng đổ. 
Inner Shadow: bóng đổ vào trong. 
Outer Glow: tỏa sáng ra xung quanh. 
Inner Glow: tỏa sáng vào trong. 
Bevel and Emboss: tạo khối nổi. 
Contour: viền xung quanh. 
Texture: tạo bề mặt. 
Satin: làm bóng bề mặt. 
Color Overlay: phủ mầu lên bề mặt. 
Gradient Overlay: tạo chuyển mầu bề mặt. 
Pattern Overlay: tạo chất liệu trên bề mặt. 
Stroke: Nét bao quanh. 
Lúc này bạn đã hoàn thành được 50% công đoạn thiết kế banner của mình. 
Bây giờ ta còn một việc nữa là làm cho nó đẹp hơn, thêm logo, thêm hình minh họa, 
vv 
5.1.4. Trang trí 
Để thêm logo vào banner, bạn kéo file ảnh logo từ máy tính vào giao diện phần mềm 
photoshop. Lúc này hình logo đã nằm trong phần mềm photoshop nhưng đang ở cửa sổ khác 
cửa sổ banner mà ta đang thiết kế. Bạn dùng công cụ Move Tool (V), chọn và giữ chuột hình 
logo, kéo sang cửa sổ ta đang thiết kế banner. 
Nếu logo bị to quá, bạn chọn layer chứa logo, nhấn Ctrl + T. Xung quanh hình layer 
xuất hiện các nút vuông. Đưa chuột đến nút ở góc, khi xuất hiện mũi tên chéo 2 chiều, ta giữ 
vào nút đó và phím Shift, kéo cho nhỏ lại hợp lý. Nhấn Enter. Dùng công cụ Move Tool (V) 
để di chuyển logo, đặt nó vào vị trí mà bạn muốn. 
Trong một  số  trường hợp,  vì  logo của bạn  là  hình  tròn, hay  hình  thoi,  nên xung 
quanh có phần trắng thừa. Bạn dùng công cụ Magic Wand Tool (W) chọn lấy vùng đó, nhấn 
phím Delete để xóa đi là xong! 
Để thêm hình ảnh như ảnh đơn vị của bạn, ảnh học sinh, bông hoa, vv. Bạn cũng 
kéo ảnh vào màn hình soạn thảo như đã kéo logo vào. 
Bạn có thể dùng công cụ tẩy: Erase Tool (E) để tẩy nét cạnh của tấm ảnh để làm mềm 
bức ảnh. Chú ý chọn tẩy nét to (tăng Brush), và chọn độ tẩy nhẹ (giảm Opacity và Flow). 
Lúc này bạn đã hoàn thành banner của mình:
5.1.5. Xuất ra dạng ảnh 
Bước cuối cùng  là  bạn  sẽ  xuất  file Photoshop này  ra  thành một  file ảnh để đưa  lên 
trang web. 
Ảnh để đưa lên Web cần phải nhẹ đến mức tối đa để trang web không bị chậm. Bạn 
vào File®Save for web (Alt + Shift + Ctrl + S). 
Trong bảng Save for web, bạn chọn ảnh dạng JPEG, chất lượng (Quality) là 60. Nhấn 
Save. Cửa sổ Save as hiện ra, bạn chọn nơi lưu bức ảnh lại trong máy tính của mình và nhấn 
OK. ·  Ghi chú ­ Thủ thuật: 
Bạn có thể lấy một bức ảnh hoa lá nào đó làm nền thay vì cả một mảng mầu. Nếu bức 
ảnh quá  rõ, bạn có thể  làm mờ đi  bằng cách giảm Opacity  của  layer ảnh  nền  này đi  trong 
bảng Layer. ·  Ghi nhớ: 
Công việc  thiết kế có những quy  tắc chung về mỹ thuật để sao cho đẹp. Tuy nhiên 
cũng luôn cần có sự sáng tạo để có những cách nhìn mới đẹp hơn. Vì vậy khi thiết kế, các bạn 
không cứ phải đặt  logo ở vị trí đó, không cứ phải đặt chữ ở vị trí cân đối và ảnh ở góc như 
thế. Mỗi  người có những cách  thể  hiện, có những ý  tưởng khác  nhau nên bạn cứ  thỏa sức 
sáng tạo, miễn sao nội dung đầy đủ, banner mầu sắc đẹp – phù hợp, rõ ràng, vv ·  Bài tập: 
­  Thiết kế một banner kích thước 770 x 170 pixel. 
­  Nội dung mang tên của đơn vị mình 
­  Có logo (hoặc không) 
­  Có ảnh minh họa 
­  Bố cục khác với ví dụ của giáo trình. 
5.2. Sử dụng Flash để tạo baner có hình ảnh động. 
5.2.1. Thiết kế banner 
Trên một góc baner bạn có thể đặt các hình ảnh chuyển động qua  lại  làm cho baner 
thêm sinh động, hấp dẫn. Chúng ta sẽ thực hiện điều này thông qua chương trình Macromedia 
Flash 8. 
Các bạn sẽ chuẩn bị 4 bức ảnh để tạo hiệu ứng chuyển ảnh trên một góc baner. 
Khởi động phần mềm Flash. Chọn Flash document để tạo trang giấy mới.
Việc đầu tiên là bạn phải đặt kích thước cho trang giấy mới. Banner của các website 
trên hệ thống của violet.vn có chiều ngang chung là 770pixel. Còn chiều cao của banner thì 
tùy ý. Tuy nhiên các bạn chỉ nên để chiều cao ở khoảng 100pixel đến 200pixel là vừa đủ. Ví 
dụ: hãy tạo một Flash Document với kích thước là Width: 770, Height: 170. 
Tại Layer 1, đổi tên thành “baner”, sau đó, các bạn sẽ đưa ảnh baner được thiết kế trên 
Photoshop vào vùng làm việc bằng lệnh: File®Import®Import to stage. Đặt bức ảnh vừa 
khít với vùng làm việc (stage) của Flash. 
Tiếp đó,  tạo một Layer  2  và  kéo  thả  file  ảnh 1(đã  chuẩn  bị  sẵn)  vào  trang  thiết  kế 
Flash. File đó sẽ nằm trên Layer 2 mà bạn vừa tạo. 
Bức ảnh có thể quá to hoặc bị nhỏ. Bạn hoàn toàn có thể thay đổi được kích thước của 
chúng  bằng  công  cụ  Free  Transform Tool  (Q)  . Khi  bạn  chọn  vào  công  cụ  này,  xung 
quanh bức ảnh sẽ có những nút vuông màu đen, bạn giữ chuột để kéo làm thay đổi kích thước 
của ảnh. Nếu bạn muốn thay đổi độ  lớn mà giữ nguyên tỉ lệ chiều cao và chiều ngang, bạn 
giữ phím Shift khi thay đổi kích thước. Sau khi điều chỉnh, hãy đặt bức ảnh vào vị trí phù hợp 
trên baner. 
Bây giờ, bạn phải biến đối tượng ảnh đó thành một Movie Clip. Bạn chọn nó rồi nhấn 
phím F8. Click vào ô Movie Clip và nhấn OK. Đối tượng ảnh đã chuyển sang dạng Movie 
Clip. 
Bạn dùng công cụ Selection Tool (V) nhấn đúp vào đối tượng Movie Clip này. Như 
vậy bạn đã ở trong Movie clip này. 
Trong Movie Clip  (đoạn  phim)  này,  bạn  sẽ  tạo  ra  nhiều  Layer  (Insert  Layer), mỗi 
Layer bạn sẽ để một bức ảnh. Mỗi bức ảnh bạn sẽ lại nhấn F8 và chuyển nó sang định dạng 
Movie Clip. Các bức ảnh này nằm trên cùng 1 vị trí. 
Sau đây ta sẽ làm cho chúng thay nhau xuất hiện. Ở bức ảnh thứ nhất (photo 1), trên 
Time line (dòng thời gian), bạn chọn frame 20, nhấn F6 để tạo một Key