5337 fans
1036 reader
138 followers

Từ PSD sang HTML (phần 3/5)

Publish by: Demon Warlock
In category: CSS/HTML
74 comments

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

Mediafire download

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

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

thoi

Tôi thấy bạn gõ ‘testess’ là chữ tự động chạy ra ,sao tôi làm thế ko được,mong bạn hướng dẫn chi tiết !
Thank
- http://minhman.me Võ Minh Mẫn
  
  Cái đó anh DW dùng texter để làm. Tuy nhiên thì texter đã rất cũ rồi, ko hổ trợ nữa.
  Bạn có thể tìm và apply zen-coding và editor mà bạn đang xài xem sao
- trung
  
  đó là đoạn code viết sẵn do ng hướng dẫn làm ra sẵn
- An DaoDuc
  
  Giống như kiểu gõ tắt trong Unikey đó bạn.
Nam

sau khi mình code HTML xong và bắt đầu sang CSS,mình viết bằng Dreamweaver ,mình đã cài Edit CSS và viết lệnh “resetess” nhưng không được,mình không biết làm thế nào ,mong các ACE giúp đỡ
- thoi
  
  mình cũng đang cần biết vấn đề này,khi bạn gõ “resetess” code tự chạy ra,mình làm ko đc ,mong mọi người giúp đỡ
  - http://www.facebook.com/vo.minh.man Võ Minh Mẫn
    
    Cái đó là ứng dụng texter, tuy nhiên texter đã cũ và ko có bản nâng cấp mới. Nên các HDH như win 7 và 8 đều ko hoạt động tốt được.
    Tốt nhất bạn nên dùng zen-coding và tích hợp và editor mà bạn đang xài, sẽ hiệu quả hơn texter luôn đó
http://www.wantplugin.com/ Loc_rabbirt

cái này tuy cũ nhưng rất hay, đang tập tành theo
cuithom

Không biết anh có còn trả lời nữa không. Vì bài này đã lâu quá rồi. Nhưng vì em đang rất cố gắng học phần này và nó cũng khá quan trọng với em nên em vẫn cứ hỏi mong anh hoặc bạn nào biết thì trả lời hộ mình. Em làm theo như trong clip của anh, nhưng đến phần “Main Setting” em gặp trục trặc. Phần “content” của em nó không hiển thị. Khi xem bằng firebug => tag “Layout”. Em thấy kích thước phần “content” là “800 x 0″. Vì thế toàn bộ phần nội dung chính của website đều có màu xám, không màu trắng như của anh. Css của em nó thế này:
#content{
background: white;
}
#sidebar{
float:left;
width:166px;
}

#primary{
font-size: 1.2em;
width:630px;
float:right;
}

Không biết em đã sai ở đâu. Mong mọi người chỉ giúp
- http://www.izwebz.com Demon Warlock
  
  E email cho a code HTML và css của e qua đ/c Izwebz at yahoo chấm com.
  - cuithom
    
    Em gửi mail rồi ạ. Cảm ơn anh. Chờ email phản hồi của anh ạ
thanh

ban oi link 1 die roi.up lai dc ko.thanks
Chí Công

Chào anh DW,

Sao em thực hành giống anh, mà cái footer nó cứ nhảy lên trên sát Navigation. Anh có thể chỉ em cách khắc phục được không?
NguyenThanh

anh ơi anh có thể up “Từ PSD sang HTML p3 và p4″ sang MF đc ko anh
mrloveht

anh ơi up lại phần này cho bọn em với . Bên megaupload bị cấm rồi không cho download nữa . Tks anh ^^.
http://pcbviet.com syhaunguyen

Anh ơi! up link tải video đi anh, megaupload không dùng được nữa rồi. Thank anh!
Châu Vĩnh Tiến

Em rất rất,không nói lên lời những gì mà anh đã làm cho mọi người.
Cảm ơn anh.
Thu Ha

Thanks a nhìu!
Ngọc Lan

Admin ơi phần mềm để viết CSS và nó hiển thị luôn ở bên cạnh như trên là gì ạ???
Ai bít chỉ giùm với.
Thanks!!!
- Ngọc Lan
  
  Mình đã tự tìm đưọc trong bài những câu hỏi thường gặp rùi. http://www.izwebz.com/faqs/ hihi ^^
anh vũ

Video phần 3 bị lỗi mờ quá không coi được, A DW đưa link MF để down lại được không ah?
p2vweb

sao e xem bang firefox.google chomre thi ko
Sao em xem bằng firefor,google chomre thì không bị gì hết.Nhưng em xem bằng IE thì hiển thị không giống như mình thiết kế dậy anh DW?
Sơn Tài

Link die rồi anh ơi, up lại qua MF dùm em với.
Châu Phi

Hi DW.
Trước khi xem clip này em đã cố gắng code CSS cho giống với trong hình photoshop. Một số cái được, một số cái thì không. Nên khi bắt đầu xem clip em cảm thấy rất hấp dẫn chứ không “chán” như anh tự than đâu ^.^
Đỗ Đức Diện

Anh DW nhiệt tình quá, ốm mà vẫn cố làm nốt video đến tận phút thư 52. hjx mặc dù hình như từ năm 2009 nhưng h em mới biết web nên comment ủng hộ ạnh Thanks anh!
tran anh khoa

Serri clip cua anh rat hay va bo ich. thank anh rat nhieu. nhung anh cho em hoi cai phan mem soa thao html cua anh ten gi vay? cho em xin dc khong?
dang cho tin tu anh
công văn

chao` anh dw. em mới tạo được 1 trang web có 3 cột không hiểu sao em dung css sửa layout khi xong xem lại thi có 1 cột ngoài cùng bên fai? bi rời khoi lay out dính vao` canh man hình fai? anh co thể giúp em cách sửa dược không? thanks anh nhièu.
ho binh

Tuyệt vời!! thanks bờ rồ nhiều, rất có ích cho new mem như em….
xiboomvn

Thanks anh rat nhiu!!!!! izwebz rat hay! Chuc anh nhieu suc khoe!
neo_

anh dw ơi anh có thể cho em file style.css được không anh và file image nữa.
cảm ơn anh rất nhiều video của anh rất hay và rất bổ ích. chúc anh khỏe mạnh thành công và chia sẻ thêm cho anh em designer nhiều kinh nghiệm hơn.
tuanbmt

hu hu …….phần 3 down không được bác có link mediafire không :
giúp mình với +_+
Haimv

anh oi ! Cho em hoi cai soft ma anh cai de auto gen code html & css la gi vay a. em thay anh go : beginhtml, resetcss la no tu dong gen ra.em da cai deverlopver toolbar roi ma khong duoc.

Cam on anh !
haimv

Cảm ơn bác,Bác giảng dậy thật dễ hiểu.Em đã vỡ được nhiều điều.
Dương Hùng

Anh DW và các bạn yêu web có thế giúp em code html và css cho phần khoanh tròn đỏ này được ko? em đang gặp khó khăn trong phần này. thanks so much !

link hình: http://ww2.sinaimg.cn/large/693e99a2jw1dgomtzak7tj.jpg
http://ww2.sinaimg.cn/large/693e99a2jw1dgomtzak7tj.jpg Dương Hùng

Anh DW và các bạn yêu web có thế giúp em code html và css cho phần khoanh tròn đỏ này được ko? em đang gặp khó khăn trong phần này. thanks so much !
http://noweb zeroweb

Bạn DC Rama sử dụng addon Ruler down tại link :https://addons.mozilla.org/vi/firefox/tag/ruler sẽ đo chính xác được px của 1 đối tượng.
Phuongnd

chào bạn DW mình đang học web và thấy trang này rất hay nhưng hình như bạn code thiếu 1 xíu trong hướng dẫn này thì phải.đó là sau thẻ div header đến content phải thêm
rongdat

Anh DW ơi, em không down được phần 3 và 4. Nó báo lỗi. Chắc là link có vấn đề. Anh xem lại giúp em nhé.
- DC Rama
  
  Hi anh DW!
  Em đang học phần convert psd sang html/css,loạt tuts của anh rất dễ hiểu,em đã làm được phần này.Tuy nhiên có một số chỗ em thắc mắc mà search trên google không tìm được:
  1.Em dùng photoshop và cả fireworks để xác định các giá trị padding,margin…Nhưng em không hiểu làm sao xác định chính xác padding của mỗi thành phần là bao nhiêu.Cụ thể phần div#logo p#login{…}…làm sao để đo chính xác giá trị padding như anh làm?
  2.Theo em thấy thì trong ảnh photoshop,mình không biết đường viền (border) của các box ở chỗ nào thì làm cách nào để đo được padding và margin?
  3.Nếu chúng ta ước lượng các giá trị padding và margin với kích thước sai lêch vài px thì có chấp nhận được không?
  ————
  Em biết anh rất bận nên đã có tìm kiếm và hỏi một số diễn đàn,nhưng câu trả lời của các anh chị không nhất quán,người thì bảo cố gắng đo,người bảo có thể ước lượng..mà em lại không biết cách đo chính xác…em rối trí quá…nên chỉ còn cách hỏi anh thôi.
  Xin cảm ơn anh vì trang web tuyệt vời này.Chúc anh khỏe và nhiều thành công!
  - Dương Hùng
    
    bạn có thể bật cây thước lên trong photoshop lên kéo thanh thước ra 2 đầu vị trí bạn muốn đo sau đó mở cửa sô info lên vào window chọn info sau đó bạn có thể đo bằng cách vẻ 1 đường từ điểm đầu tới điểm bạn muốn đo và xem nó dài bao nhiêu bên cửa sô info nhé. chúc bạn thành công

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.