• 5334 fans
  • 1036 reader
  • 138 followers
Phần 3: Tạo dáng với CSS
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 46:39 phút
  • File size: 143 Mb
  • Yêu cầu: Căn bản HTML & CSS và Photoshop
Có 8 bài viết trong series Từ PSD sang HTML (series 2009)Hiển thị

Đây là phần 3 và cũng là phần cuối cùng của series tutorial chuyển file PSD thành xHTML. Trong phần trước bạn đã xây dựng xong code HTML và đã validate thành công. Bây giờ tới công đoạn dùng CSS để tạo dang cho giao diện cho giống với mockup trong photoshop.

Khi chuyển từ mẫu thiết kế sang HTML, bạn nên làm càng giống càng tốt với mẫu thiết kế. Kể cả là font chữ, khoảng cách, màu sắc … vì đó là ý tưởng thiết kế của người làm. Chúng ta phải có trách nhiệm làm giống y như trong thiết kế ban đầu.

Phần này khá dài, do vậy bạn nên đi lấy ly nước, đem theo ít bắp rang rồi mới vô cinema coi được =p

Link reset CSS: Eric Meyer CSS Reset

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • ĐQNam

    A xài firefox phiên bản mấy vậy? a dùng phần mềm gì để viết code HTML và CSS vậy a.

    • ĐQNam

      A làm sao mà reset CSS được. mà anh dung phần mềm gì vậy ở đoạn 50 giây đến 5 phút 30 ak

  • Minh cùi bắp

    Không còn biết nói gì hơn lời cảm ơn chân thành tới anh DW!
    Mọi thứ quá tuyệt vời! Chúc anh luôn luôn mạnh khỏe!

  • đỗ thành nguyên

    anh oi chung nao anh phat hanh dvd anh thong bao nhe em muon mua ve hoc! anh goi y cho mua lun nhe!

  • narutokage

    Bài này sẽ là bài hình thành cho em khái niệm về thiết kế web. Em rất cám ơn anh.

  • vukien

    anh ơi, em k reset được cSS

  • vukien

    úi hay quá. em đang tìm hiều cái này

  • lusubu

    cảm ơn anh DW video rất hay

  • bang

    Chúc anh luôn mạnh khỏe………
    Thank. Bài viết rất hay, em học được rất nhiều từ những video này nhưng có vài chỗ không hiểu



    Khi em bỏ class= search va id=s đưa vào trong top-page thì nó chạy tùm lun, em không hiều gì, nhờ anh giải thích dùm

  • Kenlyson

    Nếu viết web mà cắt hính như thế này thì khi em muốn đổi màu nền hoặc update trang web thì phải xây dựng lại photoshop !!! >’” “< a DW có cách nào khắc phục k a?

  • // hattieu

    Rất hay .cảm ơn anh rất nhiều !

  • cuongit

    cam on anh Demon Warlock rat nhieu rat nhieu.
    chuc anh manh khoe va hanh phuc.

  • nguyen lan

    Rất cảm ơn anh đã giúp bọn em học khá hay hihi. Em rất kém phần margin và padding, dù đã đo trong trong psd nhung cũng không được chính xác các anh chị có thể chi giúp em cách đo và tính margin và padding để tăng thêm độ chính xác cho trang web được không ak. Cảm ơn mọi ng nhìu nhìu.!!

  • antam162

    thanks! anh qua tuyet voi.rat huu ich cho moi nguoi moi hoc thiet ke .hi

  • Việt Dũng

    Anh demon warlork ! vui tính quá. E xin phép gọi í cho a demon là từ “tạo dáng” anh có thể sử dụng là “định dạng” cũng được đó a!

  • Manh

    Em cảm ơn anh nhiều. chúc anh mạnh khỏe để có những bài viết mới bổ ích cho mọi người

  • http://www.gmail.com Đặng Viết Thạo

    Rất rất hay và chuyên nghiệp, mình sẽ học từng bước lại từ đầu, học ở đây một thời gian ngắn bằng mấy năm học ở những chỗ lung tung, cảm ơn anh Demon, cảm ơn Mr v2m

    Chúc các anh sức khỏe để cống hiến thêm cho làng lập trình và thiết kế web

  • tuấn tèo

    tuyệt vời quá anh ơi. anh thật tâm huyết với công việc. Em cảm ơn anh nhiều

  • Monkey.D.Luffy

    Cho em hoi anh viet code tren cong cu j vay?

  • http://www.longvuit.com Long Vu

    Anh ơi, em xem video hướng dẫn code CSS của anh. Em nghe anh bày là đo kích thước chính xác các thành phần trong photoshop trước khi cắt, cách đo kích thước trong photoshop thế nào vậy anh ?

  • http://www.izwebz.com Demon Warlock

    Ồ! cảm ơn em nhiều nhé. Nhớ thông báo thêm những link hỏng để anh sửa nhé.

    Nếu ngại download thì sau này mua bộ DVD Set của Izwebz vừa tiết kiệm thời gian vừa ủng hộ trong web ;)

    • Trưởng Nguyễn

      Anh có đĩa DVD của izwebz em muốn mua thì mua ở đâu vậy anh ?
      Những video anh hướng dẫn rất có sức truyền cảm hjhj
      Thank anh !

      • http://duongpho.net MrV2m

        Hiện tại thì DVD Set của anh DW vẫn chưa phát hành bạn àh!

  • http://www.longvuit.com longvuit

    Anh DW “DreamWare” ơi, cái link tới bài viết Tạo dáng với CSS Phần 1 Phần 2 bị báo lỗi: Internal Server Error. Nhờ anh sửa lại dùm cí.
    Các video hướng dẫn của anh rõ ràng dễ hiểu, cả ngày ngồi down video mà mún xỉu lun. Cám ơn anh nhiều.

  • Gấu út

    hi các anh các chị, em cũng mới tập làm web nè, em thấy vui lắm khi biết trang web nhà ta, anh admin up clip hướng dẫn lên tuyệt quá, mấy anh chị cho em nick yahoo để có gì em tiện học hỏi nha, cám ơn cả nhà…

    • Gà công nghiệp

      Bạn nên đọc lại phần các câu hỏi thường gặp

  • Gà công nghiệp

    @nhtera: Hi hi! Sao kỳ ta, chắc là do mình không để ý rồi! Sr mọi người vì đã hỏi câu ngớ ngẩn

    Công nhận anh DW hướng dẫn hay quá! Mình mới học có mấy bữa mà cũng hiểu được đôi chút rồi, trước giờ muốn chuyển PSD sang HTML mà không biết bắt đầu từ đâu!!!!

  • nhtera

    @Gà công nghiệp
    Link trên phần bài viết đó , mà hỏi google cũng ra ngay thôi .

  • Gà công nghiệp

    Anh DW ơi, anh cho em xin cái file reset css!

    Trong video anh có nhắc sẽ cho link download, chờ mãi không thấy! Híc!

    Cảm ơn anh, video của anh hướng dẫn hay quá!

  • Trí

    Anh DW ơi em làm theo anh thì firefox chạy tốt.Mà qua IE thì cái footer nó hỏng.Em down file của anh về xem thấy cũng bị.Cái hình bubble.png góc trái nó bị choảng màu bên IE. Anh fix giúp em nhé :)

  • duocvang9999

    Thật tuyệt! cám ơn anh rất nhiều.

  • ntphong

    Trước tiên xin cám ơn anh về tut.Bài này thật sự hay em coi hết tut 3 phần nhưng hong chán như anh nói đâu. em mới học css nên phần này em thấy rất hấp dẫn :) . nhưng góp ý anh tí. em đeo tai nghe để nghe anh nói rỏ hơn. nhưng đối lúc máy anh phát ra những tiếng tít(lúc anh tắt mà chưa save hay gì đó) nó làm em đuối(quá lớn). vì chỉnh âm thanh nhỏ không nghe rỏ lúc nói nên chỉnh lớn tới lúc có âm thanh đó thì nó lại lớn quá. Lần nữa cám ơn anh.

  • hoangnm

    anh cũng edit nốt cái link phần 4 vào bài phần 2,3 cho mọi người tiện down

Izwebz store
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.

Izwebz facebook group

Social connect

Recent Comments

Archives