مرحبًا جميعًا مجددًا. سأطلب منكم مرة أخرى أن تتوقفوا عن التعلم،
والبدء في البرمجة والممارسة. وسنستخدم نفس المثال الذي استخدمناه
في أول وقت استقطعناه للبرمجة. لذا أردت أن أريكم صفحتنا القديمة هنا. ونرى كيف يمكننا تغييرها إلى شئ يبدو يشبه بعض الشئ صفحتنا الجديدة هنا. فقد قمنا بتصميم بعض الهوامش، والحواشي،
والعرض والارتفاعات الخاصة بنا. حسنًا، فلنمضِ قدمًا ولنبدأ. أول ما أريد القيام به هو
استخدام نفس ورقة التصميم التي استخدمتها من الأولى. ليس هناك ضرورة على الإطلاق إلى
إعادة إنشاء صفحة التصميم الخاصة بك بينما يمكنك فقط استخدام هذه الورقة نفسها وتعديلها،
أو إن كنت ترغب في ذلك، فاستخدم ورقتي تصميم. سأستخدم واحدة فقط. وأول ما سأقوم بتصحيحه هو في حقيقة الأمر هو أنني ارتكبت ما يمكن تسميه بخطأ في نسختي السابقة. لدى قاعدتين في تصميم h1. هذه ليست مشكلة. سيقوم المتصفح بتطبيق كافة هذه التصميمات. لكن ما قصدت أن أفعله حقًا هو
أنني قصدت تصميم علامة الشكل (الهيكل). لذا، دعونا نلقي نظرة على
الشكل الذي تبدو عليه الآن. ولنعد إلى نسختنا الحالية
ودعنا نعود إلى نسختنا الحالية. و نتابع يبدو هذا بالفعل أفضل بعض الشئ مما اعتدنا عليه. حسنًا ، فالاّن إنها بداية جديدة أبدأ بها، فلنتحدث عن الأشياء المختلفة
التي يمكننا تصميمها في صفحتنا ، حسنًا؟ من أول الأشياء التي أريد القيام بها
هو أنني أريد إضافة القليل من الهوامش لصفحتي. إذا نظرت هنا، فليس هناك مسافة كبيرة
بين حافة الصفحة و المتصفح الفعلي. أريد أن أضيف القليل فقط. يمكنك إضافة القليل، يمكنك إضافة الكثير. في واقع الأمر، أثناء قيامنا اليوم بالبرمجة،
سأضيف الكثير ، فقط حتى يتسنى لكم رؤية التأثيرات. فكيف تقوم بذلك؟ كيف تضيف تلك المسافة
بين العنصر والعناصر المجاورة؟ فلتمضي قدمًا وسوف نضيف هامشًا. وكما ذكرت،
أعتقد أنني سأجعلها أكثر وضوحًا قليلاً مما كانت عليه في الترميز الذي عرضته هناك. سأمضي قدما واجعله 4٪. لذا عندما نفعل ذلك، سأعود إلى الصفحة. سأعيد التحميل. ويمكنك أن ترى أنه قد تم نقل كل شيء، حسنًا؟ يضيف الهامش فقط مساحة صغيرة
ويجعلها أكثر جاذبية من الناحية المرئية للمستخدمين ، حسنًا؟ لنفكر في بعض الأشياء الأخرى التي نريد القيام بها. من الواضح أنني من المحتمل أريد إضافة مسافة صغيرة بين روابطي وأسفل النص. لذا فهذا مختلف قليلا. لا أقول أن نفصل العناصر، أقول أنني بحاجة إلى مساحة أكبر بين إطاراتي والعنصر نفسه. ففي هذه الحالة،
ما نريد استخدامه ليس الهامش، بل نريد تعديل الحواشي. لذا فلنمضي قدمًا، ونرى أين يمكننا أن نفعل ذلك. حسنًا، لذا أحتاج إلى إضافة إحدى الحواشي
في الجزء العلوي بالكامل. لذا دعونا ننتقل هنا و سأقوم بتغييره إلى، حواشي، مرة أخرى و
يمكنك اختيار أي شيء تريده. يمكنك استخدام وحدات البكسل ، يمكنك استخدام النسب المئوية. سأمضي قدمًا في هذه الحالة، وسأضع البكسل فقط. وسأقول من فضلك أضف 15 بكسل من المسافة
بين الإطار والجزء السفلي. لذا، سأقوم بالتحديث ، وأتأكد من أنني أقوم بالحفظ. ثم قم بالتحديث، و يمكنك أن ترى أنني أضفت الحواشي حولها بأكملها. إذا أردت حقًا وضع الحواشي في الأسفل ، لكان بإمكاني أن أقول الحواشي السفلية ،
أو الحواشي اليمنى، أو الحواشي اليسرى. حسنًا، دعنا نمضي قدمًا ونصمم شيئًا آخر. إحدى الأشياء الكبيرة التي قمت بتغييرها
هو أنه بدلاً من وجودها الواحدة تحت الأخرى، قمت بتغييرها بحيث تكون بجوار بعضها البعض. لذا تذكر، أنه بشكل افتراضي أن الأقسام
تمثل نوعًا من الحظر، وهى حظر العرض مما يعني عدم السماح لأي شخص آخر المجئ بجانبي. من أجل تغييرها بحيث تكون بجوار بعضها البعض،
كما يمكننا إما استخدام عنصر مضمن أو كتلة مضمنة. عند منحك هذا الاختيار تقريبًا ، ستستخدم دائمًا العنصر المضمن، لأنه عندما تستخدم العنصر المضمن،
يمكنك تضمين ارتفاعًا وعرضًا. حسنًا، أعد إلى ملف CSS الخاص بي. لا أريد تغيير العنوان. أعتقد أنني أتعامل جيدًا مع h1. التنقل، h2، أتعلم؟ ليس لدي أي شيء يمكنني تغييره هنا ،
لذلك دعونا نمضي قدمًا ونضع علامة جديدة. قسم، حسنًا ، أريد كل هذه الأقسام الثلاثة بجوار بعضها البعض. لذا ما يمكنني فعله هو
أنه يمكنني وضع ربما 400 بكسل لكل منهما. حسنًا، هذا يعني أن المتصفح يجب أن يكون على الأقل 1200 بكسل. يمكنني وضع 150 بكسل لكل منهما. حسنًا، يعني هذا أنهم سيكونوا في منتهى الصغر
حتى لو لم تكن هناك حاجة إلى ذلك. لذلك فلنستخدم النسب المئوية. سأستخدم 30٪، وليس 33٪،
لأنني أريد أن أعطي بعض المساحة للحواشي، والهوامش ، والإطارات، إلخ. حسنًا ، فلنمضي قدمًا وننظر إليه الآن ،
أريد أن أرى كيف يبدو. يمكنك أن ترى أنني حققت 30٪ ،
لكنهم ما زالوا ليسوا بجانب بعضهم البعض. هذا لأنهم ما زالوا محظورين. فلنغيرها إلى عرض مضمن. ولناّمل في الأفضل. ها نحن ذا. لدي كافة الأشياء الثلاثة بجانب بعضها البعض. الأمر لا زال لا يبدو بنفس الطريقة التي نريدها،
لكن خطوة بخطوة. وهناك تقدم قليل في هذا الوقت. سوف أمضي قدمًا وأعالج هذا الأمر
الذي يتمثل في عدم اصطفافهم جميعًا في القمة. وسأقول تحرك: يسار ؛ وقم بالتحديث و نحن نقترب ، نحن نقترب،
ولكن لا يزال هناك شئًا خاطئًا بعد الشئ هنا. أولاً، سيتم تداخلهم في بعضهم. لا أحب أن يتداخلوا في بعضهم البعض. إذًا، كيف تفصل بين العناصر المختلفة وبعضها؟ كيف تضيف بعض المسافات بين العناصر؟ حسنًا، إذا كنا في الفصل،
سأقابل ذلك الطالب الذي يقول أوه أوه، أعلم، حقًا، أنه هامش، حسنًا؟ هامش، سأضع الهامش على جانبًا واحدًا فقط ،
دعنا نقول هامش أيمن. وسأجعله صغيرًا بنسبة 2٪. حسنًا، نحن نقترب. نحن نقترب. لا يزل هذا بالضبط ما أردناه ،
ولكن هذه هي الطريقة التي يعمل بها. فلتضف قليلاً. وتقم بالتعديل. فلتضف قليلاً. لذا فإن إحدى الإشكاليات الكبرى هنا
هي أنه عندما تحرك الأشياء إلى اليسار، أو أو عندما تحرك الأشياء، بمجرد الانتهاء من عملية النقل،
لا تريد أن تتحرك تلك العناصر التالية. ينبغي عليك في الواقع أن تدخل وتقول، أوه ،
لكنني لا أريد أن أحرك هذا الجزء. لذا بمجرد الانتهاء من هذه الأقسام الثلاثة، لا نريد أن يتم التذييل أيضًا بجانبهم . لذا فلندخل ونضبط كود التذييل. هنا بالأسفل. حسنًا، إذا كنت تتذكر
ما إذا كنت لا تريد أن تتحرك الأشياء بجانبك، سنستخدم بكل وضوح: كليهما، مما يعني عدم ترك أي شيء يتحرك جانبي. يا إلهي، أفضل بكثير، أليس كذلك؟ يبدو أفضل بكثير. وبخلاف أن لدي ألوانًا غريبة، نحن قريبون جدًا من هنا. أنا في الواقع أحب اللون الرمادي في الجزء العلوي
وبالنسبة للتذييل لذا سأتركه. ولكن ما أريد فعله
هو أن أجعل تلك الصورة أصغر حجمًا. هذه الأيقونة الصغيرة الموجودة هنا ،
لنجعلها تبدو أكبر بعض الشئ كهذه. وهذا بسيط للغاية بالنسبة للطريقة التي سنستخدمها الآن. فلنمضي قدما. سأضيف صورة. وسأمضي قدمًا وأقوم فقط بالترميز الثابت الآن. لذا، سأجعلها 75 بكسل. عفوًا، يجب أن أقول العرض: 75 بكسل. فلنلقي نظرة على ما قمنا به. نعم، يبدو ذلك جيدًا. إذا لم يعجبني هذا وأردت أن أجرب ، فلن أدخل هنا وأجرّب 100 ثم 80 ثم 52. ما سأفعله هو أن أنتقل إلى هنا وأقوم بفحص العنصر مرة أخرى. وأود جعله أكبر بعض الشئ وإلا سيبدو كل شيء غريبًا حقًا. وأريد الذهاب إلى الصورة و أود أن أقول ، حسنًا ، كيف ستبدو
إذا قمت بدلاً من ذلك بالضبط إلى 150 بكسل؟ هل هذا يبدو أفضل؟ أو عفوًا، لا تريد أن تفعل ذلك. أو ماذا لو جعلته 125 بكسل؟ هل يعجبني ذلك؟ اختر القيمة التي تريدها، و بمجرد العثور على شيء يبدو جيدًا بالنسبة لك ،
انسخ هذه القيمة في ورقة التصميم. لأنك إذا قمت بالتحديث الآن،
فستختفي قيم عنصر الفحص. حسنًا، فلنمضي قدمًا، ونعدلها،
ونقوم بالحفظ، ونقوم بالتحديث. حسنًا، هذا رائع، هذه هي الأشياء التي أريدك أن تفعلها في هذا الفصل. أريدك أن تعمل على ملف HTML وتقول أوه ،
هل يمكنني تغيير هذا؟ ماذا يمكنني أن أفعل لجعلها مختلفة؟ من الواضح أن هذه الصفحة
التي قمت بتصميمها هنا ليست نسخة نهائية. ليس هذا بالضبط هو الشكل الذي تريد أن تظهر به
على صفحة الويب. لذلك سنمضي قدمًا لتعلم أشياءً جديدة، ونستمر في تصميم الأشياء بطرق مختلفة. وبينما تستمر في الممارسة ،
ستشعر بالثقة من نفسك و وستنمو مهارتك حقًا. وهذا ما أريده. أريدك أن تكون شديد الثقة بنفسك، وبنهاية الأسبوع الرابع سيمكنك ذلك. لذلك، حظاً طيباً.