در این درس با چگونگی تعیین تصاویر و رنگ پس زمینه (Background) آشنا خواهید شد. رنگ و یا تصویر پس زمینه فاکتور بسیار مهمی در طراحی صفحات اچتمل بوده و استفاده از رنگ و یا تصویر مناسب نقشی تعیین کننده در خوانا بودن صفحات دارد.
رنگ متن و زمینه متناسب
انتخاب رنگ مناسب متون و پس زمینه به خوانا بودن متن کمک شایان توجهی خواهد کرد.
رنگ متن و زمینه نامتناسب
مثالی از انتخاب نامناسب رنگ متن و پس زمینه
تگ <body> دارای دو شناسه مهم برای تعیین رنگ و تصویر پس زمینه میباشد. پس زمینه صفحات اچتمل رنگ و یا یک تصویر میتواند باشد.
شناسه bgcolor برای رنگ پس زمینه (background color)شناسه bgcolor رنگ پس زمینه را تعیین میکند. مقدار رنگ پس زمینه میتواند نام رنگ (مثل red یا blue ) ، مقدار آن بر اساس استاندارد RGB و یا حتی مقدار هگزادسیمال (Hexadecimal) باشد.
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> |
در تمامی مثالهای بالا با کمک شناسه bgcolor رنگ زمینه صفحه "سیاه" تعیین میشود.
شناسه Background برای تصویر پس زمینه:برای تعیین تصویری که به عنوان پس زمینه صفحه نمایش داده میشود از شناسه background استفاده میشود.مقدار این شناسه URL یا آدر س تصویر (image) میباشد.اگر ابعاد تصویر کوچکتر از ابعاد صفحه مرورگر باشد، تصویر زمینه تکثیر خواهد شد تا حدی که تمام صفحه نمایش از تصویر زمینه پوشانده شود.
<body background="bg.gif"> <body background="http://www.khaterat.com/images/bg.gif"> |
در مثال اول از آدرس دهی نسبی (relative) برای تعیین URL یا آدرس تصویر استفاده شده و در واقع در این مثال فایل اچتمل و تصویر bg.gif باید در یک دایرکتوری قرار گیرند. در مقابل مثال دوم از آدرس دهی مطلق (absolute) برای تعیین آدرس تصویر استفاده شده است و همانطور که میدانید آدرس تصویر در هر نقطه از فضای وب میتواند باشد.
نکات مهم: اگر از تصاویر پس زمینه در صفحات اچتمل استفاده میکنید به نکات زیر توجه کنید :
شناسه های bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتیبانی نمیشوند و در واقع از رده خارج محسوب میشوند. در عوض کنسرسیوم W3C استفاده از Style Sheet ها را توصیه میکند و در واقع در نسخه 4 اچتمل و استاندارد جدید XHTML تمامی اطلاعات مربوط به نمایش یا presentation و layout باید در style sheet ها قرار گیرند.
استفاده مناسب از تصویر زمینه 1
در این مثال بدلیل استفاده از تصویر مناسب برای زمینه، نوشته های صفحه کاملا خوانا هستند.
استفاده مناسب از تصویر زمینه 2
در این مثال در اثر استفاده از تصویر مناسب برای زمینه، نوشته های صفحه کاملا خوانا هستند.
استفاده نامناسب از تصویر زمینه
در این مثال نوشته های صفحه خوانا نیستند.
استفاده از تصویر زمینه با آدرس مطلق
در این مثال آدرس تصویر زمینه بصورت مطلق و کامل آورده شده است.
تعیین رنگ زمینه با Style Sheet ها
در این مثال چگونگی استفاده از Style Sheet ها برای تعیین رنگ زمینه آورده شده است.