Ban đầu designer sẽ cung cấp cho frontend developer một file PSD
Tôi dựa vào file PSD lên giao diện HTML hoàn chỉnh giống file đã thiết kế.
Sau khi đã hoàn chỉnh công đoạn HTML thì sẽ đến bước rap vào source code.
Tùy vào ngôn ngữ khách hàng yêu cầu PHP thuần hay wodpress.
Chi tiết về cắt HTML và CSS
Chúng ta sử dụng công cụ slice tool phím tắt là c trong photoshop để cắt cái icon ra. Sau đó click vào chọn vùng chọn và căn chỉnh cho khớp thôi.
Click đúp chuột vào phần chúng ta đã chọn, trong Name chọn tên muốn lưu.
Tìm ra cái thằng cần cắt trong phần layer, cứ click vào con mắt thôi, click đến khi nào không thấy nó nữa thì dừng lại click cho nó hiện lên rồi dùng phím alt + click chuột trái để ẩn đi những thằng còn lại.
Tùy chỉnh như hình dưới đây và chọn save, đối với ảnh thì các bạn chọn lưu file dưới định dạng jpg còn những cái khác thì chỉ cần định dạng png.
chọn save
Code: html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="baitap1.css">
<title>Bai tap 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="to">
<form class="form">
<p>Login Form</p>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" name="submit" value="Sign In">
<a>Lost Your Password ?</a>
</form>
</div>
</body>
</html>