چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟

برای طراحی قالب وب از کجا شروع کنیم؟

اولین سوالی که ممکن است به ذهنمان خطور کند این است که برای طراحی قالب وب باید از کجا شروع کنیم؟

در پاسخ می توان گفت که طراحی قالب سایت و وبلاگ از دو بخش طراحی و کدنویسی تشکیل می شود که به این دلیل ممکن است از دوردست کمی پیچیده به نظر برسد، در این راه قبل از هرچیز باید درک کلی از اینکه قالب وب چیست داشته باشیم:

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

تسلط بر HTML و CSS

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

یادگیری فتوشاپ (Photoshop) و تکنیک های طراحی

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

استفاده از نرم افزارها

برای طراحی و کدنویسی قالب های وب معمولا نرم افزارهایی مورد استفاده طراحان و توسعه دهندگان قرار می گیرد، از جمله در زمینه قالب های آماده که بیشتر به کار طراحان کم تجربه تر می آید می توان به برنامه Artisteer اشاره کرد، در زمینه کدنویسی پیشرفته نیز برنامه Adobe Dreamweaver یکی از معروف ترین ها است که می تواند استفاده چند منظوره (طراحی و کدنویسی) داشته باشد، برنامه phpStorm برای توسعه دهندگان حرفه ای زبان برنامه نویسی PHP نیز گزینه واقعا قوی و مطرح دیگری است، استفاده از نرم افزارها در کدنویسی و طراحی قالب سایت و وبلاگ به موارد گفته شده محدود نمی شود، با یک جستجوی کوتاه در وب می توانیم موارد دیگری را نیز پیدا کنیم که ممکن است کار با آنها به نظرمان ساده تر و جذابتر باشد.

آشنایی با تگ های اختصاصی سایت یا سرویس وبلاگی

پس از فراگیری مبانی وب، کدنویسی HTML و استایل نویسی CSS و کار با یک برنامه گرافیکی مانند فتوشاپ قادر خواهیم بود تا فرم و اسکلت کلی کار را با طراحی و کدنویسی ایجاد کنیم، اما برای استفاده از این کدها به عنوان قالب وب گام دیگری نیاز است، به سراغ سیستم مدیریت سایت یا سرویس وبلاگی خود می رویم، معمولا سیستم های مدیریت محتوای سایت (CMS ها) و سرویس های وبلاگی از اصول و کدهای خاص خود در کنار کدنویسی HTML و CSS استفاده می کنند که به آنها تگ های اختصاصی می گوئیم، اینکه تگ های اختصاصی چه کاربردی دارند را در ادامه بررسی می کنیم.

کاربرد تگ های اختصاصی قالب و نمونه کدها

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

<-PostContent->

در آن سیستم سازنده بخش مطالب باشد و برای نظرات عبارات قراردادی دیگری مانند

<-BlogComment->

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

نمونه فرضی کد قالب وب

جهت درک بهتر، آشنایی بیشتر و داشتن دورنمای کلی از طراحی قالب وب، یک نمونه فرضی کد قالب وبلاگ را به همراه پیش نمایش آنلاین آن در زیر درج کرده ایم (نمونه زیر کاملا فرضی و کدنویسی آن ناقص می باشد، صرفا جهت آشنایی بیشتر درج شده است):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمونه کد فرضی قالب وبلاگ</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a, a:hover{
    text-decoration:none;
}
#header{
    background:#15ACD3;
    width:100%;
    height:200px;
    text-align:center;
}
#menu{
    background:#9A070A;
    width:100%;
    height:50px;
}
#main{
    background:#F0F0F0;
    min-height:200px;
    width:100%;
}
.sidbar-right{
    background:#E5E5E5;
    display:inline-block;
    width:25%;
    text-align:justify;
    text-align:center;
}
.center{
    background:#E9E9E9;
    display:inline-block;
    width:50%;
    text-align:justify; 
    text-align:center;   
}
.sidbar-left{
    background:#E5E5E5;
    display:inline-block;
    width:25%;
    text-align:center;
}
#footer{
    background:#333;
    color:#FFFFFF;
    width:100%;
    height:50px;
    text-align:left;
}
</style>
</head>
<body>
<div id="header">
<h1><-BlogTitle-> عنوان صفحه</h1>
<h3><-BlogDescription-> شرح صفحه</h3>
</div>
<div id="menu"><a href="#">صفحه اصلی</a> <-BlogTopMenu-></div>
<div id="main">
<div class="sidbar-right">
کدهای مربوط به سایدبار سمت راست <-BlogAbout->
</div><div class="center">
کدهای مربوط به قسمت مطالب <-BlogContent->
</div><div class="sidbar-left">
کدهای مربوط به سایدبار سمت چپ <-BlogAds->
</div>
</div>
<div id="footer">
کدهای مربوط به قسمت فوتر قالب <-BlogFooter->
</div>
</body>
</html>

پیش نمایش آنلاین
در پایان این مطلب یادآور می شویم پیش نیاز فراگیری مهارت طراحی قالب وب طی دوره های آموزش مقدماتی HTML و CSS است و نمی توان در یک یا چند مطلب جزئیات مختلف این مهارت را آموزش داد، در این یادداشت سعی شد تا دورنمای کلی کار و اطلاعات اولیه مورد نیاز برای علاقمندان شرح داده شود.