1
00:00:03,780 --> 00:00:07,090
حان وقت الإنتقال إلى التمرين التالي

2
00:00:07,090 --> 00:00:10,005
في هذا التمرين، سوف نتعامل مع الصور،

3
00:00:10,005 --> 00:00:13,660
وكيف نقوم بتضمين الصور في صفحات الويب الخاصة بنا،

4
00:00:13,660 --> 00:00:21,030
وكيف يمكننا الاستفادة من كائن الوسائط في صفحة الويب الخاصة بنا.

5
00:00:21,040 --> 00:00:23,240
كخطوة أولى،

6
00:00:23,240 --> 00:00:27,890
انتقل إلى تعليمات التمرين وتحميل ملف image.zip،

7
00:00:27,890 --> 00:00:34,550
ثم حفظه إلى مجلد الارتباك الخاص بك.

8
00:00:35,890 --> 00:00:42,360
ثم فك ضغط الملف للحصول على مجلد اسمه، إمغ،

9
00:00:42,360 --> 00:00:44,210
وداخل ذلك سوف تجد

10
00:00:44,210 --> 00:00:49,175
بعض الصور التي نحن ذاهبون للاستفادة من في هذا التمرين.

11
00:00:49,175 --> 00:00:53,115
جميع الصور بتنسيق png في هذا المجلد.

12
00:00:53,115 --> 00:00:58,785
نحن الآن في طريقنا إلى العمل لإضافة بعض الصور إلى الصفحة.

13
00:00:58,785 --> 00:01:02,310
أولا، دعونا نضيف في الشعار لمطعمنا.

14
00:01:02,310 --> 00:01:06,360
لذا، انتقل إلى صفحة index.html، في Jumbotron،

15
00:01:06,360 --> 00:01:11,130
سترى div الثاني هنا حصلت على col-sm.

16
00:01:11,130 --> 00:01:17,295
لذلك، نحن ذاهبون لإصلاح ذلك عن طريق إضافة إلى هذا div،

17
00:01:17,295 --> 00:01:24,030
ومحاذاة مركز الذات لهذا div.

18
00:01:24,030 --> 00:01:26,620
الآن، إلى هذا div،

19
00:01:26,620 --> 00:01:28,515
سنقوم بإضافة صورة.

20
00:01:28,515 --> 00:01:33,790
لذلك، اسمحوا لي أن استخدام الصورة مع المصدر، img.

21
00:01:33,790 --> 00:01:40,710
لقد وضعنا بالفعل مجلد الصور الذي يحتوي على الصور في مشروعنا.

22
00:01:40,710 --> 00:01:49,150
لذلك، من هناك، وسوف أضيف ملف logo.png كصورة هنا.

23
00:01:49,150 --> 00:01:58,140
بالإضافة إلى ذلك، سأقوم بإضافة الطبقة كسائل صورة،

24
00:01:58,140 --> 00:02:06,410
بحيث تكون هذه الصورة تستجيب تلقائيًا وتتكيف مع حجم الشاشة.

25
00:02:07,160 --> 00:02:09,634
دعونا حفظ التغييرات.

26
00:02:09,634 --> 00:02:14,810
سنقوم بتطبيق نفس التغيير على كل من صفحة aboutus.html،

27
00:02:14,810 --> 00:02:19,855
وكذلك صفحة contactus.html في Jumbotron.

28
00:02:19,855 --> 00:02:23,350
الآن، عندما تلقي نظرة فاحصة

29
00:02:23,350 --> 00:02:26,350
على صفحة الويب الخاصة بك، ستجد أنه في Jumbotron،

30
00:02:26,350 --> 00:02:29,210
مباشرة بعد هذه الصياغة،

31
00:02:29,210 --> 00:02:34,120
سترى الصورة لمطعم لدينا المدرجة هناك.

32
00:02:34,120 --> 00:02:36,905
بعد ذلك، سنذهب إلى شريط التنقل،

33
00:02:36,905 --> 00:02:41,750
ثم حيث لدينا هذا للعلامة التجارية navbar،

34
00:02:41,750 --> 00:02:47,915
سأقوم باستبدال هذه الكلمات للمطعم بالشعار المقابل.

35
00:02:47,915 --> 00:02:57,650
لذلك، هذه الكلمات أنا ذاهب لاستبدال ذلك مع img،

36
00:02:57,650 --> 00:03:03,280
والمصدر هو logo.png.

37
00:03:03,280 --> 00:03:13,750
بالإضافة إلى ذلك، سأقوم بتحديد سمة ارتفاع 30،

38
00:03:14,310 --> 00:03:20,950
وسمة عرض 41 لهذا الشعار.

39
00:03:20,950 --> 00:03:28,530
هذا الحجم مناسب للعلامة التجارية navbar هناك.

40
00:03:28,530 --> 00:03:30,330
لذلك، دعونا حفظ التغييرات.

41
00:03:30,330 --> 00:03:35,895
أنا ذاهب للذهاب وإجراء نفس التغيير في صفحة aboutus.html،

42
00:03:35,895 --> 00:03:39,745
وأيضا صفحة contactus.html.

43
00:03:39,745 --> 00:03:41,790
مع إلقاء نظرة على صفحة الويب الآن،

44
00:03:41,790 --> 00:03:44,900
سترى الآن تم استبدال اسم المطعم

45
00:03:44,900 --> 00:03:49,835
مع شعار المطعم في حجم صغير هناك.

46
00:03:49,835 --> 00:03:53,280
ترى الآن أنه عند الانتقال إلى صفحة حول،

47
00:03:53,280 --> 00:03:56,720
سترى الصورة التي يتم تضمينها هناك،

48
00:03:56,720 --> 00:03:59,700
وبالمثل في صفحة جهة الاتصال،

49
00:03:59,700 --> 00:04:04,995
سترى أن الصورة قد تم تحديثها مرة أخرى إلى الصفحة الرئيسية.

50
00:04:04,995 --> 00:04:07,080
الآن، ما سنقوم به،

51
00:04:07,080 --> 00:04:13,980
هو استخدام كائن وسائط بدلا من هذه الأوصاف التي لدينا هنا،

52
00:04:13,980 --> 00:04:19,095
ومن ثم استخدام كائن الوسائط لاستبدال

53
00:04:19,095 --> 00:04:25,370
هذه مع الوصف وأيضا صورة ليتم تضمينها.

54
00:04:25,370 --> 00:04:29,890
وهذا يعطي رؤية أفضل لصفحتنا على شبكة الإنترنت.

55
00:04:29,890 --> 00:04:32,725
لذا، دعونا نمضي قدما ونقوم بهذا التغيير.

56
00:04:32,725 --> 00:04:37,695
للاستفادة من كائن الوسائط في صفحة index.html الخاصة بنا،

57
00:04:37,695 --> 00:04:40,555
سنذهب إلى الصف الأول من المحتوى هنا.

58
00:04:40,555 --> 00:04:44,930
ثم هناك في div الثاني،

59
00:04:44,930 --> 00:04:51,380
سأقوم بتقديم ديف جديد مع وسائط الفصل،

60
00:04:51,380 --> 00:04:57,500
وأرفق المحتوى داخل هذا div هناك،

61
00:04:57,500 --> 00:05:01,245
وإغلاق div.

62
00:05:01,245 --> 00:05:04,940
الآن، داخل هذا div،

63
00:05:04,940 --> 00:05:10,820
سأقوم بتقديم صورة لاستخدامها هناك.

64
00:05:10,820 --> 00:05:14,840
هنا أذهب وأقول فئة الصورة،

65
00:05:14,840 --> 00:05:20,120
ومن أجل استخدام صورة في كائن وسائل الإعلام،

66
00:05:20,120 --> 00:05:26,820
ونحن بحاجة إلى تطبيق بعض الطبقات الإضافية ذات الصلة المرن هنا،

67
00:05:26,820 --> 00:05:31,545
لذلك أنا تطبيق د فليكسس، ثم mr-3.

68
00:05:31,545 --> 00:05:40,035
لذلك، M يعني الحق الهامش مع رقم 3.

69
00:05:40,035 --> 00:05:43,625
وهذا يعطي هامش كاف على يمين هذه الصورة،

70
00:05:43,625 --> 00:05:53,205
بحيث يتم تعيين الوصف قليلا بعيدا عن الصورة في صفحة الويب.

71
00:05:53,205 --> 00:05:59,370
ثم سأستخدم الصورة المصغرة لهذه الصورة،

72
00:05:59,370 --> 00:06:08,650
ثم استخدم أيضًا محاذاة المركز الذاتي للصورة،

73
00:06:08,650 --> 00:06:16,350
ثم اكتب مصدر الصورة، وهو img،

74
00:06:16,350 --> 00:06:23,570
ويمكنك

75
00:06:23,570 --> 00:06:30,680
البحث عن اسم الصورة في مجلد img،

76
00:06:30,680 --> 00:06:34,340
ودعني أعطيه بديلاً هناك،

77
00:06:36,240 --> 00:06:39,005
وأغلق الصورة.

78
00:06:39,005 --> 00:06:43,465
سيشمل هذا الآن الصورة في كائن midi الخاص بي.

79
00:06:43,465 --> 00:06:49,830
بالإضافة إلى ذلك، سأقوم بإنشاء جسم الوسائط لهذه الصورة

80
00:06:49,830 --> 00:06:56,840
بقول هيئة وسائط div class،

81
00:06:56,840 --> 00:07:06,055
ثم أرفق هذا h2 و p الذي يحتوي على الوصف داخل هذا div هناك.

82
00:07:06,055 --> 00:07:10,365
لذا، دعني أضع مسافة بادئة للمحتوى هناك،

83
00:07:10,365 --> 00:07:16,395
ثم أغلق هذا div هنا.

84
00:07:16,395 --> 00:07:23,395
مع ذلك، وصفي مغلق داخل هيئة الإعلام.

85
00:07:23,395 --> 00:07:25,430
بالإضافة إلى هذا h2،

86
00:07:25,430 --> 00:07:30,955
أنا ذاهب لتقديم فئة كما مت-0.

87
00:07:30,955 --> 00:07:37,785
مع هذا، يقول هذا الصف الهامش أعلى الصفر.

88
00:07:37,785 --> 00:07:44,940
سيتم محاذاة هذا العنوان إلى أعلى كائن الوسائط هذا هنا.

89
00:07:44,940 --> 00:07:48,120
مع هذه التغييرات، دعنا نحفظ التغييرات

90
00:07:48,120 --> 00:07:51,705
ثم نلقي نظرة سريعة على صفحة الويب الخاصة بنا.

91
00:07:51,705 --> 00:07:53,930
الذهاب إلى صفحة الويب الخاصة بنا،

92
00:07:53,930 --> 00:07:56,980
ستلاحظ على الفور التغيير في صفحة الويب.

93
00:07:56,980 --> 00:08:00,115
يمكنك الآن أن ترى أن هناك موضع صورة هنا،

94
00:08:00,115 --> 00:08:03,650
ومن ثم

95
00:08:03,650 --> 00:08:08,375
تم وضع الوصف الذي كان في وقت سابق في هذا الموقع بشكل صحيح هنا.

96
00:08:08,375 --> 00:08:13,280
تباين هذا مع الصفين المتبقيين،

97
00:08:13,280 --> 00:08:17,290
وتبدأ الآن في معرفة كيف يساعدنا كائن الوسائط على

98
00:08:17,290 --> 00:08:23,545
تحويل ذلك إلى شيء أكثر حيوية.

99
00:08:23,545 --> 00:08:30,270
سأفعل نفس الشيء إلى الصف الثالث هنا.

100
00:08:30,270 --> 00:08:38,155
سيتم ترك الصف الثاني كممارسة لك في المهمة.

101
00:08:38,155 --> 00:08:40,680
الذهاب إلى هذه التدريبات الثالثة،

102
00:08:40,680 --> 00:08:48,730
وأنا ذاهب لتطبيق تغيير مماثل لهذا الصف الثالث لتقديم كائن وسائل الإعلام هنا.

103
00:08:48,730 --> 00:08:51,595
اسمحوا لي أن أعرض كائن الوسائط هناك،

104
00:08:51,595 --> 00:08:54,240
ثم إلى هذا div،

105
00:08:54,240 --> 00:08:57,115
انتقل إلى كائن الوسائط،

106
00:08:57,115 --> 00:09:01,290
ثم أعرض الصورة التي سأستخدمها هنا.

107
00:09:01,290 --> 00:09:05,410
يمكنني استخدام الطبقة كما d-flex mr-3.

108
00:09:05,410 --> 00:09:08,830
إذا كنت تقوم بوضع الصورة على الجانب الأيمن،

109
00:09:08,830 --> 00:09:14,060
فأنت بحاجة إلى إعطاء هامش كـ ml-3 لذلك.

110
00:09:14,060 --> 00:09:20,560
بالإضافة إلى ذلك، سأقوم بإضافة فئة الصورة المصغرة إلى هذا،

111
00:09:20,560 --> 00:09:26,005
ثم أقول أيضًا، محاذاة المركز الذاتي.

112
00:09:26,005 --> 00:09:31,010
هذه هي الطبقات التي سأقوم بإضافتها إلى هذه الصورة.

113
00:09:31,010 --> 00:09:35,670
وبعد ذلك، دعونا نحدد مصدر هذه الصورة،

114
00:09:35,760 --> 00:09:46,880
img و alberto.png، ثم سأحدد البديل.

115
00:09:52,060 --> 00:09:57,400
وبعد ذلك، هذا h2 و h4 و p،

116
00:09:57,400 --> 00:10:07,140
أنا ذاهب لإغلاقها داخل div وسائل الإعلام هنا،

117
00:10:07,760 --> 00:10:11,845
وإغلاق div الجسم وسائل الإعلام.

118
00:10:11,845 --> 00:10:17,845
لقد أكملنا الآن كائن الوسائط في الصف الثالث.

119
00:10:17,845 --> 00:10:19,230
دعونا حفظ التغييرات،

120
00:10:19,230 --> 00:10:22,700
ثم انتقل ونلقي نظرة على صفحة الويب الخاصة بنا بعد ذلك.

121
00:10:22,700 --> 00:10:25,480
الآن، مع إلقاء نظرة على صفحة الويب الخاصة بنا،

122
00:10:25,480 --> 00:10:30,685
ستلاحظ أن لدينا وصف الطبق هناك.

123
00:10:30,685 --> 00:10:32,760
الآن، إذا انتقلت إلى الصف الثالث،

124
00:10:32,760 --> 00:10:37,705
سترى الآن كيف تم أيضًا إعادة تعريف الصف الثالث.

125
00:10:37,705 --> 00:10:40,425
لاحظ استخدام الوسائط اليسار،

126
00:10:40,425 --> 00:10:45,210
مما يعني أن الصورة يتم وضعها على الجانب الأيسر في كائن الوسائط هذا،

127
00:10:45,210 --> 00:10:52,230
ثم صفحة الوسائط الوسطى تضع الصورة في منتصف الوصف.

128
00:10:52,230 --> 00:10:55,760
يمكنك أيضًا استخدام أعلى الوسائط وأسفل الوسائط،

129
00:10:55,760 --> 00:11:01,970
لمحاذاة الصورة إلى أعلى وأسفل هذا الوصف.

130
00:11:01,970 --> 00:11:05,185
مع هذا، نكمل هذا التمرين.

131
00:11:05,185 --> 00:11:12,970
في هذا التمرين، نظرنا إلى استخدام الصور وكائن الوسائط في صفحة الويب الخاصة بنا.

132
00:11:12,970 --> 00:11:14,535
هذا هو الوقت المناسب، مرة أخرى،

133
00:11:14,535 --> 00:11:16,365
للقيام بتعليق جيد،

134
00:11:16,365 --> 00:11:19,960
مع الرسالة والصور ووسائل الإعلام.