إضافة زر طباعة أو ارتباط إلى صفحة الويب الخاصة بك

click fraud protection

تمنحك CSS (أوراق الأنماط المتتالية) تحكمًا كبيرًا في كيفية عرض المحتوى على صفحات الويب الخاصة بك على الشاشة. يمتد عنصر التحكم هذا إلى وسائط أخرى أيضًا ، مثلما يحدث عند طباعة صفحة الويب.

قد تتساءل لماذا تريد إضافة ميزة الطباعة إلى صفحة الويب الخاصة بك ؛ بعد كل شيء ، يعرف معظم الناس بالفعل أو يمكنهم بسهولة معرفة كيفية طباعة صفحة ويب باستخدام قوائم المتصفح.

ولكن هناك حالات حيث إضافة زر طباعة أو حلقة الوصل إلى صفحة لن يجعل العملية أسهل للمستخدمين فقط عندما يحتاجون لطباعة صفحة ولكن ، ربما الأهم من ذلك ، يمنحك المزيد من التحكم في كيفية ظهور هذه المطبوعات ورقة.

إليك كيفية إضافة أزرار الطباعة أو روابط الطباعة على صفحاتك ، وكيفية تحديد أي أجزاء من محتوى الصفحة ستتم طباعتها وأيها لن تتم طباعتها.

إضافة زر طباعة

يمكنك بسهولة إضافة زر طباعة إلى صفحة الويب الخاصة بك عن طريق إضافة التعليمات البرمجية التالية إلى مستند HTML الخاص بك حيث تريد أن يظهر الزر:

onclick = "window.print () ؛ إرجاع false ؛" />

سيتم تسمية الزر كـ إطبع هذه الصفحة عندما تظهر على صفحة الويب. يمكنك تخصيص هذا النص إلى أي شيء تريده عن طريق تغيير النص بين علامات الاقتباس التالية

instagram viewer
القيمة =
في الكود أعلاه.
لاحظ أن هناك مسافة فارغة واحدة تسبق النص وتتبعه ؛ هذا يحسن مظهر الزر بإدخال بعض المسافة بين نهايات النص وحواف الزر المعروض.

إضافة رابط طباعة

من الأسهل إضافة رابط طباعة بسيط إلى صفحة الويب الخاصة بك. ما عليك سوى إدخال الكود التالي في مستند HTML الخاص بك حيث تريد أن يظهر الرابط:

طباعة

يمكنك تخصيص نص الرابط بتغيير "طباعة" إلى أي شيء تختاره.

جعل أقسام محددة قابلة للطباعة

يمكنك إعداد قدرة المستخدمين على طباعة أجزاء معينة من صفحة الويب الخاصة بك باستخدام زر أو ارتباط طباعة. يمكنك القيام بذلك عن طريق إضافة print.css ملف إلى موقعك ، وتسميته في رأس مستند HTML الخاص بك ومن ثم تحديد الأقسام التي تريد جعلها قابلة للطباعة بسهولة عن طريق تحديد فئة.

أولاً ، أضف التعليمات البرمجية التالية إلى قسم الرأس في مستند HTML الخاص بك:

اكتب = "text / css" media = "print" />

بعد ذلك ، قم بإنشاء ملف مسمى print.css. في هذا الملف ، أضف الكود التالي:

body {visibility: hidden؛}
.print {visibility: مرئية؛}

يعرّف هذا الرمز جميع العناصر في الجسم على أنها مخفية عند طباعتها ما لم يكن العنصر يحتوي على فئة "الطباعة" المخصصة له.

الآن ، كل ما عليك القيام به هو تعيين فئة "الطباعة" لعناصر صفحة الويب التي تريد أن تكون قابلة للطباعة. على سبيل المثال ، لجعل قسم محدد في عنصر div يمكن طباعته ، يمكنك استخدامه

لن تتم طباعة أي شيء آخر على الصفحة لم يتم تعيينه لهذه الفئة.

instagram story viewer