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

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

ویرایشگر موجود در نرم افزار سمپا یکی از قدرتمندترین ویرایشگرها در میان موارد مشابه می باشد. برای استفاده از این ابزار نیازی به دانش وب نیست و تمامی افرادی که حتی بصورت اندک با نرم افزار  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 مخفی کردن در نمایشگر های بزرگ

آخرین بروزرسانی
۶ آذر ۱۳۹۵ 
تعداد کلیک
۴۳۸

ارسال نظر


نام را وارد کنید
پست الکترونیک را وارد کنید
تعداد کاراکتر باقیمانده: 500
نظر خود را وارد کنید