فارســی نویســی در ادیتور هــــای دریــم ویــور و فرانت پیج

قویترین ویرایشگر های HTML و انتخاب بهترین ویرایشگر:

مسلما اولین و معروف ترین ویرایشگر اچتمل همون FrontPage مایکروسافت است. اما این ادیتور فقط برای طراحان آماتور مناسب است. زیرا محیطی ساده و شبیه برنامه ورد مایکروسافت دارد که کار را برای ساختن یک صفحه وب آسان میکند.
اما طراحان حرفه ای ، با این برنامه رابطه خوبی ندارن . علت این امر اینه که مدیریت جدول هایی که در یک صفحه کشیدین خیلی مشکل است . دیگر اینکه فرانت‌پیج با CSS رابطه خوبی نداره و مدیریت CSS های ساخته شده در صفحات بسیار مشکل است. همچنین فرانت پیج کد های اضافی بسیاری رو در داخل html شما می گنجاند که باعث سنگین شدن و ناخوانا شدن کدها و صفحات طراحی شده میشه.
جهت فارسی نویسی در فرانت پیج کافیه علامت Right-to-Left رو از بالای تولبار انتخاب کنید و شروع کنید به فارسی نوشتن.

DreamWeaver(یا فارسی بگیم رویاباف) در حال حاضر پیشرفته ترین محیط طراحی Layout صفحات وب است. این برنامه که محصول شرکت ادوبی است پیشرفته ترین ابزار های مدیریت CSS در صفحات را داراست. همچنین تگ های زبان های اسکریپتی ASP و PHP و JSP وASP.NET را شناخته و امکان insert کردن آنها را در برنامه براحتی امکان پذیر کرده است.
جهت فارسی نویسی در دریم ویور باید خاصیت Dir=rtl را به تگ دربرگیرنده متن فارسی اضافه کنید و Encoding صفحه را هم به UTF-8 تنظیم کنید. بطور مثال:

سلام دنیا

و اما تازه رسیده ای بنام Expression Web : این برنامه که از سوی مایکروسافت در حال آماده سازی است به نظر من کپی برداری مستقیمی از روی Dreamweaver است. مایکروسافت که شکست فرانت پیج را در برابر دریم ویور پذیرفته است ، دست به کار طراحی برنامه جدیدی برای طراحان وب زده است با امکاناتی که برای هر طراح و برنامه نویسی جذاب است. محیط کار برنامه بسیار شبیه دریم ویور و منوی پراپرتی آن شبیه منوهای ویژوال استودیو است . امکان مدیریت CSS های صفحات ، بسیار شبیه دریم ویور است و طبق گفته مایکروسافت تعامل زیادی با بسته نرم افزاری ویژوال استودیو دارد. برای نصب این برنامه نیاز به دات نت فریم ورک 2 دارید. همچنین اگر آفیس 2007 بتا را نصب کرده اید قبل از نصب expression web باید آنرا از کامپیوترتان پاک کنید.

.NET Framework Version 2.0 22.5 MB
Expression Web Beta 1 110 MB

ادامه مطلب

ساخت منوی جاوا اسکریپتی با ابزار Spry دریم ویور

نرم افزار دریم ویور در آخرین ویرایش خود (CS3) ابزارهای Adobe Spry را در خود جای داده است . Spry نام پروژه ای بود که شرکت ادوبی برای ارائه نسخه بتای محصولات آجاکسی خود استفاده کرده بود و اکنون تعدادی از قابلیت های جاوا اسکریپتی بسیار جالب که مورد نیاز اکثر طراحان صفحات وب است در داخل دریم ویور و با نام spry جاسازی شده است .

ابزار های Spry : کافیست از تولبار ابزارهای دریم ویور به برگه Spry بروید تا ابزار های جدید ادوبی را که با جاوا اسکریپت کار میکنند مشاهده کنید .در این مقاله به معرفی 4 تا از این ابزارها می پردازیم که اکثرا در طراحی layout شما را یاری میدهند. تقریبا همه چیز بصورت Visual و بدون نیاز به کدنویسی قابل انجام است . با اینحال امکان سفارشی کردن این ابزار ها در دریم ویور فراهم است.

با اضافه کردن اولین ابزار از این دسته ، یک پوشه بنام SpryAssets در کنار سایر فایلهای شما اضافه میشود و به ازای هر ابزار spry که اضافه میکند دو فایل js و CSS برای آن ابزار خاص به پوشه SpryAssets اضافه میشود. فایل JS برای کنترل ابزار است. بهتر است این فایل را دستکاری نکنید. چون اگه پارامتری رو اشتباهی تغییر بدین ، ابزار spry شما دیگه کار نمی کنه یا در یک مرورگر خاص کار نخواهد کرد.اما فایل css موجود رو میتونید تغییر بدین تا حالت نمایش ، رنگ گزینه ها و ظاهر ابزارتون رو دستکاری کنید تا مطابق میل خودتون در بیاد.

Spry Menu bar : این ابزار امکان ایجاد منوهای پایین افتادنی جاوا اسکریپتی را برای شما فراهم میکند. یکی از چیزایی که معمولا در پروژه های تحت وب خیلی نیازش حس میشد، ابزار راحتی برای ساخت منوهای جاوایی بود و تا قبل از این طراحان مجبور بودن خودشون و با استفاده از کد های جاوا اسکریپتی یه چیزی بسازن و در صفحه وبشون قرار بدن . اما این ابزار این کار رو بصورت خیلی ساده ، حرفه ای و استاندارد براتون انجام میده.

سادگی در اضافه کردن آیتم ها و زیر آیتم ها به این منو، کار شما را خیلی راحت کرده است. کافیست پس از اضافه کردن یک نمونه از این ابزار به صفحه وب ، بر روی نوار آبی رنگ بالای ابزار در صفحه کلیک کنید تا پنجره properties گزینه های این ابزار رو به شما نشون بده. سه ستون از آیتم ها نشون داده میشن . ستون سمت چپ ، آیتم های اصلی منو هستن و بصورت پیش فرض 4 آیتم دارن . با کلیک روی هر آیتم ، زیر آیتم های اونو در ستون سمت راست میتونید ببینید. همچنین متن و لینک هر آیتم در سمت راست ستونها قابل ویرایش است.

جهت تغییر رنگ بکگراند و متن آیتم ها به پوشه 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 نیز باعث باز و بسته شدن انیمیشنی منو میشود. در صورتی که تیک آن را بردارید، منو هنگام کلیک کردن روی نام بالای آن ، بدون انیمشین باز و بسته میشود.

ادامه مطلب