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

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



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

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

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

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

  • ‏‏
    رضا قاسم نژادیان(۱۸ اسفند ۱۳۹۴)

    سلام و خسته نباشید
    استاد ممنون از اموزش ها یه سوالی داشتم
    میشه بعد از طراحی html5 معمولی بعدا ریسپانسیو بکنیم ؟
    تشکر

  • ‏‏

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

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

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

  • ‏‏
    هوشمند امینی(۴ تیر ۱۳۹۵)

    آقای صالحی
    با سلام و تشکر بابت آموزش بسیار کامل و خوبی که دادین
    من تا اینجای کار نصف دوره بوت استرپ رو دیدم چندتا سوال دارم
    1- من سایت تابناک رو دیدم قالب جدیدشون تازه با بوت استرپ زدن کدهاشو چک می کردم
    col-lg-17 col-md-15 visible-lg visible-md اعداد 17 و 15 عجیب بود برام مگه نباید تا 12 باشه ؟

    2 – قالب سایتم قدیمی هست و می خوام با بوت استرپ طراحی جدید کنم ، ممکنه رنک سایتم خراب بشه . آخه خیلی ها می گن که تغییری تو اچ تی ام ال نده فقط استایل رو عوض کن رنکت خراب می شه لطفا این مورد رو جواب بدین سایتم این هست http://www.donyayekhodro.com/
    3- من تو سایت بوت استرپ دیدم که نوشته به زودی نسخه 4 میاد ، اگه که اومد لطفا یه جلسه هم راجع به تغییراتش بزارین و یا اینکه یه توضیحاتی بدین که چه چیزهایی تو نسخه جدید اضافه شده یا تغییر کرده ؟

    باتشکر

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

      سلام دوست عزیز ممنون از شما :
      در مورد سوال اولتون باید بگم که طراح خودش هم اومده یکسری مدیا کوئری تعریف کرده و نا کلای ها رو به این صورت قرار داده …
      در مورد سوال دومتون هم باید عرض کنم که ما دو نوع تغییر در قالب سایت خود داریم؛ نوع اول تغییرات جزئی است که مثلاً ممکنه خواسته باشیم طول و یا عرض یک عنصر را کم یا زیاد کنیم. یا اینکه رنگ قسمتی از عناصر صفحه را عوض می‌کنیم. این تغییرات معمولاً از طریق cssو javascript قابل انجام هستش. این تغییرات اگر در جهت مثبت و افزایش کیفیت تجربۀ کاربریِ بازدید کنندگان باشه، با افزایش رتبۀ سایت مواجه خواهد شد. البته شاید موتورهای جستجو به طور مستقیم متوجه مثبت یا منفی بودن چنین تغییراتی نشوند. اما با بازخوردی که از کاربران سایت می‌گیرند، حتماً این تغییرات را بررسی می‌کنند.اما نوع دوم تغییرات ظاهر سایت، تغییر در قالب سایت است که به طور یکجا کدهای کل سایت دستخوش تغییر قرار می‌شه. در این مورد هم موتور جستجو به بازخوردی که از عملکرد بازدید کنندگان سایت دریافت می‌کنه و می‌تونه آنها را با بازخوردهای قبلی مقایسه کنه، بی توجه نیست. البته خود الگوریتم موتور جستجو هم شاخص‌هایی داره که اگر قالبی که تعویض کردید، آن شاخص‌ها را داشت و تغییر مثبت در نظر گرفته بشه حتماً باعث افزایش رتبۀ سایت شما خواهد شد.
      در تغییر قالب سایت از نظر سئو اگر قابلیت این وجود داشته باشه که بتوانید کم کم قالب قسمت‌های مختلف سایت را عوض کنید، حتماً چنین کار رو بکنید چرا که اثرات سوء تغییر قالب تا حد امکان کمتر می‌‌‌‌‌‌شه.به طور کلی اگر موتور جستجو، بلاخص گوگل متوجه تغییر مثبتی در قالب سایت شما بشه، حتماً امتیاز مثبتی را برای سایت شما در نظر خواهد گرفت. مثلاً فرض می‌کنیم قالب قبلی شما واکنشگرا نبوده و الان با تغییر قالب سایت خود، سایت شما برای بازدید کنندگان حالت واکنشگرا پیدا کرده است. اینکه گوگل چطور متوجه این موضوع خواهد شد، عوامل زیادی دخیل هستند. اما مهم این است که حتماً متوجه خواهد شد. پس تغییرات مثبت در تغییر قالب سایت نه تنها بد نیست، بلکه یک نوع پیشرفت هم محسوب می‌شه. البته این خود نباید بهانه‌ای باشد که هر هفته قالب سایت را تغییر بدیم.پس از اینکه قالب سایت را تعویض کردید، ممکنه که چندان بازدید شما کم نشه. اما به احتمال قوی روی فهرست شدن نوشته‌های جدیدِ سایت تاثیر گذار خواهد بود. شاید تا مدتی مثلاً یک هفته یا بیشتر صفحات جدید سایت در گوگل Index نشه که این خود طبیعی است. البته باید رفتار گوگل در طی زمان‌های مختلف هم بررسی بشه. شاید در آینده نوع پس لرزه فرق کند. اما باز هم مهم این است که حتماً شامل پس لرزه خواهد بود.پس به طور کلی، اگر تغییر قالب سایت نوعی پیشرفت در سایت شما محسوب بشه، این می‌تواند تغییری خوبی قلمداد بشه. البته پس از این کار ممکن است تبعاتی گریبان سایت شما را بگیرد که پس از گذشت دوران پس لرزه، خواهید دید این تبعات کاملاً جبران خواهد شد. به شرطی که سعی در زنده نگه داشته باشید و محتوای بروز منتشر کنید…

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

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

    سلام،هرکاری کردم نتونستم از search استفاده کنم،استایل زیبا برای لینک،استایل برای لینک،استایل برای link،همه ی این موارد رو امتحان کردم ولی چیزی مرتبط با این عناوین برام نیاورد

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

    چرا کلاس text-right تگ img رو هم به سمت راست برد؟کلا با کلاس های اینجوری مشکل دارم،نمیدونم رو چه تگهایی اعمال میشن،مخصوصا center-block

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

      دوست عزیز باید به css و دستورات و حالت تگ ها آشنا بشید پیشنهاد می کنم ابتدا دوره طراحی وب رو فرا بگیرید و بعد برید سراغ فریم ورک ها… کلاس text-right برابر پراپرتی text-align:right; هست و عناصری که بلاکی نیستند رو به سمت راست هدایت می کنه…

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

        تا حدودی آشنا هستم،پراپرتی text-align:right روی تگ img هم اعمال میشه ؟

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

          تسلط کامل خیلی بیشتر کمکتون میکنه تا آشنایی نسبی همین سوالتون هم دلیلش همین مورد هست تگ img بصورت تنها خاصیت بلاکی نداره و text-align روش اعمال میشه اما در بعضی مواقع ممکنه تحت تاثیر عنصر والدش که بلاکی هست قرار بگیره و شرایط فرق کنه و خاصبت مورد نظر روش اعمال نشه که نیازه پراپرتی های دیگه هم براش یا عنصر والدش set بشه

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

          ایشالا کم کم با راهنمایی های شما آشنایی نسبی تبدیل به تسلط کامل میشه،ممنون از وقتی که برای پاسخگویی گذاشتین.

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

    با سلام خدمت جناب صالحی
    خواستم بدونم امکانش هست با بوت اسرپ یه سایت مشابه سایت زیر که المان ها به صورت اریب هست بسازیم؟
    http://des1gner.com/project/amirtaj/
    میدونیم یه قسمتش مربوط به مباحث css هست اما با توجه به اینکه col های بوت استرپ همگی ساده (مربع یا مستطیل) این کار به چه صورت شدنی هست؟

  • ‏‏

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

    • ‏‏
      وحید صالحی(۲۶ آبان ۱۳۹۵)

      سلام پراپرتی letter-spacing رو هرجا که تگتون فونت یا متن داره توی فایل css برابر 0 قرار بدید یا یه ستاره (*) در ابتدای فایل css بزارید و مقدار letter-spacing درش برابر 0 قرار بدید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram