• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش HTML (قسمت 11) : ایجاد صفحات چندگانه در HTML

33349 ۲۶ مهر ۹۱

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

در ادامه با ساختار کلی و تگ های مربوط به چنین صفحاتی بیشتر آشنا خواهیم شد.

ساختار صفحات چندگانه

ساختار صفحاتی که میخواهیم در آن ها چندین صفحه را قرار دهیم کمی با صفحه های معمولی فرق می کند.

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

اما در ساختار صفحات چندگانه به جای عنصر <body> از عنصری به نام <fremeset> استفاده می شود. قبل و بعد از این عنصر نباید هیچ عنصر دیگری قرار بگیرد در غیر اینصورت frameset توسط مرورگرها چشم پوشی می شود. ساختار کلی اینگونه صفحات به صورت زیر است:

می بینید که در اینگونهصفحات از تگ های <frameset> برای ایجاد یک صفحه چندگانه و تگ </ frame> برای مشخص کردن صفحاتی که در هر بخش نمایش داده خواهد شد استفاده می کنیم. در ادامه به بررسی هر یک از تگ های مرتبط با ایجاد صفحات چندگانه آشنا خواهیم شد:

تگ <frameset> : از این تگ تگ برای ایجاد یک صفحه چندگانه استفاده می کنیم. در واقع بااستفاده از این تگ برای اینکه به مرورگر می گوییم با یک صفحه چندگانه روبروست، استفاده می شود. این تگ صفت های زیر را پشتیبانی می کند.

  • rows  :  برای ایجاد فریم های افقی به کار می رود. از این صفت برای تعیین تعداد و اندازه هر یک از فریم ها استفاده می شود که در واقع لیستی از اندازه ها بر اساس واحدهای px ، درصد و نسبی خواهد بود.
  • cols : برای ایجاد فریم های عمودی به کار می رود. از این صفت برای تعیین تعداد و اندازه هر یک از فریم ها استفاده می شود که در واقع لیستی از اندازه ها بر اساس واحدهای px ، درصد و نسبی خواهد بود.
نکته : همانطور که اشاره شد یکی از انواع مقادیری که صفت های cols و rows می پذیرند مقادیر نسبی هستند که با * مشخص می شوند. این مقادیر پس از محاسبه اندازه های مشخص شده با px و درصد بر رویداد فضای باقیمانده عمل می کنند. به مثال زیر دقت کنید:

این تکه کد به آن معناس که ابتدا 300px برای frame اول، سپس %50 درصد از فضای باقیمانده برای feame دوم اختصاص داده می شود. پس از آن فضای باقیمانده به 6 قسمت کاملا مساوی تقسیم شده که 3 قسمت آن برای فریم سوم، دو قسمت برای فریم چهارم و یک قسمت برای فریم پنجم اختصاص داده می شود.

  •  border : ضخامت border بین هر یک از فریم ها را کنترل می کند. عددی صحیح را بر حسب px می پذیرد.
  • bordercolor : رنگ border اطراف فریم ها را مشخص می کند.
  • frameborder :نمایش یا عدم نمایش border های اطراف فریم ها را مشخص می کند. مقادیر زیر را می پذیرد
    • 1 یا yes : نمایش borderها
    • 0 یا no : عدم نمایش borderها
  • framespacing : مثل صفت border رفتار می کند

 تگ </ frame> : برای مشخص کردن صفحه ای که در فریم ها نمایش داده می شود از این تگ استفاده می شود. این تگ جزء تگ های تهی است حتما باید در داخل تگ <frameset> استفاده شود. دقت کنید تعداد فریم های به کار رفته در داخل frameset ها باید با تعداد اندازه هایی که در صفت cols یا rows تگ frameset آمده است برابر باشد.

این تگ از صفت های زیر پشتیبانی می کند:

  • name : نامی برای frame مشخص می کند.این نام باید در صفحه یکتا باشد. دقت کنید که این نام می تواند به عنوان پنجره هدف لینک ها مورد استفاده قرار گیرد.
  • longdesc : آدرسی را که توضیح مفصلی در مورد فریم در آن هست را مشخص می کند.
  • src  : آدرس صفحه ای که باید در فریم نمایش داده شود را مشخص می کند.
  • noresize : این صفت بولین در صورتی که برای فریمی به کار رود از امکان تغییر اندازه فریم توسط کاربر جلوگیری خواهد کرد.
  • scrolling :با این صفت می توانیم چگونگی نمایش یا عدم نمایش اسکرول های frame ها را هنگامی که محتویاتش از اندازه frame بیشتر باشد را کنترل کنیم. این صفت مقادیر زیر را می پذیرد:
    • auto : در صورت لزوم ابزار scroll را برای فریم نمایش خواهد داد.
    • yes : همیشه ابزار اسکرول را برای فریم نتمایش خواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم نباشد)
    • no : هرگز ابزار اسکرول را برای فریم نمایش نخواهد داد (حتی اگر محتویات بیش از اندازه کلی فریم باشد)
  • frameborder : نمایش یا عدم نمایش border همان فریم را کنترل می کند. همان مقادیری را می گیرد که صفت frameborder برای تگ frameset می گیرد.
  • marginwidth : فاصله ی محتویات داخل فریم را از دیواره های چپ و راست (در عرض فریم) را کنترل می کند. این صفت عددی بر حسب px یا درصد را می پذیرد.
  • marginheight : فاصله ی محتویات داخل فریم را از دیواره های بالا و پایین (در ارتفاع فریم) را کنترل می کند. این صفت عددی بر حسب px یا درصد را می پذیرد.

 تگ <noframes> : بعضی مرورگرها کلا از frameset ها (صفحات چندگانه) پشتیبانی نمی کنند در نتیجه تگ های frameset و frame را نمی شناسند و احتمالا خود آن ها را در صفحه عینا نمایش خواهند داد. برای جلوگیری از این کار باید از تگی به نام <noframe>  در داخل تگ <frameset> برای نمایش یک کد جایگزین در اینگونه مرورگرها استفاده کنیم. این تگ صفت خاصی ندارد و تنها وظیقه آن نمایش کدهایی است که در داخلش قرار می گیرد.

تگ <iframe> : تگ ifame (مخفف inline frame ) معمولا برای قرار دادن یک صفحه در داخل صفحه ای معمولی و در کنار سایر عناصر مانند متن ها، عکس ها، لینک ها و ... استفاده می شود. این تگ از تمام  صفات تگ <frame> که قبلا به آن اشاره شده است پشتیبانی می کند. به غیر از noriesize. اما از صفت های خاصی به نام width و height که برای تعیین عرض و ارتفاع محدوده frame استفاده می شود، پشتیبانی می کند.

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

با سری آموزشی css منتظر ما باشید

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 38 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام خسته نباشید
    چرا در ببعضی از کدهای htmlاز دو کلاس همزمان استفاده شده

    • ‏‏
      کیوان علی محمدی(۲۷ شهریور ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram