آموزش طراحی قالب وبلاگ - جلسه اول

به نام خدا

دوست عزیزم ، همراه همیشگی سایت شیعه تم! سلام و درود!

ایّام شهادت حضرت فاطمه ی زهرا س را به شما تسلیت می گویم و التماس دعا دارم!

ما زنده به لطف و رحمت زهرائیم *مأمور برای خدمت زهرائیم

روزی که تمام خلق حیران هستند*ما منتظر شفاعت زهرائیم

(شعر ازجواد حیدری-برگرفته از سایت کُمیت)

همانطور که از عنوان این پست معلوم می شود ! قرار است این پست شروعی باشد برای یک دوره کامل آموزش طراحی قالب وبلاگ!

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

پیش نیازها)

برای اینکه بتوانیم باهم تا پایان این آموزش همراه شوید باید:

۱) میانبری از نرم افزار Notepad را روی میزکار رایانه خود قرار دهید!

۲) نرم افزار Adobe Dreamweaver را روی سیستم خود نصب کرده و میانبر آنرا هم روی میز کار رایانه قرار دهید!(ترجیهاً نسخه CS3)

3) نرم افزار Adobe Photoshop را روی سیستم خود نصب کنید و میانبر آنرا هم روی میز کار سیستم خود قرار دهید! (ترجیهاً نسخه CS4)

خُب اگر پیش نیازها را فراهم کرده ای به ادامه مطلب توجه کن!

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

شاید می شد عنوان این مطلب را اینطور نوشت که : قالب وبلاگ چگونه عمل می کند؟

قالب وبلاگ از دو بخش اصلی تشکیل می شود!

یکی کدهای HTML که وظیفه دارند به مرورگر توضیح دهند تا صفحه ی وبلاگ شما را به چه شکل و شمایل و رنگی نشان دهد و

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

برای مثال یک دسته برگ فاکتور را که همه ی ما در فروشگاه ها دیده ایم ، در نظر بگیرید که همه ی برگه ها شبیه به هم چاپ شده اند اما محتوای متفاوتی روی هر کدام نوشته می شود!

اجازه بدهید مطلب بالا را بیشتر توضیح بدهم!

ببینید! معمولاً یک قالب ساخته می شود تا افراد مختلفی برای وبلاگهایشان از آن قالب استفاده کنند و مثلاً نام وبلاگ هر شخص استفاده کننده از قالب با نام وبلاگ شخص دیگری فرق دارد و این تفاوت ع نام وبلاگ در همه ی محتوای وبلاگ صادق است (پستها ، لینک ها ، موضوعات ، … )

از این جهت باید این امکان در کد قالب ارائه شده وجود داشته باشد که همه استفاده کنندگان ، با استفاده از یک کدقالب واحد ، وبلاگی با قالب شبیه به هم اما با محتوای متفاوت را ارائه دهند!

برای مثال باید بخشی از کد قالب به عنوان محل قرار گیری نام وبلاگ به سرویس دهنده  معرفی شود ، تا سرویس دهنده نام هر وبلاگ را در همان قسمت قرار بدهد!

هر سرویس دهنده ای این بخش را با کد مخصوصی می شناسد!  

به عنوان مثال بلاگفا عنوان وبلاگ را به جای عبارت: <-BlogTitle-> قرار می دهد و سیستم وبلاگ نویسی پلاگفا عنوان را بجای عبارت: <~BlogTitle~> قرار می دهد!

گاهی هم نیاز می شود قسمتی از کدهای موجود در یک بخش از قالب به تعداد مشخصی تکرار شوند برای اینگونه موارد باید از تگهای جفتی سرویس دهنده هااستفاده کرد!

تگهای جفتی شامل دو تگ هستند یکی تگ باز شونده که به معنای آغاز قسمتی است که باید تکرار شود و دیگری تگ بسته شونده که به معنای پایان بخش تکرار شونده است!

برای مثال قسمت مربوط به پست باید به ازای تعداد پستها تکرار شود سرویس دهنده ی بلاگفا این قسمت را در ناحیه ی بین دو تگ <BLOGFA> ….. تا …..</BLOGFA> می شناسد

و پلاکفا آنرا در ناحیه ی بین دو تگ <pelakfa> …. تا …. </pelakfa> می شناسد!

توصیه میکنم مطلب بالا را دو یا چندبار بخوانید تا خوب متوجه شوید زیرا این مطلب اصول و مبانی ساخت و طراحی قالب است!

اگر موافق باشید جلسه اول را در اینجا تمام کنیم و جلسه بعد را به زودی بنویسم!

امیدوارم این مطلب مورد توجه شما دوست عزیزم و سایر دوستان وبلاگ نویستان قرار بگیرد!

چنانچه سوالی در رابطه با مطالبی که تا اینجا بیان شد داشتید در کامنتهای همین پست بنویسید تا پاسخ بدهم!

بـــسم الله الـــرحـــمن الـــرحیم
حضرت زهرا سلام الله علیها فرمودند:
من اصعد الی الله خالص عبادته اهبط الله عزوجل الیه افضل مصلحته؛
کسی که عبادت های خالصانه خود را به سوی خدا فرستد، پروردگار بزرگ برترین مصلحت را به سویش فرو خواهد فرستاد.(بحار الانوار ، ج ۷۰، ص ۲۴۹ )

سلام به کاربران محترم شیعه تم!
سوال یا مشکلی که برای خیلی از طراحان وب و طراحان قالبهای وبلاگ پیش می آید استاندارد سازی قالب ساخته شده برای مرورگرهای مختلف (IE , Firefox , Opera,Chrome, …) می باشد!
شیعه تم تصمیم دارد تا در طی چند جلسه به این موضوع بپردازد و شما را باراههای مختلف این کار در حد دانش خود آشنا کند!
در بین مرورگهای فراوان اینترنت که هر روز هم بر تعداد آنها افزوده می شود مرورگر های زیر استفاده بیشتری در بین ایرانیان دارند:( ترتیب اهمیت ندارد)
Safari
firefox 
opera
Internet Explorer
با توجه به آماری که وبگزر از شیعه تم اعلام کرده است بازدید کننده گان ما به این ترتیب از مرورگرهای مختلاف استفاده می کنند:( نامی از Safari آورده نشده است)
 اینترنت اکسپلورر ۶    ۳۹٫۷%
 اینترنت اکسپلورر ۷    ۲۷٫۸%
 فایرفاکس                   ۱۶٫۶%
 ناشناس                     ۱۲٫۱%
 اُپرا                           ۳٫۷%
 اینترنت اکسپلورر۵         ۰%
 نت‌اسکیپ                      ۰%

اما اگر فراتر از وبلاگ من و یا ایران بررسی کنیم استفاده از مرورگر ها به شکل زیر است:

پس با توجه به این آمار ما استاندارد سازی را برای مرورگر های IE6 , IE7 , Firefox , Opera , IE8 , Chrome انجام می دهیم!
بی شک در این بین منفورترین مرورگر از دید یک وب دیزاینر همان IE6 است که باگ های زیادی دارد و توصیه میشود از مرورگرهای جدید IE7 و IE8 استفاده کنید!
پایان قسمت اول آموزش استاندارد سازی! بقیه آموزش در جلسات بعد!

بـــسم الله الـــرحـــمن الـــرحیم
سلام به کابران محترم سایت شیعه تم
یکی از کمبودهایی که سایت بلاگفا از نظر امکانات نسبت به سرویسهای وبلاگ نویسی رقیب داره نداشتن لیست صفحات به صورت لیست شماره ای [صفحات : ۱ ۲ ۳ ۴  ] هست!
اما اگر دقت کرده باشید آرشیو زمانی بلاگفا یا همون آرشیو هفتگی ، ماهانه دقیقاً همین کار یعنی صفحه بندی مطالب را انجام میدهد!
من پارسال با خودم نشستم و فکر کردم چطوری میشه از این آرشیو زمانی برای درست کردن لیست صفحات استفاده کرد و با خرده جاوایی که بلد بودم یه کد چند خطی جاوا نوشتم که میشه از اون برای این کار استفاده کرد و تنهای نکته ای که اینجا هست اینه که بلاگفا فقط یکبار اجازه استفاده از تگ های مربوط به آرشیو را در بین کدهای قالب می دهد و اگر بخواهید از کد لیست صفحات استفاده کنید حتماً کدهایی که در قالب شما مربوط به تگ  آرشیو می شوند را حذف کنید و کد زیر را در جایی مناسب از قالب بگزارید تا لیست صفحات شما در همان مکان از قالب نمایش داده شود!
:کدها