Đang tải... (xem toàn văn)
- Để sắp xếp, các bạn sẽ chọn số thứ tự hiển thị trong hộp thoại (hình trên). Khi đó, mục 5 sẽ ở vị trí số 2, mục đang ở vị trí thứ 2 được dịch xuống một đơn vị thành vị trí thứ 3, các [r]
(1)Sử dụng Photoshop Flash để thiết kế đồ họa cho website
Đối với trang web ngồi nội dung, tổ chức thư mục phần tử đồ họa (baner, hình nền, biểu tượng…) có vai trị quan trọng yếu tố mỹ thuật cho trang Nó đảm bảo cho trang web bạn đẹp, độc đáo hấp dẫn người xem
Sau tạo xong trang web riêng bạn sử dụng Photoshop Flash để thiết kế baner, hình cho trang
1 Sử dụng Photoshop để thiết kế banner
Các bạn khởi động phần mềm Photoshop Tạo trang giấy (Ctrl N) Hộp thoại New Bạn điền tên trang “banner” Kích thước banner trang web violet.vn có chiều ngang (width) 770 pixels, cịn chiều cao tùy ý Tuy nhiên bạn không nên để chiều cao lớn làm cho banner chốn hết hình máy tính Bạn nên để độ cao (height): 100 pixels đến 200 pixel
Nhấn OK để đồng ý tạo trang giấy Trang giấy có kích thước bạn đặt ra, bạn đưa thông tin cần thiết vào để thể nội dung baner
Một banner có yêu cầu nội dung mỹ thuật nó: · Nội dung:
+ Đơn vị chủ quản (nếu có) + Tên đơn vị (là tên trang web) + Địa liên lạc
PHÒNG GIÁO DỤC VÀ ĐÀO TẠO BÙ GIA MẬP
Ví dụ:
·
Mỹ thuật:
TRƯỜNG THCS LÝ THƯỜNG KIỆT
(2)+ Dùng Font chữ dễ đọc, rõ ràng: không dùng chữ hoa lá, uốn lượn,… hay chữ có nét 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 Dòng địa chỉ cần nhỏ, vừa đủ để đọc được, khơng nên q lớn chiếm nhiều diện tích Mầu chữ nên bật so với
+ Phần trang trí nên có tơng màu thích hợp, khơng q lịe loẹt khiến người xem nhức mắt màu hồng tươi, màu xanh nõn chuối sáng rực, v v… Bạn thêm lơ gơ – biểu trưng đơn vị, ảnh minh họa,… Lôgô phải rõ ràng xác Ảnh minh họa: minh họa phần banner Nếu chốn banner nên mờ nhạt đằng sau chữ làm
Ví dụ:
2.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 phần banner Lúc bạn chọn Layer background
Bạn chọn mầu để đổ lên vùng chọn cách nhấn vào ô Set foregronund color Bảng Color Picker Bạn chọn lấy mầu mong muốn nhấn OK Trở lại vùng chọn, bạn nhấn Alt + Delete để đổ màu lên vùng chọn (*)
2.1.2 TẠO THANH ĐẦU TRANG (HEADER):
Mỗi website thuộc hệ thống website violet.vn thành viên đăng nhập vào hiển thị lời chào tên thành viên phía bên phải website
Ví dụ:
Xin chào cô giáo: Đỗ Thị Hà
Xin chào thầy giáo: Ngơ Văn Chinh
Vì bạn cần tạo mảng mầu nằm ngang phía có độ cao khoảng 30 pixel Mảng mầu có mầu sáng lời chào hiển thị chữ màu đen (mặc định)
Bạn tạo layer chứa mảng mầu này: menu chọn: Layer®Layer…(Ctrl + Shift + N) Bảng New Layer Bạn điền tên cho layer vào mục Name để dễ quản lý Ví dụ đặt tên “đầu trang”: dau trang
Sau nhấn OK để tạo layer mới.(**)
Trên Layer đầu trang bạn lại tạo vùng chọn công cụ Rectangular Marquee Tool (M) Trên tùy chọn công cụ này, mục Style, chọn Fixed size.
(3)Ô Heitgh (chiều cao) bạn chọn khoảng 30 pixel
Nhấn chuột lên trang giấy, bạn thấy vùng chọn có kích thước bạn đặt Bạn di chuyển vùng chọn lên phía banner Chọn mầu đổ lên vùng chọn (như mục (*))
2.1.3 VIẾT TÊN ĐƠN VỊ, ĐỊA CHỈ:
Chọn công cụ Type Tool (T), click chuột vào hình type nhấp nháy bạn gõ chữ Gõ xong bạn chọn cơng cụ Move Tool (V) để khỏi cơng cụ Type Tool (T)
Để thay đổi font chữ, cỡ chữ, kiểu chữ, lề, mầu chữ, v…v… bạn chọn tùy chọn:
Bạn tạo hiệu ứng cho chữ như: bóng đổ, tỏa sáng, bóng, v…v…như sau: Trong bảng layer, bạn chọn đến layer chữ chọn vào Add a layer style Bảng Layer style bạn chọn hiệu ứng mà mong muốn:
Blending Options: lựa chọn chung Drop Shadow: bóng đổ
Inner Shadow: bóng đổ vào Outer Glow: tỏa sáng xung quanh Inner Glow: tỏa sáng vào Bevel and Emboss: tạo khố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 bề mặt Stroke: Nét bao quanh
(4)Bây ta việc làm cho đẹp hơn, thêm logo, thêm hình minh họa, v… v…
2.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 hình logo nằm phần mềm photoshop cửa sổ khác cửa sổ banner mà ta thiết kế Bạn dùng công cụ Move Tool (V), chọn giữ chuột hình logo, kéo sang cửa sổ ta 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 nút vuông Đưa chuột đến nút góc, xuất mũi tên chéo chiều, ta giữ vào nút 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 vào vị trí mà bạn muốn
Trong số trường hợp, logo bạn 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 xong!
Để thêm hình ảnh ảnh đơn vị bạn, ảnh học sinh, bơng hoa, v…v… Bạn kéo ảnh vào hình soạn thảo kéo logo vào
Bạn dùng công cụ tẩy: Erase Tool (E) để tẩy nét cạnh ảnh để làm mềm ảnh Chú ý chọn tẩy nét to (tăng Brush), chọn độ tẩy nhẹ (giảm Opacity Flow).
Lúc bạn hồn thành banner mình: 2.1.5 XUẤT RA DẠNG ẢNH
Bước cuối bạn xuất file Photoshop thành 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) 60 Nhấn Save Cửa sổSave as ra, bạn chọn nơi lưu ảnh lại máy tính nhấn OK
· Ghi – Thủ thuật:
(5)· Ghi nhớ:
Công việc thiết kế có quy tắc chung mỹ thuật để cho đẹp Tuy nhiên ln cần có sáng tạo để có cách nhìn đẹp Vì thiết kế, bạn khơng phải đặt logo vị trí đó, khơng phải đặt chữ vị trí cân đối ảnh góc Mỗi người có cách thể hiện, có ý tưởng khác nên bạn thỏa sức sáng tạo, nội dung đầy đủ, banner mầu sắc đẹp – phù hợp, rõ ràng, v…v… · Bài tập:
- Thiết kế banner kích thước 770 x 170 pixel - Nội dung mang tên đơn vị
- Có logo (hoặc khơng) - Có ảnh minh họa
- Bố cục khác với ví dụ giáo trình
2 Sử dụng Flash để tạo baner có hình ảnh động 2.2.1 THIẾT KẾ BANNER
Trên góc baner bạn đặt hình ảnh chuyển động qua lại làm cho baner thêm sinh động, hấp dẫn Chúng ta thực điều thơng qua chương trình Macromedia Flash
Các bạn chuẩn bị ảnh để tạo hiệu ứng chuyển ảnh góc baner Khởi động phần mềm Flash Chọn Flash document để tạo trang giấy
Việc bạn phải đặt kích thước cho trang giấy Banner website hệ thống violet.vn có chiều ngang chung 770pixel Cịn chiều cao banner tùy ý Tuy nhiên bạn nên để chiều cao khoảng 100pixel đến 200pixel vừa đủ Ví dụ: tạo Flash Document với kích thước Width: 770, Height: 170
Tại Layer 1, đổi tên thành “baner”, sau đó, bạn đưa ảnh baner thiết kế Photoshop vào vùng làm việc lệnh: File®Import®Import to stage Đặt ảnh vừa khít với vùng làm việc (stage) Flash
Tiếp đó, tạo Layer kéo thả file ảnh 1(đã chuẩn bị sẵn) vào trang thiết kế Flash File nằm Layer mà bạn vừa tạo
(6)quanh ảnh có nút vng màu đen, bạn giữ chuột để kéo làm thay đổi kích thước ảnh Nếu bạn muốn thay đổi độ lớn mà giữ nguyên tỉ lệ chiều cao chiều ngang, bạn giữ phím Shift thay đổi kích thước Sau điều chỉnh, đặt ảnh vào vị trí phù hợp baner
Bây giờ, bạn phải biến đối tượng ảnh thành Movie Clip Bạn chọn nhấn phím F8 Click vào Movie Clip 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 Như bạn Movie clip
Trong Movie Clip (đoạn phim) này, bạn tạo nhiều Layer (Insert Layer), Layer bạn để ảnh Mỗi ảnh bạn lại nhấn F8 chuyển sang định dạng Movie Clip Các ảnh nằm vị trí
Sau ta làm cho chúng thay xuất Ở ảnh thứ (photo 1), Time line (dòng thời gian), bạn chọn frame 20, nhấn F6 để tạo Key Frame Tiếp tục nhấn F6 Frame Frame 15
Chọn Frame Frame 20, sau click chọn ảnh, mở bảng thuộc tính Properties kéo Alpha mục Color xuống 0%.
Nhấn chuột phải vào Frame khoảng Frame Frame 5, Frame 15 Frame 20, chọn Creat Motion Tween
Làm tương tự với ảnh lại (photo 2, photo 3, …)
Bôi đen Time line ảnh thứ (photo 2) dịch chuyển cho Key frame thứ nằm frame 20
Bôi đen Time line ảnh thứ (photo 3) dịch chuyển cho Key frame thứ nằm frame 40
Để kéo dài thời gian xuất ảnh, bạn cần kéo dài thêm frame xuất ảnh (khoảng Key Frame có Alpha = 100%): Nhấn vào frame giữa, nhấn F5 bàn phím để chèn thêm frame
Dùng cơng cụ Selections Tool (V) nhấn đúp ngồi vùng có ảnh bạn thoát khỏi Movie Clip chứa nhiều Movie Clip nhỏ
2.2.2 XUẤT BẢN RA FILE
(7)Bạn lưu file Flash lại: vào File chọn Save Bảng Save As ra, bạn điền tên file chọn nơi lưu giữ file máy tính nhấn OK
Bạn giữ phím Ctrl nhấn Enter Như Flash xuất file SWF cạnh file mà bạn vừa lưu Đây file banner Flash bạn
· Ghi – Thủ thuật:
Bạn thiết kế trực tiếp Flash baner mà không cần đến ảnh baner thiết kế qua Photoshop
Bạn tạo Layer làm Layer mặt nạ (Mask) cho Layer chứa Movie Clip Trên Layer bạn vẽ hình cơng cụ Pen Tool (P) Movie Clip có ảnh chuyển đổi hình mà bạn vẽ
Sử dụng chức quản trị website Khi đăng nhập vào trang vừa tạo, bạn có quyền quản lý (admin), menu “Quản trị” xuất hiện, click chuột chọn để thực chức quản trị:
Tại phần quản trị thực số công viêc sau: Tạo giao diện
Chức cho phép bạn tạo nền, baner cung cấp số thơng tin cho trang web
- Phần tiêu đề thư viện: dùng để đặt tiêu đề cho trang web mở, hiển thị nội dung
- Phần baner hình nền: cho phép bạn chọn ảnh để làm baner cho trang web Phần xin xem hướng dẫn mục “Sử dụng Photoshop Flash để tạo banner” Click chọn nút Browse tìm đến file ảnh máy tính để tạo baner, hình - Thơng tin quyền: bạn cung cấp thông tin trang web thuộc quyền đơn vị
Sau khai báo thông tin, click chọn nút “Cập nhật” để hoàn tất
- Thay đổi mẫu thư viện: Thư viện cung cấp cho trang web số mẫu có sẵn, click vào mẫu mà bạn muốn chọn Sau click chọn, mẫu hiển thị
(8)- Để xếp, bạn chọn số thứ tự hiển thị hộp thoại (hình trên) (Nếu bạn đổi thứ tự mục vị trí thứ lên vị trí 2, bạn việc chọn số mục Khi đó, mục vị trí số 2, mục vị trí thứ dịch xuống đơn vị thành vị trí thứ 3, mục sau thay đổi tương tự)
- Bên cạnh đó, quản trị quyền cho chức hiển thị ẩn cách click chuột chọn Hiển thị Ẩn
2 Tạo menu cho trang web 2.1 TẠO MENU NGANG: a Tạo menu
Để tạo menu từ menu gốc có sẵn bạn chọn chức “Tạo menu con” Tại mục này, chọn loại menu:
1 Từ viết: menu tạo liên kết đến mục thư mục viết Từ menu chuẩn: lấy menu từ menu chuẩn (mặc định) thư viện violet Tự nhập liên kết: Bạn tự tạo menu cách nhập vào tên menu địa liên kết đến
Nếu bạn chọn loại 2, bạn việc chọn menu sẵn có chọn nút < Nếu bạn chọn loại 3, phải nhập trực tiếp tên menu địa liên kết click chọn nút “Tạo menu”.
b Sửa đổi menu
Ban đầu, menu tạo sẵn thường đặt khơng dấu, bạn chỉnh sửa đặt lại tên menu theo ý bạn.
Chọn chức “Sửa đổi nemu” sau chọn tên menu cần sửa đổi Khi bạn có thể chỉnh sửa tên menu hộp “Tiêu đề”
c Sắp xếp menu
Sau tạo xong hệ thống menu, bạn xếp, thay đổi vị trí mục menu tạo cho phù hợp
(9)Để xóa bỏ menu đó, chọn menu chọn chức “Xóa mục menu” Một thông báo xuất hiện:
Chọn OK để chắn xóa hay chọn Cancel bạn nghĩ lại khơng muốn xóa 2.2 TẠO MENU DỌC
Menu dọc ngang cho chức tương tự Trong trình tạo trang web riêng cho đơn vị hay cá nhân, người có cách trình bày bố cục trang web khác Tuy nhiên, website thiết kế tốt cho phép người đọc nhanh chóng thẳng vào vấn đề, tìm họ cần sau dễ dàng in lưu giữ họ tìm thấy Cấu trúc menu, nội dung định phải tổ chức cẩn thận để hỗ trợ việc tìm kiếm, truy cập nhanh đến thông tin mà người đọc cần tìm
Nếu menu ngang cho phép bạn liên kết đến mục trang web bạn, menu dọc giúp người thiết kế liên kết đến phần trọng tâm cần nhấn mạnh trang web
Ví dụ, trang web: http://violet.vn/ltkpro tạo hệ thống menu dọc với liên kết nhằm giới thiệu nhanh thông tin chung nhà trường mà thành viên truy cập dễ dàng nhìn thấy như:
Giới thiệu chung Cơ cấu tổ chức Hoạt động Tin tức
Để tạo, bạn thực bước sau: - Chọn chức quản trị
- Vào phần Menu, chọn Menu dọc
- Phần tạo menu con, chọn loại: “Từ viết” sau chọn mục viết, nhấn vào nút <<Chuyển sang<< Một thông báo yêu cầu bạn lưu lại:
3 Quản lý thành viên
(10)- Để đổi quyền gửi viết bạn làm tương tự trên, cửa sổ sau xuất hiện:
· Click dấu “+” để mở thư mục con, dấu “ – ” để trở thư mục
à Click chn ỵ xỏc nh cho thnh viên phép gửi viết mục trang web
- Sau khai báo xong, chọn nút “Cập nhật” Chờ thông báo: “Bạn cập nhật thành công” xuất hiện, bạn click vào nút “Đóng cửa sổ” để trở cửa sổ quản lý.
4 Quản trị thư mục môn học
Đối với trang riêng ban đầu, bạn phải tạo thư mục cho trang web Hệ thống thư mục bạn tạo phải đồng hóa với hệ thống thư mục trang thư viện violet
4.1 TẠO THƯ MỤC CON
Để tạo thư mục: Đầu tiên bạn chọn thư mục gốc “Cây thư mục tại” (Bài viết, Bài giảng, Tư liệu, Giáo án, Đề thi…) Sau đó, gõ tên thư mục cần tạo hộp “Tên thư mục” cửa sổ bên phải Chọn chức phân quyền cho phép hay không cho phép thành viên, người quản lý… phép gửi vào thư mục Tiếp đó, bạn phải đồng thư mục tạo với hệ thống thư mục thư viện violet cách chọn tên thư mục tương ứng với thư mục vừa gõ thư mục phía hộp “Đồng bộ” Cuối cùng, chọn nút “Tạo thư mục” để hoàn tất
Đối với thư mục khác, cách tạo tương tự 4.2 SỬA ĐỔI THƯ MỤC
Để sửa đổi thư mục, bạn chọn chức “Sửa đổi thư mục” Chức sửa đổi cho phép bạn thay đổi tên, đồng lại thư mục xếp, di chuyển thư mục vào vị trí phù hợp Các làm sau:
- Chọn thư mục cần sửa đổi
- Sửa lại tên hộp thoại “Tên thư mục”
- Đặt lại chức phân quyền đồng hóa (nếu cần)
- Có thể dịch chuyển vị trí thư mục chức dịch thư mục (Lên|Xuống|Sang trái| Sang phải)
(11)Để xóa thư mục, bạn chọn thư mục muốn xóa chọn chức “Xóa thư mục” Quản lý tài nguyên trang
Mục tài nguyên cho phép người quản trị theo dõi quản lý viết, giảng, tư liệu thành viên gửi lên trang web Người quản trị biết tư liệu đưa vào trang thuộc loại gì, thành viên nào, đặt tiêu đề đưa lên vào thời điểm
Người quản trị xem loại tư liệu trang web dựa vào hộp thoại phân loại tài nguyên Đồng thời, tư liệu không phù hợp mặt nội dung, giáo dục… chọn xóa khỏi trang web nút “Xóa tài nguyên”
6 Tạo phiếu điều tra ý kiến trang web
Cũng web site khác, bạn đưa vào trang câu hỏi thăm dị ý kiến thành viên
Để đưa vấn đề cần lấy ý kiến bạn thao tác sau: - Chọn nút “Tạo mới”
http://violet.vn/ltkpro c