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

- 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 دیدگاه کاربران
ali

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

سجاد دریس

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

نیاز به لاگین

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