0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

آموزش طراحی سایت ریسپانسیو responsive واکنش گرا

نویسنده پشتیبانی وب یار
امتیاز مطلب
آموزش طراحی سایت ریسپانسیو responsive واکنش گرا
5 (100%) 2 vote[s]
تعداد بازدید 750
تاریخ بروزرسانی ۷ تیر ۱۳۹۳

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

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

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

آموزش طراحی سایت ریسپانسیو responsive واکنش گرا

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name = “viewport” content = “width =device-width, initial-scale = 1.0”>

حالا بروی css قالب کار میکنیم.

مقدار width ها را برابر صد در صد می دهیم .

width:100%;

در طراحی ها از منوهای بالای سایت از  آیکنی با قابلیت display با مقدار hidden  استفاده می کنیم.(چون در حالت ریسپانسیو در تبلت فقط آیکن نمایش داده می شود.)

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

حالا تعیین میکنیم که سایز گجت ما در چه ابعادی است

@media only screen and (max-width:1024px;){

مقادیر دیگر سی اس اس

#menu-icon { display:inline-block;}کد نمایش آیکن منو بجای منو

}

آموزش طراحی سایت با قابلیت ریسپانسیو responsive واکنش گرا تبلت موبایل

به همن راحتی سایت رسپونسیو شد

دانلود فایل آموزش 

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

 

مرورگرهای موبایل برای سازگاری با سایت‌هایی که در گذشته طراحی شده‌اند، از مفهومی به نام Viewport برای نمایش سایت‌ها استفاده می‌کنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد. مرورگر موبایل سایت را در این فضای مجازی نمایش می‌دهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار می‌دهد.
نخستین گام در طراحی واکنش‌گرا، اطلاع رسانی به مرورگر برای تغییر اندازه‌ی Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیش‌فرض، فضای مورد نظر برنامه‌نویس را به Viewport اختصاص دهد.
تغییر اندازه‌ی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام می‌رسد.

<head>
<meta name="viewport" content="width=480">
</head>

همان‌گونه که مشاهده می‌کنید، در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شده است. این مقدار حداقل مقدار ممکن است. چنانچه عرض نمایشگر موبایل بیش از ۴۸۰ پیکسل باشد، عرض Viewport هم افزایش خواهد یافت.
شیوه‌ی دیگر در تغیین مقدار Viewport، تعیین آن با عرض فیزیکی نمایشگر است. برای این کار از کد زیر استفاده می‌شود:

<meta name="viewport" content="width=device-width">

اندازه‌ی مجازی

به دلیل تراکم بیشتر پیکسلی در موبایل‌های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ‌تاپ و کامپیوترهای شخصی، مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند. به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود، ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش درآید.
درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاه‌های مختلف و در سیستم‌عامل‌های مختلف، متغیر است. بنابراین یکی از مهم‌ترین نکات در طراحی واکنش‌گرا، عدم اعتماد به انداز‌ه‌ی پیکسل‌ها است.
در سایت Screen Sizes می‌توانید اندازه‌ی واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد.
بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point، cm، و … است

بزرگنمایی

مرورگرهای موبایل ممکن است به صورت پیش‌فرض صفحات شما را بزرگنمایی یا کوچکنمایی کنند. از موارد قابل کنترل در تگ meta اندازه‌ی بزرگنمایی و کوچک‌نمایی است.

<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2">

در کد بالا بیشترین اندازه‌ی بزرگنمایی ۲ برابر و اندازه‌ی پیش‌فرض آن ۱ تعیین شده است.

عملکرد خاص مرورگر سافاری ممکن است باعث شود بخواهید همیشه مقدار maximum-scale را برابر ۱ قرار دهید. این مرورگر چنانچه صفحه‌ی موبایل گردانده شود تا از حالت عمودی به افقی درآید، صفحه را بار دیگر پردازش نمی‌کند و همان صفحه‌ی عمودی را بزرگنمایی می‌کند تا در عرض صفحه جای بگیرد. با تعیین مقدار maximum-scale به ۱، این عملکرد سافاری اصلاح می‌شود. البته این کار سبب می‌شود تا کاربران دیگر قادر به بزرگنمایی صفحه نباشند که خود یک اشکال به حساب می‌آید.

عرض حداقل و حداکثر

برای آنکه صفحات وب در همه‌جا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید، حداقل عرض مجازی می‌تواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپ‌تاپ و کامپیوتر، حداکثر عرض مناسب، ۱۰۰۰ پیکسل است. البته ممکن است با توجه به تقسیم‌پذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.

دید جعبه‌ای یا بر پایه‌ی ماژول

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

ویژگی‌های خاص شیوه‌نامه‌های CSS برای پیاده‌سازی طرح واکنش‌گرا

مهم‌ترین ویژگی CSS برای پشتیبانی طراحی واکنش‌گرا، دستور media است. این دستور به ما کمک می‌کند تا بر اساس عرض صفحه، ویژگی‌های عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد:

@media ( min-width: 1000px ) {
	footer {
		width: 1000px;
	}
}
@media ( min-width: 401px ) {
	footer {
		display: block;
	}
}
@media ( max-width: 400px ) {
	footer {
		display: none;
	}
}

همان گونه که مشاهده می‌کنید، شاید لازم شود به ازای هر عنصر، چندین حالت مختلف از نمایش طراحی شود و گاهی لازم شود تا یک عنصر به صورت کامل از دید مخفی شود.

تصویرها

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

بهتر است اندازه‌ی تصویر مساوی بزرگترین اندازه‌ی پیکسل‌های واقعی نمایشگر کامپیوتر در نظر گرفته شود. برای مثال عدد ۱۰۰۰ یا ۱۳۶۶ می‌تواند مقدار مناسبی باشد.

در نمایشگرهای کوچکتر، با تعیین اندازه‌ی درصدی عرض و تعیین نکردن ارتفاع یا قرار دادن مقدار auto برای آن می‌توان یک تصویر واکنش‌گرا در اختیار داشت

img#header {
	width: 100%;
	height: auto;
}

تغییر اندازه‌ی تصاویر پس‌زمینه هم در css به شکل زیر انجام می‌شود:

div#header {
	width: 100%;
	padding-top: 50%;
	background-image: url( "01.jpg" );
	background-repeat: no-repeat;
	background-size: 100% auto;
}

نکته‌ی قابل توجه در قطعه کد بالا، استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن می‌توان، ارتفاع یک عنصر را به صورت Responsive تعیین کرد.

اندازه‌ی فونت‌ها

بهترین واحد برای مشخص کردن، اندازه‌ی فونت‌ها واحدهای فیزیکی هستند. برای مثال تعیین اندازه‌ی فونت پیش‌فرض صفحه با مقدار “۱۴pt” به جای “۱۴px” و تعیین اندازه‌ی عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشته‌های واکنش‌گرا است.

آموزش طراحی سایت ریسپانسیو responsive واکنش گرا
5 (100%) 2 vote[s]
مطالب مرتبط
هاست حرفه ای اصفهان
مطالعه : 10 دقیقه

هاست حرفه ای اصفهان یکی از ویژگی های مهم شرکت های طراحی سایت در اصفهان ارائه هاست حرفه ای اصفهان است. شما برای این که در فضای مجازی حضور داشته باشید علاوه بر طراحی سایت حرفه ای به خرید یک هاست حرفه ای هم نیاز دارید. در این مقاله قصد داریم تا شما را با ویژگی های یک هاست خوب آشنا کنیم تا بتوانید بهترین تصمیم را برای خرید هاست بگیرید. پس همراه تیم طراحی سایت و سئو سایت وب یار باشید. همان طور که واضح است با حضور در فضای مجازی کسب و کار شما 24 ساعته می شود و شما در تمامی ساعات شبانه روز می توانید محصولات و خدمات خود را به فروش برسانید. در صورتی که شما یک هاست حرفه ای و قدرتمند داشته باشید تا در تمامی ساعات دسترسی به سایت تان امکان پذیر باشد می توانید به صورت چشمگیر شاهد افزایش فروش خود باشید. لازم به ذکر است که تیم طراحی سایت وب یار با ارائه هاست حرفه ای اصفهان که از امنیت و up time بالا برخوردار است، طی سال های اخیر در افزایش فروش مشتریان خود نقش بسزایی داشته است. هاست چیست؟ هاست که در لغت به معنای میزبانی است، یک فضای مجازی روی سرور است که برای سایت در نظر گرفته شده و توانایی ذخیره اطلاعات سایت شما نظیر کدها، فایل […]

Referer Page لینک ارجاع
مطالعه : 5 دقیقه

چگونگی ایجاد فرم بازخورد برای پست ها یا محصولات از طریق افزودن لینک ارجاع در افزونه فرم تماس 7 و گراویتی فرم   شاید بخواهید بدانید کاربران بلا فاصله قبل از تکمیل فرم تماس شما، کدام یک از صفحات یا مقالات را دیده اند، تیم آموزش طراحی سایت اصفهان افزونه فرم تماس 7 را به شما پیشنهاد می دهد؛ با فرم تماس 7 می توانید آدرس این صفحات (لینک ارجاع) را از طریق ایمیل خود دریافت کنید. لینک ارجاع (Referer Page) آدرس صفحه ایست که کاربر، بلافاصله قبل از ورود به صفحه فعلی مشاهده کرده است.   روش افزودن لینک ارجاع در افزونه فرم تماس 7 با ترفند فیلد مخفی 1) برای شروع شما باید این قطعه کد را درون فایل Functions.php در پایین ترین قسمت قرار دهید: function getRefererPage( $form_tag ) { if ( $form_tag[‘name’] == ‘referer-page’ ) { $form_tag[‘values’][] = htmlspecialchars($_SERVER[‘HTTP_REFERER’]); } return $form_tag; } if ( !is_admin() ) { add_filter( ‘wpcf7_form_tag’, ‘getRefererPage’ ); } 2) در قسمت پیشخوان (داشبورد) وردپرس به لیست فرم های تماس رفته و فرم خود را داخل ادیتور (ویرایشگر کد) باز کنید و این فیلد مخفی را در قسمت body اضافه کنید: form: [hidden referer-page default:get] 3) تب Mail را باز کرده و این فیلد را در قسمت Body مربوط به هشدار ایمیل (notification mail) و در جایی که می خواهید نتیجه نمایش […]

Toolset
مطالعه : 5 دقیقه

تنها استفاده از پست ها و صفحه ها برای ساخت هر وبسایتی با وردپرس کافی نیست. Toolset که یکی از افزونه های نمایش تمامی توابع وردپرسی است به شما این امکان را می دهد که وبسایت های رتبه بندی کننده، وبسایت های راهنما، وبسایت های دارای عضویت اشتراکی و یا وبسایت های فروشگاهی منحصر به فرد بسازید.   Toolset چیست؟ مجموعه ای از افزونه هایی است که برای گسترش وردپرس استفاده می شود. Toolset به آن ها که برنامه نویسی نمی دانند کمک می کند سایت های وردپرسی بسازند. این گفته به نظر یک شعار است اما آن ها که تجربه حداقل یک بار استفاده از Toolset را دارند نظرشان متفاوت است.   با Toolset چه می توان کرد؟   1) نوع محتوایی که میخواهید در سایت قرار دهید را خودتان تعیین کنید سایت های مختلف به نوع محتوای متفاوت نیاز دارند؛ Toolset به شما این امکان را می دهد که دقیقاً همان نوع محتوایی را که میخواهید، به کار ببرید و بین آن ها ارتباط ایجاد نمایید.   2) قالب (Template) و View اختصاصی طراحی کنید افزونه نمایش تمامی توابع وردپرسی Toolset کار طراحی قالب ها، آرشیوها و لیست ها را برای انواع محتوا، آسان کرده است. شما می توانید با HTML و یا با استفاده از صفحه ساز های خودکار، قالب های خود را طراحی کنید. تقریباً در […]

افزونه چت واتساپ
مطالعه : 10 دقیقه

افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ whats app وردپرس به شما این امکان را می دهد که تجربیات لذت‌بخش چت کردن در واتساپ را در سایت خود پیاده‌سازی کنید. استفاده از این افزونه یکی از بهترین روش‌های ارتباطی و ارتباط با مشتری است که به‌ طور مستقیم کاربران سایت را پشتیبانی کرده و همچنین در ذهن مشتری ایجاد اعتماد و وفاداری نمایید.   موقعیت های مختلف نمایش افزونه چت واتساپ با تیم پشتیبانی شما می‌توانید در موقعیت مختلف سایت وردپرسی خود، از پشتیبان های آنلاین استفاده کنید.   نمايش در ويجت های قالب:   نمايش در صفحات محصول ساخته‌شده در ووکامرس:   دکمه‌های سفارشی و شورت کدها: امکانات بی نظير افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ حساب‌های چندگانه را پشتیبانی می‌کند: به شما اجازه می دهد که تلفن واتساپ تمام کارمندان خود را بصورت شکیل و در یک باکس درکنار هم بگذارید. کارمندان شما با هر پست یا سمتی که در شرکت شما دارند برای بازدیدکنندگان وب‌سایت قابل‌ مشاهده هستند و مشتری با هر شخص یا بخشی که مایل است می‌تواند در واتساپ چت و گفتگو نماید. بازدیدکنندگان با تنظیمات سفارشی شما می‌توانند متوجه شوند که چه شخصی آنلاین و چه کسانی آفلاین هستند. حتی می‌توانند با برنامه‌ریزی شما در این پلاگین ببینند که مثلاً بخش پشتیبانی شما چه روزهایی و در چه ساعاتی […]

مطالعه :

دانلود مگا منو سریع و سبک mega menu یک منو وردپرس مگا است که اجازه می دهد تا شما به راحتی منو را در پروژه تم خود را ادغام کنید. این افزونه به شما امکان می دهد منوهای مگا، منوهای زبانه و منوهای کاروئلاست را به صورت ساده و بومی تبدیل کنید و منوی موجود خود را به یک ابزار قدرتمند تبدیل کنید. سیاراین وردپرس مگا منو یک منو پاسخگو است، به این معنی که طرح مناسب تمام اندازه صفحه نمایش است. با این وجود، تفاوت با سایر گزینه ها این است که رویدادهای صفحه لمسی بطور بومی فعال شده و تجربه کاربر را در صفحه نمایش لمسی بطور قابل توجهی بهبود می بخشد. چیدمانما همچنین باید انواع طرح های در دسترس را که این منو مگا وردپرس را بر جایگزین های دیگر برجسته می کنند ذکر می کنیم. این اولین مگا منو است که همه در یک راه حل است، به عنوان شما می توانید یک منوی افقی یا عمودی را در دستگاه های دسکتاپ و منوی کشویی یا غیرفعال در تلفن همراه ایجاد کنید. کشیدن و رها کردنپنل مدیریت کشیدن و رها کردن یکی دیگر از ویژگی های کلیدی است که این مگامنای را برجسته می کند. از پانل مدیریت منو بومی می توانید تمام محتوای مگامنام خود را با استفاده از یک رابط کشیدن و رها کردن […]

مطالعه :

استایل و زیبا سازی سبد فروش edd وردپرس به وسیله فایل زیر میتوانید افزونه قدرتمند easy download digital  را زیبا کنین و استایل زیبایی به اون بدین و فروشتون را چند برابر کنین: فرم ارسال آسان دیجیتال فرم پرداخت بسیار آسان است! کنترل کامل از یک ظاهر طراحی شده با گزینه های مختلف و پیش نمایش زنده زمانی که شما را تغییر دهید. این افزونه نیاز به پلاگین دانلود Easy Digital Downloads دارد. Easy Digital Downloads یک راه حل کامل تجارت الکترونیک برای فروش محصولات دیجیتال در وردپرس است. شروع : این 6 مرحله ساده را برای ساخت فرم های زیبا دنبال کنید. مرحله # 1: → نصب / فعال کردن دانلود آسان دیجیتال. دریافت آسان دیجیتال دانلود مرحله 2: → ایجاد دانلودها و انتشار آنها. مرحله 3: → یک صفحه ایجاد کنید که در آن می توانید از کد کوتاه استفاده کنید [download number = “12” column = “4”]. مرحله 4: → به صفحه پرداخت که میخواهید سبک بروید بروید. مرحله 5: → حالا، این صفحه را مشاهده کنید و روی لینک «سفارشی کردن» در نوار مدیریت WordPress در بالای صفحه کلیک کنید. مرحله 6: → مشاهده و باز کردن Checkout Styler برای پانل EDD و سفارشی کردن صفحه پرداخت خود را. این همه! تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید

دیدگاه ها

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

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