ایجاد نقشه تصویری کاربر(راهنمای html)

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

اکنون که با مفهوم نقشه های تصویری آشنا شدید، خوب است که ایجاد نقشه های تصویری را نیز یاد بگیرید. یعنی در این بخش میخواهم به شما یاد بدهم که چگونه می توانید یک تصویر ایجاد کنید و نقاط حساسی را بر روی آن تعیین کنید به طوری که وقتی آن تصویر در یک مرورگر مثل IE یانت اسکیپ قرار گرفت، با کلیک کردن بر روی آن نقاط، URL مورد استفاده قرار گیرد. اما برای ایجاد نقشه های تصویری باید از یک برنامه گرافیکی استفاده کنید. به نظر میرسد که فتوشاپ، یکی از برنامه هایی است که در دسترس همگان قرار دارد. اما فتوشاپ موردنظر من، فتوشاپ ۵/۵ یا بالاتر است. در این نرم افزار برنامه ای با نام ImageReady et « glau z o 9-وجود دارد که با استفاده از آن می توانید نقشه های تصویری را ایجاد کنید. من این کار را به شما می آموزم. قبل از هر کاری، باید نرم افزار فتوشاپ ۵/۵ را بر روی کامپیوتر تان نصب کنید. با نصب این نرم افزار، برنامه ImageReadyنیز نصب خواهد شد. نقاط حساسی می توانند به شکل مستطیل، دایره یا چند ضلعی باشند. به طوری که پس از تعیین نقاط حساس، هر نقطه ای از آن شکلها کلیک شود، یک پیوند با مقصد (یک فایل HTML) برقرار می گردد. نقطه حساس مستطیلی با کلمه RECTANGLE، نقطه حساس دایره ای شکل، با کلمه CIRCLE و نقطه حساس چند ضلعی با استفاده کلمه POL مشخصی می شود. می خواهیم نقشه تصویری ایجاد کنیم که شامل سه نقطهٔ حساس باشد. یکی از نقاط حساس به صورت مستطیلی، یکی دیگر به شکل دایره و دیگری به شکل چند ضلعی باشد. برای اینکه شما را درگیر رسم کردن شکل کنم هر نقطه حساس را با یک حرف به صورت گرافیکی مشخص می کنم. بنابراین، کلمه WEB را در نظر گرفتم. می خواهیم کاری کنیم که وقتی کاربر بر روی حرف W کلیک کرد، یک فایل به نام leSt1.htm اجرا شود و وقتی که بر وی حرف E کلیک کرد، فایل test2.htm اجرا شود و با کلیک کردن بر روی حرف B، فایل test3.htm اجرا گردد. دقت داشته باشید که هر یک از حروف E ، W و B به عنوان بخشهایی از یک فایل تصویری اند. به عبارت دیگر، هر یکی از این حروف باید به یک نقطه حساس تبدیل شوند. اگر قبلاً با فتوشاپ آشنا باشید، به راحتی می توانید این کار را انجام دهید. و اگر آشنا نیستید، باز هم نگران نباشید زیرا مراحل انجام کار طوری توضیح داده می شوند که نیازی به آشنایی قبلی با فتوشاپ نیست. اما، آشنایی با مفهوم فرم ها و '' لایه ها" به این امر کمک می کند. هر بخشی از یک تصویر را یک فریم می نامیم. به عنوان مثال، هر یکی از حروف E ، W و B از تصویر موردنظر ما یک فریم هستند. یعنی این تصویر شامل سه فریم است. اما، لایه چیست. هر لایه در فتوشاپ می تواند بخشی از تصویر (فریم) را در خود ذخیره کند. بنابراین، هر نقطه حساس یا هر فریم، باید در یک لایه قرار داده شود. اگر باز هم این مفاهیم را به خوبی درک نکردید، نگران نباشید، زیرا در حین انجام کار با آن آشنا خواهید شد.اکنون آمادگی داریم که سه نقطه حساس به نامهای W ، E و B را ایجاد می کنیم.با فرض اینکه فتوشاپ ۵۵ یا نسخه بالا در سیستم شما نصب شده است، مراحل زیر را انجام د هید:

1.گزینهImageReady  Start/Programs/Adobe/Photoshop 5.5/Adobe را انتخاب کنید تا وارد برنامه ImageReady شوید

2-.در محیط   ImageReady LAYERS نیاز به پنجره ای به نام  دارید.اگر این پنجره اکنون در ایم محیط موجو نیست

گزینه Window/Layer را انتخاب کنید تا این پنجره ظاهر شود (شکلی ۵-۴)

3. گزینه File/New را انتخاب کنید تا فایل جدیدی ایجاد شود (در پنجره ای که با انتخاب این گزینه ظاهر شد، دکمه OK را کلیک کنید).

4.ابزار T را در منوی ImageReady انتخاب کنید و سپس ماوس را در محل مناسبی از فایلی که بازکردید کلیک کنید. اکنون حرف W را تایپ کنید. در پنجره Layers (شکل ۵-۴)، علامت را که در سطر اول شکل قرار دارد کلیک کنید تا منویی ظاهر شود (شکل ۶-۴). در این شکل، گزینه Layer Options را کلیک کنید تا شکل ۷-۴ ظاهر شود

5.در این شکل، مربع کنار گزینه Use Layer as ImageMap را کلیک کنید تا علامت تیک در آن قرار گیرد. بخش Shape، بر روی علامت کلیک کنید و گزینه RECTANGLE را انتخاب نمایند. در بخش URL سند HTML را تایپ کنند که با انتخاب این نقطه حساس باید اجرا شود. براساس آنچه که قبلاً گفته شد، در ،بخش کلیک کرده test1.htm  را تایپ کنید. د کمه OK را کلیک کنید بدین ترتیب، یک نقطه حساس ایجاد کردید که در لایه 1 قرار دارد.

 

اکنون حرف E را در کنار حرف W تایپ کنید. بدین ترتیب حرف E در لایه جدید قرار گرفت. این لایه نیز باید به یک نقطه حساسی تبدیل شود. برای این کار علامت را در شکلی ۵-۴ کلیک کنید و در منویی که ظاهر میشود، Layer Options را انتخاب کنید تا شکلی مانند شکل ۷-۴ ظاهر گردد. در این شکل، مربع کنار گزینه Use Layer As ImageMap را کلیک کنید تا علامت  تیک در آن قرار گیرد. در بخشی Shape دکمه را کلیک کرده  گزینه CIRCLE را انتخاب کنید تا یک نقطه حساس دایره ای شکل ایجاد شود. در بخش URL فایل test2.html را تایپ کنید (قبل از تایپ نام فایل، در آن محل کلیک کنید تا مکاننما در آنجا قرار گیرد). اکنون دکمه OK را کلیک کنید. تا نقطه حساسی دوم نیز ایجاد شود. 

۸. در شکل ۵-۴ علامت که در سطر اول و گوشه سمت راست قرار دارد کلیک کنید تا منوی شکلی ۶-۴ ظاهر شود. در این شکل گزینه New Layer را انتخاب کنید تا شکل ۷-۴ ظاهر شود. در این شکل، فقط بر روی دکمه OK کلیک کنید تا لایه جدیدی ایجاد شود.

۹. حرف B را در کنار حرف E تایپ کنید (اکنون باید WEB را در صفحه ImageReady داشته باشید). این لایه نیز 

باید به یک نقطه حساسی تبدیل شود. برای این کار، علامت تیک را در شکل ۵-۴ کلیک کنید و در منویی که ظاهر می شود گزینه Layer Options را کلیک کنید تا شکال ۷-۴ ظاهر گردد. در این شکل مربع کنار گزینه UseLayer AsImageMap را کلیک کنید تا علامت تیک در آن قرار گیرد. در بخشی Shape دکمه را کلیک کرده گزینه Polygon را انتخاب کنید و در بخشی URL فایل test3.htm را وارد کنید. دکمه OK را کلیک کنید.و بدین ترتیب، هر سه نقطه احساس موردنظر ما ایجاد شدهاند.

10.برای اینکه کارتان リ در یک مرورگر مرور کنید، گزینه L File/Preview In انتخاب کرده، گزینه Internet Explorer را کلیک کنید. اکنون این نقشه تصویر در این مرورگر ظاهر میشود و وقتی علامت ماوس بر روی هر کدام از این حروف قرار گیرد، به شکل دست درمی آید که نشان دهنده یک پیوند است. اگر درکامپیوترتان به این صورت نیست، حتما در جایی از کار شما اشکالی وجود دارد که باید مراحل قبلی را دنبال کنید.

۱۱. برای ذخیره نقشه تصویری که ایجاد کردید، گزینه File/Save Optimized AS را انتخاب کنید و آن را به نام دلخواهی ذخیره کنید. من آن را تحت ghomi.gif نام نمودم.

نکته مهم

وقتی فایل تصویر را مثلاً به نام ghomigif ذخیره کردید، فایل دیگری به نام ghomi.html توسط فتوشاپ ایجاد و بر روی دیسک ذخیره میشود. این فایل، حاوی دستورات HTML است که وقتی در یک مرورگر قرار گرفت، نقشه تصویری را پیاده سازی می کند. محتویات فایل ghomi.html را در ادامه خواهید دید.

12. از برنامه ImageReady خارج شوید و مرورگری مثل IE یا نت اسکیپ リ راه اندازی کرده،

فایل  ghomi.html را به آن  بیاورید. من آن ار به مرورگر Internet Explorer  آوردم که آن را در شکل 4.8 مشاهده می کنید.

13.اکنون باید محتویات فایلهای  test3.htm , test2.htm , test1.htm  را بنویسید . وقتی بر روی W   کلیک شودفایل teSt1.htm وقتی بر روی E کلیک شود، فایل test2.htm و وقتی بر روی B کلیک شود فایل TEST3.HTM 

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

محتویات فایل ghomi.html را که توسط فتوشاپ ساخته شده است در زیر مشاهده میکنید:

testl.htm 

<HTML>

 <BODY> 

<H1> YOU ARE IN TEST1.HTM </H1> 

</BODY>

 </HTML>

. test2.htm 

 

<HTML>

 <BODY>

 <H1> YOU ARE IN TEST2.HTM </H1>

 </BODY>

 </HTML> 

. test3.htm 

<HTML> 

<BODY>

 <H1> YOU ARE IN TEST3.HTM </H1> 

</BODY>

 </HTML> 

محتویات فایل Ghomi.html  را که توسط فتوشاپ ساخته شده است در زیر مشاهده می کنید:

<HTML>

 <HEAD>

 <TITLE>Untitled-1 </TITLE>

 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1 

</HEAD>

 <BODY BGCOLOR=#FFFFFF> <I-- ImageReady Slices (Untitled-1) --> 

<MAP NAME="ImageMap62537">

 <AREA SHAPE="polygon" ALT="B" COORDS="315,94, 318,111, 313,121, 323,132, 319,150, 306,158, 268,154, 272,89" HREF="C:\TEST3.HTM">

 <AREA SHAPE="circle" ALT="E" COORDS="195,120,41" HREF="C:\TEST2.HTM">

 <AREA SHAPE="rect" ALT="W" COORDS="43,86,139,155" HREF="CATEST1.H111.11">

 </MAP>

 <IMG SRC="GHOMI.gif" WIDTH=6 4 0 HEIGHT=4 8 0 BORDER=O USEMAP="#ImageMap62537">

 <I-- End ImageReady Slices -->

 <TABLE WIDTH="8 0%" BORDER=1 CELLPADDING=1 CELLSPACING=2 BGCOLOR=#FFFFFF>

 <TR>

 <TD>

 <DL>

 <DT>Format: GIF</DT>

 <DT>Dimensions: 640w x 480h</DT> 

<DT>Size: 2.557K</DT>

 <DT>Settings: Selective, 16 Colors, 100% Diffusion Dither, Transparency on, Non-Interlaced, 0% Web Snap</DT></DL>

 <PRE>

 <CODE>

 &It;HTML&gt;

 &It;HEAD&gt; 

&It;TITLE&gt;Untitled-1&IVTITLE&gt; 

&It;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"&gt;

 &IVHEAD&gt; 

&It;BODY BGCOLOR=#FFFFFF&gt; 

&It;!-- ImageReady Slices (Untitled-1) --&gt;

 &It;MAP NAME="ImageMap10247"&gt; 

&It;AREA SHAPE="polygon" ALT="B" COORDS="315,94, 318,111, 313,121, 323,132, 319,150, 306,158, 268,154, 272,89" HREF="C:\TEST3.HTM"&gt; 

&It;AREA SHAPE="circle" ALT="E" COORDS="195,120,41" HREF="CATEST2.H1MIgt; 

&It;AREA SHAPE="rect" ALT="W" COORDS="43,86,139,155" HREF="CATEST1.HTMIgt; &It;/MAP&gt; &It;IMG SRC="GHOMI.gif" WIDTH=6 4 0 HEIGHT=4 8 0 BORDER=0 USEMAP="#ImageMap10247"&gt; &It;!-- End ImageReady Slices --&gt; 

&ff;/BODY&gt;

 &It/HTML&gt;</CODE></PRE><TTD>

 </TR> </TABLE>

 </BODY> 

</HTML> 

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

 

 

 

مقالات مرتبط به طراحی سایت :

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