ساخت هدر (لوگو،متن) 8

در این قسمت قصد داریم نحوه قرار دادن متن ، لوگو   را توضیح دهیم

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

h1 { }

حالا به قسمت body سند اچ تی ام ال خود رفته و یک تگ <h1> داخل تگ <div> هدر بسازید

<div id=”header”>  <h1>موضوع وبسایت</h1> </div>

خب حالا کد رو تست می کنیم همانگونه که مشاهده میکنید متن ما درون هدر قرار گرفته اما به شکل نامرتب

کد کلی

 

برای اینکه متن خود را به صورت بهتری در هدر نمایش دهیم بایستی به h1 خواصی را اضافه کنیم برای این کار به استایل رفته و مطابق زیر عمل می کنیم

ابتدا از خاصیت فونت برای نمایش بهتر متن استفاده می کنیم خاصیت font-family که آن را من به فونت Tahoma را اضافه کردم به شکل زیر

h1{
  font-family: Tahoma;
}

بعد از این کار چون متن ما فارسی است بایستی آن را راست چین کنیم به شکل زیر از خاصیت direction استفاده میکنیم مقادر ان را برابر rtl قرار می دهید تا به راست منتقل شود

h1{
  font-family: Tahoma;
  direction: rtl;

}

حالا متن ما به راست منتقل شده اما به هدر چسبیده است برای اینکه آن را از هدر فاصله دهیم از خاصیت margin-right استفاده می کنیم تا متن به راست منتقل گردد و مقدار آن را 30 پیکسل قرار دادیم

h1{
  font-family: Tahoma;
  direction: rtl;
  margin-right:30px;
}

به نظر می رسد که متن ما به صورت خیلی بزرگ نمایش داده می شود برای کوچک کردن متن از حاصیت font-size استفاده می کنیم و مقدار آن را برابر 1.7 قرار می دهیم

h1{
  font-family: Tahoma;
  direction: rtl;
  margin-right:30px;
  font-size: 1.7em;
}

برای اینکه متن از بالا هدر به وسط آن بیاید بایستی از خاصیت margin-top استفاده کنیم

h1{
  font-family: Tahoma;
  direction: rtl;
  margin-right:30px;
  font-size: 1.7em;
  margin-top: 50px;
}

 در آخر برای تغییر رنگ متن بایستی از خاصیت  color استفاده کنیم به این شکل

h1{
  font-family: Tahoma;
  direction: rtl;
  margin-right:30px;
  font-size: 1.7em;
  margin-top: 50px;
  color:  #000000;
}

امیدوارم خسته نشده باشید حالا که نحوه اضافه نمودن متن به هدر را آموختیم به بخش بعدی یعنی اضافه نمودن لوگو به هدر می رویم

برای ایجاد یک لوگو  یک id به نام logo می سازیم به شکل زیر

#logo{

}

مانند قبل به قسمت body سند اچ تی ام ال خود رفته و یک <div> در هدر بسازید و id را برابر logo قرار دهید

 <div id=”header”>
 <h1>موضوع وبسایت</h1>
 <div id=”logo“></div>
 </div>

حالا به استایل رفته و به id لوگوی خود می رویم تا تغییرات را اعمال کنیم

خاصیت اول عکس لوگو را اضافه می کنیم برای این کار از خاصیت  background-image  استفاده می کنیم و آدرس دهی می کنیم برای آدرس دهی از یک سایت که لینک مستقیم می دهد استفاده کنید و آدرس را در قسمت url قرار دهید

#logo{
   background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
}

حالا بایستی اندازه لوگو را مشخص کنیم من اینجا  مقدار عکس خود را 128 در 128 قرار دادم مقدار طول از خاصیت height و عرض از خاصیت width به شکل زیر

#logo{
   background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
   width: 128px;
   height: 128px;
}

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

اول به استایل h1 میرویم و به این شکل خاصیت زیر را اضافه می کنیم

h1{
  font-family: Tahoma;
  direction: rtl;
  margin-right:30px;
  font-size: 1.7em;
  margin-top: 50px;
  color:  #000000;
  float: right;
}

حال به استایل logo میرویم و کد شناور چپ را اضافه میکنیم

#logo{
   background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
   width: 128px;
   height: 128px;
   float:  left;
}

برای اینکه لوگو از گوشه چپ و بالای هدر فاصله بگیرد از خاصیت margin استفاده کنید

#logo{
   background-image: url(http://s3.picofile.com/file/7503626769/1q.png);
   width: 128px;
   height: 128px;
   float:  left;
   margin-left: 10px;
   margin-top: 10px;
}

خب تا اینجا ما لوگوی خود را ساختیم اما اگر بخواهیم لوگوی ها به صورت لینک دار باشد بایستی چه کار کنیم این کار ساده است .

فقط کافی است که یک تگ لینک <a> به قبل از تگ div این لوگو اضافه کنید مانند زیر

<a href=”www.javaweb.blogsky.com”> <div id=”logo”></div> </a>

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

برای این کار به قسمت استایل header رفته و خاصیت background-color آن را به رنگ خاکستری تغییر دهید

#header{
width: 960px;
height: 150px;
padding: 0;
background-color: #EEEEEE;
background-image: none ;
border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}

در پایان کد کلی این قسمت به صورت زیر است

 

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

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