طراحی وب سایت

 

 

در يک سند HTML برخي قسمت هاي صفحه مخصوص پرينت گرفتن مي باشند و بايد از style مرببراي هدف قرار دادن رسانه هاي مختلف بايد از صفت media در تگ <link> يا در تگ style استفاده کرد يا درون قواعد نوشته شده ي css ميتوان از قاعده ي @media براي نشان کردن رسانه هاي مختلف استفاده 

<link rel="stylesheet" type="text/css" media="print" href="myprint.css" />

 

<style type="text/css" media="print">....</style>

 

...

8

@media print {

9

 

10

}

11

</style>

انواع media

 

 

انواع مختلف media عبارت اند از

all : مخصوص تمامي deviceها

braille : استفاده براي deviceهاي مخصوص نابينايان

embossed : استفاده براي printer هاي مخصوص خط braille

handheld : استفاده براي device هاي جيبي و قابل حمل مثل tabletها

print : اين مقدار براي ارائه ي style به printer استفاده ميشود. (در مروگرها مي توان از قسمت print preview براي مشاهده ي يک صفحه در اين حالت استفاده کرد.)

projection : استفاده براي ويدئو پروژکتورها

screen : مخصوص نمايش در صفحه نمايش کامپيوتر

tv : استفاده براي تلويزيون

مقدار پيشفرض : all

فقط مقادير screen , print و all در مرورگرها به صورت گسترده پشتيباني مي شوند.

 

 

 

 

1

<h1> 7Lea : </h1>

2

<h3>Javascript and web design tutorials</h3>

3

<p>

4

Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus.consectetur adipiscing Vivamus sit amet. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus oare ante, ac egestas est ua sit amet arcu.

5

</p>

و کد css :

 

1

* {

2

  margin: 0;

3

  padding: 0;

4

  font-family: serif;

5

  }

6

  h3 {margin-left: 20px;}

7

  p {

8

  margin: 10px 30px;

9

  width: 500px;

10

  text-align: justify;

11

  }

حال کد رو در مرورگر اجرا کنيد، و سپس دکمه ي CTRL+P رو بزنيد تا به حالت print preview برويد، خواهيد ديد که دقيقا متون در حالت print همانند حالت screen هست.

 

حال ما ميخواهيم براي حالت print يک استايل متفاوت بنويسم

کد زير رو به کدهاي css اضافه کنيد :

 

 

@media print {

2

  * {

 

    font: 14px tahoma;

4

    letter-spacing: 2px;

5

  }

6

}

نتيجه print-preview

 

اگر دقت کرده باشيد، بعضي مواقع در هنگام پرينت يک صفحه html لينک ها غير فعال مي شوند، و ديگر معلوم نيست که اين متن، به کدام صفحه لينک شده است، پس حتما راهي براي نمايش دادن آدرس لينک ها باشد، در css خصوصيتي به نام content وجود دارد، که از ان براي اضافه کردن متني به ابتدا يا انتهاي متن موجود استفاده مي شود.

مثال کد html

 

 

<h1><a href="http://www.7lea.com">7Lea : </a></h1>

2

<h3>Javascript and web design tutorials</h3>

کد css :

 

1a:after {

 

    content: "(" attr(href) ")";

کد بالا تعيين مي کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لينک را قرار دهد