• fans
  • 1036 reader
  • followers
Từ PSD sang HTML (phần 3/5)
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 52:00 phút
  • File size: 175 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 thứ 3 trong series chuyển file PSD sang HTML. Trong phần thứ hai, chúng ta đã xây dựng xong code HTML cho giao diện. Trong phần 3 này chúng ta sẽ sử dụng CSS để định dạng cho giao diện. Phần này rất dài, 52 phút OMG! cũng khá là nhàm chán nữa. Nhưng nó cũng rất quan trọng. Tôi cũng mất khá nhiều thời gian cho phần này, do vậy hy vọng các bạn thích tutorial này.

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á.

  • http://No kool

    Anh ơi cho e xin đoạn code reset CSS của anh đc ko ? e ko tìm đc cái hoàn chỉnh giống của anh. gửi cào địa chỉ mail cho e nhá.thanks a.
    bibi.net0310@gmail.com

  • bubu

    Anh có thể post bài(template) của anh lên đây cho bọn em download về thực hành được không? Em làm theo anh về thiết kế dao diện nhưng nó rối mù hết cả lên. Cảm ơn anh

  • http://www.tangaugame.com Hoàng Sơn

    Cảm ơn anh DW nhé! a viết rất tỷ mỉ và chi tiết, rất vui tính
    ai giúp em với:Phần sidebar em cho float:left và Primary e chưa cho thuộc tính (float:right). thì Primary tràn lên lấp đầy chỗ trống sidebar để lại .( điều này thì rất bình thường , ko có gì lạ)
    Nhưng khi Em cho phần primary float:right thì nó lại xuống dòng
    ý em muốn hỏi là làm thế nào để sidebar (float:left ) và primary ( float:right ) như anh làm

    • http://www.tangaugame.com Hoàng Sơn

      hi hi!
      mình hiểu rồi, mới đầu mình cho wrapper:width:800px
      rồi mình cho sidebar:166px
      primary:630 px
      là nó sẽ được như anh DW
      sau lỗi lần này mình đã hiểu tầm quan trọng của việc đo px trong PTS :)

  • minh bao

    mình đo kích thước ảnh bằng công cụ gì vậy ,

  • nguyentuan891987

    anh tra loi cho em nhe ! trang web cua cong ty em viet bang Asp.net

  • http://www.cattuongpc.com.vn/ kaks

    anh ơi cho em hỏi .cái trang của công ty em được viết bằng ngôn ngữ gì !

    • nhtera

      @kaks
      ASP.NET có thể viết bằng C#, VB.NET…

  • http://www.cattuongpc.com.vn/ kaks

    hay lắm anh ơi .ok .từ khi vào trang này càng tháy kiến thức web thật là mênh mông

  • ocquanth2811

    Caảm ơn anh DW, hay quaá đi

  • DoiSam

    Hay quá, cảm ơn a Demon Warlock thật nhiều nha. I love Demon Warlock and izwebz very much!

  • Tuấn

    Izwebz những ngày không có Demon Warlock, thật là buồn :(( :((

  • Minh Hải

    Anh Demon Warlock và mọi người cho em hỏi, em mở bài làm bằng IE thi có hiển thị hình, mà mở bằng firefox thì nó không hiển thị 1 hình nào cả, em cảm ơn anh Demon Warlock và mọi người!!!!

    • Tuấn

      Bạn nói như thế thì ai mà biết đc mà giúp. Ít ra bạn hãy Up lên mạng, rồi đưa link cho mọi người, để còn biết mà xem chứ

  • dcthang

    DW! Cảm ơn anh rất nhiều, trên đời còn có những người như thế, những bài viết của anh thật đáng giá. Cố gắng nữa nhé, tôi luôn chúc anh và các người bạn ở izwebz.com mạnh khỏe, thành công và hạnh phúc.
    Tôi yêu website izwebz.com, yên mến các bạn!!!

  • nothing1306

    Anh “cái phần này rất là buồn chán để xem nhưng đó lại là phần bắt buộc nếu mà bạn muốn thật sự học css” ơi, cho em hỏi.
    Trong clip em thấy đoạn:
    #sidebar div#news li img {
    float: left;
    clear: both;
    margin-right: 5px;
    }

    Nhưng sao trong những phần khác thì anh không dùng clear: both;

    Thanks anh nhiều :*-

  • vanthiem

    Hay quá ! Nói thực lòng khi xem cái này mình đã mở mang đầu óc ra nhiều mặc dù cái này mình cũng làm rồi nhưng do là tự mày mò và ngiên cứu nên nó cũng có phần khó khăn nhưng bây giờ thì OK rồi .Thanks very much !
    Chúc anh những ngày làm việc hiệu quả .

  • BaoPham

    Anh admin co thể cho em cái source cua bai từ PSD sang HTML dc khong. Em muốn dùng cái đó để làm theo cai tutorial của anh

  • Nguyễn Anh Hiếu

    Cảm ơn anh rất nhiều!!!:D

  • nhtera

    Ẹc bảo bạn đọc FAQS ở trên rồi mà , sao không chịu đọc kĩ thế :D

  • Nguyễn Anh Hiếu

    Em có phần mềm đó rồi, nhưng khi gõ BEGINHTML thì làm như thế nào cũng không hiện ra cấu trúc giống trong video ấy được. Anh có thể hướng dẫn em cách sử dụng phần mềm đuwowcj ko ah.?

  • nhtera

    Đọc phần FAQS sẽ thấy http://www.izwebz.com/faqs/ :D
    Có gì mà gấp chứ , không có thì copy thôi hehe .

  • Nguyễn Anh Hiêú

    Anh thử ghi lại cho em phần mềm mà trong video gõ BEGINHTML thì nó ra một loạt chữ âý. Em tìm mãi ko thâý. Em đang cần gấp>Thanks các anh nhiêù!

  • SadAngel

    Các bài viết kủa U hay và bổ ích lém.

  • duocvang9999

    Hi bác DW! thực chất bác DW bảo cái phần làm CSS này dài (gây buồn chán cho người xem :D) nhưng em nghĩ là không phải. Bác DW rất pro, edit code CSS ngay trên firefox làm bên này thì bên kia nó biến hóa “thần thông”, giống như bác DW có phép vậy :D ! ko cần phần mềm hỗ trợ highlight mà bác vẫn viết code pro như thường. rất hay-rất cuốn hút-rất dễ hiểu… chúc bác DW luôn khỏe ! love `izwebz__abENT__#46;com` :D!

  • Adam

    e đang theo dỏi các phần của video này. Rất là hay, ko biết a có cái tut nào về PHP chưa, e muốn xem lắm.
    yahoo : vitxitin8x.

    Cảm ơn anh cho những bài viết.

  • paime

    Anh ơi sao em code giống theo anh nhưng mà sao phần content của em nó không giống như của anh. phần sidebar thì ở trên, còn phần primary thì không ở bên phải sidebar mà nó lại ở bên giưới. Và em cũng không hiểu position sử dụng như thế nào nữa. Anh giúp em với nhé.
    Thanks !

    • http://www.tangaugame.com Hoàng Sơn

      mình cũng gặp lỗi giống bạn, mình cũng gặp lỗi phần sidebar và primary như bạn
      .
      position:absolute là định vị tuyệt đối
      Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để
      lại bất cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt
      đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng
      kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.

      Absolute position : định vị tương đối
      Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong
      tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài
      liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative.

      nick yahoo mình: cogjsaj.depzaj có gì mình cùng trao đổi

  • cupid

    Sorry em vừa mới biết về izwebz nên chưa tìm hiểu kỹ.
    Cảm ơn anh admin đã chia sẻ cho mọi người.

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

    Thx nhtera nha.

    @Cupid những câu hỏi của Em có hết trên phần FAQs

  • nhtera

    Cái này anh DW có nói lâu rùi mà :
    https://addons.mozilla.org/en-US/firefox/addon/60
    Tự tạo code thì bạn dùng chương trình này
    http://lifehacker.com/238306/lifehacker-code-texter-windows
    + code reset css ở đây :
    http://meyerweb.com/eric/tools/css/reset/

  • cupid

    Em có vào trang https://addons.mozilla.org/en-US/firefox/ và tìm “Edit CSS” thấy cũng có nhưng mà mở lên đánh chữ restcss mà nó cũng không tự tạo ra những cái code cơ bản như của anh.

  • cupid

    Anh admin ơi cho em hỏi chút. Cái chương trình dùng để chỉnh sửa CSS mà anh dùng trong video này là gì vậy, và tải nó ở đâu ạ.
    Thanks anh nhiều

  • huynho

    cám ơn anh. bài viết hay

Newbie

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