سری آموزش های فصل دهم:
آموزش فریم ها و لایه ها در HTML
سلام خدمت همراهان عزیز با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .
آموزش امروز :
معرفی لایه ها وانواع آن در HTML
لایه ها
نت اسکیپ دستور <LAYER> را در مرورگر های خود معرفی کرد. طراحان با استفاده از این امکان می توانند لایه های از محتویات شفاف یا مات را در صفحات و ب داشته باشند . علاوه بر اینکه می توان لایه ها را بر روی هم قرار داد تا طرح پیچده ای را ایجاد کرد ، می توان لایه ها را به کدی مقید کرد، به طوری که بتواند آنها را حرکت دهد.
گرچه دستور <LAYER> خیلی مفید به نظر می رسد ، طراحان صفحه باید با استفاده از شیوه ناه بتوانند صفحات را دقیقا کنترل کنند . چون لایه ها در مرورگر های دیگر وجود ندارد، کاربر آنها باید با احتیاط انجام شود.
ایده استفاده از لایه ها ثل فریم است . با این تفاوت که لایه ها می توانند همپوشانی داشته باشند. لایه ، ناحیه یا بخشی از پنچره مرورگر را تعریف می کند که می تواند بر روی لایه های دیگر قرار گیرد. لایه ها به دو شکل هستند
1) لایه ساکن : توسط دستور <LAYER> تعریف می شوند.
2) لایه شناور : توسط دستور <ILAYER> تعریف می شوند.
1) لایه های ساکن :
برای تعریف لایه های ساکن از دستورات <LAYER> و <LAYER/> استفاده می شود . لایه باید دارای نام باشد تا بعدا به آن مراجعه شود . برای نا مگذاری لایه از صفت ID دستور <LAYER> استفاده می شود . همچنین برای لایه ساکن، با استفاده از صفات LEFT, TOP ، مختصات گوشه بالا و چپ آن را مشخص کنید . مختصات برچسب پیکسل بیان می شوند صفات HEIGHT, WIDTH دستور <LAYER> می توانند ارتفاع پهنای لایه را مشخص کنند.
که مقادیر آنها برحسب پیکسل یا درصد بیان می شود صفت ABOVE شامل نام لایه ای است که باید در بالای لایه فعلی قرار گیرد. نام لایه با صفت NAME مشخص می گردد . صفت BELOW لایه ای را مشخص می کند ، که باید در زیر لایه فعلی قرار گیرد . صفت BGCOLOP رنگ زمینه لایه را مشخص می کند.
معرفی سایت خارجی :
صفت SRC یک URL را مشخص می کند که محتویات می کند که متحویات آن باید در لایه قرار گیرد. استفاده از این صفات با یک دستور تهی ، روش مناسبی برای رز رو جا در مرورگرهای قدیمی است . صفت Visibility مشخص می کند که لایه مخفی باشد یا خیر. مقداری HIDDEN لایه را مخفی می کند و مقدار SHOW لایه را نشان می دهد و مقدار INHERITS موجب می شود از لایه ای که ان رادر بر می گیرد قابل مشاهده باشد .
چون موقعیت لایه ها به طور مطلق مشخص می شود ، لازم نیست راجع به چگونگی قرار گرفتن آنها در صفحه، تعریف هایی را داشته باشید. اما خوب است که لایه ها را به ترتیب منطقی قرار دهید، مثل چپ به راست یا بالا به پایین .
و نیز برای مرورگرهایی که لایه ها را پشتیبانی نمی کنند، دستور <NOLAYER> می تواند مفید واقع شود. محتویاتیی که بین دستورات <NOLAYER> و </NOLAYER> قرار می گیرد، توسط مرورگرهایی مثل نت اسکیپ 4 نادیده گرفته می شود، ولی مرورگر هایی که از لایه های پشتیبانی نمی کنند آن متن نمایش می دهند.
1) مثال
برنامه ای که کاربرد دستورات <LAYER> و <NOLAYER> را نشان می دهد. دونمونه از اجرای آن در نت اسکیپ و IE (که لایه های را پشتیبانی نمی کند)، در شکل زیر آمده است.
2) لایه های شناور :
لایه های شناور با لایه های ساکن متفاوتند، زیر لایه شناور به طور طبیعی در یک سند قرار می گیرند، مثل تصویری که در سند واقع می شود. برای اینکه نشان داده شود محتویاتی مربوط به یک لایه شناور است، باید در بین دستورات <ILAYER> و <ILAYER/> قرار گیرد.
محل تعریف لایه های شناور مهم است . لایه های شناور را نیز با استفاده از صفت ID می توان نامگذاری کرد. مقادیر صفات LEFT و TOP را نیز برای این نوع لایه ها می توان تعیین کرد. اما این مقادیر، لایه ها را نسبت به محتویاتی که لایه در آن قرار می گیرد، قرار می دهند.
2) مثال
یک برنامه ای که کاربرد لایه های شناور را نشان می دهد. نمونه ای از اجرای آن در شکل زیر آمده است.
3) مثال
کد نویسی برنامه ای که چندین لایه را در صفحه وب ایجاد می کند . در این مثال ، از چهار لایه استفاده شده است. نمونه اجرا در شکل زیر آمده است.
4) مثال
برنامه ای که با استفاده از جاوا اسکریپت لایه های مختلفی را به نمایش در می آورد. ابتدا فرمی ایجاد می شود که چهار دکمه فشاری دارد. هر دکمه را به یک لایه نسبت می دهیم. کاربر می تواند با فشردن یک دکمه ، لایه دلخواهی رابه نایش در آورد . این چهار دکمه با استفاده از تابع ()showlayer ساخته می شوند. نمونه ای از اجرا در شکل آمده است . به توضیحاتی که در ادامه آمده است توجه کنید.
دانلود رایگان :
تشریح مثال :
در ابتدای برنامه لیستی از شیوه نامه جاوا اسکریپت آمده است که کلاسی به نام CardStack را برای چهار لایه تعریف می کند. در این شیوه نامه ، فقط مشخصات و عرض لایه را تعیین کرده ایم هنگام بار شدن صفحه، رویداد onload رخ می دهد. وتابع initializelayers اجرا می شود.
این تابع، لایه اول را نمایش می دهد و بقیه را مخفی می کند. لایه های موجود در صفحه، عنصری از آرایه layers هستند که فرزند شی document است. برای مخفی کردن هر لایه، خاصیت visibility آن برابر با hide می شود. در این، خاصیت visibility اولین لایه که با layers[0] مشخص می شود، برابر با show انتخاب شد تا نمایش داده شود.
سپس لایه ای به نام form ایجاد می شود که شامل 4 دکمه است. کاربر با کلیک کردن هر یک از دکمه ها می تواند، لایه دلخواه خودش را به نمایش در آورد. وقتی یکی از این دکمه ها کلیک می شود، تابع ()showwlayer با پاراتری فراخوانی می شود . این پارامتر، نام لایه ای است که باید نمایش داده شود. سپس نام این لایه در متغیر toplayer قرار می گیرد تا در دفعه بعد که اجرا می شود، این لایه مخفی گردد.
| <p title=”introduction”> this is the first </p> |
|---|
برگرفته از :
کتاب راهنمای جامع (HTML, BHTML, XML)
دکتر عین الله جعفر نژاد قمی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact