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

تنسيق الموقع

عادةً ما يتم تقسيم الموقع إلى رأس، قائمة، محتوى، وقدم الموقع:

هناك العديد من أنماط التصميم المتاحة للاختيار. ولكن، هيكل المقدمة هو واحد من الأنماط الأكثر شيوعًا، وسنقوم بدراستها بدقة في هذا الدرس.

الرأس

عادةً ما يتم وضع الرأس (header) في أعلى الموقع (أو تحت قائمة التوجيه العلوية). عادةً يحتوي على الشعار (اللوجو) أو اسم الموقع:

مثال

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
{}

النتيجة:

الرأس

تجربة بنفسك

قائمة علوية

يحتوي القائمة العلوية على قائمة من الروابط لمساعدة الزوار على تصفح موقعك:

مثال

/* وحدة القائمة العلوية */
.topnav {
  overflow: hidden;
  background-color: #333;
{}
/* روابط القائمة العلوية */
.topnav a {
  浮动: يسار;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
{}
/* تغيير لون الرابط عند التمرير فوقه */
.topnav a:hover {
  background-color: #ddd;
  color: black;
{}

النتيجة:

تجربة بنفسك

المحتوى

التنسيق الذي يتم استخدامه يعتمد عادةً على المستخدمين المستهدفين. أكثر الأنماط شيوعًا هي واحدة من الأنماط التالية (أو دمجها معًا):

  • 1-عمودتصميم (يستخدم عادة في المتصفحات المحمولة)
  • 2-عمودتصميم (يستخدم عادة في أجهزة الكمبيوتر اللوحية وأجهزة الكمبيوتر المحمولة)
  • 3-عمودتصميم (للاستخدام فقط على أجهزة الكمبيوتر المكتبية)

1-عمود:

2-عمود:

3-عمود:

سنقوم بإنشاء تصميم 3 أعمدة، ونقوم بتغييره إلى تصميم عمود واحد في الشاشات الصغيرة:

مثال

/* إنشاء ثلاثة أعمدة متساوية، تطفو بجوار بعضها البعض */
.column {
  浮动: يسار;
  عرض: 33.33%;
{}
/* تنظيف الفوating بعد الأعمدة */
.row:after {
  المحتوى: "";
  عرض: جدول;
  جعل كل شيء نظيفًا;
{}
/* تصميم ردئي - يجعل الأعمدة تتراكم بدلاً من أن تكون متوازية في الشاشات الصغيرة (عرض 600 بكسل أو أقل) */
@media screen and (max-width: 600px) {
  .column {
    عرض: 100%;
  {}
{}

النتيجة:

كتيب مرجعي شامل لتقنيات المواقع

كتيبنا المرجعي يغطي جميع جوانب تقنيات المواقع.

يحتوي ذلك على تقنيات معايير W3C: HTML، CSS، XML. بالإضافة إلى تقنيات أخرى مثل JavaScript، PHP، SQL وغيرها.

آداة اختبار النماذج عبر الإنترنت

في CodeW3C.com، نقدم آلاف الأمثلة.

من خلال استخدام محررنا عبر الإنترنت، يمكنك تعديل هذه الأمثلة وتجربة الشيفرة.

طريقة تعلم سريعة وسهلة

الوقت معناه ذهب، لذا نقدم لك محتوى سهل وسريع الاستيعاب.

في هذا المكان، يمكنك الحصول على أي معرفة تحتاجها بطرق واضحة وسهلة.

تجربة بنفسك

نصيحة:لإنشاء تصميم 2 عمود، قم بتغيير العرض إلى 50٪. لإنشاء تصميم 4 أعمدة، استخدم 25٪.

نصيحة:هل تريد معرفة كيف يعمل قاعدة @media؟ يرجى قراءة استعلامات الإعلام CSS تعلم المزيد عن هذه المعلومات في هذا الفصل.

نصيحة:طريقة أكثر حداثة لإنشاء تصميم الأعمدة هي استخدام Flexbox CSS. ولكن Internet Explorer 10 وأحدث إصداراته لا يدعمها. إذا كنت بحاجة إلى دعم IE6-10، استخدم الفوating (كما هو موضح أعلاه).

للحصول على معلومات إضافية حول وحدة التركيب Box Flexible، يرجى قراءة Flexbox CSS دليل.

الأعمدة المختلفة

المحتوى الرئيسي (المحتوى الرئيسي) هو الجزء الأكبر والأهم من موقعك.

تختلف أوسع الأعمدة، لأن معظم المساحة محفوظة للمحتوى الرئيسي. المحتوى الثانوي (إذا كان موجودًا) يستخدم عادة كدليل بديل أو لتقديم معلومات تتعلق بالمحتوى الرئيسي. يمكنك تغيير العرض بسهولة، فقط تذكر أن مجموعها يجب أن يكون 100٪:

مثال

.column {
  浮动: يسار;
{}
/* الأعمدة اليمنى واليسرى */
.column.side {
  عرض: 25%;
{}
/* عمود وسط */
.column.middle {
  عرض: 50%;
{}
/* تصميم ردئي - يجعل الأعمدة تتراكم بدلاً من أن تكون متوازية */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    عرض: 100%;
  {}
{}

النتيجة:

كتيب مرجعي شامل لتقنيات المواقع

كتيبنا المرجعي يغطي جميع جوانب تقنيات المواقع.

يحتوي ذلك على تقنيات معايير W3C: HTML، CSS، XML. بالإضافة إلى تقنيات أخرى مثل JavaScript، PHP، SQL وغيرها.

آداة اختبار النماذج عبر الإنترنت

في CodeW3C.com، نقدم آلاف الأمثلة.

من خلال استخدام محررنا عبر الإنترنت، يمكنك تعديل هذه الأمثلة وتجربة الشيفرة.

طريقة تعلم سريعة وسهلة

الوقت معناه ذهب، لذا نقدم لك محتوى سهل وسريع الاستيعاب.

في هذا المكان، يمكنك الحصول على أي معرفة تحتاجها بطرق واضحة وسهلة.

تجربة بنفسك

القاعدة

القاعدة تقع في أسفل الصفحة. عادةً تحتوي على معلومات مثل حقوق الطبع والنشر ووسائل الاتصال:

مثال

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
{}

النتيجة:

القاعدة

تجربة بنفسك

تصميم موقع شبكي مناسب للعرض على مختلف الأجهزة

من خلال استخدام هذه الأكواد CSS، قمنا بإنشاء تصميم موقع شبكي مسبق التكيف، سيبدل بين عمودين وعمود مكتمل بناءً على عرض الشاشة:

تجربة بنفسك