آموزش انتقال قالب از فتوشاپ به کد html و css

طراحی طرح اولیه قالب در فتوشاپ

رای طراحی قالب های وب، فتوشاپ ابزاری سودمند و کاربردی است، البته از دیگر برنامه ها نظیر کُرِل (corel) هم می توان استفاده کرد، اما گستردگی و قدرتمندی فتوشاپ را به حق هیچ برنامه ی مشابه ای ندارد، به هر صورت در این آموزش مبنا را فتوشاپ قرار داده ایم.
برای ایجاد یک قالب، بهتر است ابتدا طرح و اسکلت بندی آن را روی کاغذ بکشیم (مخصوصا اگر تازه شروع به این کار کرده اید) تا چارچوب کار در اختیارمان باشد، مثلا ممکن است بخواهیم قالبی طراحی کنیم که متشکل از عناصر هِدِر (سربرگ)، منوها، باکس های کناری (برای قالب یک طرفه یا دوطرفه)، قسمت مربوط به محتوا و مطالب، فوتر و منوی پائین صفحه باشد؛ بدین منظور ابتدا پهنای پیکسلی استانداردی انتخاب می کنیم، مثلا بین 850 تا 900 پیکسل و در فتوشاپ لایه ای جدید می سازیم، ارتفاع لایه مورد نظر به دلیل متفاوت بودن آن، مقادیری ثابت نیست، ولی در طراحی صفحه باید حداقلی برای آن در نظر بگیریم تا بتوانیم پیش نمایش کارمان را به درستی مشاهده کنیم، آنگاه با ابزارهای ترسیم اشکال (در قسمت نوار ابزارها)، عناصری را که پیشتر گفتیم را روی لایه مورد نظر می کشیم.

کدنویسی چارچوب قالب با html و css

اکنون که طرح کلی کار را کشیدیم، باید عناصر را تجزیه کنیم، برای این کار ابتدا بهتر است ستون بندی کار را با کدهای html و css پیاده کنیم تا جزئیات هر قسمت را در اختیار داشته باشیم، سپس تکه تکه، اجزاء را برش زده و به تصاویر قابل استفاده در css تبدیل کنیم، پس بدین منظور ویرایشگر html خود را به کار می گیریم، (برنامه های زیادی برای کدنویسی html و css وجود دارند، از جمله Adobe Dreamweaver)، ابتدا بلاک اصلی و تگ body را تنظیم می کنیم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | انتقال قالب از فتوشاپ - گام اول</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.main-block{
width:900px;
height:auto;
border:#666 1px solid;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="main-block">
بلاک اصلی قالب html و css
</div>
</body>
</html>

توضیح:
– برای تگ body حاشیه ها را صفر قرار داده ایم تا تمام فضای خالی مرورگر را پوشش دهیم.
– در کلاس main-block پهنای پیکسلی را 900 تنظیم کرده ایم و آن را در وسط صفحه با تعریف margin-left:auto و margin-right:auto قرار داده ایم (به این ترتیب بلاک اصلی ما در وسط صفحه از هر طرف به یک میزان فاصله خواهد داشت).
– همانطور که در کد بالا ملاحظه می کنید، مقادیر ارتفاع به صورت خودکار تعریف شده است (height:auto) که اینکار به دلیل ثابت نبودن محتوای ماست (در بعضی صفحات استاتیک می توان مقادیری ثابت برای ارتفاع در نظر گرفت).

کدنویسی پیشرفته با css و ایجاد بلاک های تو در تو

اکنون که چارچوب کار را ساختیم، باید بلاک های تو در تو و به اصلاح آشیانه ای (nested) ایجاد کنیم، هرچند برخی طراحان، از جداول هم برای این منظور استفاده می کنند، اما به دلایلی که جای بحث دارد، بهتر است از بلاک های div به جای جداول استفاده کنیم، هدف از ایجاد این بلاک ها، شکل دهی و استحکام به لایه های درونی قالب است که نهایتا به صورت ستونهایی نامرئی، فرم کل قالب را شکل می دهند.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | انتقال قالب از فتوشاپ به html</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-align:center;
}
.main-block{
width:900px;
height:auto;
border:#666 1px solid;
margin-left:auto;
margin-right:auto;
}
.header{
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
height:150px;
border:#CCC 1px solid;
clear:both;
}
.top-menu{
height:30px;
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid; 
}
.side-left{
float:left;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 1px solid; 
}
.side-right{
float:left;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
display:block;

}
.side-center{
float:left;
width:494px;
height:auto;
min-height:150px; 
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 1px solid;
}
.footer{
width:896px;
height:100px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
clear:both;
}
.top-div{
width:198px;
height:30px;
display:block;
/*
background-image:url(bg-image-1.jpg);
background-repeat:no-repeat;
*/
}
.middle-div{
height:auto;
width:198px;
min-height:80px;
display:block;
/*
background-image:url(bg-image-2.jpg);
background-repeat:repeat-y;
*/ 
}
.bottom-div{
width:198px;
height:30px;
display:block;
/*
background-image:url(bg-image-3.jpg);
background-repeat:no-repeat;
*/ 
}
</style>
</head>
<body>
<div class="main-block">
<div class="header">هدر</div>
<div class="top-menu">منوی بالا</div>
<div class="side-left">
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
</div>
<div class="side-center">محتوا و مطالب</div>
<div class="side-right">باکس راست</div>
<div class="footer">فوتر و کپی رایت</div>
</div>
</body>
</html>



ایجاد باکس های داینامیک و استفاده از ویژگی های background در css

کد بالا در قسمت میانی، سه بلاک استاتیک برای سایدبار چپ و راست و قسمت محتوای صفحه ایجاد می کند، اما اگر دقت کرده باشید، بسته به میزان محتوای درون این باکس ها، ممکن است ارتفاع آنها نیز کم و زیاد شوند، از این رو نیازمند تعریف پس زمینه ای داینامیک برای این نوع بلاک ها هستیم، این کار را هم باید با بلاک های div تو در تو انجام دهیم، به این صورت که برای قسمت میانی از ویژگی های پس زمینه در css و به طور خاص، تکرار در محور y ها استفاده کنیم، از این رو درون این بلاک ها، سه بلاک دیگر تعریف می کنیم؛ جهت نمونه ما این کار را برای سایدبار چپ به صورت زیر انجام داده ایم.

.top-div{
width:198px;
height:30px;
display:block;
background-image:url(bg-image-1.jpg);
background-repeat:no-repeat;
}
.middle-div{
height:auto;
width:198px;
min-height:80px;
display:block;
background-image:url(bg-image-2.jpg);
background-repeat:repeat-y;
}
.bottom-div{
width:198px;
height:30px;
display:block;
background-image:url(bg-image-3.jpg);
background-repeat:no-repeat;
}

و در داخل بلاک side-left آنها را تعریف می کنیم.

<div class="side-left">
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
</div>

توضیح:
– اگر دقت کرده باشید، به جهت متغیر بودن میزان ارتفاع به دلیل متفاوت بودن محتوا، از مقادیر height:auto برای بلاک میانی که محتوا را نشان می دهد استفاده کرده ایم.
– ویژگی background-repeat:repeat-y یک تصویر را به صورت همپوشانی تا جایی که کل ارتفاع را پوشش دهد در محور y ها تکرار می کند.
– برای تکه بالا و پائین بلاک، به عناصر استاتیک (با ارتفاع ثابت) نیاز داریم، لذا از پس زمینه ای ثابت و مقادیر background-repeat:no-repeat استفاده می کنیم.
– به نحوه قرار گیری و چینش بلاک های div به صورت تو در تو دقت کنید.

برش عناصر در فتوشاپ و ذخیره کردن آنها

با دانستن چارچوب کار، برش تصاویر کار سختی نیست، کافی است برای هر قسمت، به همان اندازه یک لایه جدید در فتوشاپ بسازیم و تصویر را در آن تنظیم کنیم، مثلا برای هدر قالب، یک لایه با اندازه 896 در 150 پیکسل (که قبلا در کد css تعریف کرده ایم)، در فتوشاپ ایجاد می کنیم، و تصویر هدر را به داخل آن می کشیم، یا حتی می توان آن را مجددا درون لایه جدید ترسیم کرد (انتخاب روش ها تا حدود زیادی بستگی به خودتان دارد).

 

web-template-transport

 

آنگاه خروجی کار را با فرمت jpg یا png ذخیره می کنیم تا از آن برای پس زمینه هدر استفاده کنیم.

پیش نمایش نهایی قالب

 

پس از اینکه پس زمینه ها را برش زدیم و آنها را در تصاویر جداگانه ذخیره کردیم، برای تکمیل شدن قالبمان باید در کدها و کلاس های css آنها را تعریف کنیم و آنطور که انتظار داریم، موقعیتشان را تثبیت نمائیم، کدی که پیش تر از باب مثال نوشتیم را در زیر کامل کرده ایم، خطهای اضافی و راهنما را حذف و تصاویر را در آن تنظیم نموده ایم که در زیر می توانید کد و پیش نمایشی از آن را ببینید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | انتقال قالب از فتوشاپ به html - کد کامل</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-align:center;
}
.main-block{
width:900px;
height:auto;
border:#666 0px solid;
margin-left:auto;
margin-right:auto;
}
.header{
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
height:150px;
border:#CCC 0px solid;
clear:both;
background-image:url(template/header.jpg);
background-repeat:no-repeat;
}
.top-menu{
height:30px;
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 0px solid;
background-image:url(template/menu.jpg);
background-repeat:repeat-x; 
}
.side-left{
float:left;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 0px solid; 
}
.side-right{
float:right;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
border:#CCC 0px solid;
display:block;

}
.side-center{
float:left;
width:494px;
height:auto;
min-height:150px; 
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 0px solid;
}
.footer{
width:896px;
height:100px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 0px solid;
clear:both;
background-image:url(template/footer.jpg);
background-repeat:no-repeat; 
}
.top-div{
width:198px;
height:30px;
display:block;
background-image:url(template/top-bg.jpg);
background-repeat:no-repeat;
}
.middle-div{
height:auto;
width:198px;
min-height:80px;
display:block;
background-image:url(template/middle-bg.jpg);
background-repeat:repeat-y;
}
.bottom-div{
width:198px;
height:30px;
display:block;
background-image:url(template/bottom-bg.jpg);
background-repeat:no-repeat;
}
.center-top-div{
width:496px;
height:30px;
display:block;
background-image:url(template/center-top-bg.jpg);
background-repeat:no-repeat;
}
.center-middle-div{
height:auto;
width:496px;
min-height:80px;
display:block;
background-image:url(template/center-middle-bg.jpg);
background-repeat:repeat-y;
}
.center-bottom-div{
width:496px;
height:30px;
display:block;
background-image:url(template/center-bottom-bg.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<!--بلاک اصلی -->
<div class="main-block">
<!--هدر قالب -->
<div class="header">هدر</div>
<!--منو -->
<div class="top-menu">منوی بالا</div>
<!--سایدبار سمت چپ -->
<div class="side-left">
<!--شروع باکس داخل سایدبار -->
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
<!--پایان باکس داخل سایدبار -->
</div>
<!--سایدبار محتوا -->
<div class="side-center">
<!--شروع باکس محتوا -->
<div class="center-top-div">تیتر</div>
<div class="center-middle-div">محتوا</div>
<div class="center-bottom-div">پائین</div>
<!--پایان باکس محتوا -->
</div>
<!--سایدبار سمت راست -->
<div class="side-right">
<!--شروع باکس داخل سایدبار -->
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
<!--پایان باکس داخل سایدبار -->
</div>
<!--قسمت مربوط به فوتر و کپی رایت -->
<div class="footer">فوتر و کپی رایت</div>
</div>
</body>
</html>

نکته: با دقت در نحوه تعریف استایل ها و کلاس های css و با دقیق شدن در تصاویر به کار رفته در آن، به راحتی می توانید به چگونگی انتقال قالب از فتوشاپ به صورت html و css پی ببرید، همانطور که می بینید، انجام این کار بیشتر نیازمند تسلط بر css است تا تسلط بر فتوشاپ.

نکات کلی در انتقال قالب از فتوشاپ به کد html و css

– تسلط بر css لازمه طراحی وب و انتقال قالب به صورت صحیح از فتوشاپ به صورت کد html است.
– برای شروع، سعی کنید از قالب های ساده و تک ستونه استفاده کنید.
– ویژگی های مختلف را در css با آزمون و خطا امتحان کنید تا مهارتهایتان در این خصوص به تدریج افزایش پیدا کند.
– از نوشته های راهنما در طراحی و کدنویسی خود حتما استفاده کنید، این کار موجب قابل فهم تر شدن کدنویسی شده و در مورد تغییرات بعدی کاربرد فراوان دارد.
– قالب های طراحی شده خود را حتی المقدور با مرورگرهای مختلف سازگار کنید.
– پس از تسلط نسبی در طراحی قالب، می توانید قبل از ایجاد طرح اولیه در فتوشاپ، ابتدا کدنویسی کار را انجام دهید، سپس الِمان ها را یکی یکی ایجاد کنید (این شیوه موجب افزایش سرعت کار می شود).
– طراحی وب، کاری سلیقه ای است، لذا سعی کنید شیوه مورد علاقه خودتان را پیدا کنید و با تمرین و تکرار، آن را توسعه دهید.

 

 



  • 253 بازدید
  • بهنام نجاتی
  • 16 آوریل 2016

آخرین دیدگاه های آموزش انتقال قالب از فتوشاپ به کد html و css

نظرات بسته
اگر نياز به پشتيباني داريد همين حالا با ما تماس بگيريد . تيم پشتيباني رهجو نت بصورت 24 ساعته در خدمت شماست...