چگونه و چطور تصاوير را در صفحه خود بگنجانيم.
- ضبط تصاوير:
- نام و تگ tag تصوير:
- مشخص كردن سمت و جايگاه تصوير(aligning the image):
-
مشخص كردن سمت و جايگاه متن همراه تصوير(aligning text with image):
- مشخص كردن اندازه و ابعاد تصوير:
- فاصلههاي مياني مابين تصاوير بصورت افقي و عمودي(Hspace and Vspace):
- استفاده كردن از تصاوير براي نشان دادن لينكها:
- چند سايت و لينك مفيد:
1. ضبط تصاوير:
براي استفاده و ضبط كردن فايلهاي تصاوير شما بايد ابتدا آنها را در جايي مثل هارد ديسك (Hard disc) ضبط كرده و براي اين هدف ميتوانيد به اين صورت عمل كنيد.
-
دكمه سمت راست ماوس را به روي لينك(بيوند) تصوير كليك كنيد.
-
گزينه"Save link as" را در(Netscape) يا "Save target as" را در (Internet Explorer) انتخاب و كليك كنيد.
-
در اينجا مشخص كنيد كه كجا بايد فايل تصوير را بايگاني و نگاهداري شود در ضمن نام فايل را ميتوانيد تغيير بدهيد و نام جديدي را "Filename box" انتخاب كنيد.
-
دكمه "SAVE" را كليك كنيد.
-
حالا ميتوانيد فايل را به سايت يا صفحهتان انتقال دهيد.
يك تذكر:
سعي كنيد از دادن لينك مستقيم براي فايلهاي تصاوير خودداري ورزيد كه در اينصورت ممكن است به اشكال برخورد كنيد.
2. نام و تگ tag تصوير:
بايد توجه داشته باشيد كه نام تصوير را به همان گونه كه در بايگاني موجودند در تگ tag تصوير نوشته شوند يعني اگر نام تصوير با حروف بزرگ يا كوچك در بايگاني نوشته شدهاند بهمان صورت بزرگ يا كوچك بايد نوشته شوند وگرنه برنامه بطور صحيح عمل نخواهد كرد مثلا FLOWER.gif مثل flower.gif نيست و ايندو يكجور و يكي نميباشند. و تگ tag تصوير به صورت زير نوشته ميشود و احتياجي به نوع بسته آن ندارد.
<img src="نام فايل تصوير مورد نظر">
مثال:
<img src="images/animals.gif">
و اين تصوير فايل محتوي اين تگ تصوير است.
3. مشخص كردن سمت و جايگاه تصوير(aligning the image):
براي نشان دادن تصوير در جاي مورد علاقه خود بايد كه از كدهاي مشخصي استفاده نمود تا اينكه تصوير در جاي مورد نظر گنجانده شود.
اگر شما يك متن را نوشته و در همان خط بعد از تمام شدن متن تصويري را جاي بدهيد به اين صورت زير تصوير نامبرده نشان داده خواهد شد.
مثال:
تصوير مورد نظر به اين صورت نشان داده خواهد شد.
<img src="images/animals1.gif">
تصوير مورد نظر به اين صورت نشان داده خواهد شد.
مثال:
<img src="images/animals2.gif">در اينجا متن نوشته شده از سمت چب به راست است و تصوير در سمت چب اتوماتيكوار قرار خواهد گرفت.
مثال:
<center>
<img src="images/animals3.gif">
</center>
و در آخر اگر مايليد كه تصوير مورد نظر خود را در سمت راست يا چب قرار دهيد بايستي كه بترتيب از كدهاي
<align=right> يا <align=left> استفاده كرده و در داخل تگ تصوير گنجاند.
<img src="نام فايل تصوير مورد نظر" align=left>
و يا اينكه
<img src="نام فايل تصوير مورد نظر" align=right>
مثال:
<img src="images/animals4.gif" align=right>
جايگاه و سمت تصوير به اين صورت نشان داده خواهد شد.
4. مشخص كردن سمت و جايگاه متن همراه تصوير(aligning text with image):
اگر مايليد كه متني به همراه و در كنار تصوير مورد نظر خود داشته باشيد و چنانچه سمت و سوي آنرا مشخص ننمائيد متن داده شده به اين صورت نمايش داده خواهد شد.
مثال:
توضيح داده شده در كنار تصوير.
و با وارد نمودن كدهايalign=top‚ middle‚ absmiddle و bottom كه به ترتيب يعني بالا‚ وسط‚ كاملا در وسط و بايين متن مورد نظر در كنار تصوير قرار خواهد گرفت.
مثال
align=top
align=middle
align=absmiddle
align=bottom
هرگاه شما از كد align=top استفاده كنيد همينطور كه مشاهده ميكنيد تنها خط اول بالاي نوشته خواهد شد و بعد از آن خودبخود به بايين تصوير خواهد رفت. براي رفع اين مشكل شما ميتوانيد از كدهاي align=left يا align=right استفاده كنيد.
<img src="images/flower4.gif" align=right>
همانطوري كه در اينجا مشاهده ميكنيد با وارد كردن كد align=right در تگ تصوير متنهاي همراه در كنار تصوير قرار داده ميشوند. نخست تصوير نامبرده در جاي خود قرار خواهد گرفت و سبس متن همراه در خط بالاي تصوير شروع شده و در خطهاي كناري تصوير ادامه دارد تا همينطور خطهاي بايين تصوير. به همين صورت كد align=left عمل خواهد نمود با اين تفاوت كه جايگاه تصوير در سمت چب قرار دارد.
در اينجا ما دو تصوير را كه يكي در سمت چب و ديگري را در سمت راست صفحه و روبروي يكديگر قرار دادهايم همينطوري كه ميبينيد متن همراه اين دو ثصوير در بين آنها نوشته شده است.
<img src="images/flower4.gif" align=left>
<img src="images/flower4.gif" align=right>
5. مشخص كردن اندازه و ابعاد تصوير:
براي اينكه صفحهتان زودتر و سريعتر باز و يا دان لود(download) شود بهتر است كه از سازههاي يا كدهاي بلندي(height) و عرض(width) براي هر كدام از تصاوير استفاده كنيد.
شما لزومي ندارد كه همان اندازه و ابعادي را كه در بايگاني تصاوير را ضبط نموده به همان اندازه تصاوير را در صفحه خودتان بنمايش بگذاريد. و براي مشخص نمودن ابعاد تصاوير 2 راه حل در اينجا به شرح آنها خواهيم برداخت.
- تغيير دادن طول و عرض تصوير:
- تغيير دادن ابعاد تصوير بصورت كلي:
1. تغيير دادن طول و عرض تصوير:
براي بزرگ و يا كوچك كردن تصاوير شما ميتوانيد از كدهاي Height و Width (بخوانيد طول و عرض) استفاده كنيد.
مثال:
<img src="نام فايل تصوير" width=48 height=48>
<img src="نام فايل تصوير" width=72 height=72>
شما بايد توجه داشته باشيد كه ميتوانيد تنها مقدار يكي از اين ابعاد(Height‚ width) را بزرگ و يا اينكه كوچك انتخاب نمائيد.
مثال:
فرض بگيريد كه اين تصوير را داريم.
<img src="images/flower4.gif" width=48 height=48>اين تصوير را داريم.
<img src="images/flower4.gif" width=48 height=106>با 2 برابر نمودن طول تصوير به اين صورت در خواهد آمد.
<img src="images/flower4.gif" width=106 height=48>با 2 برابر نمودن عرض تصوير به اين صورت در خواهد آمد.
2. تغيير دادن ابعاد تصوير بصورت كلي:
براي تغيير دادن ابعاد تصوير بصورت كلي تنها كافي است كه كد width را در تگ تصوير گنجانده تا تصوير مورد نظر در تمامي ابعاد بطور يكسان بزرگ و يا كوچك گردد.
مثال
فرض بگيريد كه اين تصوير را داريد.
<img src="images/pink.gif" width=48>اين تصوير را داريم.
<img src="images/pink.gif" width=24>
با دو برابر كوچكتر نمودن كد width تصوير نامبرده به اين صورت در خواهد آمد.
<img src="images/pink.gif" width=106>
با دو برابر بزرگتر نمودن كد width تصوير نامبرده به اين صورت در خواهد آمد.
يك توضيح كوتاه:
شاخص مقدار اندازه داده شده به كدهاي Height و Width بر حسب PIXEL است كه مخفف دو كلمه انگيسي
PICTURE + ELEMENT كه بمعني سازههاي تصويري است. حالا شايد بعضيها بگويند كه اين سازههاي تصويري ديگر چه صيغهاي است. خوب تصور كنيد كه دستگاه صفحه تصوير يا مانيتور شما 19 اينچ است(اندازه دستگاه من است) كه داراي 1027×768 اجزا سازنده دارد يعني 768 در سمت Height و 1027 در امتداد Width است كه كل اجزا سازنده يك دستگاه صفحه تصويري 19 اينچ 768×1027=788736 است.
6. فاصلههاي مياني مابين تصاوير بصورت افقي و عمودي(Hspace and Vspace):
اگر شما بيش از يك تصوير در كنار يكديگر مورد استفاده قرار ميدهيد ميتوانيد فواصل بين آنها را كم يا زياد كرده و تعيين نمائيد. براي فواصل مياني افقي از كد hspace و براي فواصل مياني عمودي يا خوابيده از كد vspace مورد استفاده و در تگ تصوير قرار و جاي دهيد.
hspace (horizontal space) و vspace (vertical space) است.
مثال:
اين تصاوير را كه با بدون فواصل مياني مابين تصاوير بصورت افقي و عمودي در كنار يكديگر قرار دارند داريم.
حال اگر مقدار hspace=10 pixel كه براي فواصل مياني افقي ميباشد در هر تگ تصوير بگنجانيم تصوير بالا به اين صورت در خواهد آمد.
<img src="نام فايل مورد نظر" hspace=10>
كه به اين صورت نمايش داده خواهد داده شد.
و حال اگر مقدار vspace=10 pixel كه براي فواصل مياني عمودي ميباشد نيز در هر تگ تصوير بگنجانيم تصوير بالا به اين صورت در خواهد آمد.
<img src="نام فايل مورد نظر" hspace=10 vspace=10>
كه به اين صورت نمايش داده خواهد داده شد.
7. استفاده كردن از تصاوير براي نشان دادن لينكها:
اگر خواسته باشيد از تصاوير خواه از نوع تصاوير ثابت و يا متحرك(Animated) استفاده كنيد ميبايستي كه بصورت زير عمل نمائيد.
<a href="آدرس لينك مورد نظر">
<img src="فايل تصوير مورد نظر"></a>
مثال:
اين يك لينك با تصوير ثابت است.
مثال:
و اين هم يك لينك از نوع متحركي است.
تذكر:
در اينجا بايد يادآوري كرد كه تصاويري از نوع ثابت آن كمي با مشكل ميتوان آنها را متمايز داد كه داراي يك لينك هستند و ديگر اينكه اندازه مقدار بايت (byte) آنها نسبت به يك نوشته همراه با يك لينك خيلي بزرگتر است.
8. چند سايت و لينك مفيد:
شما با مراجعه كردن به اين سايتها ميتوانيد تصاوير دلخواه خود را از نوع تصويري ساده و متحركي(انيميشن) را ضبط كرده و مورد استفاده قرار دهيد.
1. Free clip art.
2. ClipArtConnection.com.
3. Image O Rama.
4. Inhalt.
5. Animation Library.
