آموزش طراحی قالب سایت – جلسه اول

[ آخرین بازنگری ۲۰ اسفند ۱۳۹۵ ] [ نسخه چاپی ]

هر سایت یا وبلاگ دارای یک نمای ظاهری است که به این نما قالب یا تم سایت گفته میشه . در قدیم (و حتی امروزه) بعضی طراحان برای ساده شدن کار و چیدمان عناصر موجود در صفحه از جداول استفاده می کردند ( و می کنند) که البته این کار باعث غیراستاندارد شدن طراحی میشه . قصد داریم در این سری آموزشی ، نحوه طراحی قالب برای سایتهای استاتیک و وبلاگها رو آموزش بدیم و سعی میکنیم در طی ۸ تا ۱۰ قسمت به صورت گام به گام این سری رو تکمیل کنیم. برای اینکه نحوه طراحی قالب رو به صورت کامل یادبگیرید به موارد زیر نیاز داریم:

پیش نیازها

  1. تسلط بر HTML ( مشاهده سری آموزش HTML )
  2. تسلط بر CSS ( مشاهده سری آموزش CSS )
  3. دانش عمومی و پایه از فتوشاپ

توصیه میکنم اگر بر موارد ۱ و ۲ تسلط ندارید ، حتما سری آموزشی موارد مربوطه رو مطالعه کنید چراکه بدون دانش html و css در این سری آموزشی به مشکل برخواهید خورد.

مراحل کلی کار

برای اینکه یک تصویر ذهنی کلی برای شما ایجاد کنیم بهتر هست که مراحل کلی کار رو با هم مرور کنیم تا بعد مرحله به مرحله پیش بریم ، اینطوری کار با نظم بیشتری همراه خواهد بود  ،

  1. ایجاد طرح اولیه و پیاده سازی چیزی که در ذهن دارید بر روی کاغذ
  2. پیاده سازی طرحی که بر روی کاغذ کشیده اید در فتوشاپ و اضافه کردن جزئیات و رنگها
  3. تبدیل فایل فتوشاپ طراحی شده به قالب سایت/وبلاگ با استفاده از html و css
  4. بررسی قالب در مرورگرهای مختلف و رفع ایرادات احتمالی و یکسان سازی در مرورگرها
مراحل بالا به ترتیب طی خواهند شد تا در نهایت یک قالب آماده بشه و بتونیم از اون در سایت یا وبلاگ خودمون استفاده کنیم.

رسم طرح اولیه بر روی کاغذ

هر قالب از چهار بخش اصلی تشکیل میشه که عبارتند از:

  1. سربرگ (header)
  2. منو یا منوها (sidebar)
  3. بدنه (body)
  4. پابرگ (footer)

عناصر اصلی یک قالب سایت - طراحی قالب

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

توجه داشته باشید که در طرحی که بر روی کاغذ میکشید باید مواردی مثل اندازه طول و عرض عناصر موجود در صفحه و فاصله بین اونها رو در نظر بگیرید.

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

انتخاب رنگبندی مناسب برای طراحی قالب

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

» آشنایی با روانشناسی رنگها و معنی و مفهوم آنها

میتونید از لینک بالا برای این منظور استفاده کنید و با روانشناسی رنگها آشنا بشید ، اگر در ترکیب رنگها نیاز به کمک دارید همچنین میتونید از ابزارهای رایگان و آنلاین که در سایتهای مختلف وجود داره استفاده کنید ، برای مثال :

http://www.colorschemer.com/online.html

http://www.colorblender.com/

برای اینکه طراحی تمیز و مرتب داشته باشیم در این سری آموزشی از Grid960 استفاده خواهیم کرد.اگر از این سیستم اطلاعی ندارید آموزش رو در صفحه بعد پیگیری کنید تا در مورد این سیستم اطلاعات لازم رو کسب کنید.

 

Grid960 چیست و چه کاربردی دارد؟

Grid960 یک طرح آماده css و فتوشاپ هست که یک صفحه رو با پهنای ۹۶۰ پیکسل به ۱۲ تا ۱۶ قطعه مساوی تقسیم میکنه.

در سیستم ۱۲ ستونی ، هر قطعه (یا هر گرید) مساوی است با ۶۰ پیکسل و در سیستم ۱۶ ستونی ، هر گرید برابر است با ۴۰ پیکسل و با ترکیب این گریدها میتونید به ستونهای بزرگتر و اندازه های مختلف دست پیدا کنید.

برای اینکه توضیح بالا رو راحت تر متوجه بشید دموی ۹۶۰ Grid System رو از سایت مرجع مشاهده کنید.

گرید ۱۲ ستونی شامل ۱۲ گرید هست که از یک تا دوازده شماره گذاری میشوند ، به این ترتیب که گرید یک معادل ۶۰ پیکسل ، گرید دو معادل ۱۴۰ پیکسل ، گرید ۳ معادل ۲۲۰ پیکسل و … است . حتما توجه کردید که گرید ۲ که شامل دوتا گرید ۱ هست باید ۱۲۰ پیکسل باشه نه ۱۴۰ پیکسل ! این امر به این دلیل هست که هر گرید حاشیه ای معادل ۱۰ پیکسل در اطرافش داره ، پس ۲ تا گرید ۱ (۱۲۰ پیکسل) و ۲ تا حاشیه ۱۰ پیکسلی که جمعا ۱۴۰ پیکسل میشوند.

این ماجرا برای سیستم ۱۶ ستونی هم به همین منوال هست و فقط بجای ۱۲ قسمت ، ۱۶ قسمت ۴۰ پیکسلی داریم و بین هر گرید با گرید بعدی ۲۰ پیکسل فاصله وجود داره (برای هر گرید ۱۰ پیکسل!)

گرید 960 برای سایت 12 ستونی

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

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

برای اینکه درک بهتر و ساده تری از مطلب داشته باشید ، اجازه بدید برای شما مثالی بزنم ،

در تصویر بالا قالب یک سایت رو مشاهده میکنید و اگر تعداد خطوط صورتی عمودی ( گرید ) رو بشمارید میبینید که ۱۲ تاست یعنی این قالب از سیستم ۱۲ ستونی استفاده کرده است. سایدبار شامل ۴ ستون (گرید ۴) و  بدنه شامل ۸ ستون (گرید ۸ ) هست:

Grid 4 + Grid 8 = Grid 12

اگر به دمویی که در بالاتر لینکش رو برای شما گذاشتم توجه کنید متوجه میشید که گرید ۴ از سیستم ۱۲ ستونی عرضی معادل ۳۰۰ پیکسل داره و گرید ۸ عرضی معادل ۶۲۰ پیکسل ، از هر طرف هم ۱۰ پیکسل و بین دو گرید ۲۰ پیکسل حاشیه وجود داره که در مجموع به عدد ۹۶۰ پیکسل میرسیم.

شاید سوالی برای شما پیش بیاد و بگید دوست دارم قالبی که طراحی میکنم دوتا سایدبار در دوطرف داشته باشه ، خوب در این صورت برای سیستم ۱۲ ستونی خواهیم داشت :

Grid 3 + Grid 6 + Grid 3 = Grid 12

یا برای سیستم ۱۶ ستونی خواهیم داشت :

Grid 3 + Grid 10 + grid 3 = Grid 16

یا هر اندازه دیگری که دوست دارید .

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

حتما به سایت http://960.gs/ برید و با استفاده از لینک دانلود ، این سیستم گرید رو دریافت کنید. در جلسات بعدی محتویات این بسته رو بررسی خواهیم کرد.

احتمالا این مطالب برای شما جالب هستند

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

گفتگو پیرامون آموزش طراحی قالب سایت – جلسه اول

(منتشر شده: 42 | در انتظار تایید: 0)
z.b

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

الهه

ببخشید شما قالب هم درست می کنید اگه درست می کنید هزینه اش چقدره

عصرعلم

در پاسخ به الهه

سلام
در این خصوص با ایمیل info[at]AsreElm[dot]com تماس بگیرید.
پیروز باشید.

ali

سلام؛
۲ط؟
برای کار با فتو شاپ هر نسخه ای بود مشکلی نداره لینک دانلود در سایت موجوده؟
و اینکه قالب طراحی شده برای ورد پرس یا جوملا هم جواب گو هست یا خیر؟.
با تشکر

عصرعلم

در پاسخ به ali

سلام
هر نسخه ای از فتوشاپ قابل استفاده است، لینک دانلود فتوشاپ در سایت موجود نیست ولی فایلهایی که در آموزش به آنها پرداخته ایم در انتهای هر مطلب قابل دانلود هستند.
قالب به صورت استاتیک (خام) است و قابلیت تبدیل برای وردپرس یا جوملا را دارا است.

نیوشا

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

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

سپاس بخاطر سایت خوبتون

عصرعلم

در پاسخ به نیوشا

سلام
css یک زبان نیست، فقط شیوه ای است برای چینش عناصر موجود در صفحات وب. برای قرار دادن تصویر در صفحات وب میتونید هم از html استفاده کنید و هم از css بستگی به این داره که قصد داشته باشید این تصویر را چطور نمایش بدید. منظورتون از کناره ی قالب ستون کناری است که با بالا پایین رفتن (اسکرول) صفحه بالا پایین بره یا اینکه مثل تبلیغات در یک گوشه ثابت نمایش داده بشه؟

باران

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

میکائیل

سلام و خسته نباشید .
متشکر و ممنونم بابت شارش اطلاعات مفیدتون ، من با php , Html , Css و فتوشاپ آشنایهای لازم رو دارم از امروز برای طراحی قالبی درست و اصولی با شما همراه می شم ، امید دارم بتونم تمامی مباحث عنوان شدتون رو درک کنم و به کار گیرم ، خوشحالم تو ایرانمون داره انسانهایی مثل شما زیاد میشن ، تشکر فراوان .

سامانه پیام کوتاه

با تشکر از مدیر گرامی
بسیار مفید بود

مرجع هاستینگ ایران

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

blog.webcost.ir
مرجع هاستینگ ایران

مهتاب

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

عصرعلم

در پاسخ به مهتاب

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

امیرسام

سلام دادا یه سوال
ایا میشه قالب رو به صورت عرضی در اورد؟ یعنی پست هامون به صورت باکس باکس مثلا سه پست در هر ردیف…میشه؟ اگه میشه بگین چطوری مرسی

عصرعلم

در پاسخ به امیرسام

بله این امکان وجود داره، باید با استفاده از css اینکار را انجام بدید. کمی پیچیده است، در قالب یک دیدگاه نمیشه آموزش داد. ولی باید برای هر پست پهنای ثابت در نظر بگیرید و با استفاده از float:right اونها را شناور کنید.

آموزش بسیار خوبی بود.
میشه در مورد سئو قابل هم مطالبی رو آموزش بدین؟
بسیار ممنون

عصرعلم

در پاسخ به طراحی سایت

سلام
حتما، بزودی بخشی اختصاصی برای سئو درنظر خواهیم گرفت.

samira

با سلام
در مورد سیستم responsive آموزشی نمیزارید؟
همون طور که میگید رو بورس هست.

کمالیفر

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

آدم این اموزش ها رو میبینه میترسه منصرف میشهههــــ…!

Grid960 واقعا خیلی عالیه و خیلی از کارمون را با این فریم ورک انجام می دیم.

عصرعلم

در پاسخ به طراحی سایت

بله واقعا عالیه ولی الان دیگه سیستم های responsive رو بورس هستند.

pjimax

من جلسه اول آموزش شما رو خوندم.بسیار مفید و آموزنده بود
اما موفق نشدم جلسات دوم تا هشتم رو در سایت پیدا کنم:)
در صورت امکان برام میل کنید.

عصرعلم

در پاسخ به pjimax

سلام
برای دسترسی سریع به سایر جلسات میتونید عدد جلسه ی مورد نظر رو در آدرس صفحه تایپ کنید برای مثال برای جلسه دوم آدرس :
http://www.asreelm.com/design-webpage-template-2/
و برای جلسه سوم آدرس :
http://www.asreelm.com/design-webpage-template-3/

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

soroush

با سلام بنده مبتدي هستم و از امروز با آموزشهاي شما سعي ميكنم به نتيجه برسم. از شواهد امر پيداست كه جامع و كامل توضيح داده شده است . سپاسگزاريم از زحمات شما و قدرداني ميكنيم. زنده باشيد

عصرعلم

در پاسخ به soroush

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

cindrella

سلام. دوستان من وقتي تصاوير را درون گريدها قرار ميدهم تصاوير نشون داده نميش. ميتونيد كمكم كنيد. خيلي فوريه

عصرعلم

در پاسخ به cindrella

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

آنی

بله! با چند بار خوندن بالاخره متوجه شدم!!

آنی

پس گرید ها همون قسمتایی از یک سایت هستن که مطالب توی اونها قرار میگیره نه؟ متوجه نمیشم!
و یک پیشنهاد. بهتر نیست بجای اینکه ما (که خیلی بی حوصله هستیم) بریم کل آموزش های HTML , CSS رو بخونیم، در همینجا و در درس های طراحی سایت در صورت نیاز به اونها اشاره بشه!؟

عصرعلم

در پاسخ به آنی

تقریبا بله، گریدها خطوط فرضی هستند که فضای قرار گیری و چینش مطالب رو برای ما مشخص میکنند . نیاز هست که کل مطالب html و css خونده بشه ولی در طی آموزش وقتی به کد نویسی برسیم هم توضیحات لازم ارائه خواهد شد.

آنی

خیلی گرید تو گرید شد این عددا و گرید هاشون مشکل ساز شدنا! مارو گیج میکنن!

عصرعلم

در پاسخ به آنی

بله کمی (و شاید بیشتر از کمی) گیج کننده باشند ، چیزی که در گریدها اهمیت داره این هست که مجموع گریدهای کوچکتر ، از گرید اصلی بیشتر یا کمتر نشوند. یعنی اگر از گرید 12 استفاده میکنیم مجموع گریدهایی که برای بخشهای مختلف قالب استفاده کرده ایم باید مساوی با 12 باشه یعنی:


1+11 , 2+10 , 3+9 , 4+8 , 5+7 , ...

وقتی به بخش تبدیل طرح فتوشاپ به کد html و css برسیم در عمل این موارد رو خواهید دید و درکش راحت تر خواهد بود. در اینجا فقط قصدمون یک آشنایی کلی بود.

آنی

من گفتم میتونم اینکارها رو انجام بدم نه اینکه اونها رو انجام میدم!

زی

ممنون

آنی

من میتونم یه قالب ساده طراحی کنم. با عوض کردن هدر، بکگراند، لینک نظرات و لینک طراح قالب. اگر امکانش هست نمونه کد هر نوع قالب رو بذارید و در همون کد نمایش بدین هر قسمت نشانگر چه چیز تاثیر گذاری در قالب هست.

عصرعلم

در پاسخ به آنی

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

آنی

متاسفانه هیچ یک از آموزش های HTML ، CSS و یا همین طراحی سایتی که الآن گذاشتین برای ما مفهوم نیست!

عصرعلم

در پاسخ به آنی

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

میلاد

در پاسخ به آنی

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

عصرعلم

در پاسخ به میلاد

سپاس

کاربر گرامی، بخش گفت‌وگو برای این مطلب غیرفعال است.