۸) آموزش مقدمات HTML - ویژگیهای Body + نقشه تصویری + اجزای متحرک

به نام خدا  

نگاهی به درس های قبلی

بخش اول: برخی از ویژگیهای تگ Body   

برای تغییر  ِ رنگ زمینه ی صفحه، از ویژگی BackGroundCOLOR و برای تغییر رنگ تمام متن های موجود در صفحه از ویژگی ِ Text در تگ Body استفاده کن!   

 

حالا یه بار هم به جای انتخاب رنگ واسه زمینه، با استفاده از ویژگی ِ BackGround، از تصویر برای پوشاندن ِ زمینه استفاده کن! 

بهتره واسه زمینه از یه تصویر کوچیک و کم حجم استفاده کنی، اگه یه تصویر کوچیک بزاری، اون تصویر اونقدر تکثیر میشه که تمام زمینه ی صحفهتو پر کنه!   

 

با ویژگی ِ TopMargin می تونی بالا و پایین صفحه، حاشیه بزاری! 

و با ویژگی ِ LeftMargin می تونی چپ و راست صفحه حاشیه بزاری!  

در حالت پیش فرض! 

اگه یه کلمه رو به یه صفحه ی دیگه لینک کنی، رنگ اون کلمه آبی میشه، و وقتی روش یه بار کلیک می کنی، رنگش بنفش میشه! 

حالا برای تغییر این رنگ ها از ویژگیهای زیر بهره ببر!

ویژگی ِ Link، رنگ لینک هایی رو تعیین میکنه که هنوز روشون کلیک نشده!

ویژگی ِ Active Link، رنگ لینک هایی رو تعیین میکنه که روشون کلیک شده و فعال شدن!

ویژگی ِ Visited Link، رنگ لینک هایی رو تعیین میکنه که بازدید از اونها تموم شده!  

بخش دوم: نقشه ی تصویری 

برای ایجاد Image Map، تگ Img رو تایپ کن و ویژگی ِ usemap رو هم توش بزار!

جلوی usemap یه اسم واسه تصویر درج کن!  یادت نره که قبل از اسم حتما باید یه # بزاری! 

حالا برو سراغ تگ ِ map ، ویژگی ِ name رو واسه این تگ بزار و جلوش همون اسمی رو تایپ کن که واسه تصویر انتخاب کردی، با این اسم بین تگ img و تگ ِ map ارتباط برقرار میشه! 

بعدش هم به اندازه ای که لازمه از تگ ِ Area برای لینک کردن قسمت هایی از تصویر استفاده کن!  

 

با ویژگی ِ shape باید شکل هندسی ِ تصویر رو مشخص کنی!   اگه دایره هست جلوش Circle بزار، اگه چهار ضلعیه جلوش rectangle بزار و اگه چند ضلعیه، جلوش polygon بزار!  

جلوی ویژگی ِ coords، باید مختصات تصویر رو وارد کنی!  مثلا وقتی shape، دایره هست، اول باید مختصات مرکز دایره رو تایپ کنی و بعدش هم اندازه ی شعاع دایره رو!

وقتی shape، چند ضلعی هست، از مختصات یکی از راس ها شروع کن و دونه دونه و به ترتیب مختصات بقیه راس ها رو تایپ کن!    

مختصات ِ نقاط مورد نظرمونو چجوری پیدا کنیم!؟ هویجوری که نمیشه! 

اول در برنامه ی IE، از منوی View، جلوی Status Bar یه تیک بزن!  

 

بعد تگ ِ اول لینک رو قبل از تگ img تایپ کن! (جلوی href یه مساوی بزاری کافیه!)

بعدش هم ویژگی ِ isMap رو به تگ ِ img اضافه کن! 

حالا ماوس رو هرجای تصویر که نگه داری، مختصات اون نقطه از تصویر در  

Status Bar نشون داده میشه! 

و هر جا که رو تصویر کلیک کنی، مختصات اون نقطه جلوی Address Bar ثبت میشه!  

 

یادت نره که بعد از پیدا کردن مختصات ِ مورد نظر، تگ ِ اول لینک و ismap رو برداری! 

همه شکل ها که دایره و چهار ضلعی نیستن! 

برای ایجاد یه Image map روی شکل های پیچیده تر باید شکل رو تو ذهنت به شکل های ساده تقسیم کنی، مثلا برای لینک کردن تصویر یه قلب، باید طبق شکل اون رو تو ذهنت به دو تا دایره و یه پنج ضلعی تقسیم کنی! (سه شکل ساده) 

 

و بعد با سه تا تگ ِ Area این سه شکل ساده رو تعریف کنی تا شکل قلب حاصل بشه! 

همونطور که میبینی هر سه شکل ساده به یک صفحه ی واحد لینک شدن که در مجموع هر کس هر جای قلب که کلیک کرد، بره تو اون صفحه!  

بخش سوم: متن متحرک 

برای نوشتن یه متن متحرک طبق شکل از تگ ِ Marquee استفاده کن! 

 

ویژگی ِ Behavior وقتی برابر با Alternate باشه، متن هی میره و برمیگرده، یعنی مدام خودشو به در و دیوار میزنه!

وقتی Behavior برابر با Scroll باشه، متن از یه طرف درمیاد و از طرف دیگه محو میشه!

و وقتی Behavior برابر با Slide باشه، متن از یه طرف میاد و در طرف دیگه وایمیسه و دیگه حرکت نمیکنه! 

ویژگی loop تعیین میکنه  که حرکت چند بار صورت بگیره!  اگه خواستی تعدادش رو بی نهایت کنی به جای عدد، infinite رو تایپ کن! 

ویژگی ِ Direction، جهت حرکت متن رو تعیین میکنه!  Right or Left))

ویژگی ِ ScrollAmount اندازه ی قدم برداشتن متن رو مشخص میکنه! مثلا اگه برابر با یک قرارش بدی، متن یه پیکسل یه پیکسل حرکت میکنه، مسلما وقتی قدم ها کوچولو برداشته بشه، سرعت کم میشه!    

ویژگی ِ BGcolor هم رنگ ِ BackGround رو تعیین میکنه! 

حالا طبق شکل، بین دو تا تگ ِ Marquee، یه تصویر بزار! 

تمرین: تصویر زیر رو Save کن و بعد باهاش یه Img Map بساز! 

 

بعد همین تصویر رو متحرک کن! 

در انتها هم امتحان کن و ببین وقتی Behavior، مساوی با Slide هست، تغییر میزان Loop چه تاثیری داره!؟ 

یادآوری: درس بعدی، درس ِ آخره! اگه تا حالا تمرین نکردی، خوب تمرین کن تا برای امتحان تستی و عملی آماده بشی!