طراحی صفحه logIn و SignUp


صفحه لاگین یکی از امکانات هر وبسایت کاربر محوری است  و طراحی ساده ای نیز دارد.

در ابتدای هر سند از سه تگ Html، body و head استفاده می کنیم. تگ head یکی از مهم ترین تگ های Html است و برای اطلاعات کمکی و لینک به فایل های کمکی مورد استفاده قرار می گیرند. روال کار بخ این شکل است که ابتدا با استفاده از Html ساختار کلی را تعریف می کنیم سپس برای هر کدام از کلاسهایی که تعریف کرده ایم style در نظر میگیریم به این منظور قبل از نام کلاس . (Dot) قرار می دهیم و خصوصیات را اضافه می کنیم و در قسمتهایی که نیاز به عملیات و رویدادی باشد از JavaScript کمک میگیریم تا بتواینم صفحه را به طور کامل طراحی کنیم. تگ div یکی از مهم ترین و کاربردی ترین تگ ها در طراحی صفحات وب محسوب می شود و برای تعیین ساختار اصلی صفحه استفاده می شود.

برای طراحی صفحه لاگین مراحل به شکل زیر انجام می شود:

در ابتدا برای کل صفحه تگ div با کلاس cotn_principal تعریف می کنیم. برای این که موقعیت عنصر در هر مکانی نسبت به بالا، راست، پایین یا چپ صفحه تنظیم شود در قسمت CSS  مقدار Position  را برابر absolute قرار میدهیم. طول و عرض صفحه را با width و  height تعیین میکنیم. با استفاده از کد رنگ ها به صفحه رنگ پس زمینه میدهیم.  با استفاده از linear-gradient دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو می شوند. تا اینجای کار تا مرحله زیر پیش رفته ایم.

صفحه را با استفاده از تگ div لایه‌بندی می‌کنیم. ناحیه‌ای که می‌خواهیم طراحی را انجام دهیم را با تگ div مشخص می‌کنیم و کلاس cont_centrar را برای آن در نظر می‌گیریم. در قسمت style کلاس را تعریف می‌کنیم و خصوصیات را برای آن تنظیم می‌کنیم.

در خط اول عنصر موردنظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می‌شود. ویژگی float  از ویژگی‌هایی است که مکان عنصر را مشخص می‌کند و باعث می‌شود تا عنصر به سمت چپ یا راست عنصر نگه‌دارنده‌اش هول داده‌شده یا شناور شود. در خط انتهایی نیز عرض را تعیین می‌کنیم که می‌تواند هم درصدی بیان شود و هم به‌صورت پیکسلی.

برای قسمت login و signup ناحیه‌ای را با استفاده از کلاس cont_login  در نظر می‌گیریم در قسمت CSS با استفاده از position با مقدار relative عنصر موردنظر را نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می‌کنیم. عرض قسمت موردنظر را با Width برابر 640  پیکسل قرار می‌دهیم. برای تنظیم فاصله از لبه سمت چپ به خصوصیت  leftمقدار می‌دهیم. برای تنظیم حاشیه تصویر از سمت چپ margin-left را مقداردهی می‌کنیم.

حال طراحی دو پنجره‌ی login و signup را انجام می‌دهیم. تگ div باکلاس cont_info_log_sign_up را تعریف می‌کنیم و style موردنظر را اعمال می‌کنیم. برای این‌که موقعیت عنصر در هر مکانی نسبت به بالا، راست، پایین یا چپ صفحه تنظیم شود مقدار position را برابر absolute قرار می‌دهیم. طول و عرض و فاصله از بالا را تنظیم می‌کنیم.

دو تگ div دیگر باکلاس‌های col_md_login  و cont_ba_opcitiy  برای ناحیه اطراف و داخل login می‌نویسیم.

در ابتدا عنوانی را باید اختصاص بدهیم برای این منظور از تگ h2 استفاده می‌کنیم و نوشته‌ها را نیز داخل تگ p قرار می‌دهیم. درنهایت با یک کلیک loginمی‌شویم پس باید دکمه‌ای بدین منظور طراحی کنیم. از تگ button باکلاس btn_login اقدام می‌کنیم و با کلیک روی دکمه باید رویدادی رخ دهد بدین منظور از توابع جاوا اسکریپت استفاده می‌کنیم.طبق همین روال را برای signup انجام می‌دهیم.

برای دو کلید Login و SignUp از جاوا اسکریپت به شکل زیر استفاده می‌کنیم:

از تابع querySelector() استفاده می‌کنیم تا اولین عنصری که در CSS برای آن مشخص کرده‌ایم را برگرداند. هم‌چنین از تابع setTimeout  هم به‌منظور تعیین زمان نمایش استفاده می‌کنیم.

برای تصویر و پس‌زمینه‌ی قرارگرفته شده از تگ‌های div و img استفاده می‌کنیم و در تگ img منبع و آدرس عکس را مسیریابی می‌کنیم.

position:relative : موقعیت المان را مشخص می‌کنیم.

float:left  : المان به سمت چپ هول داده می‌شود.

width: 640px: عرض المان را تعیین میکند.

Height:280px : ارتفاع المان را تعیین میکند.

overflow: hidden : این خصوصیت تعیین می‌کند که محتوایی که از مرزهای عنصر خارج می‌شود چگونه نماش داده شود و شامل چهار مقدار visible ، hidden ، scroll و auto است در این نمونه، با مقداردهی hidden محتوای سرریز شده نمایش داده نمی‌شود و تصویری که قراردادیم بیرون از قاب تعیین‌شده نمایش داده نمی‌شود.

background-color: #fff : رنگ پس زمینه را مشخص میکند.
margin-top: 100px : حاشیه از بالا را تنظیم میکند.

(box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5 : با این تابع به المان موردنظر سایه می‌دهیم.

 

وقتی کادر ثبت نام و عضویت را نیز باز می کنیم نیاز به تصویر زمینه دارد. برای تصویر داخل کادر نیز از دو تگ div و یک تگ img استفاده می‌کنیم.

برای طراحی صفحه ثبت‌نام ابتدا با تگ div لایه‌بندی صفحه را انجام می‌دهیم سپس با استفاده از تگ‌های input ورودی را از کاربر دریافت می‌کنیم برای نوشتن ایمیل نوع نوشته از نوع text و برای پسورد از نوع Password استفاده می‌کنیم. درنهایت کلید login را با تگ button قرار می‌دهیم.خاصیت placeholder یک متن راهنما را برای کمک به کاربر جهت پر کردن کادر متن تعیین می کند. برای صفحه عضویت هم از همین تگ ها استفاده می کنیم.

دسته بندی نشده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *