10 نصائح للحصول على صحائف أفضل نمط الطباعة
لقد تم نسى أوراق الأنماط المطبوعة إلى حد ما ، ومع ذلك تبقى مهمة على حالها. يطبع العديد من الأشخاص مقالات للقراءة أثناء السفر أو عندما لا يكون لديهم إمكانية الوصول إلى الإنترنت.
طباعة أوراق نمط لها فوائد مؤكدة . على سبيل المثال ، القراءة على الورق أقل تعباً على العيون من القراءة على الشاشة.
أيضًا ، يكون اتباع البرامج التعليمية أسهل إذا كان لديك جهاز بجانبك ، مع فتح محرر التعليمات البرمجية على الشاشة ؛ بهذه الطريقة ، لن تضطر إلى تبديل النوافذ في كل مرة للبحث عن شيء ما.
في هذه المقالة سنوضح لك 10 نصائح سهلة تساعدك على إنشاء أوراق أنماط طباعة أفضل .
في حالة نسيانك ، إليك كيفية إعداد ورقة أنماط الطباعة:
ال media="print" تضمن أن المستخدمين لا يرون أيًا من الأنماط المحددة في ملف print.css .
هناك بعض الإهتمام المطلوب ، على الرغم من ذلك: إذا كانت ورقة الأنماط الرئيسية لا تحتوي على سمة وسائط ، فإن ورقة أنماط الطباعة سترث نمطها. لفصلها ، قم بتعيين ورقة الأنماط الرئيسية الخاصة بك كما يلي:
فيما يلي 10 تلميحات لمساعدتك على البدء في استخدام ورقة أنماط الطباعة.
1. قم بإزالة الملاحة
ما هو الفرق الرئيسي بين الورق والكمبيوتر؟ الورق ثابت ، بينما يكون الكمبيوتر تفاعليًا. ولتيسير هذا التفاعل ، تتمتع مواقع الويب بالملاحة ، والتي تصبح عديمة الفائدة على الورق.
إخفاء التنقل والأجزاء الأخرى من موقعك على الويب التي تصبح بلا معنى على الورق ، مثل الأشرطة الجانبية التي ترتبط بمشاركات أخرى. رمز هذا سهل للغاية: فقط قم بتعيين العنصر display إلى none .
2. تكبير منطقة المحتوى
عند إزالة التنقل والشريط الجانبي ، ينتشر المحتوى الآن عبر الصفحة. هذا يجعل ورقة أنماط الطباعة تبدو وكأنها مستند عادي ، بدلاً من نسخة ورقية من موقع الويب.
كل ما نحتاج إلى القيام به لتوسيع المحتوى هو إعادة تعيين العوامة وإزالة أي هوامش وضبط العرض على 100٪.
[css] #content {width: 100٪؛ margin: 0؛ float: none؛} [/ css]3. إعادة تعيين ألوان الخلفية
تتجاهل معظم المتصفحات بالفعل خصائص الخلفية للحفاظ على الحبر. ولكن للتأكد من أن الخلفية بأكملها بيضاء ، يمكننا تعيين الجسم إلى اللون الأبيض ، ومن ثم إعطاء كل عنصر تابع للطفولة على الصفحة خلفية بيضاء.
[css] body {background: white؛} # content {background: transparent؛} [/ css]4. إعادة تعيين ألوان النص
بإعادة تعيين الخلفية ، تظهر مشكلة أخرى. ماذا لو كان لديك مربع "معلومات المؤلف" بلون رمادي غامق في نهاية مشاركاتك ، مع وجود النص باللون الرمادي الفاتح أو الأبيض؟ مع تعيين الخلفية الآن إلى الأبيض ، هذه المعلومات غير مرئية.
لإصلاح هذا ، قم بتغيير أي نص ذو لون فاتح إلى شيء أغمق: أسود أو ، ويفضل ، رمادي غامق.
[css] #author {color: # 111؛} [/ css]
يأخذ سام براون بلوق أعلاه. هل يمكنك تخيل ما سيبدو عليه هذا إذا لم يعيد ضبط ألوان النص؟ غير قابل للقراءة بالفعل.
5. عرض وجهة الروابط
نظرًا لأن الورق ليس وسيطًا تفاعليًا ، لا يستطيع القراء بالطبع النقر على الروابط لجمع المزيد من المعلومات.
قل شخص ما يقرأ مطبوعة عن منتج جديد فاخر. رؤية "انقر هنا لمزيد من المعلومات" فجأة سيكون مزعجًا لهم ، أليس كذلك؟ يتم إصلاح ذلك بسهولة عن طريق إضافة وجهة الارتباط بعد نص الرابط نفسه ، مما يمنحك شيئًا مثل هذا: "انقر هنا للحصول على مزيد من المعلومات (http://hereismore.com/information)".
والأكثر من ذلك ، بالنسبة للمتصفحات الجاهزة للمستعرض CSS 2 ، يمكن إجراء ذلك باستخدام CSS قديمًا. هنا الرمز:
[css] a: link: after {content: "(" attr (href) ")"؛} [/ css]يمكنك إضافة أشياء بحجم أصغر أو مائل أو أي شيء آخر.
6. جعل الروابط تبرز من النص العادي
يحتاج القراء إلى القدرة على تمييز الروابط من النص العادي. تنطبق قواعد الاستخدام الأساسية هنا: اللون الأزرق والسطوح هو المفضل ، ولكنني أفضل أن أضيف bolding أيضًا.
تذكر أن المستندات غالبًا ما تكون مطبوعة بالأسود والأبيض. لا تعتمد فقط على اختلاف اللون. إليك رمز الروابط المطبوعة المعقولة:
[css] a: link {font-weight: bold؛ text-decoration: underline؛ color: # 06c؛} [/ css]# 0066cc لون أزرق جديد ، ويبدو مثل 999999 عند الطباعة بتدرج الرمادي. مع هذا ، ستبدو الروابط جيدة مطبوعة إما بالألوان أو بالأبيض والأسود. وسوف تبرز أيضا من النص العادي.
7. ماذا عن حجم الخط؟
في الطباعة ، 12 نقطة هي المعيار. لكن كيف نترجم ذلك إلى CSS؟ يقول البعض أن تحديد حجم الخط إلى 12 نقطة (نقطة) أمر جيد. ينصح آخرون بتعيينها إلى 100٪. لا يزال آخرون يقولون لا تعلن أي حجم الخط في ورقة أنماط الطباعة الخاصة بك على الإطلاق ، لأن ذلك من شأنه أن يلغي تفضيلات المستخدم.
أنا شخصياً أذهب بحجم خط من 12 نقطة معظم الوقت:
[css] p {font-size: 12pt؛} [/ css]8. ماذا عن الخطوط؟
معظم الناس يفضلون الخطوط القاسية لأنهم أقل تعبًا في العيون ، فهم يقودون القارئ بشكل أفضل من خلال النص ، وهكذا. وضع font-family إلى serif في ورقة أنماط الطباعة الخاصة بك ربما تكون فكرة جيدة ، على الرغم من أن بعض القراء قد يفاجأون أن يجدوا أن الخط في المطبوعات ليس هو نفسه الموجود على موقع الويب الخاص بك.
في ما يلي التعليمة البرمجية لمكدس خط الطباعة الجيد:
[css] body {font-family: Georgia، 'Times New Roman'، serif؛} [/ css]
واحدة من مزايا خاصية @ font-face في CSS 3 هي أن الخطوط الخاصة يمكن طباعتها أيضًا ، مما يجعل الطباعة أكثر تشابهًا لموقعك على الويب!
9. مدونتي لديها الكثير من التعليقات. ماذا علي أن أفعل؟
حسنا ، هذا حقا اختيارك. من ناحية ، فكر في جميع الأشجار التي ستوفرها فقط عن طريق إضافة #comments { display: none; } إلى ورقة أنماط الطباعة الخاصة بك. من ناحية أخرى ، فإن التعليقات ذات قيمة كبيرة على بعض المدونات وتحتوي على بعض النقاش الرائع.
من خلال نقل التعليقات إلى صفحاتهم الخاصة ، فإنك تمنح المستخدمين حرية اختيار ما إذا كانوا يريدون طباعتها أم لا. يحتوي CSS على خاصية تجعل ذلك أمرًا سهلاً للغاية:
[css] #comments {page-break-before: always؛} [/ css]على سبيل المثال ، إذا كانت مقالتك عبارة عن صفحات ذات صفحتين ونصف ، فسيتم تشغيل التعليقات من الصفحة 4 وصولًا إلى 6. على سبيل المثال ، سيكون المستخدمون قادرين على اختيار الصفحات التي سيتم طباعتها دون فقدان أي معلومات.
10. أظهر رسالة للطباعة فقط
" شكرا لك على طباعة هذا المقال! من فضلك لا تنسى العودة إلى mysite.com للمواد الطازجة. "لماذا لا تعرض رسالة ودية كهذه في المطبوعات؟ أو ربما تطلب من القراء إعادة تدوير الورق الذي استخدموه للحفاظ على البيئة.
هذا ما سيبدو عليه الأمر:
شكرا لطباعة هذه المادة. من فضلك لا تنسى العودة إلى mysite.com للمواد الطازجة.
[css] #printMsg {display: block؛} [/ css] يمكنك إضافة القليل من التصميم أيضًا ، مثل حدود 1 بكسل. لا تنس أن تضيف #printMsg { display: none; } إلى ورقة الأنماط المعتادة ، لتجنب إرباك الزوار.
عرض
فيما يلي بعض الأمثلة من مواقع ويب معروفة جيداً والتي فكرت (أو نسيتها) حول ورقة أنماط الطباعة. لا تتردد في أن تكون مصدر إلهام.
تبدو جيدا:
إليك بعض مواقع الويب التي تقوم بعمل رائع باستخدام أوراق أنماط الطباعة الخاصة بها:
24 طرق : يحتوي موقع الويب الخاص بهذا "التقويم المتقدم لمهارات الويب" على تصميم أنيق ، لكنني تساءلت كيف سيبدو في شكل طباعة. والنتيجة هي لطيفة حقا. تمت إزالة الأشياء الملحقة من CSS 3. التصميم نظيف ومع ذلك لا يزال. تمت إزالة العلامة التجارية الكبيرة ، وحل محله "بسيط 24" محاذاة إلى اليمين بجوار عنوان المشاركة.
ThinkVitamin : مدونة Carsonified هي مثال جيد لكيفية عمل أوراق الأنماط المطبوعة. لا توجد نقاط ضعف حقيقية باستثناء أن وجهة عنوان URL لا تظهر.
CSS-الخدع : قام Chris Coyier من CSS-Tricks.com بعمل جيد في ورقة أنماط الطباعة. لقد قام بإزالة كل الفوضى ونقل التعليقات إلى صفحة جديدة ، بحيث يمكن للمستخدمين اختيار عدم طباعتها.
يمكن استخدام بعض العمل
في ما يلي بعض مواقع الويب الرائعة بالفعل ، ولكن يمكن أن تستخدم أوراق أنماط الطباعة الخاصة بها بعض الشيء. لا جريمة لأي شخص في هذا القسم.
Webdesign Ledger : يبدو أن دفتر الأستاذ Webdesign قد أهمل ورقة أنماط الطباعة الخاصة به. عند النقر فوق "طباعة" ، ينتهي بك الأمر إلى ثلاث صفحات من الإعلانات والروابط ذات الصلة.
تصميم مقصورة : يبدو أن برايان هوف قد نسي ورقة الطباعة الخاصة به. عندما تطبع مقالاً ، ستحصل على نموذج التعليق أيضًا.
فليكر : ستكون قادرًا على طباعة الصور لإظهارها للأصدقاء. كان بإمكان Flickr إزالة كل شيء ، باستثناء الصورة نفسها ومعلومات حقوق النشر في المطبوعات. ولكن كل شيء يظهر في HTML عادي غير متحول.
مصادر
- نصائح مفيدة لإنشاء ورقة أنماط CSS طباعة بواسطة Line25
- ورقة أنماط الطباعة: الدليل النهائي
- تصميم CSS: الذهاب للطباعة
- تحصل CSS-Tricks أخيراً على ورقة أنماط الطباعة
مكتوبة حصريا ل WDD بواسطة بيتر Beulque. هو طالب و مطور ويب ويعيش في بلجيكا. يمكنك متابعته تغريد جدا.