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

بخش سوم)

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

در این بخش می خواهیم منوهای بالای صفحه را اضافه کنیم.قبل از این کار باید عکس ها را از فایل قالب استخراج کنید.به PS بر می گردیم و روی نوار عنوان سند قالب راست کلیک کرده و duplicate را انتخاب می کنیم.در سند جدید علامت چشم را در پالت لایه ها از کنار تمام لایه ها بر دارید به جز دو لایه ی Menu و MenuHover .لایه ی MenuHover را به زیر لایه ی دیگر برده و بعد از Trim (حذف اضافات) با فرمت PNG ذخیره کنید. حالا به EW رفته و کد HTML زیر را بعد از لینک لوگو اضافه کنید.

...
   <div id="TopMenu">
    <ul>
     <li id="home"><a href="#"></a></li>
     <li id="contact"><a href="#"></a></li>
     <li id="sitemap"><a href="#"></a></li>
    </ul>
   </div>
...

همانطور که مشاهده می کنید از یک div به عنوان نگهدارنده ی این بخش استفاده شده است.همچنین از جادوی لیست ها + خصوصیت float سی اس اس برای استخوان بندی لینک ها استفاده کرده ایم. اگر موافق هستید به نوبت کد CSS این بخش را بررسی می کنیم:

#header #TopMenu{
	float:left;
	width:160px;
	margin:80px 0 0 90px;
}

در این سبک،با استفاده از خصوصیت float،عنصر مان را در سمت چپ(بر عکس لینک لوگو) والدش،شناور کرده ایم.در خط سوم برای اینکه عنصر را دقیقا در موقعیت مورد نظر قرار دهیم،px80 از بالا و px90 از چپ با عنصر والدش فاصله انداخته ایم.

header #TopMenu ul{
    list-style:none;
    margin:0;
    padding:0
}

از این کد ،برای اعمال تنظیمات مان بر روی عنصر والد لیست(ul) استفاده کرده ایم.مثلا در خط اول،بالت های پیش فرض لیست ها را محو کردیم.مرورگرهای مختلف ممکن است فاصله های متفاوتی را از داخل (padding) و خارج (margin) لیست ها با عناصر کناری در نظر بگیرند که برای همین مقدار صفات بعدی را ۰ گذاشتیم.

#header #TopMenu ul li{
    float:right;
    width:35px;
    height:26px;
    margin:0 0 0 18px
}

بعد از تربیت والد لیست،نوبت به بچه های لیست می رسد که درست بشند.گذشته از انتخابگر CSS،دوباره عناصر فرزند لیست(li) ها را به سمت راست شناور کرده ای،چون به صورت پیش فرض زیر هم هستند.در خط دوم،طول،خط سوم،ارتفاع و در آخرین خط نیز یک فاصله ی px18 بین آنها ایجاد می کنیم(دعوا نشه).

#header #TopMenu ul li a{
    display:block;
    width:35px;
    height:26px;
}

همانطور که می دانید،لینک ها (a) عناصری inline هستند یعنی در خط فعلی شکست ایجاد نمی کنند.این خصوصیت اکثر مواقع خوب جواب میدهد ولی در بعضی جاها نیاز داریم که این عناصر را کمی خشن تر و در واقع Block کنیم مثل تگ p,div و … .در خط اول همین کار را کرده ایم تا به راحتی بتوانیم طول و عرض لینک را با محتوای خالی تغییر دهیم.

header #TopMenu ul li#home{
    background:url('images/top-menu.png') no-repeat -101px 0;
}
#header #TopMenu ul li#home:hover{
    background:url('images/top-menu.png') no-repeat -101px -26px;
}

#header #TopMenu ul li#contact{
    background:url('images/top-menu.png') no-repeat -51px 0;
}
#header #TopMenu ul li#contact:hover{
    background:url('images/top-menu.png') no-repeat -51px -26px;
}

#header #TopMenu ul li#sitemap{
    background:url('images/top-menu.png') no-repeat;
}
#header #TopMenu ul li#sitemap:hover{
    background:url('images/top-menu.png') no-repeat 0 -26px;
}

اصلا نترسید.این کدها برخلاف حجیم بودن بسیار ساده و به صرفه هستند.در کد CSS،ما برای هر لیست، دو سبک در نظر گرفتیم.یکی برای حالت عادی و یک برای زمانی که ماوس روی لینک می رود(roll over یا hover).تنها سوالی که شاید برای شما ایجاد بشود،این است که عدد ۱۰۱- یا ۵۱- از کجا آمده است.این اعداد را می توان با استفاده از حدس زدن و آزمون و خطا بدست آورد ولی سریعترین راه استفاده از PS به صورت زیر است.

در این تصویر شما با استفاده از ابزار انتخابگر PS،فاصله ی بین گوشه ی چپ هر لینک تا مرز تصویر(مستطیل رنگی) را انتخاب کرده و کپی می کنید(ctrl+c) سپس به مسیر File > New می روید.عدد نوشته شده روبه روی width همان عدد مورد نظر ماست. نکات: ۱.برای موقعیت دهی سریعتر به عناصر می توانید یک border موقتی به آن اضافه کنید و بعد از اتمام آن را پاک کنید. ۲.این کدها در مرورگرهای Firefox,Safari,Opera و به طبع Chrome تست شده اند. ۳.شما مجبور نیستید برای تکه تکه کردن قالب از Slice tool استفاده کنید.ما هم مجبور نیستیم.نه؟ نتیجه این مرحله را می توانید در پیش نمایش مشاهده کنید.