سبد (0)

طراحی منوی کاربری 1

جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی کاربری  1

در قسمت اول از این جلسه، به آموزش 'طراحی منوی کاربری 1' می پردازیم.


 آنچه که در قسمت قبل طراحی شد

 در قسمت قبل، موارد زیر آموزش داده شدند:

  1. نحوه ی طراحی و تکمیل منوی مورد نظر.
  2. نحوه ی تغییر رنگ خط جداکننده ی منوها.


آنچه که در قسمت 'طراحی منوی کاربری 1' خواهید آموخت

  1. آموزش ایجاد منوی کاربری پایه و استایل دهی به آن.
  2. آموزش ایجاد عناصر منوی کاربری و استایل دهی به آنها.
  3. آموزش نحوه ی دانلود کردن آیکن های مورد نیاز از اینترنت.
  4. آموزش نحوه ی اضافه کردن آیکن ها به عناصر منوی کاربری.

 1.آموزش ایجاد منوی کاربری پایه و استایل دهی به آن

 همان طور که در تصویر زیر مشاهده می کنید، در این قسمت قصد داریم منوی کاربری را ایجاد کنیم:

 

 برای ایجاد این بخش، ابتدا نرم افزار Dreamweaver را باز کنید، و برای باز کردن محتویات سایت مورد نظر، از منوی 'site' گزینه ی 'manage sites' را انتخاب کرده و سایت مورد نظر خود را که قبلا روی آن کار می کردیم، انتخاب کنید. همان طور که می دانید، از قبل، نام سایت خود را eshop قرار دادیم، پس گزینه ی 'eshop' را انتخاب کنید. سپس خواهید دید که محتویات سایت در سمت راست صفحه نشان داده خواهد شد:

 

 در ادامه، برای اضافه کردن کدهای خود، فایل 'index.php' را باز می کنیم، و در زیر div با آی دی "top1" شروع به اضافه کردن کدهای خود می کنیم. ابتدا یک عنصر <div> ایجاد می کنیم، و id آن را به دلخواه برابر با 'user' قرار می دهیم. سپس برای اینکه ویژگی های ظاهری این <div> را مشخص کنیم، تگ <style> را باز می کنیم، و اعمال زیر را انجام می دهیم: 

  1. width دیو(div) مورد نظر را برابر با 1100 پیکسل قرار می دهیم.
  2. height دیو(div) مورد نظر را برابر با 45px قرار می دهیم.
  3. سایه ی دیو(div) مورد نظر را به صورت box-shadow: 1px 1px 4px #eee تنظیم می کنیم.
  4. برای تعریف رنگ پس زمینه، دستور background: #999 را تنظیم می کنیم.

 

 اکنون اگر صفحه را رفرش(refresh) کنیم، مشاهده می کنیم که این <div> به وجود آمده است، اما هنوز در جایگاه اصلی خود قرار نگرفته است، برای اینکه بتوانیم این <div> را در وسط صفحه قرار دهیم از دستور margin: 0 auto استفاده می کنیم:

 


دسترسی به موارد آموزشی بالا در بسته خریداری شده

  • شماره جلسه: 2
  • نام فایل ویدئو: 07
  • فرمت فایل: mp4.

نقطه ی شروع بحث بالا (طراحی منوی کاربری 1) در ویدئو: 00:00 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه