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

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



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

دوره مجازی بوت استرپ (جلسه 22) : پروژه دوم - طراحی قالب خبری - آموزشی - بخش چهارم- پایانی

18 2094 ۱۳ شهریور ۹۴
در جلسه بیستم و دوم و بخش چهارم (پایانی) طراحی قالب خبری - آموزشی واکنشگرا تحت فریم ورک بوت استرپ می پرداریم به طراحی بخش سایدبار... مطالب مطرح شده در این جلسه عبارتند از :
  • طراحی بخش خبرنامه ایمیلی وآیکون های شبکه های اجتماعی
  • طراحی بخش تب ها و سفارشی سازی استایل آن
  • طراحی بخش نظرات و معرفی پلاگین Responsive News Ticker with Bootstrap برای نمایش نظرات بصورت اسکرول عمودی و آموزش استفاده از آن
  • طراحی بخش پیشرفت پروژه ها
  • طراحی بخش فوتر
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

  • ‏‏
    جعفر پیشدادی(۱۴ شهریور ۱۳۹۴)

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

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

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

  • ‏‏
    mohammadali4776(۱۴ شهریور ۱۳۹۴)

    سلام من هنوز این دوره رو کامل ندیدم ولی چون قراره آخرین قسمت باشه در صورت امکان این رو هم برامون مثال بزنید
    برخی سایتا هستن که نمونه کار دارن و عکس نمونه کار تو یه سایز کوچیک نشون داده میشه ولی وقتی روش کلیک میشه تصویر بزرگتر میشه آیا این امکانو هم توضیح دادین؟

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

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

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

    سلام استاد
    پروژه بسیار عالی ای بود خیلی بهتر از قبلیه بود. اما کاش میشد بگید چه مواردی لازم هست تا این پروژه در IE هم به خوبی نمایش داده شود؟چطور میشه پریفیکس ها رو به خوبی براش تنظیم کرد؟یا اینکه باید برای IE هم کد بزنیم جداگانه؟(مخصوصا قسمت های js های این پروژه در ie به خوبی پشتیبانی نمیشه)
    یا اینکه باید جاوا اسکریپت مرورگرمIE رو فعال کنم؟اگر پاسخ مثبت است به چه صورت است؟
    با تشکر

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

      ie دیگه منسوخ شده و بهتر اصلا براش وقت نزارید الان بجاش مرورگر edge اومده که مشکلات ie رو نداره ولی اگر تمایل دارید یا بگیرید این مورد مربوط به طراحی وب هست و باید در اون مسلط بشید تا مواردی مثل سازگاری با مرورگر ie و prefix ها و کلا موارد اینچنینی رو فرا بگیرید و اینها ارتباطی به دوره بوت استرپ نداره ما هم اعلام کردیم که پیش نیاز این دوره دوره طراحی وب و آشنایی با css و html و جاوااسکریپت هست

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

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

    • ‏‏
      وحید صالحی(۱۲ اسفند ۱۳۹۴)

      سلام آقا حمید باید پلاگین دیگه ای استفاده کنید تا در وب خیلی زیاده عبارت jquery news ticker horizontally plugin رو گوگل کنید موارد زیادی هست که باید یکیش زو انتخاب و داکیومنتش رو مطالعه و پیاده سازیش کنید در قابتون دو نمونه: که تعداد زیادی با استایل ها و حالت های خاص در هر کدوم از این منابع هست موفق باشید

      http://jqueryplugin.net/10-best-horizontal-news-ticker-plugin-using-jquery-css3/
      http://www.jqueryrain.com/demo/jquery-news-ticker/

  • ‏‏
    زمان الله ابراهیمی(۱۶ فروردین ۱۳۹۵)

    سلام خسته نباشید استاد عزیز
    فقط یک سوال داشتم استاد بنده به یک مشکل بر خوردم لطفا” راهنمایی کنید
    وقتی که این قالبی که طراحی کردید به 991 فیکسل میرسه از هر طرف 120 فیکسل فاصله میگره چکار کنم که این فاصله برداشته بشه

    • ‏‏
      وحید صالحی(۱۷ فروردین ۱۳۹۵)

      سلام خودتون یاید بصورت سفاری یه مدیا کوئری در عرض مشخص شده در فایل استایل کاستوم ایجاد کنید و padding یا margin کانتینر اصلی در این مدیا کوئری از 120 کمتر قرار بدید

  • ‏‏

    ضمن عرض سلام به استاد عزیز جناب مهندس صالحی
    استاد عزیز، ضمن عرض تشکر مجدد از آموزش های خوبتون، من یک سایت بسیار خوب و باب میلم با استفاده از آموزشهای شما ساختم و الان در حال تبدیل به وردپرس هستم و از این بابت خیلی خیلی از شما ممنونم.اما متاسفانه در مرحله تبدیل منو به مشکل برخوردم(البته میدونم که مبحثش به این دوره مربوط نمیشه) . ظاهراً تبدیل منو بوت استرپ به وردپرس یک کم پیچیده هست. من این پلاگین https://github.com/twittem/wp-bootstrap-navwalker را برای تبدیل منو پیدا کردم و طبق دستورش پیش رفتم اما در مدیا کوئری های پایین که منو collapse میشه با کلیک بر روی دکمه باز کننده منو هیچ اتفاقی نمی افته و منو باز نمیشه. اگه ممکن هست بنده رو راهنمایی کنید که چطور میتونم منو های سایتم رو که دقیقاً مشابه پروژه 2 هست وردپرس کنم .
    ضمناً اگه تبدیل قالبهای طراحی شده با بوت استرپ به وردپرس رو شخصاً در یک دوره مجزا آموزش بدید خیلی خیلی عالی میشه و فکر کنم بیشترین مبحثی هست که متقاضی داره.
    یک دنیا از لطفتون و آموزشهای خوبتون سپاسگذارم. 😉

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

      سلام دوست عزیز در آدرسی که دادید خیلی ساده و روان توضیح داده شده و مشکلی نداره در این مورد کل ساختار قالب بررسی بشه و همین طوری نمیشه مشکل رو برطرف کرد شاید در جایی اشتباه کرده باشید برای تبدیل قالب به وردپرس هم همون مباحث دوره طراحی قالب وردپرس رو اگر بخوبی فرا بگیرید راحت میشه در قالب استفاده از بوت استرپ پیاده سازیش کرد چون قالب بوت استرپی هم چیزی جز css و html نیست میمونه منوش که احتمالا آقای علیمحمدی در آپدیت های دوره مبحث walker رو آموزش خواهد داد…
      موفق باشید

  • ‏‏

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

  • ‏‏
    سید احسان عظیمی(۶ تیر ۱۳۹۵)

    سلام،آقای صالحی بحث affix. +container-fluid{} رو متوجه نشدم،ینی هر پراپرتی رو ست کردم کاری انجام نشد،ویدیو رو هم چند بار دیدم و متوجه نشدم برای همین سوال پرسیدم تا با جوابهایی مثل آشنایی بیشتر با زبان Css و اینکه دوباره ویدیو رو ببینید مواجه نشم،ممنون

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

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

      دو موردی رو که هم اشاره کردید در دوره بطور کامل خاصیتش رو توضیح دادیم که باز هم براتون عرض می کنم:

      کلاس contanier-fluid عرض عنصری که این کلاس بهش اعمال میشه رو برابر 100 درصد قرار میده و تمام صفحه میکنه
      کلاس affix هم که مربوط به پلاگین affix هست برای ساخت منو های sticky هست که افرودن این کلاس به یک عنصر باعث تغییر حالت position هر عنصری که این کلاس بهش اضافه شده از یکی از پرارپرتی های static,relative و absolute به fixed یا به عبارتی ثابت نسبت به کل عناصر موجود در سند میشه و تمام این موارد مربوط به css هست…

      • ‏‏
        سید احسان عظیمی(۷ تیر ۱۳۹۵)

        متاسفانه اصرار دارین که منظور منو متوجه نشین،سوال بنده کاملا در حیطه بوت استرپ بود.بنده کاملا میدونم معنی این دستورات و کاربردشون چیه فقط چون شما گفتین اگه داخل این دو براکت affix. +container-fluid{} کدی بنویسین بعد از اعمال کلاس affix میتونید تغییراتی ایجاد کنید،مثل دادن padding به منو یا کم کردن عرض منو ولی من نتونستم این مواردو تست کنم،شک نکنین بنده بعد از تسلط نسبی روی css دوره بوت استرپ رو شروع کردم و قبل از خرید بسته طی کامنتی شما ب من گفتین در صورت تسلط 50 درصد به بالا روی css حتما در دوره بوت استرپ شرکت کنین… شما مطمئن باشین زمانی سوالی رو در اینجا میپرسم که از سرچ در گوگل و بازبینی ویدیو جواب خودمو نگرفته باشم،
        سوال من:{برایaffix. +container-fluid{} هر پراپرتی را ست کردم اتفاقی نیافتاد چرا }
        پاسخ شما به سوال من :{کلاس contanier-fluid عرض عنصری که این کلاس بهش اعمال میشه رو برابر 100 درصد قرار میده و تمام صفحه میکنه
        کلاس affix هم که مربوط به پلاگین affix هست برای ساخت منو های sticky هست }

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram