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

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۰۵ شهریور ۱۳۹۴

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

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

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

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

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

نویسنده
علاقمند به طراحی و برنامه نویسی وب هستم و چند سالی میشه که در این زمینه فعالیت می کنم. (ایمیل من: @) وب سایت من:

جلسات دوره

نظرات کاربران

Elnaz Eln

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

وحید صالحی

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

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

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

وحید صالحی

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

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

استاد لطف میکنید بگید به چه صورت و یک راهنمایی کلی بفرمایید؟
یا لینکی بگذارید
چون سیستم col ها همه یه گرید مستطیلی و مربعی دارن

سید احسان عظیمی

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

وحید صالحی

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

سید احسان عظیمی

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

سید احسان عظیمی

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

وحید صالحی

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

سید احسان عظیمی

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

وحید صالحی

پاسخی رو که به سوال قبلیتون دادم رو انجام بدید

هوشمند امینی

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

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

باتشکر

وحید صالحی

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

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

محمد

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

وحید صالحی

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

رضا قاسم نژادیان

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

وحید صالحی

میشه اما کار یکم مشکل میشه و اصولی نیست همزمان بهتره

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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