آموزش برنامه نویسی - تاپ دمی
ورود عضویت
ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش دوم

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

طراحی وب

19 اردیبهشت، 1402

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

قدم چهارم _ شروع به کار با html

بعد از اینکه فایل index.html خود را ایجاد کردید مانند کد های زیر ساختار اولیه سند خود را ایجاد کنید :

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topdemy.ir</title>
</head>
<body>

</body>
</html>

برای این که می توانید از کلید میانبر ! + shift استفاده کنید

ساختار سند html ما از دو بخش head و body تشکیل شده که بخش body شامل کد های بخش های مختلف وب سایت می باشد و در قسمت تگ head لینک ها و meta تگ های ما قرار میگرید.

در این دوره آموزشی می توانید به صورت رایگان شروع به یادگیری html کنید.

قدم پنجم _ اضافه کردن فایل به سند html

بخش اول bootstrap


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topdemy.ir</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-rtl.css">
</head>
<body>

 <script src="js/bootstrap.min.js"></script>
</body>
</html>

همانطور که مشاهده می کنید در پایین تگ title لینک های بوت استرپ ما قرار دارند (بعد از دانلود کردن فایل های بوت استرپ وارد پوشه css شده و فایل های css آن را به صورت لینک در قسمت head قرار دهید) اگر از روش cdn استفاده کرده باشید لینک زیر را باید در سند خود قرار دهید :

فایل css :

    https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css

همچنین در بالای تگ body ما تگ script را داریم که به فایل های جاوااسکریپت ما در بونت استرپ ادرس دهی شده است (بعد از دانلود کردن فایل های بوت استرپ وارد پوشه js شده و فایل های css آن را در تگ script بالا تر از آخرین تگ body قرار دهید) اگر از روش cdn استفاده کرده باشید لینک زیر را باید در سند خود قرار دهید :

فایل javascript :

  https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js

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

بخش دوم استایل و جاوااسکریپت

همانطور که قبلا اشاره شده ما به دو فایل style.css و app.js نیاز داریم تا کد های سی اس اس و جاوااسکریپت دلخواه خود را در آن ایجاد کنیم (توجه داشته باشید نام گذاری اسامی فایل ها دلخواه است) ، پس از ایجاد این فایل ها مطابق کد های زیر آن ها را در سند html خود قرار می دهیم.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topdemy.ir</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-rtl.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

قدم ششم_ کار با اسلایدر ها

در این پروژه ی آموزشی ما از دو نوع اسلایدر مختلف استفاده کردیم تا روش استفاده از انواع اسلایدر ها را باهم مرور کنیم ، ابتدا اسلایدر Swiper برای این کار وارد وب سایت آن شده و بر روی گزینه Getting Started کلیک کنید سپس از روش npm و یا cdn مطابق کد های زیر سویپر را به سند html خود اضافه کنید :

روش npm :

    $ npm install swiper
 // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/css';

  const swiper = new Swiper(...);

روش cdn :

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script
<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.esm.browser.min.js'

  const swiper = new Swiper(...)
</script>

افزودن Swiper به سند html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topdemy.ir</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-rtl.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

پس از افزودن فایل ها به سند html می توانید از کد های زیر را در بخش های مختلف وب سایت خود قرار دهید و از آنها برای کنترل اسلایدر خود استفاده کنید :

بخش html :

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

بخش css:

.swiper {
  width: 600px;
  height: 300px;
}

بخش js:

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

اسلایدر دیگری که روش کار با آن را یاد میگریم اسلایدر Owl Carousel است ، وارد وب سایت آن شده و بر روی گزینه Demos کلیک کنید پس از آن انواع مختلف اسلایدر را مشاهده می کنید که می توانید مطابق موضوع وب سایت خود یکی از آن ها را انتخاب کرده ، برای مثال درحالت Basic می توانید از کد های زیر استفاده کنید :

بخش html :

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

بخش js:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

و یا بر روی گزینه Download کلیک کرده و فایل های آن را دانلود کنید ، در ادامه کار بر روی وب سایت فروشگاهی کد های زیر را به سند html خود اضافه کنید :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topdemy.ir</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-rtl.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

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

قدم هفتم _ کار با ایکون ها (fontawesome)

برای استفاده از ایکون های مختلف روش های گوناگون و سایت های مختلفی وجود دارد در این مقاله آموزشی ما از fontawesome استفاده کردیم برای کار با آن وارد وب سایت شده بر روی گزینه دانلود کلیک کرده و فایل های آن را به سند html خود اضافه کنید.

بخش نهایی افرودن فایل ها به سند html

به صورت کلی همه فایل های زیر را میتوانید به سند html خود اضافه کنید :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>topdemy.ir</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-rtl.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <script src="js/popper.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

همانطور که مشاهده می کنید دو فایل popper و jquery هم به فایل های ما اضافه شده اند که این دو فایل هنگام استفاده از اسلایدر ها نیاز هستند و شما هم میتوانید این فایل ها را به سند html خود اضافه کنید.

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

تگها:

#html #css #Bootstrap #فریمورک

توسعه دهنده وب

محبوب ترینها
دسته بندی مقالات
پی اچ پی
طراحی وب
جاوا اسکریپت
کاربردی
لاراول
دیتابیس

این مقاله چقدر مفید بود ؟

مقالات مشابه