چه دوره ای می خواهید یاد بگیرید؟

آینده خود را با دوره های آموزشی دانشجویار تضمین کنید

۵۷۱۷ ساعت فیلم تدریس شده است

بیش از ۵۰ هزار دانشجو

بیش از ۳۰۰ مدرس

صفحه نخست
رشته کامپیوتر
برنامه نویسی وب
آموزش CSS3
طراحی قالب responsive
دوره ی آموزش طراحی قالب واکنش گرا – Responsive – بخش دوم (آخر)
۲۳ نظر
بازدید : 5,460 بازدید
دوره ی آموزش طراحی قالب واکنش گرا – Responsive – بخش دوم (آخر)

عرض سلام و خسته نباشید به کاربران محترم دانشجویار ، در خدمت شما عزیزان هستیم با دوره ی آموزش طراحی قالب واکنش گرا ، که بخش اولش رو قبلا در وبسایت منتشر کردیم ، این بخش از آموزش شامل ۱۲ قسمت هست و در ادامه ی ۱۰ قسمت اول طراحی قالب واکنش گرا ارائه شده ، در پایان این آموزش به این توانایی خواهید رسید که بدون استفاده از فریم ورک بوت استراپ و با استفاده از CSS یک قالب رو واکنش گرا کنید ، قالب های واکنش گرا جهت استفاده از وبسایت های شما در صفحات موبایل و … مورد نیاز می باشد.

جهت مشاهده و دانلود ۱۰ قسمت ابتدایی آموزش طراحی قالب واکنش گرا ، (بخش اول) اینجا کلیک کنید.

سرفصل ۱۲ قسمت بخش دوم ، آموزش طراحی قالب واکنش گرا ، در ادامه ی مطلب …

لینک دمو مجموعه آموزشی

قسمت ۱۱:
کار با transition ها در css
قسمت ۱۲:
آشنایی با border ها و ساخت یک محدوده دایره ای با خصوصیت border-radius در css
قسمت ۱۳:
کار با فونت ها و مبنای ان
font-size, font-family, line-height و …
تغییر فونت پیش فرض سایت و اضافه کردن فونت های دلخواه مثل فونت Yekan
قسمت ۱۴:
توضیح در مورد padding و border و تاثیر ان بر تغییر اندازه المان های درون صفحه و رفع این مشکل با استفاده از خصوصیت box:sizing
آشنایی خصوصیت viewport و تاثیرات ان در طراحی واکنش گرا
اشنایی مختصر با inspect element برای مشاهده کد صفحات از طریق مرورگر
ساخت بخش “درباره ما”
قسمت ۱۵:
ساخت بخش “تماس با ما”
آشنایی و استفاده از  تگ های input
اشنایی با خصوصیت های requierd , placeholder
اشنایی با خصوصیات max-width , min-width , …
قسمت ۱۶:
مقدمه و شروع بخش طراحی واکنش گرا
آشنایی با MediaQuery و انواع آن
قسمت ۱۷:
شروع کدنویسی برای طراحی واکنش گرا
آشنایی با مباحث مهم و اولیه
کار با MediaQuery های print, screen, all
کار با روشهای مختلف استفاده از mediaQuery و مزایا و معایب آن
استفاده از ابزار Responsive Design View مرورگر Firefox
ساخت یک نمونه اولیه
قسمت ۱۸:
شروع عملی و کار با mediaquery ها و ساخت اولین break point
ریسپانسیو کردن بخش “توانایی ها” و “نمونه کارها”
قسمت ۱۹:
ریسپانسیو کردن بخش درباره ما
تبدیل واحد های پیکسلی به %
ساخت یک break point جدید
قسمت ۲۰:
ریسپانسیو کردن بخش اخر یا بخش تماس با ما
تبدیل واحد های پیکسلی به %
اصلاح بخش های دیگر
قسمت ۲۱:
ادامه کار و تغییرات قالب برای نقطه شکست های کوچک تر
قسمت ۲۲:
ریسپانسیو کردن منو و اصلاح نهایی قالب و اتمام کار

مطلب مفیدی برای شما بود ؟؟ پس به اشتراک بگذارید برای دوستانتان

دریافت کنید

15000 تومان
شرکت در در این دوره آموزشی
در صورتی که توضیحات نوشته، دموی آموزش و لینک های ارزیابی پاسخگوی سوالات شما در مورد این دوره آموزشی نمی باشد و نیاز به مشاوره بیشتری دارید لطفا این فرم را تکمیل کرده و در ساعات اداری منتظر تماس همکاران ما باشید.
  • *
  • *
  • *
  • *
  • در صورتی که توضیحات نوشته، دموی آموزش و لینک های ارزیابی پاسخگوی سوالات شما در مورد این دوره آموزشی نمی باشد و نیاز به مشاوره بیشتری دارید لطفا این فرم را تکمیل کرده و در ساعات اداری منتظر تماس همکاران ما باشید.

    پیام شما با موفقیت ثبت شد. در اولین فرصت با شما تماس گرفته خواهد شد.
    • مطالب مرتبط
    • دیگر آموزش های مرتبط با این مدرس
    • رزومه مدرس

    نظرات کاربران

    ۲۳
    • pourya
      پنج شنبه ۸ مرداد ۱۳۹۴ - ۲۲:۲۴

      سلام لینک دمو کار نمیکنه اگه میشه درستش کنیین تا ما هم ببینم اخر قالب چی میشه

    • حسین شیره جونی
      شنبه ۲۰ تیر ۱۳۹۴ - ۱۲:۲۰

      hl,cاموزش مفیدی بود اگه میشه اموزش parallax را هم بدید

    • saman
      چهارشنبه ۱۰ تیر ۱۳۹۴ - ۰۲:۱۳

      سلام خسته نباشید…من این آموزش رو خرید کردم هم قسمت یک و هم دو … درخواستم این بود که اگه میتونید ساخت یه css پیشرفته مثل طراحی های سایت csszengarden رو بزارید … به عنوان مثال css هایی مثل لینک زیر:
      http://www.csszengarden.com/216/
      که یک سری طراحی های پیچیده توش هست…!ممنون…!

    • حسین شیره جونی
      پنج شنبه ۴ تیر ۱۳۹۴ - ۱۶:۱۵

      سلام اقا من خریدم لینکاش بعضیاش دانلود میشه بعضیاش نه به ایمیلمم نیامده ایملیل:
      hosseinshirjoni@chmail.ir

      • هادی نیا
        سه شنبه ۹ تیر ۱۳۹۴ - ۲۳:۲۸

        سلام
        تست شد و لینک ها سالمن و مشکلی نداره ، لطفا مجدد تست کنین
        با تشکر

    • nashenas
      یکشنبه ۲۴ خرداد ۱۳۹۴ - ۱۳:۰۵

      سلام …

      من این آموزش رو خریداری کردم اما نمیدونم چرا لینک های دانلود برای من ایمیل نشدن …؟؟

      لطفا ی بررسی بکنید …

      این هم ایمیل من :

      cloner-47@hotmail.com

      • مدیر- تقی زاده
        یکشنبه ۲۴ خرداد ۱۳۹۴ - ۱۶:۵۲

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

        • nashenas
          یکشنبه ۲۴ خرداد ۱۳۹۴ - ۲۰:۳۱

          سلام …

          بنده باز هم موفق به دریافت نشدم ، اگر مشکل از ایمیله یک ایمیل دیگه بدم ؟؟

          shervin.sh3000@gmail.com

          ممنون ، یا حق …

          • مدیر- تقی زاده
            دوشنبه ۲۵ خرداد ۱۳۹۴ - ۰۰:۲۷

            سلام
            به صورت دستی و با ایمیل شخصی خودم به دو ایمیلتون ارسال کردم

            • nashenas
              دوشنبه ۲۵ خرداد ۱۳۹۴ - ۱۰:۵۸

              خیلی ممنون دریافت کردم …

    • بهنام
      یکشنبه ۱۳ اردیبهشت ۱۳۹۴ - ۱۳:۴۹

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

      خواهش میکنم چنین اموزش رو قرار بدید

    • یاشار
      یکشنبه ۶ اردیبهشت ۱۳۹۴ - ۰۱:۲۰

      سلام
      دو قسمت ۱۵ هزار تومان هست؟ یعنی ۲۲ قسمت ؟
      چند ساعت هست کل اموزش؟

      • مدیر- تقی زاده
        یکشنبه ۶ اردیبهشت ۱۳۹۴ - ۱۰:۱۷

        سلام
        خیر ، بخش دومش ۱۵ تومنه و کلش میشه ۳۰ تومن ، کل آموزش حدود ۱۰ ساعتی میشه

    • نعیمه
      پنج شنبه ۲۷ فروردین ۱۳۹۴ - ۱۶:۵۱

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

    • ارسلان
      یکشنبه ۲۳ فروردین ۱۳۹۴ - ۱۶:۵۲

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

      • SeyedMHM
        یکشنبه ۲۳ فروردین ۱۳۹۴ - ۱۷:۳۷

        سلام
        نظر لطفتونه
        کلیت کار همینه. فقط می مونه تجربه شما و یکسری نکات که تو پروژه های بزرگتر باهاش رو به رو خواهید شد. مثل کاهش درخواست ها از سرور، بهینه سازی کد، کاهش حجم و …

    • محمد
      یکشنبه ۲۳ فروردین ۱۳۹۴ - ۰۸:۴۲

      با سلام و عرض تشکر از زحمات شما
      سایتتون دو مشکل خیلی خیلی خیلی خیلی بزرگ و اساسی داره که بدجور تو پر کابر میزنه. اکثر افرادی که باهاشون صحبت کردم همین مشکل رو دارن.
      اول اینکه مطالب مرتبط با یک مطلب ، در زیر همون مطلب وجود نداره. مثلا اگر در بخش سی شارپ -> شی گرایی هستیم، خیلی بهتره که مطالب مرتبط با شی گرایی ، یا مطالب مرتبط با سی شارپ هم در زیر مطلب فعلی نشون داده بشن که کاربر با کلیک روی اونها بتونه به صفحاتشون بره.
      دوم اینکه آموزشهای سریالی سایتتون هیچ لینکی به هم ندارن. این کار خیلی قشنگ تر و کاربرپسندتر هستش. مثلا اگر در درقسمت دوم اموزش سی شارپ هستیم بهتره که در زیر مطلب دوتا لینک وجود داشته باشه که یکی به قسمت قبلی(قسمت اول) و یکی به قسمت بعدی (قسمت سوم) لینک بدن.
      اما یه مشکل دیگه هم در سایت دیده میشه که باعث سردگمی کاربر هستش و اون اینه که تقریبا شماره قسمت ها مشخص نیست . مثلا در تیتر یک پست نوشته آموزش x قسمت y . اما وقتی وارد میشی میبینی نوشته چهار قسمت دوم. به نظر میاد اگر هر قسمت در یک پست جدا منتشر بشه خیلی بهتر خواهد بود.
      با تشکر فراوان
      موفق باشید

    • الهام مجیدی
      شنبه ۲۲ فروردین ۱۳۹۴ - ۲۲:۱۵

      سلام
      من این بخش را خریداری کردم لطف میکنید لینکهای دانلود را به ایمیلم ارسال کنید؟؟

      • هادی نیا
        یکشنبه ۲۳ فروردین ۱۳۹۴ - ۱۷:۱۰

        سلام
        براتون ارسال شد.

    • ali
      جمعه ۲۱ فروردین ۱۳۹۴ - ۱۶:۰۱

      این قسمت اخره یا ادامه داره؟؟

      • SeyedMHM
        یکشنبه ۲۳ فروردین ۱۳۹۴ - ۱۷:۲۲

        بله دوست عزیز
        این بخش آخره

    • علی
      پنج شنبه ۲۰ فروردین ۱۳۹۴ - ۱۴:۳۵

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

    دوره های آنلاین دانشجویار

    دسته بندی

    تحصیلات تکمیلی

    رشته الکترونیک

    رشته کامپیوتر

    سایر دسته های دانشجویار

    سایر نرم افزارها

    کلاس آنلاین

    مدرسین

    تعداد دوره
    بر اساس امتیاز
    حروف الفبا
    • کد تخفیف :

      goldpack

      ویژه خرید پکیج طلایی (C#,ASP,PHP,Android,Network)
      60 درصد تخفیف

    مطالب سایت بر اساس

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