صفحه اصلی - فروم پرشین سون

بازگشت   PersianSeven Forums > سخت افزار, نرم افزار و برنامه نویسی | Web Design & Programming > گفتگو و آموزش گرافیک > چاپ و طراحی
پورتال پرشين راهنمایی جــوایز IShop وبلاگ پرشین تماس با ما


ارسال مبحث جدید  پاسخ
 
LinkBack ابزارهای موضوع جستجو این تاپیک حالت نمایش
قدیمی 10-22-2013   #1 (لينک اين پست)
مشاور ارشد سایت
 
آواتار pure love
 
تاريخ عضويت: Oct 2013
محل سكونت: l̡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡l̡
سن: 26
اسم واقعی: مش احمد
پست ها: 36,999
تشكرها (از ديگران): 3,978
تشكر شده 9,443 بار در 4,136 پست
چوق (ثروتمند شماره 7): 14,930,929
پاداش داده شده 711 مرتبه
تاکنون 85 مرتبه با چوق تشکر کرده
تشکر شده با چوق 342 مرتبه
فعاليت Longevity
0/20 9/20
Today پست ها
ssss36999

ويترين جوايز


عکسهای خریداری شده
گلشیفته فراهانی قلیان جانی دپ
کیانو ریوز تام کروز آنجلینا جولی
Thumbs up ترفندهای چاپ در CSS - بخش دوم

همانطور که در بخش اول نکات و ترفندهای چاپ در CSS مشاهده کردید، نیازی به ایجاد صفحه جداگانه برای بهینه سازی نسخه چاپی سایت نبوده و با رعایت برخی نکات و استفاده از تعدادی ترفند، می توانیم صفحات سایت را همزمان برای نمایشگر و چاپگر پیاده سازی نماییم.
در ادامه تعدادی دیگر از این نکات و ترفندها را با هم مرور خواهیم کرد.
نمایش لینک ها در زمان چاپ
هیچ روشی (البته تا لحظه نگارش این نوشته) برای ارتباط کاربر با لینک های چاپ شده روی کاغذ وجود ندارد. با استفاده از after و سایر دستورات سی اس اس می توانیم مقصد لینک ها را در نسخه چاپ شده نمایش دهیم. همچنین در صورت تعدد لینک ها، می توانیم فقط مقصد لینک های خارجی را به محتویات چاپی اضافه کنیم.
در صورتیکه از روش آدرس دهی نسبی (Relative) برای لینک های داخلی وب سایت خود استفاده کرده باشید، با کمک گرفتن از دستورات زیر می توانید آدرس مقصد لینک های خارجی را در ادامه آن نمایش دهید:
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
به عنوان مثال اگر عبارتی به شکل زیر وجود داشته باشد:
<p>You’ve explored this <a href="/blog">site</a>;
now it’s time to <a href="http://www.webplatform.org/">read other
Web development documentation</a>.</p>
خروجی آن چیزی شبیه به تصویر زیر خواهد بود:
بهینه سازی نسخه چاپی, چاپ صفحه سایت

البته داخل یک صفحه ممکن است لینک هایی به یک نقطه از همان صفحه وجود داشته باشد (Anchor links). با روش زیر می توانیم این نوع لینک ها را از لیست لینکهای چاپی حذف کنیم:
article a[href^="#"]:after {
content: "";
}
همچنین با استفاده از دستورات CSS4 می توانیم تصاویری که دارای لینک هستند را مانند قسمت قبل از لیست خارج کنیم:
$a:after > img {
content: "";
}
و البته CSS4 کار ما را در موارد فوق (انتخاب لینک های خارجی) بسیار آسان خواهد کرد:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}
درج آدرس صفحه به وسیله کدهای QR
یکی از موارد جالبی که می توانیم در نسخه چاپی سایت اضافه کنیم، نمایش آدرس صفحه با استفاده از QR کدها است.
خوشبختانه Chart API گوگل تبدیل آدرس به کدهای QR را بسیار آسان کرده است. برای این منظور، باید چهار ورودی به API ارسال کنیم:
- نوع خروجی (که در اینجا QR است)
- ابعاد تصویر خروجی
- آدرسی که باید به کد تبدیل شود
- سیستم یا نوع حروف (character encoding)
به عنوان مثال اگر هدر یک سایت به صورت زیر باشد:
<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h2>
</header>
ابتدا با استفاده از سی اس اس به اندازه کافی برای درج QR فضا اختصاص می دهیم:
header h1 {
margin-right: 200px;
margin-bottom: 2rem;
line-height: 1.5;
}
سپس با استفاده از دستورات زیر، کد QR را به نسخه چاپی اضافه می کنیم:
@media print {
header h1:after {
content: url([تنها اعضای سايت ميتوانند لينکها را مشاهده كنند برای عضويت در سايت اينجا كليک كنيد]
chart?cht=qr&chs=150x150&chl=
[تنها اعضای سايت ميتوانند لينکها را مشاهده كنند برای عضويت در سايت اينجا كليک كنيد]
position: absolute;
right: 0;
top: 0;
}
}
خروجی چیزی شبیه تصویر زیر خواهد بود:
بهینه سازی نسخه چاپی, چاپ صفحه سایت

با استفاده از دستورات بالا، طراح سایت باید برای هر صفحه از سایت به صورت دستی آدرس آن را وارد کند. اگر سرور شما از زبان PHP پشتیبانی می کند، با استفاده از آرایه SERVER می توانید آدرس هر صفحه از سایت را به صورت خودکار در دستورات بالا قرار دهید.
@media print {
h1:after {
content: url([تنها اعضای سايت ميتوانند لينکها را مشاهده كنند برای عضويت در سايت اينجا كليک كنيد]
/chart?cht=qr&chs=150x150&chl=http://<?php echo
$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
?>&choe=UTF-8);

position: absolute;
right: 0;
top: 0;
}
}
و اگر سایت شما به کمک وردپرس راه اندازی شده است، دستورات زیر می تواند به شما کمک کند:
@media print {
h1:after {
content: url([تنها اعضای سايت ميتوانند لينکها را مشاهده كنند برای عضويت در سايت اينجا كليک كنيد]
/chart?cht=qr&chs=150x150&chl=http://
&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
فیلترهای CSS3 و بهینه سازی تصاویر
مرورگرها روش های مختلفی برای بهبود تصاویر در زمان چاپ دارند (مخصوصا تصاویر با محتویات سفید در زمینه مشکی).
بهینه سازی نسخه چاپی, چاپ صفحه سایت

در صورتی که بخواهیم چاپ این نوع تصاویر را مدیریت کنیم، یکی از روش ها این است که هر دو نسخه تصویر را در سایت قرار داده و با استفاده از سی اس اس در زمان چاپ، نسخه مخصوص آن را نمایش دهیم. اما با این روش حجم صفحات سایت زیاد می شود.
یکی از بهترین انتخاب ها، استفاده از فیلترهای سی اس اس برای معکوس کردن رنگ این نوع تصاویر است.
@media print {
header {
background: none;
color: #000;
}

header img {
filter: url('/inverse.svg#negative');
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
با استفاده از این فیلتر، رنگ ها معکوس می شوند. متاسفانه تمام مرورگرها از این فیلتر پشتیبانی نمی کنند. به عنوان مثال برای فایرفاکس باید یک فایل SVG جداگانه ایجاد شود.
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>
اپرا درباره رنگ ها و فیلتر feColorMatrix توضیحاتی داده که مطالعه آن خالی از لطف نخواهد بود.
و این هم خروجی نهایی تصویر فوق در هر دو حالت (تصویر ساده یا تصویر PNG شفاف):
بهینه سازی نسخه چاپی, چاپ صفحه سایت

نکته: نکات و ترفندهایی که در این دو قسمت بیان شد، مواردی بود که در اکثر وب سایت ها مفید خواهند بود. بدون شک تلفیق نسخه نمایشی و چاپی سایت در نهایت موجب رضایت بازدیدکننده و در نتیجه می تواند باعث افزایش بازدید سایت شود.


pure love آفلاین است   پاسخ به نقل قول چوق/پاداش
پاسخ

به اشتراک بگذارید

برچسب ها
css, چاپ, بخش, ترفندهای, دوم, در


كاربران در حال ديدن تاپیک: 1 (0 عضو و 1 مهمان)
 
ابزارهای موضوع جستجو این تاپیک
جستجو این تاپیک:

جستجوی پیشرفته
حالت نمایش

مجوزهای ارسال و ویرایش
شما نمیتوانید موضوع جدید ارسال کنید
شما نمیتوانید به پست ها پاسخ دهید
شما نمیتوانید فایل پیوست ضمیمه کنید
شما نمیتوانید ارسال های خود را ویرایش کنید

BB code : فعال
شکلکها : فعال
[IMG] : فعال
HTML : غیر فعال
Trackbacks are فعال
Pingbacks are فعال
Refbacks are فعال

خط مشی بانک مرکزی
جهت ارسال تاپیک جدید: 100 چوق
جهت ارسال پست: 50 چوق
به ازای هر کارکتر در پست : 1 چوق


زمان محلی شما با تنظیم GMT +3.5 هم اکنون 12:13 AM میباشد.

Powered by vBulletin .
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.