یک طراح وب

شما هم به عکاسی علاقه دارید؟! میخواهید جایی روی اینترنت عکس های خود را آرشیو کنید؟! درست حدس زدم؟! میخواهید یک گالری عکس داشته باشید؟!

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

ایجاد یک گالری عکس استاتیک – نه خیلی گسترده – در ۵ دقیقه:

گام نخست: ایجاد یک فایل اچ تی ام ال. برای این کار میتوانید یک فایل متنی (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>

حالا با نوشتن این کدها چه اتفاقی افتاد؟!
در اینجا ما لیستی از ۶ تصویر – که در ادامه، با استفاده از سی اس اس موقعیت دهی و منظمشون میکنیم – ایجاد کردیم و حالا میریم سراغ سی اس اس…

گام سوم: ایجاد یک فایل سی اس اس. برای این کار هم باز یک فایل متنی ایجاد کنید و پسوندش را به 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;
}

گام پنجم: پیوند کردن فایل سی اس اس به کدهای اچ تی ام ال. به کدهای اچ تی ام الی که در بالا نوشتم توجه کنید. قسمتی از کد که این چنین است:

&lt;link href="address of css file" rel="stylesheet" type="text/css" /&gt;

باید به جای address of css file، آدرس فایل سی اس اس خود را وارد کنید.

گام ششم: دیگر کاری نمانده که انجام نداده باشیم. به ساعتتان نگاه کنید. هنوز ۵ دقیقه تمام نشده و شما گالری عکس خود را ایجاد کردید!

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

نکته ی کوچولو: برای وارد کردن آدرس عکس های خود به کدهای اچ تی ام ال، به جای address of image، آدرس عکس خود را وارد کنید.

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

دیدگاه‌ها (۱۸)

voltan
در ۸۷/۰۵/۱۷ گفت:

مثل همیشه بسیار عالی و آموزنده بود . دستت درد نکنه
_____________
علیرضا در جواب گفت:
لطف داری…
قابلی نداشت…

پاسخ
شقایق
در ۸۷/۰۵/۱۷ گفت:

خوشحال میشم توی بانوی وبلاگی بنویسم. و اگر اجازه بدی مطلب آخر وبلاگم رو برای شروع کاملا کپی کنم چون مطلبیه که دونستنش برای همه اهل نت ضروریه به کارمون هم میاد هم ما، هم شما و هم بانوی وبلاگی. Ok ؟
______________
علیرضا در جواب گفت:
خیلی عالیه… پس شما برو تو وردپرس ثبت نام کن تا من لینک دعوت رو میل کنم…

پاسخ
شقایق
در ۸۷/۰۵/۱۷ گفت:

۲ تا چیز یادم رفت بنویسم:۱-عکسهای مطلب رو برای قرار گرفتن توی بانوی وبلاگی تغییر میدم
۲- مطلب شما در مورد گالری عکس خیلی جالب بود.
______________
علیرضا در جواب گفت:
اوکی… اینطوری بهتره…
نظر لطف شماست… ;)

پاسخ
شهاب حنفی نیری(یاسین)
در ۸۷/۰۵/۱۸ گفت:

اینجوری نمیشه، کاری می کنی که بهت حسودی کنم!!
____________
علیرضا در جواب گفت:
شهاب جان اگر این حرف از جانب من باشه معمولیه…
من که چیزی ندارم تا بخوای بهش حسودی کنی… ;)

پاسخ
سروش
در ۸۷/۰۵/۱۸ گفت:

سلام دوست عزیز
اینا رو بیخیال
می خوام سی شارپ یاد بگیرم. سی پلاس پلاس هم قبلا کار کردم.
دنبال منبع خوب میگردم (ترجیحا روی نت و پی دی اف) اگه معرفی کنی(یه کامنت واسم بذاری) ازت خیلی ممنون میشم.
شاد و پیروز باشی
______________
علیرضا در جواب گفت:
چرا سی شارپ؟! وقتی سی پلاس پلاس کار کردی، دیگه سی شارپ به دردت نمیخوره… به هرحال این نظر منه… ولی اگر هر مقاله ای در مورد سی شارپ پیدا کردم، بهت میدم…

پاسخ
امیر عباس
در ۸۷/۰۵/۱۸ گفت:

علیرضا یه مطلب هم بنویس ، راه اندازی گالری تصویر داینامیک با وردپرس در ۷ دقیقه :)
______________
علیرضا در جواب گفت:
اووووووو حالا کجاشو دیدی؟! میخوام همه ی حالت ها رو فشرده کنم و تو کمتر از ۱ دقیقه یاد بدم… :دی

پاسخ
مجید مهرتـاش
در ۸۷/۰۵/۱۸ گفت:

در مورد دوستی که می خواست #C یاد بگیره ، فکر نمی کنم منبعی بهتر از VCS.blogfa.com نباشه .

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

حالا من ازتون یه خواهش دارم ، اگه می شه در مورد PHP شیء گرا یه خورده توضیح بدید ، آخه من ۱ هفته وقت گذاشتم ASP.net 2008 رو کامل یاد گرفتم ولی پول دادن هاست های … تومانی رو ندارم دنبال هاست رایگان هم گشتم همشون PHP ساپورت هستند ، زبان PHP رو تقربیاً (تا قبل شیء گرا) بلدم .

با PHP Nuke هم نشد کار کنم ، ارورر بنی اسرائیلی میده ، با PHP Desiner 2008 هم کار کردم ولی وسطاش قاتی کردم !!!

راستی من هم #C کار کردم هم ++C به نظرم الان توی ایران #C بیشتر جواب بده مگر اینکه هدف های بزرگی داشته باشی .

ما رو نا امید نکن در مورد این PHP یه توضیح بده !

ممنون

مجید مهرتاش
_____________
علیرضا در جواب گفت:
در مورد پی اچ پی، باید بگم که من همیشه تا توی یک زمینه ای کاملا حرفه ای نشم و اطلاعات نداشته باشم، حرفی در موردش نمیزنم…
مرسی…

پاسخ
محمد علی
در ۸۷/۰۵/۱۹ گفت:

سلام
راستش من فکر می‌کنم یکی از المان‌های مهم طراحی های امروز که این کار ها رو با کارهای دیروز متفاوت می کنه همین تکیه بر روی سی اس اس است. اگهبشه خیلی ساده اون رو توضیح داد، کمک بزرگی به بخش عمده ی محتوای آنلاین فارسی کردیم. همین استایلیش چقدر کمک می کنه.
____________
علیرضا در جواب گفت:
درسته دوست عزیز… ;)

پاسخ
DANG3R
در ۸۷/۰۵/۲۰ گفت:

ممنون علیرضا جان که لینکمو اد کردی …
می گم تبادل لوگو هم هستی ؟
خیلی وبلاگ خوب و پرباری داری ;)

پاسخ
سروش
در ۸۷/۰۵/۲۰ گفت:

از راهنماییتون ممنونم
ضمنا بی اجازه لینکتون رو هم به وبلاگم اضافه کردم.

پاسخ
کاوه گیــــــلانی (لابدان)
در ۸۷/۰۵/۲۰ گفت:

سلام علیک
به یک فروند بازی وبلاگی دعوت شدی !

پاسخ
ITLine
در ۸۷/۰۶/۰۴ گفت:

برنامه پیکاسا گوگل رو هم امتحان کن این کارو برات میکنه

پاسخ
Mahmoud
در ۸۷/۱۲/۰۵ گفت:

ازمطلب زیباتون ممنون هستم
از اینکه مطالب علمی رو نوشته بودین واقعا استفاده کردم

پاسخ
hamedjanam
در ۸۹/۰۱/۳۱ گفت:

سلام دوست عزیز یه سوال داشتم ایا میشه از این کد در تو قالب وبلاگ استفاده کرد یا این فقط تو سایت جواب میده (نمیدونم سوالم که بی معنی نبود ؟!!؟)یعنی میشه تو یه پست برای نمایش عکسهابه صورت گالری از این کد استفاده کرد ؟

پاسخ
فرزانه
در ۸۹/۰۶/۰۸ گفت:

سلام من تا یه حدی اچ تی ام ال رو کار کردم الان نمیدونم چی باید یاد بگیرم اما از جی کوئری خیلی خوشم میاد و دوس دارم یه طراح حرفه ای بشم میشه منو راهنمائی کنید؟
ممنون از مطالبتون.

پاسخ
نام
در ۸۹/۱۰/۰۲ گفت:

عالی بود

پاسخ
امیر
در ۹۰/۰۸/۳۰ گفت:

سلام دوست عزیز
اگر کلا برای یک کار گسترده تر بخوایم این کار رو انجام بدیم چه چیزی رو پیشنهاد می دیدید یا کلا از کجا و چجوری باید استارت بزنیم؟
یعنی مثلا عکسها رو بصورت عنوان دسته بندی کنیم و هر کدوم از عکسها با پیش نمایش کوچیک باشد و در صورت رویت ، با کلیلک در یک پنجره کوچیک نشونش بده
ممنون

پاسخ