i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

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

web-design

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

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


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

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


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

تسلط بر HTML و CSS


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

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


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

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


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

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


جهت درک بهتر، آشنایی بیشتر و داشتن دورنمای کلی از طراحی قالب وب، یک نمونه فرضی کد قالب وبلاگ را در زیر درج کرده ایم (نمونه زیر کاملا فرضی و کدنویسی آن ناقص است، صرفا جهت آشنایی بیشتر درج شده):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمونه کد فرضی قالب وبلاگ</title>
<!-- Webgoo.ir -->
<meta name="keywords" content="<-BlogAndPostTitle->, <-BlogId->">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->">
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#header{
    background:#15ACD3;
    height:200px;
}
#menu{
    background:#9A070A;
    height:50px;
}
#main{
    border:1px solid #0F0C0C;
}
.sidbar-right{
    text-align:justify;
}
.center{
    text-align:justify;    
}
.sidbar-left{
    text-align:justify;
}
#footer{
    text-align:left;
}
</style>
</head>
<body>
<div id="header">
<h1><-BlogTitle-></h1>
<h3><-BlogDescription-></h3>
</div>
<div id="menu">
<a href="<-BlogUrl->">صفحه اصلی</a>
</div>
<div id="main">
<div class="sidbar-right">
<BlogProfile>
درباره وب<BlogPhoto>
<img src="<-BlogPhotoLink->">
</BlogPhoto>
</BlogProfile>
</div>
<div class="center">
کدهای مربوط به قسمت مطالب وبلاگ
</div>
<div class="sidbar-left">
کدهای مربوط به سایدبار سمت چپ
</div>
</div>
<div id="footer">
کدهای مربوط به قسمت فوتر قالب
</div>
</body>
</html>
در پایان این مطلب یادآور می شویم که حداقل در دنیای فناوری باید همیشه از گام های کوچکتر شروع کنیم تا آهسته و پیوسته به یک طراح حرفه ای قالب وب تبدیل شویم!
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» آموزش انتقال قالب از فتوشاپ به کد html و css
» طراحی هدر قالب سایت و وبلاگ با فتوشاپ و css
» طراحی قالب سه بعدی وب با فتوشاپ و css
» زیبا سازی فرم های وب با css
commentنظرات (۱۴۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: گلناز
زمان: ۰۹:۳۸:۴۰ - تاریخ: ۱۳۹۱/۰۶/۱۴
ای بابا خیلی گیج کننده بود واسه منکه مبتدی هستم
پاسخ: 
واقعیت این است که طراحی قالب وب، ماهیتا کمی پیچیده است، چون جزئیات زیادی دارد و باید کم کم شروع کنید، به هر صورت اگر در بخش خاصی مشکل دارید، می تواند مطرح کنید تا بیشتر راهنمایی کنیم.
نویسنده: آنارام
زمان: ۰۸:۵۰:۲۲ - تاریخ: ۱۳۹۱/۰۷/۰۵
سلام و صد درود به وبگو
ممنونم از آموزش های خوب شما
من امروز به اتفاقی سایت شما را پیدا کردم و خوشحال میشم شما رو اد کنم
مشکلی که من در وبلاگم دارم و خوشحال میشم منو راهنمایی کنید اینکه کسی نمیتونه تو وبلاگم عضو بشه نمیدونم چطور این مشکل رو حل کنم
البته من هنوز مطالب آموزشی شما رو کامل نخوندم
براتون آرزوی موفقیت و شادکامی دارم
پاسخ: 
سلام
ممنون از نظر لطف شما.
در مورد مشکلی که مطرح کردید لطفا کمی بیشتر توضیح دهید، سرویس دهنده شما خدمات عضویت را ارائه می دهد یا از ابزاهای وبلاگ نویسی جهت عضوگیری استفاده می کنید؟
نویسنده: هژیر
زمان: ۱۷:۰۷:۵۴ - تاریخ: ۱۳۹۱/۰۷/۲۴
سلام
واقعا از مطالبتون استفاده کردم
موفق باشید
نویسنده: سارا
زمان: ۱۶:۲۴:۲۱ - تاریخ: ۱۳۹۱/۰۸/۱۴
سلام میشه کمی بیشتر در مورد طراحی وبلاگ توضیح بدی من که تازه با وبلاگ اشنا شدم چیز از این نفهمیدم
پاسخ: 
سلام
باید کمی بیشتر در دنیای وب تجربه کسب کنید تا بتوانید قالب وبلاگ طراحی کنید، طراحی وب یک کار تقریبا تخصصی است و نیاز به تجربه اولیه در زمینه مدیریت وبلاگ، آشنایی با html و css و... دارد.
نویسنده: niloufar
زمان: ۱۸:۰۵:۰۵ - تاریخ: ۱۳۹۱/۰۸/۲۴
سلامممممممممم
من هنوز مطلب رو نخوندم
اما اگه ميشه بگيد كجا بايد آموزش اين كارا رو ببينم
ممنون ميشم
من معماري خوندم طراحيم عاليه فقط كمك مي خوام
ممنون فعلا
پاسخ: 
سلام
برای آموزش طراحی قالب، منابع زیادی در وب و همچنین به صورت کتاب وجود دارد، کافی است کمی جستجو کنید.
نویسنده: رضوانه
زمان: ۱۵:۴۵:۰۶ - تاریخ: ۱۳۹۱/۰۸/۲۶
ای بابا شما که توی همه اموزش هاتون گفتین که باید برنامه نویسی رو به صورت حرفه ای بلد باشی. برای من که یه مقدار با فتوشاپ و برنامه نویسی اشنایی دارم یه اموزشی بدین تا استفاده کنم.
ممنون.
پاسخ: 
برنامه نویسی و به خصوص برنامه نویسی وب یک تخصص مبتنی بر مهارتهای پایه است، یعنی نمی توانید بدون گذراندن مراحل و آموزش های مقدماتی و کسب تجربه، کارهای حرفه ای انجام دهید و به طور مثال قالب طراحی کنید، لذا بسته به سطح آشنایی و مهارت، می توانید ابتدا از آموزش های مقدماتی شروع کنید، سپس به موارد کاربردی بپردازید.
نویسنده: mehrdad
زمان: ۱۵:۵۰:۰۳ - تاریخ: ۱۳۹۱/۰۹/۲۸
با سلام. مطالب رو خوندم توضیحی آنچنانی درباره طراحی قالب نداده بودید با این وجود ازتون ممنون راستی یه سوال برام پیش اومده اونم در قسمت هدر هستش مشکلی با تصویرش ندارم مشکل من بیشتر با اسمیه که براش گذاشتم به صورت معمولی نوشته شده و من می خوام اون رو تغییر بدم (مثلا یه حالتی مثل سه بعدی) لطفا راهنمایم کنید
پاسخ: 
سلام
البته این مطلب تنها با هدف ارائه کلیات و اینکه از کجا شروع کنید نوشته شده، طراحی قالب یک هنر و تخصص است و نمی توان آن را در قالب یک مطلب خلاصه کرد، باید وقت بگذارید، تمرین داشته باشید و تجربه کسب کنید. در مورد مشکلی که مطرح کرده اید، اعمال تغییرات ظاهری در قالب وبلاگ با CSS امکان پذیر است، یعنی تگ html مربوط به تیتر را باید پیدا کنید و با نمونه کد زیر به آن استایل بدهید:
http://cssdeck.com/labs/3d-css-text-that-you-must-see
نویسنده: ساحل
زمان: ۱۱:۲۵:۰۰ - تاریخ: ۱۳۹۱/۱۰/۱۷
سلام من ساحلم 12سالمه
ما يه مسابقه وبلاگ نويسي تو مدرسمون داريم من هم چون هميشه آنلاينم گفتم شركت كنم
خلاصه حالا كه وبلاگم رو ساختم نميدونم چطوري تزيينش كنم و عكساي متحرك بذارم
فايل رو پر كردم اما درباره ي من اصلا روي صفحه نمياد
تو رو خدا هرچي در مورد تزيين و اينا ميدوني بهم بگو
ممنون ميشم
پاسخ: 
سلام
امیدواریم که در تمام مسابقات زندگی نفر اول شوید. :-)
اما اینکه قسمت درباره من نشان داده نمی شود به احتمال زیاد ایراد از قالب فعلی وبلاگ است، برای اطمینان از قسمت انتخاب قالب، یک مورد دیگر را انتخاب کنید، درباره تزئین، سایت های زیادی در وب وجود دارد که تصاویر متحرک را در اختیار وبلاگ نویسان قرار می دهند (چه به صورت کد جاوا اسکریپت که باید آن را در قسمت کدهای اختصاصی کاربر یا در بین کدهای html قالب وبلاگ قرار دهید و چه به صورت تصویر معمولی که می توانید آن را کپی کرده و در قسمت مطالب وبلاگ قرار دهید)، کافی است عبارت "تصاویر متحرک برای وبلاگ" را در موتورهای جستجو (مانند گوگل) جستجو کنید.
اگر مشکل دیگری بود لطفا آدرس وبلاگ را درج کنید تا بهتر راهنمایی کنیم.
نویسنده: ساحل
زمان: ۱۵:۰۸:۰۱ - تاریخ: ۱۳۹۱/۱۰/۱۷
ممنون
ولي يه سوال ميتونم خودم از عكسايي که روي كامپيوتر دارم روي صفحه وبلاگم كپي كنم؟؟؟؟؟؟؟؟؟
پاسخ: 
به طور مستقیم خیر، چون تصاویر در وب از روی سرورها نشان داده می شوند نه از روی کامپیوتر های شخصی، لذا باید آنها را در یک سرویس دهنده آپلود فایل، آپلود کنید، برای اطلاعات بیشتر این آموزش را مطالعه نمائید:
آموزش نحوه درج تصویر در وبلاگ
نویسنده: ساحل
زمان: ۱۷:۴۵:۲۸ - تاریخ: ۱۳۹۱/۱۰/۱۸
وااااااااااااااااااااااااااااااي
ازتون ممنونم خيلييييييييييييي بهم كمك كردين
ممنون
نویسنده: ساحل
زمان: ۱۹:۱۸:۱۷ - تاریخ: ۱۳۹۱/۱۰/۱۸
خب حالا من ي مشكل دارم!!!!!!!!!!!
ميخوام در مورد البرت انيشتين و پروين اعتصامي بنويسم،
مطلب رو كه ميذارم مياد قبل از ولكام ، و ولكام مياد بعد از اون
بايد چيكار كنم
پاسخ: 
برای اینکه یک مطلب همیشه در ابتدای سایر مطالب قرار گیرد سرویس دهنده وبلاگ باید امکان "پست ثابت" داشته باشد، اگر در پنل وبلاگ چنین قابلیتی وجود دارد، از آن استفاده کنید.
نویسنده: ساحل
زمان: ۱۶:۱۶:۳۶ - تاریخ: ۱۳۹۱/۱۰/۱۹
ممنون
يكم واضح تر بگيد سرويس دهنده وبلاگ و پنل چيه؟؟؟؟؟
پاسخ: 
سرویس دهنده همان سایتی است که وبلاگ را در آن ایجاد می کنید، مانند بلاگفا، پرشین بلاگ، میهن بلاگ و... و پنل همان جایی است که وبلاگ را مدیریت می کنید به طور مثال مطلب جدید درج می کنید، نظرات را مدیریت می کنید و...
نویسنده: roya
زمان: ۱۰:۵۷:۵۱ - تاریخ: ۱۳۹۱/۱۰/۲۷
سلام . من خیلی علاقه به برنامه نویسی دارم و حتی دوست دارم که یه قالب هم درست کنم اما چیزی از برنامه نویسی سر در نیارم لطفا راهنماییم کنید که باید برای مطالب ابتدایی چه چیزهایی را آموزش ببینم. ممنون
پاسخ: 
سلام
در مطلب فوق کارهایی که باید انجام دهید توضیح داده شده است، اما جهت یادآوری و جمع بندی:
- تسلط بر html و سپس css.
- آشنایی با جاوا اسکریپت.
- تسلط نسبی بر فتوشاپ.
- آشنایی با تگ های اختصاصی سرویس دهنده وبلاگ برای طراحی قالب.
این چند مورد برای طراحی قالب وبلاگ کفایت می کنند.
نویسنده: roya
زمان: ۱۱:۴۳:۲۷ - تاریخ: ۱۳۹۱/۱۰/۲۸
مرسی از محبتت.
نویسنده: masumeh
زمان: ۱۹:۵۵:۴۷ - تاریخ: ۱۳۹۱/۱۲/۰۲
سلام من میخوام یه سایتی طراحی کنم البته برای پروژه ام. نمیدونم از کجا شروع کنم. منظورم اینه که یه سایتی باشه که از اول اولش بتونه بهم کمک کنه. سایتتون خیلی خوبه ولی نمونه پروژه نداره
پاسخ: 
سلام
در این مورد ابتدا باید با اصول و برنامه نویسی وب حداقل در حد مقدماتی آشنا باشید، از طرفی طراحی سایت یک مفهوم گسترده است و از کدنویسی صفحات استاتیک html تا طراحی سیستم های داینامیک پیشرفته مدیریت محتوا را در برمی گیرد.
paged صفحه 1 از 10




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

2 × 5
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)