تا %60 تخفیف خرید برای 7 نفر با صدور مدرک فقط تا
00 00 00

آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet

فرهاد خانلری
فرهاد خانلری
6 پسند
1067 بازدید
3 نظر
64 ماه قبل

فریم ها در HTML

با سلام ، همانطور که در قسمت اول و دوم در مورد تگ Body صحبت شد دیدیم که بدنه یک قالب را این تگ به عهده داره و تمامی تگ های دیگه باید داخل این تگ نوشته بشن اما به جای این تگ شما میتوانید از تگ frameset استفاده کنید ، ضمناً توجه کنید نمی توانید به صورت همزمان از تگ های frameset و body استفاده کنید.در ادامه این تگ رو بیشتر توضیح خواهم داد.

با کمک فريمها یا Frames شما میتوانید نمایش همزمان بیش از یک پنجره را در مرورگر فعال کنید ، هر صفحه در مرورگر به نام یک فريم frame معرفی میشود و اگر قرار است چند فریم با هم در یک صفحه باشند آنها کاملا مستقل از هم هستند.

تگframeset :

این تگ میاد یک صفحه HTML رو به چند صفحه تقسیم میکنه یا به عبارتی دیگه برای ایجاد صفحات چند گانه مورد استفاده قرار میگیره که داخل هر کدوم یک صفحه رو دیگه رو Load میکنه و از صفت های معروفش میتونیم به rows و cols اشاره کنیم: همچنین صفت های border , bordercolor,frameborder از دیگر صفت های این تگ هستند که در ادامه به معرفی هر کدوم میپردازیم.

  • rows : جهت ایجاد frame های افقی استفاده میشه این صفت میتونه معین کنه تعداد و اندازه هر فریم چقدر میتونه باشه که این مقدار ها با درصد و پیکسل مشخص میشوند.
  • cols : جهت ایجاد frame های عمودی استفاده میشه این صفت میتونه معین کنه تعداد و اندازه هر فریم چقدر میتونه باشه که این مقدار ها با درصد و پیکسل مشخص میشوند.
  • <html>
    <head>
    <title>Test web Page</title>
    </head>
    <frameset rows="50%,50%" cols="50%,50%">
    	<frame src="www.linux.tosinso.com"/>
    	<frame src="www.web.tosinso.com"/>
        <frame src="www.icdl.tosinso.com"/>
    	<frame src="www.network.tosinso.com"/>
    </frameset>
    </html>
    

کد فوق میگه Row که ردیف هست دو تا 50 درصد داره یعنی صفحه رو از سمت ردیف به دو قسمت مساوی تقسیم کن همچنین در Col این تقسیم رو مشاهده میکنیم پس نتیجه میگیریم کد فوق صفحه رو به چهار قسمت مساوی داره تقسیم میکنه که شما میتونید چهار تا Frame رو داخل این کد ببینید که هر کدوم میتونند به یک صفحه مجزا لینک شوند که این Frame ها یک Attribute به نام SRC دارن که در این تگ باید اجباراً ازشون استفاده کنید ،این روش برای سایت هایی که یک کاربر میخواد همزمان مشاهده کنه خیلی استفاده میشه و به جای اینکه کاربر چهارتا صفحه رو باز کنه همه رو میتونه دریک صفحه هم زمان ببینه فقط یادتون باشه باز شدن این پنجره خیلی در سرعت شما تاثیر داره چون عملاً چهار صفحه رو با هم دارید باز میکنید، علاوه بر سرعت باز شدن صفحات که یک بدی محسوب میشه یادتون باشه موتور هی جستجو این صفحات رو برای شما Index نمیکنند و نمیتونید این frame ها رو در موتور های جستجو ببینید ، همچنین در پرینت گرفتن از صفحه همیشه با چالش روبرو خواهید بود و معمولاً حرفه ای ها هیچ وقت از این تگ استفاده نمیکنند اما چرا من اینجا در itpro دارم اینا رو میگم ؟ فقط به خاطر اینه که مطلبی از HTML ناگفته باقی نمونه و اگر جایی در خصوص فریم ها خوندید زیاد تعجب نکنید ، ضمناً کد فوق رو میتونید به صورت زیر هم تایپ کنید که این نشون میده ما میتونیم چندین Frameset رو صدا بزنیم که هر کدومشون از Frame های جداگانه ای تشکیل بدن یا یک frame رو مجداً به چندین صفحه جداگانه تخصیص دهیم.

<html>
<head>
<title>Test web Page</title>
</head>
<frameset rows="50%,50%">
	<frameset cols="50%,50%">
	<frame src="http://www.linux.tosinso.com"/>
	<frame src="http://www.web.tosinso.com"/>
    </frameset>
	<frameset cols="50%,50%">
    <frame src="http://www.icdl.tosinso.com"/>
	<frame src="http://www.network.tosinso.com"/>
	</frameset>
</frameset>
</html>

یک نمونه کد دیگه که سادگی اون میتونه کمک به آموزش باشه کد زیر هست که در ادامه اون تصویری از خروجی کد رو میتونید مشاهده کنید:

<body>
<frameset cols="20%, 80%">
  <frameset rows="100, 200">
      <frame src="frame1.html">
      <frame src="frame2.gif">
  </frameset>
  <frame src="frame3.html">
</body>

Frame ها در HTML

یادتون باشه که تگ frame در HTML5 پشتیبانی نمیشه و از مهمترین خصوصیاتی یا attribute هایی که این تگ در HTML4 داره میتونیم به موارد زیر اشاره کنیم:

  • name : نامی برای فریم مشخص می کند ، که البته باید یونیک یا منحصر به فرد باشد که میتوانید name را به عنوان پنجره هدف لینک ها نام گزاری کنید.
  • src : یا همان سورس یا آدرس مقصدی که قرار است در فریم نمایش داده شود البته مثال های بالا اکثراً این خصوصیت را معرفی کرده اند.
  • frameborder :نمایش یا عدم نمایش حاشیه frame ، اگر بخواهید حاشیه رو نشون بدید باید مقدارش رو برابر 1 و در غیر این صورت این خصوصیت رو با عدد 0 که عدم نمایش Border هست پر کنید.
  • border : ضخامت بین هر یک از فریم ها رو مشخص میکنه که شما میتونید جلوی border عددی بر حسب پیکسل قرار بدید.
  • bordercolor : رنگ حاشیه اطراف فریم ها رو میتونید مشخص کنید.
  • framespacing : فاصله frame ها رو نسبت به هم میتونید نشون بدید .
  • marginwidth : فاصله ی محتویات داخل فریم را از حاشیه های چپ و راست (در عرض Frame) را کنترل می کند. این صفت یک عددی بر حسب پیکسل یا % درصد را قبول میکند.
  • marginheight : فاصله ی محتویات داخل فریم را ازحاشیه های بالا و پایین (در ارتفاع Frame) را کنترل می کند. این صفت یک عددی بر حسب پیکسل یا % درصد را قبول میکند.
  • noresize : که این خصوصیت رو میتونید با نام sizeable در ذهن خودتون بسپارید ،به صورت دیفالت شما میتوانید تغییر اندازه فریم را داشته باشید ولی این خصوصیت میتونه کاری کنه که کاربر دیگه نتونه اندازه فریم ها رو تغییر بده.
  • scrolling :عدم یا عدم نمایش اسکرول های یک فریم با مقادیر زیر بیام خواهد شد:
    1. auto : در صورت لزوم scroll را برای فریم نمایش خواهد داد یعنی اگر کحنویات فریم به اندازه ای باشد که اسکرول نیاز داشته باشد خودش اتوماتیک این قابلیت را فعال میکند.
    2. yes : همیشه ابزار اسکرول را برای فریم نمایش خواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم نباشد)
    3. no : هرگز ابزار اسکرول را برای فریم نمایش نخواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم باشد)

تگ iframe :

این تگ مخفف inline frame هست و در HTML 5 پشتیبانی میشه ، توسط تگ iframe فروم های درون خطی را میتواند ایجاد کنید از این تگ معمولاً جهت درج یک صفحه در داخل صفحه ای معمولی و در کنار سایر عنصر ها مانند تصاویر متن لینک و ... استفاده می شود. که به جز صفت noriesize از مابقی صفت های بالا پشتیبانی میکنه همچنین صفت های width و height که مشخصات عرض و ارتفاع یک فریم هست رو میتونید در این تگ استفاده کنید .

تگ noframes :

برخی از مرورگر ها از فریم پشتیبانی نمیکنند پس قائدتاً شما نمیتونید از frameset و frame استفاده کنید پس شما مجبور به استفاده از تگ noframes هستید اگر از این تگ استفاده کنید ، اگرچه در در ابتدای این مطلب گفتم از تگ body نمیتوانید در کنار تگ Frameset بهره ببرید اما برای استفاده از این تگ باید متن را در بین تگ های body قرار دهید به عنوان مثال کاربرد تگ iframe را در بخش آموزش html نشان می دهد.

<iframe src="http://www.web.tosinso.com"></iframe>

نویسنده : فرهاد خانلری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

نظر شما
برای ارسال نظر باید وارد شوید.
3 نظر