۷) آموزش مقدمات HTML - قاب بندی + ارتباط پیوند بین قابها

به نام خدا  

فهرست درس های قبلی 

بخش اول: قاب بندی  

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

طبق شکل سه تا صفحه ساده درست کن!  

 

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

حالا میریم سراغ صفحه ی اصلی، اگه میخوای سه تا صفحه ی قبلی رو تو صفحه اصلی قرار بدی، باید طبق شکل از تگ ِ FrameSet به جای تگ ِ Body استفاده کنی! 

برای هر قاب، تگ Frame رو تایپ کن و آدرس صفحه ی فرعی رو بعد از ویژگی Source بزار! 

 

با ویژگی ِ rows می تونی تعیین کنی که قابها به صورت ردیفی یا افقی قرار بگیرن، اگه به جاش cols بزاری، قابها به صورت ستونی یا عمودی نشون داده میشن!  

جلوی ویژگی ِ rows، سه تا درصد تایپ شده که میتونی باهاش تعیین کنی که هر قاب چند درصد از کل ِ صفحه رو اشغال کنه، بین درصد ها باید , بزاری!  

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

حالا یه بار به جای درصد و عدد، اندازه ی یکی از قابها رو با ستاره* تعیین کن!  بعدش صفحه رو بزرگ و کوچیک کن و ببین چی میشه!        (Other Space)

ویژگی ِ Border و Bordercolor هم، به ترتیب پهنای مرز بین قابها، و رنگ مرز بین قابها رو تعیین می کنن! 

امتحان کن و ببین مساوی قرار دادن border با صفر، چه حاصلی داره! 

 نکته: Frame، نیازی به تگ پایانی نداره!   (p - br ) 

بخش دوم: ارتباط پیوند به قاب مورد نظر   

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

 

 

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

همونطور که میبینی اینبار با استفاده از ویژگی ِ Cols، قابها ستونی شدن!

و مهمترین تفاوت این صفحه با صفحه ی قاب بندی شده ی قبلی اینه که با استفاده از ویژگی ِ Name برای هر کدوم از قاب ها یه اسم انتخاب شده!  

حالا سه تا صفحه ی دیگه مرتبط با گزینه های Menu درست کن!     

مکانیک

   

گوگل 

   

آدرس 

 

برو سراغ ِ ویرایش صفحه ی Menu و بعدش دونه دونه، آدرس این سه صفحه رو به گزینه های Menu لینک کن!  

 

حالا اگه صفحه ی اصلی رو باز کنی و مثلا روی گزینه ی Mechanic کلیک کنی، صفحه ی مرتبط با Mechanic توی همون قاب باز میشه!  

 

باید کاری کنی که وقتی کسی روی Mechanic کلیک کرد، صفحه ی مرتبط با Mechanic، در قاب سمت راست یا همون قاب ِ Welcome، واسش باز شه! 

برای این کار باید بازم بری سراغ ویرایش صفحه ی Menu و اینبار ویژگی ِ Target رو به تگِ پیوند اضافه کنی! 

   

و جلوی Target اسم همون صفحه ای رو تایپ کنی که میخوای صفحات لینک شده توی اون نمایش داده بشن! 

حالا موقشه که بری سراغ صفحه ی اصلی و تغییرات رو مشاهده کنی! 

اگه روی لینک های موجود در قاب ِ Menu کلیک کنی، پیوندش در قاب welcome باز میشه!  

  

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

 

تمرین: در تگ ِ Frame سه ویژگی ِ زیر رو امتحان کن و ببین چی میشه!  

Marginwidth و marginheight رو مساوی با اعدادی بزرگتر از 1000 قرار بده! (البته کمتر از 1000 هم میتونی)  

Scrolling رو مساوی با no قرار بده!

NoResize رو هم همینجوری بزارش!