القائمة الرئيسية

الصفحات

 Learn to create a simple and responsive top menu on your site

 Create Menu 

اهلا ومرحبا بكم مرة اخرى في شرح جديد وموضوع جديد يخص تصميم صفحات الويب في هذه المدونة سنتعلم كيفية خلق قائمة علوية بسيطة وايضا متجاوبة ولكن غالبا مثل هذا التصميم للشركات التي تبحث مثلا عن موقع تعريفي لنفسها فقط جيد سنتحدث عن كيفية عمله بالتفصيل اضافة الى السورس كود لنشرح عليه بالتفصيل اذا كنت من متابعي هذه المدونة فسوف تعرف ذلك من خلال وجود عدة شروحات لنا فسيكون النسق واحد اذا ما كنت مبتدأ ولا تعرف شيء عن تصميم صفحات الويب فيجب عليك اولا تعلم الاساسيات جيد جدا الان ستحتاج الى انشاء ملف يحمل الاسم index.html وملف ثاني يحمل الاسم style.css ببساطة جداً وبسرعة بديهية كيف سنربط ذلك معا بأختصار شديد انه توجد بملف الIndex وسم head سيتضمن وسم link الخاص بالربط بين الملفات من الطبيعي ان نكون على معرفة بكيفية تتبع المسار الموجود فيه الملف وذلك تضمينا له في href 

لا تخلى مواقع الويب من القائمة الرئيسية فهي أمور تسهل للمستخدم التنقل بين الصفحات ومعرفة الموقع بشكل مضبوط وهذه المدونة ستعلمك كيف تعملها بسهولة جدا لنبدأ على بركة الله
لغة html هي أهم لغة في اللغات المستخدمة لبناء أي موقع، ولا تصنف كونها لغة برمجة وأنما لغة ترميز ولذلك هى سهلة لعدم أحتوائها على قوانين وقواعد اللغات البرمجية التى قد تحدث ضجيج للكثير، ويعود سبب أهمية اللغة هو إستخدامها في بناء الهيكل الأساسي للمواقع الإلكترونية؛ فهي تمثل جذر الموقع مثل جذر المبنى المتواجد تحت الأرض.وهنا سنقوم بأستخدامها لعمل القائمة الرئيسية

HTML FILE

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn to create a simple and responsive top menu on your sitetitle>
    <link rel="stylesheet" href="styles.css">
head>
<body>
    <div class="MenuWrap">
        <a href="#" class="ListItem">Homea>
        <a href="#" class="ListItem">About usa>
        <a href="#" class="ListItem">Productsa>
        <a href="#" class="ListItem">Policya>
        <a href="#" class="LastItem">Contact usa>
    div>
    
body>
html>

كما هو موضح بالكود اعلاه انه تم تضمين وسم div والذي سيكون بداخله الوسم a  للتنقل بين الصفحات وهنا وضعت عليه # وذلك حتى لا يتم التحول الى اي صفحة ويمكن انت ايضا تجربة ذلك من خلال وضع URL معين ويحمل الclass باسم listItem 

CSS FILE

html,body{
    margin0;
    padding0;
}
.MenuWrap{
    background-colorindigo;
    font-family'Oswald',sans-serif;
    min-height2.75rem;
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    padding0 1rem;
}
@media (min-width31.25em){
    .MenuWrap{
        flex-directionrow;
    }
}
.ListItem,
.LastItem{
    color#ededed;
    text-decorationnone;
}
@media (min-width31.25em){
    .ListItem{
        margin1rem;
    }
    .LastItem{
        margin-left:auto;
    }
}
في البداية انه يوجد تنسيقات تخص البنية الاساسية وهي html,body{ margin: 0; padding: 0; } اذ يتضمن الجسم واما التي تخص الحاوية التي تحمل الa فهي كالتالي 
.MenuWrap{ background-color: indigo; font-family: 'Oswald',sans-serif; min-height: 2.75rem; display: flex; flex-direction: column; align-items: center; padding: 0 1rem; }
اما باقي التنسيقات فهي تخص التنظيم اكثر وايضا هناك ما يخص التوافق مع الهواتف والذي حمل التنسيقات @media جيد يمكن تجربة ذلك بسهولة انشأ ملفاتك وقم بالتجربة 

باستخدام CSS ، يمكنك التحكم في اللون ، والخط ، وحجم النص ، والتباعد بين العناصر ، وكيفية وضع العناصر وتخطيطها ، وما هي صور الخلفية أو ألوان الخلفية التي سيتم استخدامها ، وشاشات العرض المختلفة للأجهزة وأحجام الشاشة المختلفة ، و أكثر بكثير!

تعتبر CSS -اختصار ل - (Cascading Style Sheet) لغة توصيفية تقوم بمنح موقع الويب شكله الجميل وتصميمه الفريد الذي سيميزه عن غيره من المواقع . تعد لغة ال CSS صديقة للغة ال HTML فهي دائماً مرافقة لها وبجانبها في تصميم وإنشاء صفحات الويب
هل اعجبك الموضوع :

تعليقات