سلام به شما دوستای عزیز ارجمند حالتون که خوبه؟ با اموزشهای امروزماک هدر مورد طراخی سایت است همراه هستید؟امیدوارم که ازان استفاده لازم راببرید.هر سایت یا وبلاگ دارای یک نمای ظاهری است که به این نما قالب یا تم سایت گفته میشه . در قدیم (و حتی امروزه) بعضی طراحان برای ساده شدن کار و چیدمان عناصر موجود در صفحه از جداول استفاده می کردند ( و می کنند) که البته این کار باعث غیراستاندارد شدن طراحی میشه . قصد داریم در این سری آموزشی ، نحوه طراحی قالب برای سایتهای استاتیک و وبلاگها رو آموزش بدیم و سعی میکنیم در طی ۸ تا ۱۰ قسمت به صورت گام به گام این سری رو تکمیل کنیم. برای اینکه نحوه طراحی قالب رو به صورت کامل یادبگیرید به موارد زیر نیاز داریم:
پیش نیازها
تسلط بر HTML ( مشاهده سری آموزش HTML )
تسلط بر CSS ( مشاهده سری آموزش CSS )
دانش عمومی و پایه از فتوشاپ
توصیه میکنم اگر بر موارد ۱ و ۲ تسلط ندارید ، حتما سری آموزشی موارد مربوطه رو مطالعه کنید چراکه بدون دانش html و css در این سری آموزشی به مشکل برخواهید خورد.
مراحل کلی کار
برای اینکه یک تصویر ذهنی کلی برای شما ایجاد کنیم بهتر هست که مراحل کلی کار رو با هم مرور کنیم تا بعد مرحله به مرحله پیش بریم ، اینطوری کار با نظم بیشتری همراه خواهد بود ،
ایجاد طرح اولیه و پیاده سازی چیزی که در ذهن دارید بر روی کاغذ
پیاده سازی طرحی که بر روی کاغذ کشیده اید در فتوشاپ و اضافه کردن جزئیات و رنگها
تبدیل فایل فتوشاپ طراحی شده به قالب سایت/وبلاگ با استفاده از html و css
بررسی قالب در مرورگرهای مختلف و رفع ایرادات احتمالی و یکسان سازی در مرورگرها
مراحل بالا به ترتیب طی خواهند شد تا در نهایت یک قالب آماده بشه و بتونیم از اون در سایت یا وبلاگ خودمون استفاده کنیم.
رسم طرح اولیه بر روی کاغذ
هر قالب از چهار بخش اصلی تشکیل میشه که عبارتند از:
سربرگ (header)
منو یا منوها (sidebar)
بدنه (body)
پابرگ (footer)
عناصر اصلی یک قالب سایت – طراحی قالب
برای شروع ، نیاز هست که ابتدا طرحی که در ذهن دارید رو بر روی کاغذ پیاده سازی کنید. ترجیحا از مداد و خطکش استفاده کنید تا طرحتون تمیز و واضح باشه.
توجه داشته باشید که در طرحی که بر روی کاغذ میکشید باید مواردی مثل اندازه طول و عرض عناصر موجود در صفحه و فاصله بین اونها رو در نظر بگیرید.
در طرح روی کاغذ فقط از رنگ مشکی استفاده میکنیم پس بنابراین یک طرح سیاه و سفید خواهیم داشت اینطور ایرادات کار بیشتر به چشم میاد و اصلاحشون میکنیم.
انتخاب رنگبندی مناسب برای طراحی قالب
یکی از مهمترین ویژگیهای ظاهر سایت ، رنگبندی عناصر موجود در صفحه است. انتخاب رنگ مناسب میتونه یک طراحی ساده رو به طرح بسیار جذابی تبدیل کنه و یا یک طرح حرفه ای با رنگبندی نامناسب به یک ظاهر زننده و خسته کننده تبدیل بشه!
» آشنایی با روانشناسی رنگها و معنی و مفهوم آنها
میتونید از لینک بالا برای این منظور استفاده کنید و با روانشناسی رنگها آشنا بشید ، اگر در ترکیب رنگها نیاز به کمک دارید همچنین میتونید از ابزارهای رایگان و آنلاین که در سایتهای مختلف وجود داره استفاده کنید ، برای مثال :
http://www.colorschemer.com/online.html
http://www.colorblender.com/
برای اینکه طراحی تمیز و مرتب داشته باشیم در این سری آموزشی از Grid960 استفاده خواهیم کرد.اگر از این سیستم اطلاعی ندارید آموزش رو در صفحه بعد پیگیری کنید تا در مورد این سیستم اطلاعات لازم رو کسب کنید.
Grid960 چیست و چه کاربردی دارد؟
Grid960 یک طرح آماده css و فتوشاپ هست که یک صفحه رو با پهنای ۹۶۰ پیکسل به ۱۲ تا ۱۶ قطعه مساوی تقسیم میکنه.
در سیستم ۱۲ ستونی ، هر قطعه (یا هر گرید) مساوی است با ۶۰ پیکسل و در سیستم ۱۶ ستونی ، هر گرید برابر است با ۴۰ پیکسل و با ترکیب این گریدها میتونید به ستونهای بزرگتر و اندازه های مختلف دست پیدا کنید.
برای اینکه توضیح بالا رو راحت تر متوجه بشید دموی ۹۶۰ Grid System رو از سایت مرجع مشاهده کنید.
گرید ۱۲ ستونی شامل ۱۲ گرید هست که از یک تا دوازده شماره گذاری میشوند ، به این ترتیب که گرید یک معادل ۶۰ پیکسل ، گرید دو معادل ۱۴۰ پیکسل ، گرید ۳ معادل ۲۲۰ پیکسل و … است . حتما توجه کردید که گرید ۲ که شامل دوتا گرید ۱ هست باید ۱۲۰ پیکسل باشه نه ۱۴۰ پیکسل ! این امر به این دلیل هست که هر گرید حاشیه ای معادل ۱۰ پیکسل در اطرافش داره ، پس ۲ تا گرید ۱ (۱۲۰ پیکسل) و ۲ تا حاشیه ۱۰ پیکسلی که جمعا ۱۴۰ پیکسل میشوند.
این ماجرا برای سیستم ۱۶ ستونی هم به همین منوال هست و فقط بجای ۱۲ قسمت ، ۱۶ قسمت ۴۰ پیکسلی داریم و بین هر گرید با گرید بعدی ۲۰ پیکسل فاصله وجود داره (برای هر گرید ۱۰ پیکسل!)
گرید ۹۶۰ برای سایت ۱۲ ستونی
در تصویر بالا هر گرید با ستون عمودی صورتی رنگ مشخص شده است.
شاید در اول کار کمی گیج کننده باشه ولی در ادامه ی کار ، نحوه استفاده این سیستم رو به طور کامل یادخواهید گرفت ، پس نگران نباشید و به خواندن مطلب ادامه بدید!
برای اینکه درک بهتر و ساده تری از مطلب داشته باشید ، اجازه بدید برای شما مثالی بزنم ،
در تصویر بالا قالب یک سایت رو مشاهده میکنید و اگر تعداد خطوط صورتی عمودی ( گرید ) رو بشمارید میبینید که ۱۲ تاست یعنی این قالب از سیستم ۱۲ ستونی استفاده کرده است. سایدبار شامل ۴ ستون (گرید ۴) و بدنه شامل ۸ ستون (گرید ۸ ) هست:
Grid 4 + Grid 8 = Grid 12
اگر به دمویی که در بالاتر لینکش رو برای شما گذاشتم توجه کنید متوجه میشید که گرید ۴ از سیستم ۱۲ ستونی عرضی معادل ۳۰۰ پیکسل داره و گرید ۸ عرضی معادل ۶۲۰ پیکسل ، از هر طرف هم ۱۰ پیکسل و بین دو گرید ۲۰ پیکسل حاشیه وجود داره که در مجموع به عدد ۹۶۰ پیکسل میرسیم.
شاید سوالی برای شما پیش بیاد و بگید دوست دارم قالبی که طراحی میکنم دوتا سایدبار در دوطرف داشته باشه ، خوب در این صورت برای سیستم ۱۲ ستونی خواهیم داشت :
Grid 3 + Grid 6 + Grid 3 = Grid 12
یا برای سیستم ۱۶ ستونی خواهیم داشت :
Grid 3 + Grid 10 + grid 3 = Grid 16
یا هر اندازه دیگری که دوست دارید .
امیدوارم متوجه شده باشید که این سیستم به چه دردی میخوره و اگر بازهم به طور کامل این سیستم رو متوجه نشدید نگران نباشید ، در طی آموزش و در درسهای آتی وقتی به صورت عملی از این سیستم استفاده کنیم کار با اون رو یادخواهید گرفت و مطمئن هستم در طراحیهایی که انجام میدید از این سیستم استفاده خواهید کرد.
