Thiết kế giao diện website Online (Free)

GIỚI THIỆU

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. Giao diện website còn ảnh hưởng đến vấn đề SEO và Page Rank website của chúng ta nếu chúng ta dùng các công nghệ cũ thiết kế không đáp ứng chuẩn RWD (Responsive Web Design). Giao diện website thiết kế thân thiện với di động (Mobile-Friendly) sẽ giúp hỗ trợ rất nhiều cho quá trình SEO website của chúng ta. 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. Các website thiết kế theo công nghệ RWD sẽ đáp ứng tốt được chuẩn SEO mới nhất trên Mobile của Google (Mobile-Friendly)

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

3. BOOTSTRAP: Hỗ trợ việc thiết kế giao diện web Responsive nhanh hơn với Framework Bootstrap có sẵ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.


Đối tượng: Tất cả những ai muốn có một nghề chuyên nghiệp trong lĩnh vực thiết kế & xây dựng website cho các công ty hiện nay.

 
Yêu cầu: Dành cho tất cả mọi đối tượng.

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. 

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. Các giao diện thiết kế ra đáp ứng chuẩn HTML5, CSS3, BOOTSTRAP, RWD (Responsive Web Design) để có thể chạy tốt trên tất cả các thiết bị như Desktop, Tablet, Mobile vv... và đáp ứng chuẩn SEO hiện này là giao diện website thân thiện với di động (Mobile-Friendly).
Bạn hãy kiểm tra website của bạn đã đáp ứng công nghệ và giao diện thân thiện với di động hay chưa tại đây =>Click kiểm tra

- Sau khi hoàn tất khóa học, học viên có khả năng thiết kế được giao diện các website tương tự như:

Bạn sẽ học được những gì?

- Sau khóa học này Bạn sẽ nắm vững các kỹ thuật thiết kế web với:

1 - Thiết kế web Adobe Dreamweaver CS3/CS4/CC.
2 - Thiết kế giao diện web với Adobe Fireworks CS6.
3 - Thiết kế hiệu ứng Flash cho website với Adobe Flash CS6 & Swishmax 4.
4 - Thiết kế giao diện & tạo hiệu ứng cho website bằng CSS3.
5 - Thiết kế giao diện website bằng HTML5 & Thiết kế các banner quảng cáo cho website bằng HTML5.
6 - Thiết kế web theo công nghệ RWD (Responsive Web Design) để có thể chạy trên tất cả các thiết bị Desktop, Mobile & Tablet.
7 - Thiết kế web theo chuẩn CSS3 Media Query.
8 - Lập trình web với Javascript.
9 - Thiết kế giao diện web theo công nghệ Bootstrap để có thể chạy trên tất cả các thiết bị Desktop, Mobile & Tablet


NỘI DUNG CHƯƠNG TRÌNH

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.

 
  (Xem chi tiết)

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.

 
 (Xem chi tiết)

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...
- Xem thêm các bài học về cách thiết kế trang web bằng Bootstrap tại Blog hocwebgiare.com - Click vào đây


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. (Xem demo tại đây)