ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش اول

در این سری از مقالات آموزش ساخت فروشگاه اینترنتی ، برای ایجاد فروشگاه خود ما از html ، css و فریمورک bootstrap استفاده می کنیم ، و کد های خود را درون ادیتور کد vscode ایجاد می کنیم ، همچنین برای تصاویر وب سایت خود در این مقاله از تصاویر سایت دیجی کالا استفاده شده که شما می توانید با توجه به آموزش های این مقاله از تصاویر دلخواه خود استفاده کنید.

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

در تصویر اول همانطور که مشاهده می کنید در سمت راست قالب فروشگاهی ، لیستی از مواردی مانند خرید اقساطی ، موجودی کالا و... قرار دارد که شما هنگام ایجاد این بخش می توانید لیست مورد نظر خود را متناسب با نوع وب سایت فروشگاهی خود تغییر دهید ، در همین بخش و در سمت چپ قالب فروشگاهی ما از دو دکمه (button) (فارسی - english) برای چند زبانه کردن قالب خود استفاده می کنیم.

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

در ادامه منوی وب سایت خود را ایجاد کردیم که شامل : خانه ، پرفروش ترین ها ، تخفیف ها و پیشنهاد ها و دسته بندی کالا ها می باشد ، هنگام ایجاد این بخش یادمیگریم که چطور منوی دلخواه خود را ایجاد کنیم .

در بخش پایین منوی خود یک اسلایدر قرار دادیم که شما می توانید تصاویر خود را در آن قرار دهید .

در ادامه بخشی با عنوان عضویت ویژه ایجاد کرده ایم که متن ما در سمت چپ و تصویر ما در سمت راست قرار دارد ، شما میتوانید از این بخش به عنوان مثال برای معرفی محصول جدید خود استفاده کنید.

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

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

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

در تصویر چهارم و در بخش انتهایی فوتر وب سایت ما قرار دارد که شامل دسته بندی ، درباره ما و تماس با ما می باشد همچنین در قسمت پایین آن ایکون های شبکه مجازی قرار دارد.

در هر بخش آموزش های لازم مربوط به کد نویسی ، اسلایدر ها ، نحوه انتخاب فونت مناسب ، سایز فونت ها و ... آموزش داده می شود.

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

تصویری کامل از وب سایت :

قدم اول _ نصب و راه اندازی ویرایشگر کد (vscode)

ادیتور ها و یا ویرایشگر های کد ایجاد و اجرایی کد های برنامه نویسی را بسیار ساده تر می کنند ، انواع ویرایشگر کد وجود دارد که شما می توانید در این مقاله با میانبر های مفید ادیتور VSCode آن آشنا شوید .

برای نصب و راه اندازی ویرایشگر کد ، بر روی سیستم خود وارد وب سایت vscode شده و به راحتی ادیتور خود را نصب کنید.

قدم دوم _ ایجاد فولدر های پروژه

وارد ادیتور کد شوید و چند فولدر با نام های html ، css ، js ، img ، fonts ایجاد کنید ، در ادامه درون هر کدام از این فایل ها داده های مربوطه را قرار میدهیم تا ویرایشگر کد ما استاندارد تر و منظم تر باشد.

بررسی فولدر img

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

بررسی فولدر fonts

در حالت عادی متن موجود در وب سایت شما از فونت خاصی پیروی نمی کند ، برای اینکه ظاهر وب سایت شما زیبا تر شود می توانید از فونت های رایگان و یا با هزینه اندکی فونت خریداری کنید و فونت مورد نظر خود را درون فایل fonts قرا دهید تا در بخش style.css خود آن هارا فرا خوانی کنیم و از آن ها استفاده کنیم.

بررسی فولدر css

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

بررسی فولدر html

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

قدم سوم _ نصب و راه اندازی bootstrap

bootstrap یکی از محبوب ترین فریم ورک های css است که به وسیبله ی آن می توانیم کد های css خود را خوانا تر ، کوتاه تر ، منظم تر و با شکل و شمایل جالب تری ایجاد کنیم برای استفاده از آن به سایت bootstrap رفته و به راحتی از طریق cdn (هنگام اجرای کد ها حتما باید به اینترنت متصل باشید) و یا دانلود فایل های آن بوت استرپ را به سند html خود اضافه کنید. (در ادامه کد های مربوط به اضافه شدن بوت استرپ را باهم بررسی می کنیم) همچنین شما می توانید در این بخش دوره آموزش بوت استرپ ۵ + پروژه به صورت کاملا رایگان کار با این فریم ورک را یادبگیرید.