طراحی سایت دیجی کالا با html امکانات کامل

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

سایت دیجی کالا رابط کاربری فوق العاده ای دارد و سال هاست که توسط کارشناسان Ui و UX بهینه سازی شده است، به خصوص با مگا منوی حرفه ای. در واقع وقتی در سایت دیجی کالا هستید و راه های مختلفی برای گذر از دسته بندی محصولات وجود دارد گم نمی شوید.محصولات مرتبط و مشابه وجود دارد. امکانات و ظاهر زیبای قالب دیجی کالا باعث شده تا افراد زیادی به دنبال سایتی مشابه دیجی کالا باشند.

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

صفحات وب سایت دیجی کالا

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

صفحه اصلی

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

صفحه محصولات

اطلاعات کامل محصول مانند توضیحات محصول، تصاویر، قیمت و محصولات مشابه باید در این صفحه قرار گیرد.

صفحه سبد خرید

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

صفحه سبد خرید خالی است

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

با ما و صفحه درباره ما تماس بگیرید

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

صفحات دسته بندی

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

صفحه 404

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

صفحه ورود و ثبت نام

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

ساختار اسکلتی سایت دیجی کالا

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

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

فن آوری های مورد نیاز برای طراحی سایتی شبیه دیجی کالا با HTML

امروزه فناوری های مختلفی وجود دارد که می توانید از آنها برای طراحی قالب استفاده کنید، اما معروف ترین و اولین زبان ها HTML، CSS و JS هستند:

• HTML: ساختار اصلی سایت به صورت HTML نوشته شده است، مانند نقشه یک ساختمان است و طراحی اصلی سایت به این زبان نوشته شده است، کار با کدهای HTML بسیار آسان است و چندان پیچیده نیست و نیاز به کمی تمرین دارد.
• CSS: کدهای CSS برای استایل دادن به عناصر HTML، مواردی مانند رنگ، حاشیه عنصر (Border)، سایه، گرادیان، تنظیم پس‌زمینه و غیره استفاده می‌شوند. به قطعات ایجاد شده از HTML با کدهای CSS اضافه می شوند.
• جاوا اسکریپت: که به اختصار به صورت JS نوشته می شود، به سایت شما جان می بخشد و آن را پویا می کند مواردی مانند اعتبارسنجی فرم ها، حرکت خودکار اسلایدرها، نمایش پنجره های بازشو بدون رفرش کردن صفحه با جاوا اسکریپت به سایت اضافه می شوند.
• بوت استرپ: علاوه بر نمایش صحیح در دسکتاپ، سایت شما باید در تلفن های همراه، تبلت ها و سایر دستگاه ها با اندازه های مختلف صفحه نمایش به درستی نمایش داده شود و اینجاست که باید از فناوری بوت استرپ استفاده کنید تا سایت خود را ریسپانسیو کنید.

البته امروزه فریمورک‌ها و مواردی مانند HTML5، CS5، React، Node.js، Node.js، Angular و غیره اضافه شده‌اند، اما همچنان پیش‌نیاز همه موارد HTML و CSS است. ساختار کلی سایت را با کدهای HTML ایجاد کنید، سپس هر قسمت را با استفاده از کدهای CSS استایل دهید.

مراحل ساخت وب سایت دیجی کالا با html

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

روش دوم این است که خودتان شروع به کدنویسی کنید. در طراحی سایت دیجی کالا می توانید از HTML، CSS و جاوا اسکریپت استفاده کنید. همچنین فریمورک های مختلف جاوا اسکریپت مانند Vue.js، React، JQ و غیره. امکانات زیادی را به سایت اضافه کنید. . در زیر تمام مواردی را که برای طراحی سایتی شبیه دیجی کالا با HTML و CSS نیاز دارید ارائه می دهیم:

ساختار اصلی سایت

ساختار اصلی یک سایت شامل کدهای زیر است

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<title>Digikal</title>
</head>
<body>
</body>
</html>

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

ایجاد لینک با کدهای CSS

هنگام نوشتن کدهای CSS، از کد زیر در تگ head برای لینک دادن به کدهای HTML استفاده کنید

<link href="style.css" rel="stylesheet">

تگ div

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

تگ img

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

<div class="slideshow-container">

یک نوار لغزنده درست کنید

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

کد زیر یک نمایش اسلاید بسیار ساده یا 3 عکس است

<div class="slideshow-container">

<div class="mySlides fade">

<img src=" style="width:100%">

<div class="mySlides fade">

<div class="slideshow-container">

<div class="mySlides fade">

<img src=" style="width:100%">

</div>

<div class="mySlides fade">

<img src=" style="width:100%">

</div>

<img src=" style="width:100%">

</div>

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

شما همچنین به کدهای js و css نیاز دارید.

کد TextBox

اگر فرمی برای جمع آوری داده از کاربران دارید، به یک فیلد متنی نیاز دارید در زیر نمونه کد فیلد متنی موجود است

<input type="text" id="َbtn" name="fname" value="RTL">

برای دکمه

دکمه ها بخش مهمی از سایت هستند و در صفحات مختلف استفاده می شوند و با کدهای css می توانید استایل های جذابی به دکمه ها بدهید.

<button type="button">Click Me!</button>

یک منو ایجاد کنید

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

<ul>
<li><a href="#home">صفحه اصلی</a></li>
<li><a href="#product">محصولات</a></li>
<li><a href="#contact">تماس با ما </a></li>
<li><a href="#about">درباره ما</a></li>
</ul>

 <a href="url">کلیک کنید</a>

<table>
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>شهر</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>حسینی</td>
    <td>تهران</td>
  </tr>
  <tr>
    <td>مریم</td>
    <td>کریمی</td>
    <td>مشهد</td>
  </tr>
</table>