Phần 1: Chuyển PSD thành xHTML
- August 27, 2009
- 14 comments
Ở 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.
Thời lượng: 24:39
Xem Demo: Clean ‘n’ Clear
Link Download file dạng .avi chất lượng cao: MegaUpload
Link MediaFire: Phần 1, Phần 2, Phần 3,Phần 4.
Lưu ý: Bạn cần Hjsplit để join các file lại (phần mềm miễn phí)
File size: 318.47 MB
Download file PSD, html và CSS: Clean ‘n’ Clear
Tách hình với Background Eraser »
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!
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.
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!
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ứ
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 !
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 !
Thì bài đó chỉ có 3 phần thôi đó mà.
Đ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
-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 !
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.
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 đó.
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)
- 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
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