ساخت گالری عکس با HTML

در این بخش از آموزش HTML سایت شیرازلرن به ساخت گالری عکس با html می پردازیم.

در تعدادی از پروژه های طراحی سایت به گالری عکس نیاز پیدا میکنیم.

پس بهتر است روش ساحت گالری عکس با HTML را بیاموزید.

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

برای ساخت گالری تصاویر یا عکس در HTML ابتدا کد HTML آن را آموزش می دهیم سپس به کد CSS آن می پردازیم.

کد HTML ساخت گالری عکس :

در این بخش کد HTML ساخت گالری عکس را مشاهده می کنید.

این کد را در یک فایل HTML و با پسوند HTML قرار دهید و سپس آن را اجرا کنید.

بجای فایل TEST1.jpg می توانید نام عکس یا تصویر خود را قرار دهید.

حتما باید فایلی با نام TEST1.jpg باشد وگرنه عکسی نمایشی داده نمی شود.

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
</head>
<body>
<div class="gallery">
<img src="TEST1.jpg" alt="5Terre" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
<div class="gallery">
<img src="TEST1.jpg" alt="Forest" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
<div class="gallery">
<img src="TEST1.jpg" alt="Forest" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
<div class="gallery">
<img src="TEST1.jpg" alt="Forest" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
</body>
</html>

کد CSS ساخت گالری عکس :

در این بخش کد CSS ساخت گالری عکس را مشاهده می کنید.

کد CSS را در قسمت HEAD قرار دهید.

اگر کد CSS گالری تصاویر (عکس) را قرار ندهید قسمت CSS آن درست عمل نمی کند و شما فقط یک گالری ساده دارید که هیچ جذابیتی ندارد.

<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>

حال که کد CSS گالری عکس را قرار دادید آن را ذخیره کرده و دوباره رفرش کنید تا اجرا شود و نتیجه را ببینید.

ریسپانسیو کردن گالری عکس :

برای ریسپانسیو کردن گالری عکس بایستی مانند کد CSS گالری ما مقدار WIDTH و  HEIGHT را مشخص کنید.

ریسپانسیو کردن باعث میشود گالری تصاویر به هم ریخته نشود .

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

توضیحات گالری عکس با HTML :

در این بخش توضیحات گالری عکس با HTML را می بینید.

با استفاده از DIV ما یک باکس ایجاد کرده ایم.

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

این مسئله باعث زیباتر شدن گالری می باشد. ما با استفاده از CSS می توانیم گالری های زیبایی را ایجاد کنیم.

کد کامل گالری عکس با HTML,CSS :

در بخش پایین کد کامل گالری عکس با HTML,CSS را مشاهده میکنید.

اگر کد بالایی به درستی عمل نکرد می توانید این کد را در فایل HTML کپی کنید و سپس آن را ذخیره کرده و اجرا کنید.

معمولا بعضی افراد یا کاربران فایل را ذخیره نمی کنند و با مشکل مواجه می شوند.

ساخت گالری عکس با HTML

در تصویر زیر خروجی را می بینید.

کد کامل گالری عکس با HTML,CSS را می توانید در پروژه های خود قرار دهید .

 

<!DOCTYPE html>
<html>
<head>
<title>SH711.COM</title>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<img src="TEST1.jpg" alt="5Terre" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
<div class="gallery">
<img src="TEST1.jpg" alt="Forest" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
<div class="gallery">
<img src="TEST1.jpg" alt="Forest" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
<div class="gallery">
<img src="TEST1.jpg" alt="Forest" width="600" height="400">
<div class="desc">SH711.COM</div>
</div>
</body>
</html>

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


نویسنده : هدایت عباسی

عضویت طلایی
ثبت نظر