Thiết Kế Giao Diện Website Online

Giới Thiệu Khóa Học Thiết Kế Giao Diện Website

Giao diện của website doanh nghiệp được xem là một trong những bộ phận cấu thành nên bộ mặt và làm tăng thêm giá trị của công ty, tác động đến sự cảm nhận độ tin cậy về doanh nghiệp đối với khách hàng và đối tác. Vì vậy công đoạn thiết kế giao diện website là rất quan trọng, được thực hiện đầu tiên và là nhân tố quyết định đến giá trị của website đó. Để có được một giao diện website đẹp thì phải có sự kết hợp hài hòa giữa kỹ thuật phân tích - thiết kế layout và kỹ thuật chuyển các layout này vào trong website.

Công nghệ website mới được đưa vào giảng dạy trong khóa học này:
- Responsive Web Design (RWD) và HTML5 & CSS3 làm cho website có những ưu điểm sau:

1. Responsive Web Design (RWD): Đây là công nghệ mới trong thiết kế giao diện website – Với công nghệ này, website sẽ tự động điều chỉnh co giãn độ rộng và bố cục nội dung của trang web theo kích cỡ và độ phân giải màn hình của mọi thiết bị như: Laptop, Desktop, iPad, iPhone, Smartphone, Tablet sao cho thông tin hoặc hình ảnh trên trang web không bị mất vùng hiển thị do màn hình không đủ rộng khi truy cập web trên các iPhone, smartphone, . . . Các website thiết kế giao diện theo công nghệ cũ là định thông số độ rộng và độ phân giải màn hình thiết bị theo số cố định nên các website này phải có thêm 1 phiên bản website tương tự được đặt thêm chữ m.* để chạy trên các thiết bị như: iPhone, smartphone, iPad, tablet. Ví dụ như: vnexpress.net và m.vnexpress.net. Việc này sẽ mất công sức trong việc vận hành và quản lý website.

2. HTML5 & CSS3: Hỗ trợ việc SEO của Website tốt hơn.

Tham dự khóa học này, học viên sẽ được học về các kỹ thuật phân tích - thiết kế giao diện website đạt mục tiêu nói trên, cũng như học cách sử dụng các phần mềm chuyên dụng để thiết kế các trang web đạt tính thẩm mỹ cao.

Tài liệu học tập và thực hành: Học trực tiếp bằng VideoClip chi tiết bằng tiếng Việt. Giao tiếp với giảng viên qua: Chat, skype, email, điện thoại, teamviewer.
Hoàn thành: Có khả năng thiết kế mọi thể loại giao diện website chuyên nghiệp, hoàn chỉnh đạt cấp độ cao về hình ảnh thẩm mỹ, nội dung sinh động, đáp ứng được yêu cầu cần thiết hiện nay tại các doanh nghiệp

Đối Tượng Tham Gia

Dành cho mọi đối tượng

Thời Lượng

4 tháng + 1 tháng hướng dẫn đề tài

Nội Dung Khóa Học Thiết Kế Giao Diện Website

Môn 1: Thiết kế giao diện web căn bản với HTML, CSS & DREAMWEAVER

- Giới thiệu tất cả các thẻ HTML cơ bản dùng để thiết kế giao diện website.
- Giới thiệu kỹ thuật thiết kế giao diện website bằng thẻ DIV.
- Thiết kế và tạo hợp lệ cho biểu mẫu FORM của trang web.
- Giới thiệu kỹ thuật trang trí giao diện trang web bằng CSS2.
- Giới thiệu tất cả các kỹ thuật tạo menu cho website.
- Bài tập tổng hợp: Thiết kế hoàn chỉnh giao diện website bán hàng trực tuyến với đầy đủ các module.

Môn 2: Thiết kế giao diện web bằng Adobe Fireworks CS6

- Giới thiệu phần mềm thiết kế giao diện Adobe Fireworks CS6.
- Làm quen với các công cụ hỗ trợ thiết kế giao diện.
- Kỹ thuật thiết kế hình ảnh tĩnh và động, hiệu ứng tô màu, hiệu ứng button áp dụng vào việc thiết kế giao diện cho website.
- Áp dụng các hiệu ứng có sẵn và phân tích cách tạo ra các hiệu ứng đó để sử dụng cho việc thiết kế giao diện website.
- Phân tích các layout mẫu và chọn cách thiết kế các layout tương tự phù hợp với kiến trúc giao diện và code của website.
- Thiết kế layout website bằng Adobe Fireworks CS6 và cắt layout phù hợp với kiến trúc giao diện và code của website.
- Bài tập thiết kế giao diện tổng hợp: Thiết kế hoàn chỉnh giao diện website tin tức trực tuyến.

Môn 3: Thiết kế hiệu ứng Flash cho website bằng Adobe Flash CS6

- Làm quen với giao diện Flash CS6.
- Tìm hiểu các công cụ vẽ cơ bản trong Flash CS6.
- Cách sử dụng công cụ Pen Tool trong Flash CS6.
- Cách sử dụng công cụ Text Tool trong Flash CS6.
- Các khái niệm trong kỹ thuật tạo hoạt hình cho website.
- Tạo chuyển động cho đối tượng dạng Frame-By-Frame.
- Tạo chuyển động cho đối tượng dạng Classic Tween.
- Tạo chuyển động cho đối tượng dạng Motion Tween.
- Tạo chuyển động cho đối tượng dạng Shape Tween.
- Tạo chuyển động cho đối tượng bằng Motion Presets.
- Tạo hiệu ứng mặt nạ lớp.

Môn 4: Thiết kế hiệu ứng Flash cho website bằng Swishmax 4

- Làm quen với giao diện Swishmax 4
- Tạo hiệu ứng Flash với Swishmax 4.

Môn 5: Thiết kế giao diện website bằng CSS3

- Trang trí giao diện web bằng CSS3 Borders và CSS3 Border Image.
- Trang trí giao diện web bằng CSS3 Box Shadow.
- Trang trí giao diện web bằng CSS3 Text Shadow.
- Trang trí giao diện web bằng CSS3 Gradient.
- Trang trí giao diện web bằng CSS3 Fonts.
- Trang trí giao diện web bằng CSS3 Backgrounds.
- Tạo hiệu ứng hoạt hình cho web bằng CSS3 Transitions.
- Tạo hiệu ứng hoạt hình cho web bằng CSS3 Animations.
- Thiết kế giao diện web bằng CSS3 Multiple Columns.
- Tạo giao diện web bằng CSS3 User Intreface.
- Bài tập tổng hợp: Thiết kế giao diện và tạo hiệu ứng cho website bằng CSS3.

Môn 6: Thiết kế giao diện web bằng HTML5

- Giới thiệu ngôn ngữ HTML5.
- Cấu trúc trang web HTML5.
- Sử dụng thẻ header và footer trong HTML5.
- Sử dụng thẻ nav để tạo menu cho website bằng HTML5.
- Sử dụng thẻ section, article, aside trong thiết kế giao diện website bằng HTML5.
- Sử dụng thẻ figure và figurecaption để chèn hình ảnh cho website bằng HTML5.
- Cách kết hợp thẻ Figure và CSS3 Transform để tạo hiệu ứng cho hình ảnh.
- Sử dụng thẻ audio và video để tạo âm thanh và video cho website.
- Sử dụng thẻ SVG để vẽ hình vector cho website.
- Sử dụng thẻ CANVAS để vẽ đồ hoạ cho website.
- Giới thiệu Geolocation HTML5 API để tạo bản đồ.
- Giới thiệu Web Storage: Session Storage và Local Storage.
- Giới thiệu Web SQL Database.
- Giới thiệu Web Workers.

Môn 7: Thiết kế giao diện web bằng RWD (Responsive Web Design)

- Giới thiệu kỹ thuật và phần mềm thiết kế web theo công nghệ RWD.
- Giới thiệu CSS3 Media Queries.

- Bài tập tổng hợp: thiết kế hoàn chỉnh giao diện website bán hàng trực tuyến theo công nghệ RWD. (Xem demo)

Môn 8: Lập trình Javascript

- Giới thiệu Ngôn ngữ lập trình Javascript.
- Các hộp thoại cơ bản.
- Vị trí code javascript trong trang HTML
- Biến: khai báo, các giá trị...
- Hàm: cú pháp khai báo và khi được gọi.
- Cấu trúc điều khiển.
- Các đối tượng trong javascript.
- Một số phương thức cơ bản của đối tượng Math, String, Date.
- Một số phương thức cơ bản của đối tượng BOM, DOM

Môn 9: Thiết kế giao diện web bằng Bootstrap

- Giới thiệu Bootstrap CSS Frameworks V3.3.4
- Hướng dẫn cách cài đặt và nhúng Bootstrap Frameworks vào website
- Tìm hiểu cấu trúc của Bootstrap CSS Frameworks
- Hướng dẫn sử dụng hệ thống lưới của Bootstrap (Bootstrap Grid System) để thiết kế giao diện web Responsive
- Hướng dẫn thiết kế bảng (Table) trong Bootstrap
- Hướng dẫn cách thiết kế biểu mẫu (Form) trong Bootstrap
- Hướng dẫn cách thiết kế nút (Button) trong Bootstrap
- Hướng dẫn cách hiển thị hình ảnh trong Bootstrap
- Hướng dẫn sử dụng thành phần Helper classes Boostrap trong thiết kế giao diện web
- Hướng dẫn sử dụng thành phần Typography Bootstrap trong thiết kế giao diện web
- Hướng dẫn sử dụng thành phần Glyphicons Bootstrap trong thiết kế giao diện web
- Hướng dẫn sử dụng thành phần Dropdown trong Bootstrap
- Hướng dẫn sử dụng thành phần Button groups trong Bootstrap
- Hướng dẫn sử dụng thành phần Button dropdowns trong Bootstrap
- Hướng dẫn sử dụng thành phần Input groups trong Bootstrap
- Hướng dẫn sử dụng thành phần Navs trong Bootstrap
- Hướng dẫn sử dụng thành phần Navbar trong Bootstrap
- Hướng dẫn sử dụng thành phần Breadcrumbs trong Bootstrap
- Hướng dẫn sử dụng thành phần Pagination trong Bootstrap
- Hướng dẫn sử dụng thành phần Labels trong Bootstrap
- Hướng dẫn sử dụng thành phần Badges trong Bootstrap
- Hướng dẫn sử dụng thành phần Jumbotron trong Bootstrap
- Hướng dẫn sử dụng thành phần Page header trong Bootstrap
- Hướng dẫn sử dụng thành phần Thumbnails trong Bootstrap
- Hướng dẫn sử dụng thành phần Alerts trong Bootstrap
- Hướng dẫn sử dụng thành phần Progress bars trong Bootstrap
- Hướng dẫn sử dụng thành phần Media object trong Bootstrap
- Hướng dẫn sử dụng thành phần List group trong Bootstrap
- Hướng dẫn sử dụng thành phần Panels trong Bootstrap
- Hướng dẫn sử dụng thành phần Responsive embed trong Bootstrap
- Hướng dẫn sử dụng thành phần Responsive Wells trong Bootstrap
- Hướng cách sử dụng Bootswatch trong Bootstrap
- Hướng dẫn cách tùy biến hệ thống lưới Grid System Bootstrap dùng Pixel (không dùng %)
- Hướng dẫn cách sử dụng các Plugins Javascript trong Bootstrap: Carousel, Collapse, Buttons, Alert, Popovers, Tooltips, Tabs, ScrollSpy, Dropdowns, Modals vv...

Bài tập tổng hợp: Thiết kế giao diện website hoàn chỉnh bằng Bootstrap, HTML5, CSS3

Đồ án cuối khóa

Thiết kế hoàn chỉnh giao diện website tin tức theo công nghệ HTML5, CSS3, RWD.

Ưu Đãi Chung

- Tặng tài khoản VIP365 khi đăng ký khóa học này.
(Lưu ý: với tài khoản VIP365 học viên sẽ được học toàn bộ tất cả các khóa học thiết kế web và lập trình web tại website hocwebgiare.com trong vòng 365 ngày)
- Tặng bộ công cụ thiết kế web có giá trị.

Khóa học Thiết kế Web chuẩn SEO, Học thiết kế Web, Khóa học Thiết kế Website, Dạy thiết kế web, Học Thiết kế Web Căn bản