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

فهرست مطالب:

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

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

تصویری: نحوه ساخت شبکه های مدولار
تصویری: آموزش پریمیر:‌ آشنایی با محیط نرم افزار، باز کردن ویدیوها و کات کردن آنها 2024, نوامبر
Anonim

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

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

ضروری است

برنامه Abode Photoshop

دستورالعمل ها

مرحله 1

همه ویرایشگرهای گرافیکی مدرن و برنامه های طراحی وب دارای شبکه های مدولار داخلی هستند. اگر در Adobe Photoshop کار می کنید ، برای چیدمان آسان اشیا image تصویر و قرارگیری دقیق آنها روی صفحه ، صفحه نمایش را روشن کنید. برای انجام این کار ، به مورد منوی Edit بروید و ماوس را بر روی عنوان Preference حرکت دهید. در منوی ظاهر شده ، مورد Guides، Grid & Slices را انتخاب کنید (بسته به نسخه برنامه ، این مورد ممکن است نام های مختلفی داشته باشد ، کلمه Grid را انتخاب کنید).

گام 2

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

مرحله 3

شما می توانید جداول مختلف (موارد شبکه) را با هر مجموعه ای از سطرها و ستون ها با استفاده از مورد Insert Table اضافه کنید ، و همچنین جداول جدیدی را وارد سلول کنید ، در نتیجه یک شبکه پیچیده برای ساخت عناصر صفحه ایجاد کنید.

مرحله 4

با استفاده از سبک های CSS می توانید بصورت دستی یک شبکه مدولار ایجاد کنید. برای این کار از ابزارهای #grid ، Gridmaker ، CSS Grid Builder ، 1 KB CSS Grid ، Gridr Buildrrr و سایر ماژول ها استفاده کنید. به عنوان مثال ، قطعه کد زیر شبکه ای از چهار ماژول با عرض معین ایجاد می کند:.page-layout {margin-right: -5px؛ }.layout-box {float: left؛ حاشیه: 0 5px 5px 0؛ }.lb-1 {width: 779px؛ } / * 100٪ * /. Lb-2 {width: 583px؛ } / * 75٪ * /. Lb-3 {عرض: 387px؛ } / * 50٪ * /. Lb-4 {width: 191px؛ } / * 25٪ * /

مرحله 5

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

توصیه شده: