قیمت این دوره : رایگانــ
  • مدرس دوره : فرزاد معصومی ( رزومه )
  • تعداد دانشجویان این دوره : 4,306 نفر
  • تعداد ویدیوها : 20 ویدیو
  • مدت زمان دوره : 4:33:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1399/05/12

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

مدت زمان دوره 04:33:39
در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.
راهنما ! جهت دریافت لینک دانلود تمامی قسمت ها بر روی این لینک .کلیک کنید.
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 رو در این ویدیو به صورت کامل ریسپانسیو میکنیم پس بیاین با هم شروع کنیم.

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

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

ما در این قسمت سکشن sweet رو ریسپانسیو میکنیم البته قبل از اون ایرادی در قالب رو برطرف میکنیم که قالب کاملا بدون مشکل باشه, پس بیاین شروع کنیم.

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

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

توی این ویدیو میریم و بخش بعدی رو ریسپانسیو میکنیم , یعنی بخش menu پس بیاین و شروع کنیم

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

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

در این ویدیو بخش بعدی که hot هست رو ریسپانسیو میکنیم و کم کم داریم به تموم کردن کار ریسپانسیو این تم میرسیم

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

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

خب بریم سراغ یکی از آخرین بخش های این قالب یعنی بخش delight , چیز سختی نیست پس بیاین تمومش کنیم

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

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

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

13
  • توضیحات دوره و نمایش قالب دوم

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

یکم راجب دوره حرف بزنیم

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

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

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

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

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

خب ما در این ویدیو قسمت nav خودمون رو بیشتر جلو میبریم و در ویدیو بعد این قسمت رو تموم میکنیم

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

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

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

17
  • قالب دوم - ریسپانسیو سازی big section

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

در این ویدیو میریم و big section رو ریسپانسیو میکنیم

18
  • قالب دوم - ریسپانسیو سازی newsletter و toplearn

  • 00:15:39
  • رایگانــ

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

19
  • قالب دوم - ریسپانسیو سازی team و teams

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

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

20
  • قالب دوم - ریسپانسیو سازی footer - پایان فصل اول

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

خب توی این ویدیو footer خودمون رو ریسپانسیو میکنیم و فصل اول این دوره اینجا به پایان میرسه

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

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