ساخت هدر و بخش معرفی صفحه اصلی

درس 43 از دوره آموزش HTML و CSS ارومیا دیزاین

کاربر در اولین بخش صفحه باید بفهمد این سایت درباره چیست، از کدام مسیر می تواند جلو برود و اقدام اصلی کجاست. در این درس، ساخت هدر و بخش معرفی صفحه اصلی را با یک پروژه فارسی انجام می دهیم: سربرگ شامل برند و راهبری است و بخش معرفی، عنوان، توضیح، تصویر و دو لینک اقدام دارد. این پروژه، آموخته های چیدمان و طراحی واکنش گرا را به یک خروجی منسجم تبدیل می کند.

فایل پروژه درس 43 + پاسخ تمرین

شامل HTML، CSS، تصویر و فونت محلی، پاسخ مستقل و راهنمای اجرا؛ بدون نیاز به اینترنت.

دانلود پروژه درس 43 (ZIP) و پاسخ تمرین

فایل را استخراج کنید و index.html را باز کنید.

قبل از کدنویسی، پیام صفحه را مشخص کنید

ابتدا سه پاسخ روشن بنویسید: سایت چه کاری انجام می دهد، برای چه مخاطبی است و کاربر بعد از خواندن معرفی چه اقدامی انجام دهد. عنوان مبهمی مانند «به دنیای ما خوش آمدید» به تنهایی موضوع صفحه را توضیح نمی دهد. عنوان نمونه ما درباره ساخت سربرگ و معرفی است و لینک اصلی به بخش شروع گفتگو می رود؛ در پروژه واقعی باید متن و مقصد را با خدمت واقعی هماهنگ کنید.

برای افزایش اعتماد، از ادعا یا آمار ساختگی استفاده نکنید. اگر سابقه، گواهی یا نتیجه پروژه ای را نمایش می دهید، باید قابل اتکا باشد. بخش معرفی نباید همه متن صفحه را در خود جا بدهد؛ یک پیام روشن، توضیح مرتبط و مسیر اقدام کافی است. پروژه صفحه معرفی خدمات در HTML پایه ساختاری مناسبی برای این جلسه است.

هدر با بخش معرفی چه تفاوتی دارد؟

header عنصر معنایی معرفی یا راهبری است و در ابتدای صفحه می تواند برند و منو را دربرگیرد. «Hero» نام رایج طراحی برای بخش برجسته معرفی است و تگ HTML مخصوصی به نام hero نداریم. در نمونه، سربرگ بیرون main و معرفی در یک section داخل main قرار دارد. این جداسازی کمک می کند راهبری سایت را با محتوای اصلی همان صفحه اشتباه نگیریم.

<header class="site-header">
  <div class="container header-inner">
    <a class="brand" href="#intro">ارومیا دیزاین</a>
    <nav aria-label="راهبری اصلی">
      <ul class="nav-list">
        <li><a href="#services">خدمات</a></li>
        <li><a href="#projects">پروژه ها</a></li>
        <li><a href="#contact">تماس</a></li>
      </ul>
    </nav>
  </div>
</header>

لینک برند در این پروژه به ابتدای معرفی همان صفحه می رود. در سایت چندصفحه ای معمولا مقصد آن صفحه اصلی است. همه لینک های منو مقصد واقعی دارند و از href خالی برای شبیه سازی تعامل استفاده نکرده ایم. راهبری نمونه، مستقیم و چندخطی است؛ برای الگوی باز و بسته شدن، درس منوی واکنش گرا را ببینید.

ظرف مشترک؛ تراز سربرگ و محتوای صفحه

* { box-sizing: border-box; }

.container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.site-header {
  background: white;
  border-bottom: 1px solid #c4d9e4;
}

پس زمینه سربرگ تمام عرض است، اما محتوای آن داخل container با بخش معرفی هم تراز می شود. در فضای کم، ظرف از عرض والد 32px کمتر است و در فضای زیاد از سقف 1120px عبور نمی کند. این روش فاصله کناری ثابت و حداکثر عرض خوانا می سازد. اگر بعدا padding یا border اضافه کردید، اثر آن را با مدل جعبه CSS بررسی کنید.

چیدمان برند و منو با Flexbox

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

والد اول رابطه برند و nav را کنترل می کند و فهرست داخلی، رابطه لینک های منو را. wrap اجازه می دهد وقتی فضا کافی نیست، محتوا به خط بعد برود. به همین دلیل ارتفاع ثابت برای سربرگ تعیین نکرده ایم؛ لینک بلندتر یا بزرگ نمایی نباید متن را ببرد. justify-content فضای آزاد را تقسیم می کند و gap فاصله پایه میان آیتم ها را حفظ می کند.

در صفحه فارسی، dir=”rtl” و جهت عادی row کافی است؛ معکوس کردن بی دلیل ترتیب دیداری، مسیر خواندن را پیچیده می کند. اگر قوانین فلکس را فراموش کرده اید، درس چیدمان منو و بخش ها با Flexbox را مرور کنید. برای منوی طولانی، ممکن است نقطه شکست یا الگوی راهبری دیگری لازم شود؛ این پروژه سه لینک روشن دارد.

ساختار بخش معرفی؛ یک عنوان و دو مسیر روشن

<section class="container hero" id="intro" aria-labelledby="hero-title">
  <div class="hero-copy">
    <p class="eyebrow">پروژه آموزشی HTML و CSS</p>
    <h1 id="hero-title">سربرگ خوانا و معرفی روشن برای صفحه اصلی</h1>
    <p>توضیح کوتاه و مرتبط با عنوان و نیاز مخاطب.</p>
    <div class="actions">
      <a class="button button-primary" href="#contact">شروع گفتگو</a>
      <a class="button button-secondary" href="#projects">دیدن پروژه</a>
    </div>
  </div>
  <img class="hero-image" src="hero-illustration.webp"
       width="960" height="720"
       alt="نمای شماتیک صفحه وب با سربرگ و متن معرفی">
</section>

در این صفحه یک h1 اصلی داریم و بخش های بعدی با h2 ادامه پیدا می کنند. eyebrow متن کوتاه بالای عنوان است و نباید جای عنوان واقعی را بگیرد. aria-labelledby به عنوان موجود اشاره می کند تا نام بخش مشخص باشد. نام کلاس hero صرفا انتخاب ماست؛ معنا و ساختار را عناصر HTML و عنوان ها فراهم می کنند.

ترتیب HTML ابتدا متن و لینک ها و سپس تصویر است. در نسخه باریک همین ترتیب خواندن حفظ می شود. تصویر پروژه یک شماتیک آموزشی است و متن جایگزین نیز همین نقش را توضیح می دهد. تصویر تزئینی محض می تواند alt خالی داشته باشد، اما برای محتوای اطلاعاتی باید توضیح مناسب بنویسید. درس دسترس پذیری HTML اصول انتخاب نام و متن جایگزین را مرور می کند.

معرفی تک ستونی؛ بهبود در فضای بیشتر

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding-block: clamp(32px, 5vw, 72px);
}

.hero > * { min-width: 0; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

در حالت پایه، متن و تصویر زیر هم هستند. از عرض viewport برابر 900px به بالا، دو ستون ایجاد می شود. مقدار 1.1fr برای متن سهم کمی بیشتری پیشنهاد می کند. align-items: center اجزای گرید را در راستای بلوکی داخل ناحیه هایشان تراز می کند؛ این دستور کل صفحه را به وسط نمایشگر نمی برد. عدد 900 با محتوای نمونه انتخاب شده و برای تمام سایت ها ثابت نیست.

از height: 100vh برای اجبار معرفی به یک صفحه کامل استفاده نکرده ایم. محتوای واقعی، نوار مرورگر موبایل و بزرگ نمایی می توانند فضای مورد نیاز را تغییر دهند. ارتفاع محتوا را آزاد نگه دارید و اگر طراحی به حداقل ارتفاع نیاز دارد، آن را با آزمایش اضافه کنید. پوشاندن مشکل با overflow: hidden ممکن است عنوان یا لینک ضروری را ببرد.

عنوان و تصویر؛ خوانایی با اندازه منعطف

h1 {
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

اندازه عنوان بین حداقل و حداکثر می ماند، اما ارتفاع آن ثابت نیست؛ عنوان بلند می تواند چندخطی شود. تصویر نسبت طبیعی خود را حفظ می کند و فایل آن داخل ZIP قرار دارد. برای تفاوت فایل مناسب با اندازه نمایش و نیز فونت منعطف، درس تصاویر و تایپوگرافی واکنش گرا را مرور کنید. clamp به تنهایی جای آزمایش خوانایی و بزرگ نمایی را نمی گیرد.

متن را روی تصویر شلوغ قرار نداده ایم تا خوانایی به یک لایه رنگ حدسی وابسته نباشد. اگر طراحی واقعی به تصویر پس زمینه نیاز دارد، کنتراست همه حالت ها و برش سوژه را بررسی کنید؛ درس تصویر پس زمینه تفاوت cover و contain را توضیح می دهد. تیتر را هم داخل تصویر ننویسید وقتی همان پیام باید به صورت متن HTML در دسترس باشد.

ساختار هدر و بخش معرفی؛ برند و راهبری، عنوان و توضیح، لینک اقدام مشخص با فونت یکان بخ — سربرگ راهبری را فراهم می کند؛ بخش معرفی پیام و اقدام اصلی را روشن می کند.

دکمه اقدام؛ ظاهر دکمه، معنای لینک

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 2px solid #075985;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

.button-primary { background: #075985; color: white; }
.button-secondary { background: white; color: #075985; }

هر دو کنترل، لینک هستند چون به مقصد می روند؛ ظاهر دکمه ای دلیل استفاده از button نیست. اگر قرار باشد فرم ارسال شود یا پنل باز شود، نقش و رفتار مناسب دیگری نیاز داریم. متن لینک باید نتیجه انتخاب را توضیح دهد؛ «شروع گفتگو» و «دیدن پروژه» روشن تر از چند بار تکرار «کلیک کنید» هستند.

رنگ و پرشدگی، اقدام اصلی را از اقدام دوم متمایز می کنند، اما تمایز فقط رنگی نیست؛ عنوان هر لینک متفاوت و قابل فهم است. wrap هم اجازه می دهد در فضای کم، کنترل ها به خط بعد بروند. برای ظاهر و رنگ، رنگ و پس زمینه CSS و کادر و گوشه گرد را مرور کنید. نشانه فوکوس را نگه دارید تا لینک با صفحه کلید هم پیدا شود.

چرا لینک دانلود این درس برجسته است؟

فایل پروژه بخشی از مسیر یادگیری است، پس نباید میان لینک های متنی عادی گم شود. در این درس، کادر روشن با مرز نارنجی، عنوان «فایل پروژه درس 43 + پاسخ تمرین» و لینک نارنجی تیره با نوشته سفید قرار داده ایم. زیرخط و عنوان صریح نیز کمک می کنند تشخیص لینک فقط به رنگ وابسته نباشد. همین بخش را در شروع درس و نزدیک پایان تکرار کرده ایم تا کاربر برای پیدا کردن فایل مجبور به جستجو نباشد.

در پروژه خودتان نیز برای هر اقدام مهم، محل و عنوان مشخص انتخاب کنید. افزایش تعداد رنگ ها به تنهایی سلسله مراتب نمی سازد؛ یک اقدام اصلی روشن از چند دکمه هم وزن مفیدتر است. لینک دانلود این مقاله به فایل واقعی ZIP اشاره می کند و محتویات آن در همان کادر توضیح داده شده است.

تمرین مستقل و پاسخ درس 43

در بخش practice پروژه، لینک های اقدام در حالت پایه زیر هم هستند. از عرض حداقل 640px آن ها را ردیفی کنید و اجازه شکستن خط بدهید. قواعد پایه را حذف نکنید؛ فقط تغییر لازم برای فضای بیشتر را اضافه کنید. سپس عنوان لینک دوم را طولانی کنید و رفتار را ببینید.

@media (min-width: 640px) {
  .practice .practice-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

پاسخ داخل solution.css قرار دارد و از ابتدا فعال نیست. برای مقایسه، خط زیر را پس از style.css در head اضافه کنید. در 639 و 640 پیکسل نتیجه باید فرق کند؛ در عرض باریک، کنترل ها همچنان عمودی می مانند.

<link rel="stylesheet" href="solution.css">

بازبینی پروژه؛ متن واقعی را جایگزین کنید

صفحه را در عرض های 320، 768، 899، 900 و 1280 پیکسل بررسی کنید. عنوان را دو برابر و یک لینک بلند به منو اضافه کنید. در بزرگ نمایی 200 درصد، هیچ بخش مهمی نباید پشت تصویر یا برش مخفی شود. لینک های برند، منو و اقدام را با Tab دنبال کنید و به مقصدشان برسید؛ در پروژه، مقصدها واقعا در همان صفحه وجود دارند.

لینک پرش به main هم در ابتدای سند قرار دارد و هنگام فوکوس نمایان می شود. این نمونه فرم یا سرویس ثبت درخواست ندارد؛ بخش تماس فقط مقصد آموزشی است. در سایت واقعی، متن اقدام را زمانی نهایی کنید که مسیر بعد از انتخاب هم آماده و قابل استفاده باشد. طراحی بخش معرفی با رنگ و تصویر تمام نمی شود؛ مسیر اقدام باید کامل باشد.