تبلیغات تبلیغات میتوان گفت که امروزه CSS طراحی صفحات وب را در جهان متحول کرده است. این فناوری به طراحان وب کمک میکند که طراحیهای خود را با بالاترین کیفیت و کاربرپسندترین شکل ارائه کنند. پیش از این، انجام این کار تنها با فایلهای سنگین گرافیکی قابل انجام بود.
به جرات میتوان گفت که اگر شما بدانید که با CSS چه کارهایی میتوانید بکنید، قطعا از آن استفاده خواهید نمود. امروزه اکثر قریب به اتفاق سایتهای حرفهای از CSS بهره میبرند. بنابراین برای یک طراح صفحات وب یادگیری این زبان بسیار مهم خواهد بود.
بسیاری از طراحان وب در زمینهای که در آن به فعالیت مشغول هستند (یعنی طراحی) از اطلاعات ریشهای و پایهای برخوردار نیستند. اکثر آنها با خواندن یک کتاب در مورد HTML و یا JavaScript چیزهایی در مورد این زبانها میدانند. همچنین بسیاری از آنها به نرمافزارهایی مانند Photoshop و Flash مسلط هستند. اما تعداد بسیار کمی هستند که تحصیلات دانشگاهی در این زمینهها دارند. اما CSS برای هر دو گروه (چه آنهایی که تجربی و یا با خواندن یک کتاب طراحی را بلدند و چه آنهایی که به طور پایهای به این زبانها مسلط هستند) مفید و شاید لازم است.
اما به راستی با CSS چه کاری میشود کرد؟ به طور خلاصه میتوان گفت مهمترین کار آن، راحتکردن شما از یک سری کد است که علاوه بر خستهکردن شما، باعث پایینآمدن سرعت لود صفحات شما میشوند. CSS دست طراحان را به قدری باز گذاشته است که قطعا کسی با بهرهگیری از CSS تمایلی به استفاده از جداول نخواهد داشت. CSS زمانی کاربرد خود را نشان میدهد که شما صفحهای با حجم نسبتا زیادی از متن و عکس دارید (مانند یک وبلاگ) و نیاز است که صفحه زود لود شود. اگر شما از جداول استفاده کنید، بیننده باید منتظر شود تا زمانی که کل جدول لود شده و به نمایش درآید. اما با استفاده از CSS، هرچقدر اطلاعات لود شده باشد، در همان لحظه بر روی مانیتور بیننده درج خواهد شد.
اما چرا CSS مانع از خستگی شما در کدنویسی میشود؟ شما با CSS میتوانید ویژگیهای یک بخش را فقط یکبار تعریف کنید و دیگر مجبور نباشید این کار را تکرار کنید. مثلا شما دوست دارید که متون داخل کادری که در همهی صفحات سایتتان وجود دارد، به رنگ قرمز باشد. برای این کار بدون CSS شما لازم است هربار تگ font را نوشته و ویژگی color را ذکر کنید. اما با CSS آنطور که بعدا خواهید آموخت، تنها لازم است یکبار این کار را انجام دهید.
اما بهتر است بیشتر شما را هیجانزده و مشتاق نکنم و به سراغ شروع داستانی با نام آموزش CSS بروم. یادگیری CSS همانند HTML است؛ اما باید بدانید که برای یادگیری CSS لازم است که شما HTML را بلد باشید. اگر به زبان HTML مسلط هستید با من برای یادگیری CSS همراه باشید.
در مطلب قبلی آموختید که چگونه یک سیستم نمایش تصادفی تصاویر با استفاده از PHP بسازید. در این مطلب یک راه سادهتر با استفاده از جاوااسکریپت به شما آموزش خواهم داد که برای سیستمهای تبلیغاتی بسیار مناسب است.
در جایی از صفحه که میخواهید تصاویر تصادفی را در آنجا به نمایش درآورید، کدهای زیر را قرار دهید:
<SCRIPT LANGUAGE="JavaScript">
<!--Total Java Scripts 99 - Next Step Software-->
<!-- Begin
var how_many_ads = 2;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt="Your Description";
url="Link";
alt="Image Description";
banner="Image Address";
width="468";
height="60";
}
if (ad==2) {
txt="Your Description";
url="Link";
alt="Image Description";
banner="Image Address";
width="468";
height="60";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// End -->
</SCRIPT>
توضیح کد:
همانطور که میدانید برای یک سیستم نمایش تصادفی تصاویر، شما باید حداقل دو تصویر داشته باشید. بنابراین من مقدار var how_many_ads را عدد 2 انتخاب کردهام. اگر شما بیش از دو تصویر دارید، تعداد آنها را جایگزین عدد 2 کنید. در ابتدای کد هر تصویر، (مثلا برای تصویر اول) عبارت if (ad==1) درج شده است. برای تصویر دوم، عبارت if (ad==2) و... اگر بیش از دو تصویر دارید، باید برای هرکدام در ابتدا عبارت را نوشته و شماره تصویر را جایگزین عدد کند. مثلا برای تصویر شمارهی 3، بنویسید: if (ad==3) و سپس کدهای مربوط به آن تصویر را داخل {} قرار دهید.
به جای Your Description توضیحی در مورد تصویر بنویسید که در زیر تصویر به نمایش در میآید.
به جای Link آدرسی که با کلیک کردن روی تصویر مرورگر به آن آدرس برود را بنویسید.
به جای Image Description توضیحی در مورد تصویر بنویسید که با رفتن نشانگر ماوس روی تصویر، به نمایش درآید.
به جای Image Address نشانی تصویر موردنظر (که طبیعتا باید روی وب باشد) را قرار دهید.
دو بخش width و height مربوط به طول عرض تصویر موردنظر میباشند که باید مطابق طول و عرض تصویر خود آن را تنظیم نمایید.
توجه: توضیح زیر تصویر (که آن هم به صفحهی موردنظر لینک است) مطابق با CSS صفحهی خودتان به نمایش در میآید.
برای ساختن چنین سیستمی راه های زیادی در پیش ماست یکی از این راه ها استفاده از زبان پی اچ پی میباشد.
در طی این مقاله شما میتوانید یک سیستم نمایش تصاویر اتفاقی با قابلیت نداشتن محدودیت در اضافه کردن تصاویر بسازید. قبل از هرچیز لازم است بدانید که این برنامه نیازی به بانک اطلاعاتی ندارد و اطلاعات خود را تنها در یک فایل متنی ذخیره میکند.
برای ساخت این برنامه چند مرحله در پیش رو دارید که آنها را یکی پس از دیگری مرور میکنیم.
مرحله اول
موضوع : ایجاد فایلهای اصلی و ورودی
قدم اول
تمام کدهای زیر را کپی و در فایلی با نام دلخواه و پسوند php ذخیره کنید.
<?
###########################################
# CREATED BY MoeinOnline.Com
###########################################
include ("setting.php");
// Leave below this line alone - If you modify anything below I can assure you
it will mess up!
// the file holding the advert number to view next
$num = file($directory.$adcountfile);
// the file holding the link codes
$adverts = file($directory.$linkfile);
// tells the script to look at the next item in the array
$num = $num[0]+1;
// counting the number of adverts - using function count()
$number = count($adverts);
// If ran out of adverts, start again!
if($num>$number-1){
$num=0;
}
// write the current number to the file
if (file_exists($directory.$adcountfile)) {
$nu = fopen ($directory.$adcountfile, "w");
fputs($nu,$num);
}
else {
die("<h1>Can't find file</h1><br>Check ad-count file ($adcountfile)
exists<BR>Check file with links ($linkfile) exists<BR>Check directory
($directory) is correct");
}
echo "<div align=\"$pos\">$adverts[$num]</div>";
?>
قدم دوم
کد زیر را کپی و در فایلی به نام setting.php ذخیره کنید.
<?php
$directory = "";
$linkfile = "image.inc";
$adcountfile = "displayad.inc";
$pos = "left";
?>
مرحله دوم
تا اینجا برنامه را ایجاد نمودیم ولی حالا باید برنامهای ایجاد نمود تا تصاویر را با پسوند inc ایجاد کند. بنابراین باید فایل image.inc را طبق شرح زیر بسازید. در صورتی که تغییری در نام فایلها دادید آنها را در setting.php نیز اعمال کنید. سپس میتوانید فایلها را به هوست خود منتقل کرده و از سیستم استفاده کنید.
مرحله سوم
استفاده از سیستم
برای استفاده از برنامه کافیست با استفاده از دستورات زیر آدرس اینترنتی تصویر و توضیحات را کامل کنید و در فایل image.inc ذخیره کنید.
الگو:
<a href="link"><img border="0" src="address"
alt="description"></a>
توضیحات:
link: آدرسی که اگر کاربر روی تصویر کلیک کند، مرورگر به آن صفحه میرود.
0: قطر کادری که حاشیهی تصویرتان را احاطه میکند. عدد 0 هیچ کادری ایجاد نمیکند.
address: نشانی تصویر موردنظر (که طبیعتا باید روی وب باشد)
description: توضیحی در مورد تصویر که با قرارگرفتن نشانگر ماوس روی تصویر به نمایش در میآید.
توجه: وجود هر بند خالی در فایل image.inc باعث وقفه در اجرای برنامه میشود.
