سبد (0)

طراحی کالاهای پیشنهادی

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

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


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

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

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

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

eshop part12 lastResult


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

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

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

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

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

  1. ایجاد یک تگ div جدید با id به نام underslide و همچنین div دیگری با آی دی underslide1 درون آن با width برابر با 1100 پیکسل.
  2. تفکیک underslide1 به دو ستون راست و چپ با id های right و left
  3. استایل دهی به بخش های فوق با استفاده از دستورات css
  4. ایجاد تگ h2 جهت نمایش عنوان مربوط به کالاهای پیشنهادی
  5. مثال هایی دیگر از دستور float  جهت نمایش المان ها در یک ردیف در کنار یکددیگر.
  6. عیب یابی کدنویسی قالب و رفع مشکل با استفاده از فایرباگ.
  7. ایجاد زیرخط زیبا و گرافیکی جهت جدا کردن عنوان از بخش های درون کالاهای پیشنهادی
  8. مثالی دیگر از دستور box-shadow برای ایجاد سایه در اطراف یک المان
  9. کار با دستور list-style و نحوه ی حذف نقاط توپر سیاه رنگ کنار تگ های li
  10. کاربردی دیگر از دستور direction و مشخص نمودن جهت شروع کدنویسی html
  11. استایل دهی به تگ ul و liهای درون آن و همچنین مشخص نمودن padding یا همان حاشیه داخلی

2.ایجاد قسمت 'کالاهای پیشنهادی'

در این قسمت، به سراغ ایجاد عنوان 'کالاهای پیشنهادی' و نقاط رنگی که در کنار این عنوان مشاهده می شوند می رویم:

eshop part12 kalahayePishnahadi

 به دلیل اینکه این کار را برای قسمت جدیدترین کالاها، یک بار انجام داده ایم، پس می توانیم دوباره از آن استفاده کنیم. کاری که قبلا انجام دادیم این بود که یک تگ h2 ایجاد کردیم و برای آن یک استایل تعریف کردیم. حالا می خواهیم برای ایجاد قسمت 'جدیدترین کالاها' دوباره از آنها استفاده نماییم. قبل از انجام این کار، یک div جدید را باز می کنیم و مقدار id آن را برابر با 'pishnahad' قرار می دهیم،حالا در داخل این div از تگ h2 مورد نظر استفاده می کنیم:

مشاهده ی کد نویسی:

eshop part12 pishnahadDiv

 اکنون از div با آی دی pishnahad شروع می کنیم و یک استایل دهی مختصر را به آن اضافه می کنیم، به صورت زیر:

  1. width یا همان پهنای آن را برابر با % 100 قرار می دهیم.
  2. مقدار border آن را برابر با 1px solid #ccc قرار می دهیم که درواقع یک کادر به اندازه ی یک پیکسل را ایجاد می کند.
  3. مقدار دستور border-radius را برابر با 7px قرار می دهیم که باعث گرد شدن حاشیه ها می شود.

مشاهده ی کدنویسی:

eshop part12 code1

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

مشاهده ی نتیجه:

eshop part12 demo1

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

مشاهده ی کد نویسی:

eshop part12 pishnahadStyle

 بعد از تعریف استایل برای تگ h2 در داخل  div با آی دی 'pishnahad'، تغییرات را ذخیره می کنیم و دوباره صفحه را رفرش(refresh)می کنیم. همان طور که در تصویر زیر می بینید، استایل این تگ h2 مشابه قسمت جدیدترین کالاها شد: 

مشاهده ی نتیجه:

eshop part12 code2

 به یک نکته ی حائز اهمیت توجه داشته باشید که، دستور float ممکن است ما را دچار سردرگمی کند، الان اگر که کلید F12 را فشار دهیم تا افزونه ی Firebog اجرا شود...


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

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

نقطه ی شروع بحث بالا (طراحی کالاهای پیشنهادی) در ویدئو: 8:52

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