یکی از امکاناتی که HTML برای طراحان فراهم آورده است این است که می‌توانیم به وسیله یکسری عناصر خاص به نمایش چندین صفحه وب در یک پنجره مرورگر بپردازیم. در اصل با این عناصر می‌توانیم پنجره مرورگر را به چندین قسمت (که هر کدام frame گفته می‌شود) تقسیم کرده و در هر قسمت یک صفحه را نمایش دهیم.
در ادامه با ساختار کلی و تگهای مربوط به چنین صفحاتی بیشتر آشنا خواهیم شد.
ساختار صفحات چندگانه
ساختار صفحاتی که میخواهیم در آن‌ها چندین صفحه را قرار دهیم کمی با صفحه‌های معمولی فرق می‌کند.
همانطور که می‌دانید یک صفحه معمولی از قسمت سر که به وسیله تگ head و قسمت پیکره (بدنه) که به وسیله تگ body مشخص می‌شود، تشکیل می‌شود. در زیر ساختار کلی یک صفحه معمولی را مشاهده می‌کنید:
<html> <head> ....... </head> <body> ....... </body> </html>
اما در ساختار صفحات چندگانه به جای عنصر <body> از عنصری به نام <fremeset> استفاده می‌شود. قبل و بعد از این عنصر نباید هیچ عنصر دیگری قرار بگیرد در غیر اینصورت frameset توسط مرورگرها چشم پوشی می‌شود. ساختار کلی اینگونه صفحات به صورت زیر است:
<html> <head> <title> Frameset </title> </head> <frameset cols="50%,50%"> <frame src="http://www.google.com" name="google_frame" /> <frame src="http://www.yahoo.com" name="yahoo_frame" /> <frameset> </html>
می بینید که در اینگونهصفحات از تگهای <frameset> برای ایجاد یک صفحه چندگانه و تگ </ frame> برای مشخص کردن صفحاتی که در هر بخش نمایش داده خواهد شد استفاده می‌کنیم. در ادامه به بررسی هر یک از تگهای مرتبط با ایجاد صفحات چندگانه آشنا خواهیم شد:
تگ <frameset> : از این تگ تگ برای ایجاد یک صفحه چندگانه استفاده می‌کنیم. در واقع بااستفاده از این تگ برای اینکه به مرورگر می‌گوییم با یک صفحه چندگانه روبروست، استفاده می‌شود. این تگ صفت‌های زیر را پشتیبانی می‌کند.
- rows : برای ایجاد فریم‌های افقی به کار می‌رود. از این صفت برای تعیین تعداد و اندازه هر یک از فریم‌ها استفاده می‌شود که در واقع لیستی از اندازه‌ها بر اساس واحدهای px ، درصد و نسبی خواهد بود.
- cols : برای ایجاد فریم‌های عمودی به کار می‌رود. از این صفت برای تعیین تعداد و اندازه هر یک از فریم‌ها استفاده می‌شود که در واقع لیستی از اندازه‌ها بر اساس واحدهای px ، درصد و نسبی خواهد بود.
همانطور که اشاره شد یکی از انواع مقادیری که صفت‌های cols و rows می‌پذیرند مقادیر نسبی هستند که با * مشخص می‌شوند. این مقادیر پس از محاسبه اندازه‌های مشخص شده با px و درصد بر رویداد فضای باقیمانده عمل می‌کنند. به مثال زیر دقت کنید:
<frameset cols="300px,50%,3*,2*,1*">
این تکه کد به آن معناس که ابتدا 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 منتظر ما باشید
سلام خسته نباشید
چرا در ببعضی از کدهای htmlاز دو کلاس همزمان استفاده شده
خوب برای طبقه بندی بهتر کد های css گاهی وقتا باید کد های مختلف توی کلاس های مختلف قرار بگیره،حالا لازم میشه که از دو تا کلاس برای یه عنصر استفاده بشه.
بسیار عالی و کامل بود.
ممنون 😀 😀 😀 😀 😀
سلام
آقا سجاد یه سوال داشتم…
شما خودتون چه جوری با طراحی وب و گرافیک و زبان های برنامه نویسی آشنا شدید؟ کلاس، کتاب یا …
من هم به طراحی وب و گرافیک علاقه دارم ولی نمیدونم از کجا باید شروع کنم؟ فعلا که آموزش های شما و اینترنت و کتاب و … رو دنبال می کنم…
آقا توی سایت w3schools در مورد تگ های frame و frameset نوشته که در html5 منسوخ شدن و ساپورت نمیشن
شما میدونید جایگزینشون چیه؟
سلام.
جایگزینی ندارن، و بهتره دیگه از اونا استفاده نکنید.
سلام…
بابت آموزشهاتون خیلی ممنون و خسته نباشید هر چند که از پست این آموزشها تقریبا یکسالی میگذره اما بازم خسته نباشید
آموزش هاتون برا ما مبتدی ها خیلی سلیس و روانه و واقعا مفید واقع شده
حداقل استارت اولیه رو زدم و مسیر هدفم که برنامه نویسی حرفه ای هست تا یه حدودی مشخص شده
فقط یه سوال:
اینکه الان که آموزش html رو تموم کردم، بنظرتون سریعا آموزش css رو شروع کنم یا اینکه بازم رو کد های html کار کنم؟
ممنون
سلام ممنون،آگه واقعا خوب یاد گرفتید می تونید آموزش CSS رو شروع کنید اما یادتون باشه هر چی بیشتر تمرین کنید بازم کمه،CSS هم دادن استایل به HTML هست پس تو آموزش CSS هم می تونید تمرین کافی داشته باشید.
سلام
سجاد جان بنده تا آخر آموزش رو خوندم. عالی بود. دستت درد نکنه.
فقط یه چیزی. توضیحی در مورد تگ div داده نشده. به چه درد میخوره. مثل اینکه خیلی هم کاربرد داره.
ممنون
سلام.
آره متاسفانه ابن رو یادم رفته، تقریبا پرکاربردترین تگ توی طراحی قالب به روش tableless هست، وقتی قالب رو به روش tableless طراحی می کنیم، این تگ جایگزین، تگهای td tr و غیره میشه.
برای آشنایی بیشتر با این تگ این مطلب رو بخون،
ممنون. آموزش ها عالی بودن. واقعا ازت ممنونم. 😉 😀
با سلام. من با اجازتون تبلیغ ساییتون رو تو وبلاگم کردم.
چون خیلیییییییییی مفیده گفتم بقیه بی نسیب نمونن! 😳
ممنون آقا مهدی …
متشکرم
موفق باشید
albate baraye inkar mitonid bakhshe vip rah bendazid ke man badjori esteqbal mikunam be hsrati ke kamelo bahal bashe mesle hamishe ke bodid bedone cheshm dasht maham qadre zahamateton ro midonim dadashaye admin va ostad :X 😳 😳
نه دوست عزیز، این آموزش ها به صورت عمومی در اختیار همه کاربران قرار داده میشه
شاید برای آموزش های حرفه ای تر vip راه اندازی بشه.
bazam salam babate pdf ha mamnon :X
ostad jonam ye sola daram 🙂
migam ma teori haro khondim yad gereftim vali ye chize mohem ro ja andakhtid
onam in ke
mishe kenare teori amali ham yad dada
mesle ketab haye kelid .ir
baraye mesal ketabe tarahi kart visit be hamrahe dvd ke filmesham daste bande shode toshe va..
manzoram ine ke dar qalebe proje yad bedin ke shoma besazid ax bezarid be hamrahe teori ha va..
kamel nokte va harchizi ke lazeme
badesh bezarid har jalase ro ma ye site bahaton besazim va iradamono begirim va..
chon man teori haro balad shodam nesbatan vali balad nistam az koja shoro kunam
سلام.
خواهش میکنم،
برای بخش عملی طراحی قالب html رو در نظر داریم که بعد از به پایان رسیدن بخش css شروع خواهد شد،
با سلام وعرض ادب حضور شما
من قصد هیچ گونه جسارت یا توهین به روش اموزشی شما نداشتم اما واقعا خودتون قضاوت کنین تو این موارد اموزشی ان هم بدون تمرین و اموزشی که به کار اموز نشون بده نحوه نوشتن وامتحان ان را در خانه هیچ گونه ثمره ای نداره حتی همون سایتی که معرف حضور شد هم در سطوح مبتدی ها حرفی برای گفتن نداره و من وقتی اموزشهای شما رو نسبت به بعضی اموزش ها در همین مرکز اموزشی میسنجم مثلا اموزش جوملا از اقای صالحی میبینم خیلی سطحی هست و امیدوارم روزی بیاد که واقعا واسه مبتدی های اول راه هم اموزشهای کاربردی و موثر رو از شما ببینم انشائالله
چون واقعا افراد زیادی منتظر این سطح اموزشی هستن
با ارزوی توفیق روزافزون برای شما
سلام
از ابراز نظر شما و انتقادتون صمیمانه سپاسگذارم .
اینکه آموزش از روی کتاب/اینترنت خوندن مثل آموزش حضوری نمیشه که شکی درش نیست .
آموزش های موجود در سایت فعلا در مرحله ی یاد دادن خود زبان ها و اصول موجود در اونها هست . (که البته استقبال زیادی شده از اون ها) . بعد از اینکه زبانهای مربوطه آموزششون کامل شد سعی می کنیم در قالب پروژه های عملی و به صورت ویدیویی مطالب رو در سایت بزاریم . ما فعلا یک ساله که فعالیتمون رو مجددا شروع کردیم و پیش از اون سایت تقریبا متروکه بود . ان شاءالله به مرور زمان بهتر می شن .
آموزش های جوملا هم آموزش های اشنایی با محیط جوملا و نحوه ی استفاده از اون هست . خیلی ها هنوز نمی دونن چطور باید سایت راه بندازن و چطور از سیستم های مدیریت محتوا استفاده کنند . مخاطب این آموزش ها بیشتر این دسته از افراد هستند . احتمالا در آینده آموزش مشابهی رو برای آشنایی به وردپرس خواهیم داشت . ما تو سون لرن سعی می کنیم برای هر سطح مخاطب مطلب بزاریم .
از مطالب موجود هم استقبال زیادی شده . اگر آمار بازدید آموزش ها و نظراتشون رو ببینید متوجه می شید .
ان شاءالله که روز به روز بهتر خواهیم شد .
متشکرم
سلام.
ما توی این سری آموزشی سعی کردیم، شما رو با تگ های موجود و کاربردشون آشنا کنیم، و چونکه بیشتر، مطالب به صورت تئوری بود، و مثال عملی نداشتیم، شاید فکر کنید، چیزی از این آموزش ها دستگیرتون نشده، ایشالا پس از تموم شدن، سری آموزشی css، اموزش طراحی قالب رو خواهیم داشت و اونجا به شکل عملی و ملموستر با این عناصر آشنا خواهید شد.