مرحبًا بالجميع. مرحبًا بعودتكم. لقد حان الوقت
لنا لبدء مشروعنا النهائي. أتمنى حقًا أنه عندما تنتهى
من هذه الدورة، تكون قد تعلمت شيء ما. تشعر حقا بأنك فخور به
وتريد مشاركته. مرةً أخرى، هدفنا هو أننا
نكتب ورقة تصميم واحدة و وبأنماط ملفات HTML الثلاثة. الآن ، عندما تبدأ، سأفترض بانك قمت
بتأدية واجبك الثني المتعلق بتدرج الأقران. لديك الحرية في تغيير
ذلك كيفما تشاء، ولكن أريد أن أعرف أن تلك
التغييرات قد اكتملت. حسنًا، دعونا نريكم
ما كنا عليه وما أصبحنا عليه في المُضي قُدمًا بمشروعنا النهائي هذا. لذلك دعونا ننظر إلى ما قمنا به حتى
الآن في هذه الدورة. وقد حصلنا على أول مشاهدة لدورة HTML الخاصة بنا. وفي الخطوة التالية، قمنا بتبسيطها حقًا. وفي الخطوة الثالثة
، أضفنا أسلوبًا مختلفًا. ثم أخيرا في الخطوة الرابعة، قد لا يبدو
الأمر مختلفًا كثيرًا عن ما هو بهذه الصفحة، ولكن حيث سأقوم حقًا بتوجيه تركيزك
سيكون على صفحة الفرق (المجموعات) وعلى هذا الجدول. وسيكون بمقدورك حقًا رؤية
ما توصلت إليه و ووضع الكثير من الأنماط في هذا الجدول. والسبب الذي جعلني أختار الجداول هو أنها
ستتيح لنا الفرصة للمُضى قًدمًا و واستخدام تلك العناصر المستعارة (الزائفة). pseudo classes. استخدم تلك العناصر الزائفة (المستعارة) pseudo classes
، استخدم بعض التدرجات، يمكن أن تكون كل هذه الأشياء
الصغيرة صعبة التحقيق قليلاً، ولكن بمجرد الانتهاء منها
، ستبدو حقًا جيدة. لذلك فلنتحدث عن كل
جزء من هذه الأجزاء الصغيرة. لذا، فمجرد تنويه بسيط مرة أخرى
، عليك بعمل صفحة تصميم واحدة. فلا أريد صفحة تصميم مختلفة لكل صفحة، فيكفي نمط واحد
يقوم بتغطية الكل. وسنقوم باستخدام
عناصر مستعارة (زائفة) pseudo-elements وفئات مستعارة (زائفة) pseudo-classes. لذا إذا كنت تبدو مشوشًا قليلاً
حول ذلك ، لا تنس، لدينا شرائح تغطي هذا بالإضافة إلى
بعض رموزنا البرمجية المصحوبة بالأمثلة. لذا فننبأ بالجدول
لأن ذلك يمثل الجزء الأكبر من الصفحة. على أقل تقدير، أريدك أن تمضي قُدمًا
وتضبط نمط الخط والعرض، والهوامش. الآن عندما تقوم بضبط نمط الخط، هناك العديد
من الخيارات المختلفة التي يمكنك النظر إليها. يمكنك الحصول على أنماط خطوط مختلفة. يمكنك تغيير حجم
الخط وشكله وارتفاعه. إحدى الأمور التي أوصي بها
عند ضبط ارتفاع الخط، هى أنه من الأسهل بكثير توسيط النص
داخل الصفوف إذا قمت بضبط ارتفاع الخط ليكون بنفس حجم النص. وبالنسبة لعرض الجدول الخاص بك، لا أحبذ أن
يشغل جدولك الصفحة بأكملها. أحبذ أن تشغل حوالي
ما بين 70% و 90% من حجم الصفحة. وإحدى الأسباب
التي من أجلها أريد أن تفعل ذلك، هي أنني أريدك أن تقوم بوضع الجدول في منتصف الصفحة. كما أريدك أن تقوم بالتعامل مع
خاصية الهوامش كيفما شئت. ومعرفة كيف يمكنك ضبط
المقدار الكافي فقط من المسافات و ووضعها بشكل صحيح عندما تريد ذلك. ثم ننظر
بعد ذلك إلى عنوان الجدول. لذا فإن عنوان الجدول يبدو مختلفا قليلا
عن الصفوف الأخرى، فهو حقًا له نفس
المعنى الدلالي الهام. لذا فباستخدام علامات الإشارة الخاصة بعنوان الجدول، سنكون
قادرين على مضاعفة فائدة هذه الفكرة التي نقوم بتصميمها بشكل مختلف
وهذا يعني وجود شيء مختلف. لذا أولا ، قم بتغيير لون الخلفية. بمجرد أن تقوم بعمل ذلك، أريدك أن تحاول وضع
لون خلفية باللون الرمادي. الآن لا تنسى أنه لكي تستخدم التدرج، سيتعين عليك اللجوء إلى وضعها
في بعض بادئات المتصفح. ثم قم بعد ذلك بإضافة إطار ولكنني أريدك فقط
أن تقوم بتدوير الركنين العلويين، ولبس الجزء العلوي بأكمله، ثم
قم بزيادة سُمك الإطار السفلي. وأخيرا، عندما تنتهي من هذا،
قم بالمٌضي قُدمًا و قم بإضافة خاصية
أخرى واحدة على الأقل، شيئًا تعتقد أنه سيبدو رائعًا. وبمجرد أن تقوم بضبط عنوان الجدول،
امضِ قُدمًا وقم بوضع بعض الأنماط لضبط صفوف الجدول. أول شيء أريدك القيام به
وهناك سبب لذلك، هو أنني أريدك أن تضبط
صفوف الجدول حتى نسبة ثمانية من عشرة تقريبًا. في مكان ما هناك بالصفحة. حيث لا يزال بإمكانك قراءة النص ،
ولكنه باهت قليلا. بعد ذلك ، أريدك أن تتأكد من أن
أول عمود في كل صف جدل يتم محاذاته لليسار وأن
العمودين الاّخرين في المنتصف. الآن، قد يمكنك القيام بهذا الأسلوب
في عناصر صفوف الجدول الخاص بك، قد تقوم به في
عناصر الجدول ، أو في برامج TDs هذه. ويعتمد الأمر حقًا على مدى مرونتك
ومحاولتك لتصميم هذا النمط. أخيرًا، أريدك أن تمضي قُدما
وتضع فئة آخرى زائفة (pseudo-class). حيث أنه عندما يقوم شخص ما بالمرور
فوق هذه الصفوف، سيتغير اللون من
اللون الباهت إلى اللون الغامق. وسوف أعرض عليكم مثالاً
لذلك قبل المُضي قُدمًا. لذا إن لاحظت هذا الجدول، سيبدو الجدول باهتًا قليلاً
عن كون لونه أسود خالص. لذا فهذا هو المكان الذي يظهر فيه هذا اللون الباهت. والاّن، عندما أمر فوق اسم كل فريق، سترى أن الخط
أصبح قليلاً أكثر قتامة. لم أقم بتغيير لون الخط هنا
، ولم أقم بتغيير نمط الخط او أو النوع أو أى شيء كذلك. ولكن ما قمت بتغييره هو
درجة قتامة الخط لتصبح 1. فلذا فعندما أدقق النظر الاّن، أدرك أن الخط يعود إلى نفس درجة القتامة الأصلية
لتي كان عليها. يمكن أن يخضع كل عنصر من عناصر الجدول
أي قدر من أنواع التصميم التي تريد أن تضفيها عليه. ولكن ما أريد أن أراك تفعله هو أنني أريد أن أراك
تقوم بتصميم حواش الجدول، ولون الخط ولون الخلفية. كما أريدك أن تقوم بضبط نصف قطر الإطار
حتى 2 بكسل. قد لا يكون بمقدورك رؤية
هذا النوع من الاختلاف الدقيق الذي لا يمكن تمييزه في الجدول. لذا فأريدك أن تقوم بوضع
كل شيء في مكانه عندما أخبرك أن تفعل ذلك تلاحظ وجود
تغيير فعلي هناك. وفي نهاية المطاف، ستكون هذه فرصة جيدة لك لكي تفعل شيئًا
لم أقم بتغطيته بنفسي. وجزء من كونك مصمم ويب هو
تعلمك كيفية الخروج والبحث عن خصائص مختلفة
يمكن استغلالها. لذا أود أن أشجعكم على المضي قدمًا
والنظر إلى ظل النص. وأستخدم هذا في أمثلتي التي أذكرها. لذا فإن أردت حقًا محاولة ممارسة
ذلك، فلتمضِ قدمًا وتحاولوا استخدامه بنفسك. وسوف نستخدم من جديد تصنيف
الأقران في هذا الواجب. وسوف تعتمد الدرجات علي كل من مستوى
إتمام الدورة وبعض المستويات الجمالية. وسيتم دائمًا الامتثال لمعايير
الترميز المناسبة، ولكن يمكنك تحديد حجم
شاشتك المفضل. لذا إذا قرر شخص ما أن يأخذ
ال CSS الخاص بك وقام بتطبيقه على HTML، يمكنك أن تعلمهم أن هذا يبدو حقًا أفضل
على شاشة كبيرة أو جهاز محمول صغير. الاّن، هناك بالفعل عدة طرق يمكنك من خلالها تغيير
ورقة التصميم. ولا أريدك أن تقلق بشأن تجاوز
كل معيار من المعايير. ولكن إذا قررت أن تقوم بشيء
جنوني مختلف بعض الشيء شيء ربما لم يستطع
بقية الناس فهمه. وأقترح عليكم أن تقوموا بوضع هذا
بجانب الجزء الأسفل من ورقة التصميم الخاصة بك. حتى يستطيع حقًا من ينظر إلى برمجتك
التركيز على المتطلبات الفعلية. ويشعرون بعد ذلك بالدهشة
من ابتكاراتك المدهشة حقًا. لذا فاّمل أن يساعدك
هذا حقًا على فهم ال CSS. إذا واجهتك مشكلة، يمكنك
استخدام لوحات المناقشة بحرية وطرح ألأساله على الناس
بشأن ما لست متأكد منه. أو قم فقط بمشاركة شيء
رائع أخذته في العمل. حظ سعيد.