ابزارهای طراحی سایت واکنشگرا

توسط ۱۳۹۴/۱۰/۰۴ آموزش طراحی سایت 21 نظر
طراحی سایت واکنشگرا

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

طراحی سایت واکنشگرا مفهوم ساده ای است. اما وب سایت های امروزه آیتم ها و المان های زیادی را در بر دارند و همه آن ها را فقط در یک صفحه به نمایش می گذارند. صحفه اول سایت های مختلف را مشاهده کنید. خبر نامه، گالری، تبلیغات، اسلایدر، بنر، نمونه کارها، درباره ما و مواردی این چنینی فقط در صفحه اول سایت وجود دارند. حال مدیریت همه این بخش ها و طراحی ریسپانسیو این بخش ها بسیار سخت است، زیرا که ما می خواهیم سایتمان به صورت کاملا واکنشگرا در موبایل ها و تبلت ها نمایش داده شود. مدیریت بخش های مختلف با افزایش اشیاء صفحه اصلی پیچیده است و این پیچیدگی حتی با طراحی ریسپانسیو که در آموزش های قبل به آن پرداختیم نیز شاید با مشکل روبرو شود. راه حل اساسی چیست؟

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

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

برای طراحی سایت واکنشگرا ، شما نیاز به دانش استایل نویسی یا همان CSS دارید. ولی اگر دانش مناسبی در زمینه استایل نویسی ندارید، می توانید از بوت استرپ استفاده کنید. پیچیده ترین کد های CSS با بوت استرپ بسیار راحت و ساده پیاده سازی می شود. بوت استرپ از سه بخش CSS، JavaScript, Font تشکیل شده است که بخش فونت آن را می توانید تغییر داده و فونت دلخواه خود را از اینترنت دانلود کرده و استفاده کنید. البته دو بخش دیگر نیز قابل ویرایش اند ولی نیازمند دانش در هر دو بخش هستید و اگر دانش لازم را ندارید نگران نباشید، لزومی به ویرایش این قسمت ها نیست.

برای شروع شما باید ابتدا کتابخانه بوت استرپ را دانلود کنید. حجم این کتابخانه فقط ۲۸۰ کیلو بایت است و قرار نیست وب سایت شما با این کتابخانه حجیم شود.

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

به این بحث بپیوندید / 21 نظر

  • نفیسه می‌گه:

    سلام دقیقا رابطه بوت استرپ با جی کوئری چیست؟

  • بنفشه می‌گه:

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

  • admin می‌گه:

    با درود و احترام

    اینجا منظورمون ارتباط نبود نسبت بود
    به این مفهوم که رابطه css با بوت استرپ مثل رابطه جاوا اسکریپت با جی کوئری است.

  • hesam می‌گه:

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

  • روشنک می‌گه:

    آیا نسخه های فبلی بوت استرپ با نسخه جدید در کار ما تاثیر گذار است؟

  • صالح زاده می‌گه:

    در سایتهای قوی ایا از برنامه های موجود برای واکنشگرا کردن استفاده میکنند یا نه

  • admin می‌گه:

    با درود و احترام
    نسخه های جدید خیلی کاملتر و بهتر هستند.
    ساپورت css3 یکی از قابلیت های بزرگ ورژن های جدید هست.

  • هادی می‌گه:

    طراحی سایت من با پی اچ پی چرا نمیتوانم فونتما تغییر بدم!!!!!!!!!!

  • admin می‌گه:

    با سلام و احترام

    به طراح سایتتون باید بگید این کارو بکنه و یا به یک متخصص طراحی وب سایت

  • مصطفی می‌گه:

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

  • admin می‌گه:

    با درود و احترام

    استفاده از ابزار های سئو ربطی به امنیت سایت شما نداره
    مگر اینکه از ابزار های ناشناخته و غیر استاندارد استفاده کنید

  • اکبر می‌گه:

    دانش استایل نویسی هیچ ربطی ب cssنداره چرا در متن این دوتا را مترادف هم در نظر گرفتید

  • محمدرضا می‌گه:

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

  • admin می‌گه:

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

  • هادی می‌گه:

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

  • admin می‌گه:

    با سلام
    به دلیل این که سال شمسی رو به اتمام است، مشغله کاری متخصصین شرکت بیش از حد انتظار بوده و بدین وسیله از تمامی کاربران محترم پوزش می طلبیم. آموزش ها در حوزه طراحی سایت و سایر حوزه ها ادامه خواهد یافت و البته می توانید از وب سایت w3masters.ir نیز استفاده نمایید.

  • panida _93 می‌گه:

    سلام لطفا راجب رایانش ابری مقاله کاملی بذارید… ممنون

  • امیرحسین می‌گه:

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

  • admin می‌گه:

    سلام
    بله تا ۱ سال که پشتیبانی رایگان صورت می گیرد. پس از آن هم در صورت تمایل قرارداد پشتیبانی منعقد می گردد.

  • hamid می‌گه:

    سلام و خسته نباشید
    ایا شما برای کار هم جایی معرفی میکنید بعد یادگیری؟؟

  • فرزانه می‌گه:

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

نظر خود را بیان کنید