در قسمت قبل ما نحوه ايجاد لينكهاي navigation bar و rollover را فرا گرفتيم منتها ماكرومديا براي اين منظور برنامه پر قدرت ديگري دارد بنام macromedia fireworks كه از امكانات و توانايي هاي بسيار بالايي در اين زمينه برخوردار است قصد دارم در اين قسمت شما را با اين خصوصيات در آخرين نگارش اين برنامه يعني mx2004آشنا كنم.
البته توضيحات كامل اين برنامه خود به مقاله جداگانه اي احتياج دارد چرا كه فاير وركس خود برنامه مفصل و كاملي است كه هم قادر به كار بر روي تصاوير نقش بيتي است و هم تصاوير وكتور و هم مي توان د تصاويرتان را براي نشر در وب از هر لحاظ آماده كند
اگر تا كنون براي نشر و آماده سازي تصاوير خود از برنامه image ready استفاده مي كرديد بهتر است با قابليتهاي فاير وركس آشنا شويد تا فكر استفاده از image ready را فراموش كنيد.
هر چند ما از ذكر جزئيات اين برنامه خودداري مي كنيم منتها اگر شما با برنامه فوتو شاپ كار كرده باشيد كاملا مي توانيد با ابزارهاي فايروركس كار كرده و توضيحات ارائه شده در اين مقاله را دنبال نمائييد.
ايجاد منوهاي باز شو در فايروركس فاير وركس قادر است منوهاي باز شو و تو در تويي را براي شما اي جاد كند كه براحتي بتوانيد از آنها در دريم ويور و در صفحات خود استفاده كنيد
ما ابتدا يك منوي ساده را توضيح مي دهيم تا شما با نحوه كار آشنا شويد منتها در ادامه شما مي توانيد با تركيب swap image و منوهاي باز شو تركيبات زيباتري خلق كنيد. براي ايجاد منوهاي باز شو ابتدا با ابزار hotspot يا slice منطقه اي را كه مايليد منو را ايجاد.
كنيد مشخص كنيد حال يا از منوي window يا كليدهايshift+F3 پانل behaviors را باز كنيد اكنون با كليك بر روي علامت پلاس + بالاي پانل از منوي باز شده set pop-up menu را انتخاب كنيد.
كادر زير برايتان باز خواهد گشت در اين كادر ۴ تب وجود دارد كه طي ۴ مرحله امكان ايجاد منوهاي كشويي را به شما خواهد داد
در اولين تب content شما عناوين و زير گروه هاي هر منو و لينكهاي هر كدام را تعريف خواهيد كرد براي اين منظور ابتدا در كادر زير text ك ليك كنيد تا فعال شود حال عنوان منو را تايپ كنيد كليدTab را بزنيد تا به كادر بعد برويد در كادر بعد لينك منو را ايجاد و با زدن دوباره كليد tab به كادر target برويد كه در آنجا نحوه باز شدن لينك را تعيين خواهيد كرد كه قبلا شرح داده شده
پس از كامل كردن اولين عنوان براي ايجاد عنوان بعدي پس از كامل كردن اولين عنوان براي ايجاد عنوان بعدي بر روي علامت + بالاي كادر كليك كنيد تا عنوان جديدي برايتان ايجاد شود و همانند قبل اين عنوان را نيز كامل كنيد در تصوير زير من عنوانهايي را ايجاد كرده ام كه ملاحظه مي فرمائيد ( من تمام عنوانها و زير گروه هاي آن را ايجاد كرده ام )
اين عناوين هنوز كامل نيست چرا كه من زير منوها را مشخص نكرده ام و اگر همين طور ادامه دهم تمام زير منوها هم بعنوان عنوان اصلي ايجاد مي شود
براي ايجاد زير منو ابتدا بر روي عنواني كه قصد دارم بعنوان زير منو قرار گيرد كليك مي كنم تا انتخاب شود حال به بالاي كادر نگاه كنيد اكنون گزينه indent menu روشن شده كه اگر بر روي آن كليك كنم آن عنوان را به عنوان زير منوي عنوان قبلي محسوب خواهد كرد
در دو تصوير زير اولين تصوير حالتي است كه گزينه indent menu فعال شده و تصوير زير آن حالتي است كه بنده departures را به عنوان زير منوي flights انتخاب نمودم همان گونه كه مي بينيد Departures مقداري به جلوتر آمده تا نشان دهد اين عنوان زير منويي از flights است.
با اين روش به هر تعداد كه مايليد مي توانيد زير منو ايجاد كنيد
حال در شكل زير كامل شده عناوين و زيرمنوهاي آزمايشي را مي بينيد
پس از تكميل اين قسمت يا بر روي next كليك كنيد يا از زبانه هاي بالاي زبانه advanced را كليك كنيد تا به مرحله بعد برويد
در مرحله بعد كادر ما به چند قسمت تقسيم مي گردد كه در هر قسمت مي توان مشخصات لينك را تعيين كرد
قسمت اول كادر بالاي كادر است
در اين قسمت مي توان نوع سلولهاي عناوين را مشخص كرد كه بصورت كدهاي html باشد يا تصوير و در كادر روبرو تعيين مي گردد كه مايليم لينكها بصورت افقي ايجاد گردند يا عمودي
قسمت بعد كه در زير اين قسمت قرار دارد بدين صورت است
در اين قسمت نوع فونت ، اندازه ، حالت و چيدمان را تعيين خواهيم كرد
در اين قسمت بسته به اين كه از قسمت اول حالت image يا html را انتخاب كرده باشيد فرق خواهد داشت منتها چيزي كه ثابت است اين كه دو كادر در كنار هم براي تعيين مشخصات حالت over و up منويتان قرار دارد از قسمت بالا اگر حالت html را انتخاب كرده باشيد در اين قسمت فقط مي توانيد حالتهاي رنگ سلول و رنگ متن را تعيين كنيد و اگر در قسمت بالا حالت image را انتخاب كرده باشيد مي توانيد از استايلهاي موجود ( استايلهاي پيش فرض يا استايلهايي كه خودتان ايجاد نموده ايد ) براي بك گراند تصاويرتان استفاده كنيد
قسمت آخر هم پيش نمايشي از منويتان را مطابق با تنظيماتي كه انجام داده ايد به شما نشان خواهد داد كه براحتي مي توانيد طرح نهايي منويتان را مشاهده كنيد
حال كه تنظيمات اين مرحله را هم به اتمام رسانديم به همان ترتيب كه به اين مرحله آمده ايم مي توانيم به مرحله بعد برويم
مرحله بعد مرحله تنظيمات پيشرفته است در اين مرحله شما قادريد طول و عرض هرسلول كادر ها و حاشيه ها و مدت زمان بازشدن زير منوها را تعيين كنيد البته همانطور كه مي بينيد كادر منو و سايه و رنگ آن هم از همين قسمت قابل تنظيم است position است.
در اين مرحله موقعيت قرار گيري منو و زير منو را تعيين كرده كه صد البته اين مورد در نحوه باز شدن منو و زير منو تاثير گذار خواهد بود براي رسيدن به نتيجه دلخواه شما مي بايست با تمرين و كسب تجربه به اين قسمت كاملا مسلط شويد كه البته نحوه تنظيم اين قسمت به تعداد منو و زير منوي شما و چگونگي منويتان از نظر افقي و عمودي نيز مربوط مي شود به هر حال اين آخرين مرحله براي ايجاد منوهاي باز شو در فاير وركس بود
حال مي توانيد براي اتمام كار و توليد كدهاي مورد نياز بر روي done در انتهاي كادر كليك كنيد حال كه منوي خود را ساختيد مي توانيد با زدن كليد f12پيش نمايش كارتان را در مرورگرتان ببينيد
اگر هم قصد اصلاح داشتيد باز به پانل behaviors رفته و بر روي گزينه موجود دابل كليك كنيد تا امكان تغييرات به شما داده شود در انتها بايد بتوانيم از فاير وركس خروجي html بگيريم تا دردريم ويور از آن استفاده كنيم قبل از خروجي در حين كار كاملا مقصد لينكهايتان را اطلاح كنيد
براي صدور ابتد ا از منوي file گزينه Export را انتخاب كنيد تا كادر روبرو برايتان باز شود
گزينه ها را همانند شكل تنظيم كرده و save را كليك كنيد فقط دقت كنيد فايل را در پوشه سايتتان كه در دريم ويور ايجاد نموده ايد صادر كنيد
حال دريم ويور را باز كرده و صفحه اي كه قرار است فايل فاير وركس در آن قرار گيرد را به حالت ويرايش در آوريد و مكان نماي ماوس را در مكاني كه قرار است آبجكت فاير وركس قرار گيرد قرار دهيد
اكنون از نوار ابزار common بر روي نماد درج تصوير كليك كنيد و از گزينه هاي آن گزينه fireworks HTML را انتخاب كنيد
در اين حالت كادر زير برايتان باز خواهد گشت
با كليك بر روي browse فایل HTML ساخت فاير وركس را انتخاب و ok را كليك كنيد تا آبجكت فاير وركس در سند جاريتان قرار گيرد نكته : ممكن است به همراه فايلهاي ارسالي از فايروركس فايلهايي با پسوندهاي ديگري نيز صادر شده باشند شما براي رسيدن به نتيجه مطلوب بايد همان فايل اصلي html را وارد كنيد
اگر بعد از ورود ديديد لينكهايتان عمل نمي كند بنا به هر دليلي و يا نقصي در كارتان وجود دارد مي توانيد آن را در خود دريم ويور اصلاح كنيد. براي اين منظورپس از انتخاب منو به پانل behaviors رفته و بر روي گزينه onMouseOver پنجره اي تقريبا مشابه هماني كه در فاير وركس ديديد مواجه شويد و بتوانيد تغييرات دلخواهتان را انجام داده و فايل را ذخيره كنيد
خب به انتهاي اين قسمت از مقاله رسيديم هر چند ما تنها يك مورد را در فاير وركس شرح داديم منتها همان طور كه عرض شد قابليتهاي فايروركس بسيار فراتر از آن است كه بتوان تمام آن را در يك مقاله چند صفحه اي شرح داد . قابليتهايي كه در ارتباط مستقيم با ساير برنامه هاي ماكرومديا مانند فلش ، دايركتور و دريم ويور قرار دارند تا شما را در ساخت هر چه بهتر وب سايتتان ياري دهد.
در انتها چند نمونه از فايلهايي كه در فايروركس ايجاد شده اند را در ضميمه اين مقاله قرار مي دهم تا درك هر چه بهتري نسبت به مزيتهاي اين برنامه بيابيد. فايلهاي نمونه تحت عنوان sample قرار گرفته اند.
فايل نمونه اي كه بنده در اين مقاله آن را با هم انجام داديم به همراه فايل png آن در پوشه قرار my_menu دارد
فايل png را بايد توسط برنامه Macromedia Fireworks MX 2004 باز كنيد
و نيز به منظور كار بيشتر شما چند تصوير دكمه اي براي حالتهاي مختلف نيز برايتان قرار مي دهم ببينيد مي توانيد با فاير وركس و با تركيب pop up menu و swap image منوي ديگري در فاير وركس ايجادكنيد
از مزيتهاي ديگر اين برنامه امكان بهينه سازي تصاوير ، امكان كار با تصاوير رستر و وكتور جهت برنامه فلش و ايجاد خودكار صفحات مبتني بر XML و Dhtml و Xhtml از مزيتهاي ديگر برنامه است.
كار با دستورات شيوه نامه ايجاد حالتهاي گوناگون لايه اي و فريمي بر مبناي شيوه نامه ها و جاوا اسكريپت و .... از جمله برتري هاي اين برنامه است.
به طور مثال همين منويي كه ما در اين قسمت ايجادكرديم از حدود ۷۵۰ خط كد جاوا اسكريپت تشكيل گشته كه اگر قرار بود خود ما اين مراحل را با كد نويسي طي مي كرديم به ساعتها زمان نياز داشتيم ضمن اين كه احتمال خطا در كد نويسي نيز بشدت وجود داشت.
روش ديگر براي استفاده از رفتارها اين روش بيشتر مخصوص كساني است كه تا حدودي به زبان جاوا اسكريپت آشنايي دارند و چون توضيحات اين قسمت را بطه مستقيم با اين مطلب دارد از توضيحات اضافي خودداري مي گردد
ابتدا پانل snippets را از منوي window باز كنيد
در اين كادر يك سري كدهاي آماده در هر زمينه وجوددارد كه شما مي توانيد از آنها در صفحه خود استفاده كنيد، كدها را ويرايش كرده و يا كدهاي جديدي را به اين ليست اضافه كنيد
ساير موارد را خودتان آزمايش كنيد منتها در اين قسمت شما بر روي علامت پلاس + Java Script كليك كنيد تا ليست آن باز شود.
در اين ليست تعدادي كدهاي از قبل آماده شده بصورت دسته بندي شده وجود دارد شما در قسمت كدها ابتدا با تايپ قطعه كد <script language="javascript> و انتخاب يك قسمت در اين پانل و كليك بر روي گزينه insert در انتهاي پانل آن كد را درميان تگ ابتدا و انتهاي جاوا اسكريپت در صفحه درج كنيد البته در اكثر موارد توابعي تعريف شده اند كه اين گونه كدها غالبا بين تگهاي head قرار مي گيرند كه پس از درج بايد در صفحه در قسمت body فراخواني نيزگردند
در اين پانل با انتخاب يك قسمت و كليك بر روي آيكن edit كادري همانند زير برايتان باز خواهد گشت
در اين كادر نام قسمت انتخابي و توضيحاتي در مورد كد در بالاي كادر درج گرديده و خود كد هم در انتها آورده شد ه كه شما مي توانيد آن كد را اديت كنيد كه در پايان بايد ok را كليك كنيد.
اگر در همين پانل بر روي آيكن new كليك كنيد كادري مشابه كادر بالا برايتان ظاهر خواهد شد كه شما مي توانيدكدهاي خود را در آن وارد كرده و در صفحات يا سايتهاي ديگر آن را بكار ببريد.
شما توسط اين روش مي توانيد آرشيو بسيار غنيي از كدهاي زبانهاي سرور سايد يا هر چيز ديگري را گرد آوري كنيد
|
