جاري التحميل
المتواجدون الآن ؟
ككل هناك 12 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 12 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 487 عُضو.
آخر عُضو مُسجل هو موقع منتدى امجد فمرحباً به.

أعضاؤنا قدموا 9749 مساهمة في هذا المنتدى في 1843 موضوع

منتديات تقنيات :: دورات ودروس منتديات تقنيات :: 

تعلم HTML و CSS: تصميم الموقع

avatar
تعلم HTML و CSS: تصميم الموقع
بنية الصفحة
هناك العديد من الأوسمة في ال HTML التي تمكننا من تحديد بنية صفحات موقعنا وجعلها أكثر تنظيما وهي كالتالي:
<header> : أو الترويسة
ويستعمل هذا الوسم لتحديد ترويسة الموقع فغالبية المواقع الأن تحتوي على ترويسة ويمكن أن تتضمن العديد من المعلومات كشعار الموقع أوإسمه أو بانر إعلاني وغيرها. وتتم إضافته على الشكل التالي:

<header> <!-- هنا تضع عناصر ترويسة موقعك --> </header>

الدرس السابق: تعلم CSS: الألوان والوراثة

<footer> : أوذيل الصفحة
عكس الترويسة التي توجد في الأعلى فإن الفوتر أو ذيل الصفحة يوضع في أسفل الصفحة ويمكن أن يتضمن العديد من المعلومات مثل روابط الإتصال أو إسم صاحب الموقع وكذا إشعارات قانونية. ويكون كوده كالتالي:

<footer> <!-- هنا تضع محتوى ذيل الصفحة --> </footer>

<article>: أو الفقرة
هذا الوسم يمكننا من تحديد جزء معين من الصفحة يحتوي على فقرة، و يكون كوده كالتالي:

<article>
<h1>عنوان الفقرة</h1>
<p>هنا يكون نص الفقرة</p>
</article>

<section>: قسم
الوسم <section> يمكننا من تجميع عناصر عن نفس الموضوع.

<section>
<h1>عنوان القسم</h1>
<p>المحتوى</p>
</section>

<aside>: أو قسم جانبي
يستعمل هذا الوسم من أجل إضافة معلومات تكميلية للصفحة التي نزوروها، ويمكن أن يكون هناك أكثر من قسم جانبي في الصفحة.

<aside> <!-- هنا تضع المعلومات --> </aside>

<nav>: روابط تصفح الموقع
يتضمن هذا الوسم قائمة لأهم روابط التصفح والتنقل في الموقع، وكودها يكون كالتالي:

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

نموذج الصندوق
تتكون صفحات الويب من مجموعة من الصناديق التي تدعى Blocs أو لبنات وهناك العديد من اللبنات مثل الفقرات <p> والعناوين <h1> بالإضافة إلى الأوسمة التي تعرفنا عليها في هذا الدرس مثل <header> و<footer> وغيرها.
وهنا سنتعامل مع هذه اللبنات كصناديق وسنتعلم كيفية تعديل أبعادها وإضافة الهوامش وكذا محتواها.

هناك نوعين من الأوسمة inline و block
في لغة HTML تنقسم الأوسمة إلو نوعين وهي كالتالي:
النوع block مثل (<article>, <p>, <h1>, <footer>…): هذا النوع من الوسمة ينشيء رجوعا إلى السطر، وبوضعها الإفتراضي تأخد كامل مساحة الصفحة المتوفرة وتتابع عموديا.
النوع inline مثل (<strong>, <a>, <img />, <em>…): وهذا النوع من الأوسمة تكون داخل الوسم من نوع block وهي لا تنشيء رجوعا إلى السطر فالوسم الذي يليها يكون في نفس السطر وتتابع أفقيا.
الأبعاد
سنعمل على الأوسمة من النوع block فقط وهذا النوع من الأوسمة له بعدين العرض والإرتفاع وهناك خاصيتين لتعديلهم وهما:
width: وتسمح لنا بالتحكم في عرض العنصر وتكون قيمتها إما بالبيكسل px أو بالنسبة المئوية %.
height: وتسنح لنا بالتحكم في ارتفاع العنصر وتكون قيمتها أيضا إما بالبيكسل px أو بالنسبة المئوية %.
وتستعمل كما في المثال التالي:

p {
width: 50%;
}

يمكن استخدام النسبة المئوية كقيمة وهي تجعل عناصر الصفحة تتلاءم مع الشاشة الصغيرة، ويمكنك كذالك قيمة بالبيكسل px لتجعلها تابثة. ويمكننا أيضا تحديد حد أدنى وأقصى باستعمال الخصائص التالية:
min-width: العرض الأدنى.
min-height: الإرتفاع الأدنى.
max-width: العرض الأفصى.
max-height: الإرتفاع الأقصى.
وإليكم الكود التالي كمثال:

p {
width: 50%;
min-width: 200px;
}

يعنى أن العنصر سيأخد نسبة 50% من الصفحة لكنه مهما صغرت الشاشة فلن يقل عن 200px.

الهوامش
يتوفر كل عنصر من صفحة ويب من نوع block على نوعين من الهوامش وهي: الهوامش الداخلية والهوامش الخارجية والصورة التالية توضح هذا:

وللتعديل على حجم هذه الهوامش فإننا نستعمل الخاصيتين التاليتين:
padding: وهي للهوامش الداخلية وعموما تكون قيمتها بالبيكسل.
margin: وهي للهوامش الخارجية وتكون قيمتها كذالك عموما بالبيكسل.
تحديد مكان تموضع العناصر
في هذا الجزء سنتعرف على كيفيفة تغيير وتحديد مكان تموضع العناصر في صفحات موقعنا.
لفعل هذا فإننا نستخدم الخاصية float أو تعويم وهي تمكننا من وضع العناصر في اليسار أو في اليمين. ولها قيمتين وهما right التي تعني يمين وleft التي تعني يسار.
وإليكم الكود التالي كمثال والذي يجعل قائمة التصفح مثلا في اليسار:

nav {
float: left;
}

تحويل العناصر بخاصية display
هناك خاصية تمكننا من تحويل عناصر من نوع معين إلى عناصر من نوع أخر مثلا من block إلى inline أو العكس.
وإليكم الكود التالي كمثال:

a {
display: block;
}

هذا الكود سيجعل الروابط تتصرف كعنصر من النوع block وسيظهر كل واحد فوق الأخر وسيكون من الممكن تغيير أبعادها.
ومن الممكن أيضا استعمال هذه الخاصية من أجل إخفاء عنصر ما من الصفحة بإعطائها القيمة none ويكون الكود كما يلي:

.section {
display: none;
}

التموضع باستخدام inline-block
تمكننا هذه القيمة من جعل العناصر تتموضع جنبا إلى جنب وفي سطر واحد وتمكننا أيضا الخاصية vertical-align من تعديل تموضعهما العمودي.

baseline : اصطفاف العناصر بالنسبة لقاعدتهما.
top: إصطفاف العناصر في الأعلى.
middle: عمودية في الوسط.
bottom: إصطفاف العناصر في الأسفل.
قيمة بالبيكسل أو النسبة المئوية: ترتيب واصطفاف العناصر على بعد مسافة معينة من سطر القاعدة (baseline).


التموضع المطلق والثابت والنسبي
هناك طرق أخرى يمكننا من خلالها تحديد تموضع العناصر على صفحة ويب وهي:

التموضع المطلق absolute: ويمكننا من وضع العنصر في أي مكان على الصفحة، ومن أجل ذلك نكتب الكود التالي:

element
{
position: absolute;
}

ولكن هذا لا يكفي لذا يجب إضافة على الأقل واحدة من المحددات الأخرى التالية لتحديد مكان تموضع العناصر على الصفحة:
left: التموضع بالنسبة ليسار الصفحة.
right: التموضع بالنسسبة ليمين الصفحة.
top: التموضع بالنسسبة أعلى الصفحة.
bottom: التموضع بالنسسبة لأسفل الصفحة.

ويمكننا إعطاءها قيما بالبيكسل أو بالنسبة المئوية كما في المثال التالي:

element
{
position: absolute;
right: 0px;
bottom: 0px;
}

التموضع الثابت fixed: هو تقريبا مثله مثل التموضع المطلق، الإختلاف الوحيد بينهما هو أن التموضع الثابث يبقى ثابتا وظاهرا على الشاشة مهما حركنا الصفحة نحو الأسفل، وإليكم الكود التالي كمثال:

element
{
position: fixed;
right: 0px;
bottom: 0px;
}

التموضع النسبي relative: يمكننا من إعادة تموضع أي عنصر انطلاقا من وضعيته البدئية، فلو أردنا مثلا تحريك عنصر ما ب 100 بيكسل في اتجاه اليمين و50 بيكسل في اتجاه اليسار فسأكتب الكود التالي وسيتحرك العنصر ب 100 بيكسل في اتجاه اليمين و50 بيكسل في اتجاه اليسار انطلاقا من وضعيته البدئية المطلقة أي أعلى يسار الشاشة:

element
{
position: relative;
left: 55px;
top: 10px;
}


m13
avatar
موضو راائع جدا                                  



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     

يعطيك الف الف عافيه

موضوع رااائع

وجهود أروع

ننتظر مزيدكم

بشوووق
avatar
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
avatar
شكرا على المجهود جزاك الله كل خير
مواضيع مماثلة

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول