مرحباً، جميعاً. عودًا حميدًا. منذ أسبوعه الرابع وأنت تعمل على مشروعك النهائي،
وما أريد فعله هو أنني أعرض لك بعض الخيارات المختلفة التي يمكنك استخدامها
عند تصميم صفحتك. وفي هذا الفيديو، أريد أن أوضح لك ماذا يحدث عندما تحاول أن
تصمم شريط تنقل رأسي.. وهنا في متصفحي، ولدى الشكل الذى ستظهر عليه الصفحة
عندما ننتهي من تصميمها. ولكني سأمضي قدمًا وسأضغط على زر "تحديث"
وأرى كيف ستبدو. إذا حاولت إنشاء شريط تنقل
باستخدام أربعة روابط بسيطة. ومرة أخرى، نذكر أن الروابط المضمنة
تكون بجانب بعضها البعض. ليس هناك أى لون. لا شيء يحدث. والأمر مروع حقًا. لذا اسمحوا لي أن أقوم بإعادة هذا التصميم. قم بإعادة تحديث الصفحة. وسوف أوضح لكم
كيف قمت بتصميم شريط التنقل هذا. فلنبدأ بالحديث عن الهيكل. لقد قمت للتو بتصميم لون الخلفية
والحواشي والهامش. في الحقيقة هذا لا يمثل أهمية هنا. فالأهم هو التحدث عن شريط التنقل الخاص بنا. إحدى الأشياء التي أردت القيام بها
هى أن أعرض لكم فكرة استخدام صندوق الإطارات مربع الحجم. ما سيحدث أنه سيغني عن الحاجة إلى حساب مقدرا العرض ومقدار الحواشي ومقدار الإطار. لا يشترط عليك أن تقوم بأى حساب. سيقوم المتصفح بالقيام بذلك من أجلك. أقم بتصميم إطارًا بسيطًا، واختار اللون ولون الخلفية، وهكذا. ومع ذلك، فإن أول شيء فعلته هو أنني قمت بجعله كتلة مضمنة، حيث أنني أريد أن يكون شريط التنقل الخاص بي
بالقرب من باقي الأجزاء الاّخرى من الصفحة. وبما أن عملية التنقل عبر الإنترنت محظورة،
فلن تحدث حتى يكون شريط التنقل هناك. لذا فقلت أنني أريد أن يشغل 20% تقريبًا من الصفحة،
ثم يتم إضافة بعض الهوامش. والاّن، هناك شيء جديد ربما لم تره من قبل،
وهو فكرة أن الارتفاع يساوى مائة فولت في الساعة. هذا هو ارتفاع منفذ العرض. لذا فهذا يعني أنني أريد ان تتنقل في صفحتك
حتى يشغلها الارتفاع بأكمله. لن أقم بالمبالغة فى تغطيتها حتى 400 بكسل أو 200 بكسل، لأنني لا أعرف حجم الشاشة التي ننظر إليها. دعونا نتحدث بعد ذلك عن الارتفاعات الفعلية نفسها. ما فعلته هو أنني قمت بإزالة الروابط المعتادة المملة وقمت بتصميمهم حقًا لجعلهم شيئًا أكثر احترافية. لذا فأنا أحدد ارتفاعًا معينًا أريده لكل رابط من روابطي. ثم أقوم بالتعامل بشيء من المهارة وذكرت أنني أريد أن يكون ارتفاع الخط 45بكسل. إذًا فلماذا أفعل ذلك؟ السبب هو أنني أريد أن
أقوم بوضع صور المنزل في وسط الصفحة أو أريد أن أقوم بتوسيط الكلمات بداخله،
وهذا ما يمكنني القيام به. وثاني أجمل الأشياء التي قمت بها
هى أنني قمت بإضافة صورة للخلفية. قمت بإضافة هذه الأسهم الصغيرة. ومن أروع الأشياء التي اضطررت إلى القيام بها
هي أنني أريد أن أشير حقًا إلى أنني لم أستطع الربط بين المجلد والملف. وبموجب الطريقة التي قمت بتصميم درس البرمجة من خلالها،
أريد أن أذكر أنني أعلم بأنني الاّن موجودًا في مجلد ال CSS لذا سأعود لأعلى إلى مجلدي الرئيسي،
ثم أقم بالبحث عن الصور. إن انتابتك حيرة بشأن هذا، فلا تقلق. فهذا مفهوم جديد تمامًا، ولكن هناك شيء ما سيفعله الكثير منكم عند القيام بربط الصور من صفحتكم النمطية. حسنًا اّخر ما فعلته هو إضافة بعض الحواشي لذلك فليست هناك مساحة للصورة، ثم ضفت بعد ذلك بعض الهوامش. لذا فباستخدام هذه الأشياء المختلفة التي تحدثنا بالفعل عنها،
الموضع، عفوُا، العرض، ارتفاع السطر، روابط عناوين الخلفية،
نكون تمكنا من القيام بشيء أظن أنه شيء يبدو رائعًا حقًا وبسيطًا،
شريط التنقل العمودي. امضِ قدما وحاول عمل ذلك. حظ سعيد.