آموزش تصویری نرم افزار دریم ویور Dreamweaver - مقدماتی و پیشرفته

[P O U R I A]

آموزش Dreamweaver دریم ویور به صورت کاملا تصویری و رایگان در سطوح مقدماتی و پیشرفته (بیش از 10 آموزش دریم ویور) جهت استفاده شما بازدید کننده محترم در این بخش قرار گرفته است .

منبع

 

[P O U R I A]

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

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

​

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

​

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

​

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

منبع​

 

[P O U R I A]

آموزش تصویری نرم افزار DreamWeaver CS5 (بخش دوم)

آموزش تصویری نرم افزار DreamWeaver CS5 (بخش دوم)

در درس اول کمی با محیط نرم افزار DreamWeaver CS5 آشنا شدید . امروز می خواهم یک پروژه جدید در دریم ویور ایجاد کنم (فقط معرفی) و ساختار اصلی پوشه وب سایت که در درس اول برای شما توضیح داده ام را بوسیله مدیریت نرم افزار دریم ویور ایجاد کنم . در این درس با بخش مدیریت وب سایت در نرم افزار دریم ویور بیشتر آشنا می شوید و کامل توضیح داده می شود که چگونه مدیریت بهتری بر روی پروژه ایجاد شده داشته باشید. دقت داشته باشید که چند درس اول فقط معرفی قسمت های مختلف نرم افزار می باشد و فعلا پروژه عملی آموزش داده نمی شود پس بهتر است که حتما و با دقت به این قسمت ها توجه کنید تا وقتی تمرین ها را شروع کردیم سوالی برای شما در مورد قسمت ها و ابزارها پیش نیاید .

​

بعد از آشنا شدن به محیط کار نرم افزار دریم ویور ابتدا باید ساختار اصلی یا همان پوشه مربوط به وب سایت را ایجاد کنیم . DreamWeaver CS5 این قابلیت را در اختیار شما قرار میدهد تا به راحتی یک پروژه جدید فقط با انتخاب چند کلیک ایجاد کنید . برای انجام اینکار بعد از باز کردن نرم افزار می توانیم از طریق 4 قسمت یک پروژه جدید ایجاد کنیم که هر 4 قسمت یک کار را به صورت مشابه برای ما انجام میدهد .مدیریت وب سایت باDreamWeaver CS5
من در ادامه هر 4 قسمت را به طور کامل برای شما معرفی میکنم . (دقت داشته باشید که هر 4 قسمت یک کار مشابه برای شما انجام میدهد )
قسمت اول :
گزینه DreamWeaver site می باشد که در همان صفحه خوش آمدگویی وجود دارد .

​

قسمت یا گزینه دوم :
در قسمت File در نوار ابزار سمت راست پنل با کلیک بر روی لیست کشویی Desktop و سپس manage Sites می توانیم به قسمت مدیریت سایت دسترسی داشته باشیم .

​

قسمت یا گزینه سوم :
بالای صفحه بر روی آیکون Site کلیک کرده و از لیست باز شده گزینه manage Sites را انتخاب می کنیم .

​

قسمت یا گزینه چهارم :
بر روی منوی Site در نوار ابزار تنظیمات کلیک کرده و گزینه manage Sites را انتخاب کنید .

​

گزینه manage Sites یکی از مهمترین قسمت ها می باشد پس سعی کنید این 4 قسمت را خوب به خاطر بسپارید و هد کدام که برای ایجاد یک وب سایت برای شما راحت تر هست را انتخاب کنید .1. من در همان صفحه اصلی بر روی DreamWeaver site کلیک می کنم .این صفحه در 4 قسمت بالا به صورت مشابه می باشد . فرض کنید برای شروع می خواهید پوشه مربوط به وب سایت را ایجاد کنید .
در کادر اول نام پوشه وب سایت و در کادر دوم محل ذخیره فایل یا پوشه پروژه را مشخص کنید .

​

اگر در این قسمت از قبل پوشه مورد نظر را ایجاد کرده باشید تمام فایل ها و پوشه های زیر مجموعه بعد از ذخیره کردن به لیست فایل اضافی می شود . بعد از مشخص کردن نام وب سایت بر روی کلید Save کلیک کنید .

​

همانطور که مشاهده می کنید اسم پروژه یا وب سایت جدید در قسمت File اضافه شد. شما می توانید در این قسمت با انتخاب هر فایل یا فولدر ، قسمت مورد نظر را ویرایش یا حذف کنید .

​

بعد از ایجاد کردن پوشه مربوط به ذخیره سازی پروژه یا وب سایت ، باید کمی بیشتر با مدیریت پوشه مورد نظر آشنا بشوید .
در قسمت File بر روی گزینه Manage Site کلیک میکنم . همانطور که مشاهده می کنید نام هر دو پوشه ایجاد شده در این صفحه وجود دارد . برای درک بهتر قسمت های مورد نظر را برای شما توضیح میدهم .
در ویزارد Manage Site می توانیم با کلیک بر روی New یک وب سایت جدید ایجاد کنیم . / با کلیک بر روی آیکون Edit وب سایت های طراحی شده را ویرایش کنیم / با کلیک بر روی آیکون Duplicate یک کپی از پوشه وب سایت مورد نظر بگیریم / با کلیک بر روی گزینه remove وب سایت انتخاب شده را حذف کنیم . / با کلیک بر روی Export یک وب سایت را به یک کامپیوتر دیگر منتقل کنیم / با کلیک بر روی Import یک وب سایت را از یک کامپیوتر وارد نرم افزار دریم ویور کنیم

​

با توجه به توضیحات بالا بر روی کلید Edit کلیک کنید تا با محیط کاربری این گزینه بیشتر آشنا شویم
بر روی کلید Advanced Settings کلیک کنید .
در قسمت Local Info می توانیم یک پوشه جهت ذخیره کردن تصاویر پروژه مورد نظر ایجاد یا از فولدرهای ایجاد شده یکی را انتخاب کنیم .

​

در قسمت Cloaking می توانیم فایل هایی که احتیاج به آپلود آنها بر روی سرور نداریم را مشخص کنیم مثل فایل psd قالب

​

در قسمت Design notes زمانی کاربرد دارد که به صورت گروهی بر روی پروژه ای مشغول به فعالیت و طراحی هستیم .بقیه قسمت ها هم به طور کامل به صورت عملی آموزش داده می شود .

منبع​

 

[P O U R I A]

آموزش کار با متون در نرم افزار DreamWeaver CS5

آموزش کار با متون در نرم افزار DreamWeaver CS5

همانطور که میدانید ظاهر یک قالب را تصاویر همراه با متن تشکیل میدهد پس بسیار مهم است که بدانیم برای ایجاد یک قسمت از وب سایت چه مشخصه هایی برای متن بکار برده شده مثل اندازه ، نوع فونت ، تراز بندی و دیگر مشخصه هایی که می توانیم به آن نسبت بدهیم ، بکار ببریم . برای شروع نرم افزار DreamWeaver CS5 را اجرا کنید .مباحثی که به طور کامل در این قسمت مورد بررسی قرار می گیرد عبارتند از آشنایی با نوع فونت بکار برده شده در وب سایت / اندازه / ترازبندی متن و کمی هم در مورد فاصله خطوط توضیح میدهم .آشنایی با نوع فونت در وب سایت - Font Family
در طراحی قالب ، شما هر نوع فونتی را نمی توانید استفاده کنید چون توسط همه مرورگرها نمایش داده نمی شود . برای همه ما پیش آمده که وارد سایتی شدیم که متن آن بهم ریخته نمایش داده می شود . علت این موضوع پشتیبانی نکردن مرورگر از فونت بکار برده شده در قالب می باشد . راه حل این موضوع دانستن فونتهایی است که توسط تمام مرورگرها نمایش و پشتیبانی می شود .
اگر شما برای طراحی قالب از نرم افزار DreamWeaver CS5 استفاده کنید می توانید برای تغییر ظاهر قالب ، نوع فونت را در css مشخص کنید .

خود نرم افزار به شما یک سری فونت استاندارد و فونت جایگزین را به شما معرفی می کند تا در صورتیکه فونت مورد نظر توسط مرورگر پشتیبانی نشد فونت جایگزین به عنوان فونت پیش فرض در مرورگر فعال شود .وقتی شما در صفحه خود می خواهید از یک فونت خاص استفاده کنید مراقب باشید و فونتی را استفاده کنید که بیشتر افراد به صورت پیش فرض داشته باشند. برای مثال وقتی ویندوز XP را نصب می کنید چندین فونت به صورت خودکار بر روی کامپیوتر شما نصب می شوند. مثلاً Tahoma, Arial, Times New Roman و چندین فونت دیگر.
قابل ذکر است که اگر بیننده شما فونت مورد استفاده شما را نداشته باشد مرورگر به طور خودکار از فونت پیش فرض خود که به طور معمول Times New Roman است استفاده می کند.
در زیر یک سری از فونتهایی که زیاد توسط طراحان استفاده می شود را قرار داده ام .
arial / tahoma / time news roman / arial black / courier / courier new / modem / terminal / symbol
حال با در نظر گرفتن توضیحاتی که در بالا قرار داده ام می خواهم بوسیله نرم افزار DreamWeaver CS5 نوع فونت را تغییر بدهم .

به تصویر زیر دقت کنید که چقدر کار با نرم افزار DreamWeaver CS راحت می باشد . کافیست قسمتی که می خواهید نوع فونت آن با بقیه صفحه متمایز یا به صورت یکسان باشد را انتخاب کرده و در پنل Properties نوع فونت را تغییر بدهید . فونت مورد نظر در css صفحه اضافی می شود .

​

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

​

در صورتیکه بخواهید می توانید یک سری از فونتهایی که در طراحی قالبهایتان می خواهید از آنها استفاده کنید را ایجاد و در لیست پیش فرض قرار بدهید . برای انجام اینکار کافیست بر روی تب CSS Style دابل کلیک کرده و از سمت چپ پیوندها گزینه Type را انتخاب کنید .

​

گزینه Edit Font List را انتخاب کنید .

​

صفحه Edit Font List باز می شود . کافیست یک لیست پیش فرض از فونتها را انتخاب کنید تا در قسمت chosen fonts نمایش داده شود . حالا با استفاده از دو فلشی که با کادر قرمز مشخص شده است می توانید یک فونت را اضافه یا فونتی را از لیست حذف کنید . سعی کنید لیست شما بیشتر از 3 فونت نباشد .

​

در صورتیکه فونت شما در لیست فونت پیش فرض وجود ندارد می توانید به صورت دستی نام فونت مورد نظر را در فایل CSS وارد کنید .
تغییر اندازه فونت در نرم افزار DreamWeaver CS
همانطور که می دانید برای تغییر اندازه فونت در صفحه باید با واحدهای اندازه گیری متن آشنایی کامل داشته باشید بدلیل اینکه اگر ندانید متون صفحه را با چه واحدی اندازه گیری مشخص کنید تمام عناصر در مرورگرها به شکل متفاوت نمایش داده می شود . اجازه بدهید کمی در مورد واحد های اندازه گیری در css برای شما توضیح بدهم .
واحدهای اندازه گیری متن در css به دو قسمت تقسیم می شود .
»»» قسمت اول Absolute بوده که دارای چند واحد اندازه گیری ثابت می باشد و بیشتر برای چاپ استفاده می شود .
»»» قسمت دوم Relative بوده که به جز والد یا مرورگر وابسته می باشد و در صورتیکه تنظیمات پیش فرض تغییر کند این قسمت نیز تغییر می کند . این قسمت دارای چند واحد اندازه گیری بوده که مهمترین و پر کاربردترین آنها EMS و PX و % می باشد .
در صورتیکه قبلا طراحی قالب ، بوسیله کد نویسی بدون نرم افزار کرده باشید ، فرق این سه واحد اندازه گیری را می دانید .
واحد پیکسل px بسته به رزولیشن مانیتور تغییر می کند و برای نمایش قسمت های مختلف سایت زیاد مناسب نمی باشد .
چند دلیل برای عدم استفاده از واحد px برای فونت وجود دارد که در ادامه به طور کامل برای شما شرح میدهم :
1. نسخه های قبلی ویندوز اکسپلورر (قبل از نسخه 7) از واحد پیکسل پشتیبانی نمی کنند .
2. در صورتیکه از واحد px استفاده کنید اندازه نوشته ها را در موبایل بزرگتر از حد معمولی یا پیش فرض نمایش میدهد .
برای تغییر اندازه فونت کافیست قسمت مورد نظر را انتخاب کرده و در پنل properties بر روی کلید Add property کلیک کنیم . در این قسمت می توانیم اندازه فونت را با واحدهای اندازه گیری مشخص شده وارد کنیم . من از طریق هر دو کادر اندازه را در تصاویر زیر تغییر داده ام

منبع​

 

[P O U R I A]

آموزش کار با متون در نرم افزار DreamWeaver CS5 - قسمت 2

آموزش کار با متون در نرم افزار DreamWeaver CS5 - قسمت 2

تعیین اندازه فاصله خطوط در DreamWeaver CS
با استفاده از دستورات css می توانیم تغییراتی را بر روی فواصل بین خطوط از نظر افقی و عمودی بین متون صفحه اعمال کنیم . اما بدون استفاده از دستورات css و با استفاده از نرم افزار دریم ویور اینکار به مراتب راحت تر و بدون خطا می باشد .
همیشه در ابتدای دستورات Body در css ویژگی Line-height را باید برای فاصله خطوط از هم به صورت عمودی وارد کنیم .
واحد اندازه گیری برای این قسمت هم به چند صورت می باشد . شما می توانید از درصد یا پیکسل یا واحد های اندازه گیری دیگر برای این قسمت استفاده کنید . معمولا برای این قسمت از درصد یا پیکسل استفاده می شود که این موضوع نیز بسته به طراحی فرق دارد .
برای انجام اینکار کافیست تگ body را در پنل properties انتخاب و بر روی آن دابل کلیک کنید . می توانید مقدار خود را روبروی کادر line-height تایپ کنید .

​

ایجاد فاصله عمودی بوسیله Margin در DreamWeaver CS
در بیشتر مواقع پیش می آید که بخواهیم بین عنوان (تیتر) صفحه یا لیست هایی که در قالب داریم از طرفین فاصله ایجاد کنیم . برای انجام اینکار از Margin استفاده می شود .
روش کار هم به این صورت هست که باید قسمت مورد نظر را انتخاب کرده و در پنل Properties بر روی کلید edit Rule کلیک کنیم یا می توانیم مستقیما بعد از انتخاب دیویژن مورد نظر به صورت مستقیم دستور CSS را تایپ کنیم. به تصاویر زیر دقت کنید .

​

در این قسمت تعیین کنید فاصله از چه سمتی باشد . بالا / راست / پایین / چپ

​

می توانید مستقیما دیویژن مورد نظر را انتخاب کرده و به صورت دستی تنظیمات خودتان را وارد کنید

​

کنترل فاصله های داخل یک کارد بوسیله Padding
تفاوت Margin با padding چیست ؟ Margin فاصله بین اجزا را تعیین می کند و Padding فاصله داخلی بین اجزا را تعیین می کند . هر کدام از اجزا را داخل یک کادر مستطیل شکل در نظر بگیرید فاصله متن یا هر شکل دیگری در داخل این کادر تا حاشیه کادر را Padding می گویند .
برای درک بهتر به تیتر صفحه دقت کنید . با استفاده از Padding کمی فاصله از سمت راست ایجاد میکنم . برای انجام اینکار ابتدا تیتر صفحه را انتخاب کرده سپس بر روی کلید Edit Rule کلیک میکنم .

​

از پیوندهای سمت چپ Box را انتخاب کرده و تیک گزینه Same for all را بر میدارم تا تنظیمات به صورت تکی اعمال شود . حال در کادر Right مقدار مورد نظر خودم را وارد میکنم .

​

تغییرات را مشاهده کنید . شما می توانید از طرفین نیز این تغییرات را اعمال کنید . به عنوان مثال از سمت چپ / پایین یا بالا

​

ترازبندی متون در نرم افزار DreamWeaver CS5
بسیار خوب من یک قالب که از قبل طراحی کرده ام را در نرم افزار دریم ویور باز میکنم . در بخش اول روش تراز بندی متن را با استفاده از دریم ویور آموزش میدهم .
با استفاده از CSS می توانید کنترل بهتری بر روی چیدمان متن در وب سایت خود داشته باشید . دقت داشته باشید که تغییراتی که بر روی یک قسمت از متن اعمال می کنید به صورت کلی در قسمت مشخص شده (یک پاراگراف) اعمال می شود .
برای تراز کردن متن در دریم ویور ،قسمتی که می خواهید از طرفین تراز شود را انتخاب کنید ، حال چند روش وجود دارد که بتوانیم تغییرات خودمان را بر روی قسمت مشخص شده اعمال کنیم .
روش اول انتخاب متن و سپس فشردن کلید Alt می باشد . بعد از فشردن کلید Alt یک پنجره برای شما باز می شود که با انتخاب سلکتور مورد نظر به صورت دستی تنظیمات مربوطه را می توانیم تغییر بدهیم .

​

روش دوم استفاده از پنل Properties می باشد . همانطور که در تصویر مشاهده می کنید بعد از انتخاب سلکتور مورد نظر ، می توانیم به صورت دستی ویژگی خودمان را در قسمتی که با کادر قرمز مشخص کرده ام وارد کنید .

​

 

[P O U R I A]

آموزش کار با متون در نرم افزار DreamWeaver CS5 - قسمت 3

آموزش کار با متون در نرم افزار DreamWeaver CS5 - قسمت 3

نرم افزار دریم ویور را اجرا کنید .
ترازبندی متون در نرم افزار DreamWeaver CS5
بسیار خوب من یک قالب که از قبل طراحی کرده ام را در نرم افزار دریم ویور باز میکنم . در بخش اول روش تراز بندی متن را با استفاده از دریم ویور آموزش میدهم .
با استفاده از css می توانید کنترل بهتری بر روی چیدمان متن در وب سایت خود داشته باشید . دقت داشته باشید که تغییراتی که بر روی یک قسمت از متن اعمال می کنید به صورت کلی در قسمت مشخص شده (یک پاراگراف) اعمال می شود .
برای تراز کردن متن در دریم ویور ،قسمتی که می خواهید از طرفین تراز شود را انتخاب کنید ، حال چند روش وجود دارد که بتوانیم تغییرات خودمان را بر روی قسمت مشخص شده اعمال کنیم .
روش اول انتخاب متن و سپس فشردن کلید Alt می باشد . بعد از فشردن کلید Alt یک پنجره برای شما باز می شود که با انتخاب سلکتور مورد نظر به صورت دستی تنظیمات مربوطه را می توانیم تغییر بدهیم .

​

​

​

​

روش دوم استفاده از پنل Properties می باشد . همانطور که در تصویر مشاهده می کنید بعد از انتخاب سلکتور مورد نظر ، می توانیم به صورت دستی ویژگی خودمان را در قسمتی که با کادر قرمز مشخص کرده ام وارد کنید .

​

 

[P O U R I A]

ایجاد لینک در DreamWeaver CS5

ایجاد لینک در DreamWeaver CS5

یکی از قسمتهای مهم وب سایت که تقریبا بدون آن دسترسی به محتوای وب سایت غیر ممکن خواهد بود لینک می باشد . فرض کنید که یک وب سایت ، لینک برای متصل کردن صفحات بهم نداشته باشد چه اتفاقی می افتد ؟ مجبور خواهیم بود که به صورت دستی آدرس هر صفحه را در سرچ بار وارد کنیم که اینکار غیر ممکن است . من امروز می خواهم روش و ایجاد لینک در نرم افزار دریم ویور را به صورت کامل برای شما آموزش بدهم .
نرم افزار DreamWeaver CS5 را اجرا کنید .

تگ لینک در HTML به شکل زیر می باشد ، اگر بخواهیم به صورت دستی لینک را وارد کنیم باید به شکل زیر تایپ شد .​

<a href="/لینک صفحه مقصد" target="مشخص می کنیم که لینک به چه صورت باید باز شود "> Link Name</a>


در نرم افزار DreamWeaver CS5 از چند طریق می توانیم برای ایجاد لینک اقدام کنیم که در ادامه به طور کامل هر قسمت را برای شما شرح میدهم . فرآیند ایجاد لینک در DreamWeaver CS5 بسیار کار ساده ای می باشد . بدون داشتن هیچ اطلاعات در زمینه کد نویسی می توانید لینک دلخواه خودتان را به صفحات داخلی و خارجی ایجاد کنید .1. فرض کنید می خواهید یک قسمت از متن صفحه یا یک لینک از منوی اصلی را به یک صفحه داخلی یا خارجی لینک بدهید . برای انجام اینکار کافیست قسمت مورد نظر را انتخاب کرده و بر روی پوشه Browse For File در پنل Properties کلیک کنید . کافیست صفحه مورد نظر را انتخاب و بر روی کلید OK کلیک کنید .
در کادر ID و Class می توانید یک سلکتور برای لینک ایجاد کنید تا بوسیله آن تغییرات مورد نظر خودتان را در CSS اعمال نمایید .
در کادر Link آدرس صفحه ای که به آن لینک داده ایم نمایش داده می شود .
در کادر Title یک نام برای لینک تایپ کنید تا وقتی ماوس روی آن قرار میگرد نمایش داده شود .
از لیست کشویی target می توانید 5 حالت را برای لینک انتخاب کنید که به شرح زیر می باشد .
مقدار ویژگی target مشخص می کند که شما می خواهید صفحه ی جدید (که در href مشخص کرده اید ) درون همین صفحه ای که در آن قرار دارید باز شود یا صفحه ای جدید
target می تواند یکی از این مقادیر را بپذیرد :
blank_ :در پنجره ای جدید باز می شود .
new_ : در صفحه جدید
self_ : در همین پنجره ای که پیوند در آن قرار دارد باز می شود .
parent_ : درframeset مادر باز می شود .
top_ : در تمام طول پنجره باز می شود .

2. یک روش فوق العاده دیگه هم وجود داره که من بیشتر از این روش استفاده میکنم و آن هم آیکون Point To File هست . روش کارش به چه صورت هست ؟ شما آیکون را انتخاب می کنید و با درگ آن را متصل می کنید به یک صفحه از وب سایت در حال ساخت که در پنل Properties داره نمایش میده . برای درک بهتر به تصویر دقت کنید .

3. روش سوم هم استفاده از منوی Insert و انتخاب گزینه Hyperlink می باشد . بعد از انتخاب گزینه مشخص شده یک صفحه برای تنظیمات باز میشه . در قسمت نام لینک بعد از انتخاب به صورت اتوماتیک ایجاد می شود . در قسمت Link هم می توانید به صورت دستی هم با کلیک بر روی آیکون Brows صفحه مورد نظر را انتخاب کنید . دو کادر بعدی هم در مرحله قبلی توضیح داده شده است

ایجاد لینک داخلی در DreamWeaver CS5
در بعضی از مواقع احتیاج داریم که بین محتوای یک صفحه لینکی قرار بدهیم تا کاربر یا بازدید کننده نیاز نباشد برای عناوینی که در ابتدای صفحه نوشته شده است کل محتوای یک صفحه را بخواند یا با اسکرول ماوس صفحه را جابجا کند . به این نوع لینک Named Anchor گفته می شود . روش کار برای ایجاد چنین لینکی در DreamWeaver CS5 بسیار ساده می باشد .
فرض کنید 20 عدد ماوس با توضیحات در یک صفحه درج شده است که بازدید کننده فقط می خواهد توضیحات مربوط به ماوس مورد نظر را مشاهده کند . ابتدا نام ماوس را در ابتدای صفحه تایپ میکنم .

حال می خواهم وقتی کاربر روی ماوس تسکو کلیک کرد ، فقط توضیحات مربوط به همان ماوس در هر کجای صفحه نمایش داده شود .
در مرحله بعدی توضیحات ماوس تسکو را انتخاب و در تب Insert بر روی آیکون Named Anchor کلیک میکنم . دقت کنید که قبل از توضیحات یا هر کجای متن مورد نظر یکبار کلیک کرده و بعد از ان بر روی آیکون مورد نظر کلیک کنید . به تصویر زیر دقت کنید متوجه می شوید

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

حالا هر دو قسمت ایجاد شد . ابتدا لینک در اول صفحه اضافه شد و در مرحله بعد با استفاده از Named Anchor آیکون به قسمت مورد نظر .
برای ارتباط این دو قسمت به هم ابتدا متن "ماوس تسکو" را سلکت کنید

به قسمت توضیحات تسکو رفته و با استفاده از آیکون Point To File یک ارتباط بر روی آیکون Named Anchor ایجاد کنید .
به تصویر دقت کنید تا بهتر متوجه شوید

به همین راحتی بین عناصر صفحه ارتباط برقرار شد

منبع

 

[P O U R I A]

کار با تصاویر در DreamWeaver CS5

کار با تصاویر در DreamWeaver CS5

بعد از آشنایی کامل با تنظیمات متن در نرم افزار DreamWeaver CS5 نوبت میرسه به تنظیمات تصاویر در نرم افزار دریم ویور. فرمت های تصویری که می توانیم در یک وب سایت از آن استفاده کنیم دارای اهمیت می باشد به همین دلیل من کار با تصاویر را در یک بخش مستقل ایجاد کرده ام و قصد دارم به طور کامل این قسمت را توضیح بدهم. تصاویر در وب سایت بسیار بسیار از لحاظ نوع فایل ، کاربرد و حجم فایل حائز اهمیت می باشند بدلیل اینکه اگر از تصاویری استفاده کنیم که دارای حجم زیاد و کیفیت کم باشد ، لود صفحات را تا حد قابل ملاحضه ای کاهش داده و این کار از لحاظ استانداردسازی یک قالب به هیچ وجه پیشنهاد نمی شود . برای شروع آموزش نرم افزار دریم ویور را اجرا کنید .آشنایی با فرمت های تصویری
در وب سایت از 3 فرمت برای تصاویراستفاده می شود .
فرمت اول JPG می باشد : این فرمت گزینه مناسبی برای عکس و تصاویر با رنگهای متفاوت می باشد .این فرمت بیشتر برای تصاویر کوچک که حجم آنها زیاد نمی شود ، پیشنهاد می شود بدلیل اینکه تصاویر رنگی با کیفیت بالا گزینه مناسبی برای این فرمت نمی باشند و در صورتیکه حجم فایل را بخواهید با نرم افزار کمتر کنید ، کیفیت تصاویر مورد نظر افت پیدا می کند .
فرمت دوم GIF می باشد : ایده آل برای تصاویر کوچک و یا تصاویر تک رنگ می باشد . من برای تصاویر آموزش از GIF استفاده میکنم بدلیل اینکه با کوچک کردن اندازه تصویر ، کیفیت کاسته نمی شود و حجم کمتری نسبت به فرمت JPG دارد تقریبا 50 درصد کمتر می باشد .
فرمت سوم PNG می باشد : این فرمت تقریبا شبیه فرمت GIF می باشد با این تفاوت که GIF دارای پالت رنگ 8 بیت می باشد ولی PNG دارای پالت رنگ 24 بیت ،به همین دلیل حجم سایز فایل مورد نظر بیشتر می باشد . این فرمت برای تصاویری بیشتر برای تصاویری استفاده می شود که دارای پس زمینه نمی خواهیم باشد .مدیریت تصاویر با استفاده از پنل ASSETS
یکی از مهمترین قسمت های مربوط به یک وب سایت ، پوشه تصاویر می باشد . به طوریکه بتوانیم به راحتی و بدون هیچ کد نویسی تصویر مورد نظر را مشاهده و به قسمت مورد نظر اضافه کنیم . برای انجام اینکار بعد از اینکه پوشه وب سایت خودمان را در محیط نرم افزار باز کردیم می توانیم از طریق پنل Assets دسترسی به تمام تصاویر داشته باشیم . در این پنل امکان تغییر نام فایل ، اضافه کردن تصویر جدید ، حذف یا جابجا کردن تصویر، در دسترس می باشد . یکی دیگر از ویژگی های پنل Assets می توان دسترسی سریع به فابل های اسکریپتی و فلش اشاره کرد . من قالبی که برای بخش آموزش طراحی کرده بودم را وارد محیط نرم افزار میکنم . بدون اینکه تغییری در ساختار پوشه ها بدهم ، مشاهده می کنید که تصاویر در پنل Assets وجود دارند . در این قسمت به راحتی با کلیک بر روی هر تصویر می توانیم مشاهده کنیم که شکل تصویر و نام آن با هم همخوانی دارد یا خیر .

​

در پنل Assets به راحتی می توانید یک تصویر را درگ کرده و بروی قسمت مورد نظر اضافه کنید تا تصویر در موقعی دلخواه قرار بگیرد .

​

یکی از امکانات فوق العاده دیگری که در دریم ویور وجود دارد ویرایش تصاویر به صورت پیش فرض می باشد . شما می توانید یک یا چند برنامه را برای ویرایش تصویر انتخاب کرده ، سپس با کلیک بر روی برنامه مورد نظر تصویر را ویرایش کنید ، سپس بعد از ذخیره تصویر ، مشاهده می کنید که بدون هیچ تغییری در کدهای مورد نظر (به صورت دستی) ، تصویر تغییر می کند . برای انجام اینکار ابتدا در نوار ابزار بالای صفحه بر روی Edit کلیک کرده و در مرحله بعدی گزینه Preferences را انتخاب نمائید . یک صفحه همانند تصویر زیر باز می شود . در سمت چپ بر روی پیوند File Types /Editors کلیک کنید .

​

شما می توانید به طور مستقیم بر روی تصویر کلیک راست کرده و گزینه Edit With را انتخاب و از لیست نرم افزارهایی که برای ویرایش تصویر در اختیار شما قرار میدهد یکی را انتخاب کنید .

​

وارد کردن تصاویر در DreamWeaver CS5
در نرم افزار دریم ویور به 3 روش می توانیم تصاویر خودمان را به قالب سایت اضافه کنیم .
روش اول : با کلیک بر روی منوی Insert گزینه Image را انتخاب کنید . صفحه Select Image Source باز می شود . در این صفحه می توانید عکس مورد نظر را از روی کامپیوتر انتخاب و بر روی کلید OK کلیک کنید .

​

در این قسمت باید یک نام برای تصویر خودتان در کادر Alternate text تایپ کنید . این متن در تگ Alt تصویر قرار می گیرد و یکی از مشخصه های مهم در سئو می باد که بعدا توضیح میدهم .

​

روش دوم : استفاده از پنجره Insert بالای صفحه می باشد . در تب اول بر روی آیکون Image کلیک کنید . از لیست باز شده گزینه image کلیک کرده و مثل مرحله قبل تصویر مورد نظر را انتخاب کنید .

​

روش سوم : استفاده از پنل File می باشد . شما می توانید عکس مورد نظر خودتان را از فولدر Image انتخاب و بر روی قسمت مورد نظر درگ کنید . یا بعد از انتخاب تصویر پایین صفحه بر روی کلید Insert کلیک کنید .

​

ویرایش حرفه ای تصاویر در DreamWeaver CS5
بعد از وارد کردن تصویر در دریم ویور احتیاج داریم که کمی مشخصات یا ابعاد آن را تغییر بدهیم . برای انجام اینکار بعد از کلیک کردن بر روی تصویر ، پنل Properties مربوط به آن فعال می شود .
در قسمت ID می توانیم با انتخاب یک سلکتور برای تصویر مورد نظر کد جاوا یا تغییرات لازم را بر روی تصویر اعمال کنیم .
در قسمت Width یا horizontal می توانیم عرض و ارتفاء تصویر را تغییر بدهیم .
در قسمت Src محل ذخیره تصویر یا روت آن مشخص می شود .
در قسمت Link می توانیم یک لینک برای تصویر وارد کنیم تا بازدید کننده بعد از کلیک بتواند به صفحه مورد نظر هدایت شود . بعد از اینکه لینک را وارد می کنید گزینه Target هم فعال می شود . می توانیم مشخص کنیم که بعد از کلیک بر روی تصویر بازدید کننده صفحه جدید را در همین صفحه باز کند یا در صفحه ای جدید .
از دیگر کادرهایی که بسیار کاربردی می باشد می توان به V Space و H space اشاره کرد . این دو کادر برای فاصله تصویر از محتوا بکار می رود . فرض کنید می خواهید تصویر شما از سمت راست که متن تایپ شده است 10 پیکسل فاصله داشته باشد .
در قسمت آخر هم کادر Border می باشد . در این کادر می توانیم با وارد کردن عدد مورد نظر یک خط به صورت حاشیه به تصویر اضافه کنیم .

منبع​

 

[P O U R I A]

ایجاد جدول در DreamWeaver CS5

ایجاد جدول در DreamWeaver CS5

استفاده از جداول در طراحی وب سایت تقریبا منسوخ شده یا بهتر بگم متداول نیست و بیشتر کاربران به جای استفاده از تگ <table> از <div> استفاده می کنند . حتما همه شنیدید که خیلی جاها توصیه میشه که برای Layout صفحه بجای Table از Div استفاده کنید. اما چرا؟
روزی که HTML ایجاد شد، ایده طراحان آن این بود که شما بتوانید یک کتاب را همانگونه که وجود دارد بر روی اینترنت منتشر کنید و برای این کار هم ابزارهای کافی و مورد نیاز را فراهم کردند.از آنجا که معمولا طراحان از ابزارها نسبت به دانشی که دارند به روش های متفاوتی استفاد می کنند به همین دلیل طراحان در استفاده از ابزارهای HTML دچار سردرگمی شدند و این ابزارها را بدلیل شباهت کار و بعضا بدلیل راحتی کار بجای هم استفاده کردند. یکی از مهمترین این ابزارها کنترلهای div و table هستند که معمولا بجای هم استفاده می‌شوند.وظیفه اصلی تگ div در واقع چیدمان صفحه و طراحی قالب صفحه است و به همین دلیل است که نسبت به table فوق العاده انعطاف پذیرتر است. شما براحتی می توانید یک div را در هر مکانی از صفحه در کوتاهترین زمان قرار بدهید. حالا به این انعطاف پذیری قابلیت حرکت ( انتقال ) را که با کمک تکنولوژی آژاکس اضافه شده نیز بی افزایید.از طرف دیگر، div کد کمتر و بهینه‌تری (<div> </div>) نسبت به یک table (که معادل <table><tr><td></td></tr></table>) ایجاد می‌کند. که این هم باعث کاهش حجم صفحه تولیدی می‌شود و هم باعث لود شدن سریعتر صفحه .نکته دیگری که وجود دارد آن است که crawler ها که وظیفه جستجوی و ذخیره کردن صفحات را برای موتورهای جستجو ( مثل گوگل ) بازی می کنند. چون بصورت معنایی صفحات را crawl می کنند بنابراین اگر صفحه شما بهتر و معنایی تر ایجاد شده باشد ، از Page rank بالاتری هم برخوردار خواهد بود.نکته دیگری که یک div را در قالب بندی دردرجه بالاتری قرار می دهد، انعطاف پذیری آن در CSS هاست. به این معنی که شما می توانید یک قالب چندین منظوره ایجاد کنید و بعد با تغییر مکان div ها که با css انجام می‌دهید . کل قالب صفحه تغییر شکل پیدا می‌کند.حالا با این همه برتری div نسبت به table ممکن است برای شما این سوال ایجاد شود که table برای چه مواردی باید استفاده شود. طراحان HTML همانطور که div را برای قالب بندی وقرار دادن متن و تصویر پیاده‌سازی کردند. table را هم برای ایجاد صفحات به شکل Tab و ایجاد جداول (‌لیست های موجود در صفحه) بوجود آوردند. در اکثر مواقع توصیه می‌شود که برای پیاده‌سازی Tab ها از table استفاده کنید. همانطور که مسلما خود شما هم متوجه شدید با استفاده از یک table براحتی می‌توان یک tab را پیاده‌سازی کرد. درصورتی که اگر بخواهید همان tab را با div پیاده‌سازی کنید باید زمان و انرژی بیشتری صرف کنید.(توضیحات استاد کرامتی فر)
در کل با توجه به این نکات کلیدی : حجم کمتر صفحه تولید شده
Page rank بالاتر در گوگل و سایر search engine ها
قالب انعطاف پذیرتر
برای قراردادن متن و تصویر در وب توصیه شده که از div استفاده شود
کنترل بیشتر بوسیله css
جدول صرفا برای ساختار tabی مناسب است
کنترل و حرکت توسط آژاکسبا توجه به توضیحات بالا در بعضی از مواقع نیاز پیدا می کنیم که از جداول برای دقیق قرار دادن بعضی از عناصر در یک صفحه استفاده کنیم . اینکار توسط نرم افزار DreamWeaver CS5 بسیار ساده می باشد و نیازی نیست که دستی کد مورد نظر را تایپ کنید .ایجاد جدول با نرم افزار DreamWeaver CS5کافیست در قسمت که می خواهید جدول ایجاد شود بر روی نوار ابزار Insert کلیک کرده و آیکون Table را انتخاب کنید .
گزینه هایی که در این ویزارد وجود دارد به شرح زیر می باشد :
Rows : برای ایجاد سطر به تعداد دلخواه استفاده می شود
Columns : برای ایجاد ستون به تعداد دلخواه استفاد می شود .
Table width : عرض جدول را می توانید با دو واحد اندازه گیری پیکسل و درصد مشخص کنید .
Border thickness : ضخامت خط جدول های کشیده شده تعیین می کند .
Cell Padding : فاصله محتوای جدول از دیواره را می توانید در این کادر تعیین کنید .
Cell spacing :مشخص کننده سلوهای جدول از یکدیگر بوسیله این کادر تعیین می شود .
Header : در این قسمت نامی که در کادر Caption وارد می کنید بسته به 4 گزینه مشخص شده نمایش داده می شود
Summary : یک مشخصه برای تگ table می باشد و توضیحاتی در مورد محتویات جدول ارائه میدهد .

​

همانطور که مشاهده کردید به راحتی یک جدول با تعداد سطر و ستون دلخواه ایجاد شد .دقت داشته باشید که تنظیمات مربوط به ظاهر جدول در درس های دوره پیشرفته به صورت کاملا تصویر در قالب طراحی قالب آموزش داده می شود و در این بخش فقط نحوه ایجاد جدول آموزش داده شد .

منبع

 

[P O U R I A]

ایجاد فرم در DreamWeaver CS5

ایجاد فرم در DreamWeaver CS5

اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر وارد شده است به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)، دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و ... باشد.
در این قسمت قصد دارم نحوه کار با فورم در نرم افزار DreamWeaver CS5 را به طور کامل برای شما آموزش بدهم .
همانطور که میدانید فورم ها فقط اطلاعات را از بازدید کننده دریافت و بعد به یک صفحه که کار پردازش بر روی فورم ها را انجام میدهد ارسال می کنند تا صحت اطلاعات توسط صفحه مقصد تائید شود .در این بخش از آموزش من فقط نحوه ایجاد عناصر در فورم را توضیح میدهم و تنظیمات مربوط به شکل ظاهری و کادر بندی در بخش پیشرفته آموزش داده می شود .
نرم افزار DreamWeaver CS5 را اجرا کنید .
ایجاد Form در نرم افزار DreamWeaver CS5اضافه کردن form در نرم افزار DreamWeaver CS5 بسیار راحت می باشد و نیازی نیست که دستی کد مورد نظر خودمان را وارد کنیم . در تب Insert بر روی کلید Forms کلیک کنید . ابتدا باید تگ form را بوسیله آیکون form بر روی صفحه ایجاد تا عناصری که می خواهیم در آن قرار بگیرد ، مشخص شود . دقت کنید که بعد از کلیک بر روی کلید نام برده شده یک کادر نقطه چین به صفحه سفید من اضافه می شود .

​

دقت داشته باشید که تمام قسمت هایی که در HTML ایجاد می شود باید بوسیله سلکتور ID . Class نشانه گذاری شود تا در مراحل بعدی بتوانیم شکل ظاهری قسمت های مشخص شده را با CSS تغییر بدهیم . بعد از اینکه تگ form را به صفحه مورد نظر اضافه کردید در قسمت form ID یک سلکتور یا نشانه در کادر مشخص شده تایپ کنید

​

ایجاد یک Text Field در DreamWeaver CS5
برای دریافت اطلاعات از کاربر معمولا از فیلدهای متنی زیاد استفاده می شود . روش ایجاد چنین فرمی در دریم ویور بسیار ساده می باشد .
روی آیکون Text Field در تب Insert کلیک کنید . یک ویزارد به شکل زیر باز می شود
ID : متن وارد شده در تگ input اضافه می شود .
Label : نامی که می خواهید در کنار کادر نمایش داده شود را وارد کنید .
position : در این قسمت مشخص می کنید که لیبل قبل یا بعد از کادر نمایش داده شود .
tab index : تعداد فشردن کلید tab از روی کیبرد برای جابجایی و حرکت بین کادرها را مشخص می کند .

​

کد ایجاد شده به صورت اتوماتیک را در تصویر زیر مشاهده کنید .

​

بعد از ایجاد فرم متنی روی کادر مستطیل شکل کلیک کنید . نوار تنظیمات در پنل properties نمایش داده می شود که دارای مشخصات زیر می باشد . دقت داشته باشید که این قسمتها به صورت کامل در درس های بعدی به صورت تجربی و عملی آموزش داده می شود .
TextField : می توانید یک ID برای فرم متنی نام در کادر مشخص شده وارد کنید .
Char width : اندازه کادر متنی بر اساس کارکترهای وارد شده مشخص می شود .
Max chars : در این کادر می توانید حداکثر کارکتر وارد شده در این کادر را وارد کنید .
در قسمت Type می توانید در صورتیکه می خواهید کارکترهای وارد شده به صورت مخفی یا نمایش داده نشود می توانید Password را انتخاب کنید .

​

ایجاد List Menu در DreamWeaver CS5
تا به حال سایتهای زیادی را دیده اید که هنگام ثبت نام یا پرکردن یک فرم دارای چند لیست منو می باشد که می توانید استان مورد نظر را از بین استانهای مختلف انتخاب کنید . روش ایجاد چنین لیستی بسیار ساده می باشد . کافیست بر روی آیکون List menu در تب insert کلیک کرده و لیست مورد نظر را به صفحه اضافه کنید .
من ابتدا بر روی آیکون مورد نظر کلیک میکنم . ویزارد باز شده همانند ویزارد قبلی می باشد

​

حال برای ایجاد کشورهای مورد نظر باید از قسمت properties استفاده کنیم .دقت داشته باشید که شما هر لیست دیگری با نام دلخواه در این قسمت می توانید ایجاد کنید .در پنل Properties بر روی کلید List Values کلیک کنید . یک کادر نمایش داده می شود
item label : در این قسمت بعد از وارد کردن نام مورد نظر توسط کاربر در مرورگر نمایش داده می شود
Value : مقداری است که برای صفحه پردازگشر ارسال می شود .

​

همانطور که مشاهده می کنید لیست منو ما ایجاد شد

​

در قسمت Initilly selected می توانید یک کشور را به عنوان کشور پیش فرض انتخاب کنید .

​

ایجاد Check Box در DreamWeaver CS5
برای ایجاد چک باکس در پنل Insert بر روی کلید Checkbox کلیک کنید . این کادر هم مثل کادرهای دیگه که در مراحل قبلی توضیح داده ام می باشد و از توضیح اضافی پرهیز می کنم .

​

به همین راحتی چک باکس را با نرم افزار دریم ویور ایجاد کردم .

منبع​

 

[P O U R I A]

ایجاد فرم در DreamWeaver CS5 - قسمت 2

ایجاد فرم در DreamWeaver CS5 - قسمت 2

ایجاد Radio Button در نرم افزار DreamWeaver CS5
برای ایجاد دکمه های رادویی نیز مثل بقیه عناصر فرم به راحتی می توانیم با چند کلیک Radio Button مورد نظر را طراحی کنیم . روش کار هم به این صورت می باشد که شما بوسیله دریم ویور می توانید با دو آیکون Radio Group و Radio Button به صورت تکی یا گروهی فرم خودتان را ایجاد کنیدکلیدهای Radio Button دارای 3 مقدار می باشد که در ادامه هر 3 را برای شما توضیح میدهم .type :
برای اینکه یک دکمه رادیو ایجاد کنیم باید مقدار این شناسه را radio قرار دهیم.

name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.value :
این شناسه در مورد در مورد دکمه رادیو مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.​

برای ایجاد Radio Button در فرم قالب یا پروژه از پنل insert بر روی Radio Group کلیک کنید . در کادر محاوره ای باز شده با توجه به توضیحات بالا من 3 کلید را ایجاد میکنم .

​

ایجاد یک Text Area در DreamWeaver CS5
همیشه یک چک باکس در فرم ها وجود دارد که بتوانیم متن بیشتر یا به قول معروف یک کامنت را در آن تایپ کرده و همراه با فرم برای پشتیبانی یا مدیریت سایت ارسال کنیم . در این گونه موارد از Text Area استفاده می شود .
در پنل insert بر روی آیکون Text Area کلیک کرده و یک نام را برای فرم خود انتخاب کنید .

​

همانطور که مشاهده کردید به راحتی یک کادر برای ایجاد کامنت ایجاد شد .در پایان باید فرم کامل شده به وسیله کلید ثبت یا همان Submit به صفحه پردازش ارسال شود . برای ایجاد کلید Submit در پنل insert بر روی کلید Button کلیک کنید . در این قسمت نیازی به نوشتن Label وجود ندارد . در صورتیکه بخواهید نام کلید را تغییر بدهید باید بعد از ایجاد کلید ، روی آن کلیک کرده و در پنل properties در کارد Value عبارت مورد نظر را تایپ کنید .

​

 

[P O U R I A]

آموزش طراحی کارت ویزیت آژانس مسافرتی با CorelDRAW - قسمت 1

آموزش طراحی کارت ویزیت آژانس مسافرتی با CorelDRAW - قسمت 1

نرم افزارکرل را اجرا کنید .

1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

2. ابزار Rectangle را انتخاب کرده و یک کادر هم اندازه پس زمینه بکشید .

​

3. ابزار Bezier را انتخاب کرده و یک سری کادر همانند تصویر زیر بکشید .دقت داشته باشید که بعد از کشیدن کادرها من با استفاده از ابزارShape به کادرهای کشیده شده انحنا میدهم .

​

4. هر 4 کادر را ترسیم کردم . نوبت میرسه به تغییر رنگ کادرهای کشیده شده . هر کادر را به صورت مستقل انتخاب کرده و بر روی Uniform Fill کلیک و درصد رنگی مشخص شده با کادر قرمز را جایگزین رنگ پیش فرض کنید .

​

 

[P O U R I A]

آموزش طراحی کارت ویزیت آژانس مسافرتی با CorelDRAW - قسمت 2

آموزش طراحی کارت ویزیت آژانس مسافرتی با CorelDRAW - قسمت 2

5. در این مرحله با ابزار Ellipse یک دایره با رنگ سفید کشیده سپس با استفاده از ابزار drop Shadow یک سایه به آن میدهم . به تصویر زیر دقت کنید .(برای اینکه دایره زیر کادرهای قبلی که کشیده ایم قرار بگیرد باید پشت سرهم کلیدهای Ctrl+Page down را از روی کیبرد بفشارید )

​

6 . در این مرحله با استفاده از ابزار Bezier شروع به کشیدن یک سری کادر میکنم . بعد از کشیدن کادرها برای تغییر رنگ از ابزار Funtain Fill استفاده میکنم .

​

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

​

8. یک کادر سفید رنگ با ابزار Rectangle کشیده و یک متن را داخل آن تایپ میکنم

​

 

[P O U R I A]

آموزش طراحی یک کارت ویزیت دو طرفه با CorelDRAW - قسمت اول

آموزش طراحی یک کارت ویزیت دو طرفه با CorelDRAW - قسمت اول

نرم افزارکرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

2. ابزار Rectangle را انتخاب کرده و یک کادر هم اندازه صفحه ایجاد شده بکشید .

​

3. بعد از کشیدن کادر اول ، یکبار دیگر ابزار Rectangle را انتخاب کرده و یک کادر دیگه با مشخصاتی که در تصویر زیر مشخص کرده ام بکشید . برای تغییر رنگ کادر کشیده شده از ابزار uniform Fill استفاده میکنم

​

4. در مرحله بعدی با ابزار Ellipse شش دایره سفید رنگ همانند تصویر زیر میکشم

​

5. یک دایره کوچکتر از دایره اصلی میکشم . سپس اندازه آن را برابر با 96 درصد دایره اصلی قرار میدهم .رنگ دایره را تغییر دادم تا بهتر متوجه بشوید

​

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

​

حالا برای اینکه خط کشیده شده به صورت نقطه چین در بیاد در همان کادر باز شده یکی از خطهای زیر مجموعه Style را انتخاب میکنم .

​

حالا باید خط نقطه چین را انتخاب و از روی کیبرد با فشردن کلیدهای CTRL+D پنج کپی بگیریم

​

6. ابزار تایپ را انتخاب و اعداد 1 تا شش را داخل دایره ها تایپ کنید. یک متن را هم زیر کارت ویزیت تایپ میکنم

​

 

[P O U R I A]

آموزش طراحی یک کارت ویزیت دو طرفه با CorelDRAW - قسمت دوم

آموزش طراحی یک کارت ویزیت دو طرفه با CorelDRAW - قسمت دوم

7. در مرحله بعدی باید با استفاده از ابزار Bezier یک کادر همانند تصویر زیر کشیده سپس شکل آن را با ابزار Shape Tool تغییر بدهیم . دقت داشته باشید که ممکن است برای بار اول موفق به کشیدن چنین کادری نشوید ولی سعی کنید شکل اول را بدون هیچ حساسیتی کشیده و سپس با استفاده از ابزار Shape Tool تغییرات را اعمال کنید

​

8. بعد از کامل شدن شکل رنگ آن را به طوسی تغییر داده و با فشردن کلیدهای Ctrl+D یک کپی می گیرم و در قسمت مقابل قرار میدهم

​

9. در مرحله آخر طراحی روی کارت ویزیت ، باید رنگ پس زمینه را تغییر بدهیم برای انجام اینکار ابتدا ابزار Texture Fill را انتخاب و همانند تصویر زیر تنظیمات پیش فرض را تغییر بدهید

​

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

​

در مرحله بعدی از بین اشکال پیش فرض Callout Shape یک شکل را همانند تصویر زیر انتخاب و روی کارت قرار میدهم

​

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

​

برای دانلود فایل لایه باز کرل به همراه PDF آموزش کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی کارت ویزیت LUPA با نرم افزار CorelDRAW

آموزش طراحی کارت ویزیت LUPA با نرم افزار CorelDRAW

نرم افزارکرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

2. یک کادر هم اندازه پس زمینه ایجاد شده با ابزار Rectangle میکشم چون می خواهم طیف رنگی مورد نظر را به کادر کشیده شده نسبت بدهم .

​

3. در مرحله بعدی ابتدا کادر را انتخاب کرده ، سپس ابزار Funtain Fill را انتخاب میکنم تا رنگ پیش فرض را تغییر بدهم . به تصاویر زیر دقت کنید متوجه مراحل انجام شده می شوید

​

4. خیلی وقتها در طراحی شما نوع فونتی که در ذهن خودتان برای طراحی دارید را نمی توانید از یک فونت پیش فرض استفاده کنید ،خوب چکاری باید انجام داد ؟ در این گونه موقع باید نوع فونت را در کرل طراحی کنیم یعنی بوسیله ابزارهایی که در اختیار ما قرار میدهد به فونت دلخواه برسیم . بسیار خوب برای اینکه دقیق متوجه منظور من بشید به تصاویر زیر دقت کنید .
متن خودم را بدون هیچ حساسیتی با ابزار Bezier ایجاد میکنم و در مرحله بعدی بوسیله Shape Tool کمی لبه های کادر را انحنا میدم .

​

5. حالا برای تغییر رنگ هر قسمت از متن، تک تک هر کدام را انتخاب کرده و بوسیه ابزار Funtain Fill رنگ آن را تغییر میدهم .

​

 

[P O U R I A]

آموزش طراحی کارت ویزیت LUPA با نرم افزار CorelDRAW - قسمت دوم

آموزش طراحی کارت ویزیت LUPA با نرم افزار CorelDRAW - قسمت دوم

برای کلمه دوم یک سایه ایجاد میکنم . به تصاویر زیر دقت کنید

​

نوبت میرسه به حرف سوم

​

 

[P O U R I A]

آموزش طراحی کارت ویزیت LUPA با نرم افزار CorelDRAW - قسمت سوم

آموزش طراحی کارت ویزیت LUPA با نرم افزار CorelDRAW - قسمت سوم

حرف آخر

​

من دو سایه یکی به حرف اول یکی به حرف آخر ، نسبت میدهم

​

نوبت میرسه به طراحی لوگو
برای انجام اینکار ابزار Bezier را انتخاب کرده و یک کادر همانند تصویر زیر بکشید سپس با استفاده از ابزار Shape Tool کمی شکل ظاهری کادر را تغییر داده و سپس رنگ لوگو را با استفاده از Funtain Fill تغییر میدهم .

​

شکل دوم

​

من با ابزار تایپ یک متن زیر lupa تایپ میکنم

​

در مرحله آخر هم با استفاده از ابزار Bezier یک خط سفید همراه با آدرس سایت و شماره تماس تایپ میکنم

​

برای دانلود فایل لایه باز کرل به همراه PDF آموزش کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی کارت ویزیت Social با نرم افزار CorelDRAW

آموزش طراحی کارت ویزیت Social با نرم افزار CorelDRAW

نرم افزارکرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

2. یک کادر هم اندازه پس زمینه ایجاد شده با ابزار Rectangle میکشم چون می خواهم طیف رنگی مورد نظر را به کادر کشیده شده نسبت بدهم .

​

3. در مرحله بعدی ابتدا کادر را انتخاب کرده ، سپس ابزار Funtain Fill را انتخاب میکنم تا رنگ پیش فرض را تغییر بدهم . به تصاویر زیر دقت کنید متوجه مراحل انجام شده می شوید

​

 

[P O U R I A]

آموزش طراحی کارت ویزیت Social با نرم افزار CorelDRAW - قسمت دوم

آموزش طراحی کارت ویزیت Social با نرم افزار CorelDRAW - قسمت دوم

4. ابزار Bezier را انتخاب کرده و شروع به کشیدن یک سری کادر همانند تصویر زیر میکنم . بعد از کشیدن کادرها باید با استفاده از ابزار Uniform Fill رنگ کادرها را تغییر بدهیم .برای تغییر رنگ من به ترتیب تک تک کادرها را انتخاب میکنم و درصد رنگی #59120F را در کادری که با کادر قرمز مشخص کرده ام وارد میکنم

​

5. ابزار Bezier را انتخاب کرده و یک کادر همانند تصویر زیر میکشم سپس با استفاده از ابزار Shape Tool کمی شکل ظاهری کادر کشیده شده را تغییر میدهم

​

6. برای تغییر رنگ کادر کشیده شده ابزار Uniform Fill را انتخاب کرده و اعداد مشخص شده را در کادر وارد کنید

​

7. ابزار Rectangle را انتخاب کرده و یک کادر با مشخصاتی که در تصاویر زیر قرار داده ام بکشید

​

8. با ابزار تایپ یک متن را به صورت دلخواه داخل کادر تایپ میکنم

​

9. ابزار Star را انتخاب کرده و چند ستاره همانند تصویر زیر بالای کادر کشیده شده ترسیم میکنم

​

من یک ستاره میکشم و بعد از آن با فشردن کلیدهای Ctrl+D چند کپی میگیرم و با تغییر اندازه در قسمت های مختلف قرار میدهم . برای ایجاد سایه هم باز یک کپی گرفته و پشت ستاره مورد نظر قرار میدهم . رنگ ستاره ها را هم به طور دلخواه می توانید قرار بدهید

​

طراحی پشت کارت ویزیت
برای طراحی پشت کارت مراحل 1 تا 4 را پشت سرهم تکرار کنید .سپس برای تغییر رنگ Funtain Fill را انتخاب و همانند تصویر زیر درصد رنگی مشخص شده را در کادر مورد نظر وارد کنید .

​

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

​

برای دانلود فایل لایه باز کرل به همراه PDF آموزش کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی کارت ویزیت RAMPI با نرم افزار CorelDRAW

آموزش طراحی کارت ویزیت RAMPI با نرم افزار CorelDRAW

نرم افزارکرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

2. یک کادر هم اندازه پس زمینه ایجاد شده با ابزار Rectangleمیکشم چون می خواهم طیف رنگی مورد نظر را به کادر کشیده شده نسبت بدهم .

​

3. در مرحله بعدی ابتدا کادر را انتخاب کرده ، سپس ابزار Funtain Fill را انتخاب میکنم تا رنگ پیش فرض را تغییر بدهم . به تصاویر زیر دقت کنید متوجه مراحل انجام شده می شوید

​

4. ابزار Bezier را انتخاب کرده و یک کادر همانند تصویر زیر میکشم

​

5. برای تغییر شکل ظاهری کادر کشیده شده از ابزار Shape Tool استفاده میکنم

​

 

[P O U R I A]

آموزش طراحی کارت ویزیت RAMPI با نرم افزار CorelDRAW - قسمت دوم

آموزش طراحی کارت ویزیت RAMPI با نرم افزار CorelDRAW - قسمت دوم

6. برای تغییر رنگ کادرهای کشیده شده از ابزار Uniform fill استفاده میکنم . به تصاویر زیر دقت کنید نحوه تغییر رنگ مشخص شده است

​

7. با ابزار Ellipse یک دایره همانند تصویر زیر میکشم . برای تغییر رنگ هم از درصد رنگی که در تصویر زیر قرار داده ام استفاده کنید .

​

8. در این مرحله یک عکس را با فشردن کلیدهای Ctrl+I وارد کرل میکنم و درست روی تصویر قرار میدهم . یکسری کادر هم برای اینکه کمی شلوغ تر بشه با ابزار Bezier میکشم

​

9. در مرحله آخر هم ابزار تایپرا انتخاب کرده و یک متن را به دلخواه بر روی کارت ویزیت تایپ میکنم

​

برای دانلود فایل PDF آموزش +CDR کلیک کنید || رمز فایل : www.asarayan.comلینک دانلود :سرورمستقیم​

 

[P O U R I A]

ساخت یک پس زمینه رنگی با CorelDRAW - قسمت اول

ساخت یک پس زمینه رنگی با CorelDRAW - قسمت اول

نرم افزار کرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

2. بسیار خوب بعد از ایجاد یک صفحه جدید، من با ابزار ellipse یک دایره همانند تصویر زیر میکشم .

​

3. در مرحله بعدی ابزار Shape Tool را انتخاب و روی دایره کشیده شده کلیک کنید . دقت داشته باشید که در نوار تنظیمات بالای صفحه باید روی آیکون Convert To Carve کلیک کنید .

​

4.بعد از انتخاب گزینه Convert To Carve همانند تصویر زیر یک سری نقاط روی دایره ایجاد کنید . من بعد از ایجاد کردن نقاط دلخواه 4 نقطه ترسیمی دایره را حذف کردم .(برای اضافه و حذف نقاط می توانید از تنظیمات بالای صفحه که با دو آیکون سبز و قرمز مشخص شده است استفاده کنید . )

​

5. برای تغییر شکل باید روی هر نقطه کلیک کنید و بعد از آن در نوار ابزار بالای صفحه گزینه Convert To Carve را انتخاب کنید تا دو اهرم در طرفین نقطه مورد نظر فعال شود .سپس می توانید با حرکت دادن اهرم ها به شکل دلخواه برسید

​

من مرحله به مرحله به لبه های کار کمی انحنا میدهم

​

سعی کنید این مرحله را به دقت و اگر موفق نشدید چندین بار تکرار کنید تا به شکل دلخواه برسید
6. برای تغییر رنگ کادر کشیده شده گزینه Uniform Fill را انتخاب کرده و درصد رنگی مورد نظر را وارد و در مرحله بعد بر روی کلید Ok کلیک کنید .

​

​

​

برای ایجاد یک سایه زیر شکل کشیده شده ، ابتدا با زدن کلیدهای Ctrl+D یک کپی بگیرید .
نکته : برای اینکه لایه مورد نظرتون پایین تر یا بالاتر از یک لایه انتخاب شده قرار بگیره باید کلید Ctrl را از روی کیبرد پایین نگه دارید و کلیدهای Page down برای قرار دادن یک شکل زیر شکل دیگر و کلید Page Up برای قرار دادن یک شکل بالای شکل انتخابی استفاده کنید . این دو کلید هم وسط کیبرد و جزو 6 کلید بالای جهت ها یا فلشها قرار گرفته است .
من برای تغییر رنگ لایه زیری از پالت پیش فرض رنگها ، رنگ سفید را انتخاب کرده ام و خط دور آن را هم با کلیک چپ بر روی ضربدر بالای پالت رنگها حذف نمودم

​

7. برای ایجاد سایه ابزار Drop Shadow را انتخاب و تنظیمات آن را همانند تصویر زیر قرار بدهید .با کادر قرمز مشخص شده است

​

8. تا این مرحله که سخت نبوده . برای کپی گرفتن از دو شکل کشیده شده ابتدا از بیرون به طرف داخل کادر درگ کنید تا هر دو کادر کشیده شده انتخاب شود سپس کلید Ctrl+D را بزنید تا یک کپی از دو کادر گرفته شود

​

 

[P O U R I A]

ساخت یک پس زمینه رنگی با CorelDRAW - قسمت دوم

ساخت یک پس زمینه رنگی با CorelDRAW - قسمت دوم

کمی اندازه آن را کوچکتر و رنگ لایه رویی را با توجه به تصویر زیر تغییر دهید. رنگ بنفش را از پالت رنگ پیش فرض انتخاب کنید

​

​

مرحله اصلی را انجام دادیم نوبت میرسه به یک سری خورده کاری که پشت سرهم انجام میدهم . شکل ستاره را انتخاب کنید و همانند تصویر زیر وسط گل دوم قرار بدهید

​

در مرحله بعدی با استفاده از ابزار ellipse یک دایره بکشید .

​

ابزار Distort را انتخاب کنید . این ابزار دارای 5 حالت نمایش می باشد . من به ترتیب 3 حالت اول را انتخاب میکنم. روش کار این ابزار هم به این صورت می باشد که کافیست از طرف بیرون دایره به طرف داخل یا طرفین درگ کنید تا شکل شما تغییر کند

​

رنگهای انتخابی رنگهای پیش فرض پالت رنگ می باشد .

​

حالت نمایش دوم را انتخاب میکنممن تنظیمات پیش فرض هر حالت را تغییر میدهم

​

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

​

یک کپی بگیرید و با رنگ دلخواه بالای صفحه قرار دهیدخط دور اشکال را هم می توانید حذف کنید .

​

من یک دایره دیگر میکشم و در مرحله بعدی با انتخاب گزینه Outline Pen نوع خط آن را تغییر میدهم

​

تغییرات با کادر قرمز مشخص شده است

​

​

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

​

من ضخامت هر سه خط کشیده شده را به ترتیب 2.1.5.1 قرار دادم.کافیه روی هر دایره کلیک و از تنظیمات بالای صفحه ضخامت خطوط را تغییر بدهیداز دایره های تکی هم استفاده کردم . به تصویر زیر دقت کنید که چگونه دایره ها را در جاهای مختلف قرار داده ام

​

در مرحله بعدی از تمام شکل هایی که درست کرده ام با تغییر اندازه در قسمت های مختلف با رنگبندی متفاوت استفاده میکنم

​

در مرحله آخر هم با انتخاب ابزار Text Tool یک متن را به دلخواه تایپ میکنم

​

 

[P O U R I A]

طراحی پس زمینه hello word با CorelDRAW - قسمت اول

طراحی پس زمینه hello word با CorelDRAW - قسمت اول

نرم افزار کرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

1. ابعاد صفحه را با توجه به تصویر زیر برابر با 900×1600 قرار دهید . با کادر قرمز مشخص کرده ام​

​

2. برای تغییر رنگ پس زمینه که ایجاد کرده ایم از منوی Layoutدر بالای صفحه گزینه Page Background را انتخاب کرده و درصد رنگی که با کادر قرمز مشخص کرده ام در کادرهای مشخص شده جایگزین کنید .​

​

3. یک خط به صورت زیر با ابزار Bezier بکشید . کمی انحنا به خط کشیده شده بدهید .​

​

4.بسیار خوب اصلی ترین قسمت طراحی شروع می شود . به تصاویر زیر دقت کنید .من ابتدا یک کادر خیلی ساده با ابزار Bezier میکشم و سپس 2 کپی دیگر با زدن کلیدهای Ctrl+D گرفته و در قسمت دیگر قرار میدهم . مرحله به مرحله برای شما عکس میگیرم تا به مشکلی برنخورید
رنگ کادر کشیده شده برای شما مهم نباشد

​

رنگ کادرهای کشیده شده را همانند تصویر زیر تغییر دهید . تنظیمات با کادر قرمز مشخص شده است​

​

5. شاید این مرحله کمی برای شما در ابتدا سخت باشد اما با کمی تمرین به شکل دلخواه میرسید . یک کادر ساده همانند تصویر زیر با ابزار Bezier بکشید .​

​

6.حالا با استفاده از ابزار Shape Tool کادر مورد نظر را انتخاب میکنم و به کاری که کشیده شده شکل دلخواه را میدهم .​

​

 

[P O U R I A]

طراحی پس زمینه hello word با CorelDRAW - قسمت دوم

طراحی پس زمینه hello word با CorelDRAW - قسمت دوم

7. برای تغییر رنگ هم ابزار Uniform Fill را انتخاب و درصد رنگی مشخص شده را جایگزین کنید . برای حذف خط دور کادر کشیده شده روی ضربدر بالای پالت رنگ کلیک راست کنید .​

​

8. پشت سرهم با ابزار Ellipse 3 دایره بکشید برای تغییر رنگ هر کدام هم از ابزار Uniform Fill استفاده کنید​

​

9. یک کادر دیگه با ابزار Bezier همانند تصویر زیر بکشید . رنگ کادر کشیده شده هم برابر با دایره کوچک داخل چشم قرار دهید​

​

10.در مرحله آخر هم یک بیضی با ابزار Ellipse میکشم و یک مثلث کوچک با استفاده از ابزار Bezier به آن اضافه میکنیم . درصد رنگی هم در تصویر زیر مشخص شده است .​

​

11. در مرحله آخر هم با استفاده از ابزار تایپ Text Tool یک متن را به دلخواه تایپ کنید .امیدوارم آموزش خوبی بوده باشد . من جهت چشم های جغد را هم تغییر دادم​

​

برای دانلود فایل Corel کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

طراحی پس زمینه روز برفی با CorelDRAW - قسمت اول

طراحی پس زمینه روز برفی با CorelDRAW - قسمت اول

نرم افزارکرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

1. ابعاد صفحه را با توجه به تصویر زیر برابر با 900×1600 قرار دهید . با کادر قرمز مشخص کرده ام

​

2. برای تغییر رنگ پس زمینه ابتدا یک کادر هم اندازه صفحه با ابزار Rectangle بکشید سپس ابزار Funtain Fill را انتخاب کرده و همانند تصویر زیر تغییرات را اعمال کنید .(در تصاویر زیر قسمت هایی که باید مورد استفاده قرار بگیرد را با رنگ قرمز مشخص کرده ام ) دقت داشته باشید برای این کادر را ایجاد کردیم چون می خواهیم از یک طیف رنگی استفاده کنیم .

​

3. بعد از اینکه رنگ کادر را تغییر دادید ابزار Ellipse را انتخاب کرده و یک سری دایره همانند تصویر زیر بکشید . برای راحتی کار دایره های بزرگ را با اندازه بزرگتر ترسیم کنید
دایره اول را بزرگ میکشم . برای تغییر رنگ هم که باید از پالت رنگی ، رنپ سفید را انتخاب یکبار کلیک راست و بار دوم کلیک چپ روی رنگ سفید کنید تا هم خط دور کادر هم داخل آن رنگش تغییر کند .

​

 

[P O U R I A]

مرحله بالا را اینبار با دایره های کوچکتر ولی با همان رنگ تکرار میکنم . سعی میکنم در مرحله به مرحله برای شما عکس بگیرم تا سوالی برای شما در حین انجام تمرین پیش نیاید . رنگ دایره های اول را تغییر دادم تا متوجه بشوید که چگونه دایره ها ترسیم می شوند . سعی کنید خیلی راحت این مرحله را انجام بدید نیاز نیست حتما مثل کادر من دایره های خودتان را بکشید .

​

4. بسیار خوب امیدوارم خسته نشده باشید . در مرحله بعدی باید با انتخاب ابزار Bezierیک کادر همانند تصویر زیر بکشید . بدون هیچ دقتی درخت را بکشید

​

5. در مرحله بعدی با انتخاب ابزار Shape Tool باید روی نقاط ترسیمی کلیک کرده تا نقاط ترسیمی فعال شود . سپس با توجه به تصاویر زیر کمی کادرها را انحنا دهید . من مرحله به مرحله برای شما عکس میگیرم تا سوالی برای شما پیش نیاد .نقاطی که باد آنها را انتخاب کنید با کادر قرمز مشخص کرده ام .

​

6. در مرحله آخر هم باید رنگ درخت را با توجه به تصویر زیر تغییر بدهیم .

​

برای تغییر رنگ خط دور کادر درخت هم پایین صفحه روی گزینه ای که مشخص کرده ام دابل کلیک کرده و درصد رنگی مشخص شده را وارد کنید

​

7. در مرحله آخر هم با استفاده از ابزار تایپ Text Toolیک متن به دلخواه تایپ کنید .

​

برای دانلود فایل Corel کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

طراحی آیکون دفتر با نرم افزار CorelDRAW - قسمت اول

طراحی آیکون دفتر با نرم افزار CorelDRAW - قسمت اول

نرم افزارکرل را اجرا کنید .
1.برای ایجاد یک صفحه جدید ، از نوار ابزار بالای صفحه منوی Tools را انتخاب و بر روی گزینه New کلیک کنید .

​

1. ابعاد صفحه را با توجه به تصویر زیر برابر با 900×1600 قرار دهید . با کادر قرمز مشخص کرده ام

​

2. ابزار Rectangle را انتخاب کرده و یک کادر همانند تصویر زیر بکشید .

​

3. برای گرد کردن لبه های کادر کشیده شده بر روی آن کلیک کرده و در نوار تنظیمات بالای صفحه عدد 1 را وارد کنید .

​

برای تغییر رنگ ابزار Funtain Fillرا انتخاب کرده و همانند تصویر زیر تغییرات را اعمال کنید .(در تصاویر زیر قسمت هایی که باید مورد استفاده قرار بگیرد را با رنگ قرمز مشخص کرده ام ) دقت داشته باشید برای این کادر را ایجاد کردیم چون می خواهیم از یک طیف رنگی استفاده کنیم .​

​

روی هر دو مربع یک بار کلیک کرده ، سپس بر روی کلید Other در سمت راست ویزارد باز شده کلیک و درصد رنگی که با کادر قرمز مشخص کرده ام را وارد کنید .

​

در مرحله بعدی طیف رنگی تیره را با وارد کردن و تغییر عدد پیش فرض گزینه Angle تغییر میدهم .

​

4. ابزار Bezier را انتخاب کرده و یک کادر همانند تصویر زیر بکشید .

​

برای تغییر رنگ کادر کشیده شده باید بر روی دو آیکونی که در تصویر زیر مشاهده می کنید دابل کلیک کرده و در صفحه باز شده درصد مشخص شده را وارد نمایید .(محل قرارگیری آیکون ها پایین صفحه سمت راست می باشد )

​

5. ابزار Ellipse را انتخاب کرده و چند دایره مشکی همانند تصویر زیر بکشید .

​

6. با ابزار Rectangle یک کادر مستطیل شکل میکشم

​

7. روی کادر کشیده شده کلیک کرده و تنظیمات گزینه هایی که با کادر قرمز مشخص کرده ام را تغییر بدهید

​

8. برای تغییر رنگ کادر کشیده شده از تصاویر زیر کمک بگیرید .

​

 

[P O U R I A]

طراحی آیکون دفتر با نرم افزار CorelDRAW - قسمت دوم

طراحی آیکون دفتر با نرم افزار CorelDRAW - قسمت دوم

9. بعد از کشیدن کادر مورد نظر ، با فشردن کلید های Ctrl+D چند کپی از کادر مورد نظر بگیرید و روی تمام نقاط مشکی قرار بدهید

​

10. در مرحله بعدی ابزار تایپ را انتخاب کرده و یک متن را به دلخواه تایپ میکنم . برای چرخش متن در سمت عمودی هم روی وسط کادر متن کلیک کرده سپس کادر را بچرخانید

​

11. در مرحله آخر سه کادر با ابزار Rectangle کشیده و رنگ هر سه کادر را تغییر میدهم . دقت داشته باشید که برای اینکه هر سه کادر زیر کادر اصلی قرار بگیرید باید کلیدهای Shift+Page Down از روی کیبرد را بفشارید .

​

برای دانلود فایل لایه باز کرل به همراه PDF آموزش کلیک کنید || لینک دانلود :سرورمستقیم​