آموزش طراحی سایت ریسپانسیو

توضیحات

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

نمونه کارهای طراحی سایت و سئو دارکوب

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

صفحه نمایش دستگاه تمامی کاربرانی که یک وب سایت را بازدید می کنند یکسان نیست. کاربران می توانند از دستگاه های موبایل، مانیتورهای بزرگ یا تلویزیون های هوشمند برای اتصال به اینترنت استفاده کنند. شاید از همه مهم تر کاربران تلفن های همراه باشند که تقریبا بیش از نیمی از کل کاربران اینترنت را تشکیل می دهند. بنابراین ما باید طراحی وب سایت را برای دستگاه ها موبایل با اندازه های متفاوت بهینه سازی کنیم. به این جهت ما دو راه داریم طراحی سایت نسخه ویژه کاربران موبایل در کنار نسخه دسکتاپ که بسیار پر هزینه و توجیح نا پذیر است، یا طراحی واکنش گرا یا ریسپانسیو که راه حل پیشنهادی گوگل می باشد (چون سازگار بودن سایت با دستگاه های موبایل فاکتور مهمی در سئو است).
اکثر توسعه دهندگان وب برای طراحی ریسپانسیو از بوت استرپ استفاده می کنند. Bootstrap یک فریم ورک متن باز سمت کاربر (Front-end)، بسیار محبوب در GitHub است. بوت استرپ حاوی الگوهای طراحی HTML و CSS برای المان های صفحه وب مانند: دکمه، منو، فرم و غیره به اضافه افزونه های اختیاری جاوا اسکریپت است.
با استفاده از بوت استرپ تعداد خطوط کد های شما در طراحی سایت به شدت کاهش یافته، تغییر و ویرایش کد ها آسان تر می شود.
ویژگی های بوت استرپ:

• سرعت توسعه بالا با کمک کتابخانه و ابزار های آماده
• پشتیبانی مناسب در اکثر مرورگر های اینترنتی
• امکان طراحی واکنش گرا یا Responsive
• دارای جامعه نسبتا بزرگی توسعه دهنده گان
• وجود مستندات کافی
• متن باز بودن
• قابلیت ویرایش کتابخانه

سرفصل ها

• بدیل صفحه غیر ریسپانسیو به ریسپانسیو
• بررسی مفهوم Responsive
• معرفی مفهوم CSS Framework
• معرفی و بررسی تاریخچه BootStrap در یک سند HTML
• معرفی Grid System
• معرفی Media Query
• معرفی انواع سایزها و کلاسهای مرتبط و روش تشخیصResolution کاربر
• معرفی انواع Layout ها و کلاسهای مرتبط مانند Fluid Layout
• معرفی Fixed Layout
• معرفی Responsive Layout
• بررسی Typography با BootStrap
• بررسی روش ایجاد فرم و کلاسهای مرتبط
• بررسی روش پنهان سازی بخش هایی از سند
• بررسی نکات و کلاسهای مرتبط با جدول
• بررسی نکات و کلاسهای مرتبط با تصاویر
• بررسی روش استفاده از Icon ها
• بررسی روش استفاده از Helper ها
• بررسی نکات. کلاسهای مرتبط با دکمه
• بررسی ارائه مثال از موارد زیر:
• Dropdowns
• Button groups
• Button Dropdowns
• Input groups
• Navs
• Navbar
• Breadcrumbs
• Pagination
• Labels
• Badges
• Jumbotron
• Page header
• Thumbnails
• Alerts
• Progress bars
• Media object
• List group
• Panels
• Wells