آموزش دریم ویور

[TABLE]
[TR]
[TD]امکانات جدید در دریم ویور CS5
[/TD]
[/TR]
[TR]
[TD="colspan: 3"]

[FONT=tahoma,arial,helvetica,sans-serif]ادوبی سری جدید محصولات خود را با نام CS 5 در تاریخ 22 آپریل (دوم اردیبهشت) به بازار ارائه میکند. در این مقاله به بررسی جدید ترین قابلیت های دریم ویور cs 5 می پردازیم:
[/FONT]
HTML5 : قاتل فلش ؟ یا دوست دریم ویور؟
در بسیاری از سایت ها از زبان نشانه گذاری اچتـمل 5 بعنوان قاتل فلش نام برده اند. زیرا براحتی میتوان با این زبان نشانه گذاری، انیمیشن های جذابی را تولید کرد و گویا دیگر نیازی به فلش نخواهد بود! حال اینکه برنامه ی Dreamweaver که یکی از محصولات ادوبی است با تمام قدرت تصمیم به پشتیبانی اچتمل 5 گرفته است. گویا ادوبی HTML5 را بیشتر یک فرصت می بیند تا یک تهدید.

ایجاد انیمیشن در اچتمل 5: ادوبی امکان ایجاد انیمیشن های جذابی را با استفاده از ترکیب برنامه ی Illustrator و DreamWeaver فراهم کرده است و برای اینکار از استاندارد فرمت تصاویر برداری خودش با نام FXG (flash xml graphic) ، امکانات اچتمل 5 و جاوا اسکریپت بعنوان رندرکننده ی تصاویر بهره میگیرد. FXG استانداردی برای تبادل داده های گرافیکی با فرمت XML بین برنامه های ادوبی است.

وجود اچتمل 5 در دریم ویور با توجه به اینکه دریم ویور یک ادیتور HTML است امری عادی است. اما اینکه ادوبی امکانات جدیدی را بر پایه ی HTML5 برای انیمیشن سازی فراهم کرده، نشان میدهد که ادوبی در فکر یکپارچه سازی اچتمل 5 در ابزارهای طراحی وب این شرکت و استفاده ی حداکثر از این تکنولوژی جدید است.
​

[/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش دریم ویور

[TABLE]
[TR]
[TD]ساخت منوی جاوا اسکریپتی با ابزار Spry دریم ویور
[/TD]
[/TR]
[TR]
[TD="colspan: 3"]

نرم افزار دریم ویور در آخرین ویرایش خود (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 تغییر دهید تا شاهد تغییرات رنگ در هنگام نمایش صفحه باشید.

​

[TABLE]
[TR]
[TD="bgcolor: #008317"]

رنگ مورد نظر ​

[/TD]
[TD="bgcolor: #008317"]

نام کلاس مربوطه ​

[/TD]
[TD="bgcolor: #008317"]

خاصیت مورد نظر ​

[/TD]
[/TR]
[TR]
[TD]

رنگ پس زمینه ​

[/TD]
[TD] ul.MenuBarVertical a,
ul.MenuBarHorizontal a
[/TD]
[TD] background-color: #EEE;
[/TD]
[/TR]
[TR]
[TD]

رنگ پس زمینه زیر موس ​

[/TD]
[TD] ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
[/TD]
[TD] background-color: #33C;
[/TD]
[/TR]
[TR]
[TD]

رنگ آیتم زیر موس ​

[/TD]
[TD] ul.MenuBarVertical a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemHover
[/TD]
[TD] background-color: #33C;
[/TD]
[/TR]
[TR]
[TD]

رنگ زیر آیتم زیر موس ​

[/TD]
[TD] ul.MenuBarVertical a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
[/TD]
[TD] background-color: #33C;
[/TD]
[/TR]
[/TABLE]

یکی از بهترین منوبارهایی که تاکنون دیده ام منوبار همین ابزار دریم ویور است. چون خیلی اصول طراحی و SEO رو در طراحیش لحاظ کردن . منوبار شما با استفاده از تگهای ul li درست میشن و به همین دلیل موتورهای جستجو هم به بهترین حالت ، صفحات و زیرصفحات مشخص شده در اونو تشخیص میدن. ​

Spry Tabbed Panels : این ابزار به شما امکان ساخت باکس های چند برگه ای را میدهد. یک نمونه از این ابزار را بر روی صفحه در حال طراحی وارد کنید. حالا روی نوار آبی رنگ بالای آن کلیک کنید تا گزینه های قابل تنظیم آن در پنجره Properties ظاهر شود. در اینجا امکان افزودن و حذف برگه ها یا تغییر برگه پیش فرض هنگام لود صفحه برایتان فراهم آمده است. همچنین میتوانید براحتی سایر عناصر صفحه تان را به داخل برگه های tabbed panel بکشید. برای اینکه بتوانید عناصری را به برگه دوم اضافه کنید کافیست موس خود را روی برگه Tab2 ببرید و روی آیکون چشم که در سمت راست اسم برگه ظاهر شده کلیک کنید تا دریم ویور محتویات برگه دوم را جهت ویرایش نمایش دهد. ​

جهت تغییر رنگ و فونت متن های برگه ها فایل SpryTabbedPanels.css را از پوشه SpryAssets بازکنید و کلاس مورد نظر را از جدول زیر برای تغییر در ظاهر برگه ها ویرایش کنید. ​

[TABLE="width: 554"]
[TR]
[TD="bgcolor: #008317"]

متن مورد نظر ​

[/TD]
[TD="bgcolor: #008317"]

نام کلاس مربوطه ​

[/TD]
[TD="bgcolor: #008317"]

خاصیت مورد نظر ​

[/TD]
[/TR]
[TR]
[TD]

فونت کلی ابزار ​

[/TD]
[TD] .TabbedPanels
[/TD]
[TD] font: Arial; font-size:medium;
[/TD]
[/TR]
[TR]
[TD]

فونت عنوان برگه ها ​

[/TD]
[TD] .TabbedPanelsTabGroup
یا .TabbedPanelsTab
[/TD]
[TD] font: Arial; font-size:medium;
[/TD]
[/TR]
[TR]
[TD]

فونت محتوای برگه ها ​

[/TD]
[TD] .TabbedPanelsContentGroup
یا .TabbedPanelsContent
[/TD]
[TD] font: Arial; font-size:medium;
[/TD]
[/TR]
[/TABLE]

Spry Accordion : این ابزار منوی آکاردئونی میسازد. با کلیک روی نوار آبی بالای این ابزار ، برگه های موجود در پنجره Properties دریم ویور نمایش داده میشود و شما میتوانید برگه های بیشتری را به این ابزار اضافه کنید. برای تغییر محتوای داخل هر برگه ، باید روی نام برگه کلیک کنید تا برگه مذکور در صفحه طراحی دریم ویور فعال شود. جهت ویرایش رنگ ها و فونت های آن میتوانید فایل SpryAccordion.css را از پوشه SpryAssets بازکنید و کلاس مورد نظر را برای تغییر در ظاهر برگه ها ویرایش کنید. ​

Spry Collapsible : این ابزار برای ایجاد منوهای کناری سایتها و وبلاگها بسیار مناسب است و امکان ساخت منوهای بازشو و جمع شو را فراهم میکند.گزینه ای قابل تنظیم این ابزار نیز با کلیک روی نوار آبی رنگ بالای آن ، در پنجره Properties در پایین دریم ویور نمایش داده میشود. گزینه Display فقط برای باز و بسته کردن محتوای منوی بازشو در هنگام طراحی است. گزینه default State برای باز و بسته بودن منوی بازش هنگام لوم صفحه است . و گزینه enable animation نیز باعث باز و بسته شدن انیمیشنی منو میشود. در صورتی که تیک آن را بردارید، منو هنگام کلیک کردن روی نام بالای آن ، بدون انیمشین باز و بسته میشود. ​

[/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش دریم ویور

[TABLE]
[TR]
[TD]فارسی نویسی در ادیتور های دریم ویور و فرانت پیج
[/TD]
[/TR]
[TR]
[TD="colspan: 3"]

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

قدیمی ترین ویرایشگر اچتمل همون FrontPage مایکروسافت است. اما این ادیتور فقط برای طراحان آماتور مناسب است. زیرا محیطی ساده و شبیه برنامه ورد مایکروسافت دارد که کار را برای ساختن یک صفحه وب آسان میکند.

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

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

​

و اما Expression Web : مایکروسافت که شکست فرانت پیج را در برابر دریم ویور پذیرفته است ، دست به کار طراحی برنامه جدیدی برای طراحان وب زده است با امکاناتی که برای هر طراح و برنامه نویسی جذاب است. محیط کار برنامه بسیار شبیه ویژوال استودیو است . امکان مدیریت CSS های صفحات ، بسیار شبیه دریم ویور است و طبق گفته مایکروسافت تعامل زیادی با بسته نرم افزاری ویژوال استودیو دارد. برای نصب این برنامه نیاز به دات نت فریم ورک دارید. برای فارسی نویسی در این محیط نیز کافی است مانند ویژوال استودیو عمل کنید و یا خواص html صفحه را مطابق Dir=rtl قرار دهید .
​

[/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش دریم ویور

[TABLE]
[TR]
[TD]طراحی سایت داینامیک در دریم ویور
[/TD]
[/TR]
[TR]
[TD="colspan: 3"]برای اینکه دریم ویور با زدن کلید F12 صفحات ASP و مانند آنرا بصورت داینامیک لود کند باید فایل های سایت خود را در یک پوشه ریخته باشید و بعد در IIS یک دایرکتوری مجازی با آدرسی که فایل ها در آن است بسازید .

ساخت دایرکتوری مجازی :
وارد کنترل پنل شده و سپس وارد Administrative Tools شوید. Internet Information Services را باز کنید .در سمت چپ پنجره ای که باز میشود نام کامپیوتر شما را نوشته و جلوی آن local computer نوشته شده .+ بعلاوه کنارش را بزنید تا باز شود و سپس web sites را باز کنید و روی default web site کلیک کنید . حال به منوی ACTION بروید و از زیرمنوی NEW باید Virtual Directory را بزنید . با زدن ای گزینه مراحل ساخت دایرکتوری مجازی باز میشود . در بخش Alias نامی را بعنوان نام مجازی آن انتخاب کنید . مثلا را برگزینید و به صفحه بعدی بروید .در اینجا از شما Directory را میخواهد . با زدن browse یک پوشه را انتخاب کنید .در صفحه بعدی 5 گزینه است که اجازه های دسترسی را باید معین کنید .

• گزینه Read اجازه خواندن فایل ها را ازین دایرکتوری میدهد .
• گزینه Run Scripts اجازه اجرای کد هایASP را توسط سرور که همان رایانه شخصی شماست می دهد .
• Execute برای اجرای CGI است که امروزه کاربر زیادی ندارد .
• Write به شما اجازه نوشتن روی فایل های شاخه مذکور را می دهد .
• Browse : آیا تا کنون شده وارد سایتی شوید و بجای اینکه صفحه باز شود ، لیست فایل های موجود در آن بصورت یک windows Explorer بشما نشان داده شود ؟ اگر این گزینه را تیک بزنید این امکان برای بازدید کنندگان سایت شما فراهم میشود که در صورتی که یک پوشه شامل فایل HTML پیش فرض برای باز شدن نبود ، بازدید کننده فایل های موجود در آن پوشه را ببیند . تیک زدن این گزینه بخصوص در سرور ها کار خطرناکی است . چون هکر ها را در کارشان یاری میکنید .

بازدن Finish کار تمام شده و حال در زیر شاخه default web site شما یک پوشه مجازی بنام mysite می بینید. برای بازکردن فایل های داخل این پوشه (مثلا فایل index.asp ) روی فایل کلیک راست کنید و browse را بزنید . یک پنجره مرورگر با آدرسی مانند http://localhost/mysite/index.asp باز میشود .



تعریف سایت داینامیک در دریم ویور :
در پنجره site گزینه Edit sites را بزنید و new را برای تعریف سایت داینامیک برگزینید . نامی وارد کنید و بصفحه بعد بروید .در اینجا گزینه YES,I want to use a server technology را برگزینید و از پنجره زیرین نوع تکنولوژی مورد نظرتان مانند ASP یا CF را انتخاب کنید .در صفحه بعد آدرس پوشه مجازی را باید بدهید. d:\inetpub\wwwroot\Unnamed Site 1 این آدرس بصورت پیش فرض انتخاب شده . چرا ؟ چون در IIS پوشه مذکور بعنوان یک پوشه مجازی تعریف شده است . اما شما آدرس خودتان را از روی هارد وارد کنید . در صفحه بعد هم باید آدرس مجازی همان پوشه قبلی را بدهید که http://localhost/mysite است . در صفحه بعد از شما می پرسد که آیا هنگام اتمام ویرایش صفحات شما فایل ها را در پوشه دیگری کپی میکنید ؟ گزینه NO انتخاب شده است . بهمین صورت رهایش کنید .در صفحه بعد Done را بزنید و کار تمام شد .

[/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش دریم ویور

[TABLE]
[TR]
[TD]دریم ویور : رویاباف طراحان وب
[/TD]
[/TR]
[TR]
[TD="colspan: 3"]نام این نرم افزار به معنای رویاباف میباشد ، البته از نظر من ماکرومدیا در این مورد اصلا اقراق نکرده است . چون کار این نرم افزار آنچنان ظریف و استثنایی است که جز در رویای شما قابل تصور نیست . در این مقاله در مورد قابلیتهای نرم افزار Dreamweaver صحبت خواهد شد .

​

کار دریم ویور چیست ؟
نرم افزار Dreamweaver از شرکت Macromedia در نگاه اول نرم افزار ساده ای جهت ساخت صفحات HTML (Hyper Text Markup Language) است . که به ما کمک میکند تا مجبور نشویم کدهای زبان HTML را حفظ کنیم و با چند حرکت و کلیک دستورات به زبان HTML انجام میشوند و در واقع باید بگوییم این نرم افزار Dreamweaver است که Tag های زبان HTML را کاملا حفظ کرده و برای ما انجام میدهد .
شاید اولین سوالی که برای شما پیش بیاید این است که چه اشخاصی به سوی نرم افزار Dreamweaver میروند و چرا از نرم افزار های رقیب Dreamweaver یعنی GoLive از شرکت Adobe و FrontPage از شرکت Microsoft استفاده نکنیم . جواب این است که نرم افزار Dreamweaver از شرکت Macromedia و همچنین نرم افزار GoLive از شرکت Adobe برای طراحان وبی است که کارهای گرافیکی میتوانند بکنند یا بهتر بگویم طراح گرافیکی هستند اما نرم افزار FrontPage از شرکت Microsoft برای کسانی بیشتر به درد میخورد که کار آنها اتوماسیون اداری است یعنی با مجموعه برنامه Office از شرکت Microsoft کار میکنند بهتر است . و ما چون زمینه کارمان گرافیک است از بین نرم افزارهای Macromedia Dreamweaver MX 2004 و Adobe GoLive CS نرم افزار Dreamweaver را انتخاب کردیم ، زیرا نرم افزار Dreamweaver با نرم افزار Fireworkes از همین شرکت Macromedia است به خوبی مکالمه میکند و نرم افزار GoLive با نرم افزار Adobe ImageReady به خوبی مکالمه میکند و ما نیز چون Target کارمان شرکت Macromedia است نرم افزار Dreamweaver MX 2004 را انتخاب کردیم .
Dreamweaver MX 2004 به جز ساخت صفحات HTML از نوع Static و Dynamic میتواند به ساخت صفحات با PHP و ASP و ASP.NET و JSP و ColdFusion نیز به ما کمک کند ، همچنین این برنامه فلش را بخوبی پشتیبانی میکند و همین امر در طراحی سرعت ما را افزایش و خطاهای ایجاد شده در فرانت پیج را در هنگام کار با فلش ها کاهش میدهد . این برنامه ساخت behavior ها را نيز بخوبي پشتيباني ميکنيد . امکانات ديگر آن در هنگام کار با برنامه چندان زياد است که گاهي از اينهمه ابزار به هيجان مي آييد . پس از اين پس براي بافتن روياهاي خود در وب يک روياباف داريد !
[/TD]
[/TR]
[/TABLE]