آموزش new-product(قسمت سوم-پروژه دوم)

طراحی سایت اختصاصی | سید عباس حسینی 25 آبان 1399 0

آموزش new-product(قسمت سوم-پروژه دوم)

به نام خدا با آموزش new-product(قسمت سوم-پروژه دوم) در خدمت شما عزیزان هستیم.

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

شروع کدنویسی این قسمت:

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

برای این قسمت ما حالت نمایشی پوشاندن تصویر یا (overlay)  را در نظر گرفته ایم ابتدا باید قسمت عنوان را ایجاد کنیم برای این کار از یک تگ H1 استفاده می کنیم و بعد از آن متنی که در خصوص محصولات جدید و یا حتی توضیحی کوتاه در خصوص تخفیف های آن است قرار می دهیم. حالا زمان آن رسیده بخش تصاویر محصولات را آماده سازی کنیم برای این کار یک تگ اصلی قرار می دهیم سپس تگ هایی که عنصر های این مجموعه را تشکیل می دهند در داخل آن قرار خواهیم داد.

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

در عنصر های مجموعه خودمان تگ های زیر را قرار می دهیم.

<div class="new_product_post">
  <img src="images/img13.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">
    	<h1><a href="">محصول نمونه </a></h1>
      	<p><a href="">قیمت : 25.000 تومان</a></p>
    </div>
  </div>
</div>

 

بررسی قسمت های ساخته شده:

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

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

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

بررسی دستورات CSS:

.new_product_post {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: 350px;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:rgba(10,10,10,.5);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.new_product_post:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding:0 10px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.text a{color:inherit;}
.text h1{font-size:20px;font-weight:normal;}
.text p{font-size:16px;}

 

تگ اصلی که گفته شده بود قالب اصلی پوشاننده ما است و با کلاس new_product_post مشخص شده بود را مشاهده می کنید. دستوراتی که برای این قسمت استفاده کرده ایم عرض 100 درصد است و همینطور آن را والد دیگر عناصر قرار داده ایم یا به عبارتی position: relative قرار داده ایم.

تگ بعدی که در خصوص آن صحبت می کنیم عکس ما است در وب سایت ها عکس های خیلی مهم هستند زیرا اگر آنها را به خوبی تنظیم نکرده باشیم باعث از بین رفتن نظم محتوای وب سایت ما خواهد شد. قسمت بعدی تگ پوشاننده است که محتوای ما را شامل می شود برای اینکه زیبایی کار حفظ شود برای آن رنگ مناسبی در نظر بگیرید که زمانی که عملیات انجام می شود عکس را به صورت کامل بپوشاند و محتوا را به خوبی نمایش دهد. قرار دادن زمان برای این قسمت یک فعالیت ضروری است زیرا باعث می شود که این فرآیند به آرامی انجام شوند و زیبایی کار را افزایش دهنده و از همه مهم تر اگر می خواهیم که تصویر شما از بالا به پایین حرکت کند به آنbottom دهید و اگر می خواهید که از پایین به سمت بالا حرکت کند به آن top دهید و مقدار آن را معادل 100 درصد قرار دهید. در نظر داشته باشید زمانی که آن را می خواهیم شناور کنید باید مقدار ارتفاع آن را 100 درصد قرار دهید و در همین قسمت میزان bottom را صفر قرار دهید تا فرآیند پوشاندن تصویر به خوبی انجام شود.

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

 

قسمت های دیگر این مجموعه:

آموزش طراحی وب سایت قسمت اول 

آموزش طراحی وب سایت قسمت دوم 

آموزش طراحی وب سایت قسمت چهارم 

آموزش طراحی وب سایت قسمت آخر

 



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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *