گفته بودم امروز اگه ممکن باشه میریم آموزش فتوشاپ مرحله اولش رو بگیم که دیدم میشه امروز HTML رو تموم کرد گفتم بذارید اول تموم شه بعد بریم مباحث بعدی امروز با حدود ۱۰ تگ آشنا خواهیم شد.
از تگ فرم form شروع می کنم،همونطور که از اسمش پیداست این تگ برای ساختن فرم ها و عناصرش مثل دکمه ها تکست باکس ها منوی ها و اینها استفاده می شه تگ فرم نیازمند تگ پایانی نیز هست،تگ فرم دارای مشخصه های مهمی هست که درحال حاضر نیازی به توضیحشان نیست پس می نویسیم:
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "#000000" background = "http://www.7learn.com/a/msm/webdesign/bg.jpg" dir = "rtl" > |
خوب همونطور که میبینید اتفاق خاصی توی صفحه نمی افته!چرا؟خوب واسه اینکه هنوز به فرم نگفتیم می خوایم چه چیزایی داشته باشیم!خود فورم از چند تگ داخلی تشکیل می شه که مهمترین اونها تگ input هست
*نکته : تگ input بیرون تگ فرم کاری را انجام نمی دهد
خوب تگ input چند مشخصه داره که مهمترینشون نوعش یا type هست(حول نشید با مثال متوجه میشید) برخی از این ها عبارتند از : text – password – button – submit – reset – checkbox – radio
یه توضیح کوتاه : مشخصه text یه تکست باکس درست می کنه مشخصه password هم یه تکست باکس درست می کنه با این فرق که هرچیزی توش بنویسین با * نشون داده میشه! تگ submit برای ایجاد یک دکمه فرستنده اطلاعات استفاده میشه تگ button برای ایجاد دکمه ای بدون ارسال اطلاعات به مکانی خارجی و تگ reset هم دکمه ای برای پاک کردن اطلاعات فرم ایجاد می کنه یه مثال:
*نکته : تگ input نیازمند تگ پایانی نیست:
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "#000000" background = "http://www.7learn.com/a/msm/webdesign/bg.jpg" dir = "rtl" > |
8 | < input type = "text" value = "مقدار اولیه" > |
9 | < input type = "reset" value = "پاک کن" > |
10 | < input type = "button" value = "دکمه" > |
11 | < input type = "checkbox" >چک باکس |
12 | < input type = "radio" >رادیو |
خوب حالا اگر نتیجه کد رو ببینیم یک تکست باکس و دوتا دکمه ایجاد شده اند که روی یکی از دکمه ها واژه ی Reset نوشته شده و دیگری خالی هست همچنین تکست باکس نیز خالی از متن هست و یک چک باکس و یک دکمه ی رادیو نیز همینطور حالا یک چیزی توی تکست باکس بنویسید و روی دکمه ی Reset کلیک کنید!دیدید؟اطلاعات فرم پاک شد!حالا شاید واستون این سوال پیش بیاد که چطوری روی اون دکمه ی خالی یه چیزی بنویسیم یا چطوری یه مقدار اولیه ای برای تکست باکس تعیین کنیم؟اینجا می رسیم به مشخصه ی دوم تگ input به نام value یا مقدار اگر value رو برای دکمه تعریف کنید روی دکمه اون نوشته میشه و اگه روی تکست باکس بنویسید مقدار اولیه اش اون میشه برای مثال :
حالا می بینید که همون چیزی که می خواستیم شد
*نکته : اگر تکست باکستون همچنان خالیه یه بار صفحتون رو ببندید و دوباره باز کنید درسته میشه
*نکته : حالا اگه روی دکمه Reset یا پاک کن در کد جدید کلیک کنید میبینید که اتفاقی نمی افته!چرا؟چون دکمه Reset همه چیز رو به حالت اولیه بر می گردونه و اگر مقدار اولیه در تکست باکستون رو تغییر نداده باشین خوب همون میمونه!
*نکته : دکمه های رادیو و چک باکس ها با تگ value تغییر ظاهری ای نمی کنند و اگر می خواهید توضیحی برای آنها بنویسید باید در کنار تگ input شان بنویسید مانند کد بالا
خوب حالا بیاید چندتا چیز دیگه هم به فرممون اضافه کنیم
۱-لیست های کشویی : برای گذاشتن لیست های کشویی دیگر نیازی به تگ input نیست این لیست ها خود تگ متفاوتی دارند به اسم select و نیازمند تگ پایانی نیز می باشند
تگ داخلی select : برای ایجاد هر کشوی این لیست ها باید یک تگ option که فقط درون این تگ کار می کند بسازیم این تگ نیز نیازمند تگ پایانی است و هرچیزی که بین تگ آغازیو پایانی اش قرار گیرد داخل کشو نمایش داده می شود نگران نباشید با این مثال متوجه خواهید شد:
*نکته : همانور که گفتیم برای رفتن به خط بعدی از کد br استفاده می شود اما کد دیگری نیز وجود دارد که هم مارا به خط بعد میبرد و هم زیر خط قبلی یک خط می کشد ببینید :
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "#000000" background = "http://www.7learn.com/a/msm/webdesign/bg.jpg" dir = "rtl" > |
8 | < input type = "text" value = "مقدار اولیه" > |
9 | < input type = "reset" value = "پاک کن" > |
10 | < input type = "button" value = "دکمه" > |
11 | < input type = "checkbox" >چک باکس |
12 | < input type = "radio" >رادیو |
خوب تگ آخری که در فرم ها نیاز با دانستنش هستیم تگ textarea هست که باکسی برای نوشتن به وجو میاورد حتما میگید خوب پس مشخصه text تگ input چه فرقی با این داره؟خوب از اولی اصولا برای نوشتن نام کاربری و پسورد استفاده می شه اما از این اصولا برای نوشتن پیغام زیرا قابلیت بزرگ شدن رو هم داره این تگ هم نیازمند تگ پایانی است ببینیم:
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "#000000" background = "http://www.7learn.com/a/msm/webdesign/bg.jpg" dir = "rtl" > |
8 | < input type = "text" value = "مقدار اولیه" > |
9 | < input type = "reset" value = "پاک کن" > |
10 | < input type = "button" value = "دکمه" > |
11 | < input type = "checkbox" >چک باکس |
12 | < input type = "radio" >رادیو |
*نکته : اگر دقت کنید در سمت چپ و پایین باکس ایجاد شده چند نقطه وجود دارد که با گرفتن آنها و کشیدن آنها بازدیدکننده می تواند سایز آنرا تغییر دهد.
خوب از فرم ها خارج میشیم و به توضیح شمارنده ها دو نوع شمارنده داریم شمارنده با ترتیب و شمارنده بی ترتیب که کارکردشون مثل هم هست و فقط تگشون فرق داره اول به معرفی شمارنده بی ترتیب می پردازیم این شمارنده ها با تگ ul نشون داده میشن و نیازمند تگ پایانی نیز هستند این تگ نیازمند یک تگ داخلی هست که li نام داره و نیازمند تگ پایانی نیز هست حالا متوجه نشدید این شمارنده ها چین؟اشکالی نداره تو این مثال می فهمید اگر کدی مثل کد زیر داشته باشیم:
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "#000000" background = "http://www.7learn.com/a/msm/webdesign/bg.jpg" dir = "rtl" > |
می بینید که نوشته های داخل li با یک نقطه و درخط های مجزا چاپ شده اند استفاده از این تگ در نوشتن موارد یک چیز یا منوها هست که بعدا خواهیم دید حالا فرق شمارنده باترتیب با این چیه؟فقط به جای نقطه عدد گذاشته میشه یعنی اولی ۱ دومی ۲ و … تگ آن هم به جای ul کافیه ol بذارید حتی تگ داخلیشون هم فرقی نداره.
می مونه دو نوع کد که اولیش table هست و نقش مهمی در ساختمان وب ها داره و خوب از اسمش معلومه یه جدول رسم می کنه تگ table نیازمند تگ پایانی نیز هست و دو تگ داخلی داره:
۱-تگ tr : از این تگ برای رسم یک سطر در جدول استفاده می شه
۲-تگ td : از این تگ هم برای رسیم یک ستون استفاده میشه
خوب چهارتا مشخصه مهم داره table که اولی border هست دقیقا همون کار مشخصه border عکس رو می کنه یعنی می گه چقدر حاشیه داشته باشه جدول که حالت عادیش هم ۰ هست
دومی background یا عکس پشت زمینه جدول هست
سومی و چهارمی هم width و heigh هستند که همونطوری که درانتهای جلسه قبل گفتیم برای اندازه هستند و به همون دو روش نیز استفاده میشن.
بیاید یه جدول ۳ در ۲ رسم کنیم با هم:
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "gold" dir = "rtl" > |
8 | < tr >< td >اولی</ td >< td >دومی</ td ></ tr > |
9 | < tr >< td >سومی</ td >< td >چهارمی</ td ></ tr > |
10 | < tr >< td >پنجمی</ td >< td >ششمی</ td ></ tr > |
خوب فکر کنم خیلی ساده و واضح بود فقط یه نکته ای اینکه از تگ هایی مثل تگ فونت برای کل table نمی تونید استفاده کنید و باید جدا برای هر td تعریف کنید.نکته ی مهم بعدی اینه که حواستون باشه tr به td اولویت داره یعنی اول باید یه سزر ایجاد کنید بعد یه ستون.
حالا که بحث به اولویت رسید یه توضیحی راجع به برنامه نوشتن بدم اینکه حتما اولویت رو رعایت کنید مثلا اگه یه تگی رو قبل از همه ی تگ ها باز کردید باید اونو بعد از همه ی اونا ببنید و برعکس مثلا این کد زیر غلطه:
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "gold" dir = "rtl" > |
چون که تگ Body قبل از تگ center باز شده اما بعد از اون بسته نشده که این غلطه البته شاید ببینید مشکلی تو نتیجش پیش نمیاد این واسه اینه که فعلا کدمون خیلی سادس و قاطی نمیشن کد ها با هم اما وقتی یکم پیچیده بشه حتما مشل آفرین خواهد شد.
تگ آخری که می خوام آموزش بدم باز هم برای زیبایی وبتون هست و blink نام داره که نیازمند تگ پایانی نیزهست و کارش اینهکه عکس یا نوشته ای که بین تگش میذارین رو مدام خاموش و روشن می کنه مانند کد زیر
3 | < title >اولین برنامه ی من</ title > |
5 | < body bgcolor = "gold" dir = "rtl" > |
توصیه ی من اینه که زیاد از این تگ استفاده نکنید چون باعث چشم درد بازدیدکننده میشه
خوب فکر می کنم زبان HTML رو تا یه حد خوبی باهم یادگرفتیم و برای فعلا بسه انشالله دیگه فردا جلسه ی اول فتوشاپ و طرای عناصر وب رو میذاریم و از پس فردا زبان CSS و شروع می کنیم.
امیدوارم بیشتر از اینها مارو دنبال کنید
ممنون
5-جلسه پنجم طراحی قالب در فتوشاپ
درود به همه دوستان علاقه مند به گرافیک و طراحی وب
امروز اولین آموزش مربوط به بخش طراحی قالب وبسایت رو براتون قرار میدم که در ادامه میتونید ازش استفاده کنید، امیدوارم خوشتون بیاد، منتظر خوندن نظراتتون هستم.

قالبی که قرار است با هم بسازیم را میتوانید در یک سایت نمونه کار شخصی استفاده کنید. اگر مراحل را به درستی با من پیش بروید یقین دارم که از نتیجه کار لذت خواهید برد، چرا که شما با یک قالب خاص با نمای تقریبا سه بعدی مواجه خواهید شد.
۱- برای شروع کار یک فایل جدید در ابعاد ۹۶۰ پیکسل (عرض) و ۹۰۰ پیکسل (ارتفاع) و ۷۲dpi رزولوشن ایجاد کنید.
۲- با سطل رنگ (Paint Bucket) رنگ (#۰۴۲۸۳b) را بر روی صفحه بریزید.
۳- یک لایه جدید ایجاد کنید، قلم مو (Brush) را انتخاب کنید، سایز قلم را به اندازه ای زیاد کنید که بتوانید یک محیط روشن بزرگ با رنگ سفید (مانند نمای زیر) در وسط صفحه ایجاد کنید.

۴- ترکیب لایه را به حالت (Soft Light) تغییر دهید.

۵- حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#۴۱۷۳۸e) را برای کشیدن این اشکال انتخاب کردم.

۶- در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#۲۸۶۰۷d) پر کردم.

۷- سپس با رفتن به منوی Edit>Transform>Skew و انتخاب ابزار (Move Tool)، شکل خود را به حالت زیر تغییر دادم و گوشه ها را با دقت بالا به هم متصل کردم.

۸- شما هم این کار را برای ۴ گوشه کار به همین صورت تکرار کنید. حالا ما ۲ نوار تقریبا سه بعدی در بالا و پایین صفحه داریم.

۹- حالا باید یک کپی از این اشکال بگیریم و دقیقا به حالتی که در نمای زیر مشاهده میکنید با کمی فاصله در زیر اشکال اولیه و با رنگ تیره تر قرار دهیم، با این کار به صفحه خود عمق داده ایم. همین کار را برای نوار زیر صفحه تکرار کنید.

۱۰- یک شکل به حالت بیضی با استفاده از (Ellipse Tool) در زیر نوار روشن بالای صفحه و با رنگ تیره ایجاد کنید.

۱۱- به منوی (Filter) بروید و از زیرمنوی (Blur) گزینه (Gaussian Blur) را انتخاب کنید و تنظیمات آن را به روشی که در نمای زیر می بینید تغییر دهید.

۱۲- و (Opacity) لایه را به ۴۰% کاهش دهید.

۱۳- مراحل ۱۰ تا ۱۲ را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

۱۴- حالا یک لایه بالاتر از همه لایه ها ایجاد کنید (می توانید اینکار را با استفاده از CTRL+SHIFT+ALT+N) انجام دهید و با استفاده از مداد یا (Pencil Tool) یک خط صاف افقی بکشید، ولی اندازه قلم را روی ۱px تنظیم کنید.

۱۵- دقت کنید که خط سفید را مانند نمای زیر رسم کنید. هنگام کشیدن مداد (Pencil Tool) بر روی صفحه دکمه (Shift) را نگه دارید تا یک خط افقی صاف رسم شود. در نهایت خط رسم شده را مانند نمای زیر دقیقا بر روی لبه نوار بالا قرار دهید.

۱۶- حالا پاک کن (Eraser Tool) را مانند نمای زیر انتخاب کنید، دقت کنید که یک براش را در نرم ترین حالت قرار دهید.

۱۷- حالا با استفاده از همین پاک کن قسمتهایی از خط را مانند نمای زیر پاک کنید.

۱۸- در این مرحله با توجه به نیازها و سلیقه خود کمی متن به صفحه اضافه کنید.
۱۹- حالا شکلی همانند شماره یک عکس زیر در چپ کار خود ایجاد کنید.
۲۰- سپس به منوی Filter بروید و از زیرمنوی Blur گزینه Gaussian Blur را انتخاب کنید (Filter > Blur > Gaussian blur) و تنظیمات را مانند قبل بر لایه خود اعمال کنید. خروجی مانند شماره دو خواهد شد.
۲۱- با استفاده از ابزار انتخاب مستطیلی (Rectangular Marquee Tool) درست نیمه چپ شکل مورد نظر را انتخاب میکنیم.
۲۲- مطمئن باشید که لایه را درست انتخاب کرده اید، سپس دکمه های (CTRL+I) و بعد (CTRL+D) را بفشارید. با اینکار رنگ قسمت انتخاب شده را معکوس خواهید کرد و مانند شماره سه خواهد شد کارتون.
۲۳- حال اگر میزان شفافیت (Opacity) لایه را به ۶% کاهش دهید نتیجه کار شماره ۴ عکس زیر می شود.

۲۴- حالا با استفاده از (Rounded Rectangle Tool) یک شکل ساده به این حالت می کشیم.

۲۵- حالا با استفاده از دکمه های (CTRL+T) کمی شکل را به مانند نمای زیر می چرخانیم.

۲۶- پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

۲۷- باز هم با استفاده از (Rectangular Marquee Tool) قسمت سمت راست شکل فعلی را مانند نمای زیر انتخاب کنید.

۲۸- حالا دکمه Delete را بزنید و یا از منوی Edit گزینه Clear را انتخاب کنید، سپس برای خروج از حالت انتخاب دکمه های CTRL+D را فشار دهید.
۲۹- مانند مراحل اولیه کار، از این لایه یک کپی بگیرید و رنگ آن را تیره تر کنید و آن را درست در زیر لایه فعلی، البته با کمی تغییر زاویه قرار دهید.

۳۰- حالا کمی سلیقه به خرج داده و در سایت Wefunction.com آیکون مورد نظر خود را پیدا کنید و آن را مانند نمای زیر در قسمتی از قالب جاسازی کنید.

۳۱- خسته نباشید، قالب شما آماده است.

با تشکر از تمپ ها
-ایجاد انواع منوها و باکس های تب دار در چند گام ساده !
حتما در بسیاری از صفحات وب دیدید که قسمتی از صفحه یه باکس یا منو وجود داره که بالای اون چند تب یا لینک هست و با کلیک روی هر کدوم از تب ها ، بلافاصله محتوای منو یا باکس عوض میشه و محتوای مربوط به اون تب در منو نمایش داده میشه . چیزی شبیه همین تب های مرورگر ها ، منتهی در درون صفحه وب !
:: بزارید لپ مطلب رو اینطور ادا کنم :
:: دوست دارید منوها و یا باکس های تب دار (معروف به تبر – tabber) همانند زیر داشته باشید :
:: خوب ، امروز می خوایم بهتون آموزش بدیم که چطور در ۳ گام ساده اینجور منو ها و باکس های tab دار رو بسازید .
:: برای ساخت این جور tabber menu یا tabber box به ترتیب این سه مرحله زیر رو طی کنید که بسیار ساده اند و واضح توضیح داده شده چیکار کنید :
گام اول) افزودن فایل کتابخانه جاوااسکریپت tabcontent
:: برای ساخت این منوی تب دار از کتابخانه جاوااسکریپت tabcontent استفاده می کنیم که من اون رو به اضافه ی ۶ تا تم براتون آپلود کردم و می تونید از آدرس فایل های آپلود شده در ۷learn برای لود کردن اونها استفاده کنید .
در مرحله اول شما باید این دو خط رو به header صفحه html خودتون (درون تگ head) اضافه کنید .
1 | <script src= "http://7learn.com/js/tabber/tc.js" type= "text/javascript" ></script> |
2 | <link href= "http://7learn.com/js/tabber/template1/tabcontent.css" |
3 | rel= "stylesheet" type= "text/css" /> |
:: خط اول خود library رو لود میکنه و در خط دوم هم استایل و تم منوی تب دار رو تعیین می کنید . ۶ تا تم برای این منو آماده شده که شما می تونید در خط دوم با تغییر template1 به template3 , template2 …. و template6 تم منو رو عوض کنید .
:: در اینجا می تونید ظاهر هر ۶ تم رو ببینید .
گام دوم) افزودن تب ها
:: بعد از اینکه کتابخانه و تم دلخواه گفته شده در گام ۱ رو لود کردید و دو خط بالا رو در صفحه وبتون قرار دادید نوبت اینه که تب ها رو اضافه کنید . برای این منظور باید در قالبی شبیه کد زیر تب هاتون رو اضافه کنید .
2 | < li >< a href = "#view1" rel = "view1" >Tab1</ a ></ li > |
3 | < li >< a href = "#view2" rel = "view2" >Tab2</ a ></ li > |
4 | < li >< a href = "#view3" rel = "view3" >Tab3</ a ></ li > |
:: توجه کنید که حتما باید برای ویژگی class تگ ul که لیست تب ها هست ، مقدار tabs رو قرار بدید. (خط ۱)
:: هر کدوم از تگهای li یک تب رو نشون میده . دقت کنید که برای هر کدوم از لینک های درون این تب ها ویژگی rel مشخص شده . از مقدار این ویژگی برای تعیین محتوایی که باید با کلیک روی تب نمایش داده بشه استفاده میشه . مثلا برای تب دوم ویژگی rel مقدار view2 رو داره . در گام بعدی می بینید که محتوای این تب باید ویژگی id داشته باشه با همین مقدار view2 .
گام سوم) افزودن محتوای نمایش هر تب
:: خوب ، بعد از اینکه تب ها رو به صفحه وب اضافه کردید ، باید محتوای تب ها رو اضافه کنید . این محتوا رو هم در قالب و فرمت زیر اضافه میکنید :
1 | < div class = "tabcontents" > |
2 | < div id = "view1" class = "tabcontent" > |
5 | < div id = "view2" class = "tabcontent" > |
8 | < div id = "view3" class = "tabcontent" > |
:: نکته اول اینکه مقدار ویژگی class تگ div که همه محتوا ها رو در برداره باید tabcontents باشه (خط ۱ کد فوق) .
:: نکته دوم هم اینکه مقدار ویژگی class برای هر محتوا که یک تگ div هست باید tabcontent باشه . (خط های ۲ و ۵ و ۸ در کد فوق)
:: مهمتر از همه اینکه مقدار ویژگی id هر محتوا باید با مقدار ویژگی rel تب مربوط به خودش (که در گام دوم کدش رو آوردیم) برابر باشه . (خط های ۲ و ۵ و ۸ در کد فوق رو با خط های ۲ ، ۳ و ۴ در کد گام دوم مقایسه و یکسان بودن id محتوا و rel تب مربوط به خودش رو مشاهده کنید)
در نهایت شما باید یک صفحه وب با کدی شبیه زیر داشته باشید :
3 | < script src = "http://7learn.com/js/tabber/tc.js" type = "text/javascript" ></ script > |
4 | < link href = "http://7learn.com/js/tabber/template1/tabcontent.css" |
5 | rel = "stylesheet" type = "text/css" /> |
9 | < li >< a href = "#view1" rel = "view1" >Tab1</ a ></ li > |
10 | < li >< a href = "#view2" rel = "view2" >Tab2</ a ></ li > |
11 | < li >< a href = "#view3" rel = "view3" >Tab3</ a ></ li > |
13 | < div class = "tabcontents" > |
14 | < div id = "view1" class = "tabcontent" > |
17 | < div id = "view2" class = "tabcontent" > |
20 | < div id = "view3" class = "tabcontent" > |
(!) نکات مهم در استفاده از این کتابخانه
:: شما به راحتی می تونید برای هر کدوم از تب ها و یا محتوای تب ها استایل های css تعریف کنید و ظاهر منو رو به شکل دلخواه تغیر بدید .
:: اگر بخواید بیش از یک منو و باکس تب دار در یک صفحه داشته باشید حتما دقت کنید که rel و id های استفاده شده در یک منو با بقیه تداخل اسمی نداشته باشه و باید اسامی مختلفی استفاده کنید .
:: اگر می خواید این کتابخانه رو در هاست شخصی داشته باشید می تونید اونو از اینجا دانلود کنید .
امیدوارم که از این مطلب هم لذت برده باشید …
-ارسال داده های فرم های html به یک iframe
فرم های موجود در صفحات html برای دریافت ورودی از کاربر استفاده می شن . معمولا به این شکله که پس از پر کردن فیلدهای یک فرم دکمه submit رو می زنید تا داده های وارد شده رو به سمت سرور بفرستید تا اونجا عملیات مورد نیاز ( مثلا ثبت نام ، لاگین شدن ، ذخیره مشخصات و …) روی داده های ورودی شما چک و اعمال بشه .
:: در حالت پیش فرض پس از پر کردن فرم و زدن دکمه submit به یک صفحه دیگه منتقل میشید و در اونجا نتیجه ارسال اطلاعاتتون رو میبینید . مثلا در صفحه جدید نمایش داده میشه که اطلاعات شما با موفقیت ثبت شد و یا یه چیزی تو این مایه ها …
:: در آموزش امروز می خوایم بگیم که چطور اطلاعات ارسال شده رو به یک iframe بفرستید که نخواید پس از زدن دکمه submit به صفحه جدید منتقل بشید .
:: محض یادآوری بگم که با استفاده از تگ iframe شما می تونید یک صفحه وب رو درون یک صفحه وب دیگه قرار بدید . مثلا با تگ iframe زیر من صفحه دیگه ای رو که شامل یک باکس و منوی منوی تب دار هست درون این پست میزارم :
1 | < iframe name = "ifrm7" src = "http://www.7learn.com/js/tabber/demo1.html" ></ iframe > |
که نمایشش به شکل زیر میشه :
:: حالا می خوایم یه چنین چیزی رو با هم بنویسیم . که اطلاعات یک فرم رو به یک iframe در زیر اون بفرستیم .
:: یک رنگ رو انتخاب کنید و دکمه submit رو بزنید تا نتیجه رو ببینید .
:: برای این کار شما به دو تا فایل نیاز دارید . یکی فایلی که فرم html شما رو در بر داره (form.html) و دیگری فایلی که اطلاعات فرم به اون ارسال می شه تا پردازش لازم روی اطلاعات ورودی رو انجام بده (print.php) .
:: فایل form.html رو به شکل زیر داریم که شامل یک فرمه که یک منوی select درون اون هست که رنگ مورد علاقه کاربر رو میخواد دریافت کنه . و در آخر این فایل هم iframe ی که قرار نتیجه رو در اون بیاریم آوردیم .
3 | < title >7Learn Form to iFrame</ title > |
17 | border:1px solid silver; |
21 | background-color: #a7ff89; |
26 | < form action = "http://7learn.com/files/frmifr/print.php" target = "ifrm7" method = "post" class = "frm cntr" > |
27 | < select name = "fcolor" > |
28 | < option value = "white" >Select Yor Favorite Color ...</ option > |
29 | < option value = "red" >Red</ option > |
30 | < option value = "green" >Green</ option > |
31 | < option value = "blue" >Blue</ option > |
32 | < option value = "yellow" >Yellow</ option > |
34 | < input type = "submit" value = " Submit " > |
38 | < iframe name = "ifrm7" src = "http://www.7learn.com/files/frmifr/print.php" > |
:: در این کد خطوط ۲۶ و ۳۸ رو که مشخص شده دقت کنید . برای اینکه صفحه دریافت اطلاعات در یک iframe باز بشه فقط کافیه به iframe ی که تعریف میکنید (خط ۳۸) با استفاده از ویژگی name یک نام رو اختصاص بدید و همون نام رو به عنوان ویژگی target تگ فرم مورد نظرتون (خط ۲۶) اضافه کنید . میبینید که در اینجا مقدار ifrm7 رو برای نام iframe و برای target فرم تعیین کردیم . یعنی می خوایم اطلاعاتی که به صفحه print.php (مقدار ویژگی action فرم در خط ۲۶) می فرستیم نتیجش در این iframe معلوم بشه ! به همین سادگی . هیچ نیازی به استفاده از تگ اضافه یا کدهای جاوااسکریپت نیست !
:: اگر مقدار target فرم رو _blank بزارید صفحه نتیجه در یک پنجره جدید باز میشه . درست شبیه همون چیزی که برای لینک ها داریم .
:: اطلاعات این فرم با متد post به ادرس http://7learn.com/files/frmifr/print.php ارسال میشه .
:: اینم فایل print.php که اطلاعات دریافت شده فرم رو که در آرایه _POST پی اچ پی حاضر شده رو ، میگیره و پردازشی که در اینجا فقط چاپ یه متن و قرار دادن رنگ دریافت شده به عنوان پس زمینه هست رو انجام میده :
3 | <title>7Learn Form to iFrame</title> |
4 | <style type= "text/css" > |
14 | if (isset( $_POST [ 'fcolor' ])) { |
15 | $color = $_POST [ 'fcolor' ]; |
20 | <body bgcolor= "<?php echo $color?>" > |
21 | <?php if ( $isFormPosted ) : ?> |
23 | Your Favorite color is my background color (<?php echo $color ?>) ! . |
26 | <span style= "font-size: 16px" > |
27 | Please Submit the form ! |
:: در فایل دریافت کننده اطلاعات فرم یعنی print.php رنگ دریافت شده رو به همراه یک متن چاپ می کنیم و پس زمینه صفحه نتایج رو هم به همون رنگ انتخاب شده توسط کاربر تغیر میدیم !