article

آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم

web-blog-template-design

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

قالب وبلاگ چیست؟


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

آیا هر سرویس وبلاگی، اصول طراحی قالب مخصوص به خود دارد؟


در پاسخ به این سوال می توان گفت که قسمت عمده کار طراحی قالب بین سرویس های وبلاگی مختلف مشترک است که همان بخش کدنویسی HTML و استایل CSS در کنار استفاده از گرافیک وب است، اما آنچه که باعث به اصطلاح سازگار و متمایز شدن قالب ها از هم (به فرض قالب میهن بلاگ، بلاگ اسکای، پرشین بلاگ و...) می شود در واقع استفاده از تگ های اختصاصی این سرویس ها در کنار کدنویسی HTML کار است، منظور از تگ اختصاصی عبارات کلیدی و منحصربفردی هستند (معمولا محصور شده با علامت <>، [] و...) که هر سرویس وبلاگی برای ترجمه امکانات خاص خود به خروجی HTML از آنها استفاده می کند، این کدها عموما سلیقه ای هستند و از این رو بین سرویس های مختلف رویه یکسانی وجود ندارد، مثال ساده زیر تگ اختصاصی مربوط به نمایش عنوان نویسنده مطلب را بین چند سرویس وبلاگی مختلف نمایش می دهد:
نویسنده مطلب در پرشین بلاگ:
<-PostAuthor->
نویسنده مطلب در بلاگ اسکای:
<BlogSky:Post AuthorName />
نویسنده مطلب در میهن بلاگ:
[cb:post_author_name]
اگر این تگ ها را در یک قالب مخصوص آن سرویس استفاده کنید، در خروجی به جای تگ، نام نویسنده مطلب نمایش داده می شود!

تگ های اختصاصی قالب ها را کجا پیدا کنیم؟


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

آیا یادگیری HTML و CSS برای طراحی قالب ضروری است؟


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

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


اصولا نوشتن کدهای HTML و CSS با هر ابزاری که قابلیت تایپ در آن باشد (مانند Notepad ساده) امکانپذیر است، اما در دنیای حرفه ای بهتر است از یک نرم افزار تخصصی کمک بگیرید تا هم سرعت کار افزایش، دقت کدنویسی مضاعف و هم لذت کارتان را حس کنید، در این خصوص می توان از بین نرم افزارهای تجاری (که به لطف هکرهای مثبت! به صورت رایگان در اختیار ما قرار می گیرند)، Adobe Dreamweaver را نام برد و از بین نرم افزارهای متن باز می توان به Eclipses و NetBeans IDE اشاره کرد، در کنار این برنامه ها بهتر است جایی نیز برای برنامه به ظاهر ساده اما واقعا کارآمد ++Notepad قائل شویم که در شرایط های مختلف می تواند دستیار خوبی برایمان باشد!

برای یک طراح وب شدن چقدر زمان مورد نیاز است؟


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

از چه منبعی برای یادگیری دانش طراحی وب استفاده کنیم؟


پاسخ این سوال کمی به سلیقه شما بستگی دارد، برخی با یادگیری از طریق کتاب میانه خوبی دارند، برخی به صورت ویدئو و عده ای نیز وب را ترجیح می دهند، به هر حال امروزه در زمینه یادگیری CSS، HTML و در کل طراحی وب، سایت های زیادی (چه به زبان فارسی و چه انگلیسی) مشغول فعالیت هستند که در بهترین حالت می توانید ترکیبی از چند سایت را هم زمان داشته باشید، همچنین کتاب های تالیفی یا ترجمه شده خوبی در این زمینه وجود دارد که برای اطلاعات بیشتر کافی است سری به کتاب فروشی ها بزنید!
در پایان این مطلب باید یادآور شویم که فراگیری طراحی یا برنامه نویسی وب باید به صورت تدریجی و پلکانی صورت گیرد، بدین معنی که هیچ گاه بدون مطالعه و تمرین کافی در مباحث مقدماتی، به مباحث پیشرفته تر رجوع نکنید، در غیر این صورت ممکن است موجبات دلسردی شما فراهم شده و از ادامه مسیر منصرف گردید، اگر با حوصله پیش بروید بعد از مدتی آنقدر مسلط خواهید شد که هر نوع طرحی را به راحتی کدنویسی کنید!
sectionدسته بندی: مهارتهای وب » وبلاگ نویسی
related مطالب بیشتر:
» پاسخ به سوالات و حل مشکلات وبلاگ نویسان
» پلیر قدرتمند، ساده و زیبا برای پخش آهنگ در وب
» اشتباهات رایج در وبلاگ نویسی غیر حرفه ای!
» نحوه درج تصویر در وبلاگ و سایت
» نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
commentنظرات (۲۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: mahdi
۲۰:۱۵ ۱۳۹۸/۱۲/۰۳
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر داخل ادامه مطلب و قسمت نظرات رو خیلی مشکل دارم، فهمیدم که میشه اونجا رو هم خودمون طراحی کنیم با این کد
<CommentBlock>
که وسطای این صفحه هستش
http://news.loxblog.com/page/code
فقط یه خواهشی داشتم اگه ممکنه براتون وقت بزارید این دو تا صفحه رو یه کد ساده html بزنید و اون کدهای لوکس بلاگم داخلش بزارید ، من اصلا نتونستم بفهمم کدهای لوکس بلاگو باید کجای طرح خودمون بزاریم، یه طرحم زدم گذاشتم داخل قالب که پایین وبلاگ نمایش داده شد و جای اون قسمت ها رو نگرفت، خیلی ممنون میشم اگه راهنماییم کنی
پاسخ: 
دقیقا متوجه بخش آخر سوال و مشکل نشدیم؟! اگر وبلاگ ندارید لطفا یک وبلاگ آزمایشی ثبت کنید که بتوانیم اشکالات کار را تست و راه حل کاربردی پیشنهاد دهیم، به این صورت اطلاعات ما صرفا در حد تئوری خواهد بود، برای آشنایی بیشتر می توانید قالب های پیش فرض لوکس بلاگ یا قالب های رایگان موجود در وب را نیز بررسی کنید که جنبه آموزشی خوبی دارد.
نویسنده: mahdi
۱۳:۲۰ ۱۳۹۸/۱۲/۰۴
سلام استاد ، گذاشتمش توی این وبلاگ
http://nazarha.loxblog.com
رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون میشم اگه اینو درستش کنی برام که هم قسمت نظرات و هم نظراتی که پایین مطلب میاد رو بدونم چطوری میشه تغییر بدم ، خیلی ممنون لطف می کنی ، موفق باشی
پاسخ: 
لوکس بلاگ قسمت های خاصی را به صورت قابل ویرایش در نظر گرفته است و بی نظمی زیادی در کدنویسی ها دیده می شود! به هر حال اگر با CSS آشنا باشید اعمال برخی تغییرات ظاهری مانند تغییر تگ های div که در ویرایش قالب اصلی در دسترس هستند ساده است اما موارد درونی مانند فیلدهای input که نظر را در آن می نویسیم به دلیل اینکه کد اختصاصی آنها در قالب وجود دارد اما تگ input توسط لوکس بلاگ چاپ می شود حداقل به راحتی ممکن نیست، به فرض فیلدهای قسمت ارسال نظر در ادامه مطلب با کد
<CommentFieldSize:40>
در خروجی HTML وبلاگ با ابعاد 40 نمایش داده می شوند و می توانیم این مقدار را کم و زیاد کنیم یا سایر تنظیماتی که به صورت کد اخصاصی در ویرایش قالب اصلی وجود دارد، اما نمی توانیم به راحتی بلاک های div به آنها دسترسی داشته بیاشیم، نتیجه اینکه برای تغییر مواردی که در ویرایش قالب به صورت خام وجود دارد مانند تگ های div باید با CSS آشنا باشید، برای موارد اختصاصی که خود لوکس بلاگ به صورت تگ های خاص در نظر گرفته است قدرت مانورمان کمتر است، هر چند اگر خروجی HTML وبلاگ را بررسی کنیم می بینیم که در نهایت تگ های اختصاصی به تگ های HTML مانند input تبدیل می شوند اما کلاس CSS خاصی ندارد و باید به صورت کلی برایشان استایل تعریف کنیم، اگر بحث استایل دهی برایتان پیچیده است بهترین گزینه یادگیری CSS از مقدمات است که چندان هم زمانبر و سخت نیست!
نویسنده: mahdi
۱۵:۴۸ ۱۳۹۸/۱۲/۰۵
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش ... لوکس بلاگ خیلی سرویس خوبیه ولی بنظرم مشکلش اینه که همه قالبهاش دیگه بدرد نخور شدن همشون بصورت تیبل هستن و نظراتشم که استایلدهی داخلی شده و دسترسی نداریم و ... اگر میشد قسمت نظرات رو دسترسی کامل میداشتم کارم راه میفتاد :) شما که اطلاعاتتون بیشتره پیشنهادتون کدوم وبلاگدهی هستش که ناجوانمرد نباشن مثل بلاگفا ... مثلا از لحاظ آزادی توی کارای تبلیغاتی و کسب درآمد گیر ندن و همه قسمت های سمت کاربر وبلاگ رو هم بتونیم خودمون طراحی کنیم ، در کل استاد قصد دارم به امید خدا تا دو سه سال آینده بصورت حرفه ای وارد کار اینترنتی و طراحی وب شم ، چندتا دامنه خوب دارم میخوام بندازم روی وبلاگ روشون کار کنم که قسمت فروش بک لینک و تبلیغات هم داشته باشم ، ممنون میشم راهنماییم کنی ، خدا خیرت بده موفق باشی
پاسخ: 
برای کارهای حرفه ای استفاده از سرویس های رایگان را پیشنهاد نمی دهیم! اگر مسیر وردپرس و سایت اختصاصی را دنبال کنید بهتر است، سعی کنید نگاهتان به وب واقع بینانه باشد و فرصت ها و تهدیدها را بشناسید، به درآمدهای کوتاه مدت فکر نکنید معمولا پروژه های وب بنیادی، زمانبر و دیربازده هستند اما اگر مهارت، هدف و ایده داشته باشید بازدهی کار می تواند بیش از تصورتان باشد! در نقطه مقابل اگر کار را ساده و سطحی بگیرید و بدون دانش فنی لازم قدم در این راه بگذارید اگر شکست نخورید احتمالا به بازدهی کمی خواهید رسید، خوشبختانه حتی این امکان وجود دارد که در کنار کسب و کار دیگری وب را هم به عنوان دلمشغولی های خود اما به طور جدی پیگیری کنید.
نویسنده: mahdi
۱۹:۳۷ ۱۳۹۸/۱۲/۰۹
سلام استاد عزیز ، من بسته آموزش جاوا اسکریپت و جی کوئری رو از فرادرس خریدم که واقعا بدرد نخور هستن ، بعد با سایت تاپ لرن آشنا شدم که همه آموزش هاشون تصویری و رایگان هست ، اگه براتون ممکنه یه نگاه کوچولو بهش بندازید ببینید اگه خوبه روشون وقت بزارمو همونا رو آموزش ببینم ، مرسی خیلی ممنون میشم ازت ، موفق باشی
پاسخ: 
سرتیتر آموزش های هر دو سایت را بررسی کردیم، موضوعات مطرح شده در هر دو به نظر جامع هستند و برای شروع یادگیری با هر کدام راحت بودین ادامه دهید (ظاهرا 70 درصد مبلغ در فرادرس قابل استرداد است)، ضمن اینکه هیچ مرجعی نمی تواند تمام جزئیات را آموزش دهد، برخی از مباحث صرفا در حین پروژه نویسی کاربردی می شوند و باید موردی آنها را فرا بگیرید.
نویسنده: mahdi
۱۶:۱۵ ۱۳۹۸/۱۲/۱۰
خیلی ممنون استاد گرامی ، هم خودت هم خانوادتون موفق و سالم و سلامت باشید ، در ضمن 70 درصدو ندادن ، بجاش یه لیست برام ایمیل کردن که بیا جاش اینارو بخر تخفیف میدیم بهت :))) الهی شکر
پاسخ: 
سپاس فراوان و آرزوی سلامتی و موفقیت متقابل.
نویسنده: احمد
۰۲:۴۳ ۱۳۹۹/۰۶/۰۱
سلام میخاستم ازتون بپرسم چطوری میتونم توی قالب زیر
http://8upload.ir/uploads/f39402953.txt
به جای هدر یه اسلاید بزارم
پاسخ: 
هدر این قالب (تصور زیر) به صورت پیوسته و متناسب با سایر عناصر طراحی شده است:
http://s12.picofile.com/file/8398903834/omaru1.png
لذا به راحتی نمی توانید این قسمت را با اسلایدر جایگزین کنید، می توانید کد اسلایدر را در قسمت مناسب دیگری (به فرض ابتدای قالب بعد از بسته شدن تگ head) درج کنید منتها سفارشی سازی آن نیاز به آشنایی با HTML و CSS خواهد داشت.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





3 × 9
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸

form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸

form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷

form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷

form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰
form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰
form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹
form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸
form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.