[شرح] طريقة عمل نسخة للطباعة (Print stylesheet)عن طريق الCss

[moraaaa]

السلام عليكم

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

كما تعلمون فإن نسخ الطباعة تحسن شكل الصفحات المطبوعة خاصة اذا كان بها الكثير من المحتويات ودعنا نستعرض سريعاً ما هى اوجه الإستفادة من عمل (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:
    }

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

فى النهاية أتمنى ان اكون وفقت فى ايصال المعلومة.
يسمح بنقل الموضوع مع الإشارة للكاتب
عمرو الموجى

[owner]

شكرا لك موضوع جميل جدا .

قبل كم يوم صديقي خبرني بالطريقة وبحثت عنها شويه ولقيت ان ممكن ايضا يضبط الموقع على عرضه في :
aural : وتستخدم لأي اداه صوتية
projection : للبروجكتات والعرض بنظام الشرائح
tv : للتلفاز
handheld : للهواتف والاجهزة الصغيرة

وعند عمل كل هذه الستايلات بأذن الله سوف يعمل موقعك على كل اجهزة العرض حتى الثلاجة

شكرا لك مرة اخرى

[moraaaa]

العفو وسعيد جداً بردك
كنت انوى وضع الMedia Types ولكنك سبقتنى :nice:
عموماً هم 10 انواع :deal:
Media types

[مصطفى فرغلى]

ممتاز ... جزاك الله خيرا

[moraaaa]

العفو وشكراً لمرورك