حان وقت الإنتقال إلى التمرين التالي
في هذا التمرين، سوف نتعامل مع الصور،
وكيف نقوم بتضمين الصور في صفحات الويب الخاصة بنا،
وكيف يمكننا الاستفادة من كائن الوسائط في صفحة الويب الخاصة بنا.
كخطوة أولى،
انتقل إلى تعليمات التمرين وتحميل ملف image.zip،
ثم حفظه إلى مجلد الارتباك الخاص بك.
ثم فك ضغط الملف للحصول على مجلد اسمه، إمغ،
وداخل ذلك سوف تجد
بعض الصور التي نحن ذاهبون للاستفادة من في هذا التمرين.
جميع الصور بتنسيق png في هذا المجلد.
نحن الآن في طريقنا إلى العمل لإضافة بعض الصور إلى الصفحة.
أولا، دعونا نضيف في الشعار لمطعمنا.
لذا، انتقل إلى صفحة index.html، في Jumbotron،
سترى div الثاني هنا حصلت على col-sm.
لذلك، نحن ذاهبون لإصلاح ذلك عن طريق إضافة إلى هذا div،
ومحاذاة مركز الذات لهذا div.
الآن، إلى هذا div،
سنقوم بإضافة صورة.
لذلك، اسمحوا لي أن استخدام الصورة مع المصدر، img.
لقد وضعنا بالفعل مجلد الصور الذي يحتوي على الصور في مشروعنا.
لذلك، من هناك، وسوف أضيف ملف logo.png كصورة هنا.
بالإضافة إلى ذلك، سأقوم بإضافة الطبقة كسائل صورة،
بحيث تكون هذه الصورة تستجيب تلقائيًا وتتكيف مع حجم الشاشة.
دعونا حفظ التغييرات.
سنقوم بتطبيق نفس التغيير على كل من صفحة aboutus.html،
وكذلك صفحة contactus.html في Jumbotron.
الآن، عندما تلقي نظرة فاحصة
على صفحة الويب الخاصة بك، ستجد أنه في Jumbotron،
مباشرة بعد هذه الصياغة،
سترى الصورة لمطعم لدينا المدرجة هناك.
بعد ذلك، سنذهب إلى شريط التنقل،
ثم حيث لدينا هذا للعلامة التجارية navbar،
سأقوم باستبدال هذه الكلمات للمطعم بالشعار المقابل.
لذلك، هذه الكلمات أنا ذاهب لاستبدال ذلك مع img،
والمصدر هو logo.png.
بالإضافة إلى ذلك، سأقوم بتحديد سمة ارتفاع 30،
وسمة عرض 41 لهذا الشعار.
هذا الحجم مناسب للعلامة التجارية navbar هناك.
لذلك، دعونا حفظ التغييرات.
أنا ذاهب للذهاب وإجراء نفس التغيير في صفحة aboutus.html،
وأيضا صفحة contactus.html.
مع إلقاء نظرة على صفحة الويب الآن،
سترى الآن تم استبدال اسم المطعم
مع شعار المطعم في حجم صغير هناك.
ترى الآن أنه عند الانتقال إلى صفحة حول،
سترى الصورة التي يتم تضمينها هناك،
وبالمثل في صفحة جهة الاتصال،
سترى أن الصورة قد تم تحديثها مرة أخرى إلى الصفحة الرئيسية.
الآن، ما سنقوم به،
هو استخدام كائن وسائط بدلا من هذه الأوصاف التي لدينا هنا،
ومن ثم استخدام كائن الوسائط لاستبدال
هذه مع الوصف وأيضا صورة ليتم تضمينها.
وهذا يعطي رؤية أفضل لصفحتنا على شبكة الإنترنت.
لذا، دعونا نمضي قدما ونقوم بهذا التغيير.
للاستفادة من كائن الوسائط في صفحة index.html الخاصة بنا،
سنذهب إلى الصف الأول من المحتوى هنا.
ثم هناك في div الثاني،
سأقوم بتقديم ديف جديد مع وسائط الفصل،
وأرفق المحتوى داخل هذا div هناك،
وإغلاق div.
الآن، داخل هذا div،
سأقوم بتقديم صورة لاستخدامها هناك.
هنا أذهب وأقول فئة الصورة،
ومن أجل استخدام صورة في كائن وسائل الإعلام،
ونحن بحاجة إلى تطبيق بعض الطبقات الإضافية ذات الصلة المرن هنا،
لذلك أنا تطبيق د فليكسس، ثم mr-3.
لذلك، M يعني الحق الهامش مع رقم 3.
وهذا يعطي هامش كاف على يمين هذه الصورة،
بحيث يتم تعيين الوصف قليلا بعيدا عن الصورة في صفحة الويب.
ثم سأستخدم الصورة المصغرة لهذه الصورة،
ثم استخدم أيضًا محاذاة المركز الذاتي للصورة،
ثم اكتب مصدر الصورة، وهو img،
ويمكنك
البحث عن اسم الصورة في مجلد img،
ودعني أعطيه بديلاً هناك،
وأغلق الصورة.
سيشمل هذا الآن الصورة في كائن midi الخاص بي.
بالإضافة إلى ذلك، سأقوم بإنشاء جسم الوسائط لهذه الصورة
بقول هيئة وسائط div class،
ثم أرفق هذا h2 و p الذي يحتوي على الوصف داخل هذا div هناك.
لذا، دعني أضع مسافة بادئة للمحتوى هناك،
ثم أغلق هذا div هنا.
مع ذلك، وصفي مغلق داخل هيئة الإعلام.
بالإضافة إلى هذا h2،
أنا ذاهب لتقديم فئة كما مت-0.
مع هذا، يقول هذا الصف الهامش أعلى الصفر.
سيتم محاذاة هذا العنوان إلى أعلى كائن الوسائط هذا هنا.
مع هذه التغييرات، دعنا نحفظ التغييرات
ثم نلقي نظرة سريعة على صفحة الويب الخاصة بنا.
الذهاب إلى صفحة الويب الخاصة بنا،
ستلاحظ على الفور التغيير في صفحة الويب.
يمكنك الآن أن ترى أن هناك موضع صورة هنا،
ومن ثم
تم وضع الوصف الذي كان في وقت سابق في هذا الموقع بشكل صحيح هنا.
تباين هذا مع الصفين المتبقيين،
وتبدأ الآن في معرفة كيف يساعدنا كائن الوسائط على
تحويل ذلك إلى شيء أكثر حيوية.
سأفعل نفس الشيء إلى الصف الثالث هنا.
سيتم ترك الصف الثاني كممارسة لك في المهمة.
الذهاب إلى هذه التدريبات الثالثة،
وأنا ذاهب لتطبيق تغيير مماثل لهذا الصف الثالث لتقديم كائن وسائل الإعلام هنا.
اسمحوا لي أن أعرض كائن الوسائط هناك،
ثم إلى هذا div،
انتقل إلى كائن الوسائط،
ثم أعرض الصورة التي سأستخدمها هنا.
يمكنني استخدام الطبقة كما d-flex mr-3.
إذا كنت تقوم بوضع الصورة على الجانب الأيمن،
فأنت بحاجة إلى إعطاء هامش كـ ml-3 لذلك.
بالإضافة إلى ذلك، سأقوم بإضافة فئة الصورة المصغرة إلى هذا،
ثم أقول أيضًا، محاذاة المركز الذاتي.
هذه هي الطبقات التي سأقوم بإضافتها إلى هذه الصورة.
وبعد ذلك، دعونا نحدد مصدر هذه الصورة،
img و alberto.png، ثم سأحدد البديل.
وبعد ذلك، هذا h2 و h4 و p،
أنا ذاهب لإغلاقها داخل div وسائل الإعلام هنا،
وإغلاق div الجسم وسائل الإعلام.
لقد أكملنا الآن كائن الوسائط في الصف الثالث.
دعونا حفظ التغييرات،
ثم انتقل ونلقي نظرة على صفحة الويب الخاصة بنا بعد ذلك.
الآن، مع إلقاء نظرة على صفحة الويب الخاصة بنا،
ستلاحظ أن لدينا وصف الطبق هناك.
الآن، إذا انتقلت إلى الصف الثالث،
سترى الآن كيف تم أيضًا إعادة تعريف الصف الثالث.
لاحظ استخدام الوسائط اليسار،
مما يعني أن الصورة يتم وضعها على الجانب الأيسر في كائن الوسائط هذا،
ثم صفحة الوسائط الوسطى تضع الصورة في منتصف الوصف.
يمكنك أيضًا استخدام أعلى الوسائط وأسفل الوسائط،
لمحاذاة الصورة إلى أعلى وأسفل هذا الوصف.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، نظرنا إلى استخدام الصور وكائن الوسائط في صفحة الويب الخاصة بنا.
هذا هو الوقت المناسب، مرة أخرى،
للقيام بتعليق جيد،
مع الرسالة والصور ووسائل الإعلام.