تخطيط الصفحة الجزء الأول مرحبًا بكم في دورة نوليدج سيتي على أوراق الأنماط الانسيابية المستوى المتوسط اسمي كليف بروزو أنا أستاذك واليوم سوف نستكشف تخطيط الصفحات مع أوراق الأنماط الانسيابية سننظر في كيفية عمل بعض الرؤوس اللاصقة Sticky headings سنكتشف كيفية إنشاء شريط تنقل navigation bar سنتحدث عن مجالات مختلفة للصفحة مثل نافذة المحتوى والجوانب والنافذة الرئيسية وتذييل ورأس الصفحة نضع كل هذه الأشياء على الصفحة معًا سنتحدث عن المقالات Articles وسنرى كيفية تنسيق الصفحة بأكملها حتى تبدو في أفضل حالاتها هيا بنا نبدأ أول شيء يجب أن نشير إليه هو أننا سنستخدم برنامجًا يسمى Atom ATOM ويمكنكم أن تجدوه وتحملوه من atom.io سبب استخدامنا Atom لا يهم حقاً سواء كان لديكم جهاز يعمل بنظام Windows أو جهاز Apple يعمل Atom على كليهما وسوف يسمح لنا برؤية الترميز والنتائج في نفس الوقت لأنه يحتوي على خاصية المعاينة المباشرة إذن الذي ننظر إليه هو صفحة ويب أنشأنها لتوضيح الدروس التي سنتعلمها في هذه الجلسة أولا، سنتحدث عن الرؤوس اللاصقة وبالرؤوس اللاصقة نعني رأسًا لا يتحرك عند التمرير لذلك إذا قمت بالتمرير لأسفل سيتغير محتوى الشاشة لكن الرأس سيبقى حيث من المفترض أن يكون وهذا يسمح لنا بمنح المستخدمين ميزة التنقل التي تبقى موجودة على الصفحة بغض النظر عن المكان الذي يكونوا فيه على الصفحة الشيء الآخر الذي نظرنا إليه للتو هو شريط التنقل navigation bar وهناك العديد من الطرق المختلفة للقيام بالتنقل في هذه الحالة، كل ما فعلناه هو أننا قمنا بتبديل بعض الألوان عندما يقوم المستخدمون بتمرير مؤشر الفأرة فوق هذا العنصر بالذات دعونا نلقي نظرة على الترميز الذي ينجز هذه الصفحة ترميز HTML واضح ومباشر لدي رابط لورقة نمط style sheet هذا موجود في مجلد CSS ثم أبدأ بالنص الأساسي وأنشئ قسم للرأس يحتوي على قسم يتحكم في شكل الرأس اللاصق وكيف سيبدو وأنشئ فئة تسمى stick_top وينظم أيضًا قسم التنقل لذا فإن stick_top شيء نكتبه داخل برنامج CSS الخاص بنا وسننظر في ذلك في ثانية ولكن هذا سبب كتابة الترميز Sticky Headers نرى النص الأزرق هنا يمكننا أن نرى التسطير لدينا خلفية باللون البرتقالي يتم التعامل مع كل هذه الأشياء في ملف CSS بينما ننتقل إلى أسفل الصفحة نصل إلى قسمنا الرئيسي ويحتوي القسم الرئيسي على كل المحتوى الذي سنضعه على الصفحة ومرة أخرى، أضع فئة في CSS تسمى main_content والتي تنسق هذه المنطقة بالذات أبدأ بـ H1 هذا فقط يضع رأساً على الصفحة تليها فقرة من النص التي نأمل أن تكون ممتعة إلى حد ما للقراءة ثم أقوم بإنشاء شيء يسمى جانباً وإذا لم تستخدموا جانبًا aside من قبل إنها طريقة لطيفة لجذب انتباهكم إلى منطقة من الشاشة الآن، لقد قمت بتنسيق هذا جانبًا Aside لتشمل شريط أخضر جميل يتلاشى اللون به لقد وضعت النص بخط مائل Italic وقد حددت العرض ومرة أخرى، سنرى كيف يتم ذلك في ترميز CSS ثم أكمل موضوعي ونتحدث عن فقرة أخرى ثم أتيت إلى شيء يسمى المقالاتArticles حيث يتم عرض النص في منطقة منسقة بشكل خاص في هذه الحالة، أنا أنظر الي نتائج لعبة البيسبول المعلومات الموجودة في الجزء السفلي من هذه البنود هي مجرد سلسلة من H1 وH2 وما تروه هنا هو Unicode لطباعة رسمة صغيرة للعبة البيسبول نواصل لأسفل الصفحة ونصل إلى قسم التذييل في قسم التذييل، أدخلت البريد الإلكتروني إلى المعلومات والتي تحوم بنفس الطريقة التي تفعله Navigation bars وفي هذه الحالة بالذات لقد استخدمت Unicode مرة أخرى المرة الأولى للحصول على رسمة صغيرة لمغلف بريد سريع وأنا أعلم أن المغلفات ليست موضة البريد الإلكتروني لكن الفكرة هي أننا نرسل نوعًا من البريد ثم أضع رابطًا آخر للهاتف نعم، لقد استخدمت الهاتف &phone التي لها خاصية Unicode مسماة والتي تعطيني هاتفًا أسود والذي سيتغير مرة أخرى إلى اللون الأبيض أخيرًا، لقد قمت بوضع إشعار حقوق النشر مع © وسأحصل على رسمة حرف c الصغيرة وأغلق علامات HTML الخاصة بي بنفس الترتيب الذي تم فتحهم به لذلك دعونا نلقي نظرة على ترميز CSS الذي يتماشى مع هذه الصفحة بالذات ما فعلته هو وضع تعليقات على كل سطر تقريبًا من CSS حتى تعرف ما يفعله السطر أولاً، أقوم بإعداد الترميز وتنسيق ثلاث علامات HTML أساسية علامة النص الأساسي والتي تبدأ في السطر الأول navigation الذي يبدأ في السطر السادس والقاعدة الأفقية التي تبدأ في السطر 12 بالنسبة النص الأساسي أقوم بإعداده ليكون بخط غريب الأطوار إلى حد ما وإذا كان Comic Sans MS غير متوفر لسبب ما على جهاز الكمبيوتر الخاص بالمستخدمين سآخذ أي خط sans-serif ومرة أخرى، تعلمنا عن منذ مدة طويلة serif في درس المستوي المبتدئ أنا أستخدم MidnightBlue كلون وأحب استخدام الألوان المسماة كلما استطعت إذا كان رقمًا سداسيًا عشريًا سيتعين على الناس الذهاب والبحث عن اللون ما ستلاحظونه أيضًا هو أنني استغرقت الوقت لمحاذاة الترميز الخاص بي ومحاذاة كل علامات النقطتان حيث يمكنني أن أجعلها تبدو جميلة ومرتبة في النص الأساسي، كل ما على فعله لمحاذاة النقطتين هو تباعد المسافة بحيث يتم محاذاة النقطتين ثم تباعد المسافة أكثر بحيث يتم محاذاة الفاصلة المنقوطة الهدف من القيام بذلك هو ذلك عندما لا يعمل الترميز وقد تكون هناك أوقات ارتكبتم فيها خطأ في مكان ما أثناء كتابة الترميز بحيث لا يعمل بالطريقة التي تتوقعوها حل المشكلة أسهل بكثير عندما تنظرون إلى ترميز منسق بشكل جيد وإذا بإمكانكم الحفاظ على محاذاة كل النقطتين والحفاظ على محاذاة جميع الفواصل المنقوطة سوف تكونون أكثر سعادةً
