منتقل شد به سایتwww.OgpTheme.com

تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت

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

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

برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float برای این منظور استفاده کنیم.

برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد cssFloat استفاده میکنیم. برای درک بهتر میتوانید به مثال زیر در دو حالت قبل و بعد از اختصاص این ویژگی با به المنت توجه کنید:

<div style="border:1px #666 dashed; width:50%; margin:10px auto"> 
<div style="width:100px; height:100px; background: #fc0;">بلوک مورد نظر قبل از اختصاص ویژگی</div> 
<p>این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود</p> 
</div>

قبل از اختصاص ویژگی float:

بلوک مورد نظر قبل از اختصاص ویژگی

این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود

کد مربوط به اعمال ویژگی با استفاده از جاوا اسکرپت:

<div style="border:1px #666 dashed; width:50%; margin:10px auto"> 

<div id="my-block-2" style="width:100px; height:100px; background: #fc0;">بلوک مورد نظر قبل از اختصاص ویژگی</div>
<p>این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود</p> <br clear="all">
</div>

<script type="text/javascript"> document.getElementById("my-block-2").style.cssFloat = "right"; </script>

و در انتها این چیزی هست که در مرورگر نمایش داده خواهد شد:

بلوک مورد نظر پس از اختصاص ویژگی

این متن پس از اختصاص ویژگی به المنت در کنار بلوک نمایش داده میشود

 

مقادیر زیر را میتوان برای متد cssFloat به کار برد:

noen :

این مقدار پیش فرض متد هست و تأثیر float را بر روی المنت خنثی میکند.

right :

این مقدار باعث می شود تا بلوک مورد نظر تا حد امکان در سمن راست المنت والد خود قرار گیرد.

left :

این مقدار باعث میشود تا بلوک مورد نظر تا حد امکان در فضای سمت چپ المنت والد خود قرار گیرد.

در پایان این مقاله باید به این نکته اشاره کنم که مقادیر متد cssFloat از نوع رشته ای (String) هستند پس باید در کد جاوا اسکرپت در کوتیشن نوشته شوند.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:57 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

درخواست اطلاعات از کاربر

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

prompt('سؤال شما', ' ');

این فرمان یک پنجره را قبل از باز شدن صفحه نمایش می دهد که سؤال شما در آن پرسیده می شود و بیننده می تواند جواب خود را در کادری که برای او در نظر گرفته شده بنویسد. دو سینگل کوت بعدی جواب پیش فرض شما برای سؤال است. اگر شما چیزی بین این دو سینگل کوت ننویسید، بیننده با یک لیست خالی، آماده برای نوشتن مواجه می شود. این پیغام قبل از بارگذاری صفحه نمایش داده می شود پس شما می توانید پاسخ بیننده را در صفحه نمایش دهید.
اگر مثالی در این مورد می خواهید لینک زیر را کلیک کنید. در صفحه مثال نام شما پرسیده می شود و پس از وارد کرده آن، نام شما در صفحه جدید نمایش داده می شود:

لینک صفحه آزمایشی

حالا به سراغ اسکرپتی که این کار را انجام می دهد می رویم. توجه داشته باشید که دستورات prompt و if/else در بخش HEAD صفحه وارد می شوند ولی نام کاربر در بخش BODY صفحه مشاهده می شود.

<html dir="rtl" >

<head>
<script language="javascript">
<!--
var yourname=prompt('لطفاً نام خود را وارد کنید', '');
if ( (yourname=='') || (yourname==null) )
{
yourname="ناشناس";
}
//-->
</script>
</head>

<body>
<script language="javascript">
<!--
document.write("<center><h1>سلام " +yourname+ " ،به سایت ما خوش آمدید <\/h1><\/center>");
//-->
</script>
</body>

</html>

اولین چیزی که اتفاق می افتد این است که متغیر yourname مقداری را که کاربر برای آن وارد می کند به خود می گیرد. پس مقدار متغیر yourname معادل استرینگی است که نام کاربر را می سازد.

دستور if/else نام « ناشناس » را در صورتی که کاربر نامی را وارد نکند به عنوان مقدار متغیر yourname قرار می دهد. این دستور چک می کند که اگر نامی وارد نشود (null) و یا اگر فضای خالی وارد شود، مقدار « ناشناس » را به متغیر yourname می دهد.

در بخش body متن دوباره از تگ script استفاده می کنیم تا کدهای جاوا اسکرپت از بقیه متن html متمایز شود. در این قسمت ما از یک فرمان جدید یعنی ;(" ")document.write استفاده کرده ایم. این همان چیزی است که به متغیر yourname اجازه نوشته شدن در صفحه html را می دهد. ما در این پیغام دو استرینگ را به علاوه متغیر yourname در صفحه می نویسیم. متغیر yourname در این فرمان بین دو دابل کوت قرار نمی گیرد چون یک مقدار است نه یک استرینگ، (البته مقدار متغیر yourname یک استرینگ است). به دلیل اینکه متغیر yourname یک استرینگ نیست ما از دو علامت بعلاوه در ابتدا و انتهای آن استفاده می کنیم. این سری نوشته ها مرورگر را وادار می کند ابتدا یک استرینگ سپس مقدار متغیر و سپس استرینگ دوم را بنویسد. چون ما در حال نوشتن یک کد جاوا اسکرپت هستیم برای اینکه بتوانیم متنی را در صفحه بنویسیم نمی توانیم مانند نوشتن متن در html عمل کنیم، و باید متن مورد نظر را بین دابل کوت و در قالب استرینگ در صفحه بنویسیم.

شاید متوجه شده باشید تگهای پایانی h1 و center به گونه ای متفاوت با قبل نوشته شده اند ( <h1/\> ). این تفاوت بدین دلیل است که اسلش در جاوا اسکرپت به معنای تقسیم است و برای جلوگیری از اشتباه شدن آن با علامت تقسیم از یک بک اسلش قبل از آن استفاده می کنیم. در نتیجه استفاده از یک بک اسلش ( \ ) و بلافاصله بعد از آن یک اسلش ( / )

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:57 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

آموزش جاوا اسکرپت

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

نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود.

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

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

برای آزمایش کردن اسکرپتهایی که می نویسید باید از مرورگری استفاده کنید که از جاوا اسکرپت پشتیبانی می کند. قابل ذکر است که تقریباً همه مرورگرهای جدید از جاوا اسکرپت پشتیبانی می کنند از جمله این مرورگرها می توان به اینترنت اکسپلورر (IE) که در ویندوز به صورت پیش فرض نصب می شود، فایر فوکس (Firefox) و اپرا (Opera) اشاره کرد. به خاطر داشته باشید که نسخه های قبل از نسخه 4.0 اینترنت اکسپلورر و Netscape از جاوا اسکرپت پشتیبانی نمی کنند.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:56 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

نحوه استفاده از کدهای جاوا اسکرپت در صفحه

به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم:

  1. وارد کردن اسکرپت در بخش <head> صفحه
  2. وارد کردن جاوا اسکرپت در بخش <body> صفحه
  3. استفاده از فایل اسکرپت خارجی

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

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

<script language="javascript" type="text/javascript">
دستورات جاوا اسکرپتی که قصد استفاده از آنها را دارید در این قسمت وارد می شوند 
</script>

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

وارد کردن اسکرپت در بخش <head>

در هنگام باز شدن یک صفحه وب عناصر موجود در بخش <head> قبل از سایر اجزای صفحه لود می شوند. معمولاً هنگامی کدهای جاوا اسکرپت در بخش <head> متن استفاده می شود که بخواهیم مطمئن شویم به هنگام نیاز کدهای ما لود شده اند.

در اینجا یک مثال از استفاده از جاوا اسکرپت در <head> را مشاهده می کنید:

<html dir="rtl">

<head>
<script language="javascript" type="text/javascript">
function message() {
document.write('<div align="center">کدهای جاوا اسکرپت موجود در &lt;head&gt; صفحه قبل از سایر اجزای صفحه لود می شوند <br> این متن به وسیله همین نوع اسکرپت به وجود آمده است</div>');
}
</script>
</head>

<body>
<p align="center"><a href="javascript:message();">روی این متن کلیک کنید</a></p>
</body>

</html>

برای مشاهده صفحه ساخته شده با کد بالا اینجا را کلیک کنید.

وارد کردن جاوا اسکرپت در قسمت بدنه متن HTML

این امکان وجود دارد که کدهای جاوا اسکرپت را در قسمت <body> صفحه وارد کنیم. در این صورت لود شدن آنها تا هنگامی که آن بخش از صفحه لود شود به عقب می افتد و اگر صفحه به صورت کامل باز نشود ممکن است اسکرپت ما کار نکند. مثال زیر یک نمونه از وارد کردن جاوا اسکرپت در <body> صفحه HTML را نشان می دهد:

<html dir="rtl">

<head>
<title>جاوا اسکرپت در بدنه صفحه</title>
</head>

<body>
<script language="javascript" type="text/javascript">
document.write('<br><h1 align="center">این متن توسط جاوا اسکرپت نوشته شده است.</h1>');
</script>
</body>

</html>

برای مشاهده صفحه مربوط به کد بالا اینجا را کلیک کنید

فرا خوانی اسکرپت خارجی به صفحه

گاهی اوقات ممکن است بخواهید از یک سری از کدهای جاوا اسکرپت برای چندین صفحه استفاده کنید و نمی خواهید همه آنها را به صورت جداگانه در هر صفحه بنویسید. در این مواقع می توانید کدهای مورد نظر خود را در یک فایل متنی وارد کنید و آنرا با پسوند js. ذخیره کنید. در هر صفحه ای که بخواهید از این فایل استفاده کنید کافی است آنرا در آن صفحه فرا خوانی کنید. ( به یاد داشته باشید که در این فایلهای خارجی نباید از تگهای <script> که مخصوص HTML هستند استفاده کنید )

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

برای مثال کد جاوا اسکرپت زیر را در نظر بگیرید :

var text = '<br><h1 align="center" dir="rtl" >این متن با استفاده از جاوا اسکرپت نوشته شده است.</h1>'; 

document.write(text);

ما این کد را در فایلی با نام external.js در همان پوشه ای که صفحه ما قرار دارد ذخیره کرده ایم. حالا با وارد کردن کد زیر در صفحه می توانیم فایل بالا را فراخوانی کنیم:

<script language="javascript" type="text/javascript" src="external.js"></script>

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

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:56 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

عرفی عملگرهای مورد استفاده در JavaScript

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

عملگرهای محاسباتی

از این نوع عملگرها برای انجام عملیات ریاضی نظیر جمع و ضرب استفاده می شود. می توانید این عملگرها را در اینجا مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

نام

عملگر

مثال

نتیجه

جمع

+

x + y

12

تفریق

-

x - y

4

ضرب

*

x * y

32

تقسیم

/

x / y

2

باقیمانده

%

9 % y

1

افزایش

++

x++

9

کاهش

--

x--

7

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

عملگرهای جایگزینی

این عملگرها ترکیبی از عملگرهای دیگر هستند و به همین دلیل آنها را عملگرهای ترکیبی هم می نامند. می توانید این عملگرها را در جدول زیر مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

نام

عملگر

مثال

عبارت معادل

انتساب

=

x = 8

x = 8

انتساب جمع

+=

x += y

x = x + y

انتساب تفریق

-=

x -= y

x = x - y

انتساب ضرب

*=

x *= y

x = x * y

انتساب تقسیم

/=

x /= y

x = x / y

انتساب باقیمانده

%=

x %= y

x = x % y

عملگرهای مقایسه ای

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

در جدول زیر مقادیر x و y و z را مطابق زیر در نظر بگیرید و توجه داشته باشید که مقدار متغیرهای x و y عددی و مقدار متغیر z از نوع رشته ای است :

x = 4;
y = 8;
z = "4";

نام

عملگر

مثال

نتیجه

تساوی

==

x == z

True

همانی

===

x === z

False

نامساوی

!=

x != y

True

بزرگتر از

>

x > y

False

کوچکتر از

<

x < y

True

بزرگتر یا مساوی

>=

x >= z

True

کوچکتر یا مساوی

<=

x <= y

True

تفاوت عملگر تساوی با عملگر همانی در این است که در عملگر تساوی نوع متغیر ها در نظر گرفته نمی شود و اگر مقدار متغیرها با هم برابر باشد حتی اگر از یک نوع هم نباشند نتیجه True خواهد بود. ولی در عملگر همانی باید متغیرها مقداری مساوی داشته باشند و از یک نوع هم باشند تا نتیجه True باشد.

عملگرهای منطقی

این عملگرها برای انجام عملیات منطقی بر روی دو عبارت به کار می روند ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

نام

عملگر

مثال

نتیجه

نقیض

!

!(x==y)

True

!(y==3)

False

و

&&

(x=4 && y=8)

True

(x>4 && y=8)

False

یا

||

(x>4 || y=8)

True

(x>4 || y>8)

False

عملگر رشته ای

از این عملگر برای چسباندن دو رشته به هم استفاده می شود. مثلاً برای اتصال دو متغیر از نوع رشته از این عملگر استفاده می شود.

نام

عملگر

مثال

عملوند رشته ای

+

  a = 'طراحی وب';
  b = 'با جاوا اسکرپت';
  c = a+b;

در مثال بالا مقدار متغیر c این است : 'طراحی وببا جاوا اسکرپت'
برای ایجا فاصله بین کلمه وب و کلمه با می توانیم یک فاصله خالی به یکی از متغیرهای a یا b اضافه کنیم یا با استفاده از عملوند رشته ای یک فضای خالی به متغیر c اضافه کنیم :

a = ' طراحی وب';
b ='با جاوا اسکرپت';
c = a+b;
------------------------------
a = 'طراحی وب';
b ='با جاوا اسکرپت';
c = a+' '+b;

در نتیجه کد بالا مقدار متغیر c به این صورت خواهد بود : 'طراحی وب با جاوا اسکرپت'

عملگر شرطی

در جاوا اسکرپت نوعی عملگر وجود دارد که بسته به شرایط مقداری را به یک متغیر تخصیص می دهد به این عملگر عملگر شرطی می گویند. ساختار این عملگر به صورت زیر است :

VAR_NAME=(شرط)?value1:value2

این عملگر در صورتی که شرط برقرار باشد مقدار اول را به متغیر می دهد و در صورت برقرار نبودن شرط مقدار دوم را به متغیر تخصیص می دهد. به مثال زیر توجه کنید :

age_group=(age>18)?'زیر سن بلوغ':'بزرگسال'

در این مثال اگر متغیر age بزرگتر از 18 باشد مقدار 'بزرگسال' به متغیر age_group تخصیص داده می شود و در صورتی که متغیر age کوچکتر از 18 باشد مقدار 'زیر سن بلوغ' به عنوان مقدار متغیر age_group قرار می گیرد.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:54 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

نمایش پیام هشدار در صفحه با استفاده از جاوا اسکرپت

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

این فرمان هشدار است:

alert('متنی که می خواهید به بازدید کننده نشان داده شود')

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

<a href="alert.php" onmouseover="alert('Insert your message here')"> 
ماوس خود را روی این لینک قرار دهید 
</a>

آنرا امتحان کنید. فقط ماوس خود را روی آن قرار دهید:

ماوس خود را روی این لینک قرار دهید

در ابنجا به ارائه توضیحاتی در مورد دستورات جاوا اسکرپت استفاده شده در کد بالا می پردازیم :

  • onmouseover : 
    این رویداد مسئولیت اجرای کد جاوا اسکرپت موجود در خود را وقتی که ماوس روی آن قرار می گیرد بر عهده دارد.

    (' ')alert : 
    این تابع متنی را که به عنوان مقدار آن قرار گیرد در یک کادر محاوره ای با یک دکمه OK نمایش می دهد.

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

برای ساختن این نوع کادر هشدار فرمان هشدار را بین <head> و <head/> قرار دهید. برای این کار باید از تگهای <script> که در اول فصل با آن آشنا شدیم استفاده کنیم تا کدهای جاوا اسکرپت بین بقیه کدها تشخیص داده شوند:

<head> 
<script language="javascript">
<!-- hide from old browsers
alert('به این صفحه خوش آمدید ');
//-->
</script>
</head>

فرمان بالا یک کادر محاوره ای را وقتی که بیننده صفحه شما را باز می کند نشان می دهد. وقتی که OK را کلیک کنید بارگذاری صفحه ادامه پیدا می کند.

آیا می خواهید آنرا امتحان کنید؟ لینک زیر را کلیک کنید و به صفحه آزمایشی که ما برای این فرمان ساخته ایم بروید:

!پیام هشدار به محض باز شدن صفحه!

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

!چندین پیام هشدار به محض باز شدن صفحه!

این هم کدی که مسئول این پیامها است:

<head>
<title>javascript example 2</title>
<script language="javascript">
<!--
alert('خود اضافه کنید favorite لطفاً سایت ما را به منوی');
alert('را انتخاب کنید add to favorite گزینه favorite از منوی');
alert('می توانید این کا را با کلیدهای میانبر هم انجام دهید');
alert('را فشار دهید d فقط کلید کنترل را نگهدارید و کلید');
//-->
</script>
</head>

شما می توانید برای ظاهر شدن کادر هشدار از دکمه ها هم استفاده کنید. فقط کد را در جایی که می خواهید دکمه نشان داده شود قرار دهید. در این حالت شما نیازی به تگهای <script> هم ندارید. این هم یک نمونه از این نوع پیام هشدار:

این هم کد این اسکرپت:

<input type="button" value="اگر این صفحه را مطالعه کرده اید اینجا را کلیک کنید"
onclick="alert('از اینکه به سایت ما مراجعه کردید متشکریم باز هم سری به ما بزنید')">

ما در این دکمه از رویداد onclick استفاده کردیم. کار این رویداد هم مانند onmouseover است با این تفاوت که کد مربوطه را در هنگام کلیک کردن روی آن اجرا می کند.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:54 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

معرفی دستور شرطی if...else و کاربردهای مختلف آن

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

دستور شرطی if

if (condition)
{
دستوری که در صورت درستی شرط اجرا می شود در اینجا قرار می گیرد 
}

به یک مثال برای دستور if توجه کنید :

var test = confirm('اگر این پیام را تأیید کنید دستور شرطی اجرا می شود'); 

if (test == true) {
alert('شما دکمه مورد نظر را کلیک کردید و این پیام به نمایش در آمد');
}

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

برای مشاهده مثال بالا در عمل اینجا را کلیک کنید.

دستور شرطی if...else

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

if (condition) {
دستوراتی که در صورت برقراری شرط اجرا می شوند. 
} 
else {
دستوراتی که در صورت عدم برقراری شرط اجرا می شوند. 
}

در کد بالا ابتدا شرط بررسی می شود و در صورت برقراری آن دستورات مربوطه اجرا می شوند ولی در صورتی که شرط برقرار نباشد دستورات مربوط به قسمت else اجرا می شود.

var yourmark = prompt('یک شماره از 0 تا 20 وارد کنید :',''); 

if (yourmark > 10) {
alert('شماره ای که وارد کرده ای از 10 بزرگتر است'); 
} 
else {
alert('عبارتی که شما وارد کرده اید از 10 بزرگتر نیست!');
}

برای مشاهده نتیجه مثال بالا لینک زیر را کلیک کنید و در کادری که نمایش داده می شود یک عدد از 0 تا 20 وارد کنید و دکمه OK را کلیک کنید.

مثال استفاده از دستور if...else

استفاده از دستور if..else if...else (دستورات شرطی تو در تو)

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

if (condition 1) {
دستوراتی که در صورت درستی شرط اول اجرا می شوند 
}
else if (condition 2) {
دستوراتی که در صورت درستی شرط دوم اجرا می شوند
}
else {
دستوراتی که زمانی که هیچکدام از شرطها صحیح نباشد اجرا می شوند 
}

در این روش محدودیتی از نظر تعداد شرطها وجود ندارد و می توانیم به تعداد نامحدود از دستور else if استفاده کنیم ولی در مواردی که تعداد این شرطها خیلی زیاد می شود بهتر است به جای این روش از دستور switch که بعداً توضیح داده خواهد شد استفاده کنیم.

در اینجا مثال قبل را با کمی تغییر برای این روش استفاده می کنیم :

var yourmark = prompt('یک شماره به دلخواه وارد کنید :',''); 

if (yourmark > 0 && yourmark < 100 ) {
alert('شماره وارد شده بین 0 تا 100 است'); 
}
else if (yourmark > 100) {
alert('شماره وارد شده از 100 بزرگتر است'); 
}
else {
alert('عبارت وارد شده یا 0 است یا به جای عدد از حروف استفاده کرده اید'); 
}

برای مشاهده نتیجه مثال دستور if...else if...else اینجا را کلیک کنید.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:53 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

دستور شرطی switch در جاوا اسکرپت

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

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

switch(x) 


{


case مقدار اول:


این کد در صورت برابری متغیر x با مقدار اول اجرا می شود


break    


case مقدار دوم:


این کد در صورت برابری متغیر x با مقدار دوم اجرا می شود


break


default:


این کد در صورتی اجرا می شود که مقدار متغیر x با هیچکدام از مقادیر ذکر شده برابر نباشد


}

در این دستور مقدار متغیر معرفی شده در قسمت switch با مقادیر آورده شده در هر case مقایسه می شود. در صورت مساوی بودن مقادیر کد همان case اجرا می شود و با استفاده از دستور break آورده شده در هر قسمت برنامه پس از اجرای کد آن قسمت به خارج از دستور switch هدایت می شود. در غیر این صورت برنامه به سراغ case بعدی می رود و در صورتی که مقدار متغیر مورد نظر با هیچکدام از case ها برایر نبود کد قسمت default اجرا خواهد شد.

قابل ذکر است که استفاده از default اختیاری است و شما بنا به نیاز خود می توانید از آن استفاده کرده یا آنرا حذف کنید.در دستور switch محدودیتی در تعدار case ها وجود ندارد و می توانید به هر تعدادی که نیاز داری از این مورد استفاده کنید.

در این قسمت به ذکر یک نمونه برای ادستور switch می پردازیم :

به کدی که در اینجا آورده شده است توجه کنید. پس از جرای این کد کادری باز می شود که از شما میخواهد عددی را وارد کنید. با وارد کردن عدد در این کادر و تأیید آن پیامی متناسب با روز معادل آن عدد در هفته ظاهر می شود. البته ما این کار را فقط برای اعداد 1 تا 3 انجام دادیم، شما در صورت تمایل می توانید آنرا تکمیل کنید : 

var x=prompt('لطفاً یک عدد بین 1 تا 7 وارد کنید :',' ');

 

switch (x) {


case '1':


alert('شماره وارد شده مربوط به روز « شنبه » است');


break


case '2':


alert('شماره وارد شده مربوط به روز « یکشنبه » است');


break


case '3':


alert('شماره وارد شده مربوط به روز « دوشنبه » است');


break


case '4':


alert('شماره وارد شده مربوط به روز « سه شنبه » است');


break


case '5':


alert('شماره وارد شده مربوط به روز « چهارشنبه » است');


break


case '6':


alert('شماره وارد شده مربوط به روز « پنجشنبه » است');


break


case '7':


alert('شماره وارد شده مربوط به روز « جمعه » است');


break


default:


alert('روز مربوط به شماره وارد شده در این برنامه وجود ندارد');


}

برای مشاهده مثال بالا در عمل اینجا را کلیک کنید.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:53 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

رویداد onMouseover

وقت اون رسیده که نوشتن اولین اسکرپت خود را شروع کنید. این یکی راحته چون مجبور نیستیم درگیر اضافه کردن تگهای SCRIPT شویم. این اسکرپت کوچک به دلخواه شما وقتی نشانگر ماوستان روی یک لینک قرار می گیرد متنی را در نوار وضعیت مرورگرتان می نویسد. به مثال نگاه کنید:
 

<a href ="JavaScript_2.htm" 
onMouseover="window.status='« آموزش جاوا اسکرپت »';return true">
ماوس خود را روی این لینک قرار دهید!!!
</a>

شما هم امتحان کنید و ببینید چگونه کار می کند. نشانگر ماوس خود را روی لینک زیر قرار دهید ولی کلیک نکنید (اگر کلیک کنید، چون در کد بالا آدرس لینک، آدرس همین صفحه است پس از کلیک کردن دوباره همین صفحه باز می شود). حالا پایین پنجره مرورگر خود به نوار وضعیت نگاه کنید باید این جمله را بینید: « آموزش جاوا اسکرپت »

ماوس خود را روی این لینک قرار دهید!!!
 

بسیار خوب، این چیزی است که با فرمان onMouseover اتفاق می افتد:

  1. " "=onMouseover
    این شکل فرمان onMouseover است. مرورگر انتظار فرمان دیگری بین دو علامت دابل کوت ( " ) را دارد.
  2. '« آموزش جاوا اسکرپت »'=window.status
    این فرمان به مرورگر میگوید که جمله ای را در نوار وضعیت بنویسد. شما می توانید جمله بین دو علامت ( ' ) را با آنچه که می خواهید در نوار وضعیت به نمایش در آید جابجا کنید.
  3. return true
    عبارت را تأیید کرده و مرورگر آن را نمایش می دهد.

دلیل استفاده از علامت سینگل کوت ( ' ) در فرمان window.status این است که window.status خود قسمتی از فرمان onMouseover است که از ( " ) استفاده کرده است. اگر دوباره از علامت دابل کوت ( " ) استفاده کرده بودیم ممکن بود مرورگر در مورد اینکه چه کاری باید انجام دهد گیج می شد. چون ممکن بود علامت دابل کوت دوم را به منزله پایان فرمان onMouseovr تلقی کند و فرمان جدیدی را با window.status شروع کند:   onMouseover=""window.statuse

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

<a href ="JavaScript_2.htm" 
onMouseover="window.status='متن خود را اینجا قرار دهید'; return true"
onMouseout="window.status=' '; return true">
لینک خود را اینجا قرار دهید
</a>

این فرمان متن نوار وضعیت را وقتی که نشانگر ماوس روی آن نیست ناپدید می کند. مانند زیر:

لینک خود را اینجا قرار دهید

در حقیقت ما همان کار قبل را تکرار کردیم ولی به جای متن از فضای خالی در فرمان window.status استفاده کردیم.

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

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:52 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

دکمه ها و موارد استفاده آنها

ما برای نوشتن اسکرپت با استفاده از دکمه ها، ابتدا باید بدانیم چگونه می توان یک دکمه را در یک صفحه قرار داد. برای این کار شما باید از تگهای  <FORM> در اطراف تگ دکمه استفاده کنید. در مثال زیر نمونه یک HTML که یک دکمه را در یک صفحه قرار می دهد آورده شده است:

<FORM>
<INPUT type="button" value="اینجا کلیک کنید" name="button1">
</FORM>

این فرمان یک دکمه را در صفحه شما قرار می دهد، اما اگر روی آن کلیک کنید اتفاقی نمی افتد...

در زیر کار هر قسمت از فرمان بالا را می بینیم:

  1. <FORM>
    این قسمت یک فرم را ایجاد می کند بنابر این ما می توانیم یک دکمه بسازیم.
  2. <INPUT>
    این تگ به ما اجازه می دهد نوعی ناحیه ورودی بسازیم.
  3. "type="button
    این فرمان ناحیه ورودی ما را به عنوان یک دکمه تعریف می کند.
  4. "اینجا کلیک کنید"=value
    این متنی است که افراد روی دکمه می بینند. شما می توانید هر چیزی را که می خواهید بینندگانتان روی دکمه ببینند اینجا بنویسید.
  5. "name="button1
    شما می توانید برای مراجعات بعدی یا احتمالاً استفاده در یک اسکرپت به دکمه خود یک نام بدهید.

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

onClick="javascript command"

فقط این فرمان را در تگ INPUT قرار دهید که دکمه را با آن ساختید، مانند زیر:

<INPUT type="button" value="اینجا کلیک کنید" name="button1" onClick=" ">

برای مثال ما می توانیم مانند فرمان onMouseover در این دکمه نیز استفاده کنیم و متنی را در نوار وضعیت پنجره چاپ کنیم!

<FORM>
<INPUT type="button" value="اینجا کلیک کنید" name="Button2"
onClick="window.status='متن خود را اینجا بنویسید'; return true">
</FORM>

حالا دکمه را فشار دهید و به متن نوار وضعیت نگاه کنید:

شما می توانید با استفاده از دکمه ها به بینندگان خود اجازه دهید رنگ زمینه صفحه را برای خودشان تغییر دهند. فقط از فرمان زیر به جای فرمان window.status استفاده کنید:

document.bgColor='رنگ مورد نظر به زبان انگلیسی نوشته شود'

فرمان زیر را به عنوان تمرین فرمان onClick وارد کنید:

<FORM>
<INPUT type="button" value="Chenge Background Color" name="button3" onClick="document.bgColor='yellow'">
</FORM>

حالا شما دکمه ای مانند زیر دارید که با کلیک کردن بر روی آن زمینه صفحه به رنگ زرد در می آید!

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

<FORM>
<INPUT type="button" value="تغییر رنگ زمینه به سفید"
name="button6" onClick="document.bgColor='white'"><br>
<INPUT type="button" value="تغییر رنگ زمینه به زرد "
name="button3" onClick="document.bgColor='yellow'"><br>
<INPUT type="button" value="تغییر رنگ زمینه به قرمز "
name="button4" onClick="document.bgColor='red'"><br>
<INPUT type="button" value="تغییر رنگ زمینه به آبی"
name="button5" onClick="document.bgColor='#66CCFF">
</FORM>

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

حالا شما سه دکمه دارید، آنها را امتحان کنید!

      

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

window.location='URL'

 برای مثال این هم اسکرپتی که شما را به صفحه آموزش جاوا اسکرپت ما می برد:

<FORM>
<INPUT type="button" value="آموزش جاوا اسکرپت" name="button6"
onClick="window.location='./'">
</FORM>

این هم دکمه، آن را امتحان کنید تا به سرفصل آموزش جاوا اسکرپت بروید:

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:51 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

موزش کار با تاریخچه مرورگر با استفاده از جاوا اسکرپت

مرورگر ها به صورت پیش فرض آدرس و حتی خود صفحاتی را که کاربر مشاهده می کند ذخیره می کنند. این آدرسها به ترتیبی که کاربر آنها را مشاهده کرده است در تاریخچه (history) مرورگر ثبت می شوند و دکمه های Back و Forward پنجره مرورگر بر اساس این تاریخچه کار می کنند. با استفاده از جاوا اسکرپت می توانیم به این تاریخچه دسترسی داشته باشیم و با کمک آن مسیر کاربران را هدایت کنیم.

ما برای کار با تاریخچه مرورگر در اینجا از دکمه های HTML استفاده می کنیم که با کمک رویداد onclick در هنگام کلیک کردن روی این دکمه ها دستورات مورد نظر ما اجرا خواهند شد. در اینجا می توانید کد HTML مربوط به ساخت این دکمه ها را مشاهده کنید (البته مقدار مربوط به شناسه onclick مربوط به دستورات جاوا اسکرپت است که بعداً وارد خواهد شد) :

<input type="button" value="متن روی دکمه" onclick="">

برای آشنایی بیشتر با رویداد های HTML می توانید از صفحه رویدادهای مربوط به صفحه کلید و ماوس در HTML استفاده کنید. (لینک در صفحه جدید باز خواهد شد)

دستورات مختلفی برای کار با تاریخچه مرورگر وجود دارد که همه آنها از شیء history استفاده می کنند. در ادامه می توانید تعدادی از این دستورات را که با بیشتر مرورگرها کار می کنند مشاهده کنید

history.back()

از این فرمان می توانید جهت هدایت کاربران به صفحه ای که قبل از صفحه کنونی در پنجره مرورگر مشاهد کرده اند استفاده کنید. این دستور دقیقاً مانند دکمه Back در پنجره مرورگر عمل می کند و در صورتی که صفحه کنونی اولین صفحه ای باشد که از زمان باز شدن پنجره نمایش داده شده باشد این دستور کاربردی ندارد. برای مشاهده یک نمونه از کاربرد این دستور می توانید لینک را کلیک کنید :

برای مشاهده کاربرد دستور ()history.back اینجا را کلیک کنید

در اینجا می توانید کئ مورد استفاده در مثال بالا را مشاهده کنید :

<input type="button" value="برای بازگشت به صفحه قبل اینجا را کلیک کنید" onclick="history.back()">

history.forward()

در صورتی که بازدید کننده قبلاً از دکمه Back در مرورگر خود استفاده کرده باشد یا با استفاده از دستور 
()history.back به صفحه قبلی باز گشته باشد می توانیم از دستور ()history.forward برای هدایت بازدید کننده به صفحه ای که پس از صفحه کنونی باز کرده است استفاده کنیم. این دستور کاربردی مشابه دکمه Forward در پنجره مرورگر دارد و کاربرد آن عکس کاربرد ()history.back است.

دکمه زیر با استفاده از دستور ()history.forward شما را به صفحه ای که برای مثال مربوط به بازگشت به صفحه قبلی مشاهده کرده اید هدایت می کند :

می توانید کد استفاده شده در ساخت دکمه بالا را در اینجا مشاهده کنید :

<input type="button" value="نمایش صفحه بعدی" onclick="history.forward()">

history.go()

با استفاده از دستورهای ()history.back و ()history.forward فقط امکان این وجود دارد که کاربران را یک صفحه به عقب یا جلو هدایت کنیم. اگر بخواهیم بازدید کننده را به چندین صفحه عقب یا جلو هدایت کنیم باید از دستور ()history.go استفاده کنیم.

1- استفاده از مقداری مثبت برای ()history.go

اگر برای دستور ()history.go از مقداری مثبت استفاده شود کاربر به همان تعداد صفحه در تاریخچه مرورگر به جلو هدایت می شود. به کد زیر توجه کنید :

<input type="button" value="متن روی دکمه" onclick="history.go(3)">

کد بالا دکمه ای را می سازد که کلیک کردن بر روی آن همان کاری را انجام می دهد که سه بار فشار دادن دکمه Forward در پنجره مرورگر انجام می دهد.

در صورتی که دستور به صورت (1)history.go نوشته شود مانند دستور ()history.forward عمل می کند.

2- استفاده از مقدار صفر برای ()history.go

در صورتی که این دستور به صورت (0)history.go نوشته شود باعث باز بارگذاری مجدد همان صفحه خواهد شد. برای مثال به کد زیر و دکمه ساخته شده با آن توجه کنید :

<input type="button" value="بارگذاری مجدد صفحه" onclick="history.go(0)">

این هم دکمه ساخته شده :

3- استفاده از مقادیر منفی برای ()history.go

اگر بخواهیم کاربر را چند صفحه در تاریخچه مرورگر به عقب هدایت کنیم می توانیم برای دستور ()history.go از مقادیر منفی استفاده کنیم. برای مثال به کد زیر توجه کنید :

<input type="button" value="متن روی دکمه" onclick="history.go(-3)">

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

history.length

با استفاده از دستور history.lentgh می توانید تعداد صفحاتی را که در تاریخچه مرورگر وجود دارد پیدا کنید. یعنی با استفاده از این دستور می توانیم به تعداد صفحاتی که از زمان باز شدن پنجره مرورگر در آن نمایش داده شده است پی ببریم. برای مثال می توانید با کلیک کردن بر روی لینک زیر تعداد صفحات ذخیره شده در تایریخچه پنجره مرورگر خود را پیدا کنید :

نمایش تعداد صفحات موجود در تاریخچه مرورگر

در اینجا می توانید کد مورد استفاده در ساخت لینک بالا را مشاهده کنید :

<a href="javascript:alert(history.length)">
نمایش تعداد صفحات موجود در تاریخچه مرورگر
</a>

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:50 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

کار با تصویر زمینه در طراحی صفحات با استایل

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

توضیحات

مقادیر قابل استفاده

ویژگی

مشخص کننده محل قرار گرفتن تصویر در اینترنت است

آدرس محل قرار گرفتن تصویر

background-image: url(url)

نوع تکرار تصویر را مشخص می کند

repeat, no-repeat, repeat-x, repeat-y

background-repeat: مقدار ویژگی

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

scroll, fixed

background-attachment: مقدار ویژگی

موقعیت تصویر زمینه در صفحه را مشخص می کند

مقدار اول:
top, center, bottom,
عددی در مقیاس پیکسل، عددی در مقیاس درصد 
مقدار دوم:
left, center, right,
عددی در مقیاس پیکسل، عددی در مقیاس درصد

background-position: مقدار دوممقدار اول

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:

<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/index.jpg);
background-repeat:repeat-y }
-->
</style>

در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید.

   

background-repeat

همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.

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

  • repeat
    این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
  • no-repeat
    این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
  • repeat-x
    این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
  • repeat-y
    این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.

background-attachment

از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد:

<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center }
-->
</style>

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

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:48 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل

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

برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم.

برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:

  • a:link و a 
    این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
  • a:hover
    این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
  • a:active
    این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
  • a:visited
    این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.

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

<style type="text/css">
<!--
a:link { مشخصات مورد نظر }
a:hover { مشخصات مورد نظر }
a:active { مشخصات مورد نظر }
a:visited { مشخصات مورد نظر }
-->
</style>

برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و ...

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

<style type="text/css">
<!--
a:link { color:green; font-size:12pt; text-decoration:none }
a:hover { color:red; background-color:#6699CC; border:#006699 2px solid }
a:active { color: white }
a:visited { text-decoration: underline }
-->
</style>

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

این لینکها با استفاده از کد بالا تنظیم شده اند.

ماوس خود را روی آنها قرار دهید.

می توانید بر روی آنها کلیک کنید.

همانطور که می بینید کدهایی که در قسمت HEAD این صفحه قرار دارند بر روی لینکهای بالا تأثیر گذاشته اند اما لینکها در سایر نقاط صفحه ویژگیهای متفاوتی دارند. دلیل این تفاوت این است که ما لینکهای بالا را در یک DIV قرار دادیم و برای آن یک ID در بخش HEAD صفحه تعریف کردیم و ویژگیهای مربوط به لینکهای بالا در قالب ID مشخص کردیم. در اینجا می توانید کدی را که ما مورد استفاده قرار داده ایم ببینید:

#pre a:link,#pre a { color:green; font-size:10pt; text-decoration:none }
#pre a:hover { color:red; background-color:#6699CC; border:#006699 2px solid; text-decoration:none }
#pre a:active { color: White }
#pre a:visited { text-decoration: underline; color:#003399 }

کد مربوط به DIV را نیز به صورت زیر نوشتیم:

<div align="center" id="pre">
کدهای مربوط به لینکها
</div>

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:47 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

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

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

cursor: نوع نشانگری که مورد نظر ماست

برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):

<span style="cursor: wait; color: red">ماوس خود را روی این متن قرار دهید.</span>

نتیجه را می توانید اینجا مشاهده کنید:

ماوس خود را روی این متن قرار دهید.

اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.

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

مقدار قابل استفاده

توضیحات

auto

این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد.

crosshair

نشانگر ماوس به صورت به علاوه در می آید.

default

نشانگر ماوس به صورت همان فلش همیشگی در می آید.

move

نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد.

pointer

نشانگر به شکل دست در می آید.

help

یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد.

text

به شکلی در می آید که بر روی متنها به خود می گیرد.

wait

به شکل ساعت شنی در می آید.

n-resize

یک فلش به سمت شمال

s-resize

یک فلش به سمت جنوب

e-resize

یک فلش به سمت مشرق

w-resize

یک فلش به سمت مغرب

ne-resize

یک فلش به سمت شمال شرقی

nw-resize

یک فلش به سمت شمال غربی

se-resize

یک فلش به سمت جنوب شرقی

sw-resize

یک فلش به سمت جنوب غربی

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:46 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS

background-position

این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.

دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:

  • top, center, or bottom
  • left, center, or right

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

  • background-position:top right
    این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
  • background-position:center right
    این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
  • background-position:bottom center
    این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.

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

در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:

<style type="text/css">
<!--
body {
background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>

برای مشاهده نتیجه اینجا را کلیک کنید.

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

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:46 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

وارد کردن CSS در تگهای HTML با استفاده از شناسه Style

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

<div style="property:value"

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

<div style="color:green">متن داخل DIV </div>

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

متن داخل DIV

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

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:

<div style="color:red; font-style:italic">این متن قرمز رنگ و ایتالیک است.</div>

نتیجه به صورت زیر خواهد بود:

این متن قرمز رنگ و ایتالیک است.

در این روش می توانیم به هر تعداد که لازم باشد از ویژگیهای مختلف درون یک تگ HTML استفاده کنیم. به مثال زیر توجه کنید:
 

<div style="color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center">متن مورد نظر اینجا قرار می گیرد.</div>

در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.

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

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:45 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

 

تعریف کردن استایل در بخش head صفحه HTML

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

<head>
<style>
<!--
span { color:red; font-style:italic }
-->
</style>
</head>

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید:

span { color:red; font-style:italic }

این خط مشخص می کند که هر بار که در صفحه از تگهای <STYLE> <STYLE/> استفاده می شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول ( " " ) که در متن HTML استفاده می شود از آکولاد ( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند.

وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود.

برای مثال کد زیر را وارد متن HTML خود می کنیم:

<span>این متن قرمز و ایتالیک است،</span> اما این متن خارج تگ &lt;span&gt; است و مشخصات آنرا ندارد.<br>
<span>این متن نیز قرمز و ایتالیک است.</span>

نتیجه را به صورت زیر مشاهده خواهید کرد:

این متن قرمز و ایتالیک است، اما این متن خارج تگ <span> است و مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.

با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام می دهیم که به آن خواهیم پرداخت.

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:45 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

استفاده از استایل خارجی برای طراحی صفحات HTML

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

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

div { font-family:Arial }
.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

<link rel="stylesheet" type="text/css" href="URL">

شناسه "rel="stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه "type="text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه " "=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

<link rel="stylesheet" type="text/css" href="http://www.neopersia.org/css/example.css">

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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

<div>این متن با فونت Arial نمایش داده خواهد شد.</div>

این هم نتیجه:

این متن با فونت Arial نمایش داده خواهد شد.

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

<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>

نتیجه به این صورت خواهد بود:

این متن به رنگ قرمز نمایش داده خواهد شد.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:44 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

نظیم عرض، ارتفاع، و overflow با CSS

عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل تعیین می کنیم:

<div style="width:200px">این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.</div>

نتیجه به صورت زیر خواهد بود:

این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

 

height

این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدار آن را 100 پیکسل قرار می دهیم تا وقتی که متن موجود در DIV از 100 پیکسل کمتر ارتفاع دارد ارتفاع DIV 100 پیکسل خواهد بود. ولی وقتی که متن داخل DIV زیاد باشد و از 100 پیکسل بیشتر شود در نتیجه ارتفاع DVI هم از 100 تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال زیر توجه کنید:

  1. ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است:

    <div style="height:100px">ارتفاع این متن از 100 پیکسل کمتر است.</div>

     

    ارتفاع این متن از 100 پیکسل کمتر است.

  2. حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است:

    <div style="height:100px">ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است.</div>

     

    ارتفاع
    این
    متن از
    100
    پیکسل 
    کمتر
    است.

اگر بخواهیم ارتفاع DIV همان 100 پیکسل بماند و تغییر نکند باید از پارامتر overflow در استایل استفاده کنیم. این پارامتر به ما این امکان را می دهد که تعیین کنیم وقتی محتویات DIV از عرض یا ارتفاع DIV بزرگتر می شود چگونه نمایش داده شود. در اینجا برای پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر از عرض یا ارتفاع DIV نمایش داده نشود. به مثال زیر توجه کنید:

<div style="height:100px;overflow:hidden">ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است.</div>

ارتفاع
این
متن از
100
پیکسل 
کمتر
است.

مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

 

overflow

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

<div style="width:200px; overflow:hidden"><nobr>طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شوند.</nobr></div>

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.

به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم:

  1. visible
    یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد.
  2. hidden
    این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
  3. scroll
    این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش از طول و عرض لازم دارند با استفاده از اسکرول بار قابل مشاهده باشند.

به یک مثال توجه کنید:

<div style="width:200px; overflow:scroll; border:dashed 1px #3399FF; white-space:nowrap">
طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.
</div>

این هم نتیجه:

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:43 توسط فرمانده کویر=یزد-میبد  | 

منتقل شد به سایتwww.OgpTheme.com

نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل

کادر (Boder)

border-style

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

  1. none
    با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.
     
  2. solid
      

    This DIV have a solid border

     

  3. dashed
      

    This DIV have a dashed border

     

  4. dotted
      

    This DIV have a dotted border

     

  5. double
      

    This DIV have a double border

     

  6. groove
      

    This DIV have a groove border

     

  7. hidden
      

    This DIV have a hidden border

     

  8. inset
      

    This DIV have a inset border

     

  9. outset
      

    This DIV have a outset border

     

  10. ridge
      

    This DIV have a ridge border

همانطور که می بینید عرض این کادرها بیش از آن چیزی است که ما نیاز داریم چون ما برای این کادرها عرضی مشخص نکردیم. اگر بخواهیم عرض این کادرها به اندازه مشخصی باشد باید از پارامتر width که قبلاً با آن آشنا شدیم استفاده کنیم. به مثال زیر توجه کنید:

<div style="width:300px; border-style:solid">برای این کادر عرض 300 پیکسل تعیین شده است.</div>

نتیجه به این صورت خواهد بود:

برای این کادر عرض 300 پیکسل تعیین شده است.

 

border-width

این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد:

  1. مقدار عددی بر حسب پیکسل
    در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید:

    <div style="border-style:solid; border-width:10px">این کادر 10 پیکسل ضخامت دارد</div>

    این هم کادر به دست آمده: 
     

    این کادر 10 پیکسل ضخامت دارد

     

  2. thin
    این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر:

    <div style="border-style:solid; border-width:thin">ضخامت این کادر thin در نظر گرفته شده است.</div>

    این هم کادر به دست آمده:
     

    ضخامت این کادر thin در نظر گرفته شده است.

     

  3. thick
    این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

    <div style="border-style:solid; border-width:thick">ضخامت این کادر thick در نظر گرفته شده است.</div>

    نتیجه به صورت زیر خواهد بود:
     

    ضخامت این کادر thick در نظر گرفته شده است.

 

border-color

شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد. اگر جدول معادل هگزا دسیمال رنگها را می خواهید اینجا را کلیک کنید. 
به یک نمونه برای تغییر رنگ کادر توجه کنید:

استفاده از نام رنگها:

<div style="border-style:solid; border-color:green">این کادر به رنگ سبز خواهد بود.</div>

این کادر به رنگ سبز خواهد بود.

استفاده از معادل هگزا دسیمال رنگها:

<div style="border-style:solid; border-color:#008000">این کادر به رنگ سبز خواهد بود.</div>

این کادر به رنگ سبز خواهد بود.

 

 

------------------------------

معرفی چند سایت خوب و نمونه :

1- گاپ شیعه2-ختم سایبری3-پورتال شیعی4-خانواده ایده آل5-راز سلامتی6-پورتال بلاگی7- چت روم شیعه8- آتلیه سایبری9-شیعه کلیپ10- گاپ اسکریپ11-فروشگاه سایبری12-پورتال موبایلی13-پورتال کامپیوتری14-آشپزخانه اسلامی15-دنیای شیرین کودکی16-سایت خنده17-فدراسیون سایبری تافیسا18- باشگاه خبری گاپ نیوز19- جهان گاپ20- بازی آنلاین سایبری21- مد روز سایبری21- مد روز سایبری22- مرکز اس ام اس ایران23- ملودی عاشقانه24-پاسخگوی مسائل شرعی

در صورت خواستار عضویت در گروه آنلاین پرشین شیعه به این آدرس ogpregister@yahoo.com پی ام یا ایمیل بزنید

+ نوشته شده در ۱۳۹۰/۰۵/۲۵ ساعت 12:42 توسط فرمانده کویر=یزد-میبد  | 
مطالب قدیمی‌تر