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

بخش چهارم)

۱۷.حالا قصد داریم تصویر غروب دل انگیزی که در قالب گذاشته ایم را به صفحه ی وب منتقل کنیم.پس PS را باز کرده و تصویر فوق را کپی کرده و ذخیره نمایید.مثلا:

سایز اصلی تصویر فوق

ارتفاع این تصویر برای ما مهم است که برابر است با px255.به EW بازگشته و پایین و خارج از header id کد زیر را اضافه کنید.

<div id="vista">
</div>

در بخش css صفحه یعنی تگ style،کد css زیر را اضافه کنید.

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

خط اول این سبک،فایلی را که ذخیره کرده ایم به عنوان پس زمینه ی div انتخاب می کند و خط دوم نیز همان ارتفاع تصویر است که برای div نیز در نظر گرفتیم.

حالا می توانید اضافه شدن این بخش را نیز ببینید.اگر در مراحل قبل یادتان باشد یک نوار کج در گوشه ی این بخش ایجاد کردیم که وقت اضافه کردنش رسیده است.پس یک کپی از سند قالب در PS ایجاد کرده و تمام لایه ها به جز layer set روبان را مخفی کنید (با برداشتن علامت چشم).سپس به منوی Image > Trim رفته و دکمه ی رادیویی اول (Transparent Pixels) را انتخاب و ok نمایید.می بینید که اضافات کار خذف شذ و فقط روبان مورد نظر شما مانده است.حالا از منوی File > Save for web گزینه ی PNG-24 را به عنوان فرمت تصویر انتخاب کرده و با نام roban ذخیره کنید.این فرمت باعث می شود که شفافیت تصویر مخصوصا سایه ها، با کیفیت بالایی حفظ شود.width تصویر px126 و height آن px116 است.

به EW باز گشته و کد قبلی را به این صورت تغییر دهید:

<div id="vista">
    <div id="roban"></div>
  </div>

کد css زیر را هم به بخش استایل ها اضافه کنید.

#vista #roban{
	background:url('images/roban.png');
	width:126px;
	height:116px;
}

اگر نتیجه را ببینید مشاهده می کنید که تصویر مورد نظر اضافه شده است ولی به سمت راست نگهدارنده ی خود چسبیده است.(احتمالا اگر direction صفحه را به ltr تغییر دهید،به سمت چپ می چسبد).پس باید کمی فاصله از طرف راست بین roban و نگهدارنده اش ایجاد کنید.برای این کار کد بالا را به شکل زیر تغییر دهید:

#vista #roban{
	background:url('images/roban.png');
	width:126px;
	height:116px;
	margin:0 80px 0 0 ;
}

در مورد ما،با فاصله ای ۸۰ پیکسلی این مشکل حل شد.شاید در مورد طرح شما کمی متفاوت باشد.

حالا وقت افزودن ساعت و تاریخ در بخش قرمز پایین و چپ رسیده است.یک div دیگر داخل vista اضافه می کنیم و حالا داریم:

<div id="vista">
    <div id="roban"></div>
      <div id="DateTime">8:14 2009/08/22</div>
</div>

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

#vista #DateTime{
	float:left;
	border:1px aqua solid;
	margin:70px 0 0 130px
}

با اضافه کردن خط اول،محتویات قابل رویت می شوند ولی اصلا در جای مناسبی قرار ندارند.پس می بایست با استفاده از خصوصیت هایی مثل margin آنها را در جای مناسبش قرار دهیم.برای همین خط دوم را اضافه کردیم تا بهتر بتوانیم عنصر را موقعیت دهی کنیم.بعد از آن با کمی آزمون و خطا به خط سوم رسیدیم که تقریبا موقعیت دلخواه ما را به DateTime می داد.

حالا وقت آن است که روی شکل ظاهری عنصر کار کنیم.

#vista #DateTime{
	float:left;
	margin:70px 0 0 130px;
	font:bold 1.6em arial;
	color:#fff;
	text-shadow: #fff 0px 0px 6px;
}

فکر می کنم به راحتی این کد ها را درک می کنید فقط در مورد خط آخر از یک خصوصیت CSS3 استفاده شده است برای ایجاد سایه اطراف متن.این افکت را می توانید در مرورگرهای جدید مثل Opera مشاهده نمایید.