آموزش طراحی قالب 1
چهارشنبه 21 شهریور1386
سلام دوستان
امروز با یکی از جذاب ترین و درعین حال پر طرفدارترین بخشهای وبلاگ نویسی در خدمت شما هستم.
این مطلب دست نوشته ی خودم یعنی ایمان هست و از جایی کپی نشده بنابراین پس از استفاده از این مطلب برای ذکر منبع به همین وبلاگ لینک بدین.
همونطور که از عنوان پست مشخص هست مطلب امروز درباره طراحی قالب وبلاگ برای تمام سیستم های وبلاگ نویسی می باشد.برای امروز فقط طریقه ایجاد یک طرح ساده (طرح خام یا بدون کد) رو براتون آموزش میدم.
قبل از هر چیز اینو بگم که اگه غلط نوشتاری دیدین به بزرگی خودتون ببخشین.
برای شروع کار اول باید ملزومات کار فراهم باشه.
ملزومات :
1- آشنایی تقریبی با HTML (مهمترین روش یادگیری HTML کدخوانی هست)
2- فتوشاپ (برای طرحهای گرافیکی خیلی مهمه)
3- یک ویرایشگر مثل فرونت پیج (Front Page) یا Note Pad یا یک ویرایشگر ساده HTML
4- آشنایی با کدهای سیستم های وبلاگ نویسی (خیلی مهمه که به موقع آموزش داده میشه)
5- ...
اول باید یه طرحی برای خودتون داشته باشین.نداشتین هم نداشتین چون وقتی وارد فتوشاپ بشین همه چی یادتون میاد.پس نگران طرح اولیه نباشین.
تو فتوشاپ Ctrl+N رو بزنید تا یه صفحه باز بشه و اندازه صفحه رو 600*800 کنید تا کار در محوطه گسترده تری انجام بشه.
یه طرحی برای خودتون تو کل صفحه پیاده کنین.(آموزش فتوشاپ)
مثل شکل زیر :
امروز با یکی از جذاب ترین و درعین حال پر طرفدارترین بخشهای وبلاگ نویسی در خدمت شما هستم.
این مطلب دست نوشته ی خودم یعنی ایمان هست و از جایی کپی نشده بنابراین پس از استفاده از این مطلب برای ذکر منبع به همین وبلاگ لینک بدین.
همونطور که از عنوان پست مشخص هست مطلب امروز درباره طراحی قالب وبلاگ برای تمام سیستم های وبلاگ نویسی می باشد.برای امروز فقط طریقه ایجاد یک طرح ساده (طرح خام یا بدون کد) رو براتون آموزش میدم.
قبل از هر چیز اینو بگم که اگه غلط نوشتاری دیدین به بزرگی خودتون ببخشین.
برای شروع کار اول باید ملزومات کار فراهم باشه.
ملزومات :
1- آشنایی تقریبی با HTML (مهمترین روش یادگیری HTML کدخوانی هست)
2- فتوشاپ (برای طرحهای گرافیکی خیلی مهمه)
3- یک ویرایشگر مثل فرونت پیج (Front Page) یا Note Pad یا یک ویرایشگر ساده HTML
4- آشنایی با کدهای سیستم های وبلاگ نویسی (خیلی مهمه که به موقع آموزش داده میشه)
5- ...
اول باید یه طرحی برای خودتون داشته باشین.نداشتین هم نداشتین چون وقتی وارد فتوشاپ بشین همه چی یادتون میاد.پس نگران طرح اولیه نباشین.
تو فتوشاپ Ctrl+N رو بزنید تا یه صفحه باز بشه و اندازه صفحه رو 600*800 کنید تا کار در محوطه گسترده تری انجام بشه.
یه طرحی برای خودتون تو کل صفحه پیاده کنین.(آموزش فتوشاپ)
مثل شکل زیر :
مهم ترین قسمت اینجاست که باید تصاویر رو برای استفاده در وب ذخیره کنین.
اگه از طرحهایی استفاده می کنین که از تصاویر در قسمت منوها و پستها خبری نیست و دلتون می خواد فقط در قسمتهای Header و Main و Footer از تصاویر استفاده کنین پیشنهاد می کنم که طرحتون رو فقط به سه قسمت تقسیم کنین.
اول باید توسط ابزار Slice Tools طرحتون رو قسمت بندی کنین (سرصفحه یا Header - میان صفحه یا Main - پا صفحه یا Footer)
اگه از طرحهایی استفاده می کنین که از تصاویر در قسمت منوها و پستها خبری نیست و دلتون می خواد فقط در قسمتهای Header و Main و Footer از تصاویر استفاده کنین پیشنهاد می کنم که طرحتون رو فقط به سه قسمت تقسیم کنین.
اول باید توسط ابزار Slice Tools طرحتون رو قسمت بندی کنین (سرصفحه یا Header - میان صفحه یا Main - پا صفحه یا Footer)

ابزار Slice Tools رو بگیرین و طرحتون رو مثل شکل زیر به سه قسمت در بیارین.
پس از اتمام تقسیم بندی طرح،نوبت به ذخیره کردن میرسه که خیلی مهمه.
چون برای بازدید کننده مدت زمان بارگذاری وب مهمه بنابراین استفاده از عکسهای کمتر یا استفاده از عکسهای کم حجمتر در وب یکی از عوامل اساسی در تعیین تعداد بازدید کننده محسوب میشه و باید از فرمتهایی برای تصویر استفاده کنیم که حجم عکس رو کم کرده و تغییری در کیفیت ایجاد نکنه.
برای ذخیره ،کلیدهای Alt+Ctrl+S رو با هم بزنید یا از منوی File گزینه Save For Web رو انتخاب کنین.
طبق شکل زیر تنظیمات رو انجام بدین و گزینه Save رو بزنین.
چون برای بازدید کننده مدت زمان بارگذاری وب مهمه بنابراین استفاده از عکسهای کمتر یا استفاده از عکسهای کم حجمتر در وب یکی از عوامل اساسی در تعیین تعداد بازدید کننده محسوب میشه و باید از فرمتهایی برای تصویر استفاده کنیم که حجم عکس رو کم کرده و تغییری در کیفیت ایجاد نکنه.
برای ذخیره ،کلیدهای Alt+Ctrl+S رو با هم بزنید یا از منوی File گزینه Save For Web رو انتخاب کنین.
طبق شکل زیر تنظیمات رو انجام بدین و گزینه Save رو بزنین.

شکل رو در مسیری که دلتون می خواد ذخیره کنین.
حالا نویت به کد نویسی میرسه که مهمترین جای طراحی قالب محسوب میشه.
تا اینجای کار 40% از کار انجام شده و 60% مونده.
برای استفاده از طرحمون در وبلاگ باید HTML رو تا حد متوسط فراگرفته باشیم.
قالب خام رو از 2 راه میشه کدنویسی کرد :
1- جدول بندی
2-استفاده از CSS (Cascading Style Sheet)
که استفاده از CSS بهترین روش کد نویسی هست و سرعت بارگذاری وب رو تا حد زیادی افزایش میده.
بقیه آموزش رو که مربوط میشه به "کدنویسی قالبهای خام" رو در پستهای بعدی براتون میزارم.
حالا نویت به کد نویسی میرسه که مهمترین جای طراحی قالب محسوب میشه.
تا اینجای کار 40% از کار انجام شده و 60% مونده.
برای استفاده از طرحمون در وبلاگ باید HTML رو تا حد متوسط فراگرفته باشیم.
قالب خام رو از 2 راه میشه کدنویسی کرد :
1- جدول بندی
2-استفاده از CSS (Cascading Style Sheet)
که استفاده از CSS بهترین روش کد نویسی هست و سرعت بارگذاری وب رو تا حد زیادی افزایش میده.
بقیه آموزش رو که مربوط میشه به "کدنویسی قالبهای خام" رو در پستهای بعدی براتون میزارم.
نوشته شده
توسط ایمان در ساعت 0:36 | موضوع :
آموزش طراحی قالب
[
]


