نسخه مخصوص چاپ به وسيله كدهاي Css

نسخه مخصوص چاپ به وسيله كدهاي

براي نمايش سايتها رسانه هاي گوناگوني وجود دارد كه هر يك خصوصيات خاص خود را دارد و شما به عنوان يك طراح وب يا مدير سايت مي توانيد نحوه نمايش سايت را در اين رسانه ها كنترل كنيد و از نمايش صحيح سايت در هر يك از اين رسانه ها مطمئن شويد .
يكي از اين رسانه ها چاپ است .  اگر شما صاحب سايت مرجعي هستيد و يا از سايت شما به دليل وجود مقالات مختلف ، بازديدكنندگان تمايل به در دست داشتن نسخه چاپ شده اي دارند قطعاً مي توانيد نسخه چاپ شده را خودتان طراحي نماييد .
طراحان و توسعه دهندگان وب روش هاي گوناگوني را براي ايجاد نسخه مناسب چاپ براي وب سايتها دارند .  با استفاده از برنامه هاي سرويس دهنده و يا با شيوه نامه هاي چاپ !  شما با استفاده از  CSS  مي توانيد نمايش سايت خود را در هر رسانه اي كنترل نماييد .
چاپ جزو رسانه هاي ايستا است و مطالب بعد از چاپ قابل تغيير نيستند و قطعاً در نسخه چاپ شده از سايت شما بخش هاي زيادي داريد كه معني خود را از دست مي دهند .
به عنوان مثال تبليغاتي كه صرفاً براي كليك كردن در نظر گرفته شده ، عناصر گرافيكي صفحه و تصاوير متحرك نمايش ، منوهاي مختلف سايت و يا هر عنصر گرافيكي صفحه و تصاوير متحرك نمايشي و يا هر عنصري كه مناسب چاپ نيستند لازم است كه از نسخه چاپ شده شما حذف شوند .  و شما مطالب مورد نظر را در يك ستون واحد با رنگ زمينه و اندازه فونتي مناسب داشته باشيد .
قبل از توضيح مراحل انجام كار ، لازم به ذكر است كه اگر سايت شما بر اساس استانداردهاي وب طراحي شده و بخش نمايشي توسط  CSS  از بخش ساختاري  Structural سايت جدا باشد شما با كمترين زحمت و در كوتاه ترين زمان مي توانيد نسخه مخصوص چاپ داشته باشيد .

مراحل كلي تهيه نسخه چاپي :
نمايش و دسته بندي بخش هاي مختلف سايت
جداكردن عناصر در برگيرنده مطالب
مخفي كردن عناصر و بخش هاي اضافي توسط  CSS
شكل دهي صفحه و تعيين فواصل ، فونت ها و رنگ هاي مناسب  CSS
كه در ادامه به شرح هر مورد مي پردازيم .

1)  نمايش و دسته بندي بخش هاي مختلف سايت :
شما بايد بخش هاي مختلف سايت را از لحاظ كاربرد و محتوا دسته بندي كنيد ما براي نمونه يك وبلاگ را در نظر مي گيريم .  به عنوان مثال وبلاگ بخش هايي مثل سرمتن  – منوي كناري  –  بخش هاي مختلف در بخش پاورقي دارد كه در بين هر مطلب هم يك كادر تبليغاتي وجود دارد .
شما لازم است كه به اين شكل دسته بندي كنيد و مواردي كه لازم است حذف شوند را مشخص كنيد .
در اين مثال عناصر گرافيكي بخش سرمتن  –  منوي كناري  –  بخش پاورقي و تبليغات در بين مطالب بايد حذف شوند .
2)  جداكردن عناصر در برگيرنده مطالب
در اين مرحله بايد از لحاظ ساختاري عناصر در برگيرنده مطالبتان را پيدا كنيد .  كه معمولاً يك  Div  يا  Table Cell  هستند .  همانطور كه گفته شد اگر طراحي سايت استاندارد باشد اين كار به آساني و به كمك نوار ابزار  Web Developer's Toolbar  مخصوص مرورگر  FireFox مي تواند انجام شود .
براي اين كار كافي است كه نوار ابزار مورد نظر را دريافت كرده و بر روي فاير فاكس نصب نماييد .  و با استفاده از قسمت  Outline  و با انتخاب گزينه  Outline block level elements تمامي عناصر بلوكي صفحه را مشاهده كنيد در آخر با استفاده از قسمت  Information  و گزينه  Display ID & Class Details  مي توانيد به راحتي  ID  يا  Class  عنصر مورد نظر را پيدا كنيد !
اگر براي طراحي از  CSS  استفاده نكرديد متاسفانه بايد وقت بيشتري بگذاريد و با مرور كردن  Source  صفحه قسمت هاي مورد نظر را پيدا كنيد .
3)  مخفي كردن عناصر بخش هاي اضافي توسط  CSS
الان كه به وضوح از مشخصات عنصر حاوي مطالب آگاهي داريد مي توانيد به سادگي توسط  CSS  بخش هاي ديگر را مخفي كنيد شما بايد تك تك عناصر اضافي را حذف كنيد :
#header, #sidemenu, # Footer, .ads {
Display: none;
}
اين براي حالتي بود كه شما از  CSS  استفاده كرده ايد و اگر غير از اين است كار شما كمي پيچيده تر مي شود و بايد با استفاده زيركانه از  Selector CSS ها عناصر مورد نظر را تحت تاثير قرار بدهيد :
مثلاً اين  Selector  دومين سلول جدول در اولين رديف از سومين جدول داخل صفحه را در حالي كه اولين و دومين سلول هاي جدول قابل نمايش و سومين سلول مخفي هستند تحت تاثير قرار مي دهد !
Html bode table+table+table tr td+td {
Visibility: visible;
}
body table+table+table te td+td+td {
html
visibility: hidden;
}

4)

حالا نوبت شكل دهي صفحه است

اگر اين موارد را در نظر بگيريد نسخه چاپ شده زيباتر و بهتر خواهد بود .  سعي كنيد براي نوشته ها عرض مشخصي تعيين كنيد مثلاً با در صد  80  درصد صفحه و يا با مقادير ثابت 5/6  اينچ تا متن شما از كناره هاي كاغذ چاپ فاصله بگيرند .
بهتر است رنگ پس زمينه مطالب سفيد و رنگ متنها مشكي باشد .  در صورت نياز اندازه فونت ها را كمي درشت تر كنيد .
الان نسخه چاپي شما براي سايت آماده است پس امتحان كنيد !