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

بخش سوم)

اضافه كردن لينك هاي سر صفحه

در اين بخش مي خواهيم منوهاي بالاي صفحه را اضافه كنيم.قبل از اين كار بايد عكس ها را از فايل قالب استخراج كنيد.به 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) ليست ها با عناصر كناري در نظر بگيرند كه براي همين مقدار صفات بعدي را 0 گذاشتيم.

#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).تنها سوالي كه شايد براي شما ايجاد بشود،اين است كه عدد 101- يا 51- از كجا آمده است.اين اعداد را مي توان با استفاده از حدس زدن و آزمون و خطا بدست آورد ولي سريعترين راه استفاده از PS به صورت زير است.

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