یکشنبه ۱۵ مهر ۱۴۰۳

Sunday, October 6, 2024 GMT +3:30

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

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 و در کل طراحی وب، سایت های زیادی (چه به زبان فارسی و چه انگلیسی) مشغول فعالیت هستند که در بهترین حالت می توانید ترکیبی از چند سایت را هم زمان داشته باشید، همچنین کتاب های تالیفی یا ترجمه شده خوبی در این زمینه وجود دارد که برای اطلاعات بیشتر کافی است سری به کتاب فروشی ها بزنید!
در پایان این مطلب باید یادآور شویم که فراگیری طراحی یا برنامه نویسی وب باید به صورت تدریجی و پلکانی صورت گیرد، بدین معنی که هیچ گاه بدون مطالعه و تمرین کافی در مباحث مقدماتی، به مباحث پیشرفته تر رجوع نکنید، در غیر این صورت ممکن است موجبات دلسردی شما فراهم شده و از ادامه مسیر منصرف گردید، اگر با حوصله پیش بروید بعد از مدتی آنقدر مسلط خواهید شد که هر نوع طرحی را به راحتی کدنویسی کنید!
دسته بندی: مهارتهای وب » وبلاگ نویسی
related مطالب بیشتر:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
محافظت از مطالب وبلاگ در مقابل کپی غیر مجاز!
نحوه درج تصویر در وبلاگ و سایت
پلیر قدرتمند، ساده و زیبا برای پخش آهنگ در وب
نحوه قرار دادن کلیپ فلش در سایت و وبلاگ
دیدگاه
more ۷۵ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
پـــرتو
۱۸:۵۲ ۱۴۰۱/۰۳/۰۴
هیچی درست شد ممنونم خیلی ممنونم ازتون من جای بدی گذاشته بودم ممنونم از شما :)
پـــرتو
۱۴:۴۴ ۱۴۰۱/۰۳/۰۹
سلام جناب خسته نباشید ببخشید یه سوال می تونم بپرسم سایت وبگذر برای همیشه بسته شد؟ یا فقط برای یه مدته؟
تا آنجا که اطلاع داریم تا این لحظه این سایت اعلامی مبنی بر عدم فعالیت نداشته است، خطایی که در صفحات داخلی سایت نمایش داده می شود نشان می دهد که دامنه سایت فعال است و احتمالا مشکل موقتی و رفع خواهد شد، البته صرفا مدیریت وبگذر می تواند اطلاعات قطعی در خصوص آینده سرویس ارائه کند.
پـــرتو
۱۶:۵۶ ۱۴۰۱/۰۳/۰۹
پس مشکل از خوده سایته و از ما نیست درسته؟ اوکی ممنونم خیلی ممنون :)
بله مشکل از سمت سرور سایت وبگذر است، منتها مشخص نیست به زودی حل می شود یا خیر.
پرتو
۱۵:۱۲ ۱۴۰۱/۰۳/۱۶
سلام خسته نباشید شرمنده مزاحم میشم شما متوجه شدین سایت وبگذر برای همیشه بسته شده یا نه؟ ممنون میشم بگین ممنونم منتظرم
سایت وبگذر در حال حاضر در دسترس است.
پرتو
۲۲:۲۴ ۱۴۰۱/۰۳/۱۸
سلام خسته نباشید بله خدا رو شکر دیدم در دسترس هست :) امروز دیدم :)
۰۶:۳۵ ۱۴۰۱/۰۳/۲۷
سلام، من می‌خوام خودم طرح وبلاگ بزنم، ولی بلد نیستم :(
متاسفانه راه دیگری برای طراحی قالب وبلاگ جزء فراگیری مهارتهای مورد نیاز از جمله HTML و CSS وجود ندارد، اگر علاقمند باشید در زمان کمی می توانید اولین قالب های وبلاگ را طراحی کنید.
پرتو
۱۷:۰۴ ۱۴۰۱/۰۴/۱۳
سلام خسته نباشید عه ببخشید یه سوال داشتم اگه بخام کل پستام بردر داشته باشه توی همون قالب که بهتون دادم ، باید از چه کدی استفاده کنم؟ و دیگه اینک اگه بخام همین بردر رو بهش افکت بدم باید چیکار کنم؟ ممنون میشم بهم بگین
منظورم از کل پستام بردر داشته باشه این بود که کل پستام ، یه دونه بردر داشته باشه ، یعنی همه ی پستام تو یه بردر باشن امیدوارم منظورم رو متوجه شده باشین
برای ایجاد پس زمینه و خطوط حاشیه قالب های بلاگفا کافی است تگ اختصاصی BLOGFA را درون یک div قرار داده و برای div استایل CSS تعریف کنید، برای نمونه قالب شما این div وجود دارد و می توانید استایل زیر را که برای ID با نام content است در انتهای تگ head قرار دهید:
<style>
#content {
padding: 8px;
background: red;
border: 2px solid green;
}
</style>
برای ایجاد افکت و سایر جلوه های ویژه با توجه به زمانبر بودن و لزوم اعمال ویرایش های سفارشی باید CSS بلد باشید و از افکت های CSS3 استفاده کنید که در اینترنت به تعداد زیاد وجود دارد.
پرتو
۱۳:۰۴ ۱۴۰۱/۰۴/۲۸
سلام خسته نباشید ببخشید بلاگفا از شمام قطعه یا فقط مال من اینطوریه بعد اینک درست میشه یا نه؟
طبق بررسی ما سایت و وبلاگ های بلاگفا در حال حاضر بدون مشکل نمایش داده می شوند.
پرتو
۱۳:۰۶ ۱۴۰۱/۰۴/۲۸
بعد دیگ اینک یه سوال این رنگ پس زمینه ابی رنگ توی نوار منو افقی کجاست یعنی اینک رنگش کدومه ممنون میشم بگین منتظر جوابتون هستم مرسی
لطفا آخرین کد قالبتان را جهت بررسی به ایمیل ما ارسال کنید، احتمالا باید خاصیت background-color را در کلاس مربوط به بلاک منو پیدا و ویرایش کنید.
پـــرتو
۱۸:۴۴ ۱۴۰۱/۰۴/۳۰
چشم در اولین فرصت ارسال می کنم
پـــرتو
۱۶:۴۸ ۱۴۰۱/۰۶/۲۶
سلام جناب خسته نباشید
عه ببخشید جناب اون کدی که دارم پس زمینش کار نمی کنه از کده شما هم استفاده کردم یعنی شما بهم گفته بودین چیکار کنم که هر کار می کنم پس زمینش عوض نمیشه ممنون میشم راهنمایی بفرمایید
لطفا کد را در یک وبلاگ آنلاین درج و دقیقا مشخص کنید پس زمینه باید به چه رنگی باشد.
پـــرتو
۱۱:۵۷ ۱۴۰۱/۰۷/۰۲
سلام جناب خسته نباشید دسته شما درد نکنه ببخشید الان فعلا بلاگفا قطعه نمی تونم برم نگاه کنم جناب حالا یه سوال بلاگفا واقعا قطعه برا همه یا برا من اینجوریه؟
ممنون میشم بگین
ممکن است ایراد از قطعی اینترنت بین الملل باشد، در ساعات صبح امتحان کنید، طبق تست ما فعلا مشکلی وجود ندارد.
پـــرتو
۲۰:۱۵ ۱۴۰۱/۰۷/۰۶
سلام خسته نباشید من یه ایمیل میفرستم لطفا چک کنید ممنونم
پیام شما بررسی و پاسخ به ایمیلتان ارسال شد.
پـــرتو
۱۵:۵۶ ۱۴۰۱/۰۷/۰۹
سلام ممنون از پاسختون یه مشکل دیگه بازم داشتم که مشکلم برای قالب دیگس و این قالبو می تونم بفرستم براتون ممنون میشم اگر راهنمایی بفرمایید من مشکلم رو توی ایمیل می گم ممنونم
طی ساعات آتی بررسی و نتیجه از طریق ایمیل اطلاع رسانی می شود.
پــــرتو
۱۶:۱۶ ۱۴۰۱/۱۱/۰۳
سلام جناب خسته نباشید شاید این سوالم تکراری باشه ولی خب راستش نمیدونم سوالمو کجا ثبت کردم واسه همین دوباره می پرسم
ببخشید جناب سوالم این هستش که برای گوشه های عنوان پست می خاستم اگه میشه عکس بزارم منظورم عکس کوچیک هستش باید چیکار کنم؟ منظورم اینکه توی کدوم پستتون توضیح داده بودین میشه ادرس پستتون رو یکبار دیگ بزارین ؟ ممنون میشم
لطفا عبارت "انتقال قالب از فتوشاپ" را در قسمت جستجوی سایت وارد کنید، مطلب مرتبط با هدف شما در سایت وجود دارد.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
1 × 7
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سیدعباسی
با سلام من میخوام از متن زیر لینکش رو دربیارم و در آخر مقدار 3088 رو بصورت خروجی نهایی داشته باشم با...
۱۴۰۳/۰۷/۰۷

مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید
۱۴۰۳/۰۶/۲۰

پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...
۱۴۰۳/۰۶/۱۵
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.