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

آموزش طراحی سایت (HTML CSS Javascript) | آتریا

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

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

09 فروردين 1397

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

09 فروردين 1397

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.