huong dan thiet ke website bang photoshop

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/

http://dichvuso.edu.vn/thiet-ke-website-la-gi/

http://dichvuso.edu.vn/thiet-ke-web-bang-joomla/

http://dichvuso.edu.vn/bi-kip-kinh-doanh-online-danh-cho-bat-dong-san/

http://dichvuso.edu.vn/cach-viet-bai-chuan-seo-va-ban-hang-tot/

http://dichvuso.edu.vn/seo-nhu-the-nao-de-len-top-nam-2015/

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.

http://dichvuso.edu.vn/thiet-ke-website-mien-phi/

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:




<head>




<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:




<head>





</head>

<body>




<ul class="login">

<li><a href="#">login |</a></li>

<li><a href="#">sign-up</a></li>

</ul>

</div>


<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="slide">

</div>


</div>



</div>


</div>

</div>

</div>

</div>

</div>


</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>





<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:




<head>





</head>

<body>




<ul class="login">

<li><a href="#">login |</a></li>

<li><a href="#">sign-up</a></li>

</ul>

</div>


<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>


</ul>

</div>


<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>


<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>



<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>


/><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




/><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



</ul>

</div>


<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>

</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="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>


</ul>

</div>


<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>


<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: [email protected]

Email phòng kỹ thuật: [email protected]

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

http://huuductin1k12.blogspot.com/2015/07/nguyen-huu-duc-seo-marketing-online.html

https://www.facebook.com/TrungTamDaoTaoDichVuSo

http://dichvuso.edu.vn/

huong dan thiet ke website bang photoshop

Design