Từ PSD sang HTML (phần 3/5)
- September 9, 2009
- 53 comments
Đâ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.
Thời lượng: 52:00
Link Download định dạng .avi chất lượng cao: MegaUpload
MediaFire: Phần 1, Phần 2
File Size: 175MB
Những phần khác: Phần 1, Phần 2, Phần 4, Phần 5
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
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
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
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
mình đo kích thước ảnh bằng công cụ gì vậy ,
anh tra loi cho em nhe ! trang web cua cong ty em viet bang Asp.net
anh ơi cho em hỏi .cái trang của công ty em được viết bằng ngôn ngữ gì !
@kaks
ASP.NET có thể viết bằng C#, VB.NET…
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
Caảm ơn anh DW, hay quaá đi
Hay quá, cảm ơn a Demon Warlock thật nhiều nha. I love Demon Warlock and izwebz very much!
Izwebz những ngày không có Demon Warlock, thật là buồn
( 
(
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!!!!
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ứ
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!!!
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 :*-
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ả .
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
Cảm ơn anh rất nhiều!!!:D
Ẹc bảo bạn đọc FAQS ở trên rồi mà , sao không chịu đọc kĩ thế
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.?
Đọc phần FAQS sẽ thấy http://www.izwebz.com/faqs/
Có gì mà gấp chứ , không có thì copy thôi hehe .
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êù!
Các bài viết kủa U hay và bổ ích lém.
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
) 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 
! 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`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.
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 !
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
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.
Thx nhtera nha.
@Cupid những câu hỏi của Em có hết trên phần FAQs
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/
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.
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
cám ơn anh. bài viết hay