ساخت دکمه پرینت در وب سایت بسادگی آب خوردن
مقالات طراحی سایتدر عرض چند ثانیه ، دکمه پرینت کردن صفحه را به وب سایت خودتان اضافه کنید !
زمانی که کاربران شما در حال مطالعه محتوای سایت شما هستند شاید تمایل داشته باشند تا محتوای این صفحه را پرینت گرفته و یا در قالب یک نسخه pdf داخل سیستم خودشان ذخیره نموده و از آن استفاده کنند . در این حالت شاید اینگونه بگوئید که میتوان با کلیدهای ترکیبی Ctrl + p فرآیند چاپ صفحه مدنظر هر وب سایتی را انجام داد .
اما گاها لازم است تا خودتان داخل سایت یک دکمه برای پرینت یا ذخیره محتوای صفحه در قالب pdf قرار دهید . در بسیاری از سایت های آموزشی و یا خبری و همچنین سایت هایی که مختص دانلود مقاله و جزوه و … هستند ، جهت تسهیل کار مخاطبین خود ، یک دکمه پرینت در بالای صفحه قرار میدهند تا بتوانید بسادگی و با کلیک روی این دکمه بسادگی نسخه pdf صفحه سایت را ذخیره کرده یا از آن پرینت بگیرند .
شما میتوانید در تمامی وب سایت ها اعم از سایت های وردپرسی یا سایت هایی که قالب آنها html است ، این دکمه را قرار دهید به این دلیل که این دکمه ربطی به بخش های برنامه نویسی ندارد و کدهای ساخت این دکمه تماما توسط html هستند که در کل وب سایت ها قابل اجراست و البته ایجاد عملکرد این دکمه یعنی انتقال کاربر به قسمت پرینت ، توسط جاوا اسکریپت انجام خواهد شد که اجرای دستورات جاوا اسکریت نیز در تمامی وب سایت ها میسر است .
اگر علاقمند به اجرای دیزاین و طراحی خاص روی این دکمه هستید میتوانید از Css نیز استفاده کنید تا ظاهر دکمه را با سلیقه خودتان دیزاین کنید .
ساخت دکمه پرینت با html
برای اینکار باید در صفحه مدنظر سایت خودتان کد زیر را قرار دهید :
<a href="#" onclick="window.print(); return false;" class="PrintPage">Print</a>
در این قسمت صرفا یک دکمه توسط تگ a قرار دادیم که توسط یک رویداد جاوا اسکریپتی بنام onclick که رویداد کلیک شدن روی دکمه را کنترل خواهد کرد قرار دادیم که البته داخل این رویداد onclick ، ویژگی window.print قرار دارد که مسبب پرینت شدن کل window یا همان پنجره نمایشی است .
متن دکمه را که ” Print ” است میتوانید به دلخواه خودتان تغییر دهید ، و برای قسمت ظاهر دکمه نیز میتوانید استایل دلخواه خودتان را بنویسید که یک نمونه از استایل های این دکمه میتواند به شکل زیر باشد :
.PrintPage{
display:inline-block;
padding:8px 12px;
border-radius:6px;
background-color:#515151;
color:#faf4f4;
}
در داخل متن دکمه نیز میتوانید بجای متن ” Print ” از آیکون فونت یا تصویر میتوانید استفاده کنید . یکی از نکات مهم درمورد پرینت که مربوط به css است اینجاست که میتوان مشخص کرد کدام المان های صفحه در هنگام پرینت گرفتن ، در چاپ نمایش داده نشده و چاپ نشود و یا حتی تغییراتی روی آنها انجام شود ( برای مثال اندازه فونت برخی قسمت های خاص بزرگتر شود ) . دستور زیر را توجه کنید :
@media print {
/* All your print styles go here */
#header,
#footer,
#nav {
display: none !important;
}
}
توسط این دستور ( که البته داستان آموزشی آن مفصل است ) میتوان کلاس ها و آیدی های مربوط به المان های داخل هرصفحه را به نوعی تنظیم کرد که هنگام پرینت ، پرینت نشوند .
به همین سادگی و صرفا با قرار دادن یک قطعه کد html و کمی css که دیزاین و ظاهر آن را بهتر کند میتوانید یک دکمه پرینت برای راحتی کاربران سایت خودتان بسازید . اگر قصد دارید تا هنگام نگه داشتن موس روی دکمه ، یک متن راهنما نیز نمایش داده شود :
title="Print this page"
کد بالا را داخل تگ a اضافه کرده و متن دلخواه را بجای ” Print this page ” داخل آن بنویسید . موفق باشید .
امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت
نقشه راه فرانت
اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید
چگونه از سلکتور disabled: در css و طراحی سایت استفاده کنیم ؟ طراحی بهتر فرم های وب سایت با انتخاب کننده disabled را در این آموزش یاد بگیرید !
آیا امکان طراحی قالب و کسب درآمد تنها با یادگیری و تمرین زبان Css امکان پذیر است ؟ یا در این بین باید به سراغ زبان های دیگری نیز رفت ؟ به این سوال مهم در این مقاله به شکل کامل پاسخ خواهیم داد !