آموزش تصویری نرم افزار DreamWeaver CS5

امروز بخش آموزش تصویری نرم افزار DreamWeaver CS5  در سایت راه اندازی می شود . حدود 50 نفر از کاربران فعال سایت از من خواسته بودند که آموزش نرم افزار دریم ویور را به صورت کامل در بخش آموزش قرار بدهم .
همانطور که بارها به این مهم اشاره کرده ام که درست کردن یک آموزش بسیار کار مشکل و زمان بری می باشد اما با توجه به نظرات کاربران فعال / توجه به بخش طراحی وب سایت که حدود چند ماه پیش در سایت راه اندازی شده است و نیاز به یادگیری این نرم افزار برای طراحی قالب ، تصمیم بر این گرفته شد که این بخش راه اندازی شود . به امید خدا سعی میکنم تا یک ماه آینده این بخش را کامل و با مثال هایی که برای این بخش آماده کرده ام یک قالب را با نرم افزار دریم ویور برای شما طراحی کنم و 2 وب سایت باقیمانده از 10 وب سایت آموزش داده شده را بعد از کامل شدن آموزش مقدماتی نرم افزار دریم ویور در محیط نرم افزار به صورت کاملا تصویری آموزش بدهم .

پیش نیاز : آموزش HTML / آموزش CSS
آشنایی با محیط کاری نرم افزار DreamWeaver CS5
1. من فرض را بر این میگیرم که شما نرم افزار DreamWeaver CS5 را بر روی کامپیوترتان نصب کرده اید . نرم افزار را اجرا کنید .
همانطور که در تصویر زیر مشاهده می کنید ، پنجره خوش آمدگویی برای شما باز می شود . سعی کنید این پنجره را غیر فعال نکنید چون دسترسی شما را به فایل هایی که قبلا آنها را ایجاد یا ویرایش کرده اید به طور سریع فراهم میکند .  
در قسمت اول یعنی Open a Recent Item می توانید فایل هایی که قبلا باز کرده اید را مشاهده و آنها را انتخاب کنید یا مستقیما بر روی کلید Open کلیک کرده و فایل مورد نظر خودتان را از روی هارد دیسک انتخاب و وارد ویرایشگر کنید .
در قسمت میانی Create New ، بسته به پروژه ای که می خواهید طراحی کنید می توانید یکی از زبانهای برنامه نویسی را انتخاب نمایید .
در قسمت Top Features ویدئوهای آموزشی مربوط به نرم افزار دریم ویور وجود دارد . (ویدئو های آموزشی در سایت سازنده موجود می باشد )
پایین صفحه سمت چپ 3 لینک وجود دارد :
لینک اول : Getting Started : نحوه شروع کار با نرم افزار دریم ویور
لینک دوم : New Features : ویژگیهای جدید اضافه شده به نسخه در حال نصب نسبت به نسخه های قبلی
لینک سوم : Resources : منابع مرتبط با نرم افزار دریم ویور
لینک چهارم : Dreamweaver Exchange : اضافه کردن قابلیت های جدید به نرم افزار
در صورتیکه تمایل ندارید هر بار که نرم افزار را اجرا می کنید پنجره خوش آمدگویی فعال شود تیک گزینه Dont show again را فعال کنید که پیشنهاد نمی شود .

قبل از اینکه بخواهم محیط کاربری نرم فزار را برای شما معرفی کنم اجازه بدهید ایجاد ساختار اصلی یک وب سایت را برای شما شرح بدهم تا بدانید بعد از وارد شدن به محیط نرم افزار چکاری باید انجام بدهید .
اولین کاری که برای طراحی یک وب سایت باید ابتدا انجام بدهید ساخت پوشه های مربوط به فایل های شما می باشد . یعنی باید یک پوشه اصلی به نام وب سایت به فرض مثال asarayan ایجاد کنید . سپس درون این پوشه یک فولدر برای تصاویر / یک فولدر برای صفحات به غبر از صفحه اصلی سایت / یک فولدر برای دیتا بیس (در صورتیکه هارد شما داینامیک باشد) و فولدرهای دیگر بسته به نیاز وب سایت .
با توجه به توضیحات بالا قسمت های مختلف نرم افزار دریم ویور را برای شما معرفی میکنم .
قسمت اول Application Toolbar می باشد . قسمت اصلی نوار تنظیمات که در بالای صفحه قرار گرفته است . با استفاده از این قسمت می توانیم تنظیمات محیط کاربری را تغییر بدهیم .
در قسمت بالای صفحه سمت چپ سه گزینه وجود دارد :
Layout : برای تغییر نمای محیط کاربری بکار می برد . این آیکون در قسمت Document  نیز فعال می باشد که در ادامه توضیح میدهم .
Extend DreamWeaver : با استفاده از این گزینه می توانیم قابلیتهای نرم افزار دریم ویور را گشترش بدهیم که در درس هاس بعدی به طور کامل آموزش داده می شود .
Site : از طریق این قسمت می توانیم یک سایت یا پروژه جدید ایجاد یا پروژه های قبلی را مدیریت کنیم .
Designer : حالت نمایش قسمت طراحی را تغییر می دهد .
Search : در این قسمت می توانید در پورتال ادوبی به جستجوی اطلاعات خودتان بپردازید .

نوار ابزار Document
با استفاده از نوار ابزار Document می توانیم دسترسی راحت تری به نماهای مختلف پروژه داشته باشیم . این نوار ابزار دارای امکانات دیگری مثل دیدن پیش نمایش سایت طراحی شده  / آپلود کردن صفحات وب سایت  و تایپ عنوان بدون کد نویسی برای صفحه نمایش داده شده باشیم .

در قسمت Code شما فقط می توانید سورس کد نوشته شده برای صفحه مورد نظر را مشاهده کنید .

با کلیک بر روی آیکون Split هم نمای سورس کد هم نمای طراحی شما نمایش داده می شود .

با کلیک بر روی آیکون Design نمای طراحی شده قالب به شما نمایش داده می شود

با کلیک بر روی آیکون Live View صفحه  وب سایت همانطور که در مرورگر ظاهر می شود نمایش داده می شود .

در صورتیکه بخواهید قالب طراحی شده را در مرورگرهای نصب شده بر روی سیستم عاملتان مشاهده کنید با انتخاب Preview /Debug in browser و انتخاب یک مرورگر ، می توانید خروجی را مشاهده کنید .

در قسمت Title هم می توانید بدون کد نویسی یک عنوان را برای صفحه مورد نظر تایپ کنید .