ویرایشگر پیشرفته

فایلهای مرتبط

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

مطالب این بخش در یک نگاه:

نحوه چسباندن (paste) متن از فایل های متنی خارج از سایت:

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

  1. استفاده از ابزار font strip (چسباندن متن از فایل word بدون فونت آن) و یا pas plane text (چسباندن متن از فایل word بصورت متن ساده و بدون هیچ استایلی) که در ویرایشگر تعبیه شده است.
  2. استفاده از کلیدهای CTRL+Shift+V بصورت همزمان
  3. بردن متن کپی شده ابتدا به NotePad و سپس کپی مجدد از آنجا و Paste در ویرایشگر

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

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

hyperlink

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

hyperlink

نحوه ایجاد لنگر در طراحی سایت:

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

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

anchore

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

anchor

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

anchor

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

anchor

حذف لینک در طراحی سایت:

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

نحوه درج و ایجاد جداول مختلف در طراحی سایت:

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

table

پس از انتخاب سطر و ستون جدولی بصورت زیر در ویرایشگر ایجاد گشته و‌ می‌توانید مقادیر آن را وارد نمایید.

 

table

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

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

tabletable mouse hover  : برای ایجاد Mouse Hover جهت خواناتر شدن سطرها.

table mouse hover

table condenced : برای کم کردن ارتفاع کل جدول.

table condenced

table bordered  : برای حذف برخی از خطوط جدول.

table bordered

table no border : برای حذف تمامی خطوط جدول.

 

table no border

سایر امکانات جدول:

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

table

 

  • 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 : بخش تنظیمات بیشتر برای سلول ها

cell properties

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

table properties

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

در شرایطی که بخواهید در طراحی سایت، متن و یا تصاویر را در چند ستون درج نمایید می‌توانید از Grid Manager gridmanager در ویرایشگر بهره ببرید.
در طراحی وب سایت های قدیمی برای ستون بندی متن و تصویر از جدول ها (Table) استفاده‌ می‌شد اما در طراحی سایت های واکنشگرا استفاده از این روش غلط بوده و باعث نمایش نامناسب محتوای سایت‌ می‌شود. در نتیجه برای قرار دادن متن و تصویر کنار هم‌ می‌بایست از ابزار Grid Manager gridmanager استفاده نمایید.
همانطور که در ماژول مدیریت محتوا، بخش نحوه نمایش به تفصیل توضیح داده شد، در سایت های واکنش گرا، صفحه نمایش به 12 ستون مساوی تقسیم شده و با توجه به ستون بندی هایی که برای نمایش هر کادر تعریف‌ می‌کنیم، اطلاعات را در نمایشگرهای مختلف به درستی نمایش دهد. همین روال برای متون نیز صادق است.
برای مثال شرایطی را در نظر بگیرید که‌ می‌خواهید متن را بصورت 4 ستون در یک ردیف درج نمایید در شرایطی که در تمام نمایشگرها از جمله تبلت و موبایل نیز خروجی مناسبی نمایش داده شود.
برای این کار بر روی آیکون gridmanager کلیک کرده و به ترتیب مراحل زیر طی نمایید:

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

gridmanager

  • نوع نمایشگر را به حالت متوسط تغییر دهید. لازم به توضیح است که معمولا نحوه ستون بندی در نمایشگرهای متوسط نیز مانند نمایشگر عریض‌ می‌باشد.

gridmanager

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

gridmanager

  • نوع نمایشگر را موبایل کرده و مانند حالت تبلت با استفاده از + تمام ستون ها را بر روی 12 تنظیم نمایید زیرا در موبایل تمامی کادرها باید در حالت تک ستونه باشند.

gridmanager

  • پس از تعیین ستون بندی های لازم با استفاده از کلید افزودن به ویرایشگر، کدهای لازم به ویرایشگر افزوده‌ می‌شوند.

gridmanager

  • پس از افزوده شدن به جای "این یک متن تست است." مطلب خود را قرار دهید.

gridmanager

  • درنهایت خروجی در طراحی سایت بصورت زیر خواهد بود:

gridmanager

gridmanager

gridmanager

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

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

  • هنگام درج تصاویر، نرم افزار بصورت پیش فرض آن ها را واکنش گرا‌ می‌کند اما درصورتی که تصویری واکنشگرا نبود‌ می‌توانید با استفاده از ابزار img responsive (Image Responsive) تصویر را واکنشگرا نمایید.
  • برای وسط چین کردن تصاویر نیز از ابزار center block (centerBlock) استفاده کنید.
  • برای شکل ظاهری تصاویر 3 افکت قرار دهده شده است که برای اعمال هرکدام بر روی تصویر‌ می‌توانید از img effect استفاده نمایید.

img effect

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

  • Visible-xs نمایش فقط در موبایل
  • Visible-sm نمایش فقط در تبلت
  • Visible-md نمایش فقط در نمایشگر های متوسط
  • Visible-lg نمایش فقط در نمایشگر های بزرگ

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

  • Hidden-xs مخفی کردن در موبایل
  • Hidden-sm مخفی کردن در تبلت
  • Hidden-md مخفی کردن در نمایشگر های متوسط
  • Hidden-lg مخفی کردن در نمایشگر های بزرگ

تاریخ ایجاد
۶ آذر ۱۳۹۵  مرضیه کریمی
آخرین بروزرسانی
۲۳ مهر ۱۳۹۶ 
تعداد کلیک
۲,۶۲۵

فهرست نظرها و ارسال نظر جدید


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