أهلاً بكم جميعًا.
أهلاً بكم في مراجعة أخرى من مراجعات البرمجة.
لقد قمت بتصميم شريط تنقل من قبل يعمل بشكل رأسي.
وكان يتحرك لأعلى ولأسفل.
واليوم، أريد فقط أن أوضح لكم كيف يمكنكم استخدام كود HTML، ولكن
سنقوم بتصميم شريط تنقل أفقي بدلاً من الرأسي.
لذا، فلنلقِ نظرة.
أود أن أتناول شيئًا يبدو أشبه بذلك.
ولم أذهب فقط لشريط التنقل الأفقي، بل أريد أن أريكم
مثالاً يوضح لكم أى صفحة ننظر إليها الاّن.
لذا، فإن لاحظت شريط التنقل،
ستجد الصور الموجودة فيه تبدو مختلفة بعض الشيء عن الروابط الأخرى.
من الشائع جدًا القيام بذلك كما لو كنا نقوم بالإشارة إلى الأشخاص
هذه هى الصفحة التي تنظرون إليها الاّن.
لذا دعونا نلقي نظرة على CSS، ونرى كيف قمت بتناول HTML
وقمت بتحويله لشيء له شريط تنقل مصمم جيدًا.
حسنًا، فلنبدأ بسؤالنا: هل تعرف؟
نريد تصميم كافة الروابط الموجودة بشريط التنقل.
ولكني لا أريد تصميم كافة الروابط،
أريد أن أشير فقط إلى الروابط الموجودة في شريط التنقل.
وبمجرد أن قمنا بذلك، كان الأمر لحد ما بسيطًا بالنسبة لي ومضيت قدمًا وقمت كما أردت
بضبط ارتفاع معين، ولون خلفية معينة وزخرفة نصية معينة.
وإحدى الأشياء التي قمت بإضافتها هى أنصاف أقطار الإطار.
يتمثل نص قطر الإطار في المنحنى المربع، لذا
إذا أمعنت النظر، ترى أن كل شيء يبدو منحنيًا بعض الشيء هنا على الجانب.
ليس هناك شئ هام في هذا.
ولدى شيء اّخر
شيء جديد وهى فكرة وجود فصل نطلق عليها الفصل الحالي.
ما يتناوله الفصل الحالي هو في الأساس توضيح طريقة وضع العلامات (التبويب)
مرحبًا، هل تعرفون كافة الروابط المختلفة الموجودة بصفحتي؟
أريد أن أريكم أيها أقوم بالنظر إليه الاّن.
وكل ما فعلته هو أنني
يكون لدى لون خلفية مختلف.
حسنًا
لذا، كان من السهل جدًا تصميم
شريط التنقل الأفقي هذا ما دمت شديد الحرص على فكرة تباعد الأشياء.
لذا، أريد أن أريكم مرة أخرى أن هناك أشياء مثل الحواشي و
والهامش تعد في غاية الأهمية وذات قيمة.
لذا فعندما تستخدم النسب المئوية، بدلاً من بكسل، ستمنعها من
أن تبدو جيدة على شاشة كبيرة ، ثم تبدو سيئة جدًا على شاشة صغيرة.
اّخر شيء أود عرضه هنا فقط على سبيل المزاح
وللمساعدة في أن أعرض لكم بعض الأشياء المختلفة التي يمكنكم القيام بها باستخدام CSS،
هل قمت بإضافة حالة لأي رابط من روابط التنقل؟
لذا، فإذا ألقيت نظرة، تجد أنني مضيت قدمًا
وقلت أنه عندما يمر شخص ما فوق الصفحة، أريد أن أغير لون النص
وأريد أن أتخلص من نصف قطر الإطار بالكامل.
لنلقي نظرة
فنذهب إلى هنا، وسوف أقف على هذا الجزء
وسيتحول النص من اللون الأبيض إلى الأسود، وسيتحول من دائرة إلى مربع.
الاّن، ومرة أخرى، بينما كنت أراجع معكم كافة هذه الأمثلة المتنوعة، من المهم حقًا
أن تدركوا أنني لست فنانُا وليس لدى حس فني رفيع جدًا.
كما اّمل أن تتعلموا من مقتطفات من دروس البرمجة هذه
وتقوموا بتحويلها إلى شيء رائع حقًا وتعدله بما يتناسب مع
الصفحة التي تحاولون إنشاءها.
لذا فامضِوا قدمًا، واستمتعوا وحاول الاّن تصميم شريط التنقل
الذي يتحرك في كافة الاتجاهات أعلى وأسفل وفي الجانبين أو حتى مجموعات الأشرطة هذه.
حظ سعيد.