تفاوت سمبل های Graphic و Movie در فلش :

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

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

  در هنگام import کردن یک عکس در فیلم فلش چند نکته مهم هست .

1-      عکس را در کوچکترین سایز ممکن وارد فلش کنید . چون اگر عکس بزرگی را وارد کنید و در فلش با ابزار های transform آن را کوچک کنید علاوه بر افزایش حجم فایل شما ، آن عکس نیز با شفافیت کامل دیده نمی شود.

2-      شما میتوانید از عکس هایی که وارد فلش کردید ، سمبل بسازید و سمبل آن را در فیلم فلش نمایش دهید . اینکار باعث میشود ابزار های بیشتری برای کار روی عکس داشته باشید . مثلا از روی عکستان سمبل گرافیک بسازید و آن را وارد صفحه فلش کنید . حالا یک Motion Tween بسازید از این سمبل گرافیک . در فریم کلیدی آخر آن کلیک کنید و سپس روی سمبل گرافیک کلیک کنید . حالا در پنجره properties از منوی بازشوی color گزینه alpha را برگزینید و مقدارش را صفر کنید . خوب ، فیلم فلشتان را اجرا کنید ، میبینید که سمبل شما آرام آرام در صفحه محو میشود .

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

تغییر خواص سمبل ها با اسکریپت

ما سه نوع سمبل داریم –graphic , movie , botton   - از بین این سمبل ها میتوان خواص دو سمبل دکمه و مووی(متحرک ) را براحتی کنترل کرد . برای کنترل هر شیی ابتدا باید نامی به آن بدهیم تا در کد نویسی با آن نام شیئ را خطاب کنیم . روی سمبل مورد نظرتان کلیک کنید و در پنجره properties در سمت چپ یک کادر متنی کوچک میبینید که داخل آن با حروف کمرنگ نوشته شده : instance name روی آن کلیک کنید و نامی برای شیی خود بگذارید . حالا یک دکمه روی فرم بگذارید و کد زیر را برای آن بنویسید ( کد زیر را در حالت expert وارد کنید)

On (release) {

Setproprty(“object”,_alpha,33);

}

درکد فوق object  نام شیی مورد نظر و alpha نام خاصیت مورد نظر و 33 مقدار داده شده به خاصیت آلفا میباشد . خاصیت آلفا همانطور که میدانید میزان پدیدار بودن شیئ را تعیین میکند و کم کردن آن باعث محو شدن شیی میشود .

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

_rotate میزان چرخش شیی

_height  ارتفاع سمبل

_width  طول سمبل

_x,_y نیز محل قرار گیری سمبل در صفحه هستند .

_visible نیز قابل دید بودن یا نبودن شیئ را معلوم میکند که باید مقدار آنرا بجای عدد ، True یا  False  بگذارید .

تفاوت سمبل های Graphic و Movie در فلش :

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

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

  در هنگام import کردن یک عکس در فیلم فلش چند نکته مهم هست .

1-      عکس را در کوچکترین سایز ممکن وارد فلش کنید . چون اگر عکس بزرگی را وارد کنید و در فلش با ابزار های transform آن را کوچک کنید علاوه بر افزایش حجم فایل شما ، آن عکس نیز با شفافیت کامل دیده نمی شود.

2-      شما میتوانید از عکس هایی که وارد فلش کردید ، سمبل بسازید و سمبل آن را در فیلم فلش نمایش دهید . اینکار باعث میشود ابزار های بیشتری برای کار روی عکس داشته باشید . مثلا از روی عکستان سمبل گرافیک بسازید و آن را وارد صفحه فلش کنید . حالا یک Motion Tween بسازید از این سمبل گرافیک . در فریم کلیدی آخر آن کلیک کنید و سپس روی سمبل گرافیک کلیک کنید . حالا در پنجره properties از منوی بازشوی color گزینه alpha را برگزینید و مقدارش را صفر کنید . خوب ، فیلم فلشتان را اجرا کنید ، میبینید که سمبل شما آرام آرام در صفحه محو میشود .

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

تغییر خواص سمبل ها با اسکریپت

ما سه نوع سمبل داریم –graphic , movie , botton   - از بین این سمبل ها میتوان خواص دو سمبل دکمه و مووی(متحرک ) را براحتی کنترل کرد . برای کنترل هر شیی ابتدا باید نامی به آن بدهیم تا در کد نویسی با آن نام شیئ را خطاب کنیم . روی سمبل مورد نظرتان کلیک کنید و در پنجره properties در سمت چپ یک کادر متنی کوچک میبینید که داخل آن با حروف کمرنگ نوشته شده : instance name روی آن کلیک کنید و نامی برای شیی خود بگذارید . حالا یک دکمه روی فرم بگذارید و کد زیر را برای آن بنویسید ( کد زیر را در حالت expert وارد کنید)

On (release) {

Setproprty(“object”,_alpha,33);

}

درکد فوق object  نام شیی مورد نظر و alpha نام خاصیت مورد نظر و 33 مقدار داده شده به خاصیت آلفا میباشد . خاصیت آلفا همانطور که میدانید میزان پدیدار بودن شیئ را تعیین میکند و کم کردن آن باعث محو شدن شیی میشود .

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

_rotate میزان چرخش شیی

_height  ارتفاع سمبل

_width  طول سمبل

_x,_y نیز محل قرار گیری سمبل در صفحه هستند .

_visible نیز قابل دید بودن یا نبودن شیئ را معلوم میکند که باید مقدار آنرا بجای عدد ، True یا  False  بگذارید .

}

نقطه :

در اكشن اسكريپت نقطه براي نشان دادن خواص يا متدهاي وابسته به يك شيي يا سمبل مووي كليپ استفاده ميشود . همچنين براي تعيين target path  در يك مووي كليپ يا متغير ، فانكشن يا آبجكت ها استفاده ميشود . عبارت نقطه دار با نام شيئ يا كليپ موردنظر آغاز شده ، نقطه ميگذاريم و در آخر با  يك المان كه توسط شما تعيين ميشود پايان مي يابد .

بطور مثال خاصيت x   كه براي مووي ها ميباشد مكان افقي مووي را روي صحنه مشخص ميكند . مثلا عبارت ball.x نشان دهنده مشخصه x از كليپ ball ميباشد .

مثال ديگر : submit يك متغير در كليپ Form است كه در كليپ shop قرار دارد . عبارت shop.form.submit=True  مقدار متغير submit  از form را True ميكند .

مثال ديگر : عبارت ball.play(); را داريم . play يك متد از كليپ ball است كه باعت اجراي اين كليپ ميشود .

نقطه همچنين با شيي مجازي _root  و _parent كار ميكند . شيي مستعار _root  به Timeline اصلي بر ميگردد. شما از اين شيي ميتوانيد براي خلق Target path هاي مطلق استفاده كنيد . بطور مثال عبارت زير باعث فراخواني فانكشن Buildgameboard  در مووي كليپ functions در Timeline اصلي ميشود .

_root.functions.buildgameboard();

از شيي مجازي _parent براي مراجعه يه يك كليپ كه كليپ كنوني در آن قرار دارد استفاده ميشود . همچنين ميتوانيد براي ساخت target path وابسته استفاده اش كنيد .

آكولاد:

عبارات اكشن اسكريپت توسط آكولاد ها گروه ميشوند .به مثال زير توجه كنيد .

on(release) {

            myDate = new Date();

            currentMonth = myDate.getMonth();

{

سمي كالن :

عبارات زبان اكشن اسكريپت با سمي كالن پايان ميابد . مثال:

column = passedDate.getDay();

row    = 0;

اگر شما سمي كالن پاياني را فراموش كنيد هيچ مشكلي براي اسكريپت شمل پيش نمي آيد اما بهتر است براي شيوايي اسكريپت خود آنرا هميشه بگذاريد .

پرانتز ها :

وقتي شما يك فانكشن تعريف ميكنيد ، بايد پارامتر هاي فرستاده شده در فانكشن را در پرانتز قرار دهيد . مثال :

function myFunction (name, age, reader){

            ...

}

همچنين براي آسانتر شدن عبارات رياضي در اسكريپت نيز از پرانتز ها بصورت ذيل استفاده ميشود .

(در زبان هاي برنامه نويسي اعمال رياضي بترتيب خاصي در پراسيجر تفسير ميشوند . وقتي يك عبارت رياضي داخل پرانتز باشد محاسبه آن قبل از بقيه عبارت صورت ميگيرد . به مثال زير دقت كنيد :

Total =2+3*5 ;

Total =(2+3)*5 ;

در عبارت اولي ابتدا عمل ضرب و سپس جمع صورت ميگيرد و پاسخ عدد 17 است

در عبارت دوم بعلت وجود پرانتز ابتدا پرانتز محاسه و سپس ضرب صورت ميگيرد و جواب 25 است .

از پرانتز همچنين براي مقدار دهي عبارات استفاده ميشود . قالب كلي آن مانند مثال زير است :

(new Color(this)).setRGB(0xffffff);

اگر بخواهيد از پرانتز استفاده نكنيد بايد از 2 عبارت استفاده كنيد :

myColor = new Color(this);

               myColor.setRGB(0xffffff);

حساسيت به حروف كوچك و بزرگ :

فقط كلمات كليدي اكشن اسكريپت به حروف حساسند و در بقيه موارد ميتوانيد از هر دو حالت استفاده كنيد .

شما نميتوانيد از اسم هاي رزرو شده اكشن اسكريپت بجاي نام اشياي خود استفاده كنيد .

اگر كلمات كليدي اسكريپت را از لحاظ كوچكي و بزرگي اشتباه بنويسيد اسكريپت حاصل دچار مشكل خواهد شد . keyword ها در حالت پيش فرض در پنجره اكشن به رنگ آبي هستند

كامنت نويسي :

كامنت ها كد نيستند بلكه جملاتي اند كه طراح در ميان كد ها براي توضيح درباره كد مينويسد تا در رجوع بعدي خود كاري كه انجام داده را بياد آورد . در اكشن اسكريپت از دو بك اسلش پشت سر هم ، براي نوشتن كامنت استفاده ميشود . خطي كه با //  شروع شود جزو كد ها به حساب نمي آيد و در كامپايل فايل فلش ناديده گرفته ميشود . در نوشتن كامنت محدوديت لغتي وجود ندارد .

كلمات كليدي :

اكشن اسكريپت تعدادي از لغات خاص را براي استفاده هاي خاص زبان اسكريپت براي خود رزرو كرده كه شما نميتوانيد اين لغات را بعنوان اسم متغير ، فانكشن يا اسامي ليبل استفاده كنيد .

اين كلمات عبارتند از :

ثابت ها :

ثابت ها چيز هايي مانند متغير ها هستند با اين تفاوت كه مقدارشان هرگز تغيير نميكند . بطور مثال ثابت هاي BACKSPACE, ENTER, QUOTE, RETURN از ثابت هاي شيي key هستند كه به كليد هاي كيبورد مربوطند . مثلا براي اينكه بفهميد كاربر كدام كليد را فشار داده از كد زير استفاده ميكنيم .

if(Key.getCode() == Key.ENTER) {

            alert = "Are you ready to play?";

            controlMC.gotoAndStop(5);

}

مطمئنا خيلي دوست داريد كه صفحات پويا و جذابي را خلق كنيد. من هم سعي خواهم كرد كه ترفندهايي كه براي اين كار وجود دارند را تا جايي كه بدانم و بدستم برسد را در سايت قرار دهم تا شما دوستان هم از آن استفاده كنيد. يكي از كارهاي جالي كه شما براي زيباتر شدن سايتتان ميتوانيد انجام دهيد Fade‌ كردن عكسها است. اين كار باعث ميشود كه در بازديد كنند حس لطافت و نرمي تداعي شود كه باعث راضي بودن بازديد كننده از سايت شما ميشود. در زير يك نمونه از همين كار را مشاهده ميكنيد.

◊ حداقل نيازها ◊

امكان Transparent كردن عكسها از Internet Explorer 5‌ به بعد به آن اضافه شد . بنابراين بازديد كننده شما بايد حتما از مرورگر Internet Explorer و با نسخه 5 به بالا به سايت شما متصل شود در غير اين صورت عكس به حالت عادي خود نمايش داده ميشود.

◊ آموزش  ◊

براي اجراي اين آموزش شما دو روش را ميتوانيد در پيش بگيريد . اول آنكه كد جاوا اسكريپت آنرا در خود فايل قرار دهيد و دوم آنكه آنرا در يك فايل جاوا اسكريپت خارجي قرار دهيد. حالا من هر دو راه را توضيح ميدهم.

در ابتدا كد جاوا اسكريپ زير را كپي برداشته و در يك فايل Text قرار دهيد.

حالا چنانچه ميخواهيد آنرا در يك فايل جداگانه ذخيره نماييد و در صفحه خود آنرا فراخواني نماييد، آنرا به نام picfader.js ذخيره كنيد و سپس در صفحه خود قبل از تگ </head> كد زير را قرار دهيد:

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="picfader.js"></SCRIPT>

و اگر مايليد كه كد جاوا اسكريپت را مستقيما در صفحه خود قرار دهيد كافي است همان كدي را كه كپي برداشتيد و در يك فايل متني چسبانده ايد را دوباره كپي برداريد و قبل از تگ </head> درون دو تا تگ <script> و </script> قرار دهيد.

حالا برايfade كردن عكس هم دو حالت وجود دارد يك حالت زماني كه ماوس بر روي عكس رفت و عكس به تنهايي محو شود يا اينكه زماني كه عكس بر روي يك لينك رفت آنگاه عكس محو شود. در هر دو راه روش كار يكي است اما فقط يك تغيير كوچو بايد بدهيد.

اگر ميخواهيد كه زماني كه ماوس بر روي عكس رفت آن محو كد زير را در تگ <img> خود قرار دهيد:

style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,50,20)" onMouseOut="nereidFade(this,30,50,5)"

در اين كد در قسمت اول يعني style مقدار محو شدن عكس يا همان opacity  را مشخص ميكنيد در قسمت دوم كه با onMouseOver‌شناخته شده است مقداري كه ماوس بر روي عكس رفت را مشخص ميكنيد و در قسمت onMouseOut مقداري كه ماوس از روي عكس خارج شد.

حالا چنانچه بخواهيد اين حالت را زماني كه ماوس بر روي يك لينك رفت اتفاق بيفتيد كافيست كه براي عكس خود فقط قسمت اول كد بالا را يعني همان style‌را در تگ <img> خود قرار دهيد و حتما يادتان باشد كه براي عكس خود يك نامي هم در نظر بگيريد. حالا در داخل تگ <a> كه مربوط ميشود به لينك شما بقيه كد را قرار دهيد. حالا براي اينكه مطلب روشن تر شود من براي هر كدام از حالات بالا يك مثال آورده ام:

براي زماني كه ماوس بر روي عكس ميرود:

 <img src="majidbanner.gif" width="468" height="60" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,100,50,20)" onMouseOut="nereidFade(this,30,50,5)">

براي زماني كه ماوس بر روي يك لينك ميرود:

 <img src="majidbanner.gif" width="468" height="60" style="filter:alpha(opacity=30)" name="majidbanner">

<a href="www.majidonline.com" onMouseOver="nereidFade(majidbanner,100,50,20)" onMouseOut="nereidFade(majidbanner,30,50,5)">The Iranian Graphic and Web Reference</a>

خب حالا كار تمام شد و ميتوانيد از آن لذت ببريد. فقط يك توضيح كوچك براي متغيرهاي اين كد بدهم.

onMouseOver="nereidFade(majidbanner,100,50,20)"

مقدار majidbanner كه در كد بالا مشخص شده است همان نام عكس ما است كه چنانچه از يك لينك براي محو شدن عكس استفاده ميكنيد بايد حتما نام عكس را در اينجا ذكر كنيد ولي در صورتي كه اين كار را ميخواهيد بر روي عكس اعمال نماييد ديگر نيازي به نام عكس نيست و مقدار آن ميتواند this‌باشيد.

مقدار 100 كه در كد بالا مشخص شده است درصد محو شدگي عكس است مثلا اگر مقدار آن 100 باشد يعني آنكه در آن لحظه مقدار محوي عكس هيچ است يعني كامل عكس نمايش داده ميشود يا چنانچه مقدار آن 50 باشد يعني آنكه 50 درصد عكس نمايش داده ميشود.

مقدار 50 كه در كد بالا مشخص شده است در اصطلاع تعداد فريمهاي ما هستند (fps) كه هرچه مقدار آن بيشتر باشد تعداد فريمهاي هنگام نمايش بيشتر خواهد بود ولي تا حدي سرعت fade‌ شدن كم ميشود.

مقدار 20 كه در كد بالا مشخص شده است مقدار زمان نمايش هر فريم است كه با زياد كردن آن سرعت بيشتر و با كم كردن آن سرعت آهسته تر ميشود.

طراحي سنگين در بعضي از صفحات باعث زياد شدن حجم آن صفحات ميشود. حجم زياد صفحات مخصوصا براي ما ايرانيان يك مشكل هميشگي و سدي براي طراحان بوده و خواهد بود! همين موضوع باعث خستگي و دلسرد شدن كاربر و بازديد كننده از صفحات ميشود و باعث ميشود بازديد كنندگان سايت روز به روز كمتر شوند. اما بايد براي اين كار چاره‌اي انديشيد. معقولانه ترين راه طراحي منطقي و كم حجم در عين حال زيبا و كاربر پسند است. اما گاهي اوقات نميتوان به هر دليلي صفحات را در حجم كم طراحي نمود مخصوصا صفحاتي كه داراي عكسهاي زيادي هستند. پس براي مشكل دوم هم بايد يك راهي را در نظر گرفت تا بتوان طراحي خوبي ارائه داد. در اين آموزش شما ياد خواهيد گرفت كه با يك سري دستورات جاوا اسكريپت چگونه براي صفحه خود Preloader قرار دهيد. اينكار سبب ميشود كه كاربر كمي آرامتر شده و تحمل آن هم براي ديدن صفحات بيشتر خواهد شد. اين كار را ميتوانيد در تمام سايتها و يا وبلاگها عملي كنيد.

براي شروع كار ابتدا كد جاوا اسكريپت زير را در تگ <head> صفحه مورد نظرخود قرار دهيد.

<SCRIPT>

var DHTML = (document.getElementById || document.all || document.layers);

function ap_getObj(name)

{

if (document.getElementById)

{

return document.getElementById(name).style;

}

else if (document.all)

{

return document.all[name].style;

}

else if (document.layers)

{

return document.layers[name];

}

}

function ap_showWaitMessage(div,flag)

{

if (!DHTML) return;

var x = ap_getObj(div);

x.visibility = (flag) ? 'visible':'hidden'

if(! document.getElementById)

if(document.layers)

x.left=280/2;

return true;

}

</SCRIPT>

و سپس كد زير را بعد از <body> قرار دهيد:

<DIV id=waitDiv style="LEFT: 40%; VISIBILITY: hidden; POSITION: absolute; TOP: 50%; TEXT-ALIGN:center">

   <TABLE cellPadding=6 border=0>

         <TBODY>

              <TR>

                  <TD align=middle>

             <IMG alt="Please wait" src="loading.gif">

           </TD>

        </TR>

      </TBODY>

   </TABLE>

</DIV>

<SCRIPT>

  ap_showWaitMessage('waitDiv', 1);

</SCRIPT>

در كدي كه بالا ذكر شد شما ميتوانيد طراحي مورد نظر خود را داخل تگ <DIV> قرار دهيد. توجه داشته باشيد تگ <DIV> حتما بايد وجود داشته باشد ولي محتواي درون آن (در اين كد مثلا <Table> ) ميتواند با توجه به نياز شما تغيير كند.

سپس كد زير را دقيقا بالاي (قبل از) </body> قرار دهيد. (اين تگ در يك خط مانده به آخرين خط صفحه شما قرار دارد)

<SCRIPT>

  ap_showWaitMessage('waitDiv', 0);

</SCRIPT>

حالا ديگر كدهاي نوشته شده توسط شما كار خواهد كرد. كافي است صفحه مورد نظر را درون سايت خود قرار دهيد و سپس آنرا مشاهده نمايد .

توجه داشته باشيد اين preload بر حسب load شدن صفحه شما ميباشد.

استايلها CSS (Cascading style sheet) بر سه نوع هستند.
۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد:

<tag style="Style Declarations">

*Style declarations: حالتهاي و نوع استايلهاي هستش.

براي مثال:

<h2 style="color:red; font-family:arial">Bolghan Tools</h2>

Bolghan Tools

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد.

<style>
Style Declaration
</style>

براي مثال:

<style>
h1 {color: gold; font-family: Times New Roman}
</style>

۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

<link href="url" rel="relation type" type="link type">

* URL: آدرس فايل استايل | *Relation type: برابر با stylesheet هست | *link type: هم با text/css برابر ميباشد.

براي مثال:

<link href="http://tools.bolghan.com/test.css" rel="stylesheet" type="text/css">

افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب می‌باشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا" کاربران از مشاهده آن صفحه صرف نظر می‌کنند و دیگر به آن باز نمی‌گردند این به معنی از دست دادن کاربران سایت می‌باشد که برای مدیران یک سایت اصلا" خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان می‌شود.

1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:

• مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور می‌کنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
• جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
• عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا" با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.
• بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
• تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
• با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی می‌توان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا" کاربران سایت شما را خوشحال خواهد کرد.

برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog استفاده کنید.

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

a:link, a:visited, a:active {

  width: 7em;

  font: bold 0.8em Georgia;

  text-decoration: none;

  display: block;

  margin-left: 0;

  margin-bottom: 0.5em;

  margin-top: 0.5em;

  color: white;

  background: #39c;

  border-left: 1px solid #6cf;

  border-bottom: 1px solid #068;

  border-right: 1px solid #068;

  padding: 0.25em 0.5em 0.4em 0.75em;

  border-top: 1px solid #6cf;

}

a:hover {

  background: #28b;

  padding: 0.35em 0.35em 0.25em 0.9em;

  border-top: #069;

  border-right: #6cf;

  border-bottom: #6cf;

  border-left: #069;

}

نتایج استفاده از کدهای بالا را در این صفحه مشاهده کنید. با استفاده از این کد می‌توانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین می‌رود. اگر به نحوه ایجاد این گونه کلیدها علاقمند هستید می‌توانید مقالات بخش CSS سایت A List Apart را مطالعه کنید.

3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x200 را می‌توان بصورت زیر نمایش داد:

<div class="pretty-image"></div>

کد HTML

.pretty-image {

  background: url(filename.gif);

  width: 200px;

  height: 200px

}

کد CSS

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

در این روش نمی‌توان از خصوصیت ALT استفاده نمود اگر واقعا" می‌خواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.

<image src="spacer.gif" class="pretty-image" alt="description" />

در اینجا spacer.gif یک تصویر 1x1 پیکسل شفاف (transparent) است که 50 بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری می‌شود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری می‌شود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب می‌باشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمی‌باشند.

4. استفاده از انتخاب کننده‌های (selectors) مناسب
به کد نامناسب زیر توجه کنید:

<p class="text">This is a sentence</p>

<p class="text">This is another sentence</p>

<p class="text">This is yet another sentence</p>

<p class="text">This is one more sentence</p>

.text {

  color: #03c;

  font-size: 2em

}

به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:

<div class="text">

<p>This is a sentence</p> 

<p>This is another sentence</p>

<p>This is yet another sentence</p>

<p>This is one more sentence</p> 

</div>

.text p {

  color: #03c;

  font-size: 2em

}

در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاه‌تر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما می‌توانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.

5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده می‌کنید:

font: 1em/1.5em bold italic serif

font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-family: serif

Font

border: 1px black solid

border-width: 1px;

border-color: black;

border-style: solid

Border

background: #fff url(image.gif) no-repeat top left

background-color: #fff;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

Background

margin: 2px 1px 3px 4px (top, right, bottom, left)

margin-top: 2px;

margin-right: 1px;

margin-bottom: 3px;

margin-right: 4px 

Margin

margin: 5em 1em 3em (top, left and right, bottom)

margin-top: 5em;

margin-bottom: 1em;

margin-right: 1em;

margin-right: 4em 

Margin

margin: 5% 1% (top and bottom, left and right)

margin-top: 5%;

margin-bottom: 5%;

margin-right: 1%;

margin-right: 1% 

Margin

این قوانین بطور عملی برای border و padding نیز قابل استفاده است.

6. استفاده از فراخوانی نسبی
سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا فضای بیشتری را اشغال می‌کند و تغییر دادن آنها در آینده مشکل است. یک مثال از فراخوانی مطلق بصورت زیر است: <a href="http://www.URL.com/filename.htm"> که بهتر است به این صورت باشد: <a href="filename.htm">. اما اگر فایل‌ها در فهرست‌های مختلف باشند از خلاصه نویسی‌های زیر استفاده کنید:

• <a href="/filename.html">: فراخوانی http://www.URL.com/filename.html
• <a href="/directory/filename.html">: فراخوانی http://www.URL.com/directory/filename.html
• <a href="./">: فراخوانی index.html در فهرست جاری
• <a href="../">: فراخوانی index.html از یک فهرست بالاتر
• <a href="../filename.html">: فراخوانی filename.html از یک فهرست بالاتر
• <a href="../../">: فراخوانی index.html از دو فهرست بالاتر

8. حذف تگ‌های غیر ضروری META و مقادیر درون آن
بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمی‌دهند. در صورت علاقه می‌توانید لیست تگهای META را در این آدرس مشاهده کنید. تگ‌های METAی با اهمیت برای موتورهای جستجو تگ‌های keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگ‌ها سعی کنید حجم محتوای آنها برای هر یک کمتر از 200 کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش حجم صفحه شما خواهد شد. متا تگ‌های طولانی برای موتورهای جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ می‌کنند.

9. انتقال JavaScript و CSS درون صفحه به فایلهای مستقل
برای استفاده از CSS که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

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

و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

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

هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر کاربر (برای استفاده‌های بعدی) ذخیره می‌شود. بجای قرار دادن JavaScript و CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید که هیچ محدودیتی برای استفاده از این فایل‌های خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای یکسان در تمام صفحات و چند فایل هم برای قسمت‌هایی که در صفحات خاص استفاده می‌شوند بسازید.

10. استفاده از / در انتهای آدرس فهرست‌ها:
بجای استفاده از این کد:

<a href="http://www.URL.com/directoryname" >

از کد زیر استفاده کنید:

<a href="http://www.URL.com/directoryname/" >

زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا" متوجه می‌شود که به یک فهرست اشاره شده و آنرا نمایش می‌دهد.

در هنگام طراحي صفحات با استفاده از CSS بعضي مرتكب اين اشتباه ميشود كه بخش كناري صفحه را در اول صفحه قرار ميدهند و بخش اصلي را در زير آن; به همين علت بازديدكنندگان تا پايان كار لود شدن بخش كناري بايد صبر كنند.

در قسمت كناري صفحه اغلب كدهاي javascript براي استفاده از سرويسهاي سايتهاي مختلف (مثل سايتهاي اندازه گيري بازديدكنندگان يا سايت blogrolling براي لينكهاي سايت) وجود دارد به همين خاطر كار لود شدن آن قسمت مدت به نسبت زيادي را به خود اختصاص ميدهد. به همين دليل در صورت قرار گيري اين بخش در قسمت بالاتر صفحه كار لود شدن نوشته هاي اصلي صفحه به تعويق خواهد افتاد.

اين كار بر خلاف فلسفه طراحي با استفاده از CSS است. ما با استفاده از CSS سعي ميكنيم كاري كنيم كه مطالب مهمتر زودتر از بقيه موارد ظاهر شوند.

براي قرار دادن بخش اصلي در ابتداي صفحه تگ DIV مربوط به بخش اصلي را در ابتدا و تگ DIV مربوط به بخش كناري را بعد از آن قرار دهيد. سپس خصوصيت float مربوط به style بخش اصلي را تايين كنيد. مثال:

براي اينكه رنگ ScrollBar صفحه سايت خود را عوض كنيد كافي است كد زير را در ابتداي برنامه خود اضافه كنيد. (تقريبا بعد از تگ )

<STYLE type=text/css>
BODY {
SCROLLBAR-FACE-COLOR: #739cbd;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #1f1f1f;
SCROLLBAR-3DLIGHT-COLOR: #739cbd;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #cee6f2;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff
}
</STYLE>

خب يك توضيحي در مورد اين سورس بدم...

اول اينكه اين چند خط كد از دستورات CSS‌پيروي ميكنه كه در تگ Style قرار گرفته است.

Scrollbar-face-color: در اين قسمت رنگ اصلي اسكرول را تعيين مي كنيد.

Scrollbar-shadow-color: در اين قسمت رنگ سايه اسكرول را مشخص مي كنيد (خط موجود در سمت راست و پايين اسكرول)

Scrollbar-highlight-color: در اين قسمت رنگ قسمت روشن اسكرول را مشخص مي كنيد (خط موجود در سمت چپ و بالاي اسكرول)

Scrollbar-3dhigh-color: اين پارامتر رنگ بوردر (خط) دور اسكرول را مشخص مي كند. (خط كلي در دور تا دور اسكرول)

Scrollbar-darkshadow-color: خط دوم سايه اسكرول را مشخص مي كند . (اين خط بر روي خط سايه كه در سمت راست و بالاي اسكرول است قرار ميگيرد)

Scrollbar-track-color: اين قسمت رنگ زمينه اسكرول را مشخص مي كند.

Scrollbar-arrow-color: رنگ فلش هاي موجود در كليدهاي بالا و پايين اسكرول را تغيير مي دهد.

CSS جايگزيني براي نمايش مبتني بر HTML پيشنهاد مي كند و اكنون به وسيله ي انجمن طراحي وب پذيرفته شده است . سازگاري css نيازمند برخي تغييرات از سوي توليد كنندگان وب است . css بسيار حساس به نحو دستوري است ، و اشتباهات كوچك مي توند باعث شكست كامل يك قانون css شود . بنابراين ، طراحان بايد از مشخصات آن آگاه باشند .

متاسفانه ، حتي اگر از قوانين پيروي كنيد ، خطاهاي آشكاري در پياده سازي مرورگرهاي پيشرفته وجود دارد . چيزهاي زيادي وجود دارد كه بايد درباره ي CSS بدانيد ، و امكانات جديد هر لحظه اضافه مي شود . CSS1 تعيين اولين شيوه نامه ، بيش از 50 خاصيت را تعريف مي كند ، و CSS2 بيش از 50 خاصيت ديگر را . CSS2 تسهيلات تغيير مكان كه CSS-P ناميده مي شود را به وجود آورده است . نگارش جديد كه CSS3 نام دارد قصد دارد امكانات ارائه بيشتري را به وجود آورد ، و با فناوري هاي ديگر ، نطير اسكريپت و گرافيك هاي برداري ، بيشتر يكپارچه شود .

مهم است به خاطر داشته باشيد كه HTML اساس و پايه ي يك صفحه وب است . CSS در واقع ، به طور مستقيم به استفاده صحيح از عناصر HTML يا XHTML استناد مي كند . ولي ، اگر به كد ناهنجاري محدود شده باشند لزوما به طور قابل پيش بيني اي كار نمي كنند .

هر چند واضح است كه مي خواهيم به برچسب هاي منطقي معني بدهيم ، ولي مواظب باشيد كه اين به شما مجوز نمي دهد از CSS به جاي كد HTML استفاده كنيد . قوانيني كه ارائه محدود برخي برچسب ها را تغيير مي دهند نبايد به كار روند . براي مثال در اينجا باعث مي شويم كه برچسب هاي <b> به طور غير معمولي عمل كنند و تمام اشكال تزئيني پيوندها را حذف نمايند :

b {font-style:italic; font-weight:normal;}
a {text-decoration:none; color: black; }

( اگر به دليل خاصي اين قوانين را بازنويسي كرده ايد ، حتما بايد آن ها را توضيح گذاري كنيد ) به خاطر مشكل معناي پيش فرض در HTML ، شايد برچسب هاي <div> و <span> فوق العاده مفيد باشند . هم چنين برچسب <div> يك برچسب بلوكي است كه هيچ نمايش پيش فرضي ندارد ، بنابراين در حالت دهي به بخش هاي بزرگ يك سند مفيد است . براي مثال :

<div style="background: lightblue; font-weight: bold; color: black;">
<p>This Paragraph is highlighted in blue.</p>
</div>

به طور مشابه برچسپ <span> هيچ معني يا نمايش از پيش تعريف شده ايي ندارد ، ولي وقتي يك برچسب هيچ كاراكتر بازگشت به ابتداي خط ( carriage return ) را نداشته باشد ، هنگام الصاق اطلاعات سبك به چند كلمه يا حرف ، مفيد به نظر مي آيد ، مانند مثال زير :

<p>Calling out<span style="background-color:#99CC00; font-weight:bold; color:#000000"></span>isn't hard with SPAN</p>

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

<link rel="stylesheet" href="styles/global.css" media="screen" />

روش دوم براي اضافه كردن CSS ، نهفته كردن آن است . وقتي يك شيوه نامه نهفته مي شود ، قوانين شيوه نامه را به طور مستقيم درون سند HTML بنويسيد . شيوه نامه ي گسترده شدن درون سند ( document-wide style ) يك راه بسيار ساده براي شروع استفاده از CSS است . يك برچسب <style> درون سر صفحه ي سند HTML قرار دهيد . به دليل اينكه چند شكل از شيوه نامه ها ممكن است اضافه شود ( فراتر از شكل استاندارد CSS ) بايد هنوز هم صفت type را اضافه كنيد تا نشان دهيد كه كدام شكل از شيوه نامه را به كار مي بريد ، البته صرفنظر از پشتيباني پيش فرض مرورگر از فناوري هاي شيوه نامه ها . به مثال هاي زير توجه كنيد :

شيوه نامه گسترده درون برجسب استايل

<style type="text/css">
body {background-color:#666666; font-size:9px; }
h1 {color:#990000;}
</style>

شيوه نامه پيوندي درون برجسب استايل

<style type="text/css">
@import url( wp-layout.css );
</style>

يك نگراني در مورد شيوه نامه ها ي گنجانده شده اين است كه همه ي مرورگرها اطلاعات شيوه نامه را به درستي درك نمي كنند . براي اجتناب از مشكلات ، اطلاعات شيوه نامه ها را با استفاده از روش توضيح گذاري HTML ، تبديل به توضيحات كنيد . به طوري كه اين توضيحات روي صفحه نمايش نشان داده نمي شوند يا توسط مرورگرهاي قديمي تر ، به طور نادرستي تفسير نمي گردند . ( نمي دانم نويسنده اين مطلب را براي چه عصري از مرورگرها نوشته ! اما احتياط شرط عقل است ! مهم تر از اون اين يك استاندارد است ! پس طراحان موظف به انجام آن هستند )

CSS گسترده شده درون سند در مقايسه با CSS پيوندشده داراي معايب قابل ملاحظه اي است زيرا بايد در هر صفحه كه استقاده مي شود يك نسخه از آن كپي شود . اين كار باعث سخت تر شدن اين گونه سايت ها مي شود و از حافظه نهائي محلي مرورگر نيز به شكل بهينه استفاده نمي شود .

آخرين روش به كار بردن CSS اعمال آن درون مولفه هاي ويژه با استفاده از صفت رايج style است . نيازي نيست كه اين گونه اطلاعات مربوط به شيوه نامه ها از مرورگرهايي كه نسبت به شيوه نامه ها اطلاعي ندارند مخفي شود ، زيرا مرورگرها صفاتي كه نمي فهمند را در نظر نمي گيرند . به مثال زير توجه كنيد :

<p style="color:#3366FF; font-size:12px;">This is red blue text!</p>

ولي بسياري از مزاياي اصلي استفاده از CSS به اين روش به دست نمي آيد . زيرا CSS خيلي به برچسب وابسته هستند . در واقع ، همه توافق دارند كه اين شيوه خيلي بهتر از به كاربردن برچسب هاي جديد جهت تشريح ظاهر صفحه نمي باشد . ولي برخي از طراحان از CSS به اين روش استفاده مي كنند تا از كد HTML قديمي به CSS پلي بزنند .

CSS جايگزيني براي نمايش مبتني بر HTML پيشنهاد مي كند و اكنون به وسيله ي انجمن طراحي وب پذيرفته شده است . سازگاري css نيازمند برخي تغييرات از سوي توليد كنندگان وب است . css بسيار حساس به نحو دستوري است ، و اشتباهات كوچك مي توند باعث شكست كامل يك قانون css شود . بنابراين ، طراحان بايد از مشخصات آن آگاه باشند .

متاسفانه ، حتي اگر از قوانين پيروي كنيد ، خطاهاي آشكاري در پياده سازي مرورگرهاي پيشرفته وجود دارد . چيزهاي زيادي وجود دارد كه بايد درباره ي CSS بدانيد ، و امكانات جديد هر لحظه اضافه مي شود . CSS1 تعيين اولين شيوه نامه ، بيش از 50 خاصيت را تعريف مي كند ، و CSS2 بيش از 50 خاصيت ديگر را . CSS2 تسهيلات تغيير مكان كه CSS-P ناميده مي شود را به وجود آورده است . نگارش جديد كه CSS3 نام دارد قصد دارد امكانات ارائه بيشتري را به وجود آورد ، و با فناوري هاي ديگر ، نطير اسكريپت و گرافيك هاي برداري ، بيشتر يكپارچه شود .

مهم است به خاطر داشته باشيد كه HTML اساس و پايه ي يك صفحه وب است . CSS در واقع ، به طور مستقيم به استفاده صحيح از عناصر HTML يا XHTML استناد مي كند . ولي ، اگر به كد ناهنجاري محدود شده باشند لزوما به طور قابل پيش بيني اي كار نمي كنند .

هر چند واضح است كه مي خواهيم به برچسب هاي منطقي معني بدهيم ، ولي مواظب باشيد كه اين به شما مجوز نمي دهد از CSS به جاي كد HTML استفاده كنيد . قوانيني كه ارائه محدود برخي برچسب ها را تغيير مي دهند نبايد به كار روند . براي مثال در اينجا باعث مي شويم كه برچسب هاي <b> به طور غير معمولي عمل كنند و تمام اشكال تزئيني پيوندها را حذف نمايند :

b {font-style:italic; font-weight:normal;}
a {text-decoration:none; color: black; }

( اگر به دليل خاصي اين قوانين را بازنويسي كرده ايد ، حتما بايد آن ها را توضيح گذاري كنيد ) به خاطر مشكل معناي پيش فرض در HTML ، شايد برچسب هاي <div> و <span> فوق العاده مفيد باشند . هم چنين برچسب <div> يك برچسب بلوكي است كه هيچ نمايش پيش فرضي ندارد ، بنابراين در حالت دهي به بخش هاي بزرگ يك سند مفيد است . براي مثال :

<div style="background: lightblue; font-weight: bold; color: black;">
<p>This Paragraph is highlighted in blue.</p>
</div>

به طور مشابه برچسپ <span> هيچ معني يا نمايش از پيش تعريف شده ايي ندارد ، ولي وقتي يك برچسب هيچ كاراكتر بازگشت به ابتداي خط ( carriage return ) را نداشته باشد ، هنگام الصاق اطلاعات سبك به چند كلمه يا حرف ، مفيد به نظر مي آيد ، مانند مثال زير :

<p>Calling out<span style="background-color:#99CC00; font-weight:bold; color:#000000"></span>isn't hard with SPAN</p>

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

<link rel="stylesheet" href="styles/global.css" media="screen" />

روش دوم براي اضافه كردن CSS ، نهفته كردن آن است . وقتي يك شيوه نامه نهفته مي شود ، قوانين شيوه نامه را به طور مستقيم درون سند HTML بنويسيد . شيوه نامه ي گسترده شدن درون سند ( document-wide style ) يك راه بسيار ساده براي شروع استفاده از CSS است . يك برچسب <style> درون سر صفحه ي سند HTML قرار دهيد . به دليل اينكه چند شكل از شيوه نامه ها ممكن است اضافه شود ( فراتر از شكل استاندارد CSS ) بايد هنوز هم صفت type را اضافه كنيد تا نشان دهيد كه كدام شكل از شيوه نامه را به كار مي بريد ، البته صرفنظر از پشتيباني پيش فرض مرورگر از فناوري هاي شيوه نامه ها . به مثال هاي زير توجه كنيد :

شيوه نامه گسترده درون برجسب استايل

<style type="text/css">
body {background-color:#666666; font-size:9px; }
h1 {color:#990000;}
</style>

شيوه نامه پيوندي درون برجسب استايل

<style type="text/css">
@import url( wp-layout.css );
</style>

يك نگراني در مورد شيوه نامه ها ي گنجانده شده اين است كه همه ي مرورگرها اطلاعات شيوه نامه را به درستي درك نمي كنند . براي اجتناب از مشكلات ، اطلاعات شيوه نامه ها را با استفاده از روش توضيح گذاري HTML ، تبديل به توضيحات كنيد . به طوري كه اين توضيحات روي صفحه نمايش نشان داده نمي شوند يا توسط مرورگرهاي قديمي تر ، به طور نادرستي تفسير نمي گردند . ( نمي دانم نويسنده اين مطلب را براي چه عصري از مرورگرها نوشته ! اما احتياط شرط عقل است ! مهم تر از اون اين يك استاندارد است ! پس طراحان موظف به انجام آن هستند )

CSS گسترده شده درون سند در مقايسه با CSS پيوندشده داراي معايب قابل ملاحظه اي است زيرا بايد در هر صفحه كه استقاده مي شود يك نسخه از آن كپي شود . اين كار باعث سخت تر شدن اين گونه سايت ها مي شود و از حافظه نهائي محلي مرورگر نيز به شكل بهينه استفاده نمي شود .

آخرين روش به كار بردن CSS اعمال آن درون مولفه هاي ويژه با استفاده از صفت رايج style است . نيازي نيست كه اين گونه اطلاعات مربوط به شيوه نامه ها از مرورگرهايي كه نسبت به شيوه نامه ها اطلاعي ندارند مخفي شود ، زيرا مرورگرها صفاتي كه نمي فهمند را در نظر نمي گيرند . به مثال زير توجه كنيد :

<p style="color:#3366FF; font-size:12px;">This is red blue text!</p>

ولي بسياري از مزاياي اصلي استفاده از CSS به اين روش به دست نمي آيد . زيرا CSS خيلي به برچسب وابسته هستند . در واقع ، همه توافق دارند كه اين شيوه خيلي بهتر از به كاربردن برچسب هاي جديد جهت تشريح ظاهر صفحه نمي باشد . ولي برخي از طراحان از CSS به اين روش استفاده مي كنند تا از كد HTML قديمي به CSS پلي بزنند .

اين يكي ديگه از آموزش هايي است كه با استفاده از اون مي تونيد مثل مقاله قبلي يه چيزي رو به دنبال موس به حركت در بيارين , اما با اين تفاوت كه به جاي متن شما مي تونيد عكس يا عكس هايي رو به دنبال موس به حركت در بياريد.

شما براي اين كار بايد دقيقا" بعد از  <Body> اين سورس را به فرم خود اضافه كنيد : 

  <script> var ns = (document.layers)?1:0; var Anim=new Array(); /* holds interval events */ var imgwidth=40; // Image width var imgheight=40; // Image height var button = Array(); // to pre-cache images button[0]=new Image(); button[0].src="pic1.gif"; button[1]=new Image(); button[1].src="pic3.gif"; //Initialize some variables to make the button always to appear on the frame's bottom-right corner if (ns) { document.write("<LAYER NAME='FlyOnOff' LEFT=0 TOP=0></LAYER>"); horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window..innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; }else { document.write("<div id='FlyOnOff' style='position:absolute; visibility:show; left:235px; top:-50px; z-index:2'></div>"); horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } // Moves the button in the right position function checkLocation() { objectXY="FlyOnOff"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-(imgwidth+30)+currentX; y=availableY-(imgheight+20)+currentY; eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); } Anim[0]=setInterval('checkLocation()', 10); (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; (document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition; var Dot_Ro=60; //Dot's distance from the mouse pointer var Dot_Theta=0; //Dot's initial angle var Dot_Speed; //Dot's absolute Angular speed var Dot_Direction=1; //Dot's direction (1=clockwise) var Dot_x=0; //Dot's original position var Dot_y=0; var alpha; //Angle from the fly to the mouse var mult; //Ausiliary variable to define the angle var picX = 20; //Fly's coords. var picY = 100; var mouseX = 0; //Mouse coords. var mouseY = 0; var step = 10; //Pixels var speed = 100;//u-seconds // Dir specifies the right picture; // img pre-caches images. var dir = Array(); dir[-4]="pic1.gif"; dir[-1]="pic2.gif"; dir[-2]="pic3.gif"; dir[-3]="pic4.gif"; dir[3]="pic1.gif"; dir[4]="pic2.gif"; dir[1]="pic3.gif"; dir[2]="pic4.gif"; dir[0]=""; var img = Array(); for (var i=-4; i<5; i++){ img[i]=new Image(); img[i].src=dir[i]; } // Some HTML code to show the fly. if (ns) { document.write("<LAYER NAME='FlyDiv' LEFT=0 TOP=0><img src="+dir[1]+" name='pic'></LAYER>"); }else { document.write("<div id='FlyDiv' style='position:absolute'>"); document.write("<img name='pic' src=" + dir[1] + "></div>"); } // Shows the proper image for the fly. function display(direction) { //direction must be from -4 to 4, but not 0. if (ns) { document.pic.src = dir[direction]; }else{ pic.src = dir[direction]; } } function getMousePosition(e) { mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop; mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft; } //Calculate new position function calcNewPos() { var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2)); Dot_Speed=Math.PI/15; Dot_Theta+=Dot_Direction*Dot_Speed; Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta); Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta); var arg = (Dot_y-picY) / (Dot_x-picX); mult = (Dot_x - picX < 0)? mult = -1:1; alpha = Math.atan(arg); var dx = mult * step * Math.cos(alpha); var dy = mult * step * Math.sin(alpha); picX += dx; picY += dy; } //Shows or hides the fly when the "button" is pressed function showhideAnimation() { if (ns) { document.layers['FlyDiv'].visibility=document.layers['FlyDiv'].visibility=="hide"?"show":"hide"; document.Button.src = document.layers['FlyDiv'].visibility=="hide"?button[1].src:button[0].src; }else { FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden"; Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src; } } // Moves the fly around the screen function moveFly() { // moves the fly in a new position... calcNewPos(); if (ns) { document.layers['FlyDiv'].left = picX; document.layers['FlyDiv'].top = picY; }else{ FlyDiv.style.left = picX - pic.width / 2; FlyDiv.style.top = picY - pic.height / 2; } // ... and changes the image. alpha=-180*alpha/Math.PI; alpha+=22.5; var OK=0; for(var i=0; (i<4)&& !OK; i++){ if (alpha<-Math.PI+45*i){ display(mult*(i+1)); OK=1; } } } // Changes Dot's turning direction function ChangeDotDirection() { Dot_Direction=-Dot_Direction; Dot_Theta+=Math.PI; } //Go! Anim[1]=setInterval('moveFly()', speed); Anim[2]=setInterval('ChangeDotDirection()', speed*50); function killIt() { for(var i=0;i<Anim.length;i++) { if(Anim[i]) { clearInterval(Anim[i]); Anim[i]=null; } } } </script>

خوب حالا توضيحات :

احتمالا" اگرحالا شما صفحه را Refresh كنيد مي بينيد كه چيزهايي شبيه عكس به دنبال موس در حركت مي باشد .

براي اينكه شما عكس هاي خودتان را جاي گزين كنيد بايد در اون پوشه اي كه اي page را قرار داديد 4 فايل عكس به انشعاب gif به نام هاي pic1.gif , pic2.gif , pic3.gif , pic4.gif را در اون پوشه  قرار بديد.

البته در خود سورس هم توضوحاتي نوشتم كه اگه كسي خواست اين كار رو سفارشي تر انجام بده مي تونه  اون ها رو هم تغييير بده به عنوان مثال در اول سورس يه چيزي مثل اين هست var imgwidth=40; // Image width كه با تغيير اون 40 به عددي ايگه مي تونيد ارتفاع عكس هايي رو كه به دنبال موس هستند رو عوض كنيد.

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

در مثال بالا تگ <a> برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولی ميتواند حتی يک تصوير باشد.

برای نمونه کد اچتمل زير پيوندی به سايت google.com ايجاد خواهد کرد:

و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.

روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.

  شناسه يا attribute ی به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>

در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

تگ های اچتمل (HTML Tags)

• با کمک تگ های اچتمل عناصر و يا Elements ساخته ميشوند.
• در زبان اچتمل حدود 80 عنصر تعريف شده است.
• تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
• تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>
• تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد.
• متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"
• تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first html page. <b>This text is bold</b>

</body>

</html>

*** نمونه ای از يک عنصر اچتمل:

<b>This text is bold</b>

عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

<body>

This is my first homepage. <b>This text is bold</b>

</body>

عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.

شناسه های يک تگ (Tag Attributes)

تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :