مرکز آموزش

انواع پوسته

پوسته چیست؟

پوسته وب سایت، یا همان قالب اصلی و اصطلاحاً Template  یا Skin به ساختار یا طرح گرافیکی می گویند که در کلیه صفحات وب سایت توسط طراح بکار رفته است. اسکلت یا همان ساختار پوسته، محل و نوع قرار گرفتن محتوا و مطالب یک وب سایت (متن، عکس، منوها، لوگو و ...) را مشخص می کند. رنگ، طرح گرافیکی و محل قرار گیری عناصر اصلی تشکیل دهنده وب سایت مانند منو ها ، لوگو، بنر ها و... در جذب مخاطب می باشد که بسیار موثر است. و نیز رعایت استانداردهای کد نویسی (W3C)   از جمله ملاک های مهم در طراحی پوسته است.

نکات مهم در طراحی پوسته:

استانداردهای w3c : توجه و رعایت این استانداردها در کد نویسی قالب (پوسته) باعث می شود، وب سایت شما در مرورگرهای گسترده و رایج قابل مشاهده باشد، همچنین موتورهای جستجو توجه بسیاری به وب سایت هایی که به این استانداردها توجه داشته و آن را رعایت کرده اند، می کنند و به آنها رنکینگ و رتبه بهتری می دهند.

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

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

 Cross Browser بودن سایت: طراح در کد نویسی پوسته سایت می بایست به نحوه نمایش سایت در مرورگرهای مختلف دقت داشته باشد.

طراحی یک وب سایت با ابزارهای مختلفی از جمله وردپرس، جوملا، دیگر سیستم های مدیریت محتوا، پورتال ها، کد نویسی با زبان های برنامه نویسی تحت وب از جمله asp.net ، php و... صورت می گیرد. براساس نوع طراحی سایت، روشهای طراحی پوسته نیز متفاوت است و پوسته ها را می توان براین اساس طبقه بندی کرد.طراحی پوسته برای یک وب سایت با استفاده از کدهای HTML ، CSS ، جاوا اسکریپت، JQuery و...انجام می پذیرد. با استفاده از CSS ظاهر، طرح، رنگ بندی، فونت و... صفحات از محتوای آنها که با استفاده از کدهای HTML تولید شده جدا می شود.کدهای استایل به صورت In Line ، Embeded و External قابل پیاده سازی می باشند. جاوا اسکریپت یک زبان اسکریپتی است که با کدهای HTML در ارتباط بوده و روی پلتفرم های مختلف قابل اجراست. (به سیستم عامل وابسته نیست).

JQuery یک Framework براساس زبان جاوا اسکریپت است. در واقع این کتابخانه استفاده از کدهای جاوا اسکریپت را ساده می سازد،با استفاده از function ها و Object های جاوا اسکریپت که از پیش تعریف شده، قابلیت های زیادی را می توان در صفحات ایجاد کرد از جمله :

امکان تغییر اجزا ء صفحه وب توسط کاربر، ایجاد انیمیشن، فرم های سمت کاربر (Client Side)  و...

به منظور طراحی پوسته علاوه بر نیاز به آشنایی با موارد فوق تسلط به فتوشاپ نیز ضروری می باشد. با استفاده از نرم افزار فتوشاپ می توان قالب ها را به صورت گرافیکی طراحی و سپس تبدیل به کد کرد. همچنین طراح وب سایت می بایست تا حدودی با زبان برنامه نویسی سایت asp.net ،PHPو.. آشنایی داشته باشد زیرا ممکن است زبان برنامه نویسی محدودیت هایی در طراحی پوسته اعمال نماید.

انواع پوسته:

در حال حاضر کاربران با استفاده از Device های مختلف (تبلت، موبایل، لپ تاپ و...) از صفحات وب بازدید می کنند. پوسته ها براساس انعطاف پذیری و تشخیص نوع Device به انواع مختلف تقسیم بندی می شوند:

1-فیکس (ثابت): این نوع از پوسته ها دارای یک کد ثابت هستند و بدون تشخیص و تفکیک نوع Device در تمامی آنها به صورت یکسان اجرا و نمایش داده می شوند. این امر باعث بروز مشکل در نمایش سایت در Device هایی همچون موبایل و تبلت می گردد.

2-جهت طراحی برخی از پوسته ها،چند نوع کد سازگار با Device های مختلف نوشته می شد که پس از تعیین و تشخیص آن Device  کد پوسته هماهنگ و متناسب با آن نمایش داده می شد. این روش در حال حاضر منسوخ و از روال طراحان سایت خارج  شده است.

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

مراحل طراحی پوسته:

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

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

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