مرحبًا بكم جميعًا مجددًا. حان الوقت للتوقف عن تعلم أشياء جديدة وتطبيق الأشياء التي كنا نتحدث عنها
في الأسبوع الماضي. ما سنفعله هو أننا سنضيف بعض الأشياء الجديدة
التي كنا نعمل عليها. لكننا سنقوم بذلك معًا عندما نقوم بالبرمجة معًا،
لذا أؤكد مرة أخرى على أنني أتمنى حقًا أن تتوقف، اترك أي شيء آخر تفعله الاّن،
أو قم بتشغيل الكمبيوتر المحمول أو مهما كان الجهاز التي تستخدمه في البرمجة، قم بالبرمجة معي بدلاً من مجرد مشاهدة ما أقوم به. آخر مرة كنا نبرمج فيها معًا ، أتمنى أن تكون قد صممت شيئًا يشبه هذه الشاشة هنا. لقد مضينا قدمًا واستخدمنا العرض
وشاشات مختلفة، وحواشي، والهامش ونعمل على تحسين صفحتنا بعض الشئ. اليوم، سنتقدم خطوة أخرى ونضيف بعض العناصر المختلفة كالتدرج اللوني، بدلاً من وجود ثلاثة أقسام متساوية العرض،
سيكون لدينا بعض الأقسام التي تشغل نصف الصفحة،
والبعض الآخر يشغل الصفحة بأكملها، وأشياء صغيرة كهذه. كما سنقوم باستخدام هذه المحددات الجديدة
التي كنا ندرسها. لذا، فلنمضي قدمًا ونبدأ. أول ما أريد ان أفعله هو وضع ذلك التدرج الخطي أو هذا اللون الجديد الذي يدخل في كل من الرأس (الجزء العلوي) والتذييل. لذا عندما أذهب إلى ورقة التصميم الخاصة بي،
وسأعود هنا. إحدى أول الأشياء التي أريد القيام بها
هو أنني أريد أن أشير إلى حاجتنا إلى خلفية جديدة للرأس (الجزء العلوي) والتذييل. وسأبدأ بفي وضعها هنا. أعلم أنني قمت بالغش، قمت بعمل نسخ ولصق. لكنني أردت أن أفعل ذلك، مع الأسف. أردت أن أفعل ذلك، لأنني ظللت أخطأ عندما كنت أكتب. لذا، ما وضعته هنا هو أنني بدأت بوضع لون للخلفية. تريد دائمًا أن تقوم بذلك، لأنك إن لم تفعل، وإذا لسبب ما لم يستطع المتصفح التعامل مع التدرج الخطي، فأنت تأثر عليه سلبًا. بعد ذلك، حصلت على قاعدة التدرج الخطي
في كل مجموعة من مجموعات الويب المختلفة. لذلك بمجرد إضافة ذلك والضغط على حفظ ،
يمكننا تحديث الصفحة ومعرفة ما إذا كان لدينا هذا النوع من اللون الرمادي
إلى الأزرق الذي كنا نبحث عنه. أهلاً، رائع، فعلنا لك. والاّن، عندما كتبت هذا القاعدة،
ربما تتذكر أنني قمت بتصميم الرأس (الجزء العلوي)، وتذييلاً، ويعني أنه من المفترض أن يتم تطبيقه
على كل من العنصرين. ولكنه يتم تطبيقه فقط على الرأس. علينا أن نفكر لماذا حدث هذا. والسبب يمكن في أننا إذا تحركنا بالفأرة لأسفل ،
يمكنك أن ترى ذلك في الجزء السفلي من الصفحة وذكرت، أننا أريد أن تكون خلفية التذييل الخاص بي
لها ها اللون المحدد. هذا يلغي أي قواعد سابقة ، لذا سأدخل هنا. وسأحذف هذا ،
ونقول ، دعنا نتخلص من ذلك. قم بالتحديث، عظيم. تبدو الاّن أفضل بكثير. حسنًا ، لقد قمنا بهذا التغيير ، و
آمل أن تعتادوا على فكرة استخدام الفاصلة لتصميم عنصرين مرة واحدة ،
يمكنك فعل المزيد و ووضع بادئات مجموعة الويب هذه أو بادئات المستعرض. إذا تخلصت من ذلك ، فقد يعمل على متصفحك ، ولكن هناك فرصة جيدة حقًا،
ألا تعمل على المتصفح الآخر. لذا نريد ممارسة ذلك. حسنًا ، دعنا نلقي نظرة ونرى ما لدينا. لدى نوع من التدرج. والشيء التالي الذي أريد تنازله
هو تصميم هذه الروابط ، و مرة أخرى ، لا أقوم بتصميم كافة الروابط
الموجودة في الصفحة ، لأنك إذا لاحظت، هذا الجزء السفلي هنا
لا يزال يبدو كما هو تمامًا. أريد فقط تصميم الروابط الموجودة داخل قسم التنقل. لذا، ٍأنتقل إلى هنا، لقد صممت ملاحتي. إن شكلها جيد. المرة القادمة، سأقول، مرحبًا ، دعنا نصمم فقط تلك الروابط
الموجودة داخل التنقل. ولقد قمنا ببعض التغييرات. إذا نزلت إلى هنا ، يمكننا رؤيتها. لقد أضفنا شيئًا يشبه نوعًا ما هيكل الصندوق إليه. عادة لا يمكنك القيام بذلك لأن في عناصر الخط
لا يضاف لها عرضًا و ولا ارتفاعًا لكننا سنمضي قدمًا ونتعامل معها. دعنا نمضي قدمًا ونبدأ ،
سأقول أولاً أود أن يكون عرض كل رابط من روابطي حوالي 22٪ ، قم بحفظ هذا. قم بالتحديث، ليس هناك حظ. لذا مرة أخرى ، تذكر أن إحدى الأشياء
التي قلتها هو أن الروابط مضمنة و لا يمكنك إعطائهم عرضًا أو ارتفاعًا. الآن ، إذا دخلت و قلت نغير العرض إلى كتلة مضمنة،
لابد ان يكون لدينا حظ أكبر. غالبًا حظ كبير،
لأن الشاشة لا تناسب ذلك تمامًا. حسنا؟
حسنا رائع جدًا، هذا أقرب بخطوة. دعنا نضيف لون الخلفية المختلف. وأعتقد أنني جعلتها بيضاء. لكن يمكنك استخدام أي شيء تريده. بوم. نحن نقترب بالتأكيد. خطوات صغيرة تقربنا كثيرًا، وأكثر. لذا، فالشيء التالي الذي أريد معالجته
بينما نحاول تغيير صفحتنا هي فكرة أن بعض الأقسام
يجب أن تشغل نصف الشاشة، بينما يجب أن تتحرك بعض الأقسام إلى الأمام
وتشغل عرض الشاشة بالكامل. والطريقة التي سنفعل بها هذا هي استخدام الفئات. ولو تتذكر، والفئات هي
طريقة لتصميم مجموعات معينة من العناصر بأسلوب متشابه. فلنبدأ ونرى كيف سنفعل ذلك. أول شيء يجب أن أفعله
هو عمل فئة جدية ، وستكون هذه الفئة، بدلاً من أن تشغل جميع الأقسام 30٪،
أريد بعضًا منها فقط ، سأطلق عليهم نصفًا،
حيث أنه يمكن القول بأنها تشغل 45% من الصفحة. وبهذه الطريقة، سيتم فقط اختيار بعض الأقسام وليس كلها. إذا قمت بالتحديث ، فلن يعمل بعد
لأن المشكلة هي أني تخلص من تصميم القسم الخاص بي و
استبدله بهذه الفئة و تذكرت في مكان في HTML أشير إلى الفئة.. لذا للمرة الأولى سننتقل إلى ملف HTML الخاص بنا و ونبدأ في عمل بعض التغييرات. سأذهب هنا ،
أود أن يشغل هذا نصف الشاشة فقط ، لذا سأقول فئة = نصف. وأود أن يشغل هذا نصف الشاشة. لقد تم الأمر. لن نقوم بتغيير الآخر، لذا عندما أقوم بالتحديث ، يمكنك أن ترى
أن اثنين منهم الآن بجوار بعضهما البعض. لذلك عندما أقوم بالتحديث تبدو أقرب قليلاً ،
بخلاف ما لدي من بعض الأشياء الغريبة
التي تحدث مع بعض الأشياء الزرقاء والمختلفة. هذا لأنني كنت أقوم باستخدام خاصية float التعويم. وإذا كنت لا زلت تتذكر، فعند استخدام خاصية float التعويم في بعض الأحيان
يتسبب في ان تكون الأشياء في بعض الأحيان بجانب بعضها البعض لتكون في الأساس
في أمكان لا تريدها أن تكون فيها. إذًا ، فالقسم السفلي وهو القسم الذي كنا نعرف
أننا لا نريده أن يكون عائمًا ، نحن بحاجة للدخول والقول مرحبًا ،
هناك أقسام معينة نريدها أن تكون بأكملها هكذا. لذا دعنا نعود إلى ورقة الأنماط الخاصة بنا. وسأقوم فقط بنسخ ولصق القليل هنا. وسأقول ، أتعلم ماذا؟ هذا القسم ، أريده أن تكون فيه الفئة تساوي الكل. لذا عد إلى هنا. فئة القسم = الكل مما يعني أنه
]نبغي أن يشغل العرض بالكامل ، لا تحاول أن تطفو العناصر Float بجانب بعضها البعض. فلنمضي قدمًا ونقوم بالتحديث. هذا يبدو أفضل بكثير. يبدو إلى حد كبير أننا أردنا أن تكون الأشياء في النهاية. ومرة اخرى، انتبه. تم تصميم روابط التنقل فقط ، وليست كل الروابط. لقد وضعنا التدرج. إن كان التدرج لا يعمل، قد يكون سبب ذلك هو لأنك لم تضع بادئات متصفحك. لدينا بالفعل الكثير من الأشياء الصغيرة تتم في هذه الصفحة. ومرة أخرى ، أقول أنني لست فنانًا ،
لذا أنا لا أقوم بتصميم أجمل الأشياء. لكن من الممتع الدخول و
إنشاء أشياء مختلفة و انظر كيف يمكنك تصميمها بنفسك. لذا ، استمر ونتمنى لك التوفيق
و لا تقلق عندما تضغط على تقع في الأخطاء الكتابية. كلنا ستفعل هذا.