تخطيط موقع الويب CSS
تخطيط الموقع
غالبًا ما يتم تقسيم موقع الويب إلى رؤوس وقوائم ومحتوى وتذييل:
هناك الكثير من تصميمات التخطيط المختلفة للاختيار من بينها. ومع ذلك ، فإن البنية أعلاه هي واحدة من أكثر الهياكل شيوعًا ، وسوف نلقي نظرة فاحصة عليها في هذا البرنامج التعليمي.
رأس
يوجد رأس الصفحة عادةً في الجزء العلوي من موقع الويب (أو أسفل قائمة التنقل العلوية مباشرةً). غالبًا ما تحتوي على شعار أو اسم موقع الويب:
مثال
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
نتيجة
Header
شريط التنقل
يحتوي شريط التنقل على قائمة روابط لمساعدة الزوار في التنقل عبر موقع الويب الخاص بك:
مثال
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
نتيجة
المحتوى
غالبًا ما يعتمد التخطيط في هذا القسم على المستخدمين المستهدفين. التخطيط الأكثر شيوعًا هو واحد (أو يجمع بينهما) مما يلي:
- عمود واحد (غالبًا ما يستخدم لمتصفحات الجوال)
- عمودان (يستخدمان غالبًا للأجهزة اللوحية وأجهزة الكمبيوتر المحمولة)
- تخطيط من 3 أعمدة (يُستخدم فقط لأجهزة سطح المكتب)
عمود واحد:
2-عمود:
3 عمود:
سننشئ تخطيطًا من 3 أعمدة ، ونغيره إلى تخطيط من عمود واحد على شاشات أصغر:
مثال
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
نتيجة
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
نصيحة: لإنشاء تخطيط من عمودين ، قم بتغيير العرض إلى 50٪. لإنشاء تخطيط من 4 أعمدة ، استخدم 25٪ ، إلخ.
نصيحة: هل تتساءل كيف تعمل قاعدةmedia؟ اقرأ المزيد عنها في فصل CSS Media Queries .
نصيحة: هناك طريقة أكثر حداثة لإنشاء تخطيطات الأعمدة ، وهي استخدام CSS Flexbox. ومع ذلك ، فهو غير مدعوم في Internet Explorer 10 والإصدارات السابقة. إذا كنت بحاجة إلى دعم IE6-10 ، فاستخدم العوامات (كما هو موضح أعلاه).
لمعرفة المزيد حول وحدة تخطيط الصندوق المرن ، اقرأ فصل CSS Flexbox الخاص بنا .
أعمدة غير متساوية
المحتوى الرئيسي هو الجزء الأكبر والأكثر أهمية في موقعك.
إنه شائع مع عرض الأعمدة غير المتكافئ ، بحيث يتم حجز معظم المساحة للمحتوى الرئيسي. غالبًا ما يتم استخدام المحتوى الجانبي (إن وجد) كبديل للتنقل أو لتحديد المعلومات ذات الصلة بالمحتوى الرئيسي. قم بتغيير العرض كما تريد ، فقط تذكر أنه يجب أن يصل إجماليه إلى 100٪:
مثال
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
نتيجة
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
تذييل
يتم وضع التذييل أسفل صفحتك. غالبًا ما يحتوي على معلومات مثل حقوق النشر ومعلومات الاتصال:
مثال
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
نتيجة
تصميم موقع مستجيب
باستخدام بعض رموز CSS أعلاه ، قمنا بإنشاء تخطيط موقع ويب سريع الاستجابة ، والذي يختلف بين عمودين وأعمدة كاملة العرض اعتمادًا على عرض الشاشة:
هل سمعت عن W3Schools Spaces ؟ هنا يمكنك إنشاء موقع الويب الخاص بك من البداية أو استخدام قالب واستضافته مجانًا.
ابدأ مجانًا ❯* بطاقة الإئتمان غير مطالب بها