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

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

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

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

1.  طراحی سبد خرید با استفاده از php

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

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

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

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

1.  ادامه ی طراحی سبد خرید با استفاده از php

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

1. بررسی set شدن کوکی با استفاده از دستور isset.
2. اجرای دو کوئری به صورت تو در تو و استفاده از دو حلقه while جهت دریافت مشخصات محصولاتی که در سبد خرید کاربر وجود دارد.
3. کار با کوئری select در pdo و مثال هایی متفاوت ، از این کوئری مهم.
4. کار با افزونه های فایرفاکس که کار ما را در طراحی وب سایت راحت تر می کنند.
5. نمایش پیغام هیچ محصولی در سبد خرید شما وجود ندارد (در حالتی که کاربر هنوز سبد خریدی را تشکیل نداده است)

تبدیل سبد خرید به حالت داینامیک

 در این جلسه، ابتدا می خواهیم به سراغ قسمت سبد خرید شما برویم، برویم.همان طور که می دانید،  قبلا کدهای HTML و جی کوئری مربوط به این سبد خرید را یک بار نوشته بودیم. حالا می خواهیم در این قسمت، اطلاعات را از tblsabad دریافت کنیم و در داخل سبد خرید شما، به کاربر نشان بدهیم:

به عبارت دیگر، می خواهیم از حالت استاتیک،به حالت داینامیک برویم. پس نرم افزار دریم ویور را باز می کنیم. درواقع این سایتی بود که ما بر روی آن کار می کردیم. که نام آن eshop بود.

در نرم افزار دریم ویور، قسمت سبد خرید در فایل top.php قرار داشت:

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

 حالا قرار است که ما در داخل قسمت سبد خرید شما،محصولات  سبد خریدی که کاربر قبلا آنها انتخاب کرده است را به او نمایش بدهیم. ابتدا باید چک کنیم که آیا، اصلا سبد خریدی وجود دارد یا نه. یعنی آیا کوکی ما ست شده است یا نه. پس با این توضیحات، ما به یک دستور if نیاز داریم...

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

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

نقطه ی شروع بحث بالا (تبدیل سبد خرید به حالت داینامیک) در ویدئو: 02:48

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

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

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

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

1. ایجاد پس زمینه ی آبی رنگ فروشگاه.
2. ایجاد بدنه ی اسلایدشو فروشگاه.

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

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

1.  آموزش استفاده از پلاگین cycle برای نمایش دادن عکس ها.
2. آموزش ایجاد دکمه ی عکس قبلی و بعدی برای اسلایدشو.
3. آموزش استفاده از فتوشاپ برای ایجاد دکمه ی next.
4. آموزش استفاده از پوزیشن ها(position) برای موقعیت دهی عناصر.

 4.آموزش استفاده از پوزیشن ها(position) برای موقعیت دهی عناصر

همان طور که مشاهده می نمایید، وقتی که دو عنصر img را به صفحه اضافه می کنیم، div اسلایدشو به سمت پایین منتقل می شود: 

 این به این بدین معنی است که این دو عنصر img بر روی محل و موقعیت div اسلایدشو تاثیر می گذارند. نکته ای که در اینجا لازم است بدانیم عبارت است از بحث position ها در css. اگر که شما می خواهید دو المان را مثل دو عنصر img ذکر شده، به صفحه ی مورد نظرتان اضافه کنید، به طوری که اضافه شدن این المان ها، تاثیری بر روی سایر المان ها و اجزای صفحه نداشته باشد، باید از position: absolute استفاده کنید. 

بنابر آنچه گفته شد، برای دو عنصر img مورد نظر، استایل هایی را تعریف می کنیم  و مقدار position آنها را برابر با absolute قرار می دهیم، تا موقعیت آنها به صورت مستقل از دیگر اجزا، تعیین گردد:

با رفرش(refresh) کردن صفحه، مشاهده می کنیم که اسلایدشو از مکان اصلی خود منحرف نشده است. چون که مقدار position این دو فلش یا به عبارت دیگر همان تگ های img را به صورت absolute قرار دادیم، این عناصر، به صورت مستقل از سایر المان های همجوار خودشان موقعیت دهی می شوند:

 حالا این سوال پیش می آید که اگر بخواهیم فلش ها را از سمت بالا به اندازه ی فرضی 105px فاصله بدهیم، باید چه کار کنیم؟ 

اگر مقدار top را برابر با 155px قرار دهیم، این اتفاق رخ می دهد اما...

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

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

نقطه ی شروع بحث بالا (طراحی اسلایدشو فروشگاه) در ویدئو: 13:08 

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

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

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

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

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

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

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

1.  آموزش ایجاد پس زمینه ی آبی رنگ فروشگاه.
2. آموزش عوض کردن فونت فرم جستجوی فروشگاه.
3. آموزش استفاده از دستور include برای منظم کردن کدنویسی ها.
4. آموزش ایجاد بخش slideshow مقدماتی برای نمایش دادن عکس ها.

 4.آموزش ایجاد بخش slideshow مقدماتی برای نمایش دادن عکس ها

 در ادامه ی آموزش ها به div مربوط به اسلاید شو می رسیم، که یک سری از تصاویر را به صورت اسلاید به نمایش می گذارد. با استفاده از ابزار ruler می توانیم مقادیر width و height این اسلاید شو را به دست بیاوریم:

 همان طور که در تصویر بالا مشاهده می نمایید، width اسلایدشو برابر با 735px است و height اسلایدشو برابر با 315px است. پس برای ایجاد اسلایدشو، یک div ایجاد می کنیم و آی دی آن را برابر با 'slideshow' قرار می دهیم و استایل آن را به صورت زیر می نویسیم : 

 همان طور که در تصویر زیر مشاهده می نمایید، div مربوط به اسلاید شو ساخته شد:

حالا برای این که این div را به سمت راست منتقل کنیم، کافی است که از دستور float:right استفاده کنیم: 

مشکلی که اکنون داریم، این است که نمی توانیم div اسلایدشو را در وسط صفحه به صور ثابت قرار دهیم. برای رفع این مشکل، همان طور که قبلا هم گفته شد، باید از یک div استفاده کنیم که مقدار width آن برابر با 1100px باشد. این مقدار width همان است که ما خودمان آن را مبنای طراحی صفحات سایتمان قرار دادیم، که می تواند اعداد دیگری هم باشد...

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

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

نقطه ی شروع بحث بالا (طراحی بدنه ی فروشگاه) در ویدئو: 13:12 

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

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

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

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

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

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

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

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

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

در قسمت شانزدهم طراحی فروشگاه اینترنتی، به یکی از مفاهیم ساده اما بسیار کاربردی در طراحی وب سایت و انجام پروژه های برنامه نویسی تحت وب خواهیم پرداخت. مفهوم masterpage نه تنها در php، بلکه در هر زبان برنامه نویسی دیگری نیز کاربرد فراوانی دارد.

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

استفاده از این مفهوم چند مزیت بسیار بزرگ دارد:

1.  اگر بخشی مشترک در صفحات وب سایت وجود داشته باشد نیازی نیست که کدهای مربوط به آن بخش را در تمامی صفحات بنویسیم و یا آن کدهای طولانی را کپی کنیم.
2. اگر بعدها بخواهیم تغییری را در آن قسمت ایجاد کنیم، نیازی نیست که در تک تک آن صفحات اصلاحاتی را ایجاد کنیم. بلکه با استفاده از مفهوم بسیار کاربردی مسترپیج می توان تنها با یک بار تغییر این تغییرات را در تمامی صفحات به صورت خود کار اعمال کرد.
3. صفحات سایت بسیار خلوت تر شده و کار کردن با آنها ساده تر می گردد و از سردرگم شدن طراح جلوگیری می نماید.
4. با استفاده از مسترپیج به سادگی قادر خواهید بود که کدهای css مشترک در تمام صفحات را تنها با یک بار نوشتن در تمامی صفحات اعمال نمایید.

 طراحی بر اساس مسترپیج

 در این قسمت از مجموعه ی آموزشی، می خواهیم شما را با مفهومی به نام مسترپیج آشنا کنیم. 

مفهوم مسترپیج یک مفهوم پیچیده و سنگین نیست، بلکه یک مفهوم بسیار ساده است اما بسیار بسیار کاربردی می باشد.

به عبارت دیگر، در پروژه های واقعی، بدون استفاده از مسترپیج قطعا با مشکل روبه رو خواهیم شد.

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

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

مزیت دوم عبارت است از اینکه به راحتی می توانید از بخش هایی که در صفحات مختلف ایجاد کرده اید، با استفاده از دستور include، به تنهایی استفاده کنید:

نکته ی دیگری که وجود دارد عبارت است از اینکه، اگر زمانی لازم بود که تغییراتی را روی یک بخش اعمال کنید، کافی است که در صفحه ی master خود، صفحه ی های right یا left یا هر صفحه ی دیگری که آن را فراخوانی کرده اید، تغییرات لازم را اعمال کنید. سپس به صورت خودکار و اتوماتیک، در تمامی صفحات تغییرات لازم اعمال خواهد شد...

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

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

نقطه ی شروع بحث بالا (طراحی بر اساس مسترپیج) در ویدئو: 20:15

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

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

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

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

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

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

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

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

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

1. ایجاد بخش دیگری جهت نمایش پر فروش ترین محصولات در ستون left.
2. ایجاد زیرخط با جلوه ای بی نظیر برای عنوان بخش پرفروش ترین محصولات.
3. ایجاد بخش هایی برای نمایش قیمت و نام و مدل کالای مورد نظر.

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

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

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

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

در چهاردهمین قسمت از این مجموعه ی آموزشی، قصد داریم سه بخش زیر را برای هر محصول طراحی کنیم:

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

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

1.  ایجاد div جدید با id برابر با tozihat.
2. کاربردی دیگر از position نوع absolute و بررسی دقیق مفهوم و کاربرد آن.
3. چگونگی افزودن یک بخش به داخل بخش دیگر بدون به هم ریختگی اجزای موجود در آن بخش.
4. نحوه ی قرارگیری یک المان یا بخش، دقیقا در وسط یک بخش دیگر، با استفاده از css.
5. کار با دستور line-height در css و تنظیم موقعیت محتوای درون یک بخش، بدون جابه جایی کل بخش.

1.  ایجاد بخش اضافه به سبد خرید

هدف ما ایجاد گزینه های  زیر است: 

 برای اینکه بتوانیم به هدف خود برسیم، و یا به عبارت دیگر، این گزینه ها را برای کاربر به نمایش در بیاوریم، دو مرحله را باید به انجام برسانیم:

1. نوشتن کدهای html
2. استفاده از JQuery

ابتدا به نوشتن کدهای اچ تی ام ال می پردازیم.

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

 پس به سراغ تگ های li خود می رویم و درون آن یک div ایجاد می کنیم و مقدار آی دی آن را به طور فرضی، برابر با 'tozihat' قرار می دهیم:

 همان طور که در تصویر بالا مشاهده می کنید، اکنون می خواهیم بفهمیم که div  با آی دی 'tozihat' چه قسمت هایی را دربر می گیرد:

 همان طور که مشاهده می کنید، در عکس بالا قسمت خاکستری رنگ، همان div با آی دی tozihat است، که آن را ایجاد کردیم. حالا طبق عکس بالا، عبارت افزودن به سبد خرید و مشاهده ی جزئیات محصول و مشاهده محصولات مشابه، همگی باید در داخل div با آی دی 'tozihat' قرار بگیرند. بنابراین به داخل div توضیحات می رویم و شروع به نوشتن قمت های مورد نظر می کنیم.

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

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

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

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

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

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

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

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

1. نحوه ی طراحی اسلایدشو.
2. نحوه ی اضافه کردن دکمه های next به اسلایدشو.
3. نحوه ی اضافه کردن دکمه ی previous به اسلایدشو.

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

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

1. آموزش طراحی حرفه ای اسلایدشو با استفاده از جی کوئری.
2. آموزش طراحی قسمت جدیدترین کالاها.

2.طراحی قسمت جدیدترین کالاها 

... در div با id برابر با 'undermenu1'،  یک div به نام slide وجود دارد، و حالا می خواهیم یک div جدید برای قسمت 'جدیدترین کالاها ' ، ایجاد کنیم. همان طور که در تصویر مشاهده می کنید، قبل از اینکه div با id برابر با undermenu1 بسته شود، یک div جدید ایجاد می کنیم و id آن را بعنون مثال برابر با 'jadidtarinha' قرار می دهیم  و کامنت آن را نیز به صورت زیر مشخص می کنیم:

 در ادامه با استفاده از یک تگ <style> می توانیم استایل آن را مشخص کنیم و دستورات css مورد نظر را بنویسیم:

 اولین استایلی که باید آن را مشخص کنیم، width یا همان عرض div ی است که می خواهیم برای جدیدترین کالاها بسازیم.  پس مقدار width را حدوداً برابر با 347 پیکسل قرار می دهیم. سپس مقدار height را برابر با 313 پیکسل قرار می دهیم و مقدار background آن را، به رنگ سفید قرار می دهیم:

 با رفرش کردن صفحه، div مورد نظر ما به صورت زیر ایجاد خواهد شد:

 حالا برای تنظیم کردن div مورد نظر، اعمال زیر را انجام می دهیم:

1. مقدار width این div را برابر با 349px قرار می دهیم.
2. مقدار height این div را برابر با 316px قرار می دهیم.
3. مقدار margin-left این div را برابر با 4px قرار می دهیم.
4. مقدار margin-top این div را برابر با3px  قرار می دهیم.

 قدم بعدی این است که می خواهیم یک کادر به رنگ خاکستری در اطراف این div ایجاد کنیم، برای این کار از دستور border به صورت زیر استفاده می کنیم:

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

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

نقطه ی شروع بحث بالا (طراحی جدیدترین کالاها) در ویدئو: 10:50 

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

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

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

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

1. نحوه ی ایجاد قسمت جدیدترین کالاها
2. نحوه ی تکمیل اسلایدشو مورد نظر 

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