دیدم این مقاله توضیح کاملتری بده بهتون تا راهنمایی ها ما :
افزودن قابلیت پرینت به صفحات وب سایت
دکمه چاپ صفحات وب سایت یکی از قابلیت هایی است که بر حسب نیاز و نوع محتوا می تواند به وب سایت شما افزوده شود. شاید برخی از کاربران از نحوه پرینت گرفتن توسط امکانات پیش فرض مرورگر خود بی اطلاع باشند و نتوانند محل دکمه Print (کلید میانبر Ctrl+P) را به راحتی پیدا کنند و یا اینکه دکمه چاپ پیش فرض در مرورگر علاوه بر متن اصلی مورد نظر آنها، عناصر غیر ضروری دیگری مانند منوها، تبلیغات و غیره را در نسخه پرینت نشان میدهد. در این شرایط وجود یک دکمه پرینت که محتوای اصلی صفحه را تمیز و مرتب برای چاپ در اختیار آنها قرار دهد، کاربر را از سردرگمی و یا کارهای زمانبر نجات خواهد داد. در این آموزش چگونگی انجام اینکار توسط کدهای CSS و جاوااسکریپت نشان خواهم داد.
روش های استفاده شده برای چاپ صفحات وب زیاد هستند اما شما به دو طریق ساده می توانید محتوای بخش های مورد نظر خود را در نسخه قابل چاپ نمایش دهید:
روش اول : در این روش شما بخش های اضافه که نمی خواهید در نسخه چاپی ظاهر شوند را شناسایی و در یک فایل Css به طریقی که در ادامه شرح خواهم داد معرفی و حذف خواهید کرد. سپس بخش های باقیمانده را در همان فایل CSS برای چاپ با ظاهر دلخواه استایل دهی می کنیم. سپس توسط کد جاوااسکریپت محتوای باقیمانده برای چاپ ارسال می شوند. این روش رایجترین راه اضافه کردن قابلیت پرینت به وبسایتها است.
فایل CSS
ابتدا تمامی استایل هایی را که میخواهید بر روی نسخه چاپی اعمال شود را در یک فایل CSS جداگانه نوشته و به صورت زیر به بخش header کدهای صفحه وب خود آن را ضمیمه نمائید:
<link rel="stylesheet" href="Print.css" type="text/css" media="print">
نکته قابل توجه در خط بالا پارامتر media="print" می باشد. این پارامتر به صفحه وب سایت ما میگوید که فایل css ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت می باشد و در سایر موارد از استایل های اصلی صفحه استفاده شود.
توجه کنید برای حذف عناصری که نمی خواهید در نسخه پرینت نشان داده شوند باید با استفاده از id و یا class مربوط به آن عنصر، با نوشتن دستور زیر آن را در صفحه پرینت مخفی نمائید. این دستورات در فایل css مربوط به پرینت نوشته می شوند:
کد:
.adverise {
display: none;
}
دستور فوق تمامی عناصر تبلیغاتی که دارای خصیصه class="adverise " هستند را مخفی میکند.
کدهای HTML
اکنون نیاز به دکمه ای داریم که با کلیک بر روی آن عملیات چاپ آغاز شود. برای این منظور از کد زیر استفاده می کنیم:
کد:
<a href="javascript:window.print()">چاپ این صفحه!</a>
در صورت تمایل میتوانید یک عکس و یا آیکون مربوط به دکمه پرینت در کد فوق استفاده کنید. اکنون با کلیک کردن روی لینک ساخته شده صفحه پرینت مرورگر باز شده و پس از دیدن پیش نمایش کاربر میتواند اقدام به چاپ صفحه نماید.
روش دوم: در این روش شما تنها بخشی از صفحه وب را که می خواهید در نسخه چاپی نمایش داده شود را توسط کد جاوااسکریپت انتخاب کرده و برای چاپ نهایی ارسال می کنید. به عنوان مثال هنگامی که می خواهید محتوای داخل یک کادر و یا یک عنصر HTML مانند div را برای چاپ ارسال کنید میتوانید از این روش استفاده کنید.
کدهای جاوااسکریپت و جی کوئری
این کدها در بخش header سایت و در بین تگهای مربوط به کدهای جاوااسکریپت قرار داده میشوند. توجه کنید که فایل مربوط به کتابخانه جی کوئری نیز باید در هدر سایت قرار داده شود:
کد:
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<title>my div</title>');
mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css">'); /*افزودن سی اس اس به صفحه پرینت*/
mywindow.document.write('');
mywindow.document.write(data);
mywindow.document.write('');
mywindow.print();
mywindow.close();
return true;
}
کدهای HTML
دکمه مربوط به چاپ به شکل زیر در محل مورد نظر شما در بین کدهای html سایت قرار داده می شود:
کد:
<input value="Print Div" onclick="PrintElem('#mydiv')" type="button">
توجه کنید در کد بالا id عنصر div که می خواهیم محتوای داخل آن چاپ شود به صورت پارامتر در رویداد onclick نوشته شده است. اکنون اگر به یک عنصر div به صورت id="mydiv" پارامتر id را اختصاص دهیم، محتویات داخل آن برای چاپ ارسال خواهد شد. به عنوان مثال در کد زیر فقط محتویات عنصر div اولی در چاپ ظاهر خواهد شد:
کد:
<div id="mydiv"> محتویات این بخش در چاپ نمایش داده خواهد شد. </div> <div> این متن در چاپ وجود ندارد </div>
معرفی سرویس آنلاین چاپ و پرینت صفحات وب به صورت فیزیکی یا PDF
در پایان یک سرویس آنلاین برای افزودن امکان چاپ صفحات به نام printfriendly برای دوستداران سرویس های آنلاین معرفی میکنم. این سرویس علاوه بر اینکه با دادن آدرس صفحه وب مورد نظر شما نسخه چاپی آن را در فرمت های مختلف آماده می کند، به شما امکان قرار دادن دکمه پرینت با سایزها و اشکال مختلف در وبسایتتان را نیز می دهد. همچنین شما می توانید نسخه pdf صفحات موردنظر خود را نیز از این سرویس تهیه کنید. برای استفاده از این سرویس در وبسایت خود در منوی بالای این وبسایت روی گزینه Website Button کلیک کرده و پس از انتخاب ویژگی های مورد نظر خود کد تولید شده را در وبسایت خود قرار دهید.
چگونه یک Rss برای سایت خود ایجاد نماییم؟
برای اضافه کردن Rss به سایت خود شما لازم است تا حدودی از کدهای xml و html سردر بیاورید. برای قرار دادن Rss در سایت خود باید کدهای زیر را در یک فایل xml نوشته و فایل آنرا با پسوند .xml ایجاد نمایید:
کد:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0">
<channel>
<title>نام صفحه ایندکس شما</title>
<link>دامنه وب سایت شما</link>
<description>توضیحاتی در مورد سایت خود</description>
<item>//آیتم ها هر عنوان مطلبی است که قرار است در آر اس اس قرار داده شوند
<title>عنوان صفحه</title>
<link>آدرس صفحه</link>
<description>توضیح صفحه</description>
</item>
<item>
<title>عنوان صفحه دوم</title>
<link>آدرس صفحه </link>
<description>توضیح صفحه</description>
</item>
</channel>
بعد از ساختن فایل xml مربوطه ، آنرا توسط یک validator تایید می نمایید. برای اینکار می توانید به سایت
http://www.feedvalidator.org
مراجعه کرده و فایل rss خود را تایید نمایید. سپس آنرا در سایت خود ، در مسیری که می خواهید rss در آن قرار گیرد، آپلود کرده و کلید مربوط به rss را توسط کدهای دیزاین html در صفحه سایت خود قراردهید. این کلید را توسط تگ a به فایل Rss خود لینک دهی
کد:
<a href="آدرسی که فایل شما در آن مسیر آپلود شده است">
<img src="مسیر عکسی که نشاندهنده کلید یا باتم آر اس اس است">
</a>
سپس بهتر است rss خود را در موتورهای جستجوی بزرگ مانند گوگل، یاهو یا بینگ، ثبت یا همان رجیستر نمایید. آدرسی که می توانید Rss خود را در گوگل ثبت نمایید : http://www.google.com/ig می باشد. این کار سبب می شود که سایت شما به موقع در rss بروز رسانی گردد.