توسعه وب سایت

به هر طراح صفحه‌آرایی که با کار بعدی چیدمان مواجه شد طرح تطبیقی، شبکه ها مورد نیاز است. در بیشتر موارد، بوت استرپ خوب قدیمی گرفته می شود و div هایی با کلاس هایی مانند col-xs-6 col-sm-4 col-md-3 در html ظاهر می شوند. و همه چیز خوب و سریع به نظر می رسد، اما در این رویکرد اغلب مشکلات زیادی وجود دارد. در این مقاله، ما به این دام‌ها نگاه می‌کنیم و گوجه‌فرنگی‌های گندیده را روی کاردستی‌ام می‌ریزیم تا شبکه‌های بی‌دردسر.

چالش ها و مسائل

شبکه های غیر استاندارد

بنابراین، طراح صفحه ما زمان بسیار کمی دارد، چیدمان در آتش است، همه چیز باید دیروز انجام شود. بنابراین، او بوت استرپ فریمورک محبوب css را به عنوان پایه در نظر گرفته و کار خود را آغاز می کند. و سپس، وسط کار، ناگهان به یک بلوک از بنرهای "5 پشت سر هم" برخورد می کند. همه کسانی که با بوت استرپ کار کرده اند می دانند که شبکه پیش فرض آن 12x است، بنابراین 5 ستون پشت سر هم با یک شبکه بوت استرپ استاندارد به هیچ وجه امکان پذیر نیست. بله، البته، شما می توانید یک شبکه دلخواه در بوت استرپ بسازید، اما این زمان برای از دست دادن، دانلود وابستگی ها، ساخت less-ki است (و ما، برای مثال، در sass می نویسیم).

آیا می توانم چند کتابخانه را برای شبکه های سفارشی متصل کنم؟ به طور کلی، این خروجی خوبتنها عیب این روش این است که تقریباً همه آنها یا برای نوشتن طولانی و خسته کننده @media(min-width:)() طراحی شده اند، یا مجموعه ای از کلاس های خود را تولید می کنند، با تعدادی col15 که احتمالاً مورد نیاز نیستند. xs-offset-3، که وارد css-ku نهایی می شود.

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

اغلب، شبکه راه‌انداز استاندارد فاقد نقاط شکست اضافی است، یعنی xs، sm، md، lg وجود دارد - همه آنها تا عرض 1200 پیکسل هستند. در مورد مانیتورهای بزرگ چطور؟ مقداری نقطه شکست xl در 1600 پیکسل فقط درخواست می کند مجموعه استاندارد. اما باز هم وجود ندارد و همان راه‌حل‌هایی به وجود می‌آید که در آن وجود دارد پاراگراف قبلی. ولی نقاط کنترلمی تواند زیاد باشد - 320، 360، 640، 768، 992، 1200، 1600، 1900 ..

افزونگی و پرحرفی

و اینجا کم کم داریم نزدیک می شویم مشکل بعدی. تصور کنید که باید اندازه بلوک های خود را برای هر شبکه تنظیم کنید، سپس چیزی شبیه به این دریافت می کنید:

خیلی زیاد نیست؟ کشش/فشار احتمالی و قابل مشاهده/پنهان را پرتاب کنید و سپس با خیال راحت می توانید دیوانه شوید. اما همه این کلاس ها با css نوشته شده اند، تصور کنید برای تمام ترکیبات یک شبکه 60x چند کلاس باید در css بنویسید!

جداسازی سبک ها از نشانه گذاری

هر طراح چیدمان می داند که سبک های درون خطی بد هستند. پس چرا ما در کلاس‌های نشانه‌گذاری چیزی را که مربوط به سبک‌ها است می‌نویسیم؟ col-xs-6 ، visual-sm و خدای ناکرده text-right - اینها همه سبک هستند و اگر نیاز به تغییراتی در طرح بندی قبلاً کشیده شده داشته باشید، قطعاً مشکلی وجود خواهد داشت که طراح صفحه باید از backend بپرسد. -schik برای تغییر col-sm- 6 در col-sm-4.

پوشاندن سبک های غیر ضروری

غالباً چارچوب css فقط به خاطر شبکه‌ها و چند عملکرد کوچک به هم متصل می‌شود، که متعاقباً منجر به تنظیم مجدد بیش از حد سبک‌ها و دو برابر شدن اندازه css نهایی می‌شود. به عنوان مثال، کل bootstrap.min.css گنجانده شده است، و سپس سایه‌ها و گوشه‌های گرد از .btn، .form-control و موارد مشابه به شیوه‌ای سرگرم‌کننده و تحریک‌آمیز حذف می‌شوند، از جمله:hover،:focus، :first- کودک . در نتیجه، به جای کمک، چارچوب شروع به مانع شدن می کند. ناگفته نماند اغلب ویژگی های غیر ضروری مانند .glyphicon. البته، دوباره، می توانید بوت استرپ را از آنچه نیاز دارید مونتاژ کنید، اما دوباره این زمان است.

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

فرض کنید یک طراح چیدمان BEM را یاد گرفته و شروع به استفاده از آن کرده است. اما نیاز به استفاده از بوت استرپ استثناهای خود را دیکته می کند - در آن همه کلاس ها با خط فاصله نوشته می شوند و از اصول BEM پیروی نمی کنند. و در اینجا مشکل انتخاب پیش می‌آید - یا در نام‌های کلاس‌ها با یک هج‌پنج مواجه شوید (btn-block disabled component__btn component__btn_disabled)، یا همچنان بوت استرپ را کنار بگذارید.

روش های منسوخ شده

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

سوزی! - این راه چاره است؟

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

.col (@media (دقیقه عرض: 768 پیکسل) ( @include gallery(4 از 12)؛ ) @media (min-width: 1200px) ( @include gallery(3 از 12)؛ )

این سوسیس است! فرض می کند که شما خودتان با نقاط شکست کنار خواهید آمد. همچنین، سوسی! او نمایشگر را نمی نویسد: برای خطوط برای شما انعطاف پذیر است، باید به یاد داشته باشید که آنها را خودتان بنویسید. تورفتگی‌های بین ستون‌های موجود در آن فقط نسبی تنظیم شده‌اند (تثبیت آنها در پیکسل کار نخواهد کرد). همچنین او اخیرا flex را یاد گرفت و قبل از آن شبکه‌هایی را روی float و :nth-child() ساخت. به طور کلی، سوسی! این خوب است، اما من می‌خواهم سرعت و سهولت توصیف شبکه‌ها را برای همه نقاط شکست، مانند بوت استرپ، داشته باشم.

جستجو برای سایر سیستم‌های شبکه نیز نتایج زیادی به همراه نداشت - همه آنها یا مسیر susy! را دنبال می‌کنند، نقاط شکست را فراموش می‌کنند، یا مسیر راه‌اندازی را دنبال می‌کنند و مجموعه‌ای از کلاس‌های تولید شده را برای هدایت شبکه‌ها در html فراهم می‌کنند.

ساختمان دوچرخه

بنابراین، تصمیم گرفته شد چیزی از خودمان بنویسیم، در نتیجه، شبکه سریع متولد شد. همچنین، مانند susy، بر روی sass ساخته شده است. مزایای اصلی آن در مقایسه با راه حل های دیگر، به ویژه susy چیست!؟ اول از همه، سرعت به دلیل کد کمتر، بیایید یک مثال استاندارد بوت استرپ را در نظر بگیریم:

با استفاده از شبکه سریع، توصیف چنین شبکه ای بسیار آسان است:

@import "~fast-grid/fast-grid"؛ .row (@include grid-row(); ) .col (@include grid-col(6 4 3 2); )

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

شبکه های غیر استاندارد

@import "~fast-grid/fast-grid"؛ .cols ($grid: (شکاف: 5px)؛ @include grid-row($grid); &__item (@include grid-col(12 6 null (1 از 5)، $grid)؛ )

نیاز به مجموعه ای از نقاط شکست

@import "~fast-grid/fast-grid"؛ .cols ( $grid: (نقاط شکست: (xxs: 0px، xs: 360px، sm: 640px، md: 960px، lg: 1200px، xl: 1600px)، ستون‌ها: 60؛ @include grid-row($grid); &__item (@include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) )

افزونگی و پرحرفی / جداسازی سبک ها از نشانه گذاری

fast-grid یک چارچوب شبکه ای برای استفاده در css به جای html بر اساس مجموعه کلاس های تولید شده است. این نشانه گذاری را از سبک ها جدا می کند، که برای پشتیبانی آینده خوب است. همچنین از نیاز به تولید دسته‌ای از کلاس‌های کمکی (col-xs-push-4 و غیره) که عمدتاً استفاده نمی‌شوند، جلوگیری می‌کند.

پوشاندن سبک های غیر ضروری

از آنجایی که fast-grid مجموعه ای از میکس ها است، به خودی خود هیچ قانون css ایجاد نمی کند. بنابراین، در اینجا با این واقعیت مواجه نخواهید شد که فریمورک عناصر را به گونه ای که نیاز ندارید، سبک می کند. و به طور کلی، اینها فقط شبکه هستند و نه بیشتر.

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

fast-grid میکس هایی هستند که باید به صورت داخلی استفاده کنید شماکلاس ها، با نام هایی که شما ترجیح می دهید. BEM را دوست دارید؟ مشکلی نیست!

روش های منسوخ شده

پیش فرض فلکس باکس است که امکانات زیادی را باز می کند و مشکلات شناورهای کلاسیک را حل می کند. به عنوان مثال، به راحتی می توانید ترتیب ستون ها را تغییر دهید.

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

مطمئناً رسیدن به این هدف با کمک کشش / فشار برای شناور امکان پذیر است، اما این بسیار سخت است.

نتیجه

به طور کلی، مجموعه وظایف برای من تکمیل شد - اکنون شبکه ها دیگر برای من مشکلی ایجاد نمی کنند و طرح بندی سریع و آسان است. می توانید در مورد قابلیت های fast-grid در مخزن بیشتر بخوانید و نمونه هایی را مشاهده کنید:

آیا هنوز از بوت استرپ استفاده می کنید؟ سپس به سراغ شما می رویم!

برچسب ها:

• css
• ساس
• توری

افزودن برچسب

موضوع را ادامه می دهیم طرح تطبیقی. امروز ما صحبت خواهیم کرددر مورد یکی از سه نهنگ طرح تطبیقی ​​- چیدمان مبتنی بر شبکه(طرح شبکه انعطاف پذیر). دو مورد دیگر تصاویر انعطاف پذیر هستند.

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

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

برای اعمال یک شبکه در یک صفحه وب، استفاده کنید یک فرمول سادهتناسب:

هدف/زمینه=نتیجه

ساده ترین راه برای درک این فرمول این است که مثال خوب. فرض کنید یک طرح سایت ترسیم شده در دو ستون داریم - قسمت محتوا و نوار کناری:

ما آن را "لاستیک" خواهیم ساخت. اما مشکل اینجاست: چگونه عرض هر دو بلوک را تنظیم کنیم؟ از این گذشته ، اگر آن را در پیکسل ثبت کنید ، دیگر لاستیک نخواهند بود. بنابراین، شما باید از درصد استفاده کنید، نه پیکسل. اما اجازه دهید، چه ارزش هایی را باید بنویسم؟ با این حال، شما باید از چیزی دور شوید.

البته می توانید با چشم تخمین بزنید: محتوا حدود 70٪ از کل عرض صفحه را اشغال می کند و نوار کناری - 30٪. اما طراح چیدمان مناسب هرگز چیزی را با چشم تخمین نمی زند. ما به اندازه دقیق نیاز داریم.

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

660 / 960 = 0,6875
300 / 960 = 0,3125

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

68,75%
31,25%

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

از طرح طراحی می دانیم که عرض این ستون باریک 120 پیکسل و عرض آن 520 پیکسل است. چگونه این اعداد را به % تبدیل کنیم؟ دوباره، فرمول نسبت را اعمال کنید. اما این بار از کل عرض صفحه به عنوان زمینه استفاده نمی کنیم، بلکه از عرض بلوکی که این دو ستون را شامل می شود، یعنی عرض قسمت محتوایی که داریم 660 پیکسل است. ما به اشتراک می گذاریم:

120 / 660 = 0,1818
520 / 660 = 0,7878

به عنوان درصد، به ترتیب 18.18 درصد و 78.78 درصد به دست می آوریم

به هر حال، در فایل های مدرنسبک‌هایی که از طرح‌بندی واکنش‌گرا استفاده می‌کنند، طراحان چیدمان مناسب محاسباتی را به عنوان نظرات اضافه می‌کنند. برای دید بهتر این چیزی است که معمولاً به نظر می رسد:

محتوا(
عرض: 68.75%; /* 660px / 960px */
}

امیدوارم مشکلی ایجاد نکرده باشه بیایید جلوتر برویم!

چیدمان مبتنی بر شبکه

مثال‌های مورد بحث در بالا، البته هنوز یک شبکه نیستند. خوب، چه نوع شبکه ای از دو ستون؟ یک شبکه مدولار واقعی طراحی شده است تا به طراحان و طراحان چیدمان کمک کند تا سایت های پیچیده با تعداد زیادی ستون و بلوک های جداگانه ایجاد کنند.

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

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

این شبکه های مدولار برای چیست؟

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

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

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

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

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

در این درس برای چیدمان سایت مطابق با آن آماده می شویم PSDطرح بندی فقط با استفاده از شبکه (سیستم شبکه)از چارچوب بوت استرپ 4. با یادگیری این روش چیدمان، خود را از شر آن نجات می دهید مشکلات احتمالیبا سازگاری سایت، به ویژه برای مبتدیان خوب است.

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

src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">

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

آماده سازی برای چیدمان

طرح بندی را باز کنید Photoshop-eو مطمئن شوید که یک طرح 12 ستونی روی راهنماها دارد و همه عناصر طراحی با آن راهنماها همسو هستند. فاصله بین راهنماهای افراطی معمولاً 1170 پیکسل است.

دانلود در سایت https://getbootstrap.com/تدوین شده است cssو JSبرای ادغام آسان در پروژه شما

کپی از بخش مقدمه / قالب شروع- قالب صفحه شروع و در فهرست قرار دهید HTML-فایل پروژه شما ما یک فضای خالی برای آینده ایجاد کرده ایم HTMLسند

دانلود bootstrap.min.cssیا از لینک آن استفاده کنید؟

اعتقاد بر این است که پرونده bootstrap.min.cssسریع‌تر بارگذاری می‌شود زیرا در چندین سرور قرار دارد و نه در یکی از سرورهای شما. این بدان معنی است که سایت سریعتر باز می شود. اگر همچنان تصمیم دارید این فایل را برای خود دانلود کنید، مسیر صحیح پوشه را مشخص کنید بوت استرپفایل ها. خالی ایجاد کنید cssفایلی که در آن استایل های خود را می نویسید در هر صورت ضروری است.

مهم!شما cssفایل در فایل فهرست باید کمتر از bootstrap.min.css.

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

rel="stylesheet" type="text/css">

چرا به دوتا نیاز دارید cssفایل؟

cssفایل bootstrap.min.cssاین کتابخانه ای است که حتی لازم نیست وارد آن شوید. ما فقط با یک فایل کار می کنیم - main.css، فقط باید مطمئن شوید که نام کلاس های جدید برای شما cssفایل به طور تصادفی با "کتابخانه" مطابقت نداشت.

در پرونده bootstrap.min.cssقبلاً سبک‌هایی برای شبکه ایجاد شده است flexbox-ahو پرسش‌های رسانه‌ای نوشته می‌شوند، فقط باید کلاس‌های مناسب را در آن بنویسیم بلوک های مناسببر روی HTMLصفحه نام کلاس ها را می توان در صفحه چارچوب زیر پیدا کرد توری. حروفچین های مجرب برای طرح بوت استرپاتصال پلاگین ها ( تکمیل خودکار Bootstrap 4، Bootstrap 4 Snippets)به ویرایشگر کد متن عالی.

در هم شکستن PSDطرح بلوک

می بینیم که سایت از 8 بلوک تشکیل شده است: هدر (سرتیتر)با پیمایش منو (nav)، 6 بخش (بخش)و زیرزمین (پانویس).

در بخش ها (بخش: #خدمات، # نمونه کارها)ستون هایی ظاهر می شوند که ما آنها را بر اساس مولفه اصلی چیدمان می کنیم بوت استرپ - شبکه.

اول انجام دادن HTMLنشانه گذاری ساختار اصلی، جزئیات در دوره چیدمان اضافه خواهد شد.

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

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

نحوه اعمال شبکه

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

انواع شبکه های مدولار

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

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

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

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

خط کش در فتوشاپ

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

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

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

فتوشاپ گرید

شبکه مدولار خود برنامه فتوشاپ پس از رفتن به منوی اصلی "View" - "Show" (نمایش) - "Grid" (Grid) قابل مشاهده خواهد بود. فاصله بین خطوط شبکه قابل تنظیم است. برای انجام این کار، دستور "ویرایش" - "تنظیمات" - "راهنماها، شبکه ها و قطعات" (راهنماها، گرید، برش ها) را اجرا کنید. در اینجا می توانید نه تنها مرحله بین خطوط، بلکه رنگ آنها را نیز تغییر دهید. با استفاده از این شبکه، قرار دادن سریع و دقیق تمام اشیاء سایت آینده در زمین کاری کاملاً آسان خواهد بود.

کار با مکان نما

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

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

Grid در CorelDraw

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

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

از نویسنده:متأسفانه بسیاری از طراحان وب شیک و دیدنی اغلب فراموش می کنند که نتیجه کار آنها باید یک سایت قابل هضم باشد و نه اسکرین شات زیبافقط برای یک نمونه کار مناسب است. در این مقاله، الزاماتی را که باید در فرآیند طراحی و طراحی یک رابط وب در نظر گرفته شود، فرموله کردم.

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

شبکه مدولار چیست؟

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

به طور کلی، طراحی وب بسیاری از "تراشه" های مختلف را از طراحی چاپ به ارث برده است. اینها اصول کار با فونت ها و قوانین ترکیب بندی و ماژول ها هستند. سایت های کارت ویزیت و سایت های ارائه ممکن است به ساختار تک ستونی رضایت داشته باشند، صفحات اصلی - دو ستونی، پیچیده تر پروژه های اطلاعاتیبر این اساس، باید یک طرح پیچیده تر و متفکرانه تر داشته باشد.

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

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

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

شبکه ها چیست؟

بیایید به انواع شبکه ها برای طراحی وب نگاه کنیم.

1. شبکه بلوک - یک طرح ناهموار از منطقه به بلوک.

2. ستون - داشتن ستون در ساختار خود.

3. مدولار - متشکل از خطوط متقاطع که ماژول ها را تشکیل می دهند.

4. سلسله مراتبی - یک شبکه با قرار دادن بصری بلوک ها، بدون هیچ ساختار منطقی.

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

گرایش های مدرنو رویکردهای توسعه وب

الگوریتم رشد سریع را از ابتدا در ساخت وب سایت بیاموزید

Grid برای طراحی وب 960 Grid System (http://960.gs) با مفهوم طرح بندی "ایستا" مطابقت دارد و برای ایجاد یک "سیال" می توان به شبکه Bootstrap توجه کرد (http://getbootstrap.com /css/#grid). چارچوب مدولار 960 GS صفحه وب را به 12، 16 و 24 ستون تقسیم می کند.

هنگام توسعه یک ساختار "لاستیک"، فراموش نکنید حداکثر عرضصفحه نمایش معمولاً به 1280 پیکسل محدود می شود. اگر در نظر نگیرید حداکثر مقدارپس در عرض مانیتورهای بزرگمحتوای سایت تا حد زیادی کشیده می شود که بر درک آن تأثیر منفی می گذارد.

محبوب ترین و آسان برای پیاده سازی یک شبکه مدولار دو ستونی است که نسبت های آن با در نظر گرفتن مفروضات زیر محاسبه می شود:

رایج ترین وضوح صفحه نمایش 1024x768 است.

عرض طرح نباید از 770 پیکسل تجاوز کند، به طوری که یک نوار اسکرول در پایین صفحه نمایش با وضوح 800x600 ظاهر نمی شود.

ستونی که عملکردها را انجام می دهد ماژول اطلاعات، باید عرض بیشتری نسبت به ستونی داشته باشد که به عنوان ماژول ناوبری (منو) تعریف شده است.

بر این اساس، نسبت به این صورت است: 200 پیکسل. + 550 پیکسل. یا 150 پیکسل + 620 پیکسل.

AT ستون بزرگترقرار است یک منوی ناوبری، در یک منوی کوچکتر - یک کاتالوگ یا محتوا قرار دهد.

به عنوان مثال شبکه طراحی وب یک وب سایت معروف را در نظر بگیرید. همه سایت‌های بی‌بی‌سی از ساختار ستونی 61×16 پیکسلی برای مطابقت با عکس‌ها و ویدیوهای استاندارد برند استفاده می‌کنند.

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

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

1. فرآیند با تعریف مکان برای بلوک های بالاترین سلسله مراتب آغاز می شود. ما خود را مانند شرلوک هلمز تصور می کنیم - استاد کسر و از قانون "از کلی به جزئی، از بزرگ ترین تا کوچک ترین" پیروی می کنیم.

2. به سطح بعدی می رویم و بلوک های زیر را در سلسله مراتب قرار می دهیم. در عین حال، ما بر اساس اولویت های محتوا هستیم تا تعیین کنیم که انتظارات کاربر را تجزیه و تحلیل کنیم و انتظارات خود را شناسایی کنیم مزایای رقابتی.

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

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

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

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

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

در به روز رسانی های وبلاگ ما مشترک شوید و به اشتراک بگذارید اطلاعات ارزشمندبا دوستان. همه شبکه های مدولار موفق و به زودی شما را می بینیم!

روندها و رویکردهای مدرن در توسعه وب

الگوریتم رشد سریع را از ابتدا در ساخت وب سایت بیاموزید