آموزش افزودن قابلیت پرینت در طراحی سایت

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

چگونگی افزودن قابلیت پرینت به وب سایت

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

روشی مناسب برای افزودن قابلیت پرینت

روش اول : با استفاده از این روش قسمت های زائدی را که نمی خواهید در نسخه چاپی وجود داشته باشد را شناسایی و در یک فایل  CSS معرفی و حذف خواهید کرد.در ادامه قسمت های باقی مانده را در همان فایل CSS برای چاپ با ظاهر دلخواه در افزودن قابلیت پرینت، استایل دهی می کنیم.

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

قدم اول افزودن قابلیت پرینت

نخست می بایست استایل های مورد نظر خود بر روی نسخه چاپی را در یک فایل CSS جداگانه نوشته، سپس به بخش header  کدهای صفحه وب خود آن را متصل کنید.

<link rel=”stylesheet” href=”Print.css” type=”text/css” media=”print”>

پارامتر media=”print” در این دستور برای افزودن قابلیت پرینت حائز اهمیت است.این پارامتر به صفحه وب سایت اشاره می کند که فایل CSS ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت بوده و برای دیگر موارد باید از استایل های اصلی صفحه استفاده شود.

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

1     .adverise       {
2     display: none;
3                         }

کد بالا همه عناصری دارای ویژگی class=”adverise ” را مخفی می کند.

قدم دوم افزودن قابلیت پرینت

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

کد پایین برای این کار مورد استفاده قرار می گیرد.

<a href=”javascript:window.print()”>چاپ این صفحه!</a>

پیشنهاد می شود برای این قسمت یک آیکون شکیل اختصاص دهید تا کاربران تنها با کلیک بر روی آن نسخه چاپی مورد نظرشان را در اختیار داشته باشند.