آموزش ساخت قالب وبلاگ کامل
آموزش ساخت قالب وبلاگ-قسمت اول
ام تي (MT) چيه؟
ام تي مخفف موبل تايپ است(Movable Type) يک برنامه است که روي سرور اجرا ميشه و کارش مرتب کردن و مديريت مطالب يک نشريه کوچکه که بصورت وبلاگ به کار ميرود.
اگه دقيق‌تر بخواهيد بدونيد بايد بگم که ما برنامه ام تي رو روي سرور خودمون نصب ميکنيم و بعد مطالب، عکسها و لينک‌هامون رو به اون تحويل ميديم و اين برنامه خودش سايت ما رو (بر طبق قالبي که قبلا براش تعيين کرديم) به روز ميکنه و تغيير ميده. مديريت کامنت‌ها و درست کردن آرشيوهاي ماهانه و موضوعي هم از کارهايي است که اين برنامه خودش انجام ميده.
اگه به شکلي که درست کردم نگاه کنيد متوجه منظورم ميشين. ام تي مطالب ما و هر چي ديگه که بخواهيم بين نوشته‌ها باشه مثل عکسها رو ميگيره، بعد يه سايت تحويل ما ميده. (اونها رو داخل کدهاي HTML جاسازي ميکنه و بعد يک صفحه کامل تحويل ميده)
کاري که ام تي انجام ميده تقريبا مثل همون کاريه که سايتهايي مثل Blogger (همون BlogSpot خودمون) يا PersianBlog يا BlogSky انجام ميدن. فقط اين سايتها که مجاني هستند امکانات کامل در اختيار شما قرار نميدن و همه چي دست خود سايته ولي وقتي ام تي رو روي هاست خود بريزيد ديگه همه چيش مال خودتونه.
ام تي چطوري کار ميکنه؟
ام تي مثل همه برنامه‌هايي که روي ويندوز اجرا ميکنيم يه برنامه است. فقط روي سرور اجرا ميشه. (سرور همون کامپيوتريه که ما سايتمون رو روش ميريزيم، وقتي شما ميخواين يه سايت براي خودتون درست کنين بايد يه سرور گير بيارين. اين سرور در اصل يه کامپيوتره که هميشه روشنه و شما سايتتون رو که روش ريختين، هر کي ديگه بخواد بياد سايت شما رو ببينه کافيه آدرس اون سرور رو داشته باشه تا بتونه از اون کامپيوتر بخواد که سايت شما رو نشونش بده. مثلا شما ميتونين بصورت مجاني از سرور NetFirms يه سايت بگيرين. اين سرور به شما يه فضاي مثلا 12 مگابايتي روي هارد ديسک خودش ميده که شما ميتونين هرچي خواستين رو روش بريزين. حتي ميتونين يه برنامه مثل ام تي روش بريزين که به جاي اينکه روي کامپيوتر شما اجرا بشه روي اون کامپيوتر سرور اجرا بشه و فقط نتيجه کارش رو به شما نشون بده.)
بازم تو عکس نشون دادم که تفاوت يه برنامه که روي کامپيوتر شما اجرا ميشه (Client Side Appication) با يه برنامه که روي سرور اجرا ميشه (Client Side Application). برنامه‌هايي که روي سرور اجرا ميشن ديگه از قدرت کامپيوتر شما استفاده نميکنن، اونها فقط نتيجه کار رو به شما نشون ميدن. فرض کنيد شما قراره يه محاسبه خيلي سنگين سه بعدي (مثلا طراحي فيلم جنگ ستارگان) انجام بدين که معمولا روي کامپيوتر شما ممکنه يک روز طول بکشه. ولي اگه يه کامپوتر قوي گير بيارين که بتونه کار محاسبه رو انجام بده، شما فقط بهش ميگين چيکار کنه و بعد اون کامپيوتر قوي محاسبات رو انجام ميده و در آخر فقط نتيجه رو (که در اينجا فايل گرافيکي است) براي شما ارسال ميکنه.
در واقع در ام تي که يک برنامه اجرا شونده روي سرور است، ما از قدرت و امکانات سروري که روش اين برنامه رو نصب کرديم استفاده ميکنيم و فقط مطالبي که ميخوايم منتشر کنيم رو به اون ميديم (به عنوان ورودي) و اين برنامه سايت رو براي ما ميسازه (سايت ساخته شده خروجي است). البته به همين کشکي هم نيست. :)
قالب ام تي چيه؟
وقتي که برنامه موبل تايپ رو روي يک سرور نصب کردين بايد براش يه قالب درست کنين، يعني به اون بگين که ميخواين شکل سايتتون چه شکلي باشه، نوشته‌ها رو کجا و با چه خط و رنگي نشون بده و .... مثلا به همين سايت ما نگاه کنين، با ام تي ساخته ميشه. من اين نوشته‌ها و عکسها رو بهش ميدم و ام تي خودش مياد کد HTML سايت ما رو ميسازه.
اين قيافه و سر و شکل باحال رو هم که مي‌بينيد خودمون (Lost و Lord) طراحي کرديم. در اصل ما يه قالب درست کرديم و داديم به ام تي و هر وقت که يه نوشته جديد مينويسيم ديگه نميريم کل سايت رو از اول تغيير بديم. خود برنامه مياد اين سايت رو تغيير ميده.
قالب در اصل يکي دو خط نوشته است که بين کدهاي HTML سايت قرار ميديم و وقتي برنامه ام تي (که گفتيم روي سرور اجرا ميشه) ميخواد اجرا بشه مياد اون جاهايي که ما مشخص کرديم نوشته‌هامون و بقيه چيزايي که هر روز تغيير ميکنه رو جايگزين ميکنه (وقتي که سايت رو ReBuild يا دوباره سازي ميکنيم اين برنامه کارش رو شروع ميکنه و سايت رو ميسازه. در اين مورد بعدا کاملا صحبت ميکنيم).
آموزش ساخت قالب قسمت دوم-کدهاي اچتمل
يادآوري، کدهاي HTML
نميدونم تا حالا با کدهاي HTML کار کردين يا نه؟ اگه از FrontPage استفاده کرده باشين حتما ديدين که اون پايين وقتي در حالت طراحي هستين (Normal) دو تا دکمه ديگه هم هست به نامهاي HTML و Preview که دکمه HTML کدي رو که اين صفحه رو ميسازه نشونتون ميده و دکمه بعدي يه پيش‌نمايشه از قيافه صفحه وقتي ديگران اون رو مي‌بينند.
يه نمونه از کد HTML خيلي ساده براي ساخت يه صفحه اينه:
سلام به صفحه من خوش آمديد
اين کدها رو کپي کنيد و توي Notepad برويد و Paste کنيد و بعد با يه نامي مثل test.html ضبط کنيدش. (يادتون نره که قبل از ضبط Save as Type رو روي All Files بزارين.)
حالا وقتي test.html رو با اينترنت اکسپلورر (Internet Explorer) باز کنيد يه صفحه ميبيند که عنوانش «صفحه آزمايشي» است و توش نوشته «سلام به صفحه من خوش آمديد».
اين که ديديد يک کد HTML ساده است. هر قسمت که بين دوتا علامت کوچکتر و بزرگتر قرار گرفته رو بهش «Tag» ميگن.
خيلي از Tagها به صورت زوج به کار ميرن. يعني کي نشان دهنده شروع اون قسمت است و يکي ديگه نشان دهنده پايان اون قسمت و هر چي داخل اون دوتا باشه داخل اون Tag محسوب ميشه. تگ پاياني هميشه با يک اسلش «/» مشخص ميشه. مثلا «title/» نشاندهنده پايان عنوان سايت است.
مثلا تو مثال بالا اولين Tag که بکار رفته تگ html بود که بصورت <html> نشون داده شده. اين تگ از تگ‌هاي استاندارد HTML است که نشون ميده اين صفحه يه سايته.
تگ بعدي title بود که عنوان سايت رو تنظيم ميکنه.
اون جمله‌اي که بين تگ title قرار ميگيره بالاي صفحه اينترنت اکسپلورر نشون داده ميشه .
تگ Body هم نشون دهنده شروع محتويات سايت يا بدنه اصلي سايته که چيزايي که توي اين تگ قرار بگيره بعنوان محتويات سايت نشون داده ميشه.
تا اينجاش هيچ چيز خاصي نداشت.
اصول اوليه قالبها
ميخواهيم يک قالب خيلي ساده و مرتب درست کنيم. که در عين سادگي کار ام تي رو هم نشونمون بده.
قالبها بصورت خيلي ساده همون HTML هستند که قبلا ديديم، فقط يک سري تگ (Tag) ويژه خود ام تي توي اونها ميزاريم که وقتي ام تي مياد سايت رو بسازه اون تگ رو با مقدارش عوض ميکنه و يه HTML معمولي نشونمون ميده.
مثلا توي ام تي يه تگ داريم که اسم سايت رو نشون ميده: <$MTBlogName$>. وقتي توي يک HTML اين عبارت پيدا بشه (اصلا مهم نيست کجاي اون HTML باشه)، خود ام تي اون رو با اسم وبلاگ عوض ميکنه و يه HTML به کسي که سايت شما رو مي‌بينه نشون ميده که داخلش اسم واقعي وبلاگ شما به‌جاي اون نوشته شده.
اگه بخواهيم همون کد HTML که قبلا نوشتيم رو استفاده کنيم و به قالب ام تي تبديل کنيمش که به جاي عنوان صفحه (Title) که ما گذاشته بوديم «صفحه آزمايشي»، بياد و خودش اسم وبلاگ رو بزاره اون بالا، ميشه اون کد HTML رو به اين تغيير داد:
سلام به صفحه من خوش آمديد
حالا وقتي اين رو به ام تي بدين و بگين اين يه قالبه و سايت رو براي من بساز، ام تي مياد اين تگ <$MTBlogName$> رو با اسم وبلاگ شما جايگزين ميکنه ميزاره داخل HTML که براي اينجا اگه فرض کنيم عنوان وبلاگ ما «دو نفر و يک بلاگ» باشه خواهيم داشت:
حتي ميشه يک کم جلوتر هم رفت و نوشت:
خوش آمديد <$MTBlogName$> سلام به
که توي صفحه اصلي مي‌نويسه: «سلام به رنگارنگ خوش آمديد»
آموزش ساخت قالب قسمت سوم-FrontPage
درست کردن يک قالب با FrontPage
من شخصا از FrontPage براي درست کردن قالب استفاده ميکنم و از خوش دستيش خوشم مياد، ولي ممکنه يکي با Notepad قالب درست کنه و يکي از يه برنامه ديگه مثل Dreamweaver استفاده کنه. ولي چون FrontPage دم دست تره معمولا از اون استفاده ميشه.
توي اين مثالها از FrontPage XP استفاده شده ولي در کل فرقي نميکنه. توي نسخه‌هاي قبل مثل 2000 هم همينطوره.
بعد از باز کردن FrontPage يک صفحه جديد باز کنيد. (New Page رو از منوي File انتخاب کنيد و از اونجا Normal Page رو انتخاب کنيد).
توي صفحه‌اي که باز ميشه ميتونيد هر چي خواستيد تايپ کنيد و اندازه و فونت و رنگش رو تغيير بدين يا ميتونيد يه عکس وارد کنيد (از منوي Insert و سپس Picture/From File) يا جدول بکشيد و خلاصه يه سايت طراحي کنيد. اگه پايين صفحه رو نگاه کنيد مي‌بينيد که سه تا دکمه اونجاس شما الان دارين تو حالت Normal کار ميکنيد. قسمت HTML به درد کار ما ميخوره (البته بعد از طراحي سايت). چون ما ميخواهيم که يک سري تگ خاص داخل قالب بزاريم.
تغيير قالب ام تي
براي تغيير قالبهاي استاندارد ام تي بايد وارد خود ام تي شد (معمولا براي وارد شدن به برنامه ام تي بايد يک اينترنت اکسپلورر باز کرد و به آدرسي که ام تي رو توش نصب کردين برين. اگه فرض کنيم اسم سايت شما LostLord.com باشه معمولا توي آدرس Lostlord.com/cgi-bin/mt/mt.cgi ميتونيد ام تي رو اجرا کنيد. البته اين آدرس بستگي به محل نصب ام تي روي سرور شما داره.)
بعد از وارد کردن نام کاربر و رمز اون وارد صفحه اصلي ام تي ميشين
توي اين صفحه وارد Manage Weblog بشين تا صفحه خوش‌آمد گويي ام تي رو ببينيد. اينجا تو ستون سمت چپ که ابزارها و امکانات ام تي رو نشون ميده وارد Template (يا «قالبها» در صورتي که از فارسي شده ام تي استفاده ميکنيد.) بشين.
اينجا توي صفحه‌اي که باز ميشه ليست تمام قالبهاي ام تي رو ميشه ديد. صفحه اول سايت ما توي قسمت Main Index قرارداره. ما هم ميخواهيم همين قسمت رو تغيير بديم ولي براي اينکه اگه يه وقت مشکلي پيش اومد بتونيم خرابکاري که واقع شده رو جبران کنيم اول از اون يک نسخه يدکي ميگيريم. پس وارد Main Index بشيد (روي اسمش کليک کنيد)
حالا در قسمت Output File نام فايل رو که بايد index.html باشه به index.old تغيير بدين و بعد تيک کنار نوشته «Rebuild this template automatically when rebuilding index templates» رو برداريدو دکمه Save پايين صفحه رو بزنيد و صبر کنيد. بعد از چند لحظه به شما پيغام ميده که صفحه ضبط شده. حالا دوباره با کليک بر روي دکمه Templates از ستون سمت چپ وارد صفحه قالبها بشيد و «Create new index template» رو انتخاب کنيد (روي آن کليک کنيد).
يک صفحه خالي مياد در قسمت Template Name نام قالب رو وارد کنيد که بعدا براي خودتون نشون داده ميشه و اصلا مهم نيست اسمش رو چي ميزارين ولي يه چيزي بزارين که بعدا هم بتونيد بفهميد توش چيه. مثلا من وارد ميکنم (blog) و بعد در قسمت Output File نام فايلي که قراره تشکيل بشه رو بنويسين (اينجا بايد نام «index.html» رو وارد کنيم، چون ميخواهيم که صفحه اصلي سايت ما اين باشه.) و کنار «Rebuild...» هم حتما تيک خورده باشه.
حالا بايد اون قالبي رو که توي FrontPage درست کرديم بياريم اينجا و Paste کنيم توي قسمت «Template Body»
بعد دکمه Save اون پايين صفحه رو بزنيد و وقتي کار ضبط به پايان رسيد دکمه Rebuild (دوباره سازي) را بزنيد و در کادري که باز ميشه دکمه «REBUILD» رو بزنيد تا کار تشکيل سايت انجام بشه.
حالا اگه يه سري به سايتتون بزنيد و همه چيز درست باشه بايد صفحه مطابق قالب شما تغيير کرده باشه.
آموزش ساخت قالب وبلاگ قسمت چهرام-طراحي کردن يک قالب
طراحي کردن يک قالب
براي شروع بايد يه طرح کلي براي سايتتون (يا بهتر بگم همون وبلاگتون) بکشين:
حالا که طرح رو کشيديم بياين فکر کنيم چه چيزايي توي وبلاگمون ميخوايم.
اولش که يه عنوان بزرگ بالاي سايت بايد باشه با يه عکس که لوگوي اصلي سايته (البته ميشه عکس هم نزاشت، بسته به ميل خودتونه)
دوم اينکه بايد نوشته‌ها زير هم و ستوني قرار بگيرند.
- بالاي هر نوشته عنوان اون مطلب بصورت Bold نوشته بشه (آخه توي ام تي، هر نوشته يا مطلبي که مينويسين ميتونيد براش يه عنوان انتخاب کنيد، مثلا اسمش رو بزارين «نوشته اول» و بعد خود نوشته رو تايپ کنيد.)
- نوشته‌ها بايد غير BOLD باشن و از زير عنوان شروع بشن.
- تاريخ نوشته‌شدن مطلب و نام نويسنده مطلب زير نوشته‌ها قرار بگيريه.
- نظرخواهي (Comment) زير هر نوشته قرار بگيره (البته ممکنه بعضي‌ها نخوان Comment زير نوشته‌هاشون باشه، ولي طبق يه قانون کلي بياين و نظرخواهي رو تو قالب اضافه کنيد و اگه نخواستين نظرخواهي داشته باشين، وقتي دارين نوشته رو مينويسين يکي از امکانات ساده ام تي، به شما اجازه ميده نظرخواهي رو بزارين يا نه، اينجوري اگه يه وقت خواستين اين قالب رو يه جاي ديگه هم استفاده کنيد و يا براي يک مطلب نظرخواهي رو فعال کنيد بيچاره نميشين.)
- کاري کنيم که هر نوشته از نوشته بعدي مجزا بشه.
- يخورده به قيافه سايت برسيم.
- ديگه کلي چيز ديگه هم هست که ميشه اضافه کرد. اما وقتي اينا رو ياد بگيرين، شرط ميبندم که خودتون خيلي راحت ميتونيد اونها رو هم اضافه کنيد.
آموزش ساخت قالب قسمت پنجم-يک قالب خوب
يک قالب خوب
ميخواهيم يه صفحه طراحي کنيم که مواردي رو که تو بخش قبل گفتيم داشته باشه.
به کد زير توجه کنيد، خيلي کد ساده‌ايه، از قيافه وحشتناکش نترسين، الان خط به خط توضيح ميدهيمش:
توجه کنيد که وقتي در حالت HTML هستيد ميتونيد روي يک تگ کليک کنيد و بعد راست کليک کنيد و از منويي که باز ميشه گزينه آخرش که Tag Properties هست رو انتخاب کنيد و تمام تنظيمات اون رو دستکاري کنيد.
خط اول که يه صفحه HTML ميسازه که راست نويسه (مخصوص صفحات فارسي)
اون Meta Tag هايي که بين دوتا تگ Head قرار گرفته مشخص ميکنه که صفحه فارسي نوشته شده و از کدپيج يوني‌کد استفاده ميکنه (اگه نميدونين چيه هيمنطوري استفاده کنيد.)
خط بعد که عنوان صفحه رو تعيين ميکنه. (قبلا ديديم.)
بعد که تگ Body شروع ميشه و توي اين تگ مشخصات صفحه از قبيل رنگ نوشته‌ها و پس زمينه مشخص ميشه.
بعد يک پاراگراف داريم که بصورت وسط چين قرار گرفته (Align=center)
داخل اون پاراگراف اول خط رو Bold ميکنيم (<b>) و بعد اندازه و رنگ فونت رو تغيير ميديم که نام سايت رو بزرگ و کلفت وسط صفحه بنويسيم.
بعد يک خط افقي مي‌کشيم که عنوان سايت از نوشته‌ها جدا بشه.
حالا ميرسيم به تگ «MtEntry» که نوشته‌ها رو نشون ميده. ما يکي از سوييچ‌هاي اين تگ رو استفاده کرديم به نام «lastn» که عدد بعدش نشون ميده چند تا از آخرين نوشته‌ها رو بايد نشون بده که ما اينجا 15 تا از آخرين نوشته‌ها رو نشون ميديم.
بعد يک DIV درست کرديم. (Div يک تگ خاص در HTML است که باعث ميشه محتويات داخل اون از بقيه صفحه جدا بشه. تقريبا مثل يک جدول تک سلولي کار ميکنه، اما تفاوتش نسبت به جدول اينه که خيلي ساده به کار ميره و تازه، نوشته‌هاي داخل اون در حين اين که دارن از اينترنت گرفته ميشن نشون داده ميشه، ولي در يک جدول تا تمام محتويات جدول گرفته نشده باشه اون جدول نشون داده نميشه.)
رنگ داخل اون و اندازه و نوع حاشيه‌اش رو تنظيم کرديم که يک کادر خاکستري با خط حاشيه طوسي و فاصله متن از اطراف 5 نقطه کشيده بشه.
اندازه خط رو کوچيک ميکنيم چون ميخواهيم عنوان نوشته‌ها رو بنويسيم. و بعد عنوان نوشته‌ها رو بصورت Bold مينويسيم.
بعد يک DIV ديگه تعريف ميکنيم که دوباره بتونيم دور نوشته‌هامون يک کادر بکشيم. البته اين بار رنگ زمينه رو يک کم روشن تر کرديم و حاشيه رو خط چين گزاشتيم. (الان استفاده از خط چين خيلي مد شده)
حالا متن هر نوشته داخل اون قرار ميگيره.
بعد خط رو دوباره کوچيک ميکنيم، چون ميخواهيم نام نويسنده و تاريخ نوشته و نظرخواهي رو زير نوشته بصورت کوچيک نمايش بديم. (دقت کنيد که اينها خارج از اون DIVي قرار گرفته که متن نوشته‌ها رو در بر گرفته بود و حاشيه‌اش خط چين بود ولي هنوز داخل او DIVي هست که عنوان و متن نوشته رو باهم در بر گرفته و حاشيه‌اش ساده بود.)
حالا متن فارسي «نوشته شده توسط:» رو مينويسيم و بعدش از تگ «<MTEntryAuthor>» براي جايگزين شدن با نام نويسنده مطلب استفاده کرديم
به همين صورت نوشته «در تاريخ:» به دنبالش تگ «<$MTEntryDate$>» قرار گرفته که تاريخ نوشته‌شدن مطلب رو نشون ميده.
اين قسمتش جالبه. يک سري از تگ‌هاي ام تي، تگ‌هاي شرطي هستند. يعني اگر اون شرط برقرار باشه مطالب داخل اونها نشون داده ميشه و در غير اين صورت اصلا انگار که همچين نوشته‌اي قبلا وجود نداشته.
اينجا ما از تگ شرطي «<MTEntryIfAllowComments>» استفاده کرديم که در صورت برقرار بودن شرط اون مطالب داخل اون نشون داده ميشه. مقادير داخل اين تگ در صورتي نشون داده ميشه که شما در هنگام نوشتن مطالب خود گزينه باز بودن نظرخواهي رو انتخاب کرده باشين.
يک نکته ديگه که اينجا به کار رفته اينه که ما يک خط عمودي کوچيک بين تاريخ و نويسنده قرار داديم که هميشه ديده ميشه چون هميشه يک مطلب هم عنوان داره و هم تاريخ نشرش مشخصه، اگه ما اون خط عمودي رو که خط زير تگ «<MTEntryIfAllowComments>» قرار داديم مي‌آورديم بيرون تگ قرار ميداديم، يک خط عمودي هميشه بعد از تاريخ ديده ميشه حتي اگه اون نوشته نظرخواهي نداشته باشه. اما حالا تنها در صورتي اين خط عمودي بعد از تاريخ قرار ميگيره که اون نوشته نظرخواهيش فعال باشه.
بعد هم يک لينک درس کرديم به صفحه نظرخواهي اون مطلب خواص. (اين تگ رو همينطوري که هست بکار ببريد. چون يخورده پيچيده‌است.)
بعدش هم که همه تگ‌هاي زوجي رو که تا حالا باز مونده مي‌بنديم (با استفاده از «/» و همه چيز تموم شد.
اين يک قالب خوشگل و تر و تميز شد. که واقعا براي همين چند خطي که نوشتيم خيلي خوبه.
نویسه جدید وبلاگ
HI WORLD
