پی سی دیزاین | درباره تکنولوژی و اینترنت بیشتر بدانیم

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

حالا چرا زیرخط هایمان را برداریم یا به عبارتی دیگر از آنها کمتر استفاده کنیم؟! برای اینکار دلیل واضحی دارم! که البته در ادامه راهکارهایی هم برای کسانی که نمی‌خواهند این کار را انجام دهند ارائه خواهم داد.

همانطور که می‌دانید زبان‌های مختلف نوشتار های مختلفی هم دارند و این مهم‌ترین دلیل ما برای استفاده نکردن از زیرخط است. چرا که زیرخط های استاندارد بر اساس نوشتار زبان هایی همچون انگلیسی تهیه شده اند و زبان هایی با نوشتار انگلیسی معمولا به طور کامل روی خط نوشته می‌شوند و قسمت های اضافی ندارند که در زیر خط قرار بگیرد اما زبان فارسی به این صورت نیست و در نوشتار حرف‌ها قسمت‌هایی وجود دارد که زیر خط قرار می‌گیرند و این مشکل ایجاد می‌کند٬ مثل حرف‌هایی همچون «ع ح س ر ب» و دیگر حرف‌ها که کم هم نیستند.

اما بگذارید با یک مثال ساده منظورم را بهتر برسانم٬ برای مثال من دو متن را با حروف فارسی و انگلیسی می‌نویسم و برای آنها زیرخط استاندارد می‌گذارم تا شما دلیل گفته‌ی من را بهتر متوجه شوید:

یک جمله فارسی میبینید | This is an English sentence

همانطور که مشاهده می‌کنید جمله‌ی فارسی را که زیرخط دار کردیم قسمت هایی از حروف با زیرخط برخورد کرده (که البته به فونتی هم که استفاده می‌کنیم بستگی دارد) و قابل مشاهده نیستند و حتی به گونه‌ی دیگر خوانده می‌شوند مانند کلمه «میبینید» که شبیه کلمه‌ی «مسند» نوشته شده است! اما در جمله انگلیسی این اشکال وجود ندارد!

راه حل: آن دوستانی هم که می‌خواهند حتما از زیرخط در متن‌هایشان استفاده کنند می‌توانند کد css زیر را در فایل style یا css پوسته شان قرار دهند تا تگ زیرخط (U) را اصلاح کنند! به همین سادگی :دی

u {
border-bottom: 1px solid;
padding-bottom: 1px;
text-decoration: none;
}

که نتیجه کار هم به صورت زیر خواهد بود:

یک جمله فارسی میبینید

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

مطالب مفید و خواندنی همیشه طرفداران زیادی دارند و البته عده‌ی زیادی برای چاپ و استفاده‌ی بهتر از این مطالب اقدام می کنند. پس قابل چاپ بودن مطالب برای یک وبلاگ خوب شرط مهمی است. اما چگونه می توانیم به سادگی مطالب خود را قابل چاپ کنیم؟ اصلا قابل چاپ کردن یعنی چه؟ اصولا مطالب چاپی (مثل یک متنی که در Word تایپ کرده ایم) در ساده ترین حالت باید به نحوی باشد که روی برگه‌ی کاغذ به خوبی قابل خواندن باشد یعنی دارای style خاصی نباشد و فقط دارای یک زمینه‌ی سفید، فونت مناسب چاپ و برای متون فارسی راست به چپ باشد کفایت می کند.

آیا می دانستید که با کمک css و html می‌توانید یک style خاص فقط برای صفحات چاپی تعریف کنید؟

با کمک یکی از خاصیت های برچسب link در هنگام تعریف style شما می توانید تعریف کنید که style مورد نظرتان برای صفحات چاپی استفاده می شود. به عنوان مثال اگر شما بخواهید این قابلیت را به وبلاگ خود اضافه کنید باید زیرِ خط مربوط به style پوسته‌تان این خط را اضافه کنید:

[code lang=”html”]<link rel="stylesheet" type="text/css" href="/print.css" media="print" />[/code]

همانطور که در کد بالا مشاهده می کنید خاصیت media=”print” باعث می شود تا شیوه نامه (استایل) print.css به صفحات قابل چاپ اختصاص داده شود و برای صفحاتی که قرار است چاپ شود از این شیوه نامه استفاده خواهد شد.

اما خاصیت media ویژگی دیگری هم با نام screen دارد که این ویژگی برای شیوه نامه‌های عادی که روی صفحات وب نمایش داده می شود استفاده می شود.

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

[code lang=”html”]<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />[/code]

ادامه‌ی مطلب »

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

برای این جلسه هم یه مقدمه کوتاه براتون میگم و بعدش هم این جلسه زود تعطیلتون میکنم برید حالشو ببرید ولی قول بدید که یه راست برید خونه. پوسته های وردپرس از تعدادی فایل تشکیل شده اند که این فایل ها هر کدام قسمتی از پوسته شما را تشکیل میدهند برای مثال فایل header.php سربرگ پوسته‌ی شما را تشکیل می‌دهد اما در این فایل های با پسوند php محتوای html و کد های php قرار میگیرد و استایل پوسته‌ی شما در فایل style.css قرار دارد که محتوای این فایل کد های css می‌باشد و بیشتر فعالیت ما روی این فایل است.

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