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

تبلیغات
کانال تلگرام فتولیا

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

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

بخش دوم)


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

دوباره یک 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 HTML 5
دانلود رایگان ۱۰ قالب واکنش گرای Bootstrap

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

Close