قیمت این دوره : رایگانــ
  • مدرس دوره : فرزاد معصومی ( رزومه )
  • تعداد دانشجویان این دوره : 1,726 نفر
  • تعداد ویدیوها : 7 ویدیو
  • مدت زمان دوره : 1:42:00
  • سطح دوره : متوسط
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1399/04/18

آموزش ریسپانسیو سازی صفحات وب

سلام به دوره طراحی سایت ریسپانسیو  در تاپلرن خوش اومدین

 

سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که با ابعاد و رزولوشن دستگاههای مختلف سازگاری دارد و  

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

تبلت)  و یا نمایشگرهای بزرگ (کامپیوترهای رومیزی و ال سی دی های بزرگ)داشته باشند،  

میتوانند به راحتی سایت را بررسی کنند و دیگر نیازی نیست اندازه صفحه را تغییر دهند که سایت به صورت کامل دیده شود.

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

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

شود. با توجه به مورد مطرح شده وجود سایت ریسپانسیو(واکنش گرا) برای سایت ها امری لازم و ضروری میباشد.

مزایای سایت های ریسپانسیو:

-سازگاری با همه سایزهای نمایشگرهای مختلف مانند موبایل، تبلت و لپ تاپ و . . .

-نمایش مناسب سایت در طیف وسیعی از مرورگر های جدید و قدیمی

-انعطاف پذیری بالا و کارآمد

-رتبه بهتر و بالاتر در گوگل

-افزایش قدرت سئو سایت (به دلیل پوشش همه کاربران)

-افزایش بازدیدکنندگان سایت

-محبوبیت بیشتر در بین موتور های جستجو

 

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

با من همراه باشید.

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

فهرستـــ ویدیوها

مدت زمان دوره 02:00:30
راهنما ! جهت دریافت لینک دانلود تمامی قسمت ها بر روی این لینک .کلیک کنید.
1
  • معرفی دوره

  • 00:09:00
  • رایگانــ

معرفی دوره

2
  • اضافه کردن viewport به پرونده html

  • 00:05:30
  • رایگانــ

viewport قسمتی از صفحه وب ما است که کاربر در حال تماشای آن میباشد ما در این ویدیو با آن آشنا خواهیم شد و نحوه وارد کردن آن به فایل html خود را یاد میگیریم ممنون از همراهی شما.

3
  • media query چیست و چگونه باید استفاده کنیم

  • 00:09:00
  • رایگانــ

یکی از ویژگی های media query به ما اجازه میدهد که با توجه به عرض صفحه نمایش بتوانیم شرط گذاری کنیم و تغییرات در استایل وب سایت به وجود آوریم در این ویدیو راجب media query و روش استفاده از آن را با یک مثال توضیح میدهیم

4
  • قالب نخست - ریسپانسیو سازی nav - بخش اول

  • 00:21:30
  • رایگانــ

در این ویدیو شروع به ریسپانسیو میکنیم قالب اول را دانلود کنید تا با هم بخش nav را ریسپانسیو کنیم قسمت بعدی به صورت کامل این بخش را تکمیل میکنیم.

5
  • قالب نخست - ریسپانسیو سازی nav - بخش دوم

  • 00:26:00
  • رایگانــ

در این ویدیو قسمت nav خود را به صورت کامل پیاده سازی میکنیم ما با استفاده از jquery و کمک گرفتن از این کتابخانه قسمت nav را به صورت انیمیشن پیاده خواهیم کرد.

6
  • قالب نخست - ریسپانسیو سازی کامل هدر

  • 00:11:30
  • رایگانــ

در این قسمت میایم و بخش هدر خودمون رو کامل ریسپانسیو میکنیم و بخش هدر که nav هم بخشی از اون بود رو به پایان میرسونیم

7
  • قالب نخست - ریسپانسیو سازی بخش our-story

  • 00:20:00
  • رایگانــ

در این ویدیو میریم سراغ دومین سکشن از قالب خودمون سکشن our-story رو در این ویدیو به صورت کامل ریسپانسیو میکنیم پس بیاین با هم شروع کنیم.

نظرات کاربران در رابطه با این دوره

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .