تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر

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

قسمت هشتم - اضافه کردن کد سرصفحه

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

بخش دوم)


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

دوباره یک 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 Comments

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

  1. سلام

    داداش کارت درسته :)

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

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

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

    موفق باشید

پاسخ دهید

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

")/*]]>*/
More in فونت
۵۰ فونت انگلیسی جدید و بسیار زیبا ۲۰۱۱

امروز 50 فونت جدید و داغ سال 2011 را از طرف سایت 1stwebdesigner برای شما آماده کرده ایم که امیدواریم...

Close