فریم ناحیه ای در یک سایت (پنجره) است که در آن صفحه وب دیگری قابل مشاهده است. مدیران وب سایت از این فرصت برای نمایش صفحه اصلی سایت دوستان یا شرکای خود استفاده می کنند. از همین تکنیک برای نمایش فرم جستجو در کادرهایی که نتیجه کنار آن و غیره است استفاده می شود.
اما بیشتر از فریم ها در ایجاد پورتال های وب بزرگ استفاده می شود، جایی که تعداد قابل توجهی از آیتم های منو و زیر منوها مورد نیاز است. معمولا در مورد چنین افرادی می گویند: «وب سایت روی قاب». برای ایجاد چنین منبعی به دانش خوب HTML نیاز است.
ایجاد فریم در سازنده وب سایت
برخی از سازندگان وب سایت تولید خودکار چنین کدهایی را ارائه می دهند. معمولا دکمه add frame در منوی اصلی برنامه قرار دارد. ابتدا باید مکان نما را در جای مناسب صفحه قرار دهید، سپس روی دکمه کلیک کنید، پنجره ای باز می شود (همانطور که در تصویر نشان داده شده است). در آن می توانید آدرس صفحه ای که در کادر باز می شود را تنظیم کنید و ابعاد: عرض و ارتفاع را تنظیم کنید.
اما بیشتر از فریم ها در ایجاد پورتال های وب بزرگ استفاده می شود، جایی که تعداد قابل توجهی از آیتم های منو و زیر منوها مورد نیاز است. معمولا در مورد چنین افرادی می گویند: «وب سایت روی قاب». برای ایجاد چنین منبعی نیاز به دانش خوب استزبان HTML.
با کمک این "سرویس" می توان چندین فریم در صفحه ایجاد کرد، اما عناصر به هم پیوسته را از این طریق دریافت نخواهید کرد.
قاب در CMS
در بسیاری از برنامه های ایجاد وب سایت، امکان نصب ماژول مربوطه وجود دارد. به عنوان مثال، برای جوملا، یک فریم یک ماژول "Wrapper" است.
می توان آن را در کنترل پنل جوملا CMS یافت و ایجاد کرد: "برنامه های افزودنی" - "مدیر ماژول" - "ایجاد" (یک دکمه نارنجی گرد با علامت مثبت در داخل). در پنجره پاپ آپ، در لیست، ماژول "Wrapper" را خواهید دید.
اگر اینجا نیست، شامل نمی شود. برای استفاده از آن، ابتدا باید آن را در اینجا فعال کنید: تب "Extensions"، سپس "Extension Manager" و سپس تب "Management". و ما در لیستی که باز می شود به دنبال جستجو هستیم، برای جستجوی سریع در قسمت "Filter" کلمه: Wrapper را وارد کنید. در مقابل این ماژول باید یک نماد سبز رنگ با علامت تیک در داخل وجود داشته باشد. یک دایره قرمز با یک نقطه در داخل به این معنی است که این افزونه غیرفعال است.
پس از این روش، می توانید به "مدیر ماژول" بازگردید، یک فریم ایجاد کنید و پارامترهای آن را تنظیم کنید.
همانطور که در تصویر می بینید، ماژول به شما امکان می دهد: عنوان بالای قاب، موقعیت ماژول، صفحات سایتی که در آن نمایش داده می شود را انتخاب کنید. و همچنین عرض، ارتفاع را تنظیم کنید. یک قاب اضافه کنید و در واقعپیوند به یک صفحه وب اگر در یک فریم بخواهید صفحه اصلی سایت را با عرض کامل نمایش دهید، 100% تنظیم شده به طور پیش فرض کافی نخواهد بود. شما می توانید بلافاصله با خیال راحت 400٪ قرار دهید. ارتفاع 200 معمولا برای نمایش منوی بالای صفحه کافی است. در صورتی که کاربر (بازدید کننده وب سایت) از نوار اسکرول استفاده کند، تمام محتوای دیگر قابل مشاهده خواهد بود.
در اینجا مثالی از چیستی فریم در جوملا آورده شده است.
ماژول Jumla برای ایجاد یک قاب بسیار راحت و آسان برای استفاده است. با این حال، قابلیت‌های آن و همچنین قابلیت‌های سازنده محدود است.
تاریخ و واقعیت
در تمرین ایجاد سایت از فریم، این برچسب (کاربرد آن) مدتهاست که در پس زمینه محو شده است. آنها می توانند با ماژول ها جایگزین شوند، تنظیماتی در برنامه های سازنده که کد یک صفحه وب را بدون مشارکت سازنده سایت تولید می کنند. با این حال، در برخی موارد این کافی نیست. به عنوان مثال، زمانی که یک قاب یک ساختار پیچیده کل نگر از مناطق نمایش داده شده در مرورگر است. صاحبان سایت های با ساختار پیچیده این را می بینند. از ایجاد آن فقط در موارد شدید استفاده می شود، زیرا سایت های فریم منحصراً با کمک برچسب های تخصصی ایجاد می شوند.
سایت های با ساختار پیچیده
برای آنها، ایجاد چندین فریم به هم پیوسته بهترین راه حل برای سازماندهی محتوا در صفحات منبع است. اینها معمولاً پورتال های بزرگی هستند که هر سال قوی تر می شوند.
چگونه به همان نتیجه برسیم؟ ساختار قاب چگونه ایجاد می شود؟
چگونهدرج فریم در کد صفحه
فریم ها در HTML با استفاده از برچسب ها اضافه می شوند:
- قاب (برای یک پنجره جداگانه)؛
- frameset (استفاده از آن برای ایجاد یک ساختار کامل);
- iframe (قاب "شناور");
- noframes (در صورتی که قاب در مرورگر کاربر نمایش داده نشود).
اولین تگ مشخص شده همیشه در یک جفت و قرار می گیرد. و جایگزین و. و با کمک ویژگی های مناسب می توانید ویژگی های هر عنصر را تنظیم کنید: نام (name=)، اندازه (cols=و rows=)، وجود حاشیه (حاشیه)، ظاهر نوار اسکرول و البته، پیوند به صفحه وب برای نمایش.
تغییرهای طراحی
کل صفحه سایت را می توان به مناطق تقسیم کرد. به عنوان مثال، مانند این:
| چپ | فریم بالا |
| راست |
چنین ساختاری (به آن تودرتو می گویند) را می توان با نوشتن ویژگی cols در داخل تگ به دست آورد، که به معنای مکان قاب به صورت افقی و ردیف ها - عمودی است. سپس علامت=قرار داده شده و ابعاد آن تعیین می شود. به عنوان مثال، 60٪، 40٪ - درصد (یک پنجره 60٪ از فضای مرورگر را اشغال می کند، دیگری به ترتیب 40٪). یا 100، 200 - نسبت تصویر در پیکسل. اندازه یکی از فریم ها به هیچ وجه قابل تنظیم نیست (به طور پیش فرض تنظیم می شود). برای انجام این کار، بعد یا قبل از کاما، باید علامترا مشخص کنید.
تودرتوهر ناحیه جدید با یک مجموعه فریم جدید مشخص می شود.
مثال کد:
توجه داشته باشید که در مثال ما، برای فریم دوم و سوم، اندازه ها فقط یک بار مشخص شده اند.
ایده های زیادی به شما امکان می دهد فریم ها را کامل کنید. نمونه هایی از مکان آنها در پنجره مرورگر را می توان به طور بی پایان ارائه کرد (تغییر کد بر این اساس). با این حال، این اطلاعات برای مدت طولانی کاربرد عملی پیدا نکرده است. فریم‌ها، اگر امروزه هنگام ایجاد سایت‌ها استفاده می‌شوند، فقط به‌صورت ماژول‌هایی در CMS رایگان یا به‌صورت iframe هستند.
قاب شناور
عجیب است که چرا چنین نامی گرفته است، کلمه "توکار" در اینجا مناسب تر است. این فریم برای نمایش محتویات یک فایل ایجاد شده است. شما هر سند یا فایلی را در پایگاه داده آپلود می کنید، مسیر آن را با استفاده از تگ های iframe می نویسید - و بازدیدکنندگان متن فایل (ویدئو یا تصویر) را خواهند دید. متأسفانه مرورگرها همیشه محتوا را ارائه نمی کنند. برای انجام این کار، سازندگان وب عبارت بین تگ های باز و بسته را وارد می کنند: "مرورگر شما محتوا را نمایش نمی دهد."
به عنوان مثال، Seopult.ru یک سرویس شناخته شده برای استادان ارتقاء است. فقط سایت اصلی او نیست، بلکه یک آینه I.seopult.pro است که برای مشتریان پورتال ایجاد شده است. کد iframe در اینجا به صورت زیر نوشته شده است:
دستورالعمل
. برچسبکجاست
-
برای تعریف یک آیتم لیست ایجاد شد. توسط همه مرورگرها پشتیبانی می شود.
در خود صفحه آینه می توانید کلمه "Instruction" را به صورت یک دکمه مشاهده کنید. با کلیک بر روی آن در مرکز پنجره مرورگر، ارائه باز می شود.
همه بزرگسایت هایی برای تماشای فیلم و سریال با استفاده از iframes (به عنوان مثال، "Imhonet") و همچنین شبکه های اجتماعی ایجاد می شوند. حتی صفحه اصلی "Yandex" حاوی این برچسب و بیش از یک جفت است.
چگونه یک iframe بنویسیم
می توانید سندی را در قالب یک پنجره با نوار پیمایش در هر مکانی از سایت آپلود کنید. معمولا برچسب ها در داخل بدنه قرار می گیرند. فراتر از استاندارد
و
، همانطور که در مثال بالا نشان داده شده است، از تگ لیست نیز می توان استفاده کرد -
-
ویژگی ها به iframe اضافه می شوند:
- عرض (عرض) و ارتفاع (ارتفاع=);
- تراز کردن لبه;
- تورفتگی هایی که ممکن است مشخص شوند یا نباشند: مقدار پیش فرض 6 است - این کاملاً کافی است؛
- با استفاده از allowtransparency، می توانید شفافیت ناحیه فریم را طوری تنظیم کنید که پس زمینه صفحه دیده شود؛
- به علاوه scr آشنا، نام، پیمایش، حاشیه.
پیمایش با iframe
جالب‌ترین مهارت کادربندی، نوشتن کدی است که به شما امکان می‌دهد محتوا را در یک پنجره توسط یک پیوند باز کنید، کاری که سازندگان آینه Seopult انجام دادند، تنها با چندین لینک (به طور همزمان در دسترس کاربر در همان صفحه).
برای این، یک iframe گرفته می شود، نام علاوه بر آن از طریق name=در آن نوشته می شود. مثلا هدر. علاوه بر این، قبل از آن در تگ ها و لینک ها از طریق HREF=با علامت اجباری ویژگی بعد از آنها نوشته می شود. برچسب ها "a" باز و بسته شدندر تگ p قرار می گیرند.
می توانید چندین خط از این قبیل را در کد بنویسید تا در نهایت چندین دکمه پیوند را در یک ردیف در سایت دریافت کنید که با کلیک بر روی آنها محتوای مختلف در پنجره زیر نمایش داده می شود.
کد به این صورت خواهد بود:
آگهی ارسال کنید
مشاهده تبلیغات
Image چگونه در وب سایت به نظر می رسد:
چگونه یک iframe را در سایت جوملا درج کنیم
به عنوان یک استاندارد، کنترل پنل جوملا دارای یک ماژول فعال (آماده برای استفاده) "HTML-code" است. با آن می توانید هر کدی را در هر نقطه از سایت وارد کنید. با این حال، او سرسختانه کد با تگ iFrem را نادیده می گیرد. بنابراین، ما از یک ماژول ویژه Jumi استفاده خواهیم کرد.
اول از همه، باید آن را از اینترنت دانلود کرده و از طریق پنل مدیریت جوملا نصب کنید: "برنامه های افزودنی" - "Extension Manager" - "Select File". مسیر بایگانی دانلود شده را مشخص کنید و روی "دانلود" کلیک کنید.
پس از نصب موفقیت آمیز، به "مدیر ماژول" بروید و یک مورد جدید ایجاد کنید. نوع Jumi را انتخاب کنید. در پنجره باز شده در قسمت "Custom Code" iFrem آماده شده را مانند پاراگراف قبلی مقاله وارد کنید. به ماژول یک عنوان بدهید، موقعیت قرارگیری و صفحات سایت را مشخص کنید. روی ذخیره کلیک کنید و آن را بررسی کنید.
مرورگرها و فریم ها
همه مرورگرهای محبوب محتویات پنجره های قاب را به خوبی نمایش می دهند: Chrome، Safari، Firefox، Android، iOS. اینترنت اکسپلورر و اپرا در این زمینه از نرخ بالایی برخوردار هستند. و با این حال هیچ تضمینی وجود نداردکه بازدیدکننده سایت شما محتویات تمامی پنجره ها را مشاهده خواهد کرد. در این حالت باید با استفاده از تگ noframe (باز و بسته شدن) پیام بگذارید. می توانید موارد زیر را در آن وارد کنید: "مرورگر شما قدیمی است. نسخه را برای نمایش محتویات سایت به روز کنید." اگر مرورگر کاربر فریم ها را به درستی رندر کند، این پیام را نمی بیند.
بنابراین یک قاب ناحیه یا پنجره ای از یک سایت است که URL خاص خود را دارد. برای نمایش چندین صفحه وب یا سند مستقل در یک فیلد مرورگر به طور همزمان استفاده می شود، همچنین دارای URL خاص خود است. علیرغم اینکه فریم ها به شما این امکان را می دهند که یک سایت پیچیده را به خوبی سازماندهی کنید، مدت زیادی است که به جز iframe از آنها استفاده نمی شود. استفاده از این برچسب هنوز برای بارگیری ارائه ها، پخش کننده ویدیو، اسناد متنی در یک پنجره خاص مرتبط است. این به طور فعال توسط منابع وب بزرگ و شناخته شده استفاده می شود.
-
