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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای ساخت این فرم از 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 می گیرد.

چند نکته:

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

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

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

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

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

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

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

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

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

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

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

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