دوره مجازی بوت استرپ (جلسه 18) : پروژه اول - طراحی قالب مدرن فلت به سبک Hero Header - بخش سوم - پایانی

- visibility ۲۲ mode_comment

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

 

info نکته :

جا داره تشکر ویژه ای از تمام شما عزیزان و دانشجویان محترم این دوره داشته باشیم برای شرکت در نظر سنجی این دوره و خوشحالیم که این دوره مورد توجه و استقبال شما خوبان قرار گرفته و این باعث دلگرمی ما برای ادامه فعالیتمون با کیفیت و کمیت بیشتر خواهد شد

مطالب مطرح شده در این جلسه عبارتند از :

  • ایجاد scroll spy برای مرتبط سازی لینک های منو با بخش های مورد نظر قالب
  • معرفی easing برای اسکرول نرم و کدنویسی جاوااسکریپ برای استفاده از آن
  • معرفی پلاگین circliful برای ایجاد progressbar های دایره برای قسمت پیشرفت دوره های سایت و بررسی ساختار و تنظیمات آن
  • معرفی پلاگین ihover برای ایجاد حالت hover روی بلاک ها و نمایش اطلاعات اضافی با افکت های جذاب و بررسی کامل و نحوه استفاده از آن
  • معرفی پلاگین animate.css برای ایجاد انیمیشن در بخش های مختلف قالب و نمایان سازی آنها با انیمشن های جالب
  • معرفی پلاگین waypoints برای اجرا و نمایش افکت های پلاگین animate.css و کنترل زمان اجرای آن
info توجه

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

ثبت نام در دوره آموزش بوت استرپ

comment دیدگاه کاربران
mohammad005

لطفا در پروژه بعدی نحوه شرطی کردن بوت استرپ برای قالب های دو زبانه را هم توضیح دهید.

وحید صالحی

سلام آقا محمد این مورد ارتباطی به بوت استرپ نداره شما باید توسط کدنویسی بین زبان یا زبانهای سایت سوییچ کنید یعنی برای زبان فارسی فایل rtl بوت استرپ لود بشه و برای زبان دیگه ای مثل انگلیسی باید فایل بوت استرپ ltr رو لود کنید و همپنین فایل های زبان

ابراهیم عابدی

جناب صالحی دوره بوت استرپ کی تموم میشه که دی وی دی های دوره به دستمون برسه ؟

وحید صالحی

سلام آقای عابدی 3 تا 4 جلسه دیگه باقی مانده که سعی میکنیم تا 10 شهریور به پایان برسه و یک هفته بعد از اتمام دوره پکیج ها برای عزیزانی که درخواست دادن ارسال میشه

user 2014

سلام آقای صالحی میخواستم خواهش کنم توی جلسه های آینده یه قالب با پیچیدگی های بیشتر رو مثال بزنید ما واقعا نیاز به یه همچین چیزی داریم کسی که رو آورده به فریمورک مسلما طراحی قالب های ابتدایی و ساده رو یاد گرفته که اومده سمت استفاده از فریمورک مثلا یه چیزی شبیه قالب سایت دیجیکالا
مثلا حتما نحوه ساخت یک نوبار به صورت مگامنو با منوهای تودرتو رو خواهشا لحاظ کنید توی آموزشتون
یه صفحه شلوغ رو مثال بزنید با المان ها و بلاک های زیاد اینجاست که ریسپانسیو کردن این صفحات یا این منوها سخت میشه و ما نیاز به آموزش های شما داریم ! مرسی

وحید صالحی

سلام دوست عزیز شما اگر اصول شبکه بندی و استفاده از کلاس های col رو بخوبی فرار بگیرید دیگه مشکلی نیست مابقیش یکسری کلاس آماده برای استایل دهی به المان هاست سایت دیجی کالا هم پیچیدگی خاصی نداره اتفاقا قالب بسیار ساده ای داره فقط از کلاس های شبکه بندی برای ایجاد یکسری بخش ها به تعداد زیاد استفاده کرده کاری که در پروژه اول هم انجام دادیم و بخش های متعددی ایجاد کردیم با این حال پروژه دوم به مراتب پیچیده تر با کدنویسی بیشتر خواهد بود همراه با همین منوهای تو در تو و یکسری امکانات بیشتر مثل offcanvas ها و بلک ها و ستون ها بیشتر نگران نباشید اما تا اینجا هم باید راحت بتونید سایتی مثل دیجی کالا رو کد بزنید کاری که چند تا از هم دوره ای های شما انجام دادن و قالب های مشابهی رو کد زدن …
درضمن روی آوردن به یک فریم ورک مثل بوت استرپ برای طراحی قالب های پیچیده نیست چون اساس کار این فریم ورک رسپانسو کردن و واکنشگرا کردن یه قالب هست و جلوگیری از کدنویسی های تکراری و پر کاربرد نه طراحی, پیچیدگی رو اساسا خودتون باید بوجود بیارید یعنی طرح رو خودتون باید در نظر بگیرد و در چارچوب فریم ورک پیاده سازی و واکنشگراش کنید در جلسه اینده توضیحاتی رو در این مورد خواهم داد تا بیشتر براتون جابیفته
موفق باشی

حمید رضا مصطفی زاده

سلام
خیلی عالی بود جناب استاد این پروژه دستتون درد نکنه
اما یه سوال؟
شما چند درصد خودتون پیشنهاد میکنید که چنین سایت هایی پر از افکت داشته باشیم؟ به طور مثال کافیه فقط همین سند

لود نشه کلا سایت (به جز قسمت اسلایدر) بالا نمیاد!!!
چون تا جایی که من میدونم از لحاظ seo هرچه کمتر باشه کد جاوا اسکریپت و کلا افکت مناسب تر هست

وحید صالحی

این افکت ها بیشتر به درد سایت های portfolio یا به عبارتی نمونه کار و معرف می خوره مثل پروژه اول و برای سایت های آموزشی,خبری و فروشگاهی و مشابه بهتر ساده باشه ولی باز هم سلیقه ای هست و ما برای آشنایی دوستان معرفی کردیم

محمدامین

سلام.
وقتی از animate.css استفاده میکنیم زمانی که از افکت هایی که المان هارو از چپ یا راست وارد صفحه میکنن استفاده میکنیم،از لحظه شروع انیمیشن تا پایانش برای چند لحظه صفحه اسکرول افقی میخوره. راهی برای جلوگیری از این مورد وجود داره؟

لقمان آوند

باید افکت ها و انیمیشن های مناسبتری رو انتخاب کنید. اون مواردی که باعث اسکرول موقتی میشه انیمیشنشون رو تغیر بدید و تست کنید که مشکلی نداشته باشه.

ali rezaee

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

وحید صالحی

این مورد رو دیگه باید با css کنترل کنید

مازیار

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

وحید صالحی

این موارد دیگه مربوط به تسلط شما بر css و مبحث انیمیشن هاش میشه که بتونید این گونه موارد رو ایجاد کنید و ارتباطی با بوت استرپ نداره

مازیار

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

وحید صالحی

دوست عزیز شما بارها هم به بنده ایمیل زدید و مسائل متفرقه که ربطی به دوره نداره رو سوال کردید این راه های تماس و بخش کامنت دوره ها مربوط به دانشجو ها و سوالات مرتبط با دوره هست سوالات عمومی رو در انجمن باید مطرح کنید که برای همین کار تدارک دیدیم

hojat

سلام اقای صالحی
من برای طراحی یه سایت با عرض ثابت اقدام کردم ولی در اول کار به مشکل برخوردم.
یک عرض با 1200 تعریف کردم ولی در سایز های کوچک اسکرول افقی میخوره.
لطفا بررسی کنید.
فایل پروژه رو ارسال کردم.
http://s7.picofile.com/file/8266130400/project1.zip.html

وحید صالحی

از مقدار max-width بجای width تنها برای مقدار 1200 استفاده کنید

سحر بشری

سلام اقای صالحی وقتتون بخیر. در قسمتی که از ihover استفاده کردید ایکن ها به شکل لینک نیستن اما من می خوام داخل پروژه ای از ihover استفاده کنم و طوری که ایکن های اون به شکل لینک قابل استفاده باشن مثلا روی ایکن فیس بوک کلیک میشه صفحه فیس بوک باز شه.میخواستم بدونم چنین امکانی با ihover ممکنه؟ چون من داخل هر li تگ a گذاشتم لینکش فعال نشد.

وحید صالحی

سلام بله میشه تگ li رو درون a قرار بدید باید درست بشه

MRZ65

سلام جناب صالحی عزیز.دوره بسیار خوبی بود و من به حظ خود بهره کافی رو بردم.منتهی بعضی مطالب مثل بررسی تکنیک پارالاکس در طراحی صفحات وب رو در طراحی قالب مدرن پوشش ندادید.میشه توضیحاتی در مورد نحوه پیاده سازی این تکنیک یا مقاله مفید و مختصری معرفی کنید و اینکه آیا در فریم ورک بوت استرپ برای این تکنیک تدبیری اندیشیده شده است؟!ممنون

وحید صالحی

سلام خوشحالیم که مورد استفادتون قرار گرفته paralex و موارد مشابه ارتباطی با بوت استرپ ندارن و خودتون باید به css مسلط باشین یا از پلاگین های آماده استفاده کنید در پروژتون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.