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

2 دیدگاه

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

بخش چهارم)

17.حالا قصد داريم تصوير غروب دل انگيزي كه در قالب گذاشته ايم را به صفحه ي وب منتقل كنيم.پس 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 است.

در همین رابطه :   آموزش های مفید در محیط Microsoft Sql Server ( قسمت سوم )

به 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 ;
}

در مورد ما،با فاصله اي 80 پيكسلي اين مشكل حل شد.شايد در مورد طرح شما كمي متفاوت باشد.

حالا وقت افزودن ساعت و تاريخ در بخش قرمز پايين و چپ رسيده است.يك 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 مشاهده نماييد.

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

2 نظر

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

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