التقنية رقمية 2
الوحدة الثالثة: البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي
الدرس الأول: التصميم المستجيب للمواقع الإلكترونية
التصميم المستجيب للمواقع الإلكترونية - التقنية رقمية 2 - ثاني ثانوي
القسم الأول
الوحدة الأولى: علم البيانات
الوحدة الثانية: الذكاء الاصطناعي
الوحدة الثالث: البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي HTML
القسم الثاني
الوحدة الأولى: التصميم الرسومي
الوحدة الثانية: التسويق الإلكتروني
الوحدة الثالثة: البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي
البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي
أهداف التعلم من الوحدة الثالثة
التصميم المستجيب للمواقع الإلكترونية
تنظيم مقطع Html
الموقع الإلكتروني المستجيب
مزايا الموقع الإلكتروني المستجيب
التصميم المستجيب
إطار العرض
إستخدام عنصر إطار العرض في صفحة مشجعي كرة القدم التي أنشأتها سابقاً
محاكاة الأجهزة في مايكروسوفت إيدج
لفتح أداة المحاكاة في مايكروسفت إيدج
إضهار المساطر
اختيار الأجهزة التي تتم محاكاتها
إستعلام الوسائط
استعلام الوسائط في ملف خارجي
تنسيق الصور
إطار عرض سريع
عرض الإطار 900 بكسل
عرض الإطار 700 بكسل
تنسيق قسم القائمة
إنشاء تنسيق مستجيب لعناصر القائمة
إطار عرض واسع
عرض إطار العرض أكبر من 700 بكسل
عرض إطار العرض أقل من 700 بكسل
أضف إلى المقطع البرمجي HTML التالي: وسم <meta> لإطار العرض لضبط عرض محتوى الصفحة الإلكترونية على عرض شاشة كل جهاز
هل هذه صفحة إلكترونية مسستجيبة؟
ما المزايا التي تقدمها الصفحة الإلكترونية هذه مقارنة بالصفحة الإلكترونية الخاصة بكود html الأولى؟
أضف إلى الجزء التالي من المقطع البرمجي استعلام الوسائط لتغيير لون الخلفية إذا كانت الشاشة أصغر من 600 بكسل
نسق الجزء التالي من المقطع البرمجي لقسم div عن طريق التالي
افترض أنك أضفت صورة إلى الموقع الإلكتروني الخاص بك وعليك تنسيق المقطع البرمجي وضبط عرض الصورة ليكون 150 بكسل وارتفاعها 100 بكسل وخاصية نصف قطر الإطار (border-radius) لتكون 5 بكسل
في المقطع البرمجي HTML التالي استخدم صفحة الأنماط الداخلية لتحرير المقطع البرمجي بحيث يغير لون الخلفية إلى الون الوردي الفاتح عندما تكون نافذة المتصفح 600 بكسل وأقل
