تخفیف ویژه همین الان — دوره‌های تخفیف‌دار را ببینید.
روز
:
ساعت
:
دقیقه
:
ثانیه
تخفیف‌های ویژه
دوره آموزشی ایجاد یک طراحی وب سایت واکنش گرا

دوره آموزشی ایجاد یک طراحی وب سایت واکنش گرا

3 ساعت 48 دقیقهمبتدی2015-11-09

مدرسین

Chris Converse

Chris Converse

Applies design and UX principles to technology

جزئیات دوره

یاد بگیرید که چگونه طراحی وب واکنش‌گرا (Responsive Web Design) را به کار ببرید تا وب‌سایت شما در تمام دستگاه‌ها خوانا و کارآمد باشد. Chris Converse در این دوره تکنیک‌های خاص خود را برای ترکیب HTML و CSS در یک چیدمان تطبیق‌پذیر آموزش می‌دهد.

این آموزش از مرحله ابتدایی تا نهایی طراحی یک سایت را پوشش می‌دهد؛ از ایجاد صفحات HTML و کانتینرها گرفته تا استایل‌دهی برای نمایش در صفحه‌های کوچک، متوسط و بزرگ.

همچنین، یاد می‌گیرید که چگونه:
✅ منوی سایت را برای نمایش بهتر در موبایل تغییر دهید
✅ افکت‌های انیمیشنی به سایت اضافه کنید
✅ فهرست‌های نقطه‌دار را به منوهای تعاملی تبدیل کنید
✅ از Pseudo-Elements در CSS برای بهینه‌سازی طراحی استفاده کنید
✅ چیدمان صفحه را برای چاپ بهینه کنید تا جوهر و کاغذ کمتری مصرف شود

اهداف یادگیری:
برنامه‌ریزی برای طراحی چیدمان سایت
ایجاد ساختار HTML شامل کانتینرها، محتوا و لینک‌ها
طراحی و استایل‌دهی چیدمان سایت با CSS
ایجاد یک سیستم منو برای سایت
استایل‌دهی برای سربرگ‌ها، متن اصلی و فوترها
تغییر موقعیت لینک‌های ناوبری برای موبایل
تعویض تصاویر معمولی با گرافیک‌های رزولوشن بالا برای نمایشگرهای Retina
بهینه‌سازی محتوا برای چاپ

مهارت ها

Responsive Web DesignCSSWeb StandardsWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source

سرفصل ها

0. مقدمه

  • 01 - مقدمه ای بر این دوره
  • 02 - در مورد این دوره
  • 03 - شرایط و فناوری که ما پوشش خواهیم داد
  • 04 - آنچه برای تکمیل این دوره نیاز دارید
  • 05 - در مورد فایل‌های تمرین

1. آماده سازی محتوا و ساختار HTML

  • 06 - راه‌اندازی پروژه ما
  • 07 - استراتژی برای چیدمان ما
  • 08 - ایجاد کانتینرهای اصلی HTML
  • 09 - اضافه کردن محتوا به هدر
  • 10 - افزودن محتوا به قسمت اصلی
  • 11 - افزودن محتوا به قسمت اتمسفر
  • 12 - افزودن محتوا به قسمت نحوه انجام
  • 13 - اضافه کردن ناوبری
  • 14 - افزودن محتوای فوتر

2. ایجاد Style و Layout با CSS

  • 15 - وارد کردن فونت گوگل
  • 16 - تعریف سبک‌های متن اصلی
  • 17 - حالت دادن به عنوان و ظرف صفحه
  • 18 - استایل دادن به لوگو و آیتم قهرمان
  • 19 - ایجاد سبک دکمه
  • 20 - تنظیم یک ردیف سه ستونی
  • 21 - افزودن گرافیک به قسمت اصلی
  • 22 - پاکسازی شناورها با شبه عناصر
  • 23 - حالت دادن به بخش اتمسفر
  • 24 - حالت دادن به عناصر کنار بخش چگونه
  • 25 - استایل کردن عنصر blockquote بخش how-to
  • 26 - افزودن محتوا با شبه عناصر
  • 27 - حالت دادن به پاورقی

3. ایجاد یک سیستم منو با CSS

  • 28 - تغییر موقعیت ناو
  • 29 - سبک دادن به موارد و پیوندهای فهرست ناوبری
  • 30 - نمایش و مخفی کردن زیر منوهای nav
  • 31 - گزینه‌های سازگاری دستگاه برای nav
  • 32 - اضافه کردن فلش‌های نشانه

4. ایجاد تنظیمات چیدمان برای صفحه نمایش‌های بزرگ و متوسط

  • 33 - انجام تنظیمات جزئی برای نمایشگرهای بزرگتر
  • 34 - انجام تنظیمات برای نمایشگرهای بزرگ
  • 35 - انجام تنظیمات صفحه نمایش متوسط

5. ایجاد تنظیمات برای صفحه نمایش‌های کوچک

  • 36 - حرکت ناوبری برای نمایشگرهای کوچکتر
  • 37 - تنظیم لوگو و عناصر قهرمان
  • 38 - تنظیم مجدد قسمت‌های اصلی و جوی
  • 39 - تنظیم مجدد بخش چگونه
  • 40 - تنظیم مجدد مسیریابی
  • 41 - تنظیم فاصله ناوبری و پاورقی

6. ایجاد تنظیمات برای کوچکترین صفحه نمایش

  • 42 - تنظیمات برای هدر و قهرمان
  • 43 - تنظیم بخش چگونه
  • 44 - تنظیم پاورقی

7. ایجاد تنظیمات چیدمان و محتوا برای چاپ

  • 45 - استراتژی برای چاپ
  • 46 - پیوند دادن یک فایل CSS برای چاپ
  • 47 - راه‌اندازی سبک‌های پایه
  • 48 - تنظیم هدر
  • 49 - نمایش URL‌ها هنگام چاپ
  • 50 - بخش اصلی
  • 51 - بخش اتمسفر
  • 52 - تگ‌های img خود را با CSS تغییر دهید
  • 53 - حالت دادن به پاورقی
  • 54 - تنظیم شکستگی صفحه با CSS

نتیجه

  • 55 - بعدش چی

دوره های مرتبط

درباره ما

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

شماره تلفنکانال آپاراتپشتیبانی تلگرامکانال تلگرامپیج اینستاگرام

کلیه‌ی حقوق این سایت متعلق به لینداکده می باشد

قوانین و شرایط|حریم خصوصی

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal