مدونة الويب 2.0

  • الرئيسية
  • تعريف بالمدونة
  • المصادر
  • تواصل معي
  • أخبار المدونة
  • أفكار
  • استبيان
  • برمجة
  • تصميم
  • تطوير
  • كتب
  • مدونات عربية
  • مهمات
  • مواقع

كيف أصنع ملف css للطباعة؟

20, يوليو 2008 التصنيف: تصميم

السلام عليكم،

مازال هناك أناس يحبذون طباعة المستندات الطويلة لقراءتها أو لاصطحباها معهم. قبل ثورة ال css :D كان على مطور الموقع أن يصنع مقابل كل صفحة، صفحة آخرى للطباعة. بحيث تكون خالية من الألوان والتنسيقات الزائدة.

أما الأن فبكل بساطة يمكنك كتابة ملف css صغير يقوم بالمهمة كلها ولكل صفحاتك.

إذاً ماهي الخطوات اللازمة لعمله؟

1- ربط الملف الخاص بالطباعة مع الصفحة:

لاحظ استخدام media وتحديدها ب print حيث يقوم المتصفح تلقائياً عند طباعة الصفحة بأخذ التنسيقات من هذا الملف.

2- تحديد مجال ملف css الرئيسي:
بفرض أن ملف ال css الرئيسي لدينا اسمه style.css يجب أن نحدد مجاله بالشاشة حتى لايتعارض مع ملف الطباعة السابق

لاحظ أننا حددنا مجالها بإعطاء ال media قيمة screen أي الشاشة المرئية فقط.

3- إخفاء بعض العناصر:
بعض العناصر الموجودة في الصفحة لايجب أن تظهر وقت الطباعة مثل منطقة الهيدر (الموجود به شعار مدونتي) والروابط الجانبية … أي عند طباعة الملف نريد فقط المحتوى الرئيسي الموجود في الصفحة لبطاعته ولانريد طباعة روابط وتصنيفات !


#navigation, #blogroll {
display: none;
}

4- تكبير الخط:
يجب أن تكبر الخط قليلاً ليظهر واضحاً عند الطباعة فالحجم عند قراءته على الشاشة مناسب ولكن عند طباعته يظهر صغيراً للقارىء


body {
font-size: 120%;
line-height: 130%;
}

5- استخدم الإنش والنقاط كوحدات للقياس:
في ملف الطباعة اتخدم الإنش والنقاط بدل البكسل كوحدة للقياس لأنهم أكثر قابلية للتحكم بأحجام الخطوط.


body {
font-size: 12pt;
line-height: 18pt;
}
body #container {
margin: 1in 1.2in .5in 1.2in;
}

ملاحظة: لن أكتب ملف طباعة خاص بالمدونة وسأخبركم عن السبب في وقت لاحق ;-)

شارك هذه التدوينة:
إضافة 'كيف أصنع ملف css للطباعة؟' إلى Del.icio.usإضافة 'كيف أصنع ملف css للطباعة؟' إلى diggإضافة 'كيف أصنع ملف css للطباعة؟' إلى Technoratiإضافة 'كيف أصنع ملف css للطباعة؟' إلى Stumble Uponإضافة 'كيف أصنع ملف css للطباعة؟' إلى Google Bookmarksإضافة 'كيف أصنع ملف css للطباعة؟' إلى FaceBookإضافة 'كيف أصنع ملف css للطباعة؟' إلى MySpaceإضافة 'كيف أصنع ملف css للطباعة؟' إلى Twitterإضافة 'كيف أصنع ملف css للطباعة؟' إلى FriendFeed
الوسوم: css, نصائح
أرسل هذه التدوينة لصديق أرسل هذه التدوينة لصديق
طباعة هذه التدوينة طباعة هذه التدوينة

    إقرأ أيضاً:

    • اختصارات ال CSS
    • أوراق المساعدة
    • أسرار نجاح المدونات العربية
    • مقدمة في CSS
    • Ubiquity سطر أوامر الفايرفوكس

8 تعليق في “كيف أصنع ملف css للطباعة؟”

  1. vbm: 20, يوليو 2008 في 5:26 ص

    عمل أكثر من رائع
    ومبارك لك ولنا به بإذن الله
    —————–

    ملاحظة: لن أكتب ملف طباعة خاص بالمدونة وسأخبركم عن السبب في وقت لاحق

    ولكنى أريد معرفة السبب الأن — منتظر بلهفة —


  2. Khaled: 20, يوليو 2008 في 10:47 ص

    الله يبارك فيك … بس يخلص التحدي :D سأخبركم


  3. عبد الهادي: 20, يوليو 2008 في 3:20 م

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


  4. Khaled: 20, يوليو 2008 في 3:56 م

    الحمد لله فالهدف هو إثراء المعلومات الموجودة لدينا …
    بعد أربعة أيام سأخبركم به … أي بعد انتهاء التحدي


  5. علاء: 20, يوليو 2008 في 4:26 م

    هيه خالد
    شكلك بتضحك علينا
    علشان نخرب مدوناتنا :) (بمزح طبعاً)
    أو شكلك ناوي تعمل add-in
    بس على فكرة عجبني الموضوع

    تحياتي


  6. Khaled: 20, يوليو 2008 في 4:28 م

    هههههههههه لماذا هذا الفضول العجيب؟؟؟

    قلت لكم 4 أيام وستعرفون السبب :D والسبب مقنع وليس حيلة للتهرب


  7. مصطفى حسان: 20, يوليو 2008 في 7:54 م

    هي فيها تحدي وألغاز؟ :)

    وفقك الله أخي في هذه المدونة
    بحق مدونة مفيدة بمعنى الكلمة


  8. Khaled: 21, يوليو 2008 في 12:07 ص

    لا تحدي ولا ألغز مجرد فكرة جميلة …
    لم أكن أود كتابة هذه الملاحظة حول ملف البطاعة لمدونتي ولكن خفت أن يقرأ أحدهم ماكتبت ثم يخبرني “أنت من تكتب حول ملف الطباعة لم تكتب واحداً لمدونتك”
    ولم أعلم أنها قد أشعلت الفضول فيكم :D

    شكراً على الكلمات الطيبة


شاركنا برأيك؟

الرجاء الكتابة باللغة العربية الفصحى، وإذا كنت تريد كتابة سؤال حاول البحث في غوغل أولاً فغالباً ستجد عنده الخبر اليقين.

  • الأكثر قراءة
  • الأحدث
  • الأرشيف
  • تعلم الكيك وتطوير المواقع بالبيت
  • تنظيم الوقت البرمجي
  • أفكار ومواقع ويب 2 شهيرة
  • مقدمة في CakePHP
  • لماذا غوغل شريرة!
  • الخطوط العربية
  • تصميم قاعدة البيانات
  • هل تريد أن تكسب 1000 دولار؟
  • مواقع عربية بالدروبال
  • موقع الجزيرة الجديد
    1. غوغل، جوجل، كوكل أو قوقل!
    2. دروبال تعلمه بالعربي
    3. تحديثات بالجملة
    4. صفحة 404
    5. مدونة الويب 2.0 في 2010
    6. عن غيوم
    7. وحدة Scrollable Content لدروبال
    8. موقع بدون قاعدة بيانات
    9. دول العالم باللغة العربية
    10. ثيم خفيفة للفايرفوكس
    1. أغسطس 2010
    2. مارس 2010
    3. فبراير 2010
    4. يناير 2010
    5. ديسمبر 2009
    6. سبتمبر 2009
    7. أغسطس 2009
    8. يوليو 2009
    9. يونيو 2009
    10. مايو 2009
    11. مارس 2009
    12. فبراير 2009
    13. يناير 2009
    14. ديسمبر 2008
    15. نوفمبر 2008
    16. أكتوبر 2008
    17. سبتمبر 2008
    18. أغسطس 2008
    19. يوليو 2008
    20. يونيو 2008
    • اشترك بآخر الأخبار RSS

      Feeds Counter

      أو

    • الاستبيان

      هل طورت أو ساعدت بتطوير مشروع مفتوح المصدر؟

      مشاهدة النتيجة

      Loading ... Loading ...
    • أوسمة

      Ajax css IDE jQuery php SEO TinyMCE أخبار المدونة أذكار أطر العمل أفكار إدارة المحتوى إدارة محتوى إضافات استبيان الأجاكس الأمان الاختبارات الآلية الكيك برمجة تحديثات تحميل تدوينات رمضان تصميم تطوير تعريب تعلم الكيك وتطوير المواقع بالبيت تكتيك تنظيم الوقت جوائز حديث دروبال دعاية فايرفوكس فرص عمل كتب مسابقات مهمات مواقع نصائح هندسة برمجيات وورد بريس

    حول المدونة

    • جميع الحقوق محفوظة © 2008-2010 مدونة الويب 2.0.
    • يمكنك نقل المحتويات أو اقتباس أي جزء منها ويفضل ذكر المصدر.
    • من الممكن أن تساعدك خريطة الموقع.

    عروض العمل

    • يمكنك أن تناقشني حول عروض العمل للمدونات أو لمواقع الويب 2.0.
    • أيضاً يمكنك استشارتي في وضع التفاصيل لمدونة أو لفكرة مشروع جديد.
    • سيرتي الذاتية على My Linkedin Profile

    تواصل معي

    • خالد الحوراني مطور ويب 2.0
    • دمشق - سوريا
    • تابع أخباري على My Twitter account
    • أو راسلني فوراً