Bài 3. THIẾT KẾ GIAO DIỆN WEB BẰNG PHOTOSHOP
3.3. XUẤT PSD SANG TRANG WEB HTML
4.3.2. Các bước thực hiện
Việc xuất từ file PSD thành một trang web HTML được chia thành 2 giai đoạn:
a. Giai đoạn 1: Cắt layout
- Cần phân tích giao diện đã được thiết kế để có cái nhìn tổng thể nhất về các thành phần sẽ được cắt. Từ đó xác định được các phần ảnh lưu lại và phần ảnh cần bỏ đi. Thông thường các giao diện khi được cắt sẽ được chia làm 4 phần:
+ Header: gồm logo, ngôn ngữ và menu top
+ Phần Left: menu left, các hình ảnh quảng cáo, thông tin mới.
+ Phần Right: gồm sản phẩm, tin tức…
+ Phần footer: thông tin tổ chức, cá nhân, copy right…
- Sử dụng công cụ Slice Tool của Photoshop để lựa chọn các vùng cần cắt và tiến hành cắt hình ảnh. Việc cắt chỉ thực hiện đối với các hình ảnh, button hay cách giao diện được thiết kế trên photoshop.
- Đối với phần văn bản trên trang thiết kế và các phần dữ liệu hình ảnh lặp lại sẽ bỏ đi. Phần văn bản sẽ được xử lý bằng việc lấy từ cơ sở dữ liệu.
b. Giai đoạn 2: Định dạng lại layout cho trang web với HTML và CSS
Sau khi thực hiện cắt giao diện cho trang web, kết quả thu được là một folder hình ảnh. Bây giờ công việc của người lập trình là chuyển hình ảnh thành trang web tĩnh sử dụng ngôn ngữ HTML và CSS. Thông thường để làm việc ở giai đoạn này, người thiết kế sẽ phải sử dụng công cụ hỗ trợ đó là FrontPage hoặc Adobe Dreamwaver đồng thời phải có kinh nghiệm làm việc với ngôn ngữ đánh dấu HTML và CSS. Giai đoạn định dạng này sẽ được chia làm hai bước:
Bước 1: Tạo trang HTML gồm các thành phần cơ bản:
- Trang index.html
- Sử dụng thẻ <DIV> để cấu trúc trang index theo phác họa ban đầu khi thiết kế. Tùy thuộc vào cấu trúc mỗi trang mà có cách sử dụng <div> để định dạng khác nhau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Thiết kế Website bằng Photoshop</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
// Nội dung trang web
</body>
</html>
69
Bước 2: Sử dụng CSS kết hợp với các hình ảnh đã được cắt ra từ file PSD để định dạng cho các vùng được thiết kế từ trước: top_background, main_container, top_bar, header…
Ví dụ: Định dạng cho thành phần Body:
<body>
<div id="top_background"> //Định dạng background toàn trang
<div class="main_container"> //Định dạng vùng làm khung chứa
<div class="top_bar">
// Định dạng phần top bar
</div>
<div class="header">
// Định dạng phần header trang web
</div>
<div class="main_box">
<div class="content"> // Định dạng khung hiển thị nội dung <div class="left_content">
// Định dạng nội dung chính bên trái
</div>
<div class="right_content">
// Định dạng nội dung chính bên phải
</div>
</div>
</div>
</div>
</div>
<div class="footer">
//Định dạng footer
</div>
</body>
body{
margin:auto; //Căn lề tự động
background:url(images/bg.png) repeat-x; // Thiết lập ảnh nền position:relative; // Thiết lập định vị cho các thành phần con }
70 Định dạng cho footer:
Hoặc định dạng một số thành phần khác:
footer{
// Ảnh nền cho footer
background:url(images/bg_foot.png) no-repeat;
width:100%; height:315px; // Độ rộng và chiều cao position:absolute; // Định vị vị trí so với thành phần cha bottom:0px;
left:0px;
z-index:100 }
.main_container {
margin: 0 auto; width: 960px;
background: url(images/logo_bck.png) no-repeat;
} .top_bar {
float: right; position: relative; top: 0px; right: -11px;
width: 101px; height: 24px;
background: url(images/login_bck.jpg) no-repeat; padding-left: 11px;
}
ul.login li { display: inline; padding-left: 2px; } ul.login li a { color: #f2f2f2; font-size: 10px; } ul.login li a:hover { color: #89c0dd; }
.header { clear: both; height: 80px; margin-bottom: 53px;
}
71
Hình 4- 30. Hình ảnh trang web sau khi định dạng bằng HTML và CSS
72 TÓM TẮT NỘI DUNG BÀI 3
1. Bố cục trang web
- Bố cục trang web (layout web) là việc thực hiện trình bày các nội dung, tài liệu lên trên một webpage.
- Để xây dựng bố cục cần chú ý:
+ Độ phân giải trang web
+ Kỹ thuật xây dựng layout: Gồm có layout 2 cột với kích thước cố định, layout 3 cột với các cột có các tỉ lệ kích thước khác nhau, Layout 4 cột hoặc kết hợp 3 cột với 4 cột
+ Phương pháp xây dựng bố cục: Sử dụng bảng và sử dụng CSS.
2. Thiết kế layout
- Các thành phần cần thiết kế: logo, thanh chuyển hướng, nội dung, header, footer, phần trống...
- Các bước thiết kế:
+ Bước 1: Tạo tài liệu
+ Bước 2: Tạo background và các vùng khác nhau trên trang web
+ Bước 3: Sử dụng phần mềm FrontPage để thiết kế logo, xử lý bo góc, hình ảnh, nội dung cho trang web...
3. Xuất PSD sang trang web HTML
- Cắt layout: Cần phân tích giao diện đã được thiết kế để có cái nhìn tổng thể nhất về các thành phần sẽ được cắt.
+ Header: gồm logo, ngôn ngữ và menu top
+ Phần Left: menu left, các hình ảnh quảng cáo, thông tin mới.
+ Phần Right: gồm sản phẩm, tin tức…
+ Phần footer: thông tin tổ chức, cá nhân, copy right…
- Định dạng lại layout cho trang web bằng HTML và CSS + Bước 1: Tạo trang HTML cơ bản
+ Bước 2: Sử dụng CSS kết hợp với các hình ảnh đã được cắt ra từ file PSD để định dạng cho các vùng được thiết kế từ trước: top_background, main_container, top_bar, header…
73 BÀI TẬP BÀI 3
Câu 1: Kể tên các thành phần khi thiết kế layout cho trang web? Phân tích từng thành phần?
Câu 2: Truy cập trang web http:\\www.cnd.edu.vn. Cho biết layout của trang được thiết kế theo dạng nào? Độ phân giải của trang web?
Câu 3: Nêu các lệnh cơ bản của Photoshop để làm việc với layer?
Câu 4: Trình bày các thanh công cụ cơ bản của Photoshop làm việc với layer dạng văn bản?
74 BÀI THỰC HÀNH BÀI 3
Bài thực hành số 1: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện các trang chủ website bán hành kĩ thuật số.
Hình 4- 31. Trang chủ website bán hàng kĩ thuật số
75
Bài thực hành số 2: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện các trang chủ website bán đồ trang sức.
Hình 4- 32. Trang chủ website bán đồ trang sức
76
Bài thực hành số 3: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện các trang chủ website công ty.
Hình 4- 33. Trang chủ website của một công ty
77
Bài thực hành số 4: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện các trang chủ website Business Co.
Hình 4- 34. Trang chủ website Business Co.
HƯỚNG DẪN TỰ HỌC
- Thường xuyên tìm hiểu cấu trúc của các trang web nổi tiếng trên mạng. Tìm ra phương pháp xây dựng bố cục phù hợp với xu thế các trang web hiện tại.
- Thành thạo các công cụ của phần mềm Photoshop.
- Thực hành thường xuyên với việc thiết kế giao diện trang web bằng phần mềm xử lý ảnh.
78 NỘI DUNG THẢO LUẬN BÀI 3
Chủ đề: Phương pháp cắt layout hiệu quả cho trang Web
Bước 1: Phân tích giao diện và đánh giá tổng quan cũng như các qui định chung trước khi tiến hành cắt.
Ví dụ đối với một trang Web khi được thiết kế trên Photoshop có giao diện sau:
Khi tiến hành cắt có thể chia tạm thời thành 3 vùng:
Vùng Header
Vùng Content Vùng Footer Bước 2: Cắt từng vùng đã xác định.
Bước 3: Tiếp tục thực hiện cắt và chia nhỏ các vùng Header, Content và Footer.
79
Ví dụ đối với Header được cắt ra ở trên có thể thực hiện cắt thành các phần nhỏ hơn như sau:
Vùng header 1
Vùng header 2 Vùng header 3
Đối với mỗi vùng nhỏ hơn có thể cắt thành các hình ảnh nhỏ hơn nữa nhằm tăng khả năng xử lý, cũng như tốc độ truy cập của trang web. Ví dụ phần header 1 có thể cắt nhỏ thành 2 cờ thể hiện ngôn ngữ trên trang web:
Chú ý:
- Việc cắt layout càng tỉ mỉ, chi tiết thì việc thực hiện chuyển sang định dạng HTML càng hiệu quả.
- Cần xác định rõ ràng các thành phần được giữ lại trên trang web và thành phần được loại bỏ để việc cắt layout được thực hiện chính xác.