SlideShare a Scribd company logo
1 of 41
Download to read offline
Hướng dẫn thiết kế website bằng photoshop
 Thiết kế website là gì
 Thiết kế web bằng joomla
 BÍ KÍP KINH DOANH ONLINE DÀNH CHO BẤT ĐỘNG SẢN
 Cách viết bài chuẩn SEO và bán hàng tốt
 SEO như thế nào để lên TOP năm 2015
Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp
và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường
Line 1px để tạo chiều sâu một cách tinh tế cho website.
Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ
chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một
trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.
Kết quả cuối cùng
_____________________________________________________________________
Bên dưới là kết quả từ sự nỗ lực của chúng tôi, một bố cục web gọn đẹp, chuyên nghiệp.
Demo: http://wegraphics.net/demo/item/download-movie-tut/
Quá trình thiết kế web miễn phí bằng photoshop
______________________________________________________________
Tôi khuyên bạn nên phác thảo trước khi thiết kế web bằng cách sử dụng Photoshop, nó là bước quan trọng đầu tiên.
Hãy vẽ toàn bộ bố cục trang web của bạn ra một tờ giấy để ghi nhớ vị trí và đặc điểm của toàn bộ các đối tượng (các
cột,Button, Module, Slider…)
Dưới đây là bản phác thảo cho “dự án” website của tôi, mang tên Download.Movie.
Bước 1: Tài Liệu (Document)
Chúng ta hãy bắt đầu với Photoshop. Đầu tiên, tạo một file có kích thước 1024×1200 pixels với độ phân giải 72
pixels/inch, nền trong suốt. Nhập mẫu 960 grid (12 Col Grid), nó rất hữu dụng để tạo website trong khoảng 960
pixels.
Bước 2: Tạo phông nền (Background)
Tạo vùng lựa chọn (dùng the Selection Tool) kéo hết toàn bộ tài liệu, tạo một layer mới đặt tên là „background‟, tô
màu #f9f9f9 cho vùng lựa chọn (Alt+Backspace), sau đó khóa layer này lại. Tạo layer mới đặt tên là „Top’. Dùng
Rectangle Marquee Tool tạo một hình chữ nhật ở đầu trang (chiều cao khoảng 270 pixels, màu #29729f). Vào
Blending Options, tick vào Gradient Overlay, đặt Blend Mode thành Soft Light, Scale 150%.
Duplicate layer „Top‟, tạo thêm 1 layer mới, nhấn Ctrl+Click vào „Top‟ à Ctrl+E. Đặt tên lại cho Layer vừa gộp là
„Top‟.
Vào Filter Filter>Noise>Add Noise.
Tạo Layer mới đặt tên là „Login‟ Dùng Rectangle Marquee Tool tạo một biên ngang trên Top chiều cao 5px, tô màu
#162850, sau đó dùng Rounded Rectangle Tool tạo một ô nhỏ gần góc phải của „Top‟, cũng tô màu #162850.
Tạo chiều sâu cho vùng này bằng cách dùng Drop Shadow như hình:
Bước 3: Logo
Chúng ta sẽ đặt một Logo ở vùng top-left của web.
Để tạo hiệu ứng soft light cho Background, bạn có thể sử dụng công cụ Elliptical Marquee Tool tạo một hình Elip
màu trắng, sau đó Add Gaussian Blur cho nó là 40px , chỉnh lại Opacity cho phù hợp. (Mục đích để làm sáng nhẹ
vùng Logo). Tạo tiếp một elip dẹt, làm mờ nhẹ và Opacity là 20%.
Tạo thêm 3 hình elip (mỗi hình 1 layer), đặt fill là 0% (fill chỉnh ở khung Layer), thêm Gradient Overlay cho mỗi
elip như hình bên dưới.
Bây giờ là phần việc thiết kế logo, hãy sử dụng trí tưởng tượng của bạn. Ở đây tôi sẽ dùng một số Shape có sẵn
trong PTS.
Dùng Rounded Rectangle Tool vẽ một hình vuông nhỏ (giữ nút shift trong khi kéo nó mới ra hình vuông). Tiếp tục
dùng Custome Shape Tool vẽ một mũi tên nhỏ.
Rasterize 2 Layer này, sau đó dùng hình mũi tên để cắt nó ra khỏi hình vuông. Nhớ xoay hình vừa cắt một tí cho
đẹp.
Thêm Style cho hình trên như sau:
Bây giờ dùng Type Tool (T) viết tên công ty (hoặc cái gì bạn thích), add style giống như style vừa dùng với icon ở
trên.
Công đoạn cuối cùng để hoàn tất Header cho website là thêm Menu và khung Login/Signup. Dùng Type
Tool và thêm Drop Shadow nhẹ cho text.
Bước 4: Down-Header
Dùng Rounded Rectangle Tool vẽ một hình chữ nhật lớn dưới Logo, thêm Drop Shadow nhẹ, sau đó đặt một bức
ảnh bạn thích vào trong.
Bây giờ, chúng ta sẽ tiến hành tạo phần bên phải silder
Tạo một hình chữ nhật phía bên phải, đặt Fill là 0% và add style Gradient Overlay và Drop Shadow, chi tiết bên
dưới.
Thêm text vào (thích ghi gì cũng được), có thể dùng Font Dejavu Sans (30 pt, trắng) cho tiêu đề và font Lucida Sans
(12 pt, #0b537f) cho văn bản bên dưới. Vẽ tiếp một hình chữ nhật biên mềm bằng cách dùng Rounded Rectangular
Tool (radius 2px, color #6fc630), nhấn Ctrl+T và xoay nó một tí, cuối cùng ta thêm một lớp mặt nạ, sẽ cho ra kết
quả sau.
Nhắc nhỏ: Luuv thấy chỗ Layer Mask không cần thiết mà lại dễ gây khó hiểu nhưng tôn trọng tác giả bài viết Luuv
sẽ để y nguyên như vậy, nếu bạn nào không làm được bước này có thể comment bên dưới, Luuv sẽ giải thích thêm.
Add style cho khối màu xanh như hình
Tiếp theo, ta sẽ thêm 2 nút phía bên dưới, màu cam và màu xanh, vẫn tiếp tục với công cụ Rectangle Tool (M)…
Thêm Bevel and Emboss và Gradient Overlay để làm cho chúng trở nên chuyên nghiệp hơn.
Làm tương tự cho nút còn lại.
Thêm text cho các nút, thêm một tí Gradient Overlay (dùng màu xanh cho nút màu xanh và tương tự cho nút màu
cam) và Drop Shadow nhẹ, tinh tế cho text để tạo hiệu ứng như sau:
Bước 5: Nội dung
Phần này là cốt lõi trong cách bố trí của chúng tôi, nơi khách vào web có thể dễ dàng tìm thấy thông tin hữu ích.
Chúng tôi muốn xây dựng cách bố trí hai cột đơn giản với một số hình ảnh và mô tả, dưới đây là kết quả chúng tôi
muốn hướng đến.
Tôi không muốn làm phiền bạn với những thứ không cần thiết. Rõ ràng là bạn có thể sử dụng những kĩ thuật mà bạn
đã sử dụng trong phần Header để nhận ra các đối tượng trong phần này. Một vài ví dụ ư? 2 ảnh chụp trong mục
“Coming soon on Download.Movie” được thực hiện bằng cách sử dụng các bước tương tự mà chúng tôiđã tiến hành
ở phần down-header, chỉ có duy nhất một điểm khác biệt đó là: bạn phải add Color Overlay (từ Styles; màu đen,
Opacity 30%). Nút „play‟ được ghép từ 2 thành phần giống như Logo. Sau đó bạn phải thêm Drop Shadow màu đen
70%. Một lần nữa, để làm nút „read more‟ bạn phải nhớ những gì chúng ta đã thực hiện với 2 nút màu xanh và cam
ở trên, bây giờ thay vì màu cam, xanh lá và xanh lam, hãy sử dụng màu xám.
Bước 6: Footer (Chân trang)
Thêm 3 hình chữ nhật (ở trên và dưới màu #cfdcf8, ở giữa là #162850) như hình.
Thêm hiệu ứng Gradient Overlay nhẹ cho Layer màu xanh lục sau đó Rasterize toàn bộ các Layer –> Add Noise.
Cuối cùng là tạo danh sách một số link cần thiết. Để tạo chấm nhỏ trước mỗi link, bạn chỉ cần sử dụng Ellipse Tool,
giữ Shift và kéo thành một vòng tròn nhỏ, tô màu #cfdcf8 cho nó và chỉnh lại độ Opacity xuống còn 20%. Duplicate
để tạo ra nhiều chấm hơn.
Chúng ta cần phải tạo thêm mô tả mục (description box), cách làm nút Read more tương tự như cách đã giới thiệu ở
phần trước, chọn font Lucida Sans. Cuối cùng là thêm Copyright ở dưới cùng.
Chuyển từ PSD sang HTML/CSSBây giờ chính là lúc xây dựng cấu trúc HTML/CSS, hãy nhìn vào hình
bên dưới để hình dung cấu trúc chính của website.
Bước 7: Cấu trúc HTML
Trước hết chúng ta cần tạo 2 file trắng: index.html và style.css. Sau đó, bằng cách sử dụng trình soạn thảo văn bản
yêu thích của chúng tôi (tôi viết code của tôi thông qua Notepad), chúng ta có thể khởi tạo tài liệu HTML dưới dạng
Doctype, Head và Body.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
</body>
</html>
Bây giờ, theo cấu trúc mô tả ở hình trên, chúng ta có thể viết cấu trúc cơ bản của html.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top_background">
<div class="main_container">
<div class="top_bar">
</div>
<div class="header">
</div>
<div class="main_box">
<div class="slide">
</div>
<div class="tagline">
</div>
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Thêm phần Reset vào style.css như sau:
Code:
/* CSS Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset,
form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline; background: transparent; }
ol, ul { list-style: none; }
:focus { outline: 0; }
Bước 8: Background, Top-bar và Header
Xuất các hình sau ra khỏi file PSD để tạo Header cho web như kế hoạch.
Việc đánh dấu cho Top-bar và phần Header, chúng tôi sẽ sử dụng các list ngẫu nhiên cho menu và tag h1 cho Logo.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top_background">
<div class="main_container">
<div class="top_bar">
<ul class="login">
<li><a href="#">login |</a></li>
<li><a href="#">sign-up</a></li>
</ul>
</div>
<div class="header">
<div class="logo">
<h1><a href="#">Download.Movie</a></h1>
</div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="main_box">
<div class="slide">
</div>
<div class="tagline">
</div>
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Thêm vào style.css đoạn Code sau. Lưu ý rằng ta sẽ import font Dejavu để sử dụng cho phần down-header.
Code:
* General */
@font-face { font-family: 'DejaVuSansCondensedBook'; src:
url('DejaVuSansCondensed-webfont.ttf') format('truetype'); }
body { background: #f9f9f9; font: 12px "Lucida Sans Unicode", sans-serif;
line-height: 1.5em; color: #555; }
a { text-decoration: none; }
#top_background { background: url(images/top_bck.jpg) repeat-x; }
.main_container { margin: 0 auto; width: 960px; background:
url(images/logo_bck.png) no-repeat; }
/* Main-container classes */
.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; }
.logo { float: left }
.logo h1 a { display: block; width: 345px; height: 50px; background:
url(images/logo.png) no-repeat; text-indent: -9999px; margin: 16px 0 0 40px;
}
ul.navigation { float: right; margin: 30px 40px 0 0; }
ul.navigation li { display: inline; margin-left: 30px; }
ul.navigation li a { color: #fff; font-size: 14px; text-shadow: 1px 1px
0px #155479; }
ul.navigation li a:hover { text-decoration: underline; }
Bước 9: Main-box, down-header và contents
Bây giờ, ta sẽ thêm vào phần down-header một Slider (trình diễn ảnh). Để tạo được một silder đẹp, chúng tôi sử
dụng plugin gọi là Cycle.
Đầu tiên ta tải jQuery plugin về máy và tạo file „jquery.cycle.lite.min.js‟
Mách nhỏ: Tức là mình sẽ tạo một Folder tên là Template, tiếp tục tạo một Text Document mới tên là
jquery.cycle.lite.min.txt, sau đó Paste toàn bộ nội dung của file jQuery (vừa tải về lúc nãy) vào, đổi lại định dạng
tệp là jquery.cycle.lite.min.js.
Tiếp theo, tải một file jQuery nữa về máy và tạo file jquery.js. Thêm vào index.html đoạn code sau:
Code:
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.cycle.lite.min.js"></script>
</head>
Đối với các thành phần trong main-box ta sẽ sử dụng các hình sau (xuất hình ra khỏi PSD).
Viết lại cấu trúc của phần main-box như sau:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Download.Movie - A great database of movies</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top_background">
<div class="main_container">
<div class="top_bar">
<ul class="login">
<li><a href="#">login |</a></li>
<li><a href="#">sign-up</a></li>
</ul>
</div>
<div class="header">
<div class="logo">
<h1><a href="#">Download.Movie</a></h1>
</div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="main_box">
<div class="slide">
<img src="images/screenshot1.jpg" alt="screenshot" />
<img src="images/screenshot1_2.jpg" alt="screenshot" />
<img src="images/screenshot1_3.jpg" alt="screenshot" />
</div>
<div class="tagline">
<h2>The best way to watch your favourite movies</h2>
<span class="know_more_green"><a href="#"></a></span>
<p>The use of commerce is conducted in this way, spurring and
drawing on innovations in electronic funds transfer, supply chain
management.</p>
<span class="cta_browse"><a href="#"></a></span>
<span class="cta_signup"><a href="#"></a></span>
</div>
<div class="content">
<div class="left_content">
<h3>Featured entries this week</h3>
<p>We want to provide only high-quality DVD movies to our
members. High-quality,
easy-to-find: the best of the week.</p>
<ul>
<li><img src="images/screenshot2.jpg" alt="screenshot"
/><h4 class="orange"><a href="#">The first movie this week</a></h4><p>The
group sets out for the treasure. They walk to Pete's cousin's house</p><span
class="details">dur. 110’ | action | 2011 | <a
href="#">more...</a></span></li>
<li><img src="images/screenshot3.jpg" alt="screenshot"
/><h4 class="green"><a href="#">The first movie this week</a></h4><p>The
group sets out for the treasure. They walk to Pete's cousin's house</p><span
class="details">dur. 110’ | action | 2011 | <a
href="#">more...</a></span></li>
<li><img src="images/screenshot4.jpg" alt="screenshot"
/><h4 class="cyan"><a href="#">The first movie this week</a></h4><p>The group
sets out for the treasure. They walk to Pete's cousin's house. </p><span
class="details">dur. 110’ | action | 2011 | <a
href="#">more...</a></span></li>
</ul>
</div>
<div class="right_content">
<h3>Featured entries this week</h3>
<div class="box_trailer">
<a href="#"><img src="images/screenshot5.jpg"
alt="screenshot" /></a>
<span class="meta_info meta_orange">action |
12.04.2010</span>
<h4 class="orange"><a href="#">A new movie is coming on
our website</a></h4>
<p>Rumpelstiltskin tricks a mid-life crisis burdened
Sdrok into allowing himself to be erased from
existence and cast in a dark alternate...</p>
<span class="trailer_more"><a href="#"></a></span>
</div>
<div class="box_trailer">
<a href="#"><img src="images/screenshot6.jpg"
alt="screenshot" /></a>
<span class="meta_info meta_green">drama |
12.04.2010</span>
<h4 class="green"><a href="#">Another movie
downloadable</a></h4>
<p>Work causes a single mother to move to China with her
young son; in his new home, the boy embraces kung fu, taught to him by a
master.</p>
<span class="trailer_more"><a href="#"></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Bây giờ, thêm vào index.html đoạn java sau để kích hoạt Slider (Nhớ đặt trước tag /body)
Code:
<script type="text/javascript">
$(document).ready(function() {
$('.slide').cycle({
fx: 'fade',
speed: 1500,
timeout: 4500
});
});
</script>
Còn đây là phần style cho main-box:
Code:
.main_box { clear: both; }
.slide { background: #fff; -moz-border-radius: 10px; -khtml-border-
radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-
shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -khtml-box-shadow: 0px 0px 5px
rgba(1, 10, 18, 0.45); -webkit-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45);
box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); width: 560px; height: 274px;
display: block; float: left; margin-bottom: 40px; }
.slide img { padding: 10px; }
.tagline { background: url(images/slog_bck.png) no-repeat; float: left;
width: 370px; margin: 25px 0 0 30px; }
.tagline h2 { font-family: 'DejaVuSansCondensedBook'; color: #fff; text-
shadow: 1px 1px 0px #0f334f; font-size: 23px; line-height: 26px; font-weight:
normal; letter-spacing: -1px; width: 300px; padding: 10px;}
.tagline p { margin-top: 40px; padding-left: 10px; color: #0b537f; }
.know_more_green a { float: right; display: block; position: relative;
top: -55px; right: -6px; width: 86px; height: 74px; background:
url(images/know_more_green.png) no-repeat; }
.cta_browse a { display: block; width: 168px; height: 56px; background:
url(images/cta_blu.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0
10px;}
.cta_browse a:hover { background-position: 0px -56px; }
.cta_signup a { display: block; width: 168px; height: 56px; background:
url(images/cta_orange.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0
24px; }
.cta_signup a:hover { background-position: 0px -56px; }
.content { clear: both; overflow:auto; margin-bottom: 20px; }
.left_content { width: 280px; float: left; }
.orange a { color: #ed7d0f; }
.green a { color: #5a9e28;}
.cyan a { color: #28819e; }
.orange a:hover { color: #ff9e05; text-decoration: underline; }
.green a:hover { color: #74d82b; text-decoration: underline; }
.cyan a:hover { color: #2fb4e0; text-decoration: underline; }
.content h3 { font-size: 20px; color: #0b537f; font-weight: normal;
border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; margin-bottom: 20px;
}
.left_content ul { margin-top: 25px; }
.left_content ul li { border-bottom: 1px solid #e0e0e0; padding-
bottom: 8px; margin-bottom: 15px; font-size: 11px; line-height: 16px; color:
#757474; }
.left_content ul li img { float: left; margin-right: 10px; }
span.details { font-size: 10px; color: #a8a8a8; }
span.details a { color: #333; }
span.details a:hover { text-decoration: underline; }
.right_content { width: 630px; float: left; margin-left: 50px; }
.box_trailer { clear: both; }
.box_trailer img { background: #fefefe; padding: 5px; -moz-box-
shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -khtml-box-shadow: 0px 0px 3px
rgba(51, 51, 51, 0.35); -webkit-box-shadow: 0px 0px 3px rgba(51, 51, 51,
0.35); box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); float: left; z-index:
100; position: relative; margin: 0 15px 30px 0; }
span.meta_info { padding: 1px 6px; color: #fefefe; z-index: 99;
margin-top: 18px; position: relative; top: 8px; left: -15px; font-size: 10px;
}
.meta_green { background: #5a9e28; }
.meta_orange { background: #ed7d0f; }
.box_trailer h4 { font-size: 16px; font-weight: normal; margin: 20px
0 10px 0; }
span.trailer_more a { display: block; width: 83px; height: 19px;
background: url(images/more.jpg) no-repeat 0px 0px; float: right; margin-top:
10px; }
span.trailer_more a:hover { background-position: 0px -19px; }
Bước 10: Footer (chân trang)
Công việc cuối cùng là viết cấu trúc cho phần footer. Xuất hình sau ra khỏi file PSD.
Cấu trúc:
Code:
<div class="footer">
<div class="foot_cont">
<div class="foot_col">
<h3>Resources for you</h3>
<ul>
<li><a href="#">Browse our database</a></li>
<li><a href="#">Read our magazine</a></li>
<li><a href="#">Job opportunities</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="foot_col">
<h3>Our network</h3>
<ul>
<li><a href="#">Download.TvSeries</a></li>
<li><a href="#">Download.Music</a></li>
<li><a href="#">Download.Book</a></li>
<li><a href="#">Download.Apps</a></li>
<li><a href="#">Download.Games</a></li>
</ul>
</div>
<div class="foot_col">
<h3>Connect with us</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">FriendFeed</a></li>
</ul>
</div>
<div class="foot_col last_col">
<h3>Our mission</h3>
<p>We want to provide only hidh-quality DVD movies to our
members.
High-quality, easy-to-find: the best of the week.</p>
<span class="about_but"><a href="#">Read more about us</a></span>
</div>
</div>
<div class="credits">
<p>by WeGraphics - Copyright © 2010. A premium template.</p>
</div>
</div>
Style:
Code:
/* Footer */
.footer { background: url(images/foot_bck.jpg) repeat-x; clear: both; }
.foot_cont { height: 218px; margin: 0 auto; width: 960px; }
.foot_col { float: left; width: 220px; margin: 45px 20px 0 0; }
.last_col { margin-right: 0px; width: 240px; }
.foot_col h3 { color: #cfdcf8; font-size: 14px; font-weight:
normal; }
.foot_col ul { margin: 10px 0 0 10px; }
.foot_col ul li { padding: 4px 0 4px 20px; background:
url(images/list.png) no-repeat 0px 7px; }
.foot_col ul li a { color: #f1f3f8; font-size: 12px; }
.foot_col ul li a:hover { color: #89c0dd; }
.foot_col p { color: #f1f3f8; margin-top: 10px; }
span.about_but a { color: #cfdcf8; padding: 2px 5px; background:
#3e5077; -moz-border-radius: 3px; margin-top: 10px; float: right; font-size:
10px;}
span.about_but a:hover { background: #4e6188; color: #fff; }
.credits { clear: both; background: #cfdcf8; margin-top: 20px; }
.credits p { text-align: center; font-size: 11px; color: #1c3059;
padding: 8px; }
Vất vả nhỉ các bạn, công việc cuối cùng là tận hưởng kết quả ^^
Bài viết được dịch bởi Jackpaker90
CÔNG TY CỔ PHẦN TÍCH HỢP DỊCH VỤ SỐ
TRUNG TÂM ĐÀO TẠO DỊCH VỤ SỐ
Phòng 802, Tầng 8, Nhà E3A Trung Hòa, Yên Hòa, Cầu Giấy, Hà Nội, Việt Nam
Phone: (04) 6295 0929 – E-mail: info@dichvuso.vn
Email phòng kỹ thuật: ducnh@dichvuso.vn
Web: http://www.dichvuso.vn
Giờ làm việc (từ thứ 2 đến thứ 7( thứ 7 làm việc buổi sáng)).
Sáng: 8h – 12h
Chiều :13h30 – 17h30
Nguyễn Hữu Đức – Phòng kỹ thuật dịch vụ số – Marketing Online giải pháp kinh doanh Online
Bạn muốn thành công trên internet hãy ghé thăm dịch vụ số để được
chia sẻ miễn phí
Facebook: https://www.facebook.com/TrungTamDaoTaoDichVuSo
Website: http://dichvuso.edu.vn

More Related Content

Viewers also liked

Gigant LYFT guide
Gigant LYFT guideGigant LYFT guide
Gigant LYFT guideGigant
 
Seguridadticacabado 151117093647-lva1-app6892
Seguridadticacabado 151117093647-lva1-app6892Seguridadticacabado 151117093647-lva1-app6892
Seguridadticacabado 151117093647-lva1-app6892Eliana Rodriguez
 
презентация баумана 44 крц родина
презентация баумана 44 крц родинапрезентация баумана 44 крц родина
презентация баумана 44 крц родинаarenda-servis-kazan
 
Cronograma de los estudiantes para el proyecto
Cronograma de los estudiantes para el proyectoCronograma de los estudiantes para el proyecto
Cronograma de los estudiantes para el proyectolaurasofia123
 
I Want To Tell The World 3
I Want To Tell The World 3I Want To Tell The World 3
I Want To Tell The World 3nahida
 
Magyar és európai oktatáspolitika farkas éva
Magyar és európai oktatáspolitika farkas évaMagyar és európai oktatáspolitika farkas éva
Magyar és európai oktatáspolitika farkas évaszegedbtk
 
Digipak conventions 1
Digipak conventions 1Digipak conventions 1
Digipak conventions 1CaseyPhillips
 
61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom
61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom
61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikomSaša Tepić
 
Going all in on social - play your cards like a pro
Going all in on social - play your cards like a proGoing all in on social - play your cards like a pro
Going all in on social - play your cards like a proNiels Tybjerg
 
Safety Management System
Safety Management SystemSafety Management System
Safety Management SystemConsultivo
 
ملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبر
ملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبرملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبر
ملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبرExcellence Dayz - ملتقى التميز المؤسسي
 

Viewers also liked (13)

Gigant LYFT guide
Gigant LYFT guideGigant LYFT guide
Gigant LYFT guide
 
Seguridadticacabado 151117093647-lva1-app6892
Seguridadticacabado 151117093647-lva1-app6892Seguridadticacabado 151117093647-lva1-app6892
Seguridadticacabado 151117093647-lva1-app6892
 
презентация баумана 44 крц родина
презентация баумана 44 крц родинапрезентация баумана 44 крц родина
презентация баумана 44 крц родина
 
Cronograma de los estudiantes para el proyecto
Cronograma de los estudiantes para el proyectoCronograma de los estudiantes para el proyecto
Cronograma de los estudiantes para el proyecto
 
I Want To Tell The World 3
I Want To Tell The World 3I Want To Tell The World 3
I Want To Tell The World 3
 
competencyCert
competencyCertcompetencyCert
competencyCert
 
Magyar és európai oktatáspolitika farkas éva
Magyar és európai oktatáspolitika farkas évaMagyar és európai oktatáspolitika farkas éva
Magyar és európai oktatáspolitika farkas éva
 
Digipak conventions 1
Digipak conventions 1Digipak conventions 1
Digipak conventions 1
 
61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom
61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom
61875175 marjan-ogorevc-iscjeljivanje-karmickom-dijagnostikom
 
Going all in on social - play your cards like a pro
Going all in on social - play your cards like a proGoing all in on social - play your cards like a pro
Going all in on social - play your cards like a pro
 
Safety Management System
Safety Management SystemSafety Management System
Safety Management System
 
El espacio urbano
El espacio urbanoEl espacio urbano
El espacio urbano
 
ملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبر
ملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبرملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبر
ملتقى 2016 - اليوم الثاني: التميز المؤسسي وتوظيف التقنية - محمد الغثبر
 

Similar to Huong dan thiet ke website bang photoshop

Chuong 10
Chuong 10Chuong 10
Chuong 10lekytho
 
Huong dan su dung photoshop cs5 phan 18
Huong dan su dung photoshop cs5 phan 18Huong dan su dung photoshop cs5 phan 18
Huong dan su dung photoshop cs5 phan 18nhatthai1969
 
Thiết kế 2D Autocad 2018
Thiết kế 2D Autocad 2018Thiết kế 2D Autocad 2018
Thiết kế 2D Autocad 2018Technical VN
 
2. bai giang chi tiet autocad tong_quat_chung
2. bai giang chi tiet autocad tong_quat_chung2. bai giang chi tiet autocad tong_quat_chung
2. bai giang chi tiet autocad tong_quat_chungngo thai son
 
Giáo trình xuất bản vẽ Solidworks 2016
Giáo trình xuất bản vẽ Solidworks 2016Giáo trình xuất bản vẽ Solidworks 2016
Giáo trình xuất bản vẽ Solidworks 2016Trung tâm Advance Cad
 
Huong dan su dung photoshop cs5 phan 13
Huong dan su dung photoshop cs5 phan 13Huong dan su dung photoshop cs5 phan 13
Huong dan su dung photoshop cs5 phan 13nhatthai1969
 
Huong dan tao site google
Huong dan tao site googleHuong dan tao site google
Huong dan tao site googlelevanlieu2004
 
DYNAMIC COMPONENT-CO BAN-.pdf
DYNAMIC COMPONENT-CO BAN-.pdfDYNAMIC COMPONENT-CO BAN-.pdf
DYNAMIC COMPONENT-CO BAN-.pdfdongkhanhcontcom
 
Huong dan su dung photoshop cs5 phan 12
Huong dan su dung photoshop cs5 phan 12Huong dan su dung photoshop cs5 phan 12
Huong dan su dung photoshop cs5 phan 12nhatthai1969
 
Huong dan su dung photoshop cs5 phan 20
Huong dan su dung photoshop cs5 phan 20Huong dan su dung photoshop cs5 phan 20
Huong dan su dung photoshop cs5 phan 20nhatthai1969
 
Orcad 2 ve_mach_in_bang_layout__9934
Orcad 2 ve_mach_in_bang_layout__9934Orcad 2 ve_mach_in_bang_layout__9934
Orcad 2 ve_mach_in_bang_layout__9934hungvyanh
 
Orcad 2 ve mach in bang layout
Orcad 2   ve mach in bang layout Orcad 2   ve mach in bang layout
Orcad 2 ve mach in bang layout tringuyen028
 
Hướng dẫn sử dụng power point 2016 nâng cao
Hướng dẫn sử dụng power point 2016 nâng caoHướng dẫn sử dụng power point 2016 nâng cao
Hướng dẫn sử dụng power point 2016 nâng caoDSLIDES
 

Similar to Huong dan thiet ke website bang photoshop (20)

Chuong 10
Chuong 10Chuong 10
Chuong 10
 
Huong dan su dung photoshop cs5 phan 18
Huong dan su dung photoshop cs5 phan 18Huong dan su dung photoshop cs5 phan 18
Huong dan su dung photoshop cs5 phan 18
 
meo photoshop
meo photoshopmeo photoshop
meo photoshop
 
Thiết kế 2D Autocad 2018
Thiết kế 2D Autocad 2018Thiết kế 2D Autocad 2018
Thiết kế 2D Autocad 2018
 
huong dan hoan chinh Autocad 2018 2D
huong dan hoan chinh Autocad 2018 2Dhuong dan hoan chinh Autocad 2018 2D
huong dan hoan chinh Autocad 2018 2D
 
2. bai giang chi tiet autocad tong_quat_chung
2. bai giang chi tiet autocad tong_quat_chung2. bai giang chi tiet autocad tong_quat_chung
2. bai giang chi tiet autocad tong_quat_chung
 
ảNh lồng trong chữ
ảNh lồng trong chữảNh lồng trong chữ
ảNh lồng trong chữ
 
Giáo trình xuất bản vẽ Solidworks 2016
Giáo trình xuất bản vẽ Solidworks 2016Giáo trình xuất bản vẽ Solidworks 2016
Giáo trình xuất bản vẽ Solidworks 2016
 
Huong dan su dung photoshop cs5 phan 13
Huong dan su dung photoshop cs5 phan 13Huong dan su dung photoshop cs5 phan 13
Huong dan su dung photoshop cs5 phan 13
 
Meo vat trong cad
Meo vat trong cadMeo vat trong cad
Meo vat trong cad
 
Huong dan tao site google
Huong dan tao site googleHuong dan tao site google
Huong dan tao site google
 
DYNAMIC COMPONENT-CO BAN-.pdf
DYNAMIC COMPONENT-CO BAN-.pdfDYNAMIC COMPONENT-CO BAN-.pdf
DYNAMIC COMPONENT-CO BAN-.pdf
 
Huong dan su dung photoshop cs5 phan 12
Huong dan su dung photoshop cs5 phan 12Huong dan su dung photoshop cs5 phan 12
Huong dan su dung photoshop cs5 phan 12
 
Huong dan su dung photoshop cs5 phan 20
Huong dan su dung photoshop cs5 phan 20Huong dan su dung photoshop cs5 phan 20
Huong dan su dung photoshop cs5 phan 20
 
Fronpage2002
Fronpage2002Fronpage2002
Fronpage2002
 
Orcad 2 ve_mach_in_bang_layout__9934
Orcad 2 ve_mach_in_bang_layout__9934Orcad 2 ve_mach_in_bang_layout__9934
Orcad 2 ve_mach_in_bang_layout__9934
 
Orcad 2 ve mach in bang layout
Orcad 2   ve mach in bang layout Orcad 2   ve mach in bang layout
Orcad 2 ve mach in bang layout
 
Ve+mach+in+bang+layout+
Ve+mach+in+bang+layout+Ve+mach+in+bang+layout+
Ve+mach+in+bang+layout+
 
Hướng dẫn sử dụng power point 2016 nâng cao
Hướng dẫn sử dụng power point 2016 nâng caoHướng dẫn sử dụng power point 2016 nâng cao
Hướng dẫn sử dụng power point 2016 nâng cao
 
Đồ Họa Trang Phục
Đồ Họa Trang PhụcĐồ Họa Trang Phục
Đồ Họa Trang Phục
 

Huong dan thiet ke website bang photoshop

  • 1. Hướng dẫn thiết kế website bằng photoshop  Thiết kế website là gì  Thiết kế web bằng joomla  BÍ KÍP KINH DOANH ONLINE DÀNH CHO BẤT ĐỘNG SẢN  Cách viết bài chuẩn SEO và bán hàng tốt  SEO như thế nào để lên TOP năm 2015 Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường Line 1px để tạo chiều sâu một cách tinh tế cho website. Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS. Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp. Kết quả cuối cùng _____________________________________________________________________ Bên dưới là kết quả từ sự nỗ lực của chúng tôi, một bố cục web gọn đẹp, chuyên nghiệp. Demo: http://wegraphics.net/demo/item/download-movie-tut/
  • 2.
  • 3. Quá trình thiết kế web miễn phí bằng photoshop ______________________________________________________________ Tôi khuyên bạn nên phác thảo trước khi thiết kế web bằng cách sử dụng Photoshop, nó là bước quan trọng đầu tiên. Hãy vẽ toàn bộ bố cục trang web của bạn ra một tờ giấy để ghi nhớ vị trí và đặc điểm của toàn bộ các đối tượng (các cột,Button, Module, Slider…) Dưới đây là bản phác thảo cho “dự án” website của tôi, mang tên Download.Movie.
  • 4. Bước 1: Tài Liệu (Document) Chúng ta hãy bắt đầu với Photoshop. Đầu tiên, tạo một file có kích thước 1024×1200 pixels với độ phân giải 72 pixels/inch, nền trong suốt. Nhập mẫu 960 grid (12 Col Grid), nó rất hữu dụng để tạo website trong khoảng 960 pixels. Bước 2: Tạo phông nền (Background) Tạo vùng lựa chọn (dùng the Selection Tool) kéo hết toàn bộ tài liệu, tạo một layer mới đặt tên là „background‟, tô màu #f9f9f9 cho vùng lựa chọn (Alt+Backspace), sau đó khóa layer này lại. Tạo layer mới đặt tên là „Top’. Dùng Rectangle Marquee Tool tạo một hình chữ nhật ở đầu trang (chiều cao khoảng 270 pixels, màu #29729f). Vào Blending Options, tick vào Gradient Overlay, đặt Blend Mode thành Soft Light, Scale 150%.
  • 5. Duplicate layer „Top‟, tạo thêm 1 layer mới, nhấn Ctrl+Click vào „Top‟ à Ctrl+E. Đặt tên lại cho Layer vừa gộp là „Top‟. Vào Filter Filter>Noise>Add Noise.
  • 6. Tạo Layer mới đặt tên là „Login‟ Dùng Rectangle Marquee Tool tạo một biên ngang trên Top chiều cao 5px, tô màu #162850, sau đó dùng Rounded Rectangle Tool tạo một ô nhỏ gần góc phải của „Top‟, cũng tô màu #162850.
  • 7. Tạo chiều sâu cho vùng này bằng cách dùng Drop Shadow như hình:
  • 8. Bước 3: Logo Chúng ta sẽ đặt một Logo ở vùng top-left của web. Để tạo hiệu ứng soft light cho Background, bạn có thể sử dụng công cụ Elliptical Marquee Tool tạo một hình Elip màu trắng, sau đó Add Gaussian Blur cho nó là 40px , chỉnh lại Opacity cho phù hợp. (Mục đích để làm sáng nhẹ vùng Logo). Tạo tiếp một elip dẹt, làm mờ nhẹ và Opacity là 20%.
  • 9.
  • 10. Tạo thêm 3 hình elip (mỗi hình 1 layer), đặt fill là 0% (fill chỉnh ở khung Layer), thêm Gradient Overlay cho mỗi elip như hình bên dưới.
  • 11. Bây giờ là phần việc thiết kế logo, hãy sử dụng trí tưởng tượng của bạn. Ở đây tôi sẽ dùng một số Shape có sẵn trong PTS. Dùng Rounded Rectangle Tool vẽ một hình vuông nhỏ (giữ nút shift trong khi kéo nó mới ra hình vuông). Tiếp tục dùng Custome Shape Tool vẽ một mũi tên nhỏ. Rasterize 2 Layer này, sau đó dùng hình mũi tên để cắt nó ra khỏi hình vuông. Nhớ xoay hình vừa cắt một tí cho đẹp.
  • 12.
  • 13. Thêm Style cho hình trên như sau:
  • 14.
  • 15.
  • 16. Bây giờ dùng Type Tool (T) viết tên công ty (hoặc cái gì bạn thích), add style giống như style vừa dùng với icon ở trên.
  • 17. Công đoạn cuối cùng để hoàn tất Header cho website là thêm Menu và khung Login/Signup. Dùng Type Tool và thêm Drop Shadow nhẹ cho text. Bước 4: Down-Header Dùng Rounded Rectangle Tool vẽ một hình chữ nhật lớn dưới Logo, thêm Drop Shadow nhẹ, sau đó đặt một bức ảnh bạn thích vào trong.
  • 18. Bây giờ, chúng ta sẽ tiến hành tạo phần bên phải silder Tạo một hình chữ nhật phía bên phải, đặt Fill là 0% và add style Gradient Overlay và Drop Shadow, chi tiết bên dưới.
  • 19.
  • 20. Thêm text vào (thích ghi gì cũng được), có thể dùng Font Dejavu Sans (30 pt, trắng) cho tiêu đề và font Lucida Sans (12 pt, #0b537f) cho văn bản bên dưới. Vẽ tiếp một hình chữ nhật biên mềm bằng cách dùng Rounded Rectangular Tool (radius 2px, color #6fc630), nhấn Ctrl+T và xoay nó một tí, cuối cùng ta thêm một lớp mặt nạ, sẽ cho ra kết quả sau. Nhắc nhỏ: Luuv thấy chỗ Layer Mask không cần thiết mà lại dễ gây khó hiểu nhưng tôn trọng tác giả bài viết Luuv sẽ để y nguyên như vậy, nếu bạn nào không làm được bước này có thể comment bên dưới, Luuv sẽ giải thích thêm. Add style cho khối màu xanh như hình
  • 21.
  • 22. Tiếp theo, ta sẽ thêm 2 nút phía bên dưới, màu cam và màu xanh, vẫn tiếp tục với công cụ Rectangle Tool (M)… Thêm Bevel and Emboss và Gradient Overlay để làm cho chúng trở nên chuyên nghiệp hơn.
  • 23. Làm tương tự cho nút còn lại.
  • 24. Thêm text cho các nút, thêm một tí Gradient Overlay (dùng màu xanh cho nút màu xanh và tương tự cho nút màu cam) và Drop Shadow nhẹ, tinh tế cho text để tạo hiệu ứng như sau: Bước 5: Nội dung Phần này là cốt lõi trong cách bố trí của chúng tôi, nơi khách vào web có thể dễ dàng tìm thấy thông tin hữu ích. Chúng tôi muốn xây dựng cách bố trí hai cột đơn giản với một số hình ảnh và mô tả, dưới đây là kết quả chúng tôi muốn hướng đến.
  • 25. Tôi không muốn làm phiền bạn với những thứ không cần thiết. Rõ ràng là bạn có thể sử dụng những kĩ thuật mà bạn đã sử dụng trong phần Header để nhận ra các đối tượng trong phần này. Một vài ví dụ ư? 2 ảnh chụp trong mục “Coming soon on Download.Movie” được thực hiện bằng cách sử dụng các bước tương tự mà chúng tôiđã tiến hành ở phần down-header, chỉ có duy nhất một điểm khác biệt đó là: bạn phải add Color Overlay (từ Styles; màu đen, Opacity 30%). Nút „play‟ được ghép từ 2 thành phần giống như Logo. Sau đó bạn phải thêm Drop Shadow màu đen 70%. Một lần nữa, để làm nút „read more‟ bạn phải nhớ những gì chúng ta đã thực hiện với 2 nút màu xanh và cam ở trên, bây giờ thay vì màu cam, xanh lá và xanh lam, hãy sử dụng màu xám. Bước 6: Footer (Chân trang) Thêm 3 hình chữ nhật (ở trên và dưới màu #cfdcf8, ở giữa là #162850) như hình.
  • 26. Thêm hiệu ứng Gradient Overlay nhẹ cho Layer màu xanh lục sau đó Rasterize toàn bộ các Layer –> Add Noise. Cuối cùng là tạo danh sách một số link cần thiết. Để tạo chấm nhỏ trước mỗi link, bạn chỉ cần sử dụng Ellipse Tool, giữ Shift và kéo thành một vòng tròn nhỏ, tô màu #cfdcf8 cho nó và chỉnh lại độ Opacity xuống còn 20%. Duplicate để tạo ra nhiều chấm hơn. Chúng ta cần phải tạo thêm mô tả mục (description box), cách làm nút Read more tương tự như cách đã giới thiệu ở phần trước, chọn font Lucida Sans. Cuối cùng là thêm Copyright ở dưới cùng. Chuyển từ PSD sang HTML/CSSBây giờ chính là lúc xây dựng cấu trúc HTML/CSS, hãy nhìn vào hình bên dưới để hình dung cấu trúc chính của website.
  • 27. Bước 7: Cấu trúc HTML Trước hết chúng ta cần tạo 2 file trắng: index.html và style.css. Sau đó, bằng cách sử dụng trình soạn thảo văn bản yêu thích của chúng tôi (tôi viết code của tôi thông qua Notepad), chúng ta có thể khởi tạo tài liệu HTML dưới dạng Doctype, Head và Body. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Download.Movie - A great database of movies</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> </body> </html>
  • 28. Bây giờ, theo cấu trúc mô tả ở hình trên, chúng ta có thể viết cấu trúc cơ bản của html. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Download.Movie - A great database of movies</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div id="top_background"> <div class="main_container"> <div class="top_bar"> </div> <div class="header"> </div> <div class="main_box"> <div class="slide"> </div> <div class="tagline"> </div> <div class="content"> <div class="left_content"> </div> <div class="right_content"> </div> </div> </div> </div> </div> <div class="footer"> </div> </body> </html> Thêm phần Reset vào style.css như sau: Code: /* CSS Reset */
  • 29. html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } :focus { outline: 0; } Bước 8: Background, Top-bar và Header Xuất các hình sau ra khỏi file PSD để tạo Header cho web như kế hoạch. Việc đánh dấu cho Top-bar và phần Header, chúng tôi sẽ sử dụng các list ngẫu nhiên cho menu và tag h1 cho Logo. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Download.Movie - A great database of movies</title>
  • 30. <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div id="top_background"> <div class="main_container"> <div class="top_bar"> <ul class="login"> <li><a href="#">login |</a></li> <li><a href="#">sign-up</a></li> </ul> </div> <div class="header"> <div class="logo"> <h1><a href="#">Download.Movie</a></h1> </div> <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> </ul> </div> <div class="main_box"> <div class="slide"> </div> <div class="tagline"> </div> <div class="content"> <div class="left_content"> </div>
  • 31. <div class="right_content"> </div> </div> </div> </div> </div> <div class="footer"> </div> </body> </html> Thêm vào style.css đoạn Code sau. Lưu ý rằng ta sẽ import font Dejavu để sử dụng cho phần down-header. Code: * General */ @font-face { font-family: 'DejaVuSansCondensedBook'; src: url('DejaVuSansCondensed-webfont.ttf') format('truetype'); } body { background: #f9f9f9; font: 12px "Lucida Sans Unicode", sans-serif; line-height: 1.5em; color: #555; } a { text-decoration: none; } #top_background { background: url(images/top_bck.jpg) repeat-x; } .main_container { margin: 0 auto; width: 960px; background: url(images/logo_bck.png) no-repeat; } /* Main-container classes */ .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; }
  • 32. ul.login li a:hover { color: #89c0dd; } .header { clear: both; height: 80px; margin-bottom: 53px; } .logo { float: left } .logo h1 a { display: block; width: 345px; height: 50px; background: url(images/logo.png) no-repeat; text-indent: -9999px; margin: 16px 0 0 40px; } ul.navigation { float: right; margin: 30px 40px 0 0; } ul.navigation li { display: inline; margin-left: 30px; } ul.navigation li a { color: #fff; font-size: 14px; text-shadow: 1px 1px 0px #155479; } ul.navigation li a:hover { text-decoration: underline; } Bước 9: Main-box, down-header và contents Bây giờ, ta sẽ thêm vào phần down-header một Slider (trình diễn ảnh). Để tạo được một silder đẹp, chúng tôi sử dụng plugin gọi là Cycle. Đầu tiên ta tải jQuery plugin về máy và tạo file „jquery.cycle.lite.min.js‟ Mách nhỏ: Tức là mình sẽ tạo một Folder tên là Template, tiếp tục tạo một Text Document mới tên là jquery.cycle.lite.min.txt, sau đó Paste toàn bộ nội dung của file jQuery (vừa tải về lúc nãy) vào, đổi lại định dạng tệp là jquery.cycle.lite.min.js. Tiếp theo, tải một file jQuery nữa về máy và tạo file jquery.js. Thêm vào index.html đoạn code sau: Code: <head> <title>Download.Movie - A great database of movies</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.cycle.lite.min.js"></script> </head> Đối với các thành phần trong main-box ta sẽ sử dụng các hình sau (xuất hình ra khỏi PSD).
  • 33. Viết lại cấu trúc của phần main-box như sau: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Download.Movie - A great database of movies</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div id="top_background"> <div class="main_container"> <div class="top_bar"> <ul class="login"> <li><a href="#">login |</a></li> <li><a href="#">sign-up</a></li> </ul>
  • 34. </div> <div class="header"> <div class="logo"> <h1><a href="#">Download.Movie</a></h1> </div> <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Support</a></li> </ul> </div> <div class="main_box"> <div class="slide"> <img src="images/screenshot1.jpg" alt="screenshot" /> <img src="images/screenshot1_2.jpg" alt="screenshot" /> <img src="images/screenshot1_3.jpg" alt="screenshot" /> </div> <div class="tagline"> <h2>The best way to watch your favourite movies</h2> <span class="know_more_green"><a href="#"></a></span> <p>The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management.</p> <span class="cta_browse"><a href="#"></a></span> <span class="cta_signup"><a href="#"></a></span> </div> <div class="content"> <div class="left_content"> <h3>Featured entries this week</h3> <p>We want to provide only high-quality DVD movies to our members. High-quality, easy-to-find: the best of the week.</p> <ul> <li><img src="images/screenshot2.jpg" alt="screenshot" /><h4 class="orange"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house</p><span
  • 35. class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li> <li><img src="images/screenshot3.jpg" alt="screenshot" /><h4 class="green"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house</p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li> <li><img src="images/screenshot4.jpg" alt="screenshot" /><h4 class="cyan"><a href="#">The first movie this week</a></h4><p>The group sets out for the treasure. They walk to Pete's cousin's house. </p><span class="details">dur. 110’ | action | 2011 | <a href="#">more...</a></span></li> </ul> </div> <div class="right_content"> <h3>Featured entries this week</h3> <div class="box_trailer"> <a href="#"><img src="images/screenshot5.jpg" alt="screenshot" /></a> <span class="meta_info meta_orange">action | 12.04.2010</span> <h4 class="orange"><a href="#">A new movie is coming on our website</a></h4> <p>Rumpelstiltskin tricks a mid-life crisis burdened Sdrok into allowing himself to be erased from existence and cast in a dark alternate...</p> <span class="trailer_more"><a href="#"></a></span> </div> <div class="box_trailer"> <a href="#"><img src="images/screenshot6.jpg" alt="screenshot" /></a> <span class="meta_info meta_green">drama | 12.04.2010</span> <h4 class="green"><a href="#">Another movie downloadable</a></h4> <p>Work causes a single mother to move to China with her young son; in his new home, the boy embraces kung fu, taught to him by a master.</p> <span class="trailer_more"><a href="#"></a></span> </div>
  • 36. </div> </div> </div> </div> </div> <div class="footer"> </div> </body> </html> Bây giờ, thêm vào index.html đoạn java sau để kích hoạt Slider (Nhớ đặt trước tag /body) Code: <script type="text/javascript"> $(document).ready(function() { $('.slide').cycle({ fx: 'fade', speed: 1500, timeout: 4500 }); }); </script> Còn đây là phần style cho main-box: Code: .main_box { clear: both; } .slide { background: #fff; -moz-border-radius: 10px; -khtml-border- radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box- shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -khtml-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); -webkit-box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); box-shadow: 0px 0px 5px rgba(1, 10, 18, 0.45); width: 560px; height: 274px; display: block; float: left; margin-bottom: 40px; } .slide img { padding: 10px; } .tagline { background: url(images/slog_bck.png) no-repeat; float: left; width: 370px; margin: 25px 0 0 30px; }
  • 37. .tagline h2 { font-family: 'DejaVuSansCondensedBook'; color: #fff; text- shadow: 1px 1px 0px #0f334f; font-size: 23px; line-height: 26px; font-weight: normal; letter-spacing: -1px; width: 300px; padding: 10px;} .tagline p { margin-top: 40px; padding-left: 10px; color: #0b537f; } .know_more_green a { float: right; display: block; position: relative; top: -55px; right: -6px; width: 86px; height: 74px; background: url(images/know_more_green.png) no-repeat; } .cta_browse a { display: block; width: 168px; height: 56px; background: url(images/cta_blu.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 10px;} .cta_browse a:hover { background-position: 0px -56px; } .cta_signup a { display: block; width: 168px; height: 56px; background: url(images/cta_orange.jpg) no-repeat 0px 0px; float: left; margin: 26px 0 0 24px; } .cta_signup a:hover { background-position: 0px -56px; } .content { clear: both; overflow:auto; margin-bottom: 20px; } .left_content { width: 280px; float: left; } .orange a { color: #ed7d0f; } .green a { color: #5a9e28;} .cyan a { color: #28819e; } .orange a:hover { color: #ff9e05; text-decoration: underline; } .green a:hover { color: #74d82b; text-decoration: underline; } .cyan a:hover { color: #2fb4e0; text-decoration: underline; } .content h3 { font-size: 20px; color: #0b537f; font-weight: normal; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; margin-bottom: 20px; } .left_content ul { margin-top: 25px; } .left_content ul li { border-bottom: 1px solid #e0e0e0; padding- bottom: 8px; margin-bottom: 15px; font-size: 11px; line-height: 16px; color: #757474; } .left_content ul li img { float: left; margin-right: 10px; } span.details { font-size: 10px; color: #a8a8a8; } span.details a { color: #333; } span.details a:hover { text-decoration: underline; } .right_content { width: 630px; float: left; margin-left: 50px; } .box_trailer { clear: both; }
  • 38. .box_trailer img { background: #fefefe; padding: 5px; -moz-box- shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -khtml-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); -webkit-box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); box-shadow: 0px 0px 3px rgba(51, 51, 51, 0.35); float: left; z-index: 100; position: relative; margin: 0 15px 30px 0; } span.meta_info { padding: 1px 6px; color: #fefefe; z-index: 99; margin-top: 18px; position: relative; top: 8px; left: -15px; font-size: 10px; } .meta_green { background: #5a9e28; } .meta_orange { background: #ed7d0f; } .box_trailer h4 { font-size: 16px; font-weight: normal; margin: 20px 0 10px 0; } span.trailer_more a { display: block; width: 83px; height: 19px; background: url(images/more.jpg) no-repeat 0px 0px; float: right; margin-top: 10px; } span.trailer_more a:hover { background-position: 0px -19px; } Bước 10: Footer (chân trang) Công việc cuối cùng là viết cấu trúc cho phần footer. Xuất hình sau ra khỏi file PSD.
  • 39. Cấu trúc: Code: <div class="footer"> <div class="foot_cont"> <div class="foot_col"> <h3>Resources for you</h3> <ul> <li><a href="#">Browse our database</a></li> <li><a href="#">Read our magazine</a></li> <li><a href="#">Job opportunities</a></li> <li><a href="#">Support</a></li> </ul> </div> <div class="foot_col"> <h3>Our network</h3> <ul> <li><a href="#">Download.TvSeries</a></li> <li><a href="#">Download.Music</a></li> <li><a href="#">Download.Book</a></li> <li><a href="#">Download.Apps</a></li> <li><a href="#">Download.Games</a></li> </ul> </div> <div class="foot_col"> <h3>Connect with us</h3> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">FriendFeed</a></li> </ul> </div> <div class="foot_col last_col"> <h3>Our mission</h3> <p>We want to provide only hidh-quality DVD movies to our members. High-quality, easy-to-find: the best of the week.</p> <span class="about_but"><a href="#">Read more about us</a></span> </div> </div>
  • 40. <div class="credits"> <p>by WeGraphics - Copyright © 2010. A premium template.</p> </div> </div> Style: Code: /* Footer */ .footer { background: url(images/foot_bck.jpg) repeat-x; clear: both; } .foot_cont { height: 218px; margin: 0 auto; width: 960px; } .foot_col { float: left; width: 220px; margin: 45px 20px 0 0; } .last_col { margin-right: 0px; width: 240px; } .foot_col h3 { color: #cfdcf8; font-size: 14px; font-weight: normal; } .foot_col ul { margin: 10px 0 0 10px; } .foot_col ul li { padding: 4px 0 4px 20px; background: url(images/list.png) no-repeat 0px 7px; } .foot_col ul li a { color: #f1f3f8; font-size: 12px; } .foot_col ul li a:hover { color: #89c0dd; } .foot_col p { color: #f1f3f8; margin-top: 10px; } span.about_but a { color: #cfdcf8; padding: 2px 5px; background: #3e5077; -moz-border-radius: 3px; margin-top: 10px; float: right; font-size: 10px;} span.about_but a:hover { background: #4e6188; color: #fff; } .credits { clear: both; background: #cfdcf8; margin-top: 20px; } .credits p { text-align: center; font-size: 11px; color: #1c3059; padding: 8px; } Vất vả nhỉ các bạn, công việc cuối cùng là tận hưởng kết quả ^^ Bài viết được dịch bởi Jackpaker90 CÔNG TY CỔ PHẦN TÍCH HỢP DỊCH VỤ SỐ TRUNG TÂM ĐÀO TẠO DỊCH VỤ SỐ Phòng 802, Tầng 8, Nhà E3A Trung Hòa, Yên Hòa, Cầu Giấy, Hà Nội, Việt Nam Phone: (04) 6295 0929 – E-mail: info@dichvuso.vn Email phòng kỹ thuật: ducnh@dichvuso.vn Web: http://www.dichvuso.vn
  • 41. Giờ làm việc (từ thứ 2 đến thứ 7( thứ 7 làm việc buổi sáng)). Sáng: 8h – 12h Chiều :13h30 – 17h30 Nguyễn Hữu Đức – Phòng kỹ thuật dịch vụ số – Marketing Online giải pháp kinh doanh Online Bạn muốn thành công trên internet hãy ghé thăm dịch vụ số để được chia sẻ miễn phí Facebook: https://www.facebook.com/TrungTamDaoTaoDichVuSo Website: http://dichvuso.edu.vn