السلام عليكم
أثناء تصفحى وجدت هذا الموضوع فقمت بترجمته وهو يتحدث عن اعداد نسخة للطباعة من صفحات موقعك عموماً لا اجيد كتابة المقدمات وسندخل مباشرة فى صلب الموضوع.
كما تعلمون فإن نسخ الطباعة تحسن شكل الصفحات المطبوعة خاصة اذا كان بها الكثير من المحتويات ودعنا نستعرض سريعاً ما هى اوجه الإستفادة من عمل (Print stylesheet) نسخة للطباعة :-
1- ازالة الصور والأشياء الغير مطلوبة.
2- استغلال المساحات الفارغة التى تظهر على الورق المطبوع.
3- تسهيل القراءة وتحسين الخط المطبوع.
4- توضيح الروابط الموجودة بالصفحة.
الخطوة الأولى
قم بإنشاء ملف Css جديد وليكن Print.cssبعدها قم بإضافة هذا السطر فى جميع الصفحات المطلوب عمل نسخة طباعة لها
كود:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
مع مراعاة مسار الملف Print
ما الذى سنقوم بوضعه داخل هذا الملف؟
الأوامر التى سنقوم بوضعها ستقوم بإستبدال الموجودة فى ملف الCss الأصلى أى انك لن تحتاج الى اوامر جديدة ، فقط ستقوم بالتعديل على الأوامر الموجودة.
الخطوة الثانية
ازالة العناصر الغير مطلوبة فعادة المطلوب فى الطباعة هو محتوى الصفحة ولوجو الموقع والفوتر اذا كان به معلومات االإتصال او ما شابه ، إذن العناصر الغير مطلوبة هى العمود الأيمن والأيسر والهيدر ولإزالة هذه العناصر سنقوم بإستخدام الأمرdispaly:none;،
فى ملف Print.css ضع الكود التالى:-
كود:
#leftbar,#rightbar,#header, .noprint {display: none;}
مع مراعاة اختلاف الidلهذه الأعمده.
وربما أيضاً تريد ازالة بعض الصور المتحركة او الإعلانات.
الخطوة الثالثة
تنسيق الصفحة لايوجد شىء اسوء من ان تطبع صفحة وتكتشف ان نهاية كل سطر منقوصة ، او ان تجد مساحات خالية بدلاً من العمودين الأيسر والأيمن مما يتسبب فى اهدار الكثير من ورق الطباعة عموماً هذه هى الأوامر التى ستساعدك فى حل هذه المشكلة:-
كود:
width: 100%; margin: 0; float: none;
وسنقوم بتطبيق هذه الأوامر على الجداول (Tables) او الإطار العام (LayOut)للمحتويات كالتالى:-
كود:
#container, #container2, #content {width: 100%; margin: 0; float: none;}
.
تغيير الخط أحياناً يقوم المستخدمين بتكبير الخط من المتصفح فتتم طباعة الصفحة بهذا بنفس الخط الكبير ،فمن المهم ان تقوم بتحديد نوع وحجم ولون خط الطباعة مثال:-
كود:
body{font-family:Tahoma;font-size:12pt;color:#000000;}
ضع فى ذهنك أيضاً ان الوان وصور خلفيات الصفحات لا تتم طباعتها إفتراضياً ،فلا تقوم بإستخدام لون فاتح للخطوط.
النهاية
الآن ملف الPrint.css سيكون شبيهاً بالكود التالى:
كود:
/* إزالة العناصر الغير مرغوبة */
#leftbar,#rightbar,#header, .noprint
{
display: none;
}
/* تنسيق الصفحة */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}
/* تغيير لون وحجم ونوع الخطوط */
body
{
font-family:Tahoma;font-size:12pt;color:#000000;
}
/* تحسين الوان الروابط */
a:link, a:visited
{
color: #781351:
}
بالنسبة للروابط سأقوم بإضافة درس لاحقاً لكيفية عرضها فى صفحات الطباعة.
فى النهاية أتمنى ان اكون وفقت فى ايصال المعلومة.
يسمح بنقل الموضوع مع الإشارة للكاتب
عمرو الموجى