بنر بالای مطالب

banner

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

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

tutorial-Dreamweaver1

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

 


آشنایی با محیط کاری نرم افزار 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 را فعال کنید که پیشنهاد نمی شود .

 

tutorial-Dreamweaver1

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

 

tutorial-Dreamweaver2

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

 

tutorial-Dreamweaver3

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

tutorial-Dreamweaver4

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

 

tutorial-Dreamweaver5

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

 

tutorial-Dreamweaver6

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

 

tutorial-Dreamweaver7

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

 

tutorial-Dreamweaver8

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

 

tutorial-Dreamweaver9

پنل Properties
یکی از مهمترین قسمت ها در نرم افزار دریم ویور ، پنل Properties می باشد .  پنل Properties این ویژگی را در اختیار شما قرار میدهد که قسمت مورد نظر را به صورت مستقیم ویرایش کنید . پنل Properties هم دارای دو قسمت HTML و CSS می باشد .
یک قسمت پر کاربرد . به چه دلیل ؟ دقت داشته باشید که در صورتیکه بخواهید یک قسمت از متن در یک پاراگراف را ضخامتش را بیشتر یا کمی از متن یک پاراگراف را مورب کنید باید شروع به کد نویسی در خط مورد نظر نمایید . اما با استفاده از پنل Properties کافیست قسمتی از خط را انتخاب و با کلیک بر روی آیکون B قسمت مورد نظر را ضخامتش را بیشتر یا مورب کنید .به تصویر زیر دقت کنید . دقت داشته باشید که آموزش کامل پنل Properties به صورت عملی در درس های بعدی داده می شود . این بخش فقط جنبه معرفی دارد .

 

tutorial-Dreamweaver10

حالا دقت کنید با انتخاب یک قسمت از متن ، به راحتی و بدون استفاده از کد نویسی می توانم ضخامت آن را بیشتر کنم .

 

tutorial-Dreamweaver11

پنل Insert
یکی دیگر از پنل های پر کاربرد پنل Insert می باشد . با استفاده از این پنل می توانیم اجزای مختلفی را بدون احتیاج به کد نویسی به صفحه اضافه کنیم . اجزایی مانند اضافه کردن لینک به محتویات صفحه / اضافه کردن انواع فرم های HTML / دیتا بیس / صفحه بندی / اضافه کردن مشخصات مربوط به متن تایپ شده و...

 

tutorial-Dreamweaver12

 

 

آخرین بروز رسانیجمعه, 01 خرداد 1394 15:59

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا