Lớp Thiết kế giao diện web

THIẾT KẾ GIAO DIỆN WEB

Giới thiệu

Khóa học chuyên sâu về thiết kế giao diện web bằng Photoshop, Flash, Html, CSS và một số công cụ hỗ trợ chuyên nghiệp. Hoàn tất chương trình học viên đủ khả năng tự thiết kế giao diện cho một website ấn tượng, thu hút người xem.

• Hiệu chỉnh, tối ưu hóa hình ảnh cho web.
• Thiết kế giao diện ấn tượng bằng photoshop.
• Thiết kế banner, poster động với Flash.
• Xây dựng website đơn giản sử dụng Flash – Action script 3.0.
• Cắt HTML/CSS (Chuyển giao diện Photoshop sang HTML5/CSS3)
• Convert PSD to Template Joomla (Chuyển giao diện Photoshop sang Template Joomla)

Giáo Trình Học

• Giáo trình thực hành Tiếng Việt do Nhất Nghệ biên soạn
• Phim hướng dẫn thao tác từng bước xây dựng giao diện WebSite hoàn chỉnh

Đối Tượng Học

• Các đối tượng muốn thiết kế, xây dựng giao diện web.
• Sinh viên cần trang bị kiến thức trong lĩnh vực thiết kế web để hỗ trợ việc học và chuẩn bị cho công việc sau khi tốt nghiệp.
• Các bạn học viên lớp thiết kế Web Doanh Nghiệp, Lập trình web với ASP.
• Chuyên viên Thiết kế của các Công Ty Quảng Cáo, Thương Mại Điện Tử....

Điều kiện theo học

* Có kiến thức căn bản về Internet

Môi trường học

• 100% thời gian học trên phòng Lab tiêu chuẩn Quốc tế
• Giáo trình thực hành Tiếng Việt do Nhất Nghệ biên soạn.
• Phim hướng dẫn thao tác từng bước xây dựng giao diện WebSite hoàn chỉnh

Bằng cấp

- Tham dự trên 80% số buổi học và Hoàn thành đồ án, Học viên được cấp Chứng Nhận Hoàn Tất Khóa Học của Trung Tâm Nghiên Cứu Phát Triển Đào Tạo CNTT Nhất Nghệ, có giá trị toàn Quốc.

Thời lượng - Học phí

- Thời lượng: 2.5 tháng, tuần 3 buổi, buổi 2 giờ hoặc Thứ Bảy và Chủ Nhật (tuần 2 buổi , 3 giờ/buổi)
- Học phí: 2.5 triệu đồng , đã bao gồm tài liệu (ebooks & Phim minh họa thao tác trên CD)
Giảm 10% cho học viên cũ và sinh viên

» Xem lịch khai giảng «

NỘI DUNG HỌC CHI TIẾT

PHẦN I. THIẾT KẾ GIAO DIỆN VỚI PHOTOSHOP

Lab 1. Xử lý ảnh cho web

• Chỉnh ảnh xuống màu.
• Chỉnh ảnh ngược sáng.
• Chỉnh màu tự động.
• Chấm sửa, làm mịn da, xóa mắt đỏ, xóa noise,…

Lab 2. Cắt ghép ảnh cơ bản với vùng chọn, Layer Mask

• Selection tool
• Copy, transform, Eraser,…
• Layer mask.

Lab 3. Màu và hiệu ứng màu trong thiết kế web

• Màu đơn sắc, màu chuyển sắc.
• Hiệu ứng màu cho text, hiệu ứng nền.

Lab 4. Thiết kế banner cho web

• Ứng dụng thiết kế baner.
• Banner động đơn giản.

Lab 5. Thiết kế giao diện web shop hoa tươi

• Chuẩn bị hình ảnh và nội dung.
• Định kích thước thiết kế giao diện phù hợp.
• Lên layout trang index.
• Cắt ghép hoàn chỉnh giao diện.

Lab 6. Thiết kế giao diện web điện thoại di động

• Sử dụng Action cắt ảnh tự động hình sản phẩm.
• Lên layout cơ bản.
• Cắt ghép hoàn chỉnh giao diện.

Lab 7. Cắt giao diện cho web

• Phân tích giao diện web phổ biến.
• Cắt giao diện web Shop hoa tươi.
• Cắt giao diện web điện thoại di động.

PHẦN II. HTML5 & CSS3

  
Lab 1. Trình bày web với Html & CSS

• Tạo site trong Dreamveaver
• Cấu trúc tài liệu html.
• Các thẻ HTML cơ bản.
• Sử dụng thẻ DIV trong Layout web
• CSS

Lab 2. Ngôn ngữ HTML5 & CSS3

• Ứng dụng html5.
• Các thành phần mới trong html5
• Các thành phần mới trong css3
• Sự hỗ trợ của trình duyệt cho Html5 & Css3.

Lab 3. Responsive Web Design 

• Thiết kế web xem trên nhiều thiết bị(Laptop, Ipad, Iphone, Anroid,...)
• CSS media queries

Lab 4. Convert PSD to HTML5 & CSS3

• Tạo site shophoatuoi.
• Định hình nền, font cho tài liệu.
• Trình bày banner, menu.
• Trình bày sản phẩm mới.
• Tạo Form tìm kiếm sản phẩm.
• Hoàn thiện trang index.

PHẦN III. FLASH + ACTION SCRIPT 3.0

THIẾT KẾ BANNER ĐỘNG CHO WEB

Lab 1. Tạo hình trong flash

• Vẽ hình vuông, tròn, đa giác.
• Tô màu đơn sắc, chuyển sắc, transform đối tượng
• Align, Arrange, Add, Subtract, Intersect,…

Lab 2. Các diễn hoạt cơ bản trong flash

• Motion Tween.
• Shape Tween
• Motion Guides
• Motion with mask.

Lab 3. Diễn hoạt có hiệu ứng

• Drop shadow.
• Blur, Alpha.
• Adjust color.

Lab 4. Thiết kế banner trong flash
- Thực hành thiết kế banner.
Lab 5. Lập trình Action script cơ bản

• Khai báo và sử dụng biến.
• Phát biểu if…else, vòng lặp for.
• Ứng dụng điều khiển Movie Clip.

Lab 6.  Điều khiển đối tượng với action script.
- Điều khiển size, position, alpha, angle, load, unload,… Movie clip
- CSS trong Flash.

Lab 7.  Điều khiển âm thanh trong flash

• Âm thanh cho button, cho Movie Clip.
• Âm thanh nền. load, unload Sound.

Lab 8. Text, Form

• Các dạng text trong Flash (Static, Input text, Dynamic text).
• Định dạng text bằng css.
• Tạo form trong flash.

Lab 9. Thiết kế website flash đơn giản

• Ứng dụng thiết kế website đơn giản bằng Flash + Action Script

Lab 10. Convert Flash to HTML5&JS

• Sử dụng Toolkit_for_CreateJS
• Sử dụng swiffy

PHẦN IV. Convert PSD to Template Joomla

Lab 1. Cài đặt Joomla

• Cài đặt joomla.
• Việt hóa joomla.
• Đăng tin tức
• Đổi giao diện

Lab 2. Thiết kế Template Joomla

• Cấu trúc template
• Cài đặt template
• Hiệu chinh template

Lab 3. Convert PSD to Template Joomla

• Cắt PSD
• Convert to template Joomla
• Cài đặt modules.

ĐỒ ÁN TỐT NGHIỆP

1. Thời gian thực hiện: 1 tuần kể từ ngày kết thúc khóa học.
2. Yêu cầu đồ án: Đồ án tự chọn, học viên thực hiện thiết kế Website tĩnh giới thiệu sản phẩm, công ty, doanh nghiệp cung cấp dịch vụ, thương mại . . . cụ thể như sau:

- Thiết kế giao diện bằng photoshop gồm các trang: index, sanpham, gioithieu, lienhe.
- Cắt giao diện cho các trang web đã thiết kế.
- Layout web với HTML & CSS (Sử dụng thẻ div trong layout).
- Thêm các banner động cho web với Flash + Action Script 3.0.