سبد (0)

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

  • جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی کاربری  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 

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

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


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

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

    1.  ایجاد منوی کاربری پایه و استایل دهی به آن.
    2. ایجاد عناصر منوی کاربری و استایل دهی به آنها.


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

    1.  تنظیم عکس ها و متن های عناصر منوی کاربری.
    2. ایجاد قسمت جستجو با استفاده از تگ form.
    3. قرار دادن عکس به جای دکمه ی submit در فرم.

     3.قرار دادن عکس به جای دکمه ی submit در فرم

     بعد از اینکه دکمه ی 'ثبت' را که یک نوع input از نوع submit است، ایجاد کردیم دکمه ی مورد نظر به شکل زیر در خواهد آمد:

     

     اکنون می خواهیم دکمه ی مورد نظر را به شکل زیر تبدیل کنیم، که از نظر گرافیکی نسبت به دکمه ی خالی از گرافیک 'ثبت' بسیار زیباتر است:

     

     برای این کار به سراغ استایل مربوط به input که از نوع submit است می رویم و اعمال زیر را انجام می دهیم:

    1.  دستور border: none را اضافه کنید.
    2. دستور (background : url(img/search.png  را اضافه کنید.
    3. دستور width:38px پیکسل را اضافه کنید.
    4. دستور height: 100% را اضافه کنید.
    5. دستور no-repeat را به دستور  شماره 2 اضافه کنید.

     در ادامه، برای اینکه قسمت ذره بین  مقداری تنظیم تر شود، می توانیم 'height' آن را کمتر کنیم...


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

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

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

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