انجمن برنامه نویس

خبر : آموزش افزودن قابلیت پرینت در طراحی سایت

شروع موضوع توسط minajafari ‏30/9/18 در انجمن تازه‌های دنیای کامپیوتر ، فناوری و برنامه نویسی

گنجینه های
برنامه نویسی
فیلم های آموزشی
زبان های برنامه نویسی
فیلم های آموزشی
پروژه محور C#
فیلم های آموزشی
برنامه نویسی اندروید
فیلم های آموزشی
طراحی سایت
فیلم های آموزشی
برنامه نویسی پایه
گنجینه برنامه نویسی C# آموزش برنامه نویسی C سیستم مدیریت بانک آموزش اندروید - مقدماتی آموزش زبان HTML اصول و مبانی برنامه نویسی
گنجینه آموزش ASP .Net آموزش برنامه نویسی C++‎ پیاده سازی مدیریت آتلیه آموزش اندروید - تکمیلی آموزش زبان CSS آموزش الگوریتم و فلوچارت
گنجینه برنامه نویسی PHP آموزش برنامه نویسی C# پیاده سازی سیستم هتلداری آموزش اندروید - پیشرفته آموزش زبان Java Script آموزش تبدیل فلوچارت به کد
گنجینه آموزش طراحی وب آموزش برنامه نویسی جاوا شبیه سازی دستگاه عابربانک آموزش ساخت لیست ایمیل آموزش زبان jQury برنامه نویسی اسمال بیسیک
گنجینه برنامه نویسی متلب آموزش برنامه نویسی PHP پیاده سازی مدیریت آموزشگاه آموزش ساخت گالری تصاویر آموزش زبان XML آموزش برنامه نویسی اسمبلی
گنجینه برنامه نویسی اندروید آموزش برنامه نویسی پایتون پیاده سازی سیستم صدور بلیت آموزش کنترل ربات با اندروید آموزش طراحی Responsive طراحی سایت ویژه کودکان
گنجینه برنامه نویسی VB .Net آموزش برنامه نویسی اندروید پیاده سازی سیستم نوبت دهی آموزش ارتباط با دیتابیس سرور ساخت سایت خبری کدنویسی سریع با Emmet
گنجینه زبان های برنامه نویسی آموزش برنامه نویسی زبان R سیستم حسابداری و انبارداری زبان بیسیک فور اندروید (B4A) ساخت سایت فروشگاه آموزش کار با پایگاه داده
  1. minajafari
    karbar Rank

    تاریخ عضویت:
    ‏28/11/17
    ارسال ها:
    106
    تشکر شده:
    1
    امتیاز دستاورد:
    22
    جنسیت:
    زن
    آموزش افزودن قابلیت پرینت در طراحی سایت:همانطور که در مطلب قبل به آن اشاره کردیم، فاکتورهای بسیار زیادی در موفقیت طراحی سایت شما دخیلند، اما در تمامی این موارد یک نقطه اشتراک وجود دارد و آن توجه هرچه بیشتر به نیازهای کاربران است.در این بخش با نحوه افزودن قابلیت پرینت خواهید آموخت که چگونه به کاربران خود اجازه بدهید تا مطالب مفید و مورد نظرشان در وب سایت شما را به طور فیزیکی و در برگه به همراه داشته باشند.با این کار شما یک گام بزرگ در جهت برطرف کردن نیاز کاربران و در ادامه سرازیر کردن شمار بیشتری از آنان برداشته اید.


    [​IMG]

    چگونگی افزودن قابلیت پرینت به وب سایت
    بسیاری از کاربران از نحوه پرینت گرفتن به وسیله امکانات پیش فرض مرورگر خود بی اطلاعند و یا اینکه دکمه چاپ پیش فرض موجود در مرورگر، عناصر اضافی دیگر (منوها، تبلیغات و…) را نیز در کنار مطلب مورد نظر آن ها در نسخه پرینت نشان می دهد.
    این جایی است که شما باید با قرار دادن امکان افزودن قابلیت پرینت محتوای اصلی به تنهایی، کاربران خود را در سطح بالایی ار رضایت و خشنودی نگه دارید.در نظر داشته باشید که این کار بوسیله کدهای CSS و جاوااسکریپت میسر خواهد شد.
    اگرچه روش های گوناگونی برای پیاده سازی این امکان وجود دارد، اما ما به ذکر یک روش کاربردی بسنده خواهیم کرد.

    روشی مناسب برای افزودن قابلیت پرینت
    روش اول : با استفاده از این روش قسمت های زائدی را که نمی خواهید در نسخه چاپی وجود داشته باشد را شناسایی و در یک فایل CSS معرفی و حذف خواهید کرد.در ادامه قسمت های باقی مانده را در همان فایل CSS برای چاپ با ظاهر دلخواه در افزودن قابلیت پرینت، استایل دهی می کنیم.


    [​IMG]

    مرحله بعد به کدهای جاوااسکریپت مربوط می شود که به وسیله آن ها محتوا مورد نظر برای چاپ ارسال می شوند.
    فایل CSS ذکر شده را به روش زیر ایجاد می کنیم.

    قدم اول افزودن قابلیت پرینت
    نخست می بایست استایل های مورد نظر خود بر روی نسخه چاپی را در یک فایل CSS جداگانه نوشته، سپس به بخش header کدهای صفحه وب خود آن را متصل کنید.

    <link rel=”stylesheet” href=”Print.css” type=”text/css” media=”print”>

    پارامتر media=”print” در این دستور برای افزودن قابلیت پرینت حائز اهمیت است.این پارامتر به صفحه وب سایت اشاره می کند که فایل CSS ضمیمه شده تنها برای استایل دهی عناصر نسخه پرینت بوده و برای دیگر موارد باید از استایل های اصلی صفحه استفاده شود.


    [​IMG]

    دقت کنید برای جدا کردن عناصری که نمی خواهید در نسخه پرینت نشان داده شوند، باید به کمکid و یا class مربوط به آن عنصر، با نوشتن دستور زیر آن را در صفحه پرینت غیرقابل مشاهده کنید.دستورات ذکر شده در فایل CSS مربوط به پرینت نوشته می شوند:

    1 .adverise {
    2 display: none;
    3 }

    کد بالا همه عناصری دارای ویژگی class=”adverise ” را مخفی می کند.

    قدم دوم افزودن قابلیت پرینت
    قدم بعد به کدهای HTML اختصاص دارد.
    حال دکمه ای مورد نیاز است تا با اشاره کردن بر روی آن ماحصل تلاش شما برای افزودن قابلیت پرینت تولید شود، یعنی ایجاد نسخه چاپی


    [​IMG]

    کد پایین برای این کار مورد استفاده قرار می گیرد.

    <a href=”javascript:window.print()”>چاپ این صفحه!</a>

    پیشنهاد می شود برای این قسمت یک آیکون شکیل اختصاص دهید تا کاربران تنها با کلیک بر روی آن نسخه چاپی مورد نظرشان را در اختیار داشته باشند.