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

قالب سایت و وبلاگ به عنوان ویترین صفحه وب محتوای مد نظرمان را در چارچوب مشخص به کاربر نمایش می دهد و در اصل بخش اصلی رابط کاربری (User Interface) به حساب می آید، لذا طراحی قالب سفارشی یکی از اصلی ترین قسمت های فعالیت حرفه ای در وب محسوب می شود، اینکه چگونه قالب اختصاصی برای سایت یا وبلاگمان طراحی کنیم پرسشی است که پاسخ آن را به راحتی نمی توانیم در یک مطلب خلاصه کنیم اما آنچه مهم است اینکه بدانیم از کجا باید شروع کنیم و چه فراز و فرودهایی پیش رو داریم، آیا واقعا نیاز است که منابع مختلف را مطالعه کرده و ساعت ها زمان صرف این کار کنیم یا در عوض از نرم افزارهای قالب ساز آماده استفاده و اصول فنی کار را رها کنیم، در یک پاسخ کوتاه به این سوالات باید گفت که در واقع هیچ کدام از این روش ها به تنهایی چاره کار نیست، در ادامه خواهیم دید که بهترین روش یادگیری موارد فنی در حد رفع نیاز و در عین حال استفاده از ابزارهای جانبی طراحی و کدنویسی است.
برای طراحی قالب وب از کجا شروع کنیم؟
اولین سوالی که ممکن است به ذهنمان خطور کند این است که برای طراحی قالب وب باید از کجا شروع کنیم؟
تسلط بر 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 است و نمی توان در یک یا چند مطلب جزئیات مختلف این مهارت را آموزش داد، در این یادداشت سعی شد تا دورنمای کلی کار و اطلاعات اولیه مورد نیاز برای علاقمندان شرح داده شود.


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


یه سوال ازتون داشتم
من خیلی علاقه دارم که یه قالب وبلاگ (مثل قالب سایت) طراحی کنم و مثلا مثل همین سایت شما توش مطلب آموزشی بزارم الانم طبق چیزی که خودم میدونم HTML رو ۹۰٪ و CSS رو ۸۵٪ تقریبا بلدم به نظر شما برای این کار باید این دو زبان رو کاملا (۱۰۰٪) بلد باشم یا همین مقدار برای ساخت یه وبلاگ آموزشی کوچیک کافیه؟ البته خودمم میدونم که برای پویا سازی وبلاگ باید جاوا اسکریبت هم بلد باشم
لطفا کمککککککککککککککک
این سوالو کامل اگر توضیح بدی خیلی خیلی خیلی ممنونت میشم که در چه سطحی از کار طراحی سایت باید به php مسلط بود؟
سر دوراهی موندم که آیا زمانم رو بزارمو برنامه نویسی اندروید یاد بگیرم یا php ... فکر خودم اینه که من نمیخوام سایتهای بزرگی مثلا مثل آپارات یا دیجی کالا و .... طراحی کنم چون قصدم کار شخصی و تکی هست نه با گروه و برای همین فکر میکنم نیازی نداره کلی از زمانمو بزارم برای یادگیری php و آخر سر هم که یادگیریم تموم شد ببینم که هیچ کار خاصی باهاش انجام نخواهم داد .... بنظر خودم چیزایی که لازم دارم آموزش ببینم اینا هستن
html, css, jsvascript, jquery, react, angular, json, ajax و sql و اندکی php
آیا بنظرتون من درست فکر میکنم ؟
لطفا یه توضیح کامل و جامع بهم بدید خیلی درگیر این موضوع شدم
و اگر php و sql باید به مقدار لازم بلد باشم ، لطفا بگید تا چه حد باید بلد باشم و چه مبحثایی رو باید یاد بگیرم؟
خیلی ممنونتم استاد بخدا هیچکسو جز شما ندارم این سوالارو ازش بپرسم ، خیلی ممنونت میشم رو این سوالام وقت بزاری و یه جواب کامل بهم بدی تا از این سردرگمی دربیام ، خیلی ممنونتم موفق باشی
برای ورود به بازار کار اول چند پروژه آزمایشی طراحی کنید، اگر مشکلی نداشتید سفارش گیری کنید، تهیه نسخه های پشیبان از اطلاعات پروژه ها را فراموش نکنید مخصوصا در اوایل کار اشتباهات ناخواسته زیادی ممکن است رخ دهد!
یه سوال دیگه هم داشتم اینکه آموزشهای w3school توی ری اکت و انگولار و نود جی اس از لحاظ صرفا تئوری بنظرتون کامله (منظورم بغیر از اون تجربه هایی هست که گفتین حین کار بدست میاد)؟
خیلی ممنون استاد عزیز و مهربان و دوست داشتنی ...
در خصوص w3school در کل هیچ وقت به یک منبع بسنده نکنید، اگر مبحثی را کامل متوجه می شوید شاید همین منبع کفایت کند اما در صورتی که احساس می کنید مثال ها کم یا ابهامی وجود دارد در گوگل جستجو کنید! آموزش های w3school صرفا برای شروع گزینه مناسبی هستند، خیلی از نمونه کدهای برنامه ها را باید در جاهای دیگر پیدا کنید.
ببخشید مطلبتون خیلی خوب بود
یه سوال من با فتوشاپ انلاین کار می کنم نمی دونم چرا نمی تونم باهاش قالب بسازم
ببخشید
قالب های وردپرس در کل مبتنی بر همان HTML و CSS و کدنویسی PHP هستند یعنی ابتدا باید اینها را فرا بگیریم و فرم اصلی کار را طراحی کنیم، در گام دوم باید با ساختار فایل بندی قالب ها و انواع مختلف متدهای وردپرس که به صورت دستورات PHP در قالب استفاده می شوند آشنا شویم، برای شروع در خود دایرکتوری قالب ها می توانیم موارد پیش فرض را بررسی کنیم که جنبه آموزشی مناسبی دارند، در کنار اینها چند منبع به انگلیسی:
https://codex.wordpress.org/Theme_Development
https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/
https://colorlib.com/wp/how-to-create-unique-wordpress-themes-tutorials/
برای زبان فارسی باید در انجمن های وردپرس و سایت های ارائه دهنده خدمات وردپرسی جستجو کرد، اما توصیه می کنیم اگر زمان کافی دارید خرید موارد غیر رایگان خیلی ضرورتی ندارد مگر اینکه واقعا به مبحثی نیاز مبرم داشته باشید یا احساس می کنید آموزش کامل است و ارزش صرف هزینه را دارد.برای ساخت قالب باید برنامه ای نصب کنیم؟
اصلا در کجاها میشه قالبو درس کرد؟
ممنون میشم جواب بدید.
ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟

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




































پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.