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

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

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

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

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

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

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

یکی از مشهورترین ادیتورهای رایگان و باز متن این گروه، CKeditor است که در ادامه به بررسی بخش های مختلف آن می پردازیم.

ادامه بحث و عکسهای مربوطه را  در ارامه مطلب مطالعه نمائید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

در موارد زیادی هم شما به یک تگ نیاز دارید که در ادیتور شما وجود ندارد. با سوئیچ کردن به حالت کدنویسی می توانید خودتان به صورت دستی این تگ را وارد کنید و نتیجه مطلوب تان را به دست بیاورید.

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

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

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

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

در اینجا به چند مورد ضروری در درج مطالب درون سایت اشاره می کنیم:

1- هیچ گاه از رنگ فونت و یا پس زمینه برای نوشته هایتان استفاده نکنید. زیرا به جای جلب توجه، علاوه بر اینکه ظاهر معمول سایت را به هم می ریزند، برای بسیاری از خوانندگان با شرایط ویژه هم مشکل ساز می شوند. مثلا خواننده ای که کور رنگی دارد ممکن است متن را نتواند بخواند. فارغ از اینکه گاهی اوقات چنین تغییرات شدیدی برای هر کاربری ناخوشایند بوده و باعث ترک سایت شما خواهد شد.

2- همیشه از اندازه و نوع فونت استاندارد سایت استفاده کنید. وجود چندین نوع مختلف فونت با اندازه های متفاوت می تواند باعث به هم ریختگی و شلختگی ظاهر سایت شود. علاوه بر این استفاده از فونت های خاصی که روی کامپیوترتان دارید باعث دردسرهای بسیار بزرگتری هم می گردد. توجه کرده اید که اگر بیننده در شهر یا کشور دیگر، فونت مورد استفاده شما را نداشته باشد، متن را چگونه می بیند؟ و برای نصب فونت مورد استفاده و دیدن صحیح متن چه اندازه دچار مشکل خواهد شد.

همچنین استفاده از فونت ریز باعث دشواری در خواندن آن می گردد و درشتی بیش از حد هم چشم آزار است و خواننده را فراری می دهد.

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

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