4778 fans
1036 reader
122 followers

Vertical Scrolling: Slice & Code

Publish by: Võ Minh Mẫn
In category: HTML 5 & CSS 3
27 comments

Tutorial Details
Độ khó: Trung Bình
Thời gian: 1 giờ 30 phút
File size: 358 MB
Yêu cầu: Căn bản HTML & CSS

Trong bài trước, chúng ta đã tao ra được giao diện website mang tên “Izwebz survey” bằng photoshop. Và bài tiếp theo ngày hôm nay thì chúng ta sẽ chuyển từ PSD>HTML với định dạng HTML5 & CSS3.

Chúng ta học gì trong bài này?

Công cụ slice trong photoshop
HTML 5 structure
CSS 3 selector

Hình minh họa cấu trúc của HTML 4 và HTML 5: Link

Trong video bài giảng mình sẽ nói rõ hơn về bảng cấu trúc này. Thôi, không dài dòng nữa, hãy xem video phía dưới để rõ hơn.

Download định dạng .mp4 chất lượng cao MediaFire: Part 1 (190mb), Part 2 (118mb)

Võ Minh Mẫn

Nghề chính là chém gió, quăng bom và ném lựu đạn. Nghề phụ là cắt cỏ, chém chuối, cưa cây......

huy nguyen

có cách nào để nó hiện thị được trên ie 6,7 ko anh
hịtoker1

Bạn ơi! Có cách nào mà add font vào web lun hok?
Mong bạn hướng dẫn cho mình 1 bài nhé. Thanks bạn nhìu
Sáng Ơi!

Phần 2 sao chưa có vậy anh! Hai phần trên anh post đều cùng là phần 1. Anh post phần 2 nhé anh! Chúc anh nhiều sức khỏe!
bao hoa

A làm thêm nhiều video về html5 và css3 cho mọi người cùng tham khảo nha,cam ơn a nhiều
ryan

hi.anh coi với tấm hình như vậy ” http://kenh143.vcmedia.vn/skin/index.gif ” chỉ dùng css không thôi có thể tạo ra một “cloumn” giống kênh 14 mà không cắt hình ra không anh.mong được chỉ giáo.
- Nhật Nam
  
  Cái đó gọi là css sprite đó bạn. Lên mạng search cũng có 1 số bài nói về nó.
Tạ Thúc Cường

Bài viết tuyệt vời, rất hữu ích!
Đã có “Vertical Scrolling”, hy vọng một ngày nào đó Izwebz sẽ có một bài hướng dẫn đơn giản dễ hiểu về “Horizontal Scrolling” như bài “Vertical Scrolling” thì còn gì bằng.
Thanks Võ Minh Mẫn, thanks Izwebz!
mèo ngố

Chào bạn , các video của bạn rất hay. Hy vọng sẽ có thêm những video bài học về CSS3 va HTML5 để các designer mới như mình có thể hiểu sâu hơn về development web. Chúc bạn vui !
Thanchet_tk21

anh ơi em ko biết viết comment này ở đâu cho hợp lí nên em đành viết vào đây, các anh có thể làm vài video hướng dẫn về XML đc ko ạ, em đọc về cái đó khó hiểu quá, cũng chưa hiểu nó có thể làm đc gì nữa , tks các anh nhiều
pham ngoc thach

Sẵn anh chỉ em luôn cái! Nếu mà có 2 đối tượng section, để cho css hiểu thì mình phải khai báo là first-child và last-child. Vậy
Nếu mà có nhiều hơn 2 section thì mình phải khai báo như thế nào để css hiểu vậy anh Mẫn?
- KimDanh
  
  Cái này là mình dùng ==>> section:nth-child(số_thự_tự_section)
  Mình thấy anh Mẫn đã trình bày vấn đề này rõ trong video rùi đó bạn, bạn xem kỹ lại nhé.
  Thân!
fullonline

anh Mẫn ơi, hiện tại ở sài gòn a biết chỗ nào học đồ họa web được… chì giúp em
- http://minhman.me Võ Minh Mẫn
  
  Hiện tại ở sài gòn thì có 2 chổ có thể tin tưởng dc đó là arena và trung tâm tin học của ĐH Khoa học TN. Về học phí thì ở TN rẻ hơn arena rất nhiều.
dat12012

Em xem bài của anh rồi , và em không biết được khi nào thi dùng thẻ khi nào thì dùng , ý nghĩa của hai thẻ đó thật trừu tượng.
- dat12012
  
  Em xem bài của anh rồi , và em không biết được khi nào thi dùng thẻ section khi nào thì dùng the article, ý nghĩa của hai thẻ đó thật trừu tượng.
  - http://minhman.me Võ Minh Mẫn
    
    Cái này thì mình phải tùy biến thôi cậu ạh, theo như nguyên tắc thì section nằm trong article, tuy nhiên, trong bài thì tớ có thể dùng section để bao quát toàn bộ một khu vực của website. ^^!
    - http://levinh.net Lê Quang Vinh
      
      Bạn có thể có những video hướng dẫn kỹ hơn về html5 và css3 đc ko? cám ơn bạn video rất hay và bổ ích
thanh sun

mình download về nhưng join xong ko xem dc.
- thanh sun
  
  mình xem dc rồi. Quên chưa cài winrar nên ko đọc đc.
http://luckyluu.tumblr.com luckyluu

Anh Demond ơi, hôm rồi em có gởi một bài cho anh mà không thấy anh đăng cũng ko thấy anh phản hồi vậy
Quang Tèo

Tinh thần chia sẻ của các anh thật đáng trân trọng. Em rất thích những serial hướng đẫn từ A đến Z (Ps, HTML, CSS, MySQL, PHP) của các anh.
Xin cám ơn các anh nhiều
Nova

Thanks
fullonline

Cám ơn bạn rất nhiều, hy vọng bạn sẽ có nhiều bài hay hơn nữa về HTML 5 & CSS 3….
http://trantam.net Bình Tâm

Tuyệt vời, cám ơn anh Mẫn đã có những bài viết rất hay. Phải công nhận anh giỏi cả về design và coding. Cheers!
RynAki

Rất hay , HTML5 vs CSS3 là công nghệ mới mong cậu có thể phát huy thêm những video Design như thế này
Thanks rất nhiều
KimDanh

Cám ơn anh rất nhiều!
Nhưng anh ơi, link download sao vẫn chưa có ạh? Mong anh có thể check lại link ạh!
Chúc anh có nhiều sức khỏe để có thể ra thêm nhiều tut hay nữa.
- http://minhman.me Võ Minh Mẫn
  
  Ax, lại quên. Đã chữa lại rồi nhé.

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.