في الماضي ، يعني إنشاء نسخة صديقة للطابعة من صفحة الويب تصميم صفحة منفصلة مع كل من التخطيط والتنسيق المعدلة بحيث يمكنك تحقيق نتائج مرضية عند الطباعة. الآن ، باستخدام XHTML و CSS المنظم ، يمكنك تحقيق نفس التأثير مع جهد أقل بكثير. معظم صفحات الويب من عرض الشاشة إلى تأثير الطباعة
في الماضي ، يعني إنشاء نسخة صديقة للطابعة من صفحة الويب تصميم صفحة منفصلة مع كل من التخطيط والتنسيق المعدلة بحيث يمكنك تحقيق نتائج مرضية عند الطباعة. الآن ، باستخدام XHTML و CSS المنظم ، يمكنك تحقيق نفس التأثير مع جهد أقل بكثير.
من عرض الشاشة إلى تأثير الطباعة
تم تصميم معظم صفحات الويب لتكون مناسبة للعرض على شاشات الكمبيوتر. ومع ذلك ، يحتاج المستخدمون في بعض الأحيان إلى طباعة صفحات معينة ، ربما فقط للحفاظ على سجل طويل الأجل ، أو استخدامه كمرجع مناسب للإنترنت.
المشكلة الآن هي أن العديد من الميزات التي تجعل صفحة الويب تبدو جذابة وملونة على شاشة ملونة الكمبيوتر لا يمكنها إظهار نفس التأثير على الإصدار المطبوع من صفحة الويب - خاصة عندما تكون الطابعة بالأبيض والأسود. عند تخفيض رتبتها إلى الطباعة الرمادية ، ستفقد مزيج الألوان تأثير التباين (الأصلي) ؛ ستبدو الرسومات مشوهة وتستغرق وقتًا طويلاً للطباعة ؛ أزرار التنقل التي تلعب دورًا مهمًا على صفحة الويب عديمة الفائدة في صفحة الطباعة.
للتغلب على هذه المشكلات ، غالبًا ما يصمم منشئو الويب نسخة صديقة للطباعة من الصفحة بحيث يكون للزوار الرغبة في الطباعة. عادةً ما تتضمن الإصدارات الصديقة للطابعة نفس محتوى صفحة الويب الرئيسية ، ولكن يتم حذف معظم الرسومات والخلفيات وعناصر التنقل. تقوم الصفحة أيضًا بتحويل اللون إلى شكل ما لإنشاء صور رمادية مقبولة.
حل CSS
تتمثل إحدى ميزة فصل المحتوى والتمثيل باستخدام علامات XHTML المهيكلة وتنسيقات CSS في أنه من خلال تغيير نمط CSS ، يمكنك إعادة تنسيق المحتوى بسهولة. لذلك ، فإن إنشاء صفحة سهلة الطابعة هو ربط ملف CSS مختلف إلى نفس صفحة XHTML.
يمكنك ربط ورقة نمط الشاشة وورقة نمط الطباعة بنفس ملف XHTML في نفس الوقت ، لذلك ليست هناك حاجة لإنشاء صفحة سهلة الطابعة بشكل منفصل ، مجرد ورقة نمط سهلة الطابعة كافية. عند إضافة ملفات نوع الوسائط المتعددة إلى رمز الارتباط ، فإن هذا يخبر المستعرض الذي يحكمه CSS الذي يتبعه أو تجاهله لإخراج الشاشة ، والتي يجب استخدامها للطباعة.
فيما يلي مثال يرتبط بزوج من ملفات CSS:
ما يلي هو المحتوى المقتبس:
<LinkRel = STYLESHEETTYPE = TEXT/CSSMEDIA = SCREENHREF = mysite-screen.css/>
<LinkRel = STYLESHEETTYPE = TEXT/CSSMEDIA = printThRef = mysite-print.css/>
إذا كنت بحاجة إلى دعم المتصفحات القديمة ، فيجب عليك التمسك باستخدام شاشة واصفات الوسائط الخاصة بـ CSS1. إنها حصرية بشكل متبادل ، لذلك عند إنشاء صفحات لعرض الشاشة ، يتجاهل المتصفح ورقة نمط الطباعة والعكس صحيح. لذلك ، يجب أن تحتوي كل ورقة أنماط على احتواء نفس النمط ، ولكن هناك إعلانات قاعدة مختلفة لإنشاء أنماط الصفحات بشكل منفصل لأجهزة الإخراج المختلفة.
تبسيط CSS
إذا كنت على استعداد للتخلي عن رعاية المتصفحات القديمة وافتراض أن المستخدمين يستخدمون المتصفحات التي تدعم CSS2 (مثل IE5 وما فوق أو Netscape6 وما فوق) ، يمكنك استخدام واصف الوسائط الجديد لتبسيط رمز CSS بشكل كبير.
فيما يلي مثال على الارتباط باستخدام واصفات الوسائط CSS2:
ما يلي هو المحتوى المقتبس:
<LinkRel = STYLESHEETTYPE = TEXT/CSSMEDIA = AllHref = MySite-all.css/>
<LinkRel = STYLESHEETTYPE = TEXT/CSSMEDIA = PRINTTHREF = MySite-PRINT2.CSS/>
هذه الروابط هي تقريبا نفس الرابطات السابقة ؛ الفرق هو أن ملف CSS يحتوي على أنماط للطباعة.
يمكن تطبيق الأنماط المرتبطة بالوسائط = كلها في ملف CSS على عرض الشاشة والطباعة وجميع الوسائط الأخرى ، بحيث يمكنك وضع جميع الأنماط التي تم إنشاؤها في هذا الملف. يمكن أن يكون ملف CSS المرتبط بشكل فردي بالوسائط = الطباعة أصغر بكثير لأن الصفحة ترث جميع الأنماط من جميع ملفات الوسائط ، لذلك ليست هناك حاجة لنسخ هذه الأنماط في ملف الوسائط المطبوعة.
الأنماط الوحيدة المطلوبة في ملف CSS للطباعة هي تلك التي تغير أو تضيف أنماط الصفحة للطباعة. بشكل عام ، هذا ليس أكثر من بعض الأنماط التي تحظر عرض DIVs التي تحتوي على رسومات ومحتوى التنقل ، واستبدال ملصق الجسم والعرض والإعدادات الفارغة لـ Div الرئيسية مع إعدادات مناسبة للمطبوعات.
تعمل هذه الخدعة لأن جميع ملفات CSS الوسائط وملفات CSS للطباعة يتم دمجها في نفس قواعد نمط المتتالية. لذلك ، فإن ترتيب ارتباط ملفات CSS هذه مهم للغاية. يجب وضع جميع روابط ملفات الوسائط قبل طباعة روابط ملفات الوسائط.
فيما يلي بعض النصائح حول استخدام ملفات CSS للطباعة:
إذا كنت تحظر عرض DIV ، فيجب عليك استخدام العرض: لا شيء بدلاً من الرؤية: مخفي.
لا تعتبر النقاط أو البوصات وحدات قياس صحيحة لعرض الشاشة ، لكنها وحدات قياس صحيحة للمطبوعات.
يجب أن يكون المحدد المستخدم في ملفات الطباعة هو نفس المحدد الذي تستخدمه في جميع ملفات الوسائط. على سبيل المثال ، إذا كنت تستخدم Div #Sidenav لتحديد divs مع المعرف كـ Sidenav في جميع ملفات الوسائط ، فقد لا يكون استخدام #Sidenav في ملفات الوسائط في طباعة قادرة على تحقيق هدفك بنجاح.
لا تنس أن تجبر صراحة استبدال إعلان القاعدة بأن التغييرات من ملف إلى آخر. على سبيل المثال ، إذا قمت بتعيين حشوة لعنصر في جميع ملفات الوسائط وترغب في إزالة هذا الحشو في المطبوعة ، فلا يكفي إضافة نمط يتجاهل إعلان الحشو في ملف الوسائط المطبوعة - يجب عليك تعيين الحشو بشكل صريح: 0PT لاستبدال الإعدادات السابقة.
إذا كنت تستخدم محرر رسومات مثل DreamWeaver ، فيمكنك معاينة تأثير الشاشة للصفحة التي تم إنشاؤها بدلاً من تأثير المطبوعة. لمعاينة نمط الطباعة في نافذة عرض DreamWeaver ، قم بتغيير الرابط إلى ملف CSS للطباعة إلى الوسائط = الشاشة. يتيح لك ذلك معاينة نمط CSS في ملف الوسائط المطبوعة. لا تنس تغيير واصف الوسائط مرة أخرى إلى الوسائط = طباعة قبل نشر صفحتك.
عندما تحتاج إلى تزويد الزائرين بصفحة ويب سهلة الطابعة ، لم تعد بحاجة إلى إنشاء إصدار منفصل من الصفحة الأصلية. إضافة رابط إلى ورقة أنماط CSS مع وسائل الإعلام = يمكن لوظائف الوسائط المطبوعة تحويل أي صفحة XHTML/CSS إلى صفحة صديقة للطابعة.