campaign-off40

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



visibility  
mode_comment   ۱۸

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

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

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

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

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

comment دیدگاه کاربران
رضا قاسم نژادیان replyپاسخ

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

وحید صالحی

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

محمد replyپاسخ

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

وحید صالحی

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

هوشمند امینی replyپاسخ

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

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

باتشکر

وحید صالحی

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

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

سید احسان عظیمی replyپاسخ

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

وحید صالحی

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

سید احسان عظیمی replyپاسخ

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

وحید صالحی

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

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

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

وحید صالحی

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

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

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

حمید رضا مصطفی زاده replyپاسخ

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

وحید صالحی

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

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

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

Elnaz Eln replyپاسخ

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

وحید صالحی

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

ارسال نظرات

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