لایه‌بندی (Layouts) در وب‌سایت‌ها به ترتیب و نظم دادن المان‌های مختلف صفحه با هدف ایجاد یک ساختار یکپارچه و جذاب می‌پردازد. لایه‌بندی معمولاً شامل قسمت‌هایی مانند Header (سربرگ)، Navigation (منو)، Content (محتوا) و Footer (پابرگ) می‌شود.
جزئیات لایه‌بندی:
-
سربرگ (Header):
- سربرگ عموماً شامل عنوان و لوگوی وبسایت است.
- معمولاً در بالای صفحه واقع شده و معرف وبسایت به کاربران می‌باشد.
-
منو (Navigation):
- منو معمولاً شامل لینک‌هایی به بخش‌های مختلف وبسایت است.
- به کاربران امکان می‌دهد به سرعت به بخش‌های مختلف وبسایت دسترسی پیدا کنند.
-
محتوا (Content):
- محتوا بخش اصلی و مرکزی صفحه است که شامل مطالب، تصاویر، ویدئوها و غیره می‌شود.
- این بخش برای ارائه اطلاعات و محتوای مفید برای کاربران استفاده می‌شود.
-
پابرگ (Footer):
- پابرگ در پایین صفحه قرار دارد و معمولاً شامل اطلاعات تماس، لینک‌های مهم، حقوق نویسنده و غیره می‌شود.
- این بخش به کاربران اطلاعات بیشتری درباره وبسایت فراهم می‌کند.
مثال:
یک مثال ساده از یک لایه‌بندی ساده وبسایت به صورت زیر است:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>وبسایت من</title>
<style>
/* استایل‌های لایه‌بندی */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #444;
color: white;
padding: 10px;
text-align: center;
}
footer {
background-color: #555;
color: white;
padding: 10px;
text-align: center;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<!-- سربرگ -->
<header>
<h1>وبسایت من</h1>
</header>
<!-- منو -->
<nav>
<a href="/">صفحه اصلی</a> |
<a href="/about">درباره ما</a> |
<a href="/contact">تماس با ما</a>
</nav>
<!-- محتوا -->
<div class="content">
<h2>خوش آمدید به وبسایت من!</h2>
<p>این یک مثال از لایه‌بندی ساده وبسایت است.</p>
</div>
<!-- پابرگ -->
<footer>
<p>تمامی حقوق محفوظ است - 2024</p>
</footer>
</body>
</html>
در این مثال، وبسایت شامل یک سربرگ با عنوان، یک منو با لینک‌های صفحات مختلف، یک بخش محتوا و یک پابرگ با اطلاعات تماس است. استایل‌ها نیز به صورت داخلی تعریف شده‌اند تا به طور متناسب به ظاهر وبسایت کمک کنند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام