• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

18 3042 ۲ شهریور ۹۴
در جلسه هجدهم و بخش سوم (پایانی) طراحی قالب مدرن فلت به سبک Hero Header تحت فریم ورک بوت استرپ می پرداریم به ادامه طراحی این پروژه و به معرفی و کار با یکسری از پلاگین های کاربردی برای جلوه بخشیدن به قالب خواهیم پرداخت...  
نکته : جا داره تشکر ویژه ای از تمام شما عزیزان و دانشجویان محترم این دوره داشته باشیم برای شرکت در نظر سنجی این دوره و خوشحالیم که این دوره مورد توجه و استقبال شما خوبان قرار گرفته و این باعث دلگرمی ما برای ادامه فعالیتمون با کیفیت و کمیت بیشتر خواهد شد
مطالب مطرح شده در این جلسه عبارتند از :
  • ایجاد scroll spy برای مرتبط سازی لینک های منو با بخش های مورد نظر قالب
  • معرفی easing برای اسکرول نرم و کدنویسی جاوااسکریپ برای استفاده از آن
  • معرفی پلاگین circliful برای ایجاد progressbar های دایره برای قسمت پیشرفت دوره های سایت و بررسی ساختار و تنظیمات آن
  • معرفی پلاگین ihover برای ایجاد حالت hover روی بلاک ها و نمایش اطلاعات اضافی با افکت های جذاب و بررسی کامل و نحوه استفاده از آن
  • معرفی پلاگین animate.css برای ایجاد انیمیشن در بخش های مختلف قالب و نمایان سازی آنها با انیمشن های جالب
  • معرفی پلاگین waypoints برای اجرا و نمایش افکت های پلاگین animate.css و کنترل زمان اجرای آن
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

    • ‏‏
      وحید صالحی(۳ شهریور ۱۳۹۴)

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

  • ‏‏
    ابراهیم عابدی(۳ شهریور ۱۳۹۴)

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

    • ‏‏
      وحید صالحی(۳ شهریور ۱۳۹۴)

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

  • ‏‏

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

    • ‏‏
      وحید صالحی(۴ شهریور ۱۳۹۴)

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

  • ‏‏
    حمید رضا مصطفی زاده(۲۷ مهر ۱۳۹۴)

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

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

    • ‏‏
      وحید صالحی(۲۸ مهر ۱۳۹۴)

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

  • ‏‏
    محمدامین(۲۳ آبان ۱۳۹۴)

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

    • ‏‏
      لقمان آوند(۳ آذر ۱۳۹۴)

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

  • ‏‏
    ali rezaee(۲۹ تیر ۱۳۹۵)

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

  • ‏‏
    مازیار(۹ شهریور ۱۳۹۵)

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

    • ‏‏
      وحید صالحی(۹ شهریور ۱۳۹۵)

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

      • ‏‏
        مازیار(۹ شهریور ۱۳۹۵)

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

        • ‏‏
          وحید صالحی(۱۰ شهریور ۱۳۹۵)

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

  • ‏‏

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

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram