آموزش صفر تا صد نرم افزار دریم ویور (فیلم فارسی+ PDF رایگان)
در ادامه آموزش های کاربردی نرم افزار دریم ویور، بعد از حدود ۱ هفته گشت و گذار در اینترنت و از بین هزاران ویدیو، یک مجموعه بی نقص و کامل ویدیویی را برای یادگیری سریع این نرم افزار گلچین کرده ایم. این مجموعه کامل برای شروع از صفر و برای همه سطوح مناسب می باشد. بعد از آن نیز بهترین جزوه PDF فارسی موجود در اینترنت را جهت تکمیل یادگیری می توانید دانلود کنید.
Adobe Dreamweaver نرم‌افزاری برای طراحی، کدنویسی و مدیریت وب‌سایت است که هم محیط نوشتن کد دارد و هم امکان مشاهده نتیجه طراحی را فراهم می‌کند. برای یادگیری Dreamweaver نباید فقط محل ابزارها را حفظ کنید؛ بهتر است هم‌زمان مفاهیم اصلی HTML، CSS، ساختار فایل‌های سایت، لینک‌ها، تصاویر، طراحی واکنش‌گرا و انتشار سایت روی هاست را نیز یاد بگیرید.
تا آوریل ۲۰۲۶، جدیدترین نسخه Dreamweaver نسخه 21.8 است. Adobe در این نسخه علاوه بر رفع اشکالات و به‌روزرسانی کتابخانه‌های داخلی، قابلیت‌های Server Behaviors و Database Bindings را نیز در خود برنامه ارائه کرده است.
دریم ویور دقیقاً چه کاری انجام می‌دهد؟
Dreamweaver را می‌توان ترکیبی از ویرایشگر کد، ابزار طراحی وب و مدیر فایل‌های سایت دانست. مثلاً می‌توانید یک صفحه HTML بسازید، ظاهر آن را با CSS تغییر دهید، تصاویر را اضافه کنید، نتیجه را در مرورگر ببینید و در پایان فایل‌ها را مستقیماً روی هاست آپلود کنید.
بنابراین مسیر کلی کار معمولاً چنین است:
ساخت سایت → ایجاد صفحات → نوشتن HTML → طراحی با CSS → افزودن تصاویر و لینک‌ها → تست → اتصال به هاست → انتشار
Adobe نیز Dreamweaver را ابزاری برای طراحی، کدنویسی و مدیریت وب‌سایت معرفی می‌کند.
قبل از Dreamweaver چه چیزهایی باید بدانیم؟
برای شروع لازم نیست برنامه‌نویس حرفه‌ای باشید، اما بهتر است تفاوت سه فناوری اصلی وب را بدانید.
| فناوری | وظیفه |
|---|---|
| HTML | ساختار و محتوای صفحه |
| CSS | ظاهر، رنگ، اندازه و چیدمان |
| JavaScript | رفتار و امکانات تعاملی |
| Dreamweaver | محیطی برای نوشتن و مدیریت این کدها |
مثلاً HTML مشخص می‌کند که صفحه دارای عنوان و تصویر است، CSS تعیین می‌کند عنوان چه رنگ و اندازه‌ای داشته باشد و JavaScript می‌تواند با کلیک روی یک دکمه عملی انجام دهد.
Dreamweaver خودش یک زبان برنامه‌نویسی نیست.
این موضوع یکی از مهم‌ترین نکاتی است که مبتدیان باید بدانند.
محیط اصلی Dreamweaver
بعد از بازکردن نرم‌افزار، بخش‌هایی مانند Document Window، Code View، Live View، Panels و نوار ابزار را مشاهده می‌کنید. Adobe نیز همین قسمت‌ها را اجزای اصلی Workspace معرفی می‌کند.
- Code View محلی است که کد HTML، CSS و JavaScript را مشاهده و ویرایش می‌کنید.
- Live View نتیجه تقریبی صفحه را به شکل بصری نشان می‌دهد.
- Files Panel برای مدیریت فایل‌ها و پوشه‌های وب‌سایت استفاده می‌شود.
- Properties نیز ویژگی‌های عنصر انتخاب‌شده را نمایش می‌دهد.
برای یادگیری حرفه‌ای‌تر، بهتر است بیشتر با Code View و Live View در کنار هم کار کنید و وابسته به طراحی کاملاً بصری نشوید.
مفهوم Site در Dreamweaver بسیار مهم است
یکی از اولین کارهایی که باید انجام دهید تعریف یک Site است. فرض کنید فایل‌های وب‌سایت شما در این پوشه قرار دارند D:\MyWebsite بهتر است این پوشه را در Dreamweaver به‌عنوان Local Site معرفی کنید.
معمولاً از مسیرSite > New Site نام سایت و Local Site Folder را تعیین می‌کنید.
Dreamweaver بعد از آن می‌داند تمام فایل‌های HTML، CSS، تصاویر و سایر منابع متعلق به یک پروژه هستند.
Adobe نیز تعریف نسخه محلی سایت را یکی از مراحل اصلی مدیریت پروژه در Dreamweaver می‌داند.
ساختار پوشه‌های سایت را مرتب نگه دارید
یکی از اشتباهات رایج مبتدیان این است که همه چیز را داخل یک پوشه قرار می‌دهند. ساختار ساده‌ای مانند زیر مناسب‌تر است:
mywebsite/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── images/
├── logo.png
└── banner.jpgindex.html معمولاً صفحه اصلی سایت است. پوشه css فایل‌های استایل، js کدهای JavaScript و images تصاویر سایت را نگهداری می‌کند. همین نظم ساده در پروژه‌های بزرگ بسیار مهم می‌شود.
اولین صفحه HTML در Dreamweaver
یک فایل HTML جدید ایجاد کنید. ساختار اولیه صفحه تقریباً چنین است:
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>سایت من</title> </head> <body> <h1>سلام، به سایت من خوش آمدید</h1> <p>این اولین صفحه من در Dreamweaver است.</p> </body> </html>
قسمت <head> شامل اطلاعاتی درباره صفحه است و محتوایی که کاربر می‌بیند معمولاً داخل <body> قرار می‌گیرد. تگ <h1> عنوان اصلی و <p> پاراگراف است. اگر همین چند مفهوم را بفهمید، Dreamweaver برایتان بسیار قابل‌فهم‌تر می‌شود.
CSS چگونه وارد کار می‌شود؟
HTML به‌تنهایی ظاهر ساده‌ای دارد. برای طراحی صفحه از CSS استفاده می‌کنیم. مثلاً:
body { font-family: Arial; background-color: #f5f5f5; } h1 { color: #1976d2; }
بهتر است CSS سایت را در فایل جداگانه‌ای مانند style.css قرار دهید و سپس آن را به HTML متصل کنید. این کار باعث می‌شود ظاهر تمام صفحات سایت را از یک فایل مدیریت کنید.
Dreamweaver ابزارهای مختلفی برای مشاهده و مدیریت CSS دارد و مستندات رسمی آن نیز مفاهیمی مانند Rule، Selector و Inheritance را پوشش می‌دهد.
مفهوم Selector در CSS
Selector مشخص می‌کند استایل روی چه عنصری اعمال شود. مثلاً:
p { color: black; }
روی همه پاراگراف‌ها اعمال می‌شود. اما:
.title { color: red; }
روی عناصری اجرا می‌شود که کلاس title داشته باشند. مثلاً:
<h2 class="title">درباره ما</h2>
یادگیری Tag، Class و ID یکی از پایه‌های مهم کار با CSS و Dreamweaver است.
لینک‌دادن صفحات به یکدیگر
تقریباً هر سایت از چند صفحه تشکیل شده است. مثلاً:
<a href="about.html">درباره ما</a>
با کلیک روی آن، کاربر وارد صفحه about.html می‌شود.
Dreamweaver میان چند نوع مسیر لینک تفاوت قائل می‌شود؛ از جمله Document-relative، Site-root-relative و Absolute URL. Adobe نیز شناخت این مسیرها را یکی از مباحث اصلی مدیریت لینک‌ها می‌داند. برای مبتدی بهتر است ابتدا لینک‌های نسبی میان فایل‌های همان سایت را یاد بگیرد.
اضافه‌کردن تصویر
برای نمایش تصویر می‌توانید بنویسید:
<img src="images/photo.jpg" alt="تصویر نمونه">
در اینجا src آدرس تصویر است و alt توضیح تصویر را مشخص می‌کند.
متن Alt برای دسترس‌پذیری و در بسیاری موارد برای درک بهتر محتوای تصویر توسط موتورهای جستجو اهمیت دارد.
تصاویر سایت را قبل از آپلود نیز بهینه کنید؛ قرار دادن یک عکس ۱۰ مگابایتی فقط به این دلیل که مرورگر می‌تواند آن را نمایش دهد کار درستی نیست.
تفاوت Design View و Live View
در Dreamweaver ممکن است با حالت‌های مختلف نمایش صفحه مواجه شوید. Code View برای مشاهده کد است.
Live View نتیجه صفحه را نزدیک‌تر به رفتار مرورگر نمایش می‌دهد. برای یادگیری بهتر پیشنهاد می‌شود همیشه بررسی کنید:
کدی که نوشته‌اید → چه خروجی‌ای ایجاد کرده است.
این ارتباط میان کد و خروجی یکی از بهترین روش‌های یادگیری HTML و CSS است.
طراحی Responsive چیست؟
سایت نباید فقط روی مانیتور کامپیوتر زیبا باشد. باید روی موبایل و تبلت نیز درست نمایش داده شود. به این ویژگی Responsive Design می‌گویند. در CSS معمولاً از Media Query استفاده می‌شود:
@media (max-width: 768px) { h1 { font-size: 24px; } }
یعنی اگر عرض صفحه 768 پیکسل یا کمتر شد، اندازه عنوان تغییر کند. Dreamweaver همچنین ابزارها و آموزش‌هایی برای طراحی Responsive و Bootstrap دارد. با این حال، بهتر است اول CSS و Responsive Design را بفهمید و سپس Bootstrap را یاد بگیرید.
Bootstrap چیست؟
Bootstrap مجموعه‌ای از CSS و JavaScript آماده است که ساخت رابط‌های واکنش‌گرا را سریع‌تر می‌کند. مثلاً برای ساخت Grid، Button، Navbar، Card و Form می‌تواند بسیار مفید باشد.
اما یک مبتدی نباید از همان روز اول فقط Bootstrap یاد بگیرد؛ زیرا ممکن است بدون فهمیدن CSS بتواند صفحه بسازد ولی نداند پشت آن چه اتفاقی افتاده است.
ترتیب بهتر HTML → CSS → Responsive Design → Bootstrap
فرم‌ها را بشناسید
بسیاری از وب‌سایت‌ها فرم دارند. مثلاً فرم تماس:
<form> <input type="text" placeholder="نام"> <input type="email" placeholder="ایمیل"> <button type="submit">ارسال</button> </form>
اما یک نکته مهم وجود دارد: ساخت ظاهر فرم به معنی ارسال واقعی اطلاعات نیست.
برای پردازش اطلاعات معمولاً به بخش Backend مانند PHP، Node.js یا سرویس‌های دیگر نیاز دارید. Dreamweaver در نسخه 21.8 سال ۲۰۲۶ قابلیت‌های داخلی مربوط به Server Behaviors و Database Bindings را نیز ارائه می‌کند.
Local و Remote یعنی چه؟
در Dreamweaver دو مفهوم بسیار مهم وجود دارد.
Local Site نسخه سایت روی کامپیوتر شماست. مثلاً D:\MyWebsite
Remote Site نسخه‌ای است که روی هاست اینترنتی قرار دارد.
فرایند کار معمولاً چنین است:
ویرایش Local → تست → Upload → Remote Server
این روش بسیار امن‌تر از ویرایش مستقیم فایل‌های سایت اصلی است.
FTP و SFTP چیست؟
بعد از آماده‌شدن سایت باید فایل‌ها را روی هاست ارسال کنید. Dreamweaver می‌تواند مستقیماً به Server متصل شود. از مسیر Site > Manage Sites > Servers می‌توانید سرور را تعریف کنید.
اطلاعاتی مانند Server Address، Username، Password و Root Directory معمولاً توسط شرکت هاستینگ ارائه می‌شود.
Dreamweaver هم FTP و هم SFTP را پشتیبانی می‌کند؛ SFTP اتصال رمزگذاری‌شده و امن‌تری فراهم می‌کند.
اگر هاست از SFTP پشتیبانی می‌کند، معمولاً انتخاب مناسب‌تری است.
Put و Get را اشتباه نگیرید
در مدیریت سایت Dreamweaver دو مفهوم بسیار مهم وجود دارد:
Put یعنی ارسال فایل از کامپیوتر به Server.
Get یعنی دریافت فایل از Server روی کامپیوتر.
این دو را اشتباه گرفتن ممکن است باعث شود نسخه قدیمی یک فایل را روی نسخه جدید بنویسید.
قبل از Put یا Get کردن فایل‌های مهم، Backup داشته باشید.
نکته مهم
- اگر با توضیحات نوشتاری بهتر یاد می گیرید، این جزوه ها را دانلود کنید (می توانید هم به عنوان مکمل فیلم های زیر استفاده کنید)
- برای یادگیری سریع تر و کامل تر نیز این چند ترفند کاربردی را که در هیج جای دیگری به شما یاد نمی دهند مطالعه کنید.
- همه آموزشهای دریم ویور ما را در اینجا می توانید مشاهده کنید
- سایت اصلی خود نرم افزار (با وی پی ان باز می شود)
ویدیوی نمونه
ویدیوهای داخل پکیج از کیفیت بسیار بالاتری برخوردارند:
تصاویر نمونه
دانلود ویدیوهای اول
حجم: ۲۸۰ مگابایت
سطح: از صفر تا صد
نسخه آموزش داده شده: مناسب برای همه نسخه های دریم ویور
به دنبال یادگیری سریع تر، حرفه ای تر، کامل تر و با کیفیت فول اچ دی هستید؟ بهترین پکیج آموزش دریم ویور موجود در ایران را ببینید!
آموزش سری 2 آپدیت 2026
اگر روش آموزش ویدیوهای بالا را دوست نداشتید، با دو ساعت آموزش زیر تا حد زیادی دریم ویور را یاد می گیرید:
درس اول
درس دوم
- کاربردهای دریم ویور +معایب آن
- همه ترفندهای کار با Dreamweaver
- ۱۰ نکته و ترفند مفید در دریم ویور برای افراد مبتدی
پیش‌نمایش در مرورگر را فراموش نکنید
فقط به Live View اعتماد نکنید.
صفحه را در مرورگرهای واقعی مانند Chrome، Edge یا Firefox نیز بررسی کنید.
ممکن است چیزی که داخل محیط طراحی درست دیده می‌شود در مرورگر یا موبایل متفاوت باشد.
Adobe نیز آزمایش سایت قبل از Upload را یکی از مراحل مهم فرایند توسعه معرفی می‌کند.
چند مفهوم بسیار مهم که باید یاد بگیرید
برای اینکه بتوانید بگویید تا حد مناسبی Dreamweaver را یاد گرفته‌اید، باید این مفاهیم را بشناسید:
Site و Local Root Folder، HTML، CSS، Tag، Class، ID، Link، Image، Form، Responsive Design، Code View، Live View، Files Panel، FTP/SFTP، Put/Get و تست در مرورگر.
بعد از این مرحله JavaScript را یاد بگیرید و سپس در صورت نیاز وارد PHP و پایگاه داده شوید.
اشتباه رایج در یادگیری Dreamweaver
یکی از اشتباهات قدیمی این است که کاربر Dreamweaver را مثل Photoshop ببیند و انتظار داشته باشد بدون شناخت HTML و CSS، سایت حرفه‌ای طراحی کند.
این روش شاید برای ایجاد صفحات بسیار ساده جواب بدهد، اما برای ورود جدی به طراحی وب مناسب نیست.
روش درست این است:
Dreamweaver ابزار است؛ مهارت اصلی شما HTML، CSS، JavaScript و اصول طراحی وب است.
اگر بعدها Dreamweaver را کنار بگذارید و از VS Code یا ابزار دیگری استفاده کنید، این دانش همچنان همراه شما خواهد بود.
مسیر پیشنهادی تمرین
بهترین تمرین اول، ساخت یک سایت شخصی سه‌صفحه‌ای است: ابتدا پوشه سایت را تعریف کنید، سپس صفحات Home، About و Contact بسازید. یک فایل CSS مشترک ایجاد کنید، منوی سه‌صفحه‌ای بسازید، تصویر و فرم تماس اضافه کنید، سایت را Responsive کنید و در چند مرورگر آزمایش کنید. در مرحله آخر نیز یک هاست آزمایشی تهیه کرده و با SFTP یا FTP فایل‌ها را Upload کنید.
اگر بتوانید این پروژه را بدون کپی‌کردن یک قالب آماده انجام دهید، با بخش بزرگی از اصول اولیه Dreamweaver آشنا شده‌اید.
مطالب بسیار کاربردی دریم ویور
- ۱۰ هک نرم افزار Dreamweaver که برنامه نویسی را برایتان آسان تر می کنند!
- ۴ بهترین جزوه های PDF دریم ویور
جمع‌بندی
برای یادگیری Dreamweaver از صفر، این ترتیب مناسب است:
محیط Dreamweaver → تعریف Site → HTML → CSS → لینک و تصویر → فرم → Responsive Design → Live View → مدیریت فایل‌ها → FTP/SFTP → انتشار سایت
Dreamweaver در سال ۲۰۲۶ همچنان توسط Adobe به‌روزرسانی می‌شود و نسخه 21.8 در آوریل ۲۰۲۶ منتشر شده است؛ بااین‌حال، مهم‌تر از یادگیری خود نرم‌افزار این است که اصول HTML، CSS و ساختار وب را یاد بگیرید. در این صورت هم با Dreamweaver و هم با ویرایشگرهای دیگر طراحی وب می‌توانید به‌راحتی کار کنید.
سلام دوست من انگار که سالهاست دیریم ویور خاصیت یا افزونه رفتار سرور را پشتیبانی نمیکنه و باید خریداری بشه چون خود اون چیزی که فابریک روش هست و خاموشه بعد اینکه اون رو روشن هم کنیم پسوند کانکشن رو به صورت mysql_pconnمینویسهکه منسوخ شده ایا راهی است که بتونیم افزونه سایت dmxzone که قابلیت pdoیا mysqliرو فعال میکنه از این سایت بخریم چون نه کارتی داریم نه در ایران راه دیگری است که انجام بدیم
پاسخخیلی امورش بی کیفییتی بود همچنین این نسخه ای که امورش میدید بسیار قدیمیه به نظرم از سایت حذفش کنید
پاسخ