تازه کار!

[lind]

سلام همونجوری که میدونید(شایدم نمیدونید) من زیاد تو خط طراحی سایتو و بلاگو این چیزا به صورت حرفه ای نیستم و از کد نویسی هیچی سرم نمیشه!!:eyes_droped:
یه سوال داشتم:
ببینید من الان یه قالب وبلاک با فتوشاپ طراحی کردم حالا باید چه کارایی انجام بدم تا تبدیل بشه به یک قالب وبلاگ کامل که بشه در وب قرارش داد؟:byebye:

[lind]

ما رو باش گفتم الان دست کم 10 نفر میان دهنمونو آسفالت میکنن!!

[Eldalië]

آخه سوالت یه جوریه مثلا چه وبلاگی میخوای و اینکه کد نویسیشو میخوای بدونی ؟ وابسته به جاییه یا اورجیناله ؟ قالبت چه مدلیه که ببینیم میشه اونجایی که وبلاگ میسازی بذاریش یا نه؟ و این چیزا

[Ringator]

دقیقا این بلا سر من اومد! http://qsmile.com/qsimages/292.gif دیزاین قالب وبلاگ تازه نصف بدبختیه! بعد باید بگردی یه نفر رو پیدا کنی که از html , CSS سر در بیاره و بیکار باشه که همین طوری برات بسازه!
حالا شاید کسی از تو فروم بتونه برات دست کنه! صبر باید داشته باشی! http://qsmile.com/qsimages/302.gif

[iMohsen]

خوب ببین ..برای هر سیستم وبلاگ تگ ها ی خاصی وجود داره .

مثلا تو ورد پرس : هرجایی که میخوای نام وبلاگ نشون داده بشه باید نوشته بشه $blog_title یه همچین چیزی :d

حالا اول بگو قالب رو میخوای کجا بزاری ؟

[DarkMan]

خب ! شما باید اول اون طرحی رو که ساختید ! به ادمی زادی ترین حالت ممکن توسط فتوشاپ به فایل html ه export کنید.
بعد از این مرحله شما یک صفحه html خالی دارید ! که به هیچ دردی نمیخوره !
حالا باید ببینید که از چه سیستمی میخواید استفاده کنید ، هر سیتمی ( مثل بلاگ فا ، پرشین بلاگ و ... ) یک سری کدهای مخصوص به خودشون رو دارن که شما باید تو اون صفحه html خودتون وارد کنید تا قابلیت قرار گرفتن تو وبلاگ رو پیدا کنه ! و مطالب وبلاگ تو قالب شما نمایش داده بشن !
خب ! اینم نیازمند یکم دانش طراحی صفحات وب هست ! به هر حال شما باید بدونید که چه کدی رو در کجا جای گذاری کنید.

[Ringator]

خب ! شما باید اول اون طرحی رو که ساختید ! به ادمی زادی ترین حالت ممکن توسط فتوشاپ به فایل html ه export کنید.
بعد از این مرحله شما یک صفحه html خالی دارید ! که به هیچ دردی نمیخوره !
حالا باید ببینید که از چه سیستمی میخواید استفاده کنید ، هر سیتمی ( مثل بلاگ فا ، پرشین بلاگ و ... ) یک سری کدهای مخصوص به خودشون رو دارن که شما باید تو اون صفحه html خودتون وارد کنید تا قابلیت قرار گرفتن تو وبلاگ رو پیدا کنه ! و مطالب وبلاگ تو قالب شما نمایش داده بشن !
خب ! اینم نیازمند یکم دانش طراحی صفحات وب هست ! به هر حال شما باید بدونید که چه کدی رو در کجا جای گذاری کنید.

بابا به خدا این مدلی نمی قالب وبلاگ ساخت! من امتحان کردم! http://foolstown.com/sm/cry2.gif

[iMohsen]

خب ! شما باید اول اون طرحی رو که ساختید ! به ادمی زادی ترین حالت ممکن توسط فتوشاپ به فایل html ه export کنید.
بعد از این مرحله شما یک صفحه html خالی دارید ! که به هیچ دردی نمیخوره !
حالا باید ببینید که از چه سیستمی میخواید استفاده کنید ، هر سیتمی ( مثل بلاگ فا ، پرشین بلاگ و ... ) یک سری کدهای مخصوص به خودشون رو دارن که شما باید تو اون صفحه html خودتون وارد کنید تا قابلیت قرار گرفتن تو وبلاگ رو پیدا کنه ! و مطالب وبلاگ تو قالب شما نمایش داده بشن !
خب ! اینم نیازمند یکم دانش طراحی صفحات وب هست ! به هر حال شما باید بدونید که چه کدی رو در کجا جای گذاری کنید.

و این که برای خروجی html گرفتن حواست باشه اسلایس بندی هات درست باشه ..یعنی منظقه ای که میخوای تیتر وبلاگ توش نمایش داده بشه کامل با اسلایس جدا کنی که بعد راحت بتونی توش متن بزاری

[DarkMan]

بابا به خدا این مدلی نمی قالب وبلاگ ساخت! من امتحان کردم! http://foolstown.com/sm/cry2.gif
چرا نمیشه ؟
البته طراحی قالب با photoshop یک کار کاملا غیر معقوله ! ولی خوب ! برای کسی که فقط با فتوشاپ کار کرده ، تنها راه دیگه ! :d
فتوشاپ یک فایل html با کلی عکس ! به شما به عنوان خروجی میده !
شما باید این فایل رو ادیت کنی و کدهای مربوط به سیستم رو سرجاش قرار بدی !
همین ! :d

[Ringator]

چرا نمیشه ؟
البته طراحی قالب با photoshop یک کار کاملا غیر معقوله ! ولی خوب ! برای کسی که فقط با فتوشاپ کار کرده ، تنها راه دیگه ! :d
فتوشاپ یک فایل html با کلی عکس ! به شما به عنوان خروجی میده !
شما باید این فایل رو ادیت کنی و کدهای مربوط به سیستم رو سرجاش قرار بدی !
همین ! :d

آدم تا از تگ html سر در نیاره که نمی تونه قالب بسازه! چه برسه به css! طراحی که کاری نداره.

[DarkMan]

آدم تا از تگ html سر در نیاره که نمی تونه قالب بسازه! چه برسه به css! طراحی که کاری نداره.
خوب گفتم که !
به هر حال باید یکم با html اشنا باشی تا بتونی تگ ها رو بچینی !
من خودم با ور رفتن با Frontpage یاد گرفتم ! :d ( البته روش غیر اصولیش رو ) :d

[Ringator]

خوب گفتم که !
به هر حال باید یکم با html اشنا باشی تا بتونی تگ ها رو بچینی !
من خودم با ور رفتن با Frontpage یاد گرفتم ! :d ( البته روش غیر اصولیش رو ) :d
من از همون راه می گم. شاید من 10 بار امتحان کرده باشم اما نمی شه! مثلا الان قالب این وبلاگ (http://ringator.persianblog.com) من رو ببین تو فایر فاکس کار می کنه اما تو اینترنت اکسپورر به هم میریزه. منم اصلا نمی دونم مشکل از کجاس.

[DarkMan]

خب !
گفتم ! اون راه ! راه غیر اصولیه !
مشکل وبلاگ شما به خاطر اینه که صفحات شما استاندارد نیست ! و با همه برازر ها سازگاری نداره !
Frontpage نرم افزار شاسکولیه ! اصلا هیچی حالیش نمیشه ! واسه همینه که صفحاتی که با frontpage طراحی میشن تو هر برازر یه شکلی در میان ! :d
اما ! مثلا ! dreamweaver صفحات رو کاملا استاندارد تولید میکنه ! از طرفی !
کار کردن باهاش طوریه که هم میتونی مثل frontpage خودت اشیا رو تو صفحه بچینی ! هم اینکه اگه خواستی خودت کد بنویسی تو نوشتن کد ها و درست نوشتن و استاندارد نوشتنشون کمکت میکنه ! :d
در کل اینکه ! چقدر اسمایل داره وبلاگت ! در ضمن تو اپرا هم به شکل ضایعه ای نمایش داده میشه ! :d
با Table کار کردی یا Css ؟
فک میکنم table باشه ( حال ندارم برم سورس رو نگاه کنم ! :d ) !
تو طراحی با جدول تو کدنویسی صفحه خیلی خیلی کثافت کاری پیش میاد ! و خیلی هم گیج کننده میشه ! من که اصلا نمیتونم تحمل کنم!
Css خیلی تمیز تر صفحه رو درمیاره ! و دست ادم رو خیلی باز میزاره ! و ویرایش های بعدی رو هم خیلی خیلی اسون میکنه !

[Ringator]

خب !
گفتم ! اون راه ! راه غیر اصولیه !
مشکل وبلاگ شما به خاطر اینه که صفحات شما استاندارد نیست ! و با همه برازر ها سازگاری نداره !
Frontpage نرم افزار شاسکولیه ! اصلا هیچی حالیش نمیشه ! واسه همینه که صفحاتی که با frontpage طراحی میشن تو هر برازر یه شکلی در میان ! :d
اما ! مثلا ! dreamweaver صفحات رو کاملا استاندارد تولید میکنه ! از طرفی !
کار کردن باهاش طوریه که هم میتونی مثل frontpage خودت اشیا رو تو صفحه بچینی ! هم اینکه اگه خواستی خودت کد بنویسی تو نوشتن کد ها و درست نوشتن و استاندارد نوشتنشون کمکت میکنه ! :d
در کل اینکه ! چقدر اسمایل داره وبلاگت ! در ضمن تو اپرا هم به شکل ضایعه ای نمایش داده میشه ! :d
با Table کار کردی یا Css ؟
فک میکنم table باشه ( حال ندارم برم سورس رو نگاه کنم ! :d ) !
تو طراحی با جدول تو کدنویسی صفحه خیلی خیلی کثافت کاری پیش میاد ! و خیلی هم گیج کننده میشه ! من که اصلا نمیتونم تحمل کنم!
Css خیلی تمیز تر صفحه رو درمیاره ! و دست ادم رو خیلی باز میزاره ! و ویرایش های بعدی رو هم خیلی خیلی اسون میکنه !

اون پست آخر اسمایلی زیاد می طلبید به خاطر همین ضایس! http://qsmile.com/qsimages/302.gif با css هم هس که از قالب یه وبلاگ دیگم کش رفته بودم! <اون (http://b4uno20.persianblog.com)و آدم حرفه ای برام نوشته بود>

ولی این دلیلی که می گی خیلی درصد درست بودنش بالائه.

[DarkMan]

تو سایت w3 میتونی استاندارد بودن یا نبودن صفحاتتو چک کنی.
هم از نظر css هم از نظر html
ایرادات کار رو بهت میگه ! و نشونه گذاری میکنه برات ! و بهت میگه که چطوری برطرفشون کنی !
با اینکار حداقل 80% مشکل حل میشه !
اما 20% از مشکلات احتمال داره که هنوز باقی بمونن ! اونم بخاطر تفاوت Render کردن صفحه ها تو browser های مختلفه !
ولی اکثر مواقع با استاندارد کردن صفحات ! همه مشکلات حل میشن !
یبار که یکی از صفحه هایی رو که طراحی کرده استاندارد کنی ! هم به نوعی اموزش برات میشه ! هم باعث میشه که بعدا این خطا رو نکنی !

[Ringator]

تو سایت w3 میتونی استاندارد بودن یا نبودن صفحاتتو چک کنی.
هم از نظر css هم از نظر html
ایرادات کار رو بهت میگه ! و نشونه گذاری میکنه برات ! و بهت میگه که چطوری برطرفشون کنی !
با اینکار حداقل 80% مشکل حل میشه !
اما 20% از مشکلات احتمال داره که هنوز باقی بمونن ! اونم بخاطر تفاوت Render کردن صفحه ها تو browser های مختلفه !
ولی اکثر مواقع با استاندارد کردن صفحات ! همه مشکلات حل میشن !
یبار که یکی از صفحه هایی رو که طراحی کرده استاندارد کنی ! هم به نوعی اموزش برات میشه ! هم باعث میشه که بعدا این خطا رو نکنی !

لینک بده! :Jumpin:

[DarkMan]

http://validator.w3.org/

[Ringator]

http://validator.w3.org/
قربانت!:red_heart:

[DarkMan]

http://smilies.sofrayt.com/^/9971/encore.gif

[lind]

از همه دوستان ممنون ببینید چنتا نکته باید بگم
1.اسلایس بندی بلتم وتا اونجاش مشکلی نیست
2.همونطور که میدونید وبلاگ از چند بخش تشکیل شده که قالب زدن براش یکم سخت میشه 1.قسمت پست ها 2.نظر ها3.بایگانی فکر کنم فقط این سه تا هستن که باعث میشه طراحی قالب مشکل تر از طراحی یه صفحه ساده باشه!!درسته؟
قالب هم برا بلاگفا هست!
یه سوالی هم داشتم نرمفزاری نیست که بشه باهاش یه قالب وبلاگو ادیت کرد بدون داغون کردن اون سه قسمت بالا یعنی بشه تصاویر رنگها و اندازه ها رو بدون خرابکاری تغییر داد!!؟!

[Ringator]

از همه دوستان ممنون ببینید چنتا نکته باید بگم
1.اسلایس بندی بلتم وتا اونجاش مشکلی نیست
2.همونطور که میدونید وبلاگ از چند بخش تشکیل شده که قالب زدن براش یکم سخت میشه 1.قسمت پست ها 2.نظر ها3.بایگانی فکر کنم فقط این سه تا هستن که باعث میشه طراحی قالب مشکل تر از طراحی یه صفحه ساده باشه!!درسته؟
قالب هم برا بلاگفا هست!
یه سوالی هم داشتم نرمفزاری نیست که بشه باهاش یه قالب وبلاگو ادیت کرد بدون داغون کردن اون سه قسمت بالا یعنی بشه تصاویر رنگها و اندازه ها رو بدون خرابکاری تغییر داد!!؟!

اگه یافتی به منم حتمی بده اوکی؟ http://qsmile.com/qsimages/99.gif

[DarkMan]

چرا دیگه !
برای شروع ! frontpage وبعد از dreamweaver !
خیلی راحت میتونی یه قالب اماده شده رو ادیت کنی ! و به اون شکلی که خودت دوست داری در بیاری !
البته خیلی راحتم نیستا ! ولی بهتر از کد نویسیه ! :d

[Ringator]

چرا دیگه !
برای شروع ! frontpage وبعد از dreamweaver !
خیلی راحت میتونی یه قالب اماده شده رو ادیت کنی ! و به اون شکلی که خودت دوست داری در بیاری !
البته خیلی راحتم نیستا ! ولی بهتر از کد نویسیه ! :d

اونا مال وب نوشتن نه بلاگ! و بعدم اینکه برا اونا باید از 0 شروع منی. ما می خوایم بدون دست کاری فقط عکس و رنگ و اینارو عوض کنیم مگه نه؟ http://qsmile.com/qsimages/42.gif

[lind]

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

[DarkMan]

اونا مال وب نوشتن نه بلاگ! و بعدم اینکه برا اونا باید از 0 شروع منی. ما می خوایم بدون دست کاری فقط عکس و رنگ و اینارو عوض کنیم مگه نه؟ http://qsmile.com/qsimages/42.gif
نع !
وب و بلاگ هیچ تفاوتی با هم ندارن ! بجز اینکه بلاگ چند تا تگ مخصوص به خودشو داره که باید تو جای درستش جا گذاری بشه !
چندتا از تمپلیت های اماده رو با این برنامه ها باز کن و یکم روشون کار کن !
یواش یواش همه چیز دستت میاد !

[lind]

اونا مال وب نوشتن نه بلاگ! و بعدم اینکه برا اونا باید از 0 شروع منی. ما می خوایم بدون دست کاری فقط عکس و رنگ و اینارو عوض کنیم مگه نه؟
آقوربونش این رینگاتور خوب میفهمه من چی میخوام!!http://smilies.sofrayt.com/^/q/sad.gif

[DarkMan]

فرونتپیج که الان ندارم ولی این دریمور خوب جواب نمیده اصلا نمیتونم باهاش عکسارو ببینم و ادیت کنم!!
چرا ؟ نباید مشکلی باشه ؟
dreamweaver فوق العاده قوی تر از فرانت پیجه !
وقتی یه صفحه رو تو dreamweaver باز میکنی ! 3 تا بخش داره ! code - spilit - design !
شما تو کدوم قسمتش کار میکنی ؟
اگه تو قسمت design بری نباید مشکلی ببنی ! :d

[lind]

تو همون دیزاین!(مثلا تایتلش زیرش عکس بوده اینجا صفحه سفید نشون میده!)

[Ringator]

آقوربونش این رینگاتور خوب میفهمه من چی میخوام!!http://smilies.sofrayt.com/^/q/sad.gif
آخه من خودم یه دو سالی سر قالب وبلاگم زجر کشیدم! http://qsmile.com/qsimages/54.gif http://qsmile.com/qsimages/54.gif http://qsmile.com/qsimages/54.gif http://qsmile.com/qsimages/54.gif

[DarkMan]

آقوربونش این رینگاتور خوب میفهمه من چی میخوام!!http://smilies.sofrayt.com/^/q/sad.gif
این 2 تا هیچ فرقی با هم ندارن ! جفتشون html ان ! فقط بلاگ چند تا تگ مخصوص به خودشو اضافه کرده به code ها !
وگرنه تو design هیچ تفاوتی نیست !
شما میتونید اول با خیال راحت اون طرحی رو که میخواید طراحی کنید !
بعد کدهای مربوط به وبلاگ رو در انتهای کار تو کدهای html صفحه قرار بدید !
معمولا سایتهای سرویس دهنده ! یه اموزش هم برای چگونگی طراحی کردن صفحات وبلاگ دارن !
به اونا هم سر بزنید !

[lind]

محض اطلاع یه سایتی پیدا کردم که اون چیزی که من مد نظرمه رو به ضورت ابتدایی در اختیار قرار میده من تستشم کردم خوب جواب میده ولی افسوس که خیای ابتداییه!!
http://psyc.horm.org/fa/intro/

[DarkMan]

تو همون دیزاین!(مثلا تایتلش زیرش عکس بوده اینجا صفحه سفید نشون میده!)
خوب ! این ممکن چند تا دلیل داشته باشه !
اولا اینکه ادرس عکس درست داده نشده باشه ! و نتونه عکس رو بخونه ! ( عکس رو هارد خودته ؟ )
دلیل دوم میتونه این باشه که این صفحه از فایل css استفاده میکنه و ادرس فایل css درست داده نشده ! و در نتیجه تنظیمات درست اعمال نمیشن !

[Ringator]

چرا ؟ نباید مشکلی باشه ؟
dreamweaver فوق العاده قوی تر از فرانت پیجه !
وقتی یه صفحه رو تو dreamweaver باز میکنی ! 3 تا بخش داره ! code - spilit - design !
شما تو کدوم قسمتش کار میکنی ؟
اگه تو قسمت design بری نباید مشکلی ببنی ! :d

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

[Ringator]

این 2 تا هیچ فرقی با هم ندارن ! جفتشون html ان ! فقط بلاگ چند تا تگ مخصوص به خودشو اضافه کرده به code ها !
وگرنه تو design هیچ تفاوتی نیست !
شما میتونید اول با خیال راحت اون طرحی رو که میخواید طراحی کنید !
بعد کدهای مربوط به وبلاگ رو در انتهای کار تو کدهای html صفحه قرار بدید !
معمولا سایتهای سرویس دهنده ! یه اموزش هم برای چگونگی طراحی کردن صفحات وبلاگ دارن !
به اونا هم سر بزنید !

من به همه سر زدم! http://qsmile.com/qsimages/164.gif فایده نداشته! http://foolstown.com/sm/cry2.gif چون رسما برای طراحی یه قالب خوب یعنی نوشتن کد باید html بلد باشی!
/
/
/
لیند جان خودتو اذیت نکن یکی رو بیاب برات بسازه! http://qsmile.com/qsimages/258.gif

[DarkMan]

بله متوجه هستم که باهاش وبلاگ هم می شه نوشت اما چه مدلی از 0 شروع کنم؟ باید بشینم تگ بنویسم، مگه نه؟ یا اینکه خودش یه قالب پیش فرض داره من می تونم توش عکس ایمپرت کنم؟ مشکل اینه که شما فرض کن من یه قالب وبلاگ می گرفتم تو فرونت پیج هر مدل می خواستم ادیتش می کردم از قالب اصلی به عنوان پیش فرض استفاده می کردم اما در آخر فقط یه آش قلم کار درس می شد که تو صفحه پری ویوو خوب بود ولی در عمل افتضاح! نمونشو لینک دادم!
خب !
ببین ! من سعی میکنم به ساده ترین شکل ممکن توضیح بدم ! :d ممکن اینارو خودت بلد باشی.
وقتی وارد dreamweaver میشی ! یک صفحه سفید جلو روته ! خوب ! حالا شما میتونی از یک سری قالب های اماده که از قبل وجود دارن استفاده کنی و اونا رو تکمیل کنی یا این که از صفر شروع کنی !
اولین کاری که باید بکنی ! با table ساختار کلی صفحرو مشخص کنی !
یعنی یک Table بسازی که بسته به نیازت 2 یا 3 تا ستون داشته باشه !
خوب ! این شروع کار میشه ! حالا باید تو هر کدوم از این ستون ! به شکلی که نیاز داری بلاک درست کنی ( بازم با table ) و توی این بلاک ها جای هر چیزو مشخص کنی ( مثل عنوان - متن اصلی و ... )

فک کنم اگه تا شب صبر کنی بتونم یه اموزش کوچولو همراه با تصویر برای شروع کار بذارم ! البته اگه لازم داشته باشید !
سعی میکنم همه اینا رو با مثال توضیح بدم ...

[iMohsen]

محض اطلاع یه سایتی پیدا کردم که اون چیزی که من مد نظرمه رو به ضورت ابتدایی در اختیار قرار میده من تستشم کردم خوب جواب میده ولی افسوس که خیای ابتداییه!!
http://psyc.horm.org/fa/intro/

خوب میتونی با همین بیس قالب رو در بیاری ..اونوقت دیگه از شر تگ نویسی خلاص میشی !

بیس قالب رو با این در بیار ...بعد توش میتونی عکس بزاری .! یعنی دیزاین خودتو به قالب بخورونی !!!!! :shocked:

[DarkMan]

قدم اول : کدنویسی یا design ؟

برای کسانی که با زبان html اشنا نباشن ، شاید کدنویسی و قراردادن تگ ها در کنار هم کار مشکلی به نظر بیاد ! اما بهترین و اصولی ترین روش ، نوشتن دستی کدهاست. البته به شکل استاندارد.
اما در صورتی که که توانایی کدنویسی دستی رو ندارید و یا هنوز با تگ ها و نحوه چیدمان table ها اشنا نشدید ، بهتری راه استفاده از نرم افزار هایی مثل dreamweaver و یا frontpage هستش !

قدم دوم : محیط کلی dreamweaver

http://my.blackmice.com/imagecenter/thumb/725/1153930160.jpg (http://my.blackmice.com/imagecenter/full/725/1153930160.jpg)

همونطور که تو تو عکس بالا میبینید ، بعد از باز کردن dreamweaver و باز کردن یک فایل جدید با چنین محیطی مواجه میشیم.

مهم ترین قسمت dreamweaver تولباری هستش که در بالای نرم افزار قرار داره.

http://my.blackmice.com/imagecenter/full/725/1153930270.jpg

این تولبار قسمت های مهمی رو داخل خودش داره.
برای اضافه کردن تصاویر ، جدول ها ، فرم ها ، لینک ها و ... از این تولبار استفاده میکنیم.

قسمت بعدی ، http://my.blackmice.com/imagecenter/full/725/1153930317.jpg نمای صفحه ما رو مشخص میکنه ! یعنی اینکه ما کدهای صفحه رو ببینیم یا محیط طراحی یا مخلوطی از هر دورو ( spilit ) که پیشنهاد من spilit هستش ! اما تو این اموزش من نمای design رو برای راحتی بهتر انتخاب میکنم.
خب ! پس نمای design رو انتخاب میکنیم و به کارمون ادامه میدیم ! :d

http://my.blackmice.com/imagecenter/full/725/1153930553.jpg

قدم سوم : شروع طراحی

خب ! ما باید اول مشخص کنیم چه چیزی رو میخوایم طراحی کنیم ؟ یه وبلاگ 2 ستونی ؟ یه وبلاگ 3 ستونی ؟ چی ؟! :d
برای قالب بندی صفحات ، باید از جدول ها استفاده کنیم. جدول ها ( در این اموزش از جدول استفاده شده براحتی سهولت ! ولی برای طراحی بهتر و تمیز تر از css استفاده میشه ) مهم ترین عناصر صفحه ما هستند.
خوب ! برای شروع ما یک وبلاگ 2 ستونی رو طراحی میکنیم ! که ستون سمت راست حاوی بلاک های مثل لینک ها و ... باشه و ستون سمت چپ محتوی نوشته های اصلی ...

از تولبار insert و تب common گزینه table رو مطابق تصویر انتخاب میکنیم .
http://my.blackmice.com/imagecenter/full/725/1153930921.jpg

بعد از انتخاب این گزینه ، کادری مطابق تصویر باز میشه

http://my.blackmice.com/imagecenter/full/725/1153931177.jpg

خب ! حالا ما باید جدول اصلی مونو مشخص کنیم !
row = تعداد ردیف های افقی جدول
column = تعداد ستون های عمودی جدول

خب از اونجایی که ما میخوایم یک وبلاگ 2 ستونی داشته باشیم ، row رو 1 و column رو 2 قرار میدیم.
و فعلا به بقیه گزینه ها کاری نداریم.

http://my.blackmice.com/imagecenter/full/725/1153932766.jpg

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

http://my.blackmice.com/imagecenter/full/725/1153932806.jpg

خوب ! تا اینجا ما تونستیم یک شکل کلی از طرح مورد نظرمون رو پیاده کنیم ! یعنی یک وبلاگ ساده با 2 ستون.
خب ! حالا سراغ ستون سمت چپ میریم ! تا محلی رو که باید مطالب وبلاگ قرار بگیره مشخص و طراحی کنیم !
روی ستون سمت چپ کلیک میکنیم ! و دوباره از تولبار insert گزینه table رو انتخاب میکنیم.
خوب ! بطور معمول مطالب وبلاگ دارای 4 بخش هست !
1. عنوان
2.تاریخ
3.مطلب اصلی
4.نظرات

پس ما هم جدولی با 4 row و 1 column ایجاد میکنیم !

http://my.blackmice.com/imagecenter/full/725/1153932856.jpg

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

http://my.blackmice.com/imagecenter/full/725/1153932932.jpg

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

http://my.blackmice.com/imagecenter/full/725/1153932972.jpg

خوب ! یکی از مراحل طراحی با موفقیت پشت سر گذاشته شد ! و قسمتی رو که باید مطالب وبلاگ قرار بگیرن با موفقیت طراحی کردیم !
حالا میریم سراغ بلوک های ستون سمت راست !

خوب ! ستون سمت راست رو انتخاب میکنیم و یک جدول با 2 row و یک column ایجاد میکنیم !

http://my.blackmice.com/imagecenter/full/725/1153932999.jpg

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

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

نمای این قالب رو تو برازر میتونید ببینید :

http://my.blackmice.com/imagecenter/thumb/725/1153933035.jpg (http://my.blackmice.com/imagecenter/full/725/1153933035.jpg)

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

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


تو قسمت نحوه قرار دادن تگ های وبلاگ رو تو این صفحه اموزش میدم !
چشمم به شدت درد گرفت ! :d

این اموزش همونطور که دیدید خیلی خیلی ساده بود و زیاد به جزییات توجیهی نداشت ! و همونطور که مشاهده کردید از table که روش زیاد جالبی نیست ( اما سادست ) استفاده میکرد !
بنابراین مشکل زیاد داره ! میدونم !
اما به هر حال برای شروع لازم بود !
از قسمت های بعد هر چیزی رو که نیاز داشتید توضیح میدم.

[iMohsen]

اوه ...چه حوصله ای داری پیام !

[DarkMan]

اوه ...چه حوصله ای داری پیام !
http://smilies.sofrayt.com/%5E/_950/crazy.gif

[lind]

ما منتظر دومیش هستیم!http://smilies.sofrayt.com/^/r/dance.gifhttp://smilies.sofrayt.com/^/r/dance.gif

[DarkMan]

به علت چشم درد گرفتگی مفرت !
مبحث جای گزینی تگ های وبلاگ در این صفحه رو احتمالا تا فرداشب اماده میکنم !

[DarkMan]

قدم چهارم : جایگزینی تگ های وبلاگ داخل html

خوب ! تو قسمت قبل ! یه صفحه خیلی ساده رو طراحی کردیم و امادش کردیم برای قرار گرفتن تگهای وبلاگ و تبدیل شدن به یک صفحه بلاگ !
حالا تو این قسمت قصدا داریم که تگهای یک سیستم وبلاگ نویسی رو با این صفحه مون match کنیم !
به علت اینکه lind گفت این وبلاگ رو برای سیستم بلاگ فا میخواد ! ما هم از این تگ ها استفاده میکنیم !
دقت کنید در مورد سیستم های دیگه هم دقیقا همینطوریه ! یعنی اصول کار تغیر نمیکنه ! تنها چیزی که تغیر میکنه نام تگ های ما هستش.

خوب ! مرحله اول ! فایلی رو که در مرحله قبل ایجاد کرده بودیم وارد dreamweaver میکنیم.
کار ما تو این مرحله با نمای design در حد صفره هستش ! و اصل کار ما با نمای code هست ! پس view رو به code تغیر میدیم !
Wow ! این همه کد ! چه کدای جالبی !
این کد ها اجزای تشکیل دهنده صفحه ما هستند ! و باعث میشن تا برارز با خوندن اونا بتونه صفحه ما رو رندر کنه ! در واقع تنهای زبانی که برازر های احمق ما میفهمند ! همین کد ها هستند !

http://my.blackmice.com/imagecenter/full/725/1154021388.jpg

خب ! این یک نمای کلی از نمای کد ها این صفحه هستش !
صفحه ما با تگ <html> شروع شده و با تگ </html> به پایان میرسن ! پس باید تمام کدهای ما بین این 2 تگ اصلی و مادر قرار بگیره !
میتونیم کدهای این صفحه رو به 2 بخش کلی تقسیم کنیم !

1.head : که با تگ <head> شروع و با تگ </head> به پایان میرسه ! کدهای که در این بخش قرار دارن به نوعی شناسنامه صفحه ما هستند !
عنوان صفحه ، نوع انکودینگ صفحه ، meta کد ها و ... مشخصات صفحه ما باید بین تگهای head قرار بگیرند.
در نظر داشته باشید که کدهایی که در این بخش هستند ، در صفحه اصلی ما نمایش داده نمیشن و رندر نمیشن ! فقط به عنوان مشخصه های صفحه ما هستند.

2. body : که با تگ <body> شروع با تگ </body> به پایان میرسن ! در نظر داشته باشید که این تگ اصلی ترین تگ صفحه ها ما هستش و تمامی کدهایی که بین این این 2 تگ قرار میگیرند برای نمایش به برازر ارسال میشن.

خوب ! بعد از این توضیحات بهتره که بریم سراغ مرحله عملی ماجرا !
برای اولین قدم ! چون صفحه ما دارای متون فارسی هست پس باید انکودینگ صفحه رو به utf-8 تغیر بدیم تا برازر با نمایش دادن متن ها مشکل پیدا نکنه و نوشته های ما بدرستی تو صفحه نمایش داده بشن.
برای اینکار داخل تگ head دنبال کد زیر بگردید :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
و اون رو به این صورت تغیر بدید :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
خوب ! با اینکار ما نوع انکودینگ صفحه رو از iso-8859-1 به utf-8 تغیر دادیم ! و حالا صفحه ما اماده نمایش متون فارسی هستش !

خوب ! حالا بهتره که به سراغ تگ های وبلاگ بریم و اونا را داخل صفحه مون جا گذاری کنیم.
برای مشاهده تگ های سیستم بلاگفا میتونید به این صفحه برید : http://www.blogfa.com/Help/Show.aspx?id=template
این اموزش هم روی همین صفحه توضیح داده شده ! :d

فک کنم که سخت ترین بخش کار برای یک تازه کار جایگزین تگهای اصلی نمایش مطالب وبلاگ ( پست ها ) باشه ! پس ما هم از همون قسمت شروع میکنیم ! :d

خوب ! وارد نمای design بشید و موس رو روی table ی که قراره حاوی مطالب اصلی وبلاگ باشه نگه دارید !
این table :

http://my.blackmice.com/imagecenter/full/725/1154021426.jpg

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

http://my.blackmice.com/imagecenter/full/725/1154021456.jpg

خوب ! با مشاهده کادر مشکی رنگی که دور جدولمون میاد متوجه میشیم که جدول مون انتخاب شده ! حالا بدون اینکه چیزی رو تغیر بدیم ، همونطور که جدول در حالت انتخاب هست وارد نمای کد میشیم !
خب ! حالا به بخش body توجه کنید ! میبینید که یک سری از کد ها select شده اند !

http://my.blackmice.com/imagecenter/full/725/1154021484.jpg

این کد ها ! همون کدهایی هستند که جدول مارو بوجود میارند و باعث میشن برازر بتونه این جدول رو نشون بده !
همون طور که میبنید این کد ها با تگ <table> شروع با تگ </table> به پایان رسیدند !
طبق اموزش صفحه " راهنمای ایجاد قالب برای بلاگفا " موجود در سایت خود بلاگ فا ! باید قبل و بعد از این 2 تگ تگهای <BLOGFA> و </BLOGFA> رو قرار بدیم.

یعنی :

<table width="100%" border="1">
<tr>
<td><div align="right" class="style3">عنوان</div></td>
</tr>
<tr>
<td><div align="right" class="style3">تاریخ</div></td>
</tr>
<tr>
<td><div align="right" class="style3">متن اصلی وبلاگ </div></td>
</tr>
<tr>
<td><div align="right" class="style3">نظرات</div></td>
</tr>
</table>


رو به

<BLOGFA><table width="100%" border="1">
<tr>
<td><div align="right" class="style3">عنوان</div></td>
</tr>
<tr>
<td><div align="right" class="style3">تاریخ</div></td>
</tr>
<tr>
<td><div align="right" class="style3">متن اصلی وبلاگ </div></td>
</tr>
<tr>
<td><div align="right" class="style3">نظرات</div></td>
</tr>
</table></BLOGFA>


تبدیل کنیم ! اینکار باعث میشه به تعداد پستهای وبلاگ ما ف این جدول در صفحه تکرار بشه !
خوب !
حالا نوبت به جا گذاری بقیه تگ های مربوط به پست میرسه !
در محلی که قبلا نوشته بودیم "عنوان" یعنی اینجا :

<td><div align="right" class="style3">عنوان</div></td>


"عنوان رو پاک میکنیم و کد <-PostTitle-> رو قرار میدیم ! یعنی به این صورت :

<td><div align="right" class="style3"><-PostTitle-></div></td>


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

همچنین در مورد بخش نظرات :

یعنی این کد ها رو :

<td><div align="right" class="style3">نظرات</div></td>


با این :

<td><div align="right" class="style3">
<BlogComment>
<script type="text/javascript">GetBC(<-PostId->);</script>
</BlogComment>
</div></td>
جایگزین کنید ! خوب ! حالا باید یه همچین چیزی داشته باشید !

<BLOGFA><table width="100%" border="1">
<tr>
<td><div align="right" class="style3"><-PostTitle-></div></td>
</tr>
<tr>
<td><div align="right" class="style3"><-PostDate-></div></td>
</tr>
<tr>
<td><div align="right" class="style3"><-PostContent-></div></td>
</tr>
<tr>
<td><div align="right" class="style3">
<BlogComment>
<script type="text/javascript">GetBC(<-PostId->);</script>
</BlogComment>
</div></td>
</tr>
</table></BLOGFA>

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

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

خوب ! به همون روش قبلی اولین بلوک رو انتخاب کنید !
کد بلوک ما به این صورت هستش :

<table width="100%" border="1">
<tr>
<td><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span>بلاک شماره 2 </div></td>
</tr>
<tr>
<td height="70"><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span>محتویات</div></td>
</tr>
</table>


خوب فرض کنید ما میخوایم تو این بلوک ! عکسی که به عنوان نماد انتخاب کردیم و توضیحاتی در مورد وبلا نمایش داده بشه !

<BlogProfile><table width="100%" border="1">
<tr>
<td><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span>درباره وبلاگ ...</div></td>
</tr>
<tr>
<td height="70"><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span><img src="<-BlogPhotoLink->"><br/><-BlogAbout-></div></td>
</tr>
</table></BlogProfile>


ابتدا ! قبل و بعد از تگ <table> دو تگ <BlogProfile> و </BlogProfile> رو قرار میدیم. و برای نمایش توضیحات از تگ <-BlogAbout-> و برای نمایش تصویر از در قسمت src تگ <img> از تگ <-BlogPhotoLink-> استفاده میکنیم.

همچنین برای نمایش موضوعات وبلاگ :

<BlogCategories><table width="100%" border="1">
<tr>
<td><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span>موضوعات ...</div></td>
</tr>
<tr>
<td height="70"><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span><a href=""<-CategoryLink->"><-CategoryName-></a></div></td>
</tr>
</table></BlogCategories>

همچنین برای نمایش بلاک ارشیو وبلاگ :

<BlogArchive><table width="100%" border="1">
<tr>
<td><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span>ارشیو ...</div></td>
</tr>
<tr>
<td height="70"><div align="center"><span class="style5"><span class="style6"><span class="style6"></span></span></span><a href=""<-ArchiveLink->"><-ArchiveTitle-></a><br /></div></td>
</tr>
</table></BlogArchive>

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

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

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

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

در هر صورت امیدوارم که بدردتون خورده باشه !
اگه مشکلی دراین باره داشتید بپرسد تا جواب بدم !
در ضمن اگه فک میکنید این نوع اموزش به دردتون میخوره و در مورد خاصی مشکل دارید ! بگید تا اموزش بدم ! :d
البته من خودم طراح نیستم ! و کار اصلیم برنامه نویسی تحت وب هست !
اما خوب ! به هرحال ! دستی هم توی طراحی دارم !

بهرحال ! خوب یا بد بود ! ببخشید ! سعی کردم در بهترین حالت توضیح بدم !
اگه مشکلی داشتید حتما سوال کنید !

[lind]

پیام جان تو این آموزش دومیه شروعش خوب بود ولی تهشو گرفتی بهم!!(خیلی مثالا با آموزش مج نیست)http://fool.exler.ru/sm/crazy.gif
در مجموع من اونچیزیو که باید میفهمیدم فهمیدم ازت واقعا ممنونم!http://smilies.sofrayt.com/^/y/remybussi.gif
فکر کنم اگه این دوتا پست پیام تو یه تاپیک ادغام بشه و تهشم یکم اصولی تموم بشه ازش یه آموزش مناسب در میاد!http://fool.exler.ru/sm/wink.gif

[iMohsen]

پیام جان تو این آموزش دومیه شروعش خوب بود ولی تهشو گرفتی بهم!!(خیلی مثالا با آموزش مج نیست)http://fool.exler.ru/sm/crazy.gif
در مجموع من اونچیزیو که باید میفهمیدم فهمیدم ازت واقعا ممنونم!http://smilies.sofrayt.com/%5E/y/remybussi.gif
فکر کنم اگه این دوتا پست پیام تو یه تاپیک ادغام بشه و تهشم یکم اصولی تموم بشه ازش یه آموزش مناسب در میاد!http://fool.exler.ru/sm/wink.gif

یا جفتش بره تو یه تاپیک استیکی بشه اون بالا ! تحت عنوان طراحی قالب وبلاگ :bad_smile:

[DarkMan]

اره ! قبول دارم ! خداییش خیلی هل هلی نوشتمش ! و اون غیر اصولی تموم شدن تهش هم بخاطر همین بود !
اگه وقت کردم این مقاله دوم رو تغیرش میدم ! که یکم به درد بخور تر بشه ! :d