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