جلسه ی چهارم طراحی یک فروشگاه اینترنتی-طراحی پرفروش ترین کالاها

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

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

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

1. ایجاد div دربردارنده ی قسمت کالاهای پیشنهادی
2. ایجاد قسمت کالاهای پیشنهادی

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

آنچه که در قسمت 'طراحی پرفروش ترین کالاها' خواهید آموخت

در قسمت 'طراحی پرفروش ترین کالاها' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

1.  طراحی قسمت پرفروش ترین کالاها

توضیح تفصیلی:

1.  مروری کوتاه بر آنچه که تا کنون گذشته است.
2. ایجاد بخش دیگری جهت نمایش پر فروش ترین محصولات در ستون left.
3. ایجاد عنوان این بخش، به کمک تگ h2 و اعمال دستورات css به آن.
4. ایجاد زیرخط با جلوه ای بی نظیر برای عنوان بخش پرفروش ترین محصولات.
5. استفاده از تگ ul و liهای متوالی، جهت نمایش محصولات پر فروش.
6. تنظیم خاصیت های css مربوط به ul و li از جمله padding و border و... .
7. آشنایی با سایر دستورات css همراه با مثال، از جمه line-height و float و list-style .
8. عیب یابی و رفع عیب های موجود در کدنویسی با استفاده از افزونه ی محبوب فایرباگ.
9. بررسی علت اعمال نشدن برخی از دستورات css، از جمله width وpadding به تگ های a یا span.
10. انتساب استایل دوگانه به یک المان و بررسی ارجحیت و اولویت آنها در css.
11. ایجاد بخش هایی برای نمایش قیمت و نام و مدل کالای مورد نظر.

 1. طراحی قسمت پرفروش ترین  کالاها

 همان طور که در تصویر زیر می بینید، در سمت چپ صفحه، یا به عبارت دیگر در سمت چپ div با آی دی underslide1، یک div با آی دی left ایجاد کردیم:

 در قسمت مشخص شده، قرار است که بخش پر فروش ترین محصولات را ایجاد نماییم.

اکنون می خواهیم در داخل div با آی دی left، یک div برای بخش پرفروش ترین محصولات ایجاد کنیم و آی دی آن را برابر با مقدار'porforush' قرار می دهیم. پس از انجام این کار، در داخل div ایجاد شده، شروع به ایجاد بخش پرفروش ترین محصولات می نماییم:

 اکنون تگ استایل را در همین جا باز می کنیم و سپس دستورات css زیر را به porforush# اضافه می کنیم:

1. width: 100%
2. background : #333
3. height: 400px

حالا اگر صفحه ی مورد نظر را رفرش(refresh) کنیم، آنچه که ایجاد کرده ایم به صورت زیر درخواهد آمد:

 همان طور که در تصویر بالا مشاهده می نمایید، عنصر div که آن را ایجاد کردیم، در صفحه نمایان شده است، اما همان طور که مشاهده می نمایید، عرض(width) عنصری که در قسمت left قرار دارد، بیش از حد مجاز است، به همین خاطر div با آی دی left به سمت پایین منتقل شده است. 

اکنون اگر افزونه ی فایرباگ را اجرا کنیم، مشاهده می کنیم که div با آی دی 'left' در زیر قسمت 'کالاهای پیشنهادی' قرار گرفته است(یعنی زیر div با آی دی right). تنها کافی است که مقداری عرض(width) آن را کمتر کنیم تا به درستی نمایش داده شود:

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

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

نقطه ی شروع بحث بالا (طراحی پرفروش ترین کالاها) در ویدئو: 4:07

جلسه ی چهارم  طراحی یک فروشگاه اینترنتی-طراحی پرفروش ترین کالاها 3

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

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

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

1. ایجاد سه بخش، اضافه به سبد خرید و توضیحات محصول و محصولات مشابه برای محصولات

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

آنچه که در قسمت 'طراحی پرفروش ترین کالاها 3' خواهید آموخت

در قسمت 'طراحی پرفروش ترین کالاها 3' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

1. ظاهر شدن سه بخش اضافه به سبد خرید و توضیحات محصول و... به هنگام حرکت موس بر روی آنها

توضیح تفصیلی:

1. افزودن پلاگین جی کوئری به صفحه.
2. بررسی مفهوم this درجی کوئری.
3. بررسی نکاتی در رابطه با نحوه افزایش سرعت لود سایت.
4. توضیح دقیق دستور hover در جی کوئری و کار با دو تابع موجود در این دستور.
5. کار با دستور find در جی کوئری، برای یافتن یک بخش درون بخش دیگری.
6. کار با animate جهت انجام دستورات css.
7. مقایسه animate با css در جی کوئری و بررسی تفاوت آنها.
8. کار با دستور addClass در جی کوئری برای افزودن کلاس به یک المان.
9. کار با دستور removeClass جهت حذف class از یک المان.
10. کاربردی از important در دستورات css و بررسی مفهوم آن.

1.ظاهر شدن سه بخش اضافه به سبد خرید و توضیحات محصول و... به هنگام حرکت موس بر روی آنها

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

 یعنی وقتی که موس را بر روی li مورد نظر قرار می دهیم، رویداد های نشان داده شده اتفاق بیافتد و این آیتم ها به ما نمایش داده شود.

همان طور که می دانید، زمانی که صفحه ی ما به کاربر نمایش داده می شود، برای بار اول، گزینه های زیر باید به صورت محو شده باشند:

 این یعنی برای بار اول، این گزینه ها نباید به کاربر نمایش داده شوند. برای به انجام رساندن این کار ما از دستور opacity استفاده می کنیم، یعنی مقدار opacity از div با آی دی tozihat را برابر با 0 قرار می دهیم:

 در واقع یعنی با انجام این کار، ما داریم div با آی دی tozihat را ناپدید می کنیم. حالا یک بار صفحه را رفرش می کنیم و همان طور که در تصویر زیر مشاهده می کنید، div با ای دی tozihat ناپدید شده است، به عبارت دیگر یعنی، opacity آن برابر با 0 شده است:

 حال به سراغ دستورات جی کوئری می رویم. در ابتدا باید دقت داشته باشیم که پلاگین جی کوئری به صفحات ما الحاق شده باشد، پس باید با استفاده از یک تگ <script> این پلاگین را وارد کنید:

 در ادامه به سراغ div با آی دی porforush می رویم و اسکریپت های مورد نظر را وارد می کنیم...

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

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

نقطه ی شروع بحث بالا (طراحی پرفروش ترین کالاها3) در ویدئو: 00:30