campaign-edianeh-98

آموزش طراحی قالب (فصل اول - جلسه اول) : مقدمه



visibility  
mode_comment   ۴۶

مقدمه


با سلام خدمت دوستان عزیز، امیدوارم که حالتون خوب باشه، با توجه به گفته های شما عزیزان، که خواسته بودید آموزش طراحی قالب رو هم بذارم، و طبق قولی که بهتون دادم بعد از تموم شدن دو سری آموزشی CSS و HTML ، از امروز قصد دارم که آموزش طراحی قالب HTML رو هم شروع کنم. اما قبل از شروع خواستم چند نکته رو متذکر بشم، تا که بعدا طی آموزش مشکلی پیش نیاد.

  • آموزش هایی که واستون میزارم کامل هست و مطمئن باشید که حتما یاد می گیرید.
  • مطالب این آموزش ها هر چهار روز یکبار قرار داده میشه و سعی می کنم تاخیری به وجود نیاد، اما اگر همچین اتفاقی افتاد مطمئن باشید که به خاطر کمبود وقت هست و دلیل دیگه ای نداره و من از همین الان از شما عذر خواهی میکنم.
  • اگر مشکل، یا سوالی توی آموزش واستون پیش اومد سعی کنید که سوال یا مشکلتون رو در بخش نظرات همون جلسه مطرح کنید.

پیش نیاز ها


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

  • آشنایی با دو زبان HTML و CSS : مهمترین و اصلی ترین پیش نیازی که برای طراحی قالب نیاز دارین آشنایی با این دو زبان تحت وب هست. هر قالبی که تا به حال دیدین، حداقل با استفاده از این دو زبان طراحی شده، و اگر با این دو زبان آشنایی نداشته باشید، حتما طراحی قالب کار انجام نشدنی خواهد بود. با اینکه سعی میشه هر کدی که قرار میدم رو به طور کامل کار و کاربردشو رو توضیح بدم اما با این حال اگر با این زبان ها آشنایی ندارین میتونید آموزش هاشون رو از اینجا بخونید.
  • آشنایی با نرم افزار فتوشاپ : قبل از طراحی هر قالب همیشه سعی کنید که شکل و شمایل اون رو اول در نرم افزار فتوشاپ طراحی و سپس طبق طرحی که دارین جلو برید، این طوری طراحی قالب طبق یه طرح اولیه و مکان هر قسمت از سایت از قبل تعیین شده خواهد بود. ما هم در این آموزش در اول قالب مورد نظرمون رو در نرم افزار فتوشاپ طراحی و بعد شروع به تبدیل اون به کدهای HTML و CSS می کنیم.
  • نرم افزار ویرایشگر کد : با اینکه میتونید از ویرایشگر خود ویندوز (notepad) هم استفاده کنید، اما با این حال نرم افزارهای زیادی هم برای اینکار وجود داره، که معروف ترین آنها دریم ویو و ... هستند، تا که نوشتن کدها خیلی سریعتر انجام بشه، در این آموزش بنده از نرم افزار notepad++ برای ویرایش کدها استفاده می کنم.
  • مرورگر صفحات وب : برای دیدن کدهایی که با دو زبان html و css نوشتیم باید از یکی از مرورگرهای صفحات وب (ie-firefox-opera-chrome) استفاده کنیم، بنده در این آموزش از مرورگر chrome استفاده می کنم، درضمن حتما سعی کنید که از آخرین ورژن اون مرورگر استفاده کنید.

توضیحاتی در مورد قالب


قالبی که طراحی خواهیم کرد یک قالب سه ستونه هست، و سعی می کنم، امکانات عمومی که در هر قالب وجود داره رو در این قالب قرار بدیم. در جلسات بعد که قالب رو در نرم افزار فتوشاپ طراحی خواهیم کرد میتونید اون امکانات رو ببنید، در ضمن میتونید شکل قالب رو بعدا به سلیقه خودتون تغییر بدید.
طراحی قالب ما در چهار مرحله انجام میشه :

  • قسمت اول : گرافیک قالب ( طراحی گرافیکی قالب در نرم افزار فتوشاپ)
  • قسمت دوم : برش طرح ( برش دادن تصاویر برای استفاده در کدها)
  • قسمت سوم : کدهای HTML ( نوشتن کدهای html و تعیین ساختار صفحه )
  • قسمت چهارم : کدهای CSS ( شکل دهی به کدهای html با استفاده از کدهای css)

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

comment دیدگاه کاربران
saeed

سلام.
ببخشید,این اموزش طراحی قالب رو میشه واسه قالب جوملا هم استفاده کرد؟

سجاد دریس

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

iman_k26

سلام
سعنی بعدش آموزش ست کردنش هم میدید؟(لااقل برای یکی از سیستم های مدیریت محتوا)

سجاد دریس

سلام.
آره احتملا برای وردپرس

hajian1

سلام
خیلی خوشحال شدم که طراحی قالب شروع کردید
یک سئوالی اگه ممکنه پاسخ کافی لطف کنید
من پلاگین افزونه Media65Joomla Template Kit3.oرابرای دیریم ویورسی اس 5نصب کردم البته این پلاگین برای طراحی قالب جوملاکاربردداره خواستم سئوال کنم برای طراحی قالب htmlهم مفیدهست؟
ومیشه برای سریع ترکردن کدنویسی درطراحی وکدنویسی
قالب هایhtmlهم ازاین افزونه دردیریم ویوراستفاده کرد
باتشکرازشما

سجاد دریس

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

منوچهر

با عرض سلام و خسته نباشید
خیلی خوشحالم که این آموزش رو شروع کردید
بی صبرانه منتظر آموزشهای شما هستم
اگر امکان داره آموزشها یا بصورت نوشته و متن مثل بالا باشه یا اگه قراره دانلودی بزارین لطفا در حجم کم باشه که با این سرعت کم اینترنتم بتونم دانلود کنم
ان شااله در زندگیتون موفق و موید باشید 😳

سجاد دریس

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

safiran

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

سجاد دریس

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

hajian1

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

zeinab-azizzadeh fard

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

SAjjADma

سلام
این آموزش چند جلسه زمان میبره؟

سجاد دریس

سلام.
این آموزش پنج فصل خواهد بود.

علیـــــ

سلام سلام
اموزشتون خوبه من تازه دان کردم اموزش اچ تی ام الو تا شروع کنم ببینم چی میشه
فقط دوستان ادامه ی اموزش طراحی وب کجاست من فقط مقدمشو خوندم بگید کجاست تا یاد بگیرم
مرسیـــــــــــــــــــــــــ 😎 😉 😯

سجاد دریس

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

علی

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

سجاد دریس

سلام.
مربوط به unicode صفحه اس در جلسه بعدی راه حل این مشکل رو آموزش میدم.

سوران

سلام
در رابطه با آشنایی با یونیکد مقاله زیر رو توصیه میکنم:
http://www.webtarget.ir/blog/همه-چیز-در-مورد-unicode-utf8

Ali Ranjbarzadeh

سلام
دستتون درد نکنه با زحمات زیادی که میکشین
خیلی خوبه که این آموزش ها رو میزارید

سجاد دریس

سلام.
ممنونم از شما.
خوشحالم که راضی هستین.

علیـــــ

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

سجاد دریس

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

mgh

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

سجاد دریس

سلام.
درسته… اما منظور من از آشنایی اینه که مسلط نیستم
و تا وقتی به کاری مسلط نیستم انجامش نمیدم.

مهدی

سلام
من با تگ سرویس وبلاگدهی ایران کاملا مسلط هستم
میتونم باهاتون خصوصی حرف بزنم

سجاد دریس

saman30g@gmail.com

علیـــــ

بازم سلام
مرسی از لطفتون داش
یعنی تک تک توضیح میدید چه کدیرو کجا بزاریم تا یه قالب طراحی کنیم؟؟؟
کدهای بلاگفا چیه؟؟ کجا باید گذاشت؟؟میشه اینم اموزششو یا کداشو بگید؟؟
ممنون چقد سوال پرسیدما 😆 😆 😀

سجاد دریس

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

fiamm

با سلام
ممنون عالی بود

amakups

با سلام
ممنون عالی بود

ارام

باسلام ممنون از زحماتی که می کشین یه سوال داشتم من چه نرم افزار فتوشاپیرو دانلود کنم فقط اسمشو بگین ممنون 😛 🙁

سجاد دریس

فرقی نمیکنه از کدوم ورژن استفاده کنید
من در این آموزش از ورژن cs5 استفاده کردم.
البته دقت کنید، هنگام دانلود نرم افزار حتما نسخه me باشه. وگرنه توی تایپ فارسی مشکل پیدا می کنید.

mehrdad

نسخه ی پرتابل با نسخه ی معمولی فرقی هم میکنه از نظر امکاناتش. چون نسخه ی پرتابل خیلی حجمش کمتره؟!

davood

سلام
من یک سوال داشتم. این که کد هایی که می گویید روی سیستم های وبلاگدهی مثل رزبلاگ کار می کنه ؟
آدرس :
rozblog.com

کیوان علی محمدی

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

سعید

سلام آقا لقمان میشه آموزش ساختن قالب ورد پرس با فوتوشاپ رو بذارین منظورم ایته که بعد از طراحی با فوتوشاپ کدنویسی های مخصوص وردپرس رو آموزش بدین

لقمان آوند

در اینده سعی میشه چنین آموزشی در سایت گذاشته بشه ..

عبدالله

میشه بگید از چه فوتوشاپی استفاده میکنید؟

کیوان علی محمدی

CS5

ارشیا کبیری

برای آموزش قالب وردپرس کی اقدام مکنید ؟
آموزش فارسی سازی پوسته وردپرس چطور ؟

سجاد دریس

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

زمان الله

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

سجاد دریس

بله.
و فقط نیازه که شما افزونه موردنظرتون رو نصب کنید

ali

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

سجاد دریس

سلام. اگه اکانت جیمیل داشته باشید می تونید به این آدرس مراجعه کنید و فایل هاتون رو اونجا آپلود کنید

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.