تبلیغات
پرتال فناوری اطلاعات ایران - مطالب آموزشDHTML
 
پرتال فناوری اطلاعات ایران
SKype:reza.arefan www.facebook.com/reza.arefan
درباره وبلاگ



مدیر وبلاگ : رضا عارفان
موضوعات
مطالب اخیر
پیوندهای روزانه
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
تقریبا تمام كسانی كه با طراحی صفحات وب و یا HTML سروكار دارند باCSS (Cascading Style Sheets) آشنایی دارند. با استفاده از CSS نحوه نمایش اطلاعات درون صفحه وب مشخص میشود. با استفاده از CSS تعیین نحوه نمایش اطلاعات بسیار راحتتر ازHTML است. همچنین انجام بعضی از انواع قالب بندی هایی كه با CSS امكان پذیر است با دستورات HTML امكان پذیر نیست.
یكی از امكانات جالبی كه CSS در اختیار ما میگذارد خصوصیتی بنام Filter میباشد. كه بوسیله آن میتوان به تصاویر و متنهای درون صفحه وب افكتهای متفاوتی را اضافه كرد. بطور مثال شما قادر خواهید بود درون یك صفحه وب یك متن سایه دار داشته باشید بدون اینكه از عكس بجای متن استفاده كنید. كه این خود باعث میشود كه ویرایش كردن متن مورد نظر شما نیز به راحتی صورت گیرد، چون دیگر شما با یك سری تصاویر كار ندارید، بلكه متن مورد نظر خود را به راحتی ویرایش میكنید. همچنین شما قادر خواهید بود كه شفافیت یك عكس را كم كنید یا آن را وارونه كنید. اینها فقط چند نمونه از امكانات خصوصیت Filter در CSS بود. در ادامه امكانات و نحوه استفاده از خصوصیت Filter را بیان خواهیم كرد.

باید دقت داشت كه برای كار كردن فیلتر ها همیشه باید خصوصیت wtihd را برای تگ مورد نظر تنظیم كنید. در غیر این صورت این فیلتر ها از كار خواهند افتاد.
برای اضافه كردن فیلتر ها از تگDIV استفاده شده است. برای راحتی كار با نوشتن دستورات زیر خصوصیت width برای تگ DIV تنظیم شده است. توجه داشته باشید كه این دستورات باید در قسمت head صفحه وب و قبل از تگ نوشته شود.

< style>
< !--
div{width:100%;}
-->
< /style>

همچنین برای اضافه كردن فیلتر ها از روش زیر استفاده شده است.

بطور مثال

< div style="filter: alpha(opacity=30);">
< img src="images/art11361.jpg" width="100" height="100">
< /div>

برای مشخص شدن خصوصیتهای مختلف دستورfilter و نتایج استفاده از هركدام از جدول زیر استفاده شده است.
در جدول زیر سعی شده دستورات مربوط به خصوصیت filter با تنظیمات مختلف نشان داده شود. همچنین این كدها به عنوان نمونه هستند و خود شما با تغییر هركدام از پارامترها میتوانید جلوه های متفاوتی را ایجاد كنید.
در قسمت مربوط به توضیحات هم سعی شده پارامترهای اصلی هركدام از فیلتر ها را بطور مختصرمعرفی شود.

filter: alpha(opacity=30);alpha : با این فیلتر میتوان میزان نمایان بودن یك تصویر را مشخص نمود
opacity : مقدارد نمایان شدن تصویر را مشخص مكند كه مقداری بین 0 تا 100 را می پذیرد.
filter:alpha(opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=100);در این قسمت تمام پارامترهای خصوصیت alpha نشان داده شده است. كه با استفاده از این پارامترها میتوان میزان نمایش داده شدن یك شكل را از كم به زیاد تعیین نمود.
filter:alpha(opacity=100, finishopacity=10, style=2, startx=0, starty=0, finishx=100, finishy=100);این مثال با همان پارامترهایی كه در مثال قبل آمده بود بیان شده و فقط مقادیر پارامترهایی كه بصورت رنگی در آمده اند تغییر كرده اند.
همچنین پاراتر style‌ میتواند مقادیری بین 0 تا 3 داشته باشد.
filter:blur(add=false, direction=90, strength=7);با این فیلتر میتوان تصویر را محو كرد.
direction : زاویه محو شدن شكل
strength: میزان تاثیراین فیلتر
filter:blur(add=true, direction=90, strength=7);add : این پارامتر مشخص میكند كه آیا تصویر اولیه نیز با تصویر ایجاد شده جدید تركیب شود یا خیر
filter:fliph;چرخش بصورت افقی
filter:flipv;چرخش بصورت عمودی
filter:gray;ایجاد جلوه سیاه و سفید
filter:xray;ابتدا شكل را سیاه و سفید و سپس میزان رنگها و روشنایی را معكوس میكند.
filter:invert;میزان رنگها و روشنایی را معكوس میكند.

Test mask picture

filter: mask(color=#ffffff);این فیلتر به این صورت عمل میكند كه محتویات مورد نظر را با یك رنگ خواص به صورت شفاف در میآورد در اینجا عكس مورد نظر به عنوان زمینه (backgroung) تعیین شده و با تنظیم رنگ با رنگ زمینه دلخواه (در اینجا سفید) در اصل ما رنگ متن را با یك تصویر پر كرده ایم.

Glow

filter:glow(color=#0099CC, strength=4);ایجاد حالت روشنایی با رنگ و میزان دلخواه در اطراف متن مورد نظر

Blur

filter:blur;همان فیلتر blur اما بدون پارامتر

Shadow

filter:shadow(color=#999999, direction=135);ایجاد جلوه سایه با رنگ و زاویه دلخواه

Drop Shadow

filter:dropshadow(color=#999999, offx=3, offy=3, positive=true);نمایش سایه یك متن با رنگ دلخواه در موقعیت دلخواه

Wave

filter:wave(strength=3);ایجاد جلوه موجی شكل به اندازه دلخواه

Flip H

filter: fliph();چرخش بصورت افقی

Flip V

filter: flipv();چرخش بصورت عمودی

دقت داشته باشید كه برای مشاهده جلوه های بیان شده به مرورگر Internet Explorer 4.0 یا بالاتر از آن نیاز است.

منبع : www.w3schools.com


فیلتر مورد نظر">
محتویاتی كه قرار است فیلتر بر روی آن اعمال شود
این محتویات میتواند هرچیزی باشد مثلا متن یا تصویر




نوع مطلب : آموزشDHTML، 
برچسب ها :
لینک های مرتبط :

       نظرات
شنبه 1 مرداد 1384
رضا عارفان

DOM)Document Object Model) یک رابط برنامه نویسی برای سندهای XML و Html است . با استفاده از اینترفیس فوق، نحوه دستیابی و انجام پردازش های لازم در رابطه با سند های XML و Html فراهم می گردد . برنامه نویسان با استفاده از DOM ، قادر به ایجاد یک سند ،حرکت در طول ساختار سند، افزودن ، اصلاح و یا حذف المان های یک سند XML و یا Html می باشند . DOM توسط کنسرسیوم وب استاندارد و بمنظور استفاده از طریق زبان های برنامه نویسی متعددی طراحی شده است .
گره ها
برنامه ای با نام پارسر، امکان استقرار یک سند XML در حافظه را فراهم می نماید . پس از استقرار سند در حافظه ، اطلاعات مربوطه بکمک DOM ، قابل بازیابی و پردازش خواهد بود . DOM ، یک نمایش شبه درختی از یک سند XML را ایجاد می نماید . المان Document ، دارای بالاترین سطح در درخت ایجاد شده است . المان فوق ، دارای یک و یا چندین فرزند است . یک اینترفیس گره ، امکان خواندن و یا نوشتن المان های خاصی در ساختار درختواره ای یک سند XML را میسر می نماید .با استفاده از خصلت ChildNodes مربوط به المان Document و بکارگیری یک حلقه تکرار می توان هر یک از گره ها را انتخاب و در ادامه عملیات مورد نظر در رابطه با آن را انجام داد . پارسر شرکت ماکروسافت (MSXML) ، دارای توابع متفاوت بمنظور حرکت در طول درخت، دستیابی به گره ها بهمراه خصلت مربوطه، درج و حذف گره ها و تبدیل ساختار درختی به شکل اولیه XML است . در حال حاضر، سیزده نوع متفاوت گره توسط پارسرشرکت ماکروسافت، حمایت می گردد . جدول زیر متداولترین نوع گره ها را نشان می دهد .

مثال
نوع گره

<!DOCTYPE food SYSTEM "food.dtd">
Document type
<?xml version="1.0"?>
Processing instruction
<drink type="tea">Irani</drink>
Element
type="tea"
Attribute
Irani
Text

استفاده از پارسر
بمنظور خواندن، ویرایش و یا ایجاد و پردازش یک سند XML ، می بایست از یک پارسر استفاده کرد . پارسر شرکت ماکروسافت، یک عنصر مبتنی بر COM بوده که بهمراه IE نسخه پنج ، ارائه شده است . پس از نصب مرورگر فوق، امکان استفاده از پارسر فراهم می گردد . پارسر MSXML ، دارای امکانات متعدد برنامه نویسی بمنظور استفاده توسط زبانهای زیر است :

حمایت از جاوااسکریپت VBScript Perl جاوا و ++ C

حمایت از استاندارد کنسرسیوم وب و XML DOM

حمایت از DTD و معتبر سازی

مثال : نحوه ایجاد شی Document ، با استفاده جاوااسکریپت ، VBscript و ASP در جدول زیر نشان داده شده است :

مثال
تکنولوژی

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
Javascript
set xmlDoc = CreateObject("Microsoft.XMLDOM")
VBscript
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
ASP

استقرار یک سند XML در حافظه
کدهای زیر نحوه استقرار یک سند XML با نام Test.xml در حافظه را نشان می دهد :

استقرار یک سند XML در حافظه

<script language="JavaScript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("Test.xml")
// ....... پردازش های لازم
</script>


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

استقرار متن XML در پارسر
کدهای زیر، نحوه استقرار یک رشته متن را در پارسر XML نشان می دهد . در مثال فوق از متد LoadXML در مقابل متد load استفاده شده است . از متد loadXML بمنظور استقرار یک رشته متن در پارسر استفاده می گردد .

استقرار یک رشته متن XML در حافظه

<script language="JavaScript">
var text="<note>"
text=text+"<to>Ali</to><from>Reza</from>"
text=text+"<heading>Reminder</heading>"
text=text+"<body>Don't forget me this weekend!</body>"
text=text+"</note>"
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.loadXML(text)
// ....... پردازش های لازم
</script>




DOM)Document Object Model) یک رابط برنامه نویسی برای سندهای XML و Html است . با استفاده از اینترفیس فوق، نحوه دستیابی و انجام پردازش های لازم در رابطه با سند های XML و Html فراهم می گردد . برنامه نویسان با استفاده از DOM ، قادر به ایجاد یک سند ،حرکت در طول ساختار سند، افزودن ، اصلاح و یا حذف المان های یک سند XML و یا Html می باشند . DOM توسط کنسرسیوم وب استاندارد و بمنظور استفاده از طریق زبان های برنامه نویسی متعددی طراحی شده است .
گره ها
برنامه ای با نام پارسر، امکان استقرار یک سند XML در حافظه را فراهم می نماید . پس از استقرار سند در حافظه ، اطلاعات مربوطه بکمک DOM ، قابل بازیابی و پردازش خواهد بود . DOM ، یک نمایش شبه درختی از یک سند XML را ایجاد می نماید . المان Document ، دارای بالاترین سطح در درخت ایجاد شده است . المان فوق ، دارای یک و یا چندین فرزند است . یک اینترفیس گره ، امکان خواندن و یا نوشتن المان های خاصی در ساختار درختواره ای یک سند XML را میسر می نماید .با استفاده از خصلت ChildNodes مربوط به المان Document و بکارگیری یک حلقه تکرار می توان هر یک از گره ها را انتخاب و در ادامه عملیات مورد نظر در رابطه با آن را انجام داد . پارسر شرکت ماکروسافت (MSXML) ، دارای توابع متفاوت بمنظور حرکت در طول درخت، دستیابی به گره ها بهمراه خصلت مربوطه، درج و حذف گره ها و تبدیل ساختار درختی به شکل اولیه XML است . در حال حاضر، سیزده نوع متفاوت گره توسط پارسرشرکت ماکروسافت، حمایت می گردد . جدول زیر متداولترین نوع گره ها را نشان می دهد .

مثال
نوع گره

<!DOCTYPE food SYSTEM "food.dtd">
Document type
<?xml version="1.0"?>
Processing instruction
<drink type="tea">Irani</drink>
Element
type="tea"
Attribute
Irani
Text

استفاده از پارسر
بمنظور خواندن، ویرایش و یا ایجاد و پردازش یک سند XML ، می بایست از یک پارسر استفاده کرد . پارسر شرکت ماکروسافت، یک عنصر مبتنی بر COM بوده که بهمراه IE نسخه پنج ، ارائه شده است . پس از نصب مرورگر فوق، امکان استفاده از پارسر فراهم می گردد . پارسر MSXML ، دارای امکانات متعدد برنامه نویسی بمنظور استفاده توسط زبانهای زیر است :

حمایت از جاوااسکریپت VBScript Perl جاوا و ++ C

حمایت از استاندارد کنسرسیوم وب و XML DOM

حمایت از DTD و معتبر سازی

مثال : نحوه ایجاد شی Document ، با استفاده جاوااسکریپت ، VBscript و ASP در جدول زیر نشان داده شده است :

مثال
تکنولوژی

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
Javascript
set xmlDoc = CreateObject("Microsoft.XMLDOM")
VBscript
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
ASP

استقرار یک سند XML در حافظه
کدهای زیر نحوه استقرار یک سند XML با نام Test.xml در حافظه را نشان می دهد :

استقرار یک سند XML در حافظه

<script language="JavaScript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("Test.xml")
// ....... پردازش های لازم
</script>


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

استقرار متن XML در پارسر
کدهای زیر، نحوه استقرار یک رشته متن را در پارسر XML نشان می دهد . در مثال فوق از متد LoadXML در مقابل متد load استفاده شده است . از متد loadXML بمنظور استقرار یک رشته متن در پارسر استفاده می گردد .

استقرار یک رشته متن XML در حافظه

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

تشخیص خطاء و استفاده از شی ParseError در رابطه با وجود یک فایل

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("Test1.xml")
document.write("<br>Error Code: ")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error Reason: ")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error Line: ")
document.write(xmlDoc.parseError.line)


خطای مربوط به XML . فرض کنید یک سند XML که "خوش شکل " نمی باشد، توسط پارسر خوانده شود . کدهای زیر نحوه تشخیص و برخورد با خطاء را نشان می دهد :

تشخیص خطاء و استفاده از شی ParseError در رابطه با سند "خوش شکل "

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note_error.xml")
document.write("<br>Error Code: ")
document.write(xmlDoc.parseError.errorCode)
document.write("<br>Error Reason: ")
document.write(xmlDoc.parseError.reason)
document.write("<br>Error Line: ")
document.write(xmlDoc.parseError.line)


خصلت های ParseError

عملکرد
خصلت

کد خطای بوجود آمده ، برگردانده می شود .
errorCode
علت خطای بوجود آمده ،برگردانده می شود .
reason
شماره خط خطای بوجود آمده ، برگردانده می شود
line
محل بروز خطاء در خط مربوطه را برمی گرداند .
linePos
رشته ای که شامل خط مربوط به خطای بوجود آمده است، برگردانده می شود
srcText
url مربوط به سند مستقر سده در حافظه ، بر گردانده می شود .
url
محل بروز خطاء در فایل مربوطه، برگردانده می شود .
filePos

حرکت در طول درخت
یکی از متداولترین روش های بازیابی المان های یک سند XML ، حرکت در طول درخت ( از گره ای به گره دیگر ) و استخراج مقدار متن ذخیره شده بهمراه هر یک از المان ها است . کدهای نوشته شده زیر ، امکان حرکت در طول یک درخت XML را فراهم و در ادامه هر یک از المان های سند XML ، در خروجی نمایش داده می شوند ( کدها با استفاده از VBScript نوشته شده اند ) .

حرکت در طول درخت و نمایش المان های یک سند XML

set xmlDoc=CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
for each x in xmlDoc.documentElement.childNodes
document.write(x.nodename)
document.write(": ")
document.write(x.text)
next


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

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

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
nodes = xmlDoc.documentElement.childNodes
to.innerText = nodes.item(0).text
from.innerText = nodes.item(1).text
header.innerText = nodes.item(2).text
body.innerText = nodes.item(3).text


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

دستیابی به المان ها د ر یک سند XML از طریق نام و بکمک جاوااسکریپت

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
document.write(xmlDoc.getElementsByTagName("from").item(0).text)



منبع سخاروش




نوع مطلب : آموزشDHTML، 
برچسب ها :
لینک های مرتبط :

       نظرات
شنبه 1 مرداد 1384
رضا عارفان