طراحي قالب وبسايت

بخش چهارم)

13.حالا نوبت به منوها رسیده که به صفحه مان اضافه کنیم.برای منوها در طراحی وب قانون خاصی وجود ندارد ولی اکثرا به چهار شکل مورد استفاده قرار می گیرند:

1.منوی بالایی که نزدیکی های لوگو قرار می گیرد و اکثرا دارای 3 لینک ثابت است :1.خانه 2 .تماس 3.نقشه ی سایت

2.منوی اصلی که به صورت افقی تقریبا در مرکز صفحه قرار می گیرد و بسته به نوع سایت دارای لینک هایی مثل موضوعات،صفحات و … می باشد.

3.منوی کناری که مشابه منوی اصلی است فقط به صورت عمودی و در کنار صفحه قرار می گیرد.

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

منویی که اکنون قصد ایجاد آن را داریم،از نوع اول است و دارای 3 لینک خانه-تماس-نقشه می باشد.برای مدیریت بهتر لایه ها،یک Layer Set جدید ایجاد می کنیم و نامش را Menu می گذاریم.با فشردن کلید U،یک مستطیل کوچک می کشیم.سپس به بخش Blending options لایه رفته و فقط گزینه ی Gradient color را مطابق شکل زیر تغییر می دهیم.

حالا با زدن کلید ctrl+j دو کپی دیگر از لایه ایجاد می کنیم.کلید u را زده و با ابزار Custom shape tool یک مثلث توپر کوچک بالای هر سه مستطیل می کشیم البته با رنگ سفید.احتمالا!شکل زیر را می بینید:

حالا می توانیم هم از آیکون و هم از نوشته برای تزئین منوها استفاده کنیم.برای این کار می توانید فونت traffic را از ايـــن آدرس دریافت کنید.

اندازه و نوع متن را بر عهده ی شما می گذاریم.حالا به Blending options لایه رفته و گزینه ی Drop shadow را طبق شکل زیر تنظیم می کنیم:

بی زحمت یه سری هم به بخش Color overlay زده و رنگ DC8700# را بر می گزینیم.پس داریم

احتمالا موافقید که یک جلوه یز roll over برای منو ایجاد کنیم.پس روی پوشه ی لایه های Menu کلیک راست کرده و گزینه ی Duplicate layer set را برای ایجاد یک کپی از layer set منو،انتخاب می کنیم.نام پوشه ی جدید را MenuHover می گذاریم.فقط یک تغییر کوچک می خواهیم تا منوی هاور را ایجاد کنیم.پس در Blending options،بخش Gradient overlay را مطابق شکل ذیل،کمی تغییر می دهیم.برای هر سه شکل

نتیجه ی این مرحله :