طراحی سایت – آموزش html – پس زمینه

احتمالا تا به حال به این فکر افتادید که وقتی داریم طراحی سایت انجام میدیم چطور میشه رنگ پس زمینه صفحه رو تغییر بدیم یا عکسی به عنوان تصویر پس زمینه انتخاب کنیم! این کار به سادگی با دو صفت از دستور <body> ممکنه که در این بخش با اونا آشنا میشیم!

قبل از شروع بحث به یادآوری روش نامگذاری رنگ ها می پردازیم:
در زبان html سه روش برای انتخاب رنگ معرفی شده است:

1. استفاده از شماره رنگ در مبنای شانزده:
در این روش به هنگام طراحی سایت ترکیبی از سه رنگ اصلی قرمز ، سبز و آبی در مبنای شانزده بعد از یک علامت number sign `#` معرف رنگ مورد نظر خواهد بود.

#ff0000 —> RED
#00ff00 —> GREEN
#0000ff —> BLUE
#ffff00 —> YELLOW
#fb60f9 —> PURPLE

نگران نباشید نرم افزارهایی مثل فتوشاپ به راحتی به شما امکان انتخاب رنگ مورد نظر را بدون آشنایی با این روش می دهند کافی است که در پنجره Color Picker شماره رنگ دلخواه خود را کپی نمایید.

2.استفاده از شماره رنگ در مبنای ده:
در این روش نیز تمامی رنگ های دلخواه از ترکیب سه رنگ اصلی قرمز ، سبز و آبی ساخته خواهند شد البته نسبت ترکیب رنگ های ذکر شده به صورت ( rgb(x,y,z بیان میشود که x y z به ترتیب بیانگر رنگ های قرمز ، سبز و آبی خواهند بود ، که می توان اعداد 0 تا 255 را جایگزین آنها کرد.

rgb(255,0,0)     ---> RED
rgb(0,255,0)     ---> GREEN
rgb(0,0,255)     ---> BLUE

3.استفاده از اسامی رنگ های اصلی:
در این روش از نام رنگ مورد نظر استفاده می کنیم برای مطالعه بیشتر درباره این روش به بخش لینک های رنگی آموزش های html مراجعه کنید.

پس زمینه رنگی:
برای انتخاب رنگ پس زمینه طراحی سایت در زبان html از صفت bgcolor بهره می بریم. این صفت همانطور که قبلا بیان شد مربوط به دستور body است. برای استفاده از این صفت کافی است که رنگ مورد نظر را بر طبق یکی از روش های ذکر شده بعد از علامت مساوی قرار دهیم.

<body bgcolor="#dfac17">
<body bgcolor="rgb(241,175,100)">
<body bgcolor="red">

قرار دادن عکس به عنوان پس زمینه:
در صورتی که مایل باشید می توانید به جای انتخاب رنگ پس زمینه از یک عکس به عنوان تصویر پس زمینه طراحی سایت استفاده نمایید این کار به سادگی به کمک صفت background انجام میشود. در این روش باید بعد از مساوی ، آدرس عکس مورد نظر را طبق یکی از روش های آدرس دهی مشخص نمایید – روش های آدرس دهی در زبان html قبلا در طراحی سایت آموزش html عکس ها بیان شد.

<body background="blueSreen.jpg">
<body background="../images/bg.gif">
<body background="http://www.webfocus.ir/images/1.gif"

صفت bgproperties:
این صفت زمانی به کار برده میشود که از عکس به عنوان پس زمینه صفحه طراحی سایت استفاده نمایید ، در این صورت چناچه بخواهید عکس مورد نظر با  scroll – مرور عمودی صفحه – جابجا نشود و محل آن ثابت بماند باید مقدار آن را برابر fixed قرار دهید. این ویژگی در مرورگر firefox پشتیبانی نمی شود.

<body background="../images/bg.gif" bgproperties="fixed">

نکاتی که هنگام استفاده از تصویرپس زمینه باید رعایت شوند:

  1. توجه کنید که هرچه حجم تصویر انتخابی کمتر باشد بارگذاری – load – صفحه سریع تر انجام میشود.
  2. در صورتیکه عرض عکس انتخابی نسبت به وضوح -resolution – صفحه نمایش کمتر باشد تصویر زمینه به صورت tile نمایش داده میشود – تصویر مورد نظر تکرار خواهد شد.
  3. صفت background از bgcolor اولویت بالاتری دارد بدین معنا که اگر از هر دو صفت همزمان استفاده نمایید صفت background در نظر گرفته خواهد شد.

نویسنده: مجتبی کاظمی

شما ممکن است این را هم بپسندید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *