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

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

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

بخش دوم)


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

دوباره یک 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” مخفی شود.با ادامه بحث در بخش آینده با ما باشید.

در همین رابطه :   ایجاد کدهای CSS با شبیه ساز Photoshop
دسته بندی : طراحي وب

6 نظر

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

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

          موفقیت

  1. سلام

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

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

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

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

    موفق باشید

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

      ممنونم.شما لطف داری.خوشحالم که مطالب سایت به درد شما خورده است.
      ولی یعنی به خاطر سپردن فتولیا،اینقدر سخته ;)

      موفقیت

پاسخ دهید

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

More in PHP, طراحي وب
چگونه در PHP نوع Array را به Object و نوع Object را به Array تبدیل کنیم؟

در زبان برنامه نویسی php دو نوع داده خیلی مهم بنام اشیا (objects) و آرایه ها(Arrays) داریم . در بعضی...

Close