تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

 

پیش نیازها

 

  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/ برید و با استفاده از لینک دانلود ، این سیستم گرید رو دریافت کنید. در جلسات بعدی محتویات این بسته رو بررسی خواهیم کرد.

 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین