ترفندهای بهینه سازی قالب سایت برای Print گرفتن - قسمت 2



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه گذشته توضیحات مقدماتی در مورد print بهتون دادیم و شما رو با اون و مزایاش آشنا کردیم. بعد از اون روشهای مختلف قرار دادن کدهای CSS مربوط به پرینت رو بیان کردیم و برای هر کدام مثالی رو قرار دادیم. در این جلسه میخوایم مراحل بعدی رو بهتون توضیح بدیم.

2. تست کردن حالت پرینت

فرض کنید که شما میخواید برای اولین بار استایل مربوط به سایتتون رو قرار بدین. برای اینکار نیاز به تست دارید. بنظرتون این کار منطقی هست که برای تست کردن هر تغییر از یک پرینتر واقعی استفاده کنیم و کاغذ و جوهر و ... رو تلف کنیم؟ جواب این سوال مسلما نه است. خب پس راه هایی که برای این زمینه وجود داره رو با هم بررسی میکنیم. روشهایی که وجود داره بصورت زیر هستند:

  • متناسب با مرورگری که از اون استفاده میکنید، یک سند PDF به وجود بیارید
  • با زدن کلیدهای ترکیبی ctrl + p به حالت پیش نمایش پرینت برید و خروجی رو تست کنید
  • از Inspector استفاده کنید و کلا نحوه رندر شدن رو برابر با print قرار بدین. با اینکار کل محتویات مرورگر همانند خروجی پرینتر نمایش داده میشه.

درون مرورگرهای Opera و Chrome میتونین به راحتی Inspector رو باز کرده و وارد بخش مربوط به Rendering بشید و در اونجا حالت رندر شدن صفحه رو تغییر بدین. مسیر انجام اینکار بصورت زیر است:

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

مرحله بعد باید در بخش باز شده، تیک گزینه Emulate CSS Media رو بزنید و حالت Print رو انتخاب کنید. بصورت زیر:

با اینکار اگر برای حالت پرینت کدهایی رو قرار داده باشید، اعمال خواهند شد و خروجی تغییر میکنه و شبیه به خروجی پرینتر میشه. پس زمانی که قصد دارید حالت پرینت سایتتون رو تست کنید از یکی از این سه روش استفاده کنید. بنده روش 3 رو پیشنهاد میدم. بعد از اینکه تستهاتون رو انجام دادید، تیک گزینه Emulate CSS Media رو بردارید و اون رو به حالت اولیه برگردونید.

3. واحدهای مطلق یا Absolute

همونطور که میدونین ما خیلی از واحدهای مطلق برای سایتها و حالات Screen استفاده نمیکنیم ولی این واحدها برای حالت Print خیلی مورد استفاده قرار میگیرن و پرکاربرد هستند. در کدهای CSS مربوط به پرینت پیشنهاد میشه که از واحدهای مطلق همانند cm و mm و in و pt و pc استفاده کنید. برای مثال اگر بخواید برای یک section یک margin-bottom به اندازه 2 سانتی متر قرار بدیم، بصورت زیر عمل میکنیم:

به همین راحتی.

4. دستورهای مخصوص صفحه

با استفاده از دستور @page میتونین ویژگی های خاصی همانند ابعاد، جهت قرار گیری و حاشیه و ... رو برای صفحه مشخص کرد. برای مثال اگر بخواید برای همه صفحات سایتتون در هنگام پرینت شدن margin برابر با 1 سانتی متر قرار بدین، بصورت زیر عمل میکنیم:

در بالا همه صفحات رو مورد هدف قرار دادیم درصورتی که میتونیم صفحه اول یا صفحات خالی و یا ... رو نیز مورد هدف قرار بدین و استایلهای خاصی رو برای اونا مشخص کنیم. در اینجا میتونین بیشتر در این زمینه مطالعه کنید. شما حتی میتونین از این دستور برای ساخت کتاب با استفاده از CSS3 استفاده کنید.

در جلسات بعد با ادامه این مبحث در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.