0
ویژه نامه ها

کار با ادیتورهای متنی- WYSIWYG

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

کار با ادیتورهای متنی- WYSIWYG
کار با ادیتورهای متنی- WYSIWYG


 





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

نمای ظاهری ادیتور
 

کار با ادیتورهای متنی- WYSIWYG

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

آیکون های CKeditor و کاربرد آنها
 

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

کار با ادیتورهای متنی- WYSIWYG

یک ادیتور کامل شامل تمامی آیکون هایی است که در عکس بالا مشاهده می کنید. در اینجا به توضیح کاربرد برخی از آیتم های ضروری یک ادیتور برای درج مطلب در اغلب سایت ها و وبلاگ ها می پردازیم:

۱- انتخاب شکل ظاهری فونت از قبیل بولد، ایتالیک، زیر خط و...
 

کار با ادیتورهای متنی- WYSIWYG

در این بخش شما ابتدا عبارت را انتخاب (های لایت) می کنید و سپس دکمه مورد نظر را می زنید. امکانات کامل این بخش، شامل بولد، ایتالیک، زیرخط، خط زدن، بالانویس یا پایین نویس کلمه و همچنین حذف تمامی این انتخاب ها است. از این میان چیزی که بیش از همه به آن نیاز دارید، تنها آیتم های بولد و ایتالیک کردن نوشته هستند.

۲- انتخاب شیوه پاراگراف بندی، بولت ها و شماره ها
 

کار با ادیتورهای متنی- WYSIWYG

ممکن است بخواهید که لیستی از گزینه ها ایجاد کنید که شماره گذاری شده باشند. یا اینکه لیست شما تنها با بولت، یا دایره کنار هر کدام، از هم جدا شوند. علاوه بر این راست به چپ بودن (برای زبان فارسی) یا چپ به راست بودن (برای زبان انگلیسی)‌ متن و همچنین انتخاب راست چین، چپ چین و وسط چین کردن متن هم از دیگر امکانات این بخش هستند.

۳- لینک کردن بخش خاصی از متن به آدرس وب
 

کار با ادیتورهای متنی- WYSIWYG

کار با ادیتورهای متنی- WYSIWYG

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

۴- درج عکس درون متن
 

کار با ادیتورهای متنی- WYSIWYG

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

۵- ورود محتوا از برنامه های ادیتور متن مانند Microsoft Word
 

کار با ادیتورهای متنی- WYSIWYG

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

۶- تغییرات اندازه، نوع و رنگ فونت
 

کار با ادیتورهای متنی- WYSIWYG

بسیار پیش می آید که بخواهید بخشی از نوشته هایتان درشت تر یا ریزتر دیده شود یا اینکه می خواهید کل متن تان با فونتی کاملا متفاوت با فونت پیش فرض سایت نمایش داده شود. شاید هم به ندرت پیش بیاید که تغییر رنگ نوشته یا پس زمینه آن ضرورت پیدا کند. البته اکیدا پیشنهاد می کنیم که هیچ گاه از تغییر رنگ فونت یا زمینه استفاده نکنید. زیرا هم خوانایی متن را کم خواهد کرد و هم باعث آزار چشم بیننده و نازیبا شدن ظاهر سایت خواهد شد.

۷- تغییر یا درج کدهای اچ تی ام ال
 

کار با ادیتورهای متنی- WYSIWYG

کار با ادیتورهای متنی- WYSIWYG

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

نکات ضروری در آماده سازی مطلب برای سایت
 

هنگامی که قرار است شما مطلبی را درون سایت خودتان یا گروه دیگری که مقاله را برایشان آماده کرده اید، منتشر کنید، دست تان در استفاده از انواع فونت، رنگ متن و اندازه های مختلف عکس تقریبا باز است. اما ما تا چه حد اجازه داریم که از این اختیارمان استفاده کنیم؟
به عنوان یک اصل کلی، برای ارائه یک کار زیبا و استاندارد، ما باید از روال ثابت تعیین شده توسط طراح و صاحب سایت پیروی کنیم. زیرا آنها پس از آزمون های فراوان برای استفاده از نوع و اندازه فونت خاصی و یا شیوه چینش عکس درون محتوا، به نتیجه رسیده اند.
لذا همیشه توصیه می شود که به جای عملکرد سلیقه ای و براساس حس زیبایی شناسی شخصی، به شیوه کاری معمول سایت پایبند بوده و قبل از شروع کار آنها را فرا بگیرید. حال مطلبی زیباتر و جذاب تر و کاربر پسندتر است که خلاقیت ما را در چهارچوب مشخص شده سایت به همراه داشته باشد.
در اینجا به چند مورد ضروری در درج مطالب درون سایت اشاره می کنیم:
۱- هیچ گاه از رنگ فونت و یا پس زمینه برای نوشته هایتان استفاده نکنید. زیرا به جای جلب توجه، علاوه بر اینکه ظاهر معمول سایت را به هم می ریزند، برای بسیاری از خوانندگان با شرایط ویژه هم مشکل ساز می شوند. مثلا خواننده ای که کور رنگی دارد ممکن است متن را نتواند بخواند. فارغ از اینکه گاهی اوقات چنین تغییرات شدیدی برای هر کاربری ناخوشایند بوده و باعث ترک سایت شما خواهد شد.
۲- همیشه از اندازه و نوع فونت استاندارد سایت استفاده کنید. وجود چندین نوع مختلف فونت با اندازه های متفاوت می تواند باعث به هم ریختگی و شلختگی ظاهر سایت شود. علاوه بر این استفاده از فونت های خاصی که روی کامپیوترتان دارید باعث دردسرهای بسیار بزرگتری هم می گردد. توجه کرده اید که اگر بیننده در شهر یا کشور دیگر، فونت مورد استفاده شما را نداشته باشد، متن را چگونه می بیند؟ و برای نصب فونت مورد استفاده و دیدن صحیح متن چه اندازه دچار مشکل خواهد شد.
همچنین استفاده از فونت ریز باعث دشواری در خواندن آن می گردد و درشتی بیش از حد هم چشم آزار است و خواننده را فراری می دهد.
۳- در استفاده از عکس کاملا محتاط باشید. اولین نکته اینکه استفاده بدون ضرورت از تعداد زیاد عکس برای زیبایی صفحه، باعث بالا رفتن حجم آن و ایجاد مشکل در باز شدن صفحه می گردد. همیشه بهتر است که با فتوشاپ و برنامه های مشابه، حجم عکس ها را تا حد ممکن پایین بیاورید. این کار باعث باز شدن سریعتر صفحه و کاهش مصرف پهنای باند شما و کاربرتان می شود. البته باید به یک نقطه اعتدال میان کیفیت و حجم برسید و هیچ گاه یکی را قربانی دیگری نکنید.
نکته مهم دیگر درباره عکس ها، طول و عرض آنهاست. قبل از استفاده از عکس ها، ابتدا از حداقل و حداکثر طول و عرض مجاز عکس در سایت مورد نظر مطلع شوید. استفاده از عکس های عریض تر از صفحه سایت، باعث به هم ریختگی سایت می شود. استفاده از عکس های با طول زیاد هم در برخی سایت ها باعث بیرون زدن متن از کادر شده و در برخی باعث کش آمدن صفحه و ایجاد نمای ناخوشایند می شود.
منبع:برترینها
ارسال توسط کاربر محترم سایت :king007




 

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

هر وقت از آینده نا امید شدید این کارها را انجام دهید

مهمترین فواید حل جدول سودوکو برای مغز
مهمترین فواید حل جدول سودوکو برای مغز

مهمترین فواید حل جدول سودوکو برای مغز

راه کار هایی برای ترک شغل فعلی بدون خراب کردن پل های پشت سرمان
راه کار هایی برای ترک شغل فعلی بدون خراب کردن پل های پشت سرمان

راه کار هایی برای ترک شغل فعلی بدون خراب کردن پل های پشت سرمان

ترور دانشمند هسته‌ای-موشکی ایران در منطقه دماوند/ شهید محسن فخری زاده که بود؟
ترور دانشمند هسته‌ای-موشکی ایران در منطقه دماوند/ شهید محسن فخری زاده که بود؟

ترور دانشمند هسته‌ای-موشکی ایران در منطقه دماوند/ شهید محسن فخری زاده که بود؟

نتانیاهو یکسال قبل: این اسم (شهید محسن فخری زاده) را به خاطر داشته باشید!
نتانیاهو یکسال قبل: این اسم (شهید محسن فخری زاده) را به خاطر داشته باشید!

نتانیاهو یکسال قبل: این اسم (شهید محسن فخری زاده) را به خاطر داشته باشید!

چگونه صبح را پر انرژی آغاز کنیم؟
چگونه صبح را پر انرژی آغاز کنیم؟

چگونه صبح را پر انرژی آغاز کنیم؟

واقعیت مجازی برای درمان سالمندان
واقعیت مجازی برای درمان سالمندان

واقعیت مجازی برای درمان سالمندان

گذراندن تعطیلات بدون استرس کاری
گذراندن تعطیلات بدون استرس کاری

گذراندن تعطیلات بدون استرس کاری

پرویز پورحسینی چشم از جهان فرو بست
پرویز پورحسینی چشم از جهان فرو بست

پرویز پورحسینی چشم از جهان فرو بست

روش‌هایی برای افزایش خلاقیت و نوآوری در کارمندان
روش‌هایی برای افزایش خلاقیت و نوآوری در کارمندان

روش‌هایی برای افزایش خلاقیت و نوآوری در کارمندان

روش هایی برای کنار آمدن با غم و اندوه
روش هایی برای کنار آمدن با غم و اندوه

روش هایی برای کنار آمدن با غم و اندوه

چگونه عاشق کارمان شویم و از آن لذت ببریم
چگونه عاشق کارمان شویم و از آن لذت ببریم

چگونه عاشق کارمان شویم و از آن لذت ببریم

روش های کلیدی برای رسیدن به هدف در زندگی
روش های کلیدی برای رسیدن به هدف در زندگی

روش های کلیدی برای رسیدن به هدف در زندگی

چگونه خود را ببخشیم و از زندگی لذت ببریم؟
چگونه خود را ببخشیم و از زندگی لذت ببریم؟

چگونه خود را ببخشیم و از زندگی لذت ببریم؟

چگونه همه چیز را سریع تر یاد بگیرید؟
چگونه همه چیز را سریع تر یاد بگیرید؟

چگونه همه چیز را سریع تر یاد بگیرید؟

پرورش جامعه اسلامی بر فرهنگ نیرومندی، مقاومت و عزت
پرورش جامعه اسلامی بر فرهنگ نیرومندی، مقاومت و عزت

پرورش جامعه اسلامی بر فرهنگ نیرومندی، مقاومت و عزت

اهمیت خلاقیت پنهان در زندگی چیست؟
اهمیت خلاقیت پنهان در زندگی چیست؟

اهمیت خلاقیت پنهان در زندگی چیست؟

هوش مالی کودکان و راه کار هایی برای تقویت آن
هوش مالی کودکان و راه کار هایی برای تقویت آن

هوش مالی کودکان و راه کار هایی برای تقویت آن

حمله پانیک و راه های غلبه بر آن
حمله پانیک و راه های غلبه بر آن

حمله پانیک و راه های غلبه بر آن

به مناسبت ۷ آذر سالروز عملیات «مروارید»/ روزی که سیادت دریایی ایران در خلیج فارس اثبات شد
به مناسبت ۷ آذر سالروز عملیات «مروارید»/ روزی که سیادت دریایی ایران در خلیج فارس اثبات شد

به مناسبت ۷ آذر سالروز عملیات «مروارید»/ روزی که سیادت دریایی ایران در خلیج فارس اثبات شد

چطور زمانی برای یادگیری سریع مهارت دلخواهتان پیدا کنید
چطور زمانی برای یادگیری سریع مهارت دلخواهتان پیدا کنید

چطور زمانی برای یادگیری سریع مهارت دلخواهتان پیدا کنید