لقد حان الوقت لمهمتك الأولى في هذه الدورة.
في المهمة الأولى،
سنقوم بتزويدك بصفحة aboutus.html unstyled.
يتوفر لك ملف zip الذي يحتوي على صفحة aboutus.html هذه في تعليمات التعيين.
لذلك تحتاج إلى تنزيل الصفحة ثم نقل تلك الصفحة إلى مجلد con Fusion الخاص بك.
بعد ذلك، ستقوم بتطبيق
فئات Bootstrap وشبكة Bootstrap Flexbox على نمط الصفحة،
ثم تقوم بنقل الصفحة إلى مجلد Con Fusion،
ثم يمكنك عرض الصفحة في المتصفح الخاص بك عن طريق كتابة
localhost:3000/aboutus.html والخادم الخفيف الخاص بك بناء صفحة aboutus.html،
لذلك هذه هي الطريقة الوحيدة التي يمكنك من خلالها عرض الصفحة.
لذا بادئ ذي بدء،
ستبدو الصفحة هكذا،
صفحة Unstyle بالكامل تحتوي فقط على محتوى.
الآن عملك هو الذهاب من خلال ثلاث مهام من أجل تنسيق هذه الصفحة.
دعونا ننظر إلى المهام الثلاث بمزيد من التفصيل.
مهمتك الأولى هي تطبيق
Bootstrap CSS وفئات Javascript على
صفحة aboutus.html بحيث يتم تحويل هذه الصفحة على الفور إلى هذه الصفحة،
حيث بمجرد إضافة فئات Bootstrap CSS و JavaScript،
سيتم تنسيق رأس وتذييل الصفحة تلقائيًا بشكل صحيح،
لأنني قمت ببساطة بنسخ الرأس في التذييل من صفحة index.html إلى
هذه الصفحة وتركت كل تنسيق Bootstrap على هذا النحو،
ولكن لا يزال يتم ترك المحتوى الفعلي للصفحة بدون نمط.
حتى الآن، كمهمة ثانية،
ستقوم بتطبيق شبكة Bootstrap Flexbox بما
في ذلك الحاوية والصفوف وفئات العمود إلى
هذا المحتوى أو الصفحة بحيث يمكنك نمط بشكل صحيح.
الآن، عند تطبيق الفصول الدراسية،
ستقوم بتطبيق فئات الصف والعمود على aboutus لمجرد تركها على هذا النحو.
ثم ستقوم بتطبيق فئات الصف والعمود على
هذا المحتوى بحيث يشغل هذا المحتوى نصف الشاشة فقط،
ثم ستقوم بتطبيق فئات الصف والعمود على
هذا المحتوى بحيث تحتل عرض الشاشة بالكامل.
لذلك، اختر فئات الصف والعمود بشكل صحيح لتطبيقها على هذا.
يمكنك استخدام فئات CSS المخصصة التي قمنا
بتنفيذها بالفعل لـ index.html عن طريق إضافة ملف style.css،
أيضًا لنمط المحتوى في هذه الصفحة.
لذلك عند إكمال المهمة الثانية،
ستنتهي صفحتك على غرار هذا.
حتى تتمكن من رؤية أن صفحة Aboutus موجودة في تلقاء نفسها.
ثم جزء تاريخنا،
لاحظ أنه على حجم الشاشة الصغيرة إلى الكبيرة،
سيشغل تاريخنا نصف عرض الشاشة فقط.
ثم يشغل جزء قيادة الشركات عرض الشاشة بالكامل في هذه الحالة.
هذه هي المهمة الثانية التي تحتاج إلى إكمالها في مهمتك.
بالنسبة للمهمة الثالثة كما ترون،
يبدو تخطيط المحتوى هذا جيدًا لأحجام الشاشة الأكبر،
ولكن عندما تذهب إلى حجم الشاشة الصغيرة جدًا خاصةً مثل هذا،
تلاحظ أن المحتوى أكثر من اللازم في هذا القسم.
لذلك ما نود القيام به هو استخدام فئة Bootstrap أخرى مقدمة لنا تسمى،
[غير مسموع] وكتلة DSM.
هناك رابط للفئات المستجيبة في موارد التعيين،
بحيث يمكنك التحقق من وثائق كتلة [غير مسموع] و DSM.
تحتاج إلى تطبيق تلك بحيث يتم
إخفاء هذا الوصف في أحجام الشاشة الصغيرة الإضافية.
لذلك عندما كنت الطبقات إلى هذا الجزء قيادة الشركات،
سيتم الآن وضع نفس المحتوى من دون وصف،
لذلك سوف تكون مخفية في حجم شاشات صغيرة إضافية.
ولكن عندما تذهب إلى صغير حجم الشاشة الكبيرة،
فإن المحتوى تصبح مرئية.
لذلك يمكنك ملاحظة أنه بالنسبة لحجم الشاشة الصغيرة الإضافية،
يتم إخفاء المحتوى،
ولكن بالنسبة لحجم الشاشة الصغيرة،
سيتم عرض محتوى الوصف بوضوح.
إذن هذه هي مهمتك الثالثة في مهمتك
أثناء وجودك في ذلك، يمكنك أيضًا تطبيق نفس الفئات على
الأوصاف في صفحة index.html الخاصة بنا بحيث
يتم أيضًا إخفاء الأوصاف التفصيلية لعناصر المحتوى في
صفحة index.html عند عرضها على أحجام شاشة صغيرة إضافية.
هذا يكمل مهمتك الأولى.
أيضا، عند إرسال مهمتك،
يرجى أخذ لقطة شاشة صفحة كاملة من التخطيط الخاص بك
سواء في
حجم الشاشة الصغيرة أو الكبيرة جدا وأيضا على حجم الشاشة الصغيرة جدا،
ومن ثم تضمين ذلك كجزء من التقديم الخاص بك.
لالتقاط لقطة شاشة صفحة كاملة في Chrome،
يمكنك استخدام إضافة Chrome المتوفرة لنا،
ويتم توفير الرابط إلى إضافة Chrome
في موارد المهمة التي تتبع وصف المهمة.
بعد إكمال مهمتك،
في حالة حفظ تغييراتك على مستودع Git، من
فضلك لا تنس الالتزام بالتغييرات على
مستودع Git الخاص بك باستخدام رسالة تعيين واحد.