Convert PSD to HTML5/CSS3

Lâm Văn Tư TRUNG TÂM ĐÀO TẠO CNTT NHẤT NGHỆ Website: http://nhatnghe.com

Mobile: 090 77 99 627 - Web: dohoa247.com Face: facebook.com/dohoa247 Groups: facebook.com/groups/dohoa247 Video: youtube.com/dohoa247

Convert PSD to HTML5/CSS3 Phần 1: Vẽ giao diện bằng photoshop Phần 2: Cắt giao diện photoshop Phần 3: Code html5 & Css3 Phần 4: Xử lý Responsive web

Phần 1: Vẽ giao diện bằng photoshop B1. Xác định kích thước thiết kế B2. Xác định bố cục B3. Chuẩn bị hình ảnh và nội dung B4. Xác định màu chủ đạo và cách phối màu

Responsive web design

THỰC HÀNH

VERSION HTML MỚI

1. Các thẻ đặc biệt định hướng tìm kiếm

Header, nav, footer, section,...

MySQL SQL Server

PHP ASP, ASPX

Xây dựng web site

Xây dựng website Thiết kế web tĩnh Bước 1: Vẽ giao diện web Bước 2: Cắt giao diện PSD (Cắt slice hình) Bước 3: Cắt HTML/CSS (Convert PSD to HTML) Lập trình web động Bước 4: Xây dựng CSDL (MySQL hoặc SQL Server) Bước 4: Lập trình web bằng PHP hoặc ASP (Lập trình xử lý CSDL)

Screen: 1024x768 http://vnexpress.net

http://static.livedemo00.template-help.com/wt_37765/

VERSION HTML MỚI

Version:

Apple

Quá nhiều lỗi, quá nặng nề và làm hao tốn rất nhiều năng lượng đặc biệt đối với các sản phẩm cá nhân như iPhone và iPad” Steve nhận xét về công nghệ Flash (công nghệ được coi là phổ biến nhất cho các ứng dụng trên nền tảng Web hiện nay

HTML5 & CSS3 HTML5 & CSS3 vẫn đang trong quá trình thử nghiệm, Vì thế nó chưa có 1 quy chuẩn cụ thể. Tuy nhiên hầu hết các trình duyệt đều có phiên bản mới hỗ trợ cho nó

Các chức năng mới HTML5:    

Thẻ canvas dùng cho định dạng hình ảnh Thẻ video và audio hỗ trợ media Nội dung mới cho các thẻ đặc biệt như article, footer, header, nav, section Nhiều dạng form control mới như calendar, date, time, email, url, search

Hỗ trợ trình duyệt

Hỗ trợ trình duyệt



HTML5 có gì mới • Các thẻ đặc biệt định hướng google: footer, header, nav, section,... • Video và audio • form control: calendar, date, time, email, url, search • CSS3 định dạng hình • CSS3 định dạng background

1. Các thẻ đặc biệt định hướng tìm kiếm

Header, nav, footer, section,...

2. Bo góc với CSS

2. Bo góc với CSS - border-radius : bo 4 góc. - border-top-left-radius : bo góc phía trên bên tay trái. - border-top-right-radius : bo góc phía trên bên tay phải. - border-bottom-left-radius : bo góc phía dưới bên tay trái. - border-bottom-right-radius : bo góc phía dưới bên tay phải.

3. Drop Shadow với CSS3

-moz-box-shadow: 10px 12px 8px #000000; -webkit-box-shadow: 10px 12px 8px #000000; box-shadow: 10px 12px 8px #000000;

4. Background gradient body{ background: -moz-linear-gradient(top, #69C, #ffffff) repeat-x background-color:#ffffff; min-height:200px; max-height:200px; }

Form với html5

Video and audio

Các định dạng video trên web: Ogg: Định dạng Ogg với mã hóa video MPEG4: Định dạng MPEG 4 với mã hóa video WebM: Định dạng WebM với mã hóa video

Phần mềm chuyển đổi định dạng Video Cài đặt phần mềm (Free)

Chèn video

Chèn audio

Tương lai html5 & CSS3 ?@#

Tham khảo http://html5rocks.com http://w3schools.com

THỰC HÀNH

Thiết kế giao diện web + Layout web + Phối màu cho web

Cắt giao diện PSD Định dạng ảnh cho web: *.Jpg, *.gif, *.png,... Tối ưu quá ảnh cho web

Layout HTML, CSS Header, footer, nav, section, article,…

Responsive web design C1. Thiết kế 2 site C2. Thiết kế trên 1 site và xử lý với CSS Query http://vnexpress.net http://m.vnexpress.net http://joomla.org

Responsive web design

Responsive web design

Tham khảo http://html5rocks.com http://w3schools.com http://960.gs http://static.livedemo00.templatehelp.com/wt_37765/

Thank You@

Lâm Văn Tư Mobile: 090 77 99 627 - Web: dohoa247.com Face: facebook.com/dohoa247 Groups: facebook.com/groups/dohoa247 Video: youtube.com/dohoa247