آموزش ساخت header (قسمت اول-پروژه اول)

طراحی سایت اختصاصی | سید عباس حسینی 12 مهر 1399 1

آموزش ساخت header (قسمت اول-پروژه اول)

به نام یگانه خلاق عالم.امروز با آموزش ساخت header (قسمت اول-پروژه اول) خدمت شما عزیزان هستیم. و آن را به سرانجام میرسانیم قبل از شروع این عمل لازم است چند نکته در مورد نحوه کار نیز مطرح کنیم.

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

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

قدم اول: ایجاد تگ header

تگ header در طراحی وب سایت خیلی مهم است،زیرا ما در آن منوی اصلی وب سایت را ایجاد میکنیم. در این قسمت های قبل توضیح دادیم که header مانند سر و صورت انسان است. پس یک منوی header خوب میتواند مخاطب را بهتر راهنمایی کند.

<header>
</header>

قدم دوم: ایجاد تگ nav

زمانی تگ nav را ایجاد میکنیم که بخواهیم یک منو ایجاد کنیم یا یک نوار در سایت ایجاد کنیم. که میتواند منوی اصلی سایت باشد به علت اینکه در یک وب سایت ممکن است چندین تگ nav وجود داشته باشد ما نیز به آن id  خواهیم داد تا بتوانیم آن را به وسیله انتخابگر هایCSS  تفکیک و شناسایی کنیم تا دستورات CSS به روی آن اعمال کنیم.

<header>
    <nav id="middle_header">
    </nav>
</header>

قدم سوم: ایجاد کردن فضا برای لوگو و منوی اصلی سایت

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

<header>
    <nav id="middle_header">
        <div class="logo">
        </div>
        <ul class="menu">
        </ul>
    </nav>
</header>

این نکته را در نظر داشته باشید به علت زیاد تکرار شدن این تگ ها در وب سایت حتما به آنها class و یا id بدهید.

قدم چهارم: ایجاد منو

گفتیم که تگ ul برای ایجاد لیست استفاده می شود حال برای مجموعه آن لیست نیاز به تگ داریم، تگ li برای قرار گرفتن در این مجموعه ساخته شده است. حال برای لینک کردن اعضا و عناصر این مجموعه نیاز به تگ a داریم.

با قرار گرفتن آدرس در href=”” به ما این امکان را میدهد که بتوانیم عملیات لینک را به درستی انجام دهیم.

<header>
    <nav id="middle_header">
        <div class="logo">
        <ul class="menu">
            <li><a href="">خانه </a></li>
            <li><a href="">درباره من </a></li>
            <li><a href="">سرآغاز </a></li>
            <li><a href="">تماس با من</a></li>
        </ul>
    </nav>
</header>

نکته در حال حاضر مشاهده می کنید که به تگ های فوق هیچ گونه class و یا id داده نشده و این سوال را دارید که این عناصر چگونه توسط CSS شناسایی می شوند درحالی که با مابقی قسمت های سایت ترکیب نمی شوند و تداخل ایجاد نمی کنند در ادامه آن را توضیح خواهیم داد.

قدم پنجم: ایجاد کردن لوگو و همینطور متن لوگو

تابه اینجا ساختار اصلی منوی سایت خودتان را ایجاد کردید حالا می خواهیم لوگو را نیز ایجاد کنیم اکثر سایت ها از لوگوهای عکسی استفاده می کنند، ولی بعضی نیز از لوگو های متنی نیز استفاده می کنند. برای این کار از تگ های     H1 P  استفاده خواهیم کرد.تگ h1 زمانی ایجاد می شود که ما بخواهیم یک تیتر ایجاد کنیم. این تگ خصوصیات خودش را دارد که می توانیم به bold  بودن آن و همینطور پیشفرض فونت بزرگ تری دارد.تگ p نیز که در جلسات قبلی توضیح دادیم برای ایجاد کردن یک متن به کار می رود. شما می توانید با استفاده از تگ a لوگو خودتان را به برگه توضیحات در مورد خودتان لینک کنید.

<!-- header -->
<header>
    <nav id="middle_header">
        <div class="logo">
            <h1>سید عباس حسینی </h1>
            <p>آموزش رایگان و پروژه محور طراحی وب سایت </p>
        </div>
        <ul class="menu">
            <li><a href="">خانه </a></li>
            <li><a href="">درباره من </a></li>
            <li><a href="">سرآغاز </a></li>
            <li><a href="">تماس با من</a></li>
        </ul>
    </nav>
</header>
<!-- end header -->

قدم ششم: ایجاد استایل ها و حالت های نمایشی

حال صفحه خودتان را یک بار بروز رسانی کنید متوجه سادگی و بدون زیبایی صفحه خودتان شده اید. حالا زمان این است که استایل ها و  دستورات CSS را برای زیبایی و خاص کردن وب سایت استفاده کنیم.

html{scroll-behavior: smooth;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,textarea,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {background: transparent;border: 0;font-family:IRANSans;margin: 0;outline: 0;padding: 0;}
@font-face
{
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/IRANSansWeb_Black.eot');
    src: url('fonts/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face
{
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('fonts/IRANSansWeb_Bold.eot');
    src: url('fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face
{
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('fonts/IRANSansWeb_Medium.eot');
    src: url('fonts/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face
{
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('fonts/IRANSansWeb_Light.eot');
    src: url('fonts/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face
{
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('fonts/IRANSansWeb_UltraLight.eot');
    src: url('fonts/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face
{
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/IRANSansWeb.eot');
    src: url('fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb.ttf') format('truetype');
}
input,button{ cursor:pointer;font-family:IRANSans;}
a{text-decoration:none;color:inherit;}
.clear{clear: both;}
body
{
    direction:rtl;
    height:auto;
    font-size:14px;
    background-color:#e3e1e2;
}

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

ایجاد استایل header:

header
{
	height:120px;
	margin:0 auto;
	width:70%;
	background-color:orange;
	background-image:url(hdr.png);
}

برای استایل دادن به تگ header از دستورات بالا استفاده کردیم که حالا در مورد آنها تک تک توضیح خواهیم داد.

خصوصیات دستور Height:

دستور height همان طور که از معنی کلمه مشخص است به معنی ارتفاع است ما با استفاده از این دستور ارتفاع لازم را به عنصرهای HTML میدهیم در این دستور می توانیم مقادیر را به صورت درصد استفاده کنیم ولی بهترین حالت در این قسمت مشخص کردن مقدار آن به صورت px است.

خصوصیات دستور Margin:

زمانی که بخواهیم از خارج یک عنصر HTML آن را فاصله دار کنیم و به آن فاصله بدهیم از دستور فوق استفاده می کنیم در این قسمت شما مشاهده می کنید که مقادر آن را (0 auto;) مشخص شده.

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

خصوصیات دستور Width:

کلمه width به معنی عرض است هر عنصر در یک وب سایت دارای یک ارتفاع و یک عرض است و به صورت پیشفرض عرض همه عناصر ۱۰۰ درصد صفحه مرورگر است. در این قسمت ما آن را درصد مشخص کردیم این دستور را می توانید به صورت px مقدار دهی کنید.

خصوصیات دستور Background-image:

یکی از دستورات پرکاربرد در زبان CSS دستور background است. که به صورت عکس و رنگ استفاده می شود دستور فوق به معنی پس زمینه است ما با استفاده از url که به معنی محل قرار گیری آدرس عکس است می توانیم پس زمینه عکس داشته باشیم.

ایجاد استایل middle_header:

#middle_header
{
	height:100%;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-template-rows:100%;
}

زمان آن رسیده که قسمت مرکزی header را استایل دهی کنیم. این قسمت دارای قسمت های اصلی header می باشد.

خصوصیات دستور Display:

دستور فوق مقادیر عددی دریافت نمی کند بلکه مقادیر آن نوشتاری و از کلمات کلیدی است.از جمله آنها می توانیم به block،inline،grid اشاره کنیم.Block به مسدود کردن است. یعنی این امکان وجود ندارد عنصر دیگری با آن در یک ردیف قرار بگیرند.Inline به معنی درون خطی است این دستور به ما این امکان را می دهد چندین عنصر را در یک خط کنار یکدیگر داشته باشیم.Grid نیز به معنی شبکه است و از این دستور برای بخش بندی استفاده می کنم.

خصوصیات دستور grid-template-columns:

کلمه columns  به معنی ردیف است با استفاده از این دستور می توانیم مشخص کنیم برای این عنصر نیاز به چند ردیف داریم مقادیر را می توانیم با px و درصد و همیطور اگر بخواهیم قسمت ها یک اندازه باشند از عبارت فوق که در این تگ استفاده شده استفاده کنیم در قسمت اول تعداد را وارد کنید.

خصوصیات دستور grid-template-rows:

این دستور بر خلاف دستور قبل که ایجاد ردیف میکرد ایجاد ستون میکند و مانند دستور قبل مقادیر نیز دریافت می کند.

ایجاد استایل menu:

.menu
{
	list-style-type:none;
}

خصوصیات دستور list-style-type:

قابل ذکر است هر لیست یک list-style-type خاص دارد که می توانیم آن را به صورت عکس و یا دایره و مربع مشخص کنیم. اما در این قسمت ما نیاز به وجود آنها نداریم برای همین مقدار آن را none قرار می دهیم.

ایجاد استایل محتوای منو:

.menu > li
{
	display:inline;
	line-height:120px;
	margin:0 5px;
    direction: rtl;
    cursor: pointer;
    color: #fff;
    background: #405060;
    border: 1px solid #586a7e;
    padding: 4px 15px 6px 15px;
    -webkit-box-shadow: 0 0 4px #16222e;
    transition:.5s ease-in-out;
}

زمانی که در حال توضیح قسمت   HTML بودیم گفته شد که به این عناصر class  و id داده نشد پس چگونه شناسایی می شوند که باعث اختلال در قسمت های دیگر وب سایت نمی شود.زمانی که به یک عنصر id  و یا class داده می شود می توانیم با علامت (>)به داخل آن نفوذ کنیم و بعد از نفوذ دستورات را اعمال کنیم.

خصوصیات دستور line-height:

گفته بودیم که CSS از لغات ساده انگلیسی استفاده می کند دستور فوق متشکل از دو کلمه Line به معنی خط و height  به معنی ارتفاع است این دستور زمانی استفاده می شود که بخواهیم فاصله بین دو خط را با یکدیگر مشخص کنیم.

خصوصیات دستور direction:

ترتیب چیدمان در زبان فارسی از راست به چپ و در زبان انگلیسی از چپ به راست است. دستور فوق این ترتیب را برای ما ایجاد می کند. اگر بخواهیم راست به چپ باشد از عبارت rtl که مخفف right to left است استفاده می کنیم و اگر بخواهیم برعکس آن باشد از عبارت ltr استفاده می کنیم.

خصوصیات دستور cursor:

شما نیز مشاهده کرده اید زمانی که ماوس روی یک قسمت از سایت قرار می گیرد علامت دست به نشانه کلیک کردن و یا علامت های دیگر به وجود می آید. این حالت ها را با دستور فوق انجام می دهند عبارت pointer این امکان را به ما می دهد با قرار گرفتن ماوس رو یک موضوع علامت دست ظاهر شود.

خصوصیات دستور Color:

کلمه فوق مشخص است که به معنی رنگ است در این قسمت نیز برای همین حالت استفاده می شود که رنگ کلمه را تغییر دهید.

خصوصیات دستور Background-color:

دستور background به معنی پس زمینه است و یکی از حالت هایی که ایجاد می کند رنگ پس زمینه است.

خصوصیات دستور Border:

Border زمانی استفاده می شود که نیاز به یک حاشیه برای یک قسمت باشد border حالت های مختلفی دارد که ما در این قسمت فقط از نوع خطی آن استفاده کرده ایم.

خصوصیات دستور Padding:

نقطه مقابل margin که گفتیم از خارج فاصله ایجاد میکند کلمه padding است که از داخل فاصله را برای عنصر ایجاد می کند و همانند عقربه های ساعت مقدار دهی می شود بالا راست پایین چپ

خصوصیات دستور box-shadow:

دستوری که مشاهده می کنید برای ایجاد سایه یک قسمت و یا یک متن است.

خصوصیات دستور Transition:

زمانی که روی یک عنصر قرار میگیریم بعد از گذشت چند ثانیه و یاکمتر تغییرات را مشاهده می کنیم این حالت های نمایشی با دستور فوق ایجاد می شود.

ایجاد استایل شناور منو:

 .menu > li:hover
 {
 	color: #fff;
		border: 1px solid #708296;
 	background: #526374;
 }

نکته فایل توجه در قسمت selector توضیح دادیم که hover چیست و چه کار بردی در طراحی وب دارد.

ایجاد استایل logo:

.logo
{
	color:#fff;
	background-image:url(logo.png);
	background-repeat:no-repeat;
	background-position:90% 35%;
}

ایجاد استایل logo > h1,    logo > p:

.logo > h1
{
	padding-top:25px;
}
.logo > h1,
.logo > p
{
	padding-right:120px;
}

نکته ای که مشاهده می کنید یک دستور برای دو عنصر است گفته بودیم که در طراحی وب باید کمترین دستور نوشته شود و بیشترین استفاده داشته باشیم برای همین می توانیم از این حالت استفاده کنیم. بعد از قرار دادن تمام کد ها در جای مناسب خود شما header زیر را مشاهده خواهید کرد.می توانید فایل کامل این قسمت را از طریق لینک دانلود نمایید.

قسمت های دیگر این مجموعه:

آموزش طراحی سایت قسمت دوم

آموزش طراحی سایت قسمت آخر

 

 



یک پاسخ به “آموزش ساخت header (قسمت اول-پروژه اول)”

  1. سید مسعود حسینی گفت:

    عالی برادر، پرقدرت ادامه بده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *