بررسی کادر ایستا

بسیاری از ابزارهای موجود در ویرایشگر مانا، همان ابزاری است که در نرم افزار word وجود دارد. ابزاری نظیر، تراز متن، تغییر رنگ، Bold و Italic کردن، تغییر فونت و سایز، ایجاد لیست های مختلف و... . در اینجا تنها به توضیح برخی نکات کلیدی جهت کار با ویرایشگر پیشرفته‌ می‌پردازیم.

قرار دادن لینک بر روی متن و تصاویر:

برای قراردادن لینک بر روی متن و یا تصویر در طراحی سایت از آیکون  Hyperlink Managerاستفاده نمایید. برای این کار کافیست متن یا تصویر مورد نظر را انتخاب کرده سپس بر روی آیکون مربوطه کلیک نمایید.

در پنجره جدید، در قسمت url آدرس موردنظر خود را وارد و سپس در بخش target می‌توانید تعیین نمایید لینک در پنجره ای جدید و یا در پنجره فعلی باز گردد، در نهایت با ok کردن اطلاعات را ذخیره نمایید.

ایجاد لنگر  (Anchor) :

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

برای انجام این کار در ابتدای متن کلیک کرده وHyperlink Manager  را انتخاب نمایید.

در صفحه باز شده به سربرگ Anchor رفته و در قسمت ID و Name عنوان موردنظر را وارد نمایید.

سپس تیتری که قرار است به ابتدای متن مورد نظر لینک شود را انتخاب کرده و مجددا بر روی Hyperlink Manager  کلیک کنید.

در پنجره باز شده به جای قرار دادن لینکی در قسمت URL از قسمت Existing Anchor نامی که برای لنگر وارد نموده اید را انتخاب کرده و در نهایت با ok کردن تغییرات را ذخیره نمایید.

حذف لینک:

چنانچه بخواهید لینکی را حذف نمایید‌ می‌بایست پس از انتخاب متن یا تصویر مورد نظر بر روی آیکون Remove Link کلیک نمایید.

درج و ایجاد جداول مختلف:

برای ساخت انواع جدول از ابزار آن با نام Insert Table استفاده کنید. با کلیک بر روی فلش کنار جدول ‌ می‌توانید با انتخاب تعداد سطر و ستون های مد نظر جدول را ایجاد نمایید.

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

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

اگر بخواهید سطرهای جدول یکی در میان رنگی متفاوت داشته باشند از TableStriped استفاده نمایید.

برای حذف برخی از خطوط و borderهای جدول از TableBordered استفاده نمایید.

برای ایجاد Mouse Hover جهت خواناتر شدن سطرها از TableHover استفاده نمایید.

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

برای حذف تمامی خطوط جدول از TableNoBorder استفاده نمایید.

با راست کلیک بر روی جدول امکانات بیشتری برای جدول ها قابل مشاهده‌ می‌باشد که عبارتند از:

• Insert Row Above : اضافه کردن یک ردیف در بالای ردیف مورد نظر

• Insert Row Below : اضافه کردن یک ردیف در پایین ردیف مورد نظر

• Delete Row : حذف یک سطر

• Insert Column to the left : اضافه کردن یک ستون به سمت چپ ستون مدنظر

• Insert Column to the right : اضافه کردن یک ستون به سمت راست ستون مدنظر

• Delete Column : حذف ستون

• Merge Cell Horizontally : ادغام سلول ها بصورت افقی

• Merge Cell Vertically : ادغام سلول ها بصورت عمودی

• Split Cell Horizontally : تقسیم سلول ها به دو بخش بصورت افقی

• Split Cell Vertically : تقسیم سلول ها به دو بخش بصورت عمودی

• Delete Cell : حذف سلول

• Cell Properties : بخش تنظیمات بیشتر برای سلول ها

• Table Properties : بخش تنظیمات بیشتر برای جدول

ستون بندی متون و تصاویر:

اگر قصد داشته باشید متن و یا تصاویر را در چند ستون درج نمایید می‌توانید از Grid Manager در ویرایشگر استفاده نمایید.

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

برای مثال در نظر بگیرید که‌ می‌خواهید متن را بصورت 4 ستون در یک ردیف درج نمایید و در تمام نمایشگرها از جمله تبلت و موبایل نیز خروجی مناسبی نمایش داده شود.

برای این کار بر روی آیکون Grid Manager کلیک نمایید. 

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

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

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

درج تصویر در ویرایشگر:

برای قراردادن تصویر ابتدا باید آن را از طریق ماژول رسانه اضافه کرده، سپس از طریق ابزارmedia search  (جستجوی رسانه)، آن را فراخوانی نمود و یا از طریق سربرگ رسانه جدید، تصویر مورد نظر را اضافه کرد و سپس از لیست رسانه ها آن را انتخاب نمود.

هنگام درج تصاویر، نرم افزار بصورت پیش فرض آن ها را واکنش گرا‌ می‌کند اما درصورتی که تصویری واکنشگرا نبود‌ می‌توانید با استفاده از ابزار Responsive Image تصویر را واکنشگرا نمایید.

برای وسط چین کردن تصاویر نیز از ابزار centerBlock  استفاده کنید.

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

با استفاده از آیکون های visible می‌توانید متن یا تصویر خود را در رزولوشن انتخابی در سایت نمایش دهید.

• Visible-xs: نمایش فقط در موبایل

• Visible-sm: نمایش فقط در تبلت

• Visible-md: نمایش فقط در نمایشگر های متوسط

• Visible-lg: نمایش فقط در نمایشگر های بزرگ

با استفاده از آیکون های Hidden می‌توانید متن یا تصویر خود را در رزولوشن انتخابی در سایت مخفی کنید.

• Hidden-xs : مخفی کردن در موبایل

• Hidden-sm : مخفی کردن در تبلت

• Hidden-md : مخفی کردن در نمایشگر های متوسط

• Hidden-lg: مخفی کردن در نمایشگر های بزرگ

تب های بخش متن کادر ایستا:

سه تب در قسمت پایین کادر ایستا قرار دارد که به شرح زیر می باشد:

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

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

تب Preview : در این تب پیش نمایشی از اطلاعات بارگزاری شده نمایش داده می شود.