مثال های پیشرفته

مثال های پیشرفته (6)

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

آموزش طراحی Menu سایت با HTML5 و CSS

2 آموزش طراحی Menu سایت با HTML5 و CSS

با یکی دیگر از آموزشهای سایت آسارایان با عنوان "آموزش طراحی Menu سایت با HTML5 و CSS" در خدمت شما هستم .تمام وب سایتهای اینترنتی دارای Menu می باشند و منو اصلی ترین بخش یک قالب وب سایت به شمار می آید که اگر بدرستی تنظیمات و رنگ آن انتخاب نشود ، دسترسی به قسمت های مختلف سایت تقریبا امکان پذیر نمی باشد .  در این مقاله آموزشی با استفاده از Html5 و Css یک منوی افقی برای شما طراحی می کنم و آموزش آن را همراه با کد و تصاویری که در ادامه آماده کرده ام قرار میدهم. برای درک بهتر می توانید ابتدا دمو را مشاهده کرده و فایل اصلی را در پایان آموزش دانلود کنید . سعی کنید ابتدا یک بار آموزش را دقیق بخوانید سپس دمو را مشاهده و اگر به نتیجه نرسیدید از فایل اصلی استفاده کنید . سطح این آموزش متوسط ، پیشرفته می باشد و تگها به صورت کامل توضیح داده نمی شود . کاربرانی که می خواهند کاربرد تگ های CSS را بدانند باید به بخش مقدماتی سایت مراجعه کنند .

 دموی آموزش

آموزش ساخت فرم خبرنامه با استفاده از HTML و CSS

2 آموزش ساخت فرم خبرنامه با استفاده از HTML و CSSعضو خبرنامه سایت آسارایان هستید ؟ یک فرم که ایمیل شما را دریافت و در بانک اطلاعات سایت ذخیره می کند و هر روز سر یک ساعت خاص آموزشهای فعال شده تا زمان مشخص شده را به ایمیل شما ارسال می کند .  این فرم از دو بخش تشکیل شده . بخش اول که با HTML و CSS طراحی شده و بخش دوم که مربوط به زبان سمت سرور و پایگاه داده می شود. بنده بخش اول را میخواهم در ادامه برای شما با استفاده از تگ های HTML  و CSS طراحی کنم . کار بسیار ساده و راحتی می باشد که کاربران به راحتی می توانند انجام بدهند . با من همراه باشید تا روش انجام اینکار را توضیح بدهم .  

آموزش طراحی فرم Login با استفاده از HTML و CSS

7 آموزش طراحی فرم Login با استفاده از HTML و CSSیکی از اصلی ترین بخش های وب سایت پویا یا داینامیک ، فرم ثبت نام و ورود کاربران می باشد . هیچ وب سایتی داینامیکی وجود ندارد که دارای فرم ثبت نام نباشد مگر اینکه دارای انجمن باشد .  فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
در ادامه میخواهم روش طراحی یک فرم ثبت نام را به صورت ساده و بدون هیچ طرح خاصی توضیح بدهم تا به راحتی بتوانید با استفاده از یکسری از تگ های ساده فرمتان را طراحی و شکل ظاهری آن را تغییر بدهید .  برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . در این مطلب آموزشی بر خلاف دیگر مقالات می خواهم فایل و کدهای مربوط به ظاهر قالب که در CSS تایپ می شود را در خود فایل index.html در قالب style ذخیره کنم. بد نیست با این روش نیز آشنا شوید .

قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم.
فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

در پایان می توانید فایل تمرینی را دانلود و از آن استفاده کنید

آموزش طراحی فرم ورود به سایت با Html و Css

فرم ورود به بخش آموزش

طراحی فرم برای هر وب سایتی جزو اصلی ترین بخش ها می باشد که بدلیل همه گیر شدن سیستم های مدیریت محتوا کاربران نیازی به کد نویسی و طراحی این صفحات ندارند . معمولا با نصب یک ماژول این کدها در جای مشخص شده نمایش داده می شوند. ولی اگر بخواهید قالب را خودتان طراحی کنید یا شکل شاهری کد را تغییر بدهید باید با تگهای تشکلی دهنده فرم آشنایی داشته باشید .
در ادامه من یک فرم ساده برای ورود را با Html و Css طراحی میکنم . سطح این آموزش مقدماتی و متوسط می باشد .  فرم ورود ما دارای یک باکس ایمیل و یک باکس برای وارد کردن رمز عبور می باشد . در ادامه هم یک کلید برای ارسال یا همان ورود و تائید اطلاعات قرار میدهم .  قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم. فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

طراحی فرم ثبت نام با HTML و CSS

تماس با ماطراحی فرم تماس با ما نیاز به تگهای HTML . Css همراه با یک پایگاه داده برای ذخیره و ارسال اطلاعات دارد . به امید خدا از هفته آینده آموزش زبان برنامه نویسی PHP توسط آقای علی شکاری آغاز می شود. مبحثی که از مقدماتی آغاز و تا سطح پیشرفته به امید خدا ادامه خواهد داشت . 
اما در این مطلب میخواهم یک صفحه تماس با ما برای شما طراحی کنم تا بیشتر با تگ های این بخش آشنا شوید . قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم. فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

تگ input در form

اصلی ترین تگی که به همراه تگ form در ایجاد قابلیت های تعاملی نقش دارد، input است که با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات نظیر فیلد متنی (text)، فیلد کلمه عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و ... را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید.

آموزش ساخت form ثبت نام با Html و Css

4 آموزش ساخت form ثبت نام با Html و Cssهیچ سایتی را نمی توانید پیدا کنید که دارای فرم ثبت نام یا ورود کاربران نباشد البته سایتهای HTML از این قاعده مستثنی می باشند ولی تقریبا تمام وب سایتهای فعال دارای یک فرم ثبت نام هستند . فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
در ادامه میخواهم روش طراحی یک فرم ثبت نام را به صورت ساده و بدون هیچ طرح خاصی توضیح بدهم تا به راحتی بتوانید با استفاده از یکسری از تگ های ساده فرمتان را طراحی و شکل ظاهری آن را تغییر بدهید .  برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . 

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا