۱۳۹۰ اردیبهشت ۲۰, سه‌شنبه

فريمها ( Frames )

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهيد شد.
مثالها:

مجموعه فريمهای عمودی
مثالی در مورد ايجاد مجموعه فريمهای عمودی توسط تگ های frameset و frame
مجموعه فريمهای افقی
مثالی در مورد ايجاد مجموعه فريمهای افقی توسط تگ های frameset و frame
مثالهای بيشتر

فريمها (Frames) با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتوای هر فريم هم ميتواند هر صفحه يا وب سايتی باشد. هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها در کارهای حرفه ای توصيه نميشود.(به جز در موارد خاص)
معايب استفاده از فريمها:
  • موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند.
  • چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است.
  • صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!!
اگر میخواهید صفحات نسبتا دینامیک ساخته و با هیچ زبان اسکریپتی مانند PHP یا ASP آشنائی ندارید فریمها کمک خوبی خواهند بود. همچنین فریمها برای ساختن سریع قسمتهائی از سایت که عموم به آن دسترسی ندارند مانند قسمت مدیریت (Admin) مناسب به نظر میرسند.
تگ فريم ست (Frameset)
  • frameset یعنی یک Set از frame ها یا مجموعه ای از چهار چوبها
  • تگ اصلی <frameset> به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد.
  • هر تگ <frameset> مجموعه ای از رديفها يا ستونها را تعريف ميکند.
  • داخل هر فريم ميتواند frameset ديگری قرار دهيد.
  • با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
  • تگ <frameset> درون تگهای <html> و <html/> قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.)
تگ فريم (Frame)
  • کاربرد اصلی تگ <frame> تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.
مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد. توجه داشته باشید که تمامی سه فایل اچتمل مربوط به این مثال در یک دایرکتوری قرار دارند. 
<html>
<frameset cols="75%,25%">
   <frame src="frame_left.html">
   <frame src="frame_right.html">
</frameset>
</html>
برای نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.
شناسه های cols و rows در تگ frameset
شناسه مقدار شناسه کارکرد
cols عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه ستونها در فريم ست
rows عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه رديفها در فريم ست
مثالهای زير را در نظر بگيريد:
مثال 2 مثال 1 
<html>
<frameset cols="25%,50%,25%">
   <frame src="frame_3.html">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

<html>
<frameset cols="*,200">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>
نمايش توسط مرورگر نمايش توسط مرورگر
در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهای بالا برقرارند.
نکات کاربردی: * اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد.
* اگر ميخواهيد که فريمها scroll نشوند (حرکت میان محتویات صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند.
* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder )
* درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.
* بعضی از مرورگرها به اولین نویسه و شروع تعریف یک فایل frameset حساس هستند، مطمئن باشید که هیچ کاراکتر اضافی مانند space یا new link قبل از tag frameset در ابتدای صفحه وجود ندارد.
مثالهای بيشتر مجموعه فريمهای مرکب
مثالی در مورد ايجاد مجموعه ای مرکب از فريمهای عمودی و افقی
مثالی کاربردی در مورد فريمها
در اين مثال کاربردی با کمک سه فريم امکان نمايش صفحات مختلف به آسانی فراهم ميشود. فريم افقی و بالائی سرتيتر و نام اصلی سايت را نمايش خواهد داد و فريم سمت راست لينکهای مهم صفحه را در بر گرفته و امکان navigation را فراهم ميسازد و نهايتا فريم اصلی و سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد که برای اين مثال حداقل به يک فايل برای معرفی مجموعا فريمها(frameset) و سه صفحه اچتمل برای فريمهای بالائی، سمت چپ و راست احتياج خواهد بود.
فريمهای شناور و يا درجا (Inline frame)
مثالی در مورد فريمهای شناور و درجا (iframe)، فريمی درون يک صفحه اچتمل
مثالی کاربردی در مورد فريمهای درجا (Inline frame)
مثالی کاربردی در مورد فريمهای شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف
شوخی با فريم های شناور
مثالی در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها
فريمها و پيوندهای نامگذاری شده
مثالی کامل در مورد فريمها و پيوندهای نامگذاری شده و نحوه استفاده از آنها در طراحی سايتی ساده متشکل از چهار فايل اچتمل
فريمها و پيوندهای نامگذاری شده کامل
همان مثال بالا در صفحه کامل مرورگر با شناسه های کامل در تگ frame
تگ های فريم
Start Tag Purpose کاربرد
<frameset> Defines a set of frames تعريف مجموعه ای از فريم ها
<frame> Defines a sub window (a frame) تعريف يک فريم
<noframes> Defines a noframe section for browsers that do not handle frames تعريف جايگزين برای مرورگرهائي که از فريم ها پشتيبانی نميکنند.
<iframe> Defines an inline sub window (frame) تعريف فريم های درجا (inline)
ارسال شده توسط طراحی سایت در ۲۳:۱۹

هیچ نظری موجود نیست:

ارسال یک نظر

اشتراک در: نظرات پیام (Atom)