4881 fans
1036 reader
124 followers

Phần 1: Chuyển PSD thành xHTML

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

Tutorial Details
Độ khó: Trung Bình
Thời gian: 24:39 phút
File size: 318.47 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ị

Ở những bài trước bạn đã học được những kiến thức căn bản về CSS và xHTML. Trong bài này tôi sẽ hướng dẫn bạn cách chuyển một file PSD sang xHTML. Đây cũng là giai đoạn cuối cùng trong cả hành trình học CSS và xHTML của bạn.

Chúng ta cũng phải thực sự cảm ơn thế mạnh của CSS, nhờ nó chúng ta có thể tạo ra trang web với code xHTML “sạch sẽ” chứ không còn như mớ bòng bong với hàng trăm dòng code của bảng và các thành phần font face, color … như trước đây.

Đây là phần thứ nhất trong series gồm 3 phần. Trong phần này tôi sẽ nói sơ qua về cách xây dựng trang web trong Photoshop và cách lấy những tấm hình mình cần cho phần 2 là phần viết code xHTML.

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

http://[email protected] Huân

=.= anh ơi down cái phần 4 về làm sao xem được ạ
http://abc Winkevin

cảm ơn izweb rất nhiều nhiều.những kiến thức em có đa phần là học từ đây. chúc izweb ngày càng phát triển hơn nữa. chúc ae sức khỏe
kha tran

Cám ơn anh DW vì tất cả những chia sẻ của anh.
Từ trước tới giờ, gần như tất cả tài liệu e tự học về web đều từ những tuts của anh.
Chúc anh sức khỏe !
hoang phan

bài viết rất hay,thank a Demon Warlock nhiều
Pham Tuan

Phần 4 không dowload đươc, không biết do link hay gì. Nhờ kiểm tra lại giúp. Thank
đỗ thành nguyên

anh ơi sao mấy cái video phần 2 trở lên em down về nhưng không xem được
Nguyễn Thị Hoàng Anh

Rất bổ ích. Cám ơn đã hướng dẫn. Mong sẽ có thêm nhiều bài hướng dẫn bổ ích
http://chưacó Hoàng Quốc Phong

Anh rất tuyệt vời. Phải nói trong trang web của anh là cả một kho kiến thức khổng lồ, và quan trọng nhất. Cảm ơn anh rất nhiều vì đã nhiệt tình làm những đoạn video hết sức bổ ích, chắc chắn em sẽ học hỏi ở anh để tự hoàn thiện bản thân mình:D
. Hi vọng em sẽ được trao đổi với anh để học hỏi thêm nhiều kinh nghiệm cũng như kiến thức từ phía anh !
Ok (^_^) thank anh và chúc anh mọi điều tốt lành
Lê Phú Sang

A làm e bắt đầu cảm thấy thích thú về web rồi đó. Thanks a vì đã chia sẽ những bài học bổ ích như thế này.
phamvanven

hay lem
Toàn

Công nhận admin làm mấy cái video này rất hay! hài hước nữa chứ! ~^^~
Trần Tuyết Nga

Anh ơi cho hỏi sách PSD2HTML anh có thông tin gì về ngày xuất bản , giá tiền , nơi mua không . Em đang rất muốn mua mà ko biết ở đâu ?
Lionel Messi

Cám ơn anh rất rất nhiều. Tình cờ em ghé website của anh và thấy rất hữu ích. Em sẽ học hỏi từ từ. Chúc anh mọi sự tốt lành!
huhoso

Cảm ơn anh rất nhiều. Hiện nay em cũng đang làm 1 trang web nên các video của anh rất hữu ích cho em. Cảm ơn anh
hồ hoàng chương

mới vào web của anh. thấy pro thiệt. Vì em nghiêng cứu về asp.net nên những thứ ko áp dụng được nhiều. em chỉ áp dụng được css với html..
cảm ơn…
tan tai

Anh DW oi, Các clip bài hướng dẫn của anh rất hay.
Em muốn xem tất cả các đoạn video của anh từ cách hướng dẫn Css , html, cắt file hình rồi xuất ra thành html được ko anh. Anh có thể post nhiều bài hướng dẫn lên ko anh.
Cám ơn anh.
http://hpleduit.vnweblogs.com hpleduit

admin ơi cho e hỏi sao file video e down về mở không chạy được hết chỉ xem được một nữa thôi. Chỉ xem tới phần hướng dẫn cách cắt ra fie ảnh thôi còn cách cắt như thế nào thì em không xem được.
Anh có thể chỉ cách em cắt ra file ảnh được không? Và anh hương dẫn em cách cắt file PSD ra file file CSS được không ạ
em cảm ơn nhiều.
E-mail: [email protected]
Huynh Minh Thien

anh DW ơi,anh làm sao xem được các bài mà anh đả làm theo thứ tự,
chứ em thay anh hay kêu xem lại bài củ mà em ko bik bài nào củ nua?^^

thanks anh nha DW
ProTP

- Anh cho em hỏi cách bố trí một thư mục chuyên nghiệp giống như mấy website bán template hay làm.

Ví dụ:

temlapte name: clean

clean
+ thư mục psd /* chứa file .psd*/
+ thư mục xhtml – css gồm 2 thư mục con
+ thư mục images /* chưa những hình ảnh minh cắt ra từ file .psd */
+ thư mục css
+ tập tin index.html
+ tập tin about.html
+ tập tin contact.html
+ …
+ …

Anh xem bố trí vậy có hợp lý không, anh co cách nao bố trí va sắp đặt chuẩn theo anh là hay nhất không. Cảm ơn anh nhiều
luckyluk1

anh demon worlock ơi. bài này em lam theo anh .cũng khá giống bản gốc, nhưng mở trên ie 6 thì nó bị lộn xộn hết cả( cái footNav và cái ảnh, cả postitem nữa), còn cái background tranparent thì bị mất hết rồi. Bản gốc file đính kèm của anh cũng bị y chang vậy luôn.
Anh có cách nào fix không. Anh có thể chỉ e cách fix các lỗi hầu hết thường gặp không, đặc biệt với IE ( 6,7 chẳng hạn)
arjmoto

Phần mềm 7zip cũng nối lại file được đấy.Mọi người và anh DW dùng thử xem. Nó cũng gọn nhẹ sử dụng để mở những file bi cắt ra và cũng Free đó.
Aliza

ngày nào cũng vô web của anh học, nhưng hôm nay thanks anh một thể cam on anh rat nhieu voi những bai học hay.
http://123 BAOLAM

-Anh DW thiết kế web đẹp quá, giống mấy trang nước ngoài (đơn giản nhưng đẹp)
-Anh có thể viết tut về quá trình học web của a ko –> để e biết hướng đi mà tự học được, thanks a nhiều, chúc a sức khỏe

PS: giọng đọc tut của a nghe hay quá, rất có sức truyền cảm !
Khánh

Đang làm theo cái tutorial này ^_^ phải chi học trường lớp cũng không buồn ngủ như làm theo tutorial này ^_^ thanks izweb
http://www.izwebz.com Demon Warlock

Thì bài đó chỉ có 3 phần thôi đó mà.
vantu

anh ơi sao em tim hoài không thấy video:Phần 4: …………xHTML,em chi tim thay : Phần 2: Xây dựng code xHTML,Phần 1: Chuyển PSD thành xHTML,va phần 3 thôi.Vui lòng giúp em voi anh ! thank all !
danienloc

Các cậu cho tớ hỏi sao tớ down mấy video clip đuôi avi từ Media về thì chỉ nghe được tiếng mà hok thấy được hình,tớ đang dùng Jetaudio để xem,hok biết đó có phải là lí do hok xem được hok nữa ^^! Vui lòng giúp tớ nha ! thank all !
NDT

Cám ơn Demon Warlock nhiều lắm!
Trang WEB của bạn rất có ý nghĩa và đi sâu hơn các trang khác cùng chủ đề. Khi bắt đầu thì không có gì hoàn hảo 100% cả. Chúc WL sức khỏe và luôn đam mê như thế.

Tiện đây mình muốn hỏi 1 câu.
Mình có dùng trình Hjslit Join 4 file của bạn “tải về rồi” .Join completed nhưng khi chạy file vừa Join thì nó chỉ chạy có mỗi file đầu 24′ trong khi mình có làm với 6 files khác của mình thì nó chạy đủ cả 6. Mình ko hiểu sao nữa!
- học hỏi
  
  cái video này có mỗi 24 phút thì nó chạy đến đó chứ thế nào nưã
  mà đã join lại làm sao mà có đến 6 file được. chỉ có 1 file thui chứ
Aliza

chà, mình thích site này của anh Demon Warlock lắm cơ. mình học chăm chỉ lắm. Nhưng mình đang học cắt 1 trang mà ko bít cắt sao, trang này thiết kế có bo góc và drop shadow nên mình cắt hơi khó. Cắt hoài ko được. Hix, ai bít chỉ mình dzới.
daocuthinh

em muốn hỏi la các anh chị đi trươc học nhiêu chắc biết hơn là bây giờ em mới vọc vạch học HTML vậy anh chị co thể poss nhiều bài day trực tuyến kiểu này ko em muốn học.Cảm ơn anh chị nha!

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.