Lập trình viên code java hay rất e ngại khi gặp phải phần thiết kế web, tuy nhiên một chút kiến thức căn bản có thể giúp java coder có thể tự tin hơn trong việc chuyển đổi từ thiết kế của UI/UX + CUT CSS team sang file jsp hay các dạng  view khác; hoặc có thể thiết kế thô sơ cho trang web của bạn sau đó sẽ chờ đến phase nâng cấp để cải tiến giao diện. Bài viết của tác giả Dirk với tiêu đề Slice and code your first website sẽ giúp chúng ta có cái nhìn cơ bản công việc của những thành viên nhóm design như thế nào. Thậm chí java coder có thể thiết kế một chút website với Photoshop trong khi chờ đợi kết quả thiết kế từ thành viên nhóm UI/UX. Chúc mừng bạn! Nhưng bây giời bạn phải làm cái gì? Bạn làm thế nào để website của bạn có thể chạy tốt. Trong bài viết này, tác giả sẽ giải thích làm thế nào để chia ra và code website bằng html/css.

Okay,
tác giả sẽ giải thích cho bạn làm thế nào để cắt ra thành từng lát template của bạn trong Photoshop và làm thế nào để code nó trong Dreamweaver sử dụng những thẻ DIV.
Tệp PSD & HTMLcủa template này đã có sẵn để tải về và bạn sẽ dễ dàng hơn làm theo những bước chỉ ra. Xem trước cái mà tác giả đã hoàn thành.

Bước 1:

Bạn có thể bắt đầu với việc tải Slice and Code PSD.
Mở nó với Photoshop CS6 và chọn slice tool (có thể dùng Crop tool + lệnh Trim).

Với template mở ra, chúng ta sẽ bắt đầu cắt template này. Trong tương lai, template của bạn sẽ trông phức tạp hơn nhưng hy vọng bài viết này sẽ giúp bạn có thể khởi đầu, bạn cần 1 cái gì đó để bắt đầu chứ?

Bước 2:

Bạn chỉ cần cắt một chút khi cần thiết cái gì đó. Trong trường hợp này sẽ là text của header, chứ KHÔNG phải menu có thể tạo bằng thẻ a.

  • Bắt đầu bằng disabling màn nền (background color) để file PSD sẽ ở dạng transparent. Ctrl + H để ẩn/hiện đường kẻ dọc
  • Kéo thả (Drag) với công cụ slice tool ở một vùng chọn của văn bản phần header, và kéo một vùng chọn mới ở nội dung phía đầu của bạn. Lựa chọn nó và bạn có một phần màu đỏ/cam ( red/orange) ở phía trên và một phần nhỏ ở cạnh kẻ ngang. Làm tương tự với footer chúng ta sẽ có 3 đường kẻ (trên, giữa và dưới).
Phác họa thô:


Bước 3:

Tiếp theo, chúng ta sẽ lưu trữ bằng tính năng web and devices. Click File > Save for Web & Devices (Alt+Shift+Ctrl+S) và lưu nó chỉ ở dạng Images và PNG-24.
Điều này sẽ lưu những sliced images tới 1 map được gọi là “images”. Xóa đi những image không cần thiết và để 4 image theo phác họa thô trên.

Bước 4:

Bây giờ bạn mở Dreamweaver, Ở thanh menu mà chứa File, Edit,… bạn sẽ nhìn thấy một menu được gọi là “Site” và chọn “New Site”
Đặt tên là Slice & Code tutorial và lưu ở thư mục “tutorial”.

Kích Advanced Settings và bạn có thể chọn thư mục cho các hình ảnh - images.
Chọn và tạo một thư mục mới tên là “images”
rồi lưu nó.

Bước 5:

Tạo một trang HTML mới tên là index.html bằng cách lựa chọn nó từ Dreamweaver popup box. với tiêu đề là Slice & Code tutorial.

Bước 6:

Okay good, bây giờ chúng ta có 1 trang index trống rỗng chỉ có tiêu đề mà thôi.
Phía trên bên phải (top right) bạn có một menu được gọi là “Insert” >  “LayOut Objects” > Div Tag in DreamWeaver

Bước 7:

Tiếp theo, với chọn tùy chọn “Insert Div-Tag”
Một hộp - box như cái này sẽ xuất hiện 


click OK
sẽ hiển thị tiếp hộp thoại


click tiếp OK
sẽ hiển thi ra popup chi tiết về các thuộc tánh của phần tử css đang tạo


cứ làm như thế, sau đó CSS của chúng ta bây giờ là:

Bước 8:

Tiếp theo, tạo các phần tử css khác cũng tương tự như trên với nội dung như sau:



























để cho nhanh thì có thể copy đoạn css có nội dung sau vào thẻ <style> ở header

<style type="text/css">

#wrapper {
height: auto;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#content_top {
background-image: url(images/content_top.png);
background-repeat: no-repeat;
height: 6px;
width: 800px;
position: absolute;
top: 100px;
}
#content {
background-image: url(images/content_mid.png);
background-repeat: repeat-y;
width: 800px;
position: absolute;
top: 106px;
}
#content_foot {
background-image: url(images/content_foot.png);
background-repeat: no-repeat;
height: 6px;
width: 800px;
position: absolute;
}
#menu {
height: 30px;
width: 800px;
text-align: right;
padding-top: 10px;
}
#header {
height: 51px;
width: 424px;
background-image: url(images/header.png);
background-repeat: no-repeat;
}
body {
background-color: #e7e2d2;
}
</style>

Bước 9:

Nội dung thẻ body sẽ như sau:
<body>
<div id="wrapper"><div id="header"></div>
  <div id="menu"></div>
  <div id="content_top"></div>
<div id="content">
<br />
<br />
<br />
<div id="content_foot"></div>
</div>
</div>
</body>

Bước 11:

Bây giờ là xem kết quả của các bước code html ở trên. Click vào tệp index.html, kết quả là có trang web vừa được code từ file psd như sau:


Và như vậy chúng ta đã xong code một file psd đầu tiên.


Source code:

From: