illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



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

دوره مجازی طراحی وب (جلسه 24): طراحی وب واکنشگرا، آشنایی با pureCSS و بوت استرپ

69 11840 ۲۳ اسفند ۹۳
در این جلسه از دوره طراحی وب به آموزش طراحی وب واکنشگرا (responsive) به شکل کاملا اصولی و پایه ای خواهیم پرداخت و روش و فرایند اصولی برای واکنشگرا کردن یک قالب و صفحه وب  رو تدریس خواهیم کرد . پس از آن با انجام یک پروژه عملی قالب مربوط به جلسه 19 رو کاملا واکنشگرا خواهیم کرد که در ابزارهای موبایل هم ظاهر مناسبی داشته باشه . بعد از انجام پروژه هم با فریم ورک های PureCSS و BootStrap آشنا خواهیم شد.

دموی پروژه این جلسه : قالب رسپانسیو شده پروژه جلسه 19

عموم مطالب مطرح شده در این جلسه عبارتند از :
  • تشریح و توضیح در مورد طراحی وب واکنشگرا
  • مقایسه دو روش پیاده سازی وب سایت ها برای ابزار موبایل
  • مزیت ها و معایت دو روش موجود
  • تشریح مفهوم media query ها و نحوه استفاده از آنها
  • انتخاب عرض های مناسب و مختلف برای مدیا کوئری ها و شروع طراحی واکنشگرا
  • ذکر چند مثال از نحوه کدنویسی واکنشگرا
  • تشریح دو روش مختلف واکنشگرا نمودن صفحات وب
  • تشریح و آموزش گام به گام مراحل واکنشگرا نمودن قالب های مختلف
  • پروژه واکنشگرا : واکنشگرا نمودن قالب جلسه 19 دوره به صورت کامل
  • استفاده از جاوااسکریپت و جی کوئری برای واکنشگرا کردن منوی بالای سایت
  • آشنایی با فریمورک PureCSS و قابلیت ها و امکانات آن
  • آشنایی با فریمورک بوت استرپ و قابلیت ها و امکانات آن
این مطلب یک جلسه از کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : به جای صرف هزینه های چند صد هزارتومانی برای یادگیری طراحی وب ، تنها با 30% هزینه ی کلاس های حضوری، دوره ی کامل و حرفه ای آموزش طراحی وب را برای شما عزیزان برگزار کرده ایم. در این دوره مفاهیم اساسی و پایه ای طراحی وب مطرح خواهد شد و زبان های HTML5 و CSS3 با جزئیات کامل و به صورت کاملا عملی و کاربردی تدریس می شود. وجه تمایز و مزیت این دوره نسبت به دوره های مشابه، کاربردی بودن آن است. در این دوره مواردی مانند آموزش طراحی قالب متناسب با سئو، آموزش طراحی وب واکنشگرا (Responsive)، آموزش تبدیل قالب فتوشاپی به صفحه وب، آموزش ترجمه و فارسی سازی قالب های خارجی، آموزش طراحی قالب برای سیستم های وبلاگدهی (بلاگفا و میهن بلاگ) به صورت کاملا عملی، از پایه تا پیشرفته توسط مدرسی با تجربه 10 ساله طراحی وب و دانشجوی دکترای نرم افزار برای شما به صورت کاملا اصولی و عملی تدریس می شود. شما برای این حجم مطالب آموزشی فقط یک سوم کلاس های حضوری هزینه می کنید! ما رضایت شما را تضمین خواهیم کرد ...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 69 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۷ اردیبهشت ۱۳۹۴)

      در مجموع سایت رسپانسیو و داشتن یک طراح برای همه دستگاه ها بهتر هست از نظر بنده .

      • ‏‏

        ممنون از پاسخگوی تون استاد
        به عنوان آخرین سوال امشب 😀
        در ویدیو نگفتین که چگونه منو های تو در تو رو رسپانسیو کنیم ؟
        اگر ساده هست و با متن گفته میشه همینجا بگید و اگر نمیشه و با جاوااسکریپت و جی کوئری ساخته میشه لطف نموده در دوره جاوا اسکریپت یاد آوری کنید.
        با عرض معذرت که امشب خیلی سوال کردم 😯

        • ‏‏
          لقمان آوند(۲۷ اردیبهشت ۱۳۹۴)

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

  • ‏‏
    amir rahimi morad(۱۷ خرداد ۱۳۹۴)

    سلام خسته نباشید من سایت زدم به نام www.persian-titan.ir وقتی تو pc با مرورگر کروم تست میکنم و کوچیک میکنم page و respomsive میشه اما وقتی با تبلت مستقیم وصل میشم و تست میکنم همچین اتفاقی نمیوفته همه جوره چک کردم محیط و اما واقعا گیج شدم ..
    ممنون میشم کمکی نکته ای چیزی هست کمکم کنید

  • ‏‏
    مازیار(۲۵ خرداد ۱۳۹۴)

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

  • ‏‏
    جعفر پیشدادی(۸ تیر ۱۳۹۴)

    با سلام….راست چین نمودن قالبی که از بوت استرب وفایل css استفاده نموده به چه صورت انجام می گیرد..مراحل

  • ‏‏
    زمان الله ابراهیمی(۱۱ تیر ۱۳۹۴)

    باسلام خسته نباشید استاد آوند فقد یک سوال یا یک درخواست از شما دارم
    من تازه یک قالب طراحی کردم میخواهم منوی بالا مثل منوی شما با شه یعنی فکس باشه وهم
    responsive با شه و قتی صفحه کوچک میشه منوی ها تو در تو مثل منوی سون لرن باشه
    اگه راهنمایی کنید خیلی ممنون میشم یا یک کد بدید که توی قالب بزارم خیلی نیاز دارم
    ممنون میشم که یک کد آماده بدید با تشکر از شما :roll:

    • ‏‏
      وحید صالحی(۱۱ تیر ۱۳۹۴)

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

      • ‏‏
        زمان الله ابراهیمی(۱۱ تیر ۱۳۹۴)

        آقای صالحی عزیز ممنون که جواب دادید توی دوره بوت استریپ شما همچین منوی در نظر دارید که آموزش بدید خیلی ممنون ❓ ❓

        • ‏‏
          وحید صالحی(۱۱ تیر ۱۳۹۴)

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

  • ‏‏
    فرهاد(۳ مهر ۱۳۹۴)

    استاد این دکمه هایی که در بالای صفحه ثبت نام دوره ها در سون لرن هست، (دکمه هایی که مثلا نام مدرس رو نوشته و شهریه و این ها) برای استایل دهیشون از چه فریم ورکی استفاده شده؟ اون طور که من توی سورس کد صفحه دیدم ظاهرا با فریم ورک foundation ایجاد شده اما من در مستندات فریم ورک foundation خیلی نگاه کردم دکمه هایی با چنین شکل هایی متاسفانه ندیدم. برای شکل دهی به این دکمه ها چیکار کردید میشه یه مقدار توضیح بدید؟ با تشکر

    • ‏‏
      لقمان آوند(۱۳ مهر ۱۳۹۴)

      سلام
      اون دکمه های کدهای پایه ایشون در فاندیشن هست و البته ما کلی شخصی سازی کردیم و اونا رو تغیر دادیم . خوب کدهای css جدید نوشتیم و روی اونها اعمال کردیم. چیز پیچیده ای که نیست .

  • ‏‏
    Alireza Sajedi(۲۳ مرداد ۱۳۹۵)

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

  • ‏‏
    Alireza Sajedi(۳ شهریور ۱۳۹۵)

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

  • ‏‏

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

  • ‏‏
    Mohammadali Khoo(۱۱ مهر ۱۳۹۵)

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

    • ‏‏
      وحید صالحی(۱۱ مهر ۱۳۹۵)

      مشکل شما احتمالا مربوط به مدیا کوئری هست که برای اسکرین های کوچک طراحی و کدنویسی کردید طبق آموزش ها پیش برید مشکلی نخواهد بود و قالبتون درست نمایش داده خواهد شد…

  • نکته : برای پاسخگویی سریعتر و بهتر، بخش نظرات این مطلب مختص پرسش و پاسخ های کاربران ثبت نامی در دوره ی کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است .
    اگر قبلا در این دوره ثبت نام کرده اید پس از ورود به سایت می توانید تمامی پرسش و پاسخ ها و نظرات مطرح شده ی این مطلب را مشاهده و اگر سوالی دارید در همینجا مطرح کنید.

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram