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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۲ خرداد ۱۳۹۲

فهرست محتوای این مقاله

مقدمه

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

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

پیش نیاز‌ها

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

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

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

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نظرات کاربران

ali

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

سجاد دریس

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

زمان الله

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

سجاد دریس

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

ارشیا کبیری

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

سجاد دریس

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

عبدالله

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

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

CS5

سعید

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

لقمان آوند

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

davood

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

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

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

ارام

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

سجاد دریس

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

mehrdad

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

amakups

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

سجاد دریس
مهدی

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

mgh

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

سجاد دریس

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.