تقریباً در هر وبسایتی که باز میکنیم، آخر صفحه بخشی قرار دارد که معمولاً اطلاعات مهم در آن جا میگیرد؛ از لینکهای ضروری گرفته تا کپیرایت و راههای ارتباطی. بسیاری از طراحان مبتدی فکر میکنند ساخت فوتر کار سختی است اما اگر چند نکته کوچک را رعایت کنید . خیلی راحت میتوانید یک فوتر شیک و کاربردی بسازید که هم ظاهر سایت را حرفهایتر کند و هم تجربه کاربری را بهتر جلوه دهد. در این مطلب قدمبهقدم ساخت یک فوتر ساده و جذاب را با HTML و CSS مرور میکنیم!!!
چرا فوتر بخش مهمی از سایت است؟
نقشها و کاربردهای فوتر
فوتر آخرین بخشی است که کاربر قبل از خروج از صفحه میبیند . پس بهتر است هوشمندانه طراحی شود.
چند مورد از مهمترین وظایف آن:
- نمایش اطلاعات حقوقی یا همان کپیرایت
- قرار دادن لینکهای سریع مثل «تماس»، «درباره ما» یا «قوانین»
- معرفی برند یا نمایش راههای ارتباطی
- کمک به نظمدهی سایت، مخصوصاً زمانی که صفحه طولانی است
وجود یک فوتر تمیز باعث میشود کاربر با حس بهتری سایت را ترک کند و این موضوع روی تجربه کلی او تأثیر دارد.
قبل از شروع طراحی چه نکاتی را باید بدانیم؟
ساختار استاندارد و قابل فهم
بهتر است برای فوتر از تگ معنایی <footer> استفاده کنید تا موتورهای جستجو و ابزارهای کمکی (مثل صفحهخوان) راحتتر بتوانند ساختار صفحه را تشخیص دهند.
طراحی واکنشگرا برای موبایل و دسکتاپ
کاربران بیشتر از موبایل استفاده میکنند، پس حتماً نحوه نمایش فوتر در اندازههای کوچکتر را بررسی کنید. Flexbox بهترین روش برای ایجاد ساختاری منعطف و تمیز است.
دسترسپذیری و لمسپذیری
اندازه لینکها باید به اندازهای باشد که کاربر موبایل بدون سختی بتواند روی آنها لمس کند.
فاصله مناسب بین لینکها تجربه کاربری را بسیار بهتر میکند.
پیادهسازی عملی — ایجاد یک فوتر مدرن
در ادامه دو فایل اصلی پروژه را مشاهده میکنید: یکی برای ساختار HTML و دیگری برای استایلدهی.
کدها کاملاً ساده و قابل ویرایشاند و میتوانید سریع آنها را در پروژه خود استفاده کنید .
فایل index.html
<!doctype html> <html lang="fa"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>آموزش ساخت فوتر زیبا در HTML</title> <link rel="stylesheet" href="style.css" /> </head> <body> <main class="page"> <section class="contentone" aria-label="محتوای صفحه"> </section> <footer class="site-footer" aria-label="فوتر سایت"> <div class="footer-inner"> <div class="brand"> <a href="https://sourcesoft.ir/" class="brand-link">سورسسافت</a> <p class="s-desc">مرجع آموزش طراحی وب</p> <p class="copyright"> © <span id="year"></span> سورسسافت. تمام حقوق برای این مجموعه محفوظ است. </p> </div> <nav class="footer-nav" aria-label="لینکهای مهم"> <a href="/about">درباره ما</a> <a href="/contact">تماس</a> <a href="/privacy">حریم خصوصی</a> </nav> <div class="footer-contact" aria-label="راههای ارتباطی"> <a href="tel:+989123456789">+98 912 345 6789</a> <a href="mailto:[email protected]">[email protected]</a> <div class="social"> <a href="#">IG</a> <a href="#">TW</a> <a href="#">IN</a> </div> </div> </div> </footer> </main> <script> document.getElementById('year').textContent = new Date().getFullYear(); </script> </body> </html>
فایل style.css
/* تنظیمات پایه */
*{
box-sizing:border-box;
margin:0;
padding:0;
}
:root{
--bg:#0f1113;
--muted:#cfcfcf;
--max-width:1100px;
--gap:18px;
}
body{
font-family:"Tahoma","Vazir",sans-serif;
background:#f5f5f5;
color:var(--muted);
min-height:100vh;
display:flex;
flex-direction:column;
}
/* ساختار صفحه */
.page{
display:flex;
flex-direction:column;
min-height:100vh;
}
.contentone{
background:#333;
height:560px;
}
/* فوتر */
.site-footer{
background:var(--bg);
margin-top:auto;
padding:28px 18px;
border-top:1px solid rgba(255,255,255,0.08);
}
.footer-inner{
max-width:var(--max-width);
margin:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start;
gap:var(--gap);
}
.brand-link{
color:#fff;
font-weight:700;
font-size:17px;
text-decoration:none;
margin-bottom:8px;
display:inline-block;
}
.s-desc{
font-size:14px;
margin-bottom:6px;
}
.footer-nav a,
.footer-contact a,
.social a{
color:var(--muted);
text-decoration:none;
margin-right:12px;
margin-bottom:8px;
padding:8px 6px;
border-radius:6px;
transition:0.2s;
}
.footer-nav a:hover,
.footer-contact a:hover,
.social a:hover{
background:rgba(255,255,255,0.1);
color:#fff;
}
@media (max-width:720px){
.footer-inner{
flex-direction:column;
align-items:flex-start;
}
.footer-nav{ order:3; }
.footer-contact{ order:2; }
}
.social a{
border:1px solid rgba(255,255,255,0.1);
padding:6px 8px;
}
نکات تکمیلی برای بهبود فوتر
- اگر سایت برند رنگی دارد، بهتر است رنگ پسزمینه فوتر مطابق همان هویت بصری باشد.
- برای سایتهای بزرگ، اضافهکردن بخش «نقشه سایت» در فوتر کمک زیادی به پیمایش کاربران میکند.
- آیکونهای شبکه اجتماعی بهتر است نسخه SVG باشند تا در نمایشگرهای مختلف کیفیت بالایی داشته باشند .
نتیجهگیری
همانطور که دیدید ساخت یک فوتر زیبا و حرفهای نیاز به پیچیدگی ندارد. کافی است از ساختار معنایی مناسب استایل واکنشگرا و کمی خلاقیت در طراحی استفاده کنید . با همین نمونه ساده میتوانید شروع کنید و بسته به نیاز سایت بخشهای دیگری نیز به فوتر اضافه کنید. ترکیب سادگی و کاربردی بودن، همان چیزی است که یک فوتر استاندارد را شکل میدهد.
