0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

طراحی سایت ریسپانسیو Responsive واکنش گرا

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1720
تاریخ بروزرسانی ۳۰ شهریور ۱۳۹۹

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

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

طراحی سایت ریسپانسیو

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

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

چرا طراحی سایت ریسپانسیو Responsive واکنش گرا؟

برای آن که سایت های ریسپانسیو، سایت هایی هستند که خود را با اندازه ی صفحه نمایش  تلفن همراه یا تبلت به خوبی سازگار کرده و  انجام کار با آن ها بسیار روان و آسان می باشد, و این خود یک قابلیت بسیار جذاب برای کاربران وب سایت ها در هنگام استفاده می باشد. از دیگر مواردی که باعث اهمیت موضوع ریسپانسیو بودن سایت می شود، تنوع سیستم عامل ها و مرورگر های موجود در بازار می باشد. سایت ریسپانسیو توانایی مچ شدن و سازگاری با انواع سیستم عامل ها (ویندوز – اندروید – لینوکس –  IOS– مکینتاش- یونیکس و…) و انواع مرورگر های جدید و قدیمی عرضه شده را دارند که این خود یکی از مهم ترین نقاط قوت این نوع سایت ها می باشد.

ایجاد صفحه وب با بوت استرپ

برای شروع کار کافی است یک فایل با پسوند html ایجاد کنید. در بوت استرپ به دلیل اینکه از دستورات html  و  css استفاده می شود، ابتدا از اعلان DOCTYPE استفاده می کنیم. در تگ head ، برای اینکه صفحه ی وب واکنش گرا باشد از تگ meta استفاده می شود.
در تگ meta ویژگی width=device-width بررسی می کند که عرض صفحه ی وب شما با عرض دستگاه های مختلف برابر باشد و ویژگی initial-scale=1 میزان زوم اولیه را هنگام لود شدن صفحه مشخص می کند. فایل css، کتابخانه ی جی کوئری و فایل جاوا اسکریپت بوت استرپ را هم باید در قسمت head  فراخوانی کنید.
به کد زیر دقت کنید با نوشتن این کد یک صفحه ی بوت استرپ ایجاد کرده ایم.

آموزش برنامه نویسی بوت استرپ

کلاس container در بوت استرپ

برای بسته بندی کردن محتوای سایت در Bootstrap می توان از کلاس container یا container-fluid استفاده کرد.
کلاس container یک صفحه ی وب با عرض ثابت ایجاد می کند و سایت شما از چپ و راست کمی فاصله دارد و کلاس container-fluid کل عرض صفحه را می پوشاند و سایت شما از کناره ها فاصله نخواهد داشت.
در کد بالا از کلاس container استفاده شده است و خروجی این کد به صورت زیر می باشد.

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

شبکه بندی اولیه در بوت استرپ

Bootstrap صفحه ی وب را به دوازده ستون تقسیم می کند و عناصر وب در این دوازده ستون قرار می گیرند. هر جا که نیاز باشد می توان با ادغام ستون ها، ستون بزرگتری ایجاد کرد. در تصویر زیر می توانید تقسیم بندی ها را مشاهده کنید. دقت کنید که جمع اعداد هر ردیف برابر با دوازده می شود.

کلاس های شبکه بندی در بوت استرپ

  • Xs  برای تلفن های همراه (مخفف extra small)
  • Sm  برای تبلت (مخفف small)
  • Md  برای کامپیوترهای رومیزی (مخفف medium)
  • Lg  برای رایانه های بزرگتر( مخفف large)

Div با کلاس row برای ایجاد یک ردیف در بوت استرپ استفاده می شود. حالا باید با استفاده از کلاس های شبکه بندی ردیف ها را به ستون های دلخواه تقسیم کنید.  برای این کار کافی است از کلاس col استفاده کنید. بعد از آن باید کلاس شبکه بندی را بنویسید. سپس عدد قرار می دهیم که نشان دهنده ی پهنای ستون است.

به کد زیر دقت کنید:

آموزش کدهای بوت استرپ

با استفاده از کد بالا سه ستون مساوی ایجاد کردیم. با تغییر سایز مرورگر این سه ستون زیر هم قرار می گیرند. خروجی این کد به صورت زیر است.

آموزش طراحی سایت با بوت استرپ

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

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

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

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

با تشکر از همراهی شما، تیم طراحی سایت وب یار.

 

0/5 (0 Reviews)
مطالب مرتبط
تفاوت توسعه دهنده وب و طراح وب چیست ؟
مطالعه :

در این مقاله از تیم وب یار قصد داریم به بررسی تفاوت طراح وب و توسعه دهنده وب بپردازیم. پس در ادامه با ما همراه باشید. طراح وب کیست ؟ طراح وب (Web Designer ) کسی است که چشم انداز کلی سایت را طراحی کرده و برای یک وب سایت برنامه ریزی می کند. طراحی وب کمتر به استفاده از کد برای جان بخشیدن به وب سایت مربوط می شود و بیشتر به تعیین چیدمان سایت ، پالت رنگ ، انتخاب قلم و مضامین بصری می پردازد که می تواند با کدنویسی توسط یک توسعه دهنده وب زنده شود. طراحان وب در درجه اول مسئولیت آگاهی از نحوه کار کد را ندارند . اما اطمینان حاصل می کنند که برای بازدید کنندگان ، وب سایت زیبا و کاربر پسند است. آنها از نرم افزارهای طراحی گرافیک از جمله محصولاتی مانند Adobe Photoshop ، Illustrator ، Inkscape  و … استفاده خواهند کرد. یک طراح وب معمولا باید مسلط به مباحث UX ( تجربه کاربری ) و UI (رابط کاربری ) باشد. در واقع یک طراح وب باعث می شود وب سایت شما خوب به نظر برسد. آنها همچنین از کدهایی مانند HTML و CSS برای ایجاد طرح های خود استفاده می کنند.   توسعه دهنده وب کیست ؟ توسعه دهندگان وب (Web Developer ) برنامه نویسانی هستند که طرح های ارائه […]

Ajax
مطالعه :

تا قبل از تکنولوژی ایجکس برای تغییر بخشی از صفحه نیاز به بارگذاری کل صفحه وب بود. اما بعد از ایجکس (Ajax) تبادل اطلاعات با سرور به حدی پیشرفت کرد که برای تغییر  قسمتهایی از صفحه وب دیگر نیازی به بارگذاری مجدد کل صفحه نبود. همراه ما باشید تا ساز و کار این تکنولوژی محبوب و کارآمد را با شما در میان بگذاریم.   ایجکس چیست؟ Ajax مخفف Asynchronous Javascript And Xml روشی است که با ترکیب جاوااسکریپت و Xml به سرور درخواستی برای بارگذاری بخشی از صفحه را می دهد. Google suggestion یکی از بهترین مثال ها برای تفهیم Ajax  است. هنگامی که شما درگوگل  عبارتی را تایپ می کنید گوگل در عرض چند میلی ثانیه به شما ادامه عبارت را پیشنهاد می‌کند. این سیستم از ajax پیشتیبانی می‌کند. در صورت عدم وجود ایجکس گوگل برای هر پیشنهاد مجبور به بارگذاری کل صفحه می شد!   سازوکار Ajax چگونه است؟ نحوه کارajax به این صورت است که با ارسال داده ها به سرور و به کمک جاوااسکریپت شی xmlHttpRequest را می سازد. ویژگی این شی این است که به صورت مستقیم می‌تواند صفحات و یا وب سرویس ها را از سمت کاربر دریافت و به سمت سرور ارسال کند. به این صورت که درخواست‌ها از مرورگر می گیرد و در سمت سرور پردازش و دوباره به مرورگر باز می‌گرداند. […]

آموزش کسب درآمد از بیت کوین
مطالعه :

با آموزش کسب درآمد رایگان از بیت کوین و دیگر ارز های دیجیتال در خدمت شما مخاطب خوب سایت وب یار هستیم. ارز دیجیتال: از آن جا که سال 2021 را بسیاری از اقتصاد دان ها سال ارز دیجیتال نامیدند،تصمیم بر آن داریم تا شما را با این نوع از ارز ها آشنا کنیم. هدف از این مقاله افزایش سواد جامعه و جلوگیری از فریب مردم می باشد.     تاریخچه: شاید شما بر این باور باشید که اولین ارز دیجیتال بیت کوین می باشد. ولی سخت در اشتباهید. اولین ارز دیجیتال یک ارز به نام E-gold می باشد. معنای این اسم طلای دیجیتالی می باشد.این ارز اولین بار در سال 1996 توسط شخصی به نام داگلاس جکسون ساخته و ارائه شد.اما به یک سری دلایل که در چارچوب این مقاله نمی گنجد در سال 2006 به کار خود پایان داد. بیت کوین: درست 2 سال پس از پایان فعالیت E-gold شخصی با نام مستعار ساتوشی ناکاموتو یک ارز غیر متمرکز را با نام بیت کوین معرفی کرد. اما این ارز هیچ شباهتی به E-gold نداشت. چون تحت یک تکنولوژی غیر متمرکز به نام بلاک چین ساخته شده بود. در سال 2009 اولین بیتکوین ها با قیمت 0.03$ استخراج و خریداری شدند.     افزایش قیمت بیت کوین: در سال 2010 اولین مبادلات با بیتکوین انجام شد. پس از آن […]

سئو محلی چیست ؟
مطالعه :

سئو محلی چیست ؟     سئو محلی (local SEO) یک استراتژی بهینه سازی موتور جستجو (SEO) است که به دیده شدن تجارت شما در نتایج جستجوی محلی در گوگل کمک می کند. هر مشاغلی که دارای موقعیت فیزیکی یا منطقه جغرافیایی باشد می تواند از سئو محلی بهره مند شود. local SEO چگونه عمل می کند؟ در روزهای ابتدایی اینترنت ، تعداد نسبتاً کمی وب سایت وجود داشت ، بنابراین پیمایش در وب آسان بود. به محض اینکه اینترنت شروع به گسترش کرد ، موتورهای جستجو ایجاد شدند تا به کاربران اجازه دهند سایت های مورد نظر خود را با سهولت بیشتری پیدا کنند. پس از تجزیه و تحلیل رفتار کاربران در طی تریلیون جستجو ، گوگل دریافت که افرادی که به دنبال انواع خاصی از مشاغل هستند به نتایج نزدیک خود نیاز دارند. به همین دلیل الگوریتم جستجوی محلی گوگل دارای یک فاکتور مجاورت است . در واقع گوگل هنگام جستجوی کلمه کلیدی محلی موقعیت مکانی شما را در نظر می گیرد. این اتفاق می افتد حتی اگر کاربر نام شهر یا عبارت “نزدیک من” را در جستجوی خود وارد نکند. به عنوان مثال اگر در محل کار خود هستید و می خواهید برای ناهار یک پیتزا تحویل بگیرید ، لیستی از مکان های نزدیک دفتر شما را در صفحه نتایج نمایش می دهد. اما اگر همان جستجو را […]

درگاه پرداخت تلگرام و اینستاگرام
مطالعه :

با توجه به بازار داغ خرید و فروش در اینستاگرام و تلگرام و محبوبیت روزافزون این دو سوشیال مدیا برآن شدیم که راهی آسان و تنها با فشردن چند کلیک، برای دریافت درگاه پرداخت تلگرام و اینستاگرام را خدمت شما عزیزان ارائه دهیم. درگاه پرداختی آنلاین بدون نیاز به دریافت اینماد.   آنچه خواهیم خواند اینماد چیست؟ مدارک و شرایط لازم برای دریافت اینماد درگاه پرداخت آنلاین زرین پال درگاه پرداخت  برای کسب و کارهای اینستاگرامی و تلگرامی اینماد چیست؟ اینماد یا همان نماد اعتماد الکترونیکی(E-Namad) نمادی است که به وب سایت ها و کسب و کارهای اینترنتی اعتبار و رسمیت می بخشد. این نماد توسط مرکز توسعه تجارت الکترونیک به سایت هایی که در آن ها تراکنش مالی صورت می گیرد داده می شود.   مدارک و شرایط لازم برای دریافت اینماد شما به عنوان یک شخص حقیقی با ارائه ی مدارکی نظیر: مجوز کسب و کار تعهد شخص حقیقی شناسنامه، کارت ملی و مدرک نظام وظیفه و پرداخت هزینه می توانید موفق به دریافت دو ساله ی این نماد شوید. علاوه بر مدارک گفته شده هر سایت برای دریافت اینماد موظف به رعایت قوانین و الزاماتی است. الزاماتی نظیر: تایید مالکیت دامنه پشتیبانی از زبان فارسی عدم استفاده از پاپ آپ فروشگاهی بودن سایت درج قیمت روی هر محصول نمایش لینک ثبت شکایت در هر قسمت سایت درج […]

اینستا والت چیست؟
مطالعه :

اینستا والت چیست؟ اینستا والت یک کیف پول ارز دیجیتال می باشد که در 29 آپریل 2011 راه اندازی شد. این کیف پول ها به منظور نگه داری ارز های دیجیتال و فیات استفاده می شد. ارز هایی نظیر: بیت کوین اتریوم لایت کوین تتر کاردانو و موارد دیگر نظیر این ارز ها را میشد در آن نگه داری کرد. این کیف پول از نوع دیجیتالی می باشد. گفته می شود که 3 ماه پس از رو نمایی از این کیف پول، بسته شد. کلاهبرداری با کیف پول اینستا ولت: در چند سال گذشته برخی از این افراد با ایجاد وب سایتی مشابه این وب سایت ایجاد کردند. سعی کردند به این وسیله پول شویی کنند. نحوه فعالیت این وب سایت ها: این افراد به بهانه این که در خارج از کشور هستند و میخواهند چیزی را خریداری کنند یا این که برای کسی پولی بفرستند، با استفاده از این کیف پول از شما کلاه برادری می کنند. یا این که از طریق شما یک فرایند پول شویی را انجام می دهند. چگونه شما در دام این وبسایت ها خواهید افتاد؟ افرادی با شماره های خارج از کشور که اغلب اروپا و کانادا هستند با شما تماس خواهند گرفت. از شما درخواست می کنند این کیف پول را نصب کنید. تا پولی به حساب شما بریزد و یک چیز در […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *