آموزش فریم ها و لایه ها در HTML

آموزش HTML

آموزش فریم ها و لایه ها در HTML
مقدمه:

سلام  خدمت همراهان عزیز با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی قبل مراجعه فرمایید .

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

عنوان آموزش امروز:

فریم ها و لایه ها در HTML

فریم ها و لایه ها در HTML

فریم ها

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

البته این ویژگی چندان جالب به نظر نمی رسد، زیرا اغلب در برنامه های کامپیوتری و رابطهای کامپیوتر مورد استفاده قرار می گیرند. به هر حال، می توان صفحه وب را به چند پنجره تقسیم کرد و هر پنجره را یک فریم نامید.

برنامه HTML که شامل فریم باشد،صفحه مرورگر را به چند قسمت (فریم) تقسیم می کند . هر فریم ممکن است شامل اسناد متفاوتی باشد. امتیاز انجام این کار نیز بدیهی است به طوری که کاربران می توانند در آن واحد، اطلاعات مختلفی را در صفحه وب (هرکدام در یک فریم) ببینند. هر فریم می تواند پیوندی به فریم دیگر داشته باشد. بدین ترتیب طراحان می توانند رابطهای جالبی را بسازند .

به عنوان مثال، یک فریم می تواند پیوندی داشته باشد که نتایج را در فریم دیگری قرار دهد. نمونه ای از این فریمها در شکل زیر آمده است به عنوان مثال ، در این شکل، chapter 1 پیوندی است که در فریم سمت چپ قرار داردو توضیحاتی راجع به آن در فریم سمت راست آمده است .

معرفی سایت های خارجی :

https://php.net

https://php.org

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

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

برای ایجاد فریمها از دستور <FRAMESET> استفاده می شود. دو صفت اصلی این دستور عبارتند از COLS, ROWS . به عنوان مثال، دستور <FRAMESET COLS=”20%,80%”> دو فریم ایجاد می کند که فریم اول 20 در صد و فریم دوم 80 در صد از صفحه را تشکیل می دهد.

مقادیر COLS, ROWS را با پیکسل هم می توان بیان کرد. به عنوان مثال، دستور <FRAMESET CO=”200,400″> یک ستون به عرض 200 پیکسل و ستون دیگر با عرض 400 پیکس را تعریف می کند . چون تعیین دقیق اندازه صفحه نمایش دشوار است، تنظیم این صفات با مقادیر دقیق، خطرناک خواهدبود.

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

دانلود رایگان :

دانلود افزونه افزایش سرعت سایت WP Rocket 3.13.4

اگر فریمی حاوی گرافیکی است که عرض آن 150 پیکسل است ،اولین فریم را 175 پیکسل در نظر بگیرید.

تا مقداری فضای خالی منظور شود. اگر فریم از این مقدار کوچکتر باشد تصویر ناقص خواهد بود . بنابراین ، اگر اندازه محتویات مشخص باشد می توانید اندازه فریم را برحسب پیکسل مشخص کنید .

اما اندازه فریمهای دیگر چقدر باشد؟ برای اینکه باقیمانده صفحه را به فریم دیگری نسبت دهید، از علامت * استفاده کنید . دستور مربوط به چنین فریمی به صورت <FRAMESET COLS=”175″> است .

خلاصه اینکه، صفات COLS,ROWS می توانند برحسب در صد پیکسل یا * مشخص شوند هر ترکیبی از آنها قابل استفاده است . دستور زیر موجب می شود صفحه به 3 فریم تقسیم شود: اولی 40 در صد دومی 30 و سومی بقیه را به خودش اختصاص می دهد.

پس از اینکه آرایش فریم را با <FRAMESET> مشخص کردید، محتویات هر فریم را باید با دستور FRAME مشخص گنید (به ترتیبی که فریمها با صفات COL,ROW مشخص شده اند). در دستور <FRAMESET=”175,100,*”> محتویاتی که او اولین دستور FRAME مشخص می شوند در یک ستون 175 پیکسلی قرار می گیرد،

آموزش رایگان :

نقاشی با قلم مو در فتوشاپ

محتویات دومین دستور <FRAME> در 100 پیکسل قرار می گیرد و غیره. صفت SRC مربوط به <FRAME> آدرس (URL) فایلی را مشخص می کند که باید در آن فریم قرار گیرد صفت NAME نیز نشان دهنده نام فریم است .

صفت SCROLLING مشخص می کند که فریم دارای نوار جابجایی باشد یا خیر. این صفت می تواند سه مقدار را بپذیرد . مقدار YES مشخص می کند نوار جابجایی گنجانده شود صفت No مشخص می کند که نوار جابجایی گنجانده نشود و صفت AUTO مشخص می کند که در صورت لزوم (چنانچه محتویات در فریم جا نشوند ) نوار جابجایی ایجاد گردد.

صفت NORESIZE مشخص می کند که پس از اینکه اندازه فریمها تعیین شد نمی توان اندازه آنها را تغییر داد.

اگر مرورگری نتوانست از فریمها پشتیبانی کند، چگونگه می توان به کاربران آن مرورگر اطلاع داد که صفحه وب از فریمهایی استفاده نموده است؟

برای این منظور از دستور <NOFRAME> استفاده می شود هر آنچه که بین <NOFRAME> و <NOFRAME/> قرار گیرد، در صورتی که مرورگر از فریمها پشتیبانی نکند، در صفحه مرورگر ظاهر خواهد شد. مرورگرهایی که از فریمها پشتیبانی می کنند این دستور را نادیده می گیرند.

مثال :

با توجه به مطالبی که گفته شد. مثالی را در نظر می گیریم که صفحه وب را به 2 فریم مانند شکل زیر تقسیم کند. برای انجام این مثال، مراحل زیر را انجام دهید:

1 در notepad دستورات زیر را تایپ کرده به نام 10-1.htm ذخیره کنید.
2 دستورات زیر رادر notepad تایپ کرده به نام fileone.htm ذخیره کنید.
3 دستورات زیر را در notepad تایپ کرده به نام filetwo.htm ذخیره کنید.
4 برنامه 10-1.htm را اجرا کنید تا شکل زیر ظاهر شود.

 

<p title=”introduction”>   this is the first      </p>

برگرفته از :

کتاب راهنمای جامع (HTML, BHTML, XML)

دکتر عین الله جعفر نژاد قمی

پاسخ به سوال دوستان :

شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟

دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از

تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.

یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.

توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت

برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kla

تماس با ما:     https://arazpardazesh.com/contact

دیدگاهتان را بنویسید

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

2 × 4 =