hướng dẫn cắt file ảnh sang html

Chào bạn, chủ đề bạn đưa ra khá hay, bây giờ mình hướng dẫn cách cắt giao diện trang http://hoangnguyen.edu.vn rồi ráp bằng tag table, còn tag div mình hẹn bạn ngày khác:

Bước 1: Các bạn phải hoàn thiện bản demo của website trong file PSD, hãy cứ để trên các layer bình thường ( mình sẽ dùng công cụ Slice để cắt, công cụ này không quan tâm bạn có bao nhiêu layer, nó chỉ quan tâm đến bề mặt của file):

Bước 2: Bây giờ chúng ta tiến hành phân tích các vùng và cách thức cắt cho từng vùng:

---- Vùng background: vùng nền cho lặp, nên chỉ cắt 1 khối vuông với kích thước khoảng 2 x 2 px là được ( đủ cho lặp thành 1 hình background hoàn chỉnh).
---- Vùng banner flash và menu ( cắt và đo đúng kích thước để bên design flash thực hiện.
---- Vùng Left: chia ra làm 3 phần: Phần logo, bạn cắt nguyên logo ( vùng này không lặp ), vùng ghi lặp: chỉ cắt 1 khoảng có chiều cao khoảng 1-2 px để lặp theo chiều ngang.; vùng góc dưới: bạn cắt nguyên góc, vì không lặp được.
----Vùng Box: Các box có tính chất giống nhau, các bạn chỉ cần cắt 1 box và phần tiêu đề ( ở đây tôi mặc định vùng tiêu đề bóc là 1 vùng slice: do lười )
+/ Vùng tiêu đề.
+/ Vùng nền box cho lặp.
----- Vùng Footer: bạn cũng cắt 1 vùng cho làm hình nền lặp dài theo chân, với chiều dài như hình vẽ, và cắt 1 góc không thể lặp.
----- Vùng đường thẳng đứng kéo dài từ trên xuống, bạn cắt 1 đoạn ngắn cho lặp.
----- Các đường gạch ngang ....., bạn cũng cắt như vậy cho lặp theo chiều ngang.
----- Các incon, và hình ảnh, bạn muốn lấy thì cắt 1 vùng hình chữ nhật cho vừa vùng hình ảnh là được.

Bước 3: Bạn xuất hình ảnh bằng lệnh: File--> Save for web.

Bước 4: Tạo layout bên Dreamweaver và ráp hình ảnh, background, css.
a/ Tạo Layout chính: Tạo tập tin mới, lưu với file index.html.
- Tạo 1 table 1 cột, 1 dòng có độ rộng = độ rộng file hình ảnh ( ở đây là 1000 px): boder=0; cell pading= cellpading =0 và cho canh giữa, tạo 1 css lấy hình ảnh background làm nền cho lặp)
- Tạo 1 table có 2 cột, 3 dòng ( cột left, và cột bên phải gồm menu, nội dung trang, dòng 1 banner, dòng 2: content, dòng 3 là footer) với độ rộng = vùng giao diện chính ( trừ nền ), có độ rộng: 806 px, cho css với background color=#FFFFF ( màu trắng ).

b/ Định dạng vùng banner và left:
- Góc trên bên trái ( cột 1 dòng 1 của table): chèn hình ảnh logo1 đã cắt, cho độ rộng của cột = độ rộng của hình ảnh.
- Chèn banner vào đúng vị trí ( sau đó sẽ thay = Flash banner).
- Dòng 2 cột 1: Chèn logo2 ( logo bị cắt chia làm 2 vùng) cho canh lề trên ( top) + Định dạng background image: là hình vùng cắt bên trái.
- Dòng 3, cột 1: Chèn hình ảnh góc dưới bên trái.
Kết quả như hình:

c/ Định dạng vùng menu:
- Trước hết, chèn 1 table gồm 4 cột, 1 dòng: ( cột 1: vùng trắng bên trái menu, cột 2 menu, cột 3 là đường thẳng ở giữa và cột 4 là vùng nội dung chính)
- Định dạng độ rộng từng cột: đo độ rộng từng cột bên photoshop và cho chính xác độ rộng từng cột bên HTML ( nhớ chính xác để không bị bể khung)

- Chọn cột 2: chèn 1 table 1 cột và n dòng ( n là số box ) có độ rộng = độ rộng của cột ( hoặc để 100%). 
Dòng 1: chèn menu. 
Dòng 2: chèn 1 table gồm 2 dòng 1 cột. Dòng 1 chèn tiêu đề menu,
dòng 2, địn dạng background, định dạng css.
Các dòng còn lại: tương tự dòng 2, hoặc copy nguyên bản nội dung trên dòng 2.

Tương tự bạn làm tiếp cho phần nội dung và footer nhé. 




tham khảo thêm:


-Video cắt và ráp Layout bằng tag DIV của Giảng viên Nguyễn Đức Anh Kha của trung tâm tin học Hoàng Nguyễn, đưa lên cho các bạn cùng tham khảo.

Khi các bạn đưa sang web hoặc diễn đàn khác, đề nghị ghi rõ xuất xứ, nguồn gốc, xin cám ơn.

Đây là phim table:
http://www.megaupload.com/?d=K1XGA7KC

Đây là phim DIV
http://www.megaupload.com/?d=EC6G94VN

Xin cám ơn thầy Kha.