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

با سلام به شما دوستان گرامی ، امیدوارم که در این هوای برفی پاییزی سلامت و شاد باشید.امروز میخوام در مورد طراحی قالب سایت براتون توضیح بدم.یکی از مهم ترین و در عین حال مشکل ترین مراحل در طراحی وب، انتقال قالب و الگوی طراحی شده در فتوشاپ به صفحه وب و تبدیل آن به صورت کدهای html و استایل css است، همانطور که می دانید صفحات و قالب هایی که در اینترنت مورد استفاده قرار می گیرند از اصول خاصی که با کدهای html و css تعریف می شوند، پیروی می کنند و لذا صرف دانستن و آشنایی با تکنیک های طراحی حرفه ای در فتوشاپ اگرچه به عنوان مقدمه اصلی کار محسوب می شود اما بدون تسلط بر html و css کافی نیست؛ از طرفی شیوه هایی که برای تبدیل و به نوعی ترجمه قالب ها استفاده می شود بیشتر اختیاری و سلیقه ای است و روش مشترکی بین طراحان وب وجود ندارد، اما دانستن نکات ضروری در این خصوص لازمه کار است که در این مطلب، به آموزش آنها در حد امکان خواهیم پرداخت.
طراحی طرح اولیه قالب در فتوشاپ
برای طراحی قالب های وب، فتوشاپ ابزاری سودمند و کاربردی است، البته از دیگر برنامه ها نظیر کُرِل (corel) هم می توان استفاده کرد، اما گستردگی و قدرتمندی فتوشاپ را به حق هیچ برنامه ی مشابه ای ندارد، به هر صورت در این آموزش مبنا را فتوشاپ قرار داده ایم.
برای ایجاد یک قالب، بهتر است ابتدا طرح و اسکلت بندی آن را روی کاغذ بکشیم (مخصوصا اگر تازه شروع به این کار کرده اید) تا چارچوب کار در اختیارمان باشد، مثلا ممکن است بخواهیم قالبی طراحی کنیم که متشکل از عناصر هِدِر (سربرگ)، منوها، باکس های کناری (برای قالب یک طرفه یا دوطرفه)، قسمت مربوط به محتوا و مطالب، فوتر و منوی پائین صفحه باشد؛ بدین منظور ابتدا پهنای پیکسلی استانداردی انتخاب می کنیم، مثلا بین ۸۵۰ تا ۹۰۰ پیکسل و در فتوشاپ لایه ای جدید می سازیم، ارتفاع لایه مورد نظر به دلیل متفاوت بودن آن، مقادیری ثابت نیست، ولی در طراحی صفحه باید حداقلی برای آن در نظر بگیریم تا بتوانیم پیش نمایش کارمان را به درستی مشاهده کنیم، آنگاه با ابزارهای ترسیم اشکال (در قسمت نوار ابزارها)، عناصری را که پیشتر گفتیم را روی لایه مورد نظر می کشیم، تصویر زیر کامل شده گام اول ما را به صورت فرضی نشان می دهد.
web-photoshop-template
کدنویسی چارچوب قالب با html و css
اکنون که طرح کلی کار را کشیدیم، باید عناصر را تجزیه کنیم، برای این کار ابتدا بهتر است ستون بندی کار را با کدهای html و css پیاده کنیم تا جزئیات هر قسمت را در اختیار داشته باشیم، سپس تکه تکه، اجزاء را برش زده و به تصاویر قابل استفاده در css تبدیل کنیم، پس بدین منظور ویرایشگر html خود را به کار می گیریم، (برنامه های زیادی برای کدنویسی html و css وجود دارند، از جمله Adobe Dreamweaver)، ابتدا بلاک اصلی و تگ body را تنظیم می کنیم.

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

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

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;
*/
}

پیش نمایش
توضیح:
– در کلاس های بالا، بلاک هایی تو در تو تعریف و آنها را در بلاک اصلی (main-block) تنظیم کرده ایم.
– برای کنار هم قرار دادن چند بلاک مختلف در یک خط، می توان از عناصر float یا display:inline-block برای آنها استفاده نمود (در کلاس های بالا ما از float:left استفاده کرده ایم).
– با دقت در نحوه چینش بلاک ها، به راحتیِ کار با css در شکل دهی استایل صفحه پی خواهید برد، البته یادآور می شویم، ایجاد جلوه های زیباتر و رعایت جزئیات بیشتر، نیازمند تمرین و تکرار و تسلط نسبی بر css است.
ایجاد باکس های داینامیک و استفاده از ویژگی های 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 آنها را تعریف می کنیم.

توضیح:
– اگر دقت کرده باشید، به جهت متغیر بودن میزان ارتفاع به دلیل متفاوت بودن محتوا، از مقادیر height:auto برای بلاک میانی که محتوا را نشان می دهد استفاده کرده ایم.
– ویژگی background-repeat:repeat-y یک تصویر را به صورت همپوشانی تا جایی که کل ارتفاع را پوشش دهد در محور y ها تکرار می کند.
– برای تکه بالا و پائین بلاک، به عناصر استاتیک (با ارتفاع ثابت) نیاز داریم، لذا از پس زمینه ای ثابت و مقادیر background-repeat:no-repeat استفاده می کنیم.
– به نحوه قرار گیری و چینش بلاک های div به صورت تو در تو دقت کنید.
برش عناصر در فتوشاپ و ذخیره کردن آنها
با دانستن چارچوب کار، برش تصاویر کار سختی نیست، کافی است برای هر قسمت، به همان اندازه یک لایه جدید در فتوشاپ بسازیم و تصویر را در آن تنظیم کنیم، مثلا برای هدر قالب، یک لایه با اندازه ۸۹۶ در ۱۵۰ پیکسل (که قبلا در کد css تعریف کرده ایم)، در فتوشاپ ایجاد می کنیم، و تصویر هدر را به داخل آن می کشیم، یا حتی می توان آن را مجددا درون لایه جدید ترسیم کرد (انتخاب روش ها تا حدود زیادی بستگی به خودتان دارد).
web-template-transport
آنگاه خروجی کار را با فرمت jpg یا png ذخیره می کنیم تا از آن برای پس زمینه هدر استفاده کنیم.
برای آشنایی با نحوه برش پس زمینه های داینامیک، می توانید از آموزش زیر استفاده کنید:
نحوه ساخت باکس گوشه گرد در فتوشاپ و css
پیش نمایش نهایی قالب
پس از اینکه پس زمینه ها را برش زدیم و آنها را در تصاویر جداگانه ذخیره کردیم، برای تکمیل شدن قالبمان باید در کدها و کلاس های 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;
}

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