سلام خدمت همراهان عزیز یکشنبه ها و پنج شنبه ها با آموزش زبان برنامه نویسی (HTML) و (PHP) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی قبل مراجعه فرمایید .
ایجاد نقشه تصویری کاربر:
اکنون با مفهوم نقشه های تصویری آشنا شدید ، خوب است که ایجاد نقشه های تصویری را نیز یاد بگیرید.
یعنی در این بخش می خواهم به شما یاد بدهم که چگونه می توانید یک تصویر ایجاد کنید و نقاط حساس را بر روی آن تعیین کنید ، به طوری که وقتی آن تصویر در یک مرورگر مثل IE یا نت اسکیپ قرار گرفت ، با کلیک کردن بر روی آن نقاط ، یک URL مورد استفاده قرار گیرد.
اما برای ایجاد نقشه های تصویری باید از یک برنامه گرافیکی استفاده کنید. به نظر می رسد که فتوشاپ یکی از برنامه هایی است که در دسترس همگان قرار دارد. اما فتوشاپ مورد نظر من ، فتوشاپ 5/5 یا بالاتر است . در این نرم افزار، برنامه ای به نام Image Ready وجود دارد که با استفاده از آن می توانید نقشه های تصویری را ایجاد کنید .
من این کار را به شما آموزش می دهم . قبل از هر کاری ، باید نرم افزار فتوشاپ 5/5 را بر روی کامپیوتر نصب کنید با نصب این نرم افزار، برنامه Image Ready نیز نصب خواهد شد.
نقاط حساس می توانند به شکل مستطیل ، دایره یا چند ضلعی باشند. به طوری که پس از تعیین نقاط حساس ، در هر نقطه ای از آن شکلها کلیک شود ، یک پیوند با مقصد (یک فایل HTML) بر قرار می گردد .
نقطه حساس مستطیلی با کلمه RECTANGLE ،نقطه حساس دایره ای شکل ، با کلمه CIRCLE و نقطه حساس چند ضلعی با کلمه POLY مشخص می شود.
می خواهیم نقش تصویری ایجاد کنیم که شامل سه نقطه حساس باشد . یکی از نقاط حساس به صورت مستطیلی ، یکی دیگر به شکل دایره و دیگری به شکل چند ضلعی باشد . برای اینکه شما در گیر رسم کردن شکل نکنم هر نقطه حساس را با یک حرف به صورت گرافیکی مشخص می کنم . بنابراین ، کلمه WEB در نظر گرفتم.
دانلود رایگان:
می خواهیم کاری کنیم که وقتی کاربر بر روی حرف W کلیک کرد ، یک فایل به نام test 1.htm اجرا شود و وقتی که بر روی حرف E کلیک کرد ، فایل test2.htm اجرا شود. و با کلیک کردن بر روی حرف B فایل test3.htm اجرا گردد.
دقت داشته باشید که هر هریک از حروف W,E,B به عنوان بخشهایی از یک فایل تصویری اند . به عبارت دیگری ، هر یک از این حروف باید به یک نقطه ی حساس تبدیل شوند.
اگر قبلا با فتوشاپ آشنا باشید ، به راحتی می توانید این کار را انجام دهید. و اگر آشنا نیستید ، بازهم نگران نباشید. زیرا مراحل انجام کار طوری توضیح داده می شوند که نیازی به آشنایی قبلی با فتوشاپ نیست .
اما آشنایی با مفهوم فریمها و لایه ها به این امر کمک می کند. هر بخشی از یک تصویر را یک فریم می نامیم . به عنوان مثال ، هر یک از حروف B,E,W از تصویر مورد نظر ما یک فریم هستند . یعنی این تصویر شامل سه فریم است .
اما لایه چیست؟ هر لایه در فتوشاپ می تواند بخشی از تصویر (فریم) را در خود ذخیره کند. بنابراین ، هر نقطه حساس (یا هر فریم ) باید در یک لایه قرار داده شود. اگر بازهم این مفاهیم را به خوبی درک نکردید. نگران نباشید زیرا در حین انجام کار با آنها آشنا خواهید شد.
آموزش های رایگان فتوشاپ:
اکنون آمادگی داریم که سه نقطه حساس به نام های B,E,W را ایجاد کنیم با فرض اینکه فتوشاپ 5/5 یا نسخه بالا در سیستم شما نصب شده است ، مراحل زیر را انجام دهید:
1. گزینه Start/Programs/Photoshop5.5/Adobe Image Ready را انتخاب کنید تا وارد برنامه Image Ready شوید.
2.در محیط Image Ready نیاز به پنجره ای به نام Layers دارید. اگر در پنجره اکنون در محیط موجود نیست گزینه Window/Layer را انتخاب کنید تا این پنجره ظاهر شود.
3. گزینه File/New را انتخاب کنید تا فایل جدیدی ایجاد شود(در پنجره ای که با انتخاب این گزینه ظاهر شد. دکمه OK را کلیک کنید.)
4. ابزارT را درمنوی ابزار ImageReady انتخاب کنید و سپس ماوس را در محل مناسبی از فایلی که باز کردید کلیک کنید .
اکنون حرف W را تایپ کنید . در پنجره Layers (تصویر شماره 1) علامت را در سطر اول شکل قرار دارد کلیک کنید.
تا منویی ظاهر شود (تصویر شماره 2) .
در این شکل گزینه Layer Options را کلیک کنید تا (شکل شماره 3) ظاهر شود.
5. در این شکل ، مربعی کنار گزینه Use Layer as Image Map را کلیک کنید تا علامت در آن قرار گیرد. دربخش Shape بر روی علامت کلیک کنید و گزینه RECTANGLE را انتخاب نمایند.
در بخش URL نام سند HTML را تایپ کنید که با انتخاب این نقطه حساس باید اجرا شود. براساس آنچه که قبلا گفته شد، در این بخش کلیک کرده test1 .htm را تایپ کنید . دکمه OK را کلیک کنید . بدین ترتیب یک نقطه حساس ایجاد کردید که در لایه 1 قرار دارد.
6. در (تصویر شماره 1)علامت را که در سطر اول و گوشه سمت راست قرار دارد کلیک کنید تا منوی (تصویر شماره 2) ظاهر
شود . در این شکل ، گزینه New Layer را کلیک کنید تا (تصویر شماره 3) ظاهر شود در این شکل فقط بر روی دکمه OK
کلیک کنید تا یک لایه جدید به وجود آید.
7 اکنون حرف E را در کنار حرف W تایپ کنید بدین ترتیب حرف E در لایه جدید قرار گرفت . این لایه نیز باید به یک نقطه
حساس تبدیل شود . برای این کار علامت را در (تصویر شماره 1) کلیک کنید و در منویی که ظاهر می شود.
گزینه Layer As Image Map را کلیک کنید تا علامت در آن قرار گیرد . در بخش Shape دکمه را کلیک کرده گزینه
CIRCLE را انتخاب کنید تا یک نقطه حساس دایره ای شکل ایجاد شود . در بخش URL فایل test2.htm را تایپ کنید (قبل از
تایپ نام فایل در آن محل کلیک کنید تا مکان نما در آنجا قرار گیرد) اکنون دکمه Ok را کلیک کنید تا نقطه حساس دوم نیز ایجاد شود.
8 در (تصویر شماره 1) علامت را که در سطر اول و گوشه سمت راست قرار دارد کلیک کنید تا منوی (تصویر شماره 2) ظاهر
شود در این شکل گزینه New Layer را انتخاب کنید تا (تصویر شماره 3) ظاهر شود. در این شکل فقط بر روی دکمه OK کلیک
تا لایه جدیدی ایجاد شود.
9 حرف B را در کنار حرف E تایپ کنید (اکنون باید WEB را در صفحه Image Ready داشته باشید) این لایه نیز باید به یک
نقطه حساس تبدیل شود. برای این کار علامت را در (تصویر شماره 1) کلیک کنید ودر منویی که ظاهر می شود گزینه Layer
Options را کلیک کنید تا (تصویر شماره 3) ظاهر گردد . دراین شکل مربع کنار گزینه Use Layer As Image Map را
کلیک کنید تا علامت در آن قرار گیرد . در این بخش Shape دکمه را کلیک کرده گزینه Polygon را انتخاب کنید ودر بخش
URL فایل test3 htm را وارد کنید . دکمه Ok را کلیک کنید . بدین ترتیب هر سه نقطه حساس مورد نظر ایجاد شده اند.
10 برای اینکه کارتان را در یک مرورگر مرور کنید گزینه File/Preview In را انتخاب کرده گزینه Internet Explorer
را کلیک کنید. اکنون این نقشه تصویر در این مرورگر ظاهر می شود و وقتی علامت ماوس بر روی هر کدام از این حروف
قرار گیرد به شکل دست در می آید که نشان دهنده یک پیوند است . اگر در کامپیوتر تان به این صورت نیست حتما در جایی
از کار شما اشکالی وجود دارد که باید مراحل قبلی را دنبال کنید.
11 برای ذخیره نقشه تصویری که ایجاد کردید گزینه File/Save Optimized As را انتخاب کنید و آن را به نام دلخواهی
ذخیره کنید من آن را تحت نام ghomi.gif ذخیره نمودم
نکته مهم:
وقتی فایل تصویر را مثلا به نام ghomi.gif ذخیره کردید فایل دیگری به نامhtml ghomi. توسط فتوشاپ ایجاد و بر روی
دیسک ذخیره می شود . این فایل حاوی دستورات HTML است که وقتی در یک مرورگر قرار گرفت ، نقشه تصویری را پیاده
سازی می کند . محتویات فایل ghomi.html را در ادامه خواهید دید.
12 از برنامه Image Ready خارج شوید و مرورگری مثل IE یا نت اسکیپ را راه اندازی کرده فایل ghomi.html را به آن بیاورید . من آن را به مرورگر Internet Explorer آوردم که آن را در (شکل شماره 4) مشاهده می کنید.
13 اکنون باید محتویات فایلهای test3.htm, test2.htm,test1.htm را بنویسید . وقتی بر روی W کلیک شود فایل
test1.htm وقتی بر روی E کلیک شود . فایل test2.htm و وقتی بر روی B کلیک شود فایل test3.htm اجرا می شود. برای سهولت و تشخیص اینکه کدام پیوند فشار داده شده است ، محتویات هر کدام از فایل ها رابه شرح زیر تایپ کنید:
محتویات فایل ghomi.html را که توسط فتوشاپ ساخته شده است در زیر مشاهده می کنید:
14 یکی از مرورگر ها را اجرا کرده ، فایل ghomi.html را به آن بیاورید و با آن کار کنید. از مرورگر خارج شوید .
( به شما تبریک می گویم که توانستید یک نقشه تصویری را ایجاد و با آن کار کنید اگر در انجام کار مشکل داشتید با من از طریق در تماس بگیرید) :
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact
برگرفته از :
کتاب راهنمای جامع (HTML, BHTML, XML)
دکتر عین الله جعفر نژاد قمی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact