درس هشتم
قسمت showcase
با قسمت slider فعلا کاری نداریم چون این قسمت مختص به جیکوثری و پلاگینهای slider میباشد اگر وقت شد فصلهای اخر به ان میپردازیم.
فایل psd رو باز کرده و قفل گروپ showcase را غیر فعال کنید
برای این قسمت ما به سه تصویر نیاز داریم اول دوتا ایکن دوم اون سایه زیبا که زیر این دوتا ایکن
هستند(divider ) ....
گروپ showcase را باز کرده و لایه divider را تبدیل به smartobjiect کنید و روش دوبار کلیک کرده و با نام divider.png درون پوشه images ذخیره کنید.
حالا گروپ Skin info را باز کرده و روی لایه computer دوبار کلیک کنید و تصویر را با نام computer.png ذخیره کنید.
گروپ Slide show info را باز کرده و روی ایکون slideshow دوبار کلیک کنید و تصویر را با نام slideshow.png ذخیره کنید.
ذخیره تصاویر برای این قسمت دیگه تموم شد و فتوشاپ را ببندید و وارد دریمویور شوید.
روی تصویر showcase که درون کلاس showcase. است کلیک کنید و سپس دکمه delete کیبرد را فشار دهید تا تصویر حذف شودحالا متن showcase را داخلش تایپ کنید تا بتوانید ان را انتخاب کنید.
حالا سراغ کلاس .showcase که قبلا تعریف کرده بودیم میرویم (پانل css style) خوب روش دوبار کلیک میکنیم و تنظیمات زیر را براش انجام میدهیم.
شکل بدست امده تا این لحظه :
خوب الان ما نیاز به دو کلاس ریم تا در هر کدوم متن ها وایکن هایی که ذخیره کردیم را توش جاگذاری کنیم.
من دو کلاس به نامهای skininfo و slideshowinfo را برای این کار انتخاب کردم پس بصورت زیر عمل میکنیم.
متن showcase را پاک کرده و یک کلاس به نام skininfo با تنظیمات زیر درونش تعریف می کنیم.
خوب ok کنید . این شد کلاس skininfo حالا نوبت کلاس slideshowinfo است پس وارد قسمت code دریمویور میشویم و بعد از کلاس skininfo کلیک کرده و یک کلاس به نام .slideshowinfo با تنظیمات زیر وارد میکنیم.
خوب ما دوتا کلاس وارد کلاس showcase قرار دادیم حالا چون این دوکلاس درون کلاس showcase هستند و هردوی انها شناورند(float دارند) ما باید برای اینکه کلاس showcase ناپدید نشود (در بعضی مواقع اگر بخواهید به ان پس زمینه دهید در مرورگر نمایش داده نمیشود!) بعد از اخرین کلاسی که درون ان است یک کلاس به نام clear که قبلا در تمپلتمون بود را بدون هیچ متنی درون ان قرار دهیم.
..........................
