شما هم به عکاسی علاقه دارید؟! میخواهید جایی روی اینترنت عکس های خود را آرشیو کنید؟! درست حدس زدم؟! میخواهید یک گالری عکس داشته باشید؟!
بعد از خواندن این پست، دیگر چنین نیازی احساس نمیکنید! چون برطرف شده است! پس تا آخر این مقاله، همراهیم کنید…
ایجاد یک گالری عکس استاتیک – نه خیلی گسترده – در 5 دقیقه:
گام نخست: ایجاد یک فایل اچ تی ام ال. برای این کار میتوانید یک فایل متنی (txt) ایجاد کنید و پسوند آن را از txt به htm یا html تغییر دهید. در این صورت شما یک فایل اچ تی ام ال خالی دارید.
گام دوم: نوشتن کدهای اچ تی ام ال برای ایجاد گالری عکس. برای این منظور، کدهایی که در پایین نوشته شده را کپی و در همان فایل اچ تی ام ال، پیست کنید. (جادی خوب گفته بود! گفته بود اگر نمیدانید کپی پیست چیست، خواندن را همینجا متوقف کنید! :دی)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Gallery</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="address of css file" rel="stylesheet" type="text/css" /> </head> <body> <div id="content"> <ul id="gallerylist"> <li><a href="#"><img src="address of image" alt="01" width="180" height="130" />01</a></li> <li><a href="#"><img src="address of image" alt="02" width="180" height="130" />02</a></li> <li><a href="#"><img src="address of image" alt="03" width="180" height="130" />03</a></li> <li><a href="#"><img src="address of image" alt="04" width="180" height="130" />04</a></li> <li><a href="#"><img src="address of image" alt="05" width="180" height="130" />05</a></li> <li><a href="#"><img src="address of image" alt="06" width="180" height="130" />06</a></li> </ul> </div> </body> </html>
حالا با نوشتن این کدها چه اتفاقی افتاد؟!
در اینجا ما لیستی از 6 تصویر – که در ادامه، با استفاده از سی اس اس موقعیت دهی و منظمشون میکنیم – ایجاد کردیم و حالا میریم سراغ سی اس اس…
گام سوم: ایجاد یک فایل سی اس اس. برای این کار هم باز یک فایل متنی ایجاد کنید و پسوندش را به css تغییر دهید.
گام چهارم: نوشتن یه سری استایل برای موقعیت دهی و سبک دهی به عناصر. استایل هایی را که در پایین میبینید، کپی و در فایل سی اس اس ایجاد شده ی خود پیست کنید.
* {margin: 0; padding: 0;}
body {
background-color: #000000;
margin: 0;
padding: 0;
}
#content {
width: 700px;
margin: 15px auto;
}
#gallerylist {
list-style-type: none;
}
#gallerylist li {
display: block;
float: right;
margin-right: 10px;
margin-bottom: 10px;
font: bold 17px Arial;
color: #333333;
}
#gallerylist img {
display: block;
border: 1px solid #444444;
padding: 3px;
}
#gallerylist a:link, #gallerylist a:visited {
display: block;
color: #FF6600;
opacity: 0.6;
text-decoration: none;
}
#gallerylist a:hover, #gallerylist a:active {
color: #666666;
background-color: #222222;
opacity: 10;
text-decoration: none;
}
گام پنجم: پیوند کردن فایل سی اس اس به کدهای اچ تی ام ال. به کدهای اچ تی ام الی که در بالا نوشتم توجه کنید. قسمتی از کد که این چنین است:
<link href="address of css file" rel="stylesheet" type="text/css" />
باید به جای address of css file، آدرس فایل سی اس اس خود را وارد کنید.
گام ششم: دیگر کاری نمانده که انجام نداده باشیم. به ساعتتان نگاه کنید. هنوز 5 دقیقه تمام نشده و شما گالری عکس خود را ایجاد کردید!
راهنما: اگر انجام دادن مراحل بالا برایتان سخت است، فایل اچ تی ام ال آماده را از اینجا و فایل سی اس اس آماده را از اینجا دریافت نمایید. در اینصورت دیگر احتیاجی به انجام دادن کارهای بالا نیست و فقط باید فایل اچ تی ام ال را با یک ادیتور متن باز کنید و عکس های خود را وارد کنید.
نکته ی کوچولو: برای وارد کردن آدرس عکس های خود به کدهای اچ تی ام ال، به جای address of image، آدرس عکس خود را وارد کنید.
پیشنهاد: من خیلی عجله ای این استایل ها رو نوشتم و فقط خواستم نمایی از یک گالری عکس را ایجاد کنم. شما میتوانید با سلیقه و ذوق و ابتکار خود، کمی استایل ها را دستکاری و یا به آن استایلی را اضافه کنید تا زیباتر شود. ضمنا اگر این گالری را در مرورگرهای مزیلا ببینید، جلوه ی زیباتری دارد.
