گروه آموزش طراحی سایت 07 فروردین 1393 بدون نظر 288 بازدید آموزش HTML
آموزش تگ کانوس (canvas) – قسمت چهارم (پایانی)

عکسها در کانواس canvas images

برای اضافه کردن یک عکس در عامل کانواس باید از متد زیر پیروی کندی.

Drw Image (image. x.y)

مثال زیر نحوه درج یک عکس در عامل کانواس را نشان میدهد.

</p>
<p dir="RTL" align="right">var c= document . get Elememt by ID( "my canvas");</p>
<p dir="RTL" align="right">Var   ctm= c.get contemt("2d");</p>
<p dir="RTL" align="right">Var   img = document. Get Element by ID ("scream") ,</p>
<p dir="RTL" align="right">Ctm. Draw Image ( img. 10/ 10);</p>
<p dir="RTL" align="right">

توضیحات:

خط شماره 3 شی ء img  را تگی با خصوصیت  id= scream  ایجاد خواهد کرد.

و در نهایت در خط شماره 4 شی ء img  را در کانواس ایجاد می کند.

جایگزین متن و عکس temt image Replxce. Ment موتورهای جستجو اصولا مطالب متنی را در اینترنت جستجو می کنند و نمی توانند موضوع و محتوای یک عکس را درک کنند. برای همین اکثر طراحان وب سعی بر استفاده متون کلیدی در متن صفحات وب دارند.

حتما می دانید که برای درج یک سربرگ در طراحی یک صفحه وب از تگ <h1>  استفاده می کنیم. پس بهتر است به این نکته نیز توجه خاصی داشته باشید که این سربرگها برای موتورهای جستجو مانندگوگل – یاهو – ماما و غیره کاملا سازمان دهی و برنامه ریزی شده است. و متنی که در تگ <h1>  در صفحه وب قرار گرفته شده است مسلما اهمیت بیشتری نسبت به بقیه متنها دارد.

خب تا اینجا فهمیدیم که باید متنهایی کلیدی و اصلی را در تگ <h1> قرار دهیم. حال اگر بخواهیم به جای متن “طراحی وب سایت ادینرم” در تگ <h1>  یک عکس گرافیکی را به جای این متن قرار دهیم کلیه خدمات اصولا موتورهای جستجو برای سایتمان را از دست خواهیم داد، چون اصلا موتورهای جستجو محتوای یک عکس را متوجه نمی شوند و نمی توانند تشخصی دهند که این عکس دارای چه مبتنی است. خب پس اگر بخواهیم از این عکس گرافیکی بعنوان سربرگ استفاده کنیم و خدمات موتورهای جستجو را نیز هماره داشته باشیم راه حل چیست؟

راه حل  temt image Replace ment است.

عکس مورد نظر خود را به عنوان پس زمینه تگ <h1> یا هر تگ مورد نظر تعیین کرده و سپس متن درون تگ را از کادر کاملا خارج کرده تا دیده نشود.

با این کار نه تنها متن از بین نرفته است بلکه عکس نیز قابل مشاهده است و خدمات موتورهای جستجو نیز همواره در دسترس خواهد بود.

به جای درج عکس توسط تگ img  از کد  زیر استفاده می کنیم.

</p>
<p dir="RTL"></h1> طراحی وب سایت ادینرم  <  h1   class= " logo" > html</p>
<p dir="RTL" align="right">CSS</p>
<p dir="RTL" align="right">. Logo{</p>
<p dir="RTL" align="right">Temt – indent : - 999 px;</p>
<p dir="RTL" align="right">Width: 100 px ;</p>
<p dir="RTL" align="right">Height: 100px ;</p>
<p dir="RTL" align="right">  no-repeat # FFF;("آدرس عکس" ) Dackground : url</p>
}

دیدگاه ها بسته شده اند.