برنامه نویسی کلاینت ساید وب

برنامه نویسی کلاینت ساید وب (بخش اول قسمت سوم)

برنامه نویسی کلاینت ساید وب

برای مطالعه  بخش اول قسمت دوم معرفی و برنامه نویسی کلاینت ساید اینجا کیلیک کنید.

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

توجه داشته باشید که در طراحی صفحه وب نیازی به شناخت کامل تگ ها و خواصشان نیست! فقط کافیست بدانید کدام تگ چه کاری انجام می دهد و در کجا قابل استفاده است. از این رو با استفاده از Snippet های visual studio code این طراحی را جلو خواهیم برد.

بدین منظور vs code را باز کرده و مطابق تصاویر زیر عمل نماید:

(برای مشاهده اندازه واقعی روی عکس ها کلیک کنید.)

Capture

Capture1

سپس یک فولدر برای vs code مشخص می کنیم تا تمام فایل ها را درون آن ذخیره کنیم. برای این کار یک فولدر در جایی مناسب ساخته و از منوی File زیر منو Open Folder را کلیک می کنیم تا پنجره انتخاب فولدر باز شود سپس فولدری را که ساخته اید پیدا کرده و انتخاب کنید و در نهایت Select folder کلیک نمایید. باید vs code شما به این شکل در بیاید:

Capture2

میز کار شما آماده است! فقط یک فایل index.html ساخته و کار را آغاز می کنیم:

Capture3

Capture4

اما مروری بر Snippet ها. Snippet ها قطعات کد آماده ای هستند که با استفاده از یک کلمه کلیدی در ادیتور نوشته می شوند. برای VS Code، Snippet  های بسیاری ساخته شده است. شما می توانید تمام کلمات کلیدی  Snippet که نصب کردیم را صفحه این Snippet مشاهده کنید:

Capture5

و در انتها دانلود bootstrap!

توجه داشته باشید که فعلا فقط به فایل bootstrap.min.css احتیاج داریم.

با کد bs3-template:html5 شروع می کنیم:

این کد تمام تگ های مهم و پایه یک سند html را به سند اضافه می کند. می توانید به صورت اختصار bs3ht هم نوشته و اینتر بزنید.

Capture6

همانطور که در تصویر بالا مشاهده می کنید تمام تگ های مورد نیاز اضافه شد! حالا نوبت به ویرایش تگ ها می رسد. اول از همه فایل bootstrap که دانلود کردید را دریک فولدر با نام متعارف  CSS ,style یا هر نام دیگری در داخل فولدر اصلی کپی کنید و آدرس تگ link به  آدرس جدید تغییر دهید  و تگ های script را هم پاک کنید. فعلا احتیاجی به آنها نیست:

Capture7

معرفی تگ h در صفحه: سری تگ های h که از h1 تا h6 را به خود اختصاص می دهند برای عنوان گذاری و نوشتن تیتر به کار می روند. هرجه عدد این تگها به ۱ نزدیک تر باشد نوشته بزرگتر و هرجه به شش نزدیک شود نوشته کوچک تر می شود.

همه چیز برای طراحی یک صفحه تماس با ما آماده است. اما چرا صفحه تماس با ما؟ این صفحه به علت دربرگیری تگ های مختلف از قبیل form و input  و…. گزینه مناسبی برای آموزش می باشد.

کلید های bs3-container, bs3-row , bs3-header:

Bs3-container: این کلید یک تگ divبا کلاس containerایجاد میکند. هرچه که در این تگ قرار بگیرد ۸۵% عرض صفحه را به خود می گیرد.

Bs3-row: این کد یک تگ div با کلاس row ایجاد می کند و یک ردیف تشکیل می دهد که صفحه را به ۱۲ ستون تقسیم می کند.

Bs3-header: این کد یک تگ div با کلاس page-header ایجاد می کند که برای صفحه یک هدر با یک تیتر و توضیح کوتاه ایجاد می کند.

Capture8

Capture9

اضافه کردن منو:

برای اضافه کردن منو به زیر هدر سایت از کلید bs3-navbar استفاده می کنیم. در این مثال از bs3-navbar:invers استفاده شده است. این کلید یک تگ nav (این تگ در طراحی منو ها و ساید بار ها استفاده می شود) با کلاس navbar navbar-invers  ایجاد می کند که با استفاده از تگ ul با کلاس nav  navbar-nav که برای ایجاد لیست استفاده می شود گزینه های منو را ایجاد کرده و در انتها داخل لیست با استفاده از تگ a  که برای ایجاد لینک به کار می رود به گزینه ها لینک اختصاص می دهد. کلاس active که در لیست استفاده شده برای فعال کردن یا حالت انتخاب شده یک لینک می باشد.

Capture10

تا این قسمت از کار ما به چنین شکلی دست یافته ایم:

Capture11

حالا نوبت به طراحی پنل ها میرسد.

برای طراحی پنل ها با استفاده از امکانات bootstrap نیاز به یک row جدید داریم. بعد از بسته شدن تگ div قبلی که کلاس  row را داشت یک row جدید ایجاد کرده و با استفاده از bs3-col در داخل این ردیف یک ستون جدید بوجود می آوریم. Bs3-col متناسب با عددی که از ۱ تا ۱۲ به آن اختصاص می دهیم از ۱ تا ۱۲ ستون موجود در row را به تگ div که کلاس col را دارد اختصاص می دهد. و در نهایت برای ملموس کردن ابعاد ستون و داشتن پارتیشن بندی معقول از bs3-panel استفاده می کنیم که یک تگ div با کلاس panel panel-default ایجاد می کند. پنل همواره دارای سه بخش می باشد: ۱- panel header 2- panel body 3- panel footer همانطور که از نامشان هم پیداست هدر برای عنوان پنل ، بدنه برای قسمت اصلی پنل و فوتر برای قسمت انتهایی پنل می باشد. در اینجا از bs3-panel استفاده شده که فقط بدنه دارد:

Capture12

برای ساید بار یا ستون کناری هم در همان  ردیف بالا یک ستون جدید ایجاد می کنیم:

Capture13

ساخت فرم تماس با ما:

برای ساخت این فرم از bs3-form استفاده می کنیم. این کد یک تگ form که برای ارسال اطلاعات با متد های get و post  به سرور استفاده می شود ایجاد می کند. در داخل تگ، از بالا ، تگ legend که یک تیتر برای فرم ایجاد میکند، یک تگ div با کلاس form-group که برای گروه بندی برچسب ها و textbox های مرتبط با هم استفاده می شود و در نهایت یک دکمه که برای submit کردن یا ارسال اطلاعات فرم به سرور می باشد، قرار دارد.

تگ input: این تگ برای ایجاد فیلد دریافت اطلاعات به صورت های textbox, submit, button, checkbox, tel, password, file, date,…. با استفاده از خاصیت type استفاده می شود.

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

خاصیت placeholder در این تگ و تگ های مشابه برای ایجاد یک توضیح در باره فیلد در داخل خود فیلد به صورت کمرنگ استفاده میشود.

در صورتی که این تگ در داخل div با کلاس form-group یا input-group قرار گیرد کلاس form-control می گیرد.

Capture14

چند نکته:

  • برای ارسال صحیح اطلاعات به سرور هر فیلد که یک ورودی متناظر در سمت سرور را داراست، باید با استفاده از خاصیت name همنام با آن ورودی شود تا اطلاعات به درستی ارسال شود.
  • برای اضافه کردن فیلد در فرم باید کل div که کلاس form-group را دارد کپی شود.

با توجه به نکات بالا در نهایت فرم ما به این شکل در می آید:

Capture15

توضیح: تگ textarea برای دریافت متون بلند یا استفاده از ویرایشگر های متن استفاده می شود و  خواص مشابه با input را دارا می باشد.

خوب تا اینجا ما چنین چیزی را در مرورگر مشاهده خواهیم کرد:

Capture16

اما در انتهای کار به قسمت پایانی صفحه یعنی footer می رسیم:

متاسفانه bootstrap کلاسی را برای ساخت فوتر پیش بینی نکرده است. بدین منظور در این آموزش از پنل که پیشتر توضیح داده شد بجای فوتر استفاده میکنیم تا در بخش بعد استایل نویس با زبان css را یاد بگیریم:

Capture17

ودر انتها به چنین صفحه ای دست یافته ایم:

Capture18

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

شما می توانید فایل مربوط به پروژه را از این لینک دانلود کنید.

با ما همراه باشید.

برای مطالعه  بخش دوم  معرفی و برنامه نویسی کلاینت ساید اینجا کیلیک کنید.

نویسنده: مهندس علیرضا دادرس

دانلود

۱ دیدگاه

  1. […] برای مطالعه ادامه  این بخش اینجا کیلیک کنید. […]

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