نرم افزار دریم ویور در آخرین ویرایش خود (CS3) ابزارهای Adobe Spry را در خود جای داده است . Spry
نام پروژه ای بود که شرکت ادوبی برای ارائه نسخه بتای محصولات آجاکسی خود
استفاده کرده بود و اکنون تعدادی از قابلیت های جاوا اسکریپتی بسیار جالب
که مورد نیاز اکثر طراحان صفحات وب است در داخل دریم ویور و با نام spry جاسازی شده است .
ابزار های Spry : کافیست
از تولبار ابزارهای دریم ویور به برگه Spry بروید تا ابزار های جدید ادوبی
را که با جاوا اسکریپت کار میکنند مشاهده کنید .در این مقاله به معرفی ۴
تا از این ابزارها می پردازیم که اکثرا در طراحی layout شما را یاری
میدهند. تقریبا همه چیز بصورت Visual و بدون نیاز به کدنویسی قابل انجام
است . با اینحال امکان سفارشی کردن این ابزار ها در دریم ویور فراهم است.
نرم افزار دریم ویور در آخرین ویرایش خود (CS3) ابزارهای Adobe Spry را در خود جای داده است . Spry
نام پروژه ای بود که شرکت ادوبی برای ارائه نسخه بتای محصولات آجاکسی خود
استفاده کرده بود و اکنون تعدادی از قابلیت های جاوا اسکریپتی بسیار جالب
که مورد نیاز اکثر طراحان صفحات وب است در داخل دریم ویور و با نام spry جاسازی شده است .
ابزار های Spry : کافیست
از تولبار ابزارهای دریم ویور به برگه Spry بروید تا ابزار های جدید ادوبی
را که با جاوا اسکریپت کار میکنند مشاهده کنید .در این مقاله به معرفی ۴
تا از این ابزارها می پردازیم که اکثرا در طراحی layout شما را یاری
میدهند. تقریبا همه چیز بصورت Visual و بدون نیاز به کدنویسی قابل انجام
است . با اینحال امکان سفارشی کردن این ابزار ها در دریم ویور فراهم است.
با اضافه کردن اولین ابزار از این دسته ، یک پوشه بنام SpryAssets در کنار
سایر فایلهای شما اضافه میشود و به ازای هر ابزار spry که اضافه میکند دو
فایل js و CSS برای آن ابزار خاص به پوشه SpryAssets اضافه میشود. فایل JS
برای کنترل ابزار است. بهتر است این فایل را دستکاری نکنید. چون اگه
پارامتری رو اشتباهی تغییر بدین ، ابزار spry شما دیگه کار نمی کنه یا در
یک مرورگر خاص کار نخواهد کرد.اما فایل css موجود رو میتونید تغییر بدین تا
حالت نمایش ، رنگ گزینه ها و ظاهر ابزارتون رو دستکاری کنید تا مطابق میل
خودتون در بیاد.
Spry Menu bar :
این ابزار امکان ایجاد منوهای پایین افتادنی جاوا اسکریپتی را برای شما
فراهم میکند. یکی از چیزایی که معمولا در پروژه های تحت وب خیلی نیازش حس
میشد، ابزار راحتی برای ساخت منوهای جاوایی بود و تا قبل از این طراحان
مجبور بودن خودشون و با استفاده از کد های جاوا اسکریپتی یه چیزی بسازن و
در صفحه وبشون قرار بدن . اما این ابزار این کار رو بصورت خیلی ساده ، حرفه
ای و استاندارد براتون انجام میده.
سادگی
در اضافه کردن آیتم ها و زیر آیتم ها به این منو، کار شما را خیلی راحت
کرده است. کافیست پس از اضافه کردن یک نمونه از این ابزار به صفحه وب ، بر
روی نوار آبی رنگ بالای ابزار در صفحه کلیک کنید تا پنجره properties گزینه
های این ابزار رو به شما نشون بده. سه ستون از آیتم ها نشون داده میشن .
ستون سمت چپ ، آیتم های اصلی منو هستن و بصورت پیش فرض ۴ آیتم دارن . با
کلیک روی هر آیتم ، زیر آیتم های اونو در ستون سمت راست میتونید ببینید.
همچنین متن و لینک هر آیتم در سمت راست ستونها قابل ویرایش است.
جهت تغییر رنگ بکگراند و متن آیتم ها به پوشه SpryAssets بروید. فایل
SpryMenuBarHorizontal.css را که در برگیرنده کدهای css مربوط به ظاهر
ابزار منوبار است باز کنید. طبق جدول زیر میتوانید بخش های مختلف ابزار
منوبار را تغییر دهید. بطور مثال جهت تغییر رنگ بکگراند نوار اصلی منوبار،
کلاس ul.MenuBarHorizontal a را در فایل css تغییر دهید تا شاهد تغییرات رنگ در هنگام نمایش صفحه باشید.
|
رنگ مورد نظر
|
نام کلاس مربوطه
|
خاصیت مورد نظر
|
|
رنگ پس زمینه
|
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
|
background-color: #EEE;
|
|
رنگ پس زمینه زیر موس
|
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
|
background-color: #33C;
|
|
رنگ آیتم زیر موس
|
ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemHover
|
background-color: #33C;
|
|
رنگ زیر آیتم زیر موس
|
ul.MenuBarVertical a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
|
background-color: #33C;
|
یکی از بهترین منوبارهایی که تاکنون دیده ام منوبار همین ابزار دریم ویور است. چون خیلی اصول طراحی و SEO رو در طراحیش لحاظ کردن . منوبار شما با استفاده از تگهای ul li درست میشن و به همین دلیل موتورهای جستجو هم به بهترین حالت ، صفحات و زیرصفحات مشخص شده در اونو تشخیص میدن.
Spry Tabbed Panels :
این ابزار به شما امکان ساخت باکس های چند برگه ای را میدهد. یک نمونه از
این ابزار را بر روی صفحه در حال طراحی وارد کنید. حالا روی نوار آبی رنگ
بالای آن کلیک کنید تا گزینه های قابل تنظیم آن در پنجره Properties
ظاهر شود. در اینجا امکان افزودن و حذف برگه ها یا تغییر برگه پیش فرض
هنگام لود صفحه برایتان فراهم آمده است. همچنین میتوانید براحتی سایر عناصر
صفحه تان را به داخل برگه های tabbed panel بکشید. برای اینکه بتوانید عناصری را به برگه دوم اضافه کنید کافیست موس خود را روی برگه Tab2 ببرید و روی آیکون چشم که در سمت راست اسم برگه ظاهر شده کلیک کنید تا دریم ویور محتویات برگه دوم را جهت ویرایش نمایش دهد.
جهت تغییر رنگ و فونت متن های برگه ها فایل SpryTabbedPanels.css را از پوشه SpryAssets بازکنید و کلاس مورد نظر را از جدول زیر برای تغییر در ظاهر برگه ها ویرایش کنید.
|
متن مورد نظر
|
نام کلاس مربوطه
|
خاصیت مورد نظر
|
|
فونت کلی ابزار
|
.TabbedPanels
|
font: Arial; font-size:medium;
|
|
فونت عنوان برگه ها
|
.TabbedPanelsTabGroup
یا .TabbedPanelsTab
|
font: Arial; font-size:medium;
|
|
فونت محتوای برگه ها
|
.TabbedPanelsContentGroup
یا .TabbedPanelsContent
|
font: Arial; font-size:medium;
|
Spry Accordion : این ابزار منوی آکاردئونی میسازد. با کلیک روی نوار آبی بالای این ابزار ، برگه های موجود در پنجره Properties
دریم ویور نمایش داده میشود و شما میتوانید برگه های بیشتری را به این
ابزار اضافه کنید. برای تغییر محتوای داخل هر برگه ، باید روی نام برگه
کلیک کنید تا برگه مذکور در صفحه طراحی دریم ویور فعال شود. جهت ویرایش رنگ
ها و فونت های آن میتوانید فایل SpryAccordion.css را از پوشه SpryAssets بازکنید و کلاس مورد نظر را برای تغییر در ظاهر برگه ها ویرایش کنید.
Spry Collapsible :
این ابزار برای ایجاد منوهای کناری سایتها و وبلاگها بسیار مناسب است و
امکان ساخت منوهای بازشو و جمع شو را فراهم میکند.گزینه ای قابل تنظیم این
ابزار نیز با کلیک روی نوار آبی رنگ بالای آن ، در پنجره Properties در پایین دریم ویور نمایش داده میشود. گزینه Display فقط برای باز و بسته کردن محتوای منوی بازشو در هنگام طراحی است. گزینه default State برای باز و بسته بودن منوی بازش هنگام لوم صفحه است . و گزینه enable animation
نیز باعث باز و بسته شدن انیمیشنی منو میشود. در صورتی که تیک آن را
بردارید، منو هنگام کلیک کردن روی نام بالای آن ، بدون انیمشین باز و بسته
میشود.
