آموزش جامع طراحی وبلاگ(قسمت هشتم)

6 دیدگاه
قسمت هشتم - اضافه كردن كد سرصفحه

تبديل قالب به صفحه ي وب

بخش دوم)


اضافه كردن سرصفحه

دوباره يك div به صفحه اضافه كنيد كه مربوط به هدر است و اينبار داخل container بگذاريد.

...
<body>
 <div id="container">
  <div id="header">
  </div>
 </div>
</body>
...

حالا مي بايست تصويري كه ذخيره كرده ايد را به صفحه اضافه كنيد.پس

#header{
	background:url('images/header.jpg');
	height:146px
}

خط اول تصوير را به عنوان پس زمينه انتخاب مي كند.در خط دوم نيز ارتفاع تگ header را برابر با ارتفاع تصوير قرار مي دهد.
به نظرتان بهتر نيست لوگومان داراي لينك باشد.پس اولين خط را به صورت زير در بخش header وارد مي كنيم:

...
  <a href="http://fotolia.ir/?p=396" id="logo" title="آموزش كامل طراحي وب"><span>Fotolia Webdesign tutorial</span></a>
...

براي اينكه اين كد خام را به شكل دلخواه در آوريم از كد CSS زير استفاده كنيد:

#header a#logo{
	float:right;
	width:136px;
	height:53px;
	margin:53px 60px 0 0;
}
#header a#logo span{
    display:none
}

در بخش اول به مرورگر مي گوييم كه كد css را به لينكي اعمال كند كه داراي logo id باشد همچنين داخل header باشد.

در خط بعدي عنصرمان را در داخل header شناور مي كنيم به همين دليل در خط آخر مي توانيد با margin موقعيت اش را تغيير دهيد.خط هاي دوم و سوم هم همانطور كه مي دانيد مربوط به طول و ارتفاع عنصر لينك هستند.

در سبك بعدي تگ span اي را كه در داخل لينكي(a) با id ي logo هست انتخاب مي كنيم و با استفاده از display و مقدار none كاري مي كنيم كه نوشته ي داخل لينك يعني “Fotolia Webdesign tutorial” مخفي شود.با ادامه بحث در بخش آينده با ما باشيد.

در همین رابطه :   آموزش جامع طراحی وبلاگ(قسمت ششم)
دسته بندی : طراحي وب

6 نظر

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

        1. سلام دوست عزیز
          شما بفرمایید کجا مشکل دارید تا بنده کمک تون کنم . ما مخلص کاربران عزیز هستیم 🙂
          ایشالله نخواهد بود

          موفقیت

  1. سلام

    داداش کارت درسته 🙂

    درستت درد نکنه خیلی بالا مینویسی ….

    کلا سایتت خیلی باحال هست ! هم مطالبش هم طراحیش .

    سعی میکنم آدرس ساتت رو بخاطر بسپارم و از این به بد زود زود بهش سر بزنم .

    موفق باشید

    1. سلام دوست عزيز

      ممنونم.شما لطف داري.خوشحالم كه مطالب سايت به درد شما خورده است.
      ولي يعني به خاطر سپردن فتوليا،اينقدر سخته 😉

      موفقيت

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

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