۱۰ نکته و ترفند مفید در دریم ویور برای افراد مبتدی

برنامه Dreamweaver از کاربردهای بسیار زیادی در زمینه کدنویسی برخوردار است. برای تسلط بر این کاربردها، باید بدانید که هر فهرستی (منو) در این برنامه، دقیقا به چه منظوری تعبیه‌شده است. در این نوشته می‌خواهیم به تعدادی از آنها اشاره کنیم.

ابتدای ترفندها و نکات تجربی خودم

چند ترفند ساده و مفید در Dreamweaver (دریم‌ویور) برای افراد مبتدی:

• از Split View یا نمای دوگانه استفاده کنید تا هم‌زمان کد و نتیجه صفحه را ببینید. این کار برای یادگیری HTML و CSS بسیار مفید است.
• پروژه را از ابتدا به‌صورت Site یا سایت پروژه تعریف کنید تا فایل‌های HTML، CSS، تصاویر و پوشه‌ها منظم بمانند.
• برای فایل‌های CSS یک پوشه جدا مثل css و برای تصاویر پوشه‌ای مثل images بسازید.
• هنگام نوشتن کد از Code Hints یا پیشنهاد خودکار کد استفاده کنید؛ Dreamweaver هنگام تایپ بسیاری از تگ‌ها و ویژگی‌ها را پیشنهاد می‌دهد.
• به‌جای تعیین مستقیم رنگ، فونت و فاصله در هر عنصر، یک فایل CSS خارجی بسازید و ظاهر کل سایت را از آن کنترل کنید.
• مرتب از Live View یا نمایش زنده استفاده کنید، اما نتیجه نهایی را حتماً در مرورگر واقعی مانند Chrome یا Firefox هم بررسی کنید.
• برای جلوگیری از به‌هم‌ریختگی صفحه در موبایل، از طراحی واکنش‌گرا (Responsive Design) و Media Query یا «قواعد مخصوص اندازه‌های مختلف صفحه» استفاده کنید.
• کلیدهای میانبر را کم‌کم یاد بگیرید؛ مخصوصاً ذخیره، کپی، چسباندن، جست‌وجو و جایگزینی.
• از Find and Replace یا جست‌وجو و جایگزینی برای تغییر سریع یک عبارت، کلاس CSS یا آدرس در چند فایل استفاده کنید.
• قبل از انتشار سایت، لینک‌ها و مسیر تصاویر را کنترل کنید؛ یکی از خطاهای رایج مبتدیان، مسیر اشتباه فایل‌هاست.
• در فایل HTML از نام‌های معنی‌دار برای کلاس‌ها استفاده کنید؛ مثلاً product-card بهتر از box1 است.
• فقط به محیط گرافیکی Dreamweaver وابسته نشوید. حداقل HTML، CSS و JavaScript پایه را یاد بگیرید تا بتوانید خطاها را خودتان پیدا کنید.

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

سایر نکات و ترفندهای مفید که از اینترنت گلچین کردم

۱- نمای دینامیک با استفاده از live view

برای ایجاد یک نمای دینامیک(متحرک) ابتدا باید تنظیمات برنامه را روی حالت دینامیک قراردهیم. برای این منظور گزینه http request settings را از مسیر view > live view options انتخاب کنید و سپس پارامترهای GET یا POST را واردکنید. سپس با مراجعه به قسمت Live view می‌توانید Design view قبلی را مطابق نیازتان تغییردهید.

دانلود رایگان ۴ تا از بهترین جزوه های PDF آموزش دریم ویور

۲- code navigator برای دریم ویور یک Firebug است

برای اینکه بدانید کد هر بخش چه چیزی است می‌توانید از code navigator استفاده کنید. برای این منظور به قسمت live view بروید و با دستور alt+click کد مربوط به هربخش را مشاهده کنید.

۳- کالبدشکافی جاوا اسکریپت

فرض کنید می‌خواهید سبک وسیاق یکی از برنامه‌هایتان را که در جاوااسکریپت ایجاد نموده‌اید، تغییر دهید. برای این کار کافیست صفحه مورد نظر را در live view بازکرده و سپس کلید F6 را فشار دهید، این کار به شما اجازه بررسی دقیق کد مربوط به هر آیتم را می‌دهد.

۴- Live code

در هنگام استفاده از live view می‌توانید live code را نیز فعال کنید. این کار باعث می‌شود تا همزمان با ایجاد تغییرات در پنجره live view، کد شما نیز بروز شود و تغییرات در آن اعمال گردد.

کاربردی ترین کلیدهای میانبر نرم افزار دریم ویور که باید بدانید!

۵- تکمیل خودکار جاوا اسکریپت

دریم ویور دارای یک HTML هوشمند تکمیل کننده کد CSS است، اما درباره جاوا اسکریپت چطور؟ اگر در فضای دریم ریور کد jQuery یا Prototype را استفاده کنید، نرم‌افزار، APIهایی برای تکمیل خودکار جاوااسکریپت خواهدداشت. این کار باعث افزایش سرعت در کدنویسی خواهدشد.

۶- سازمان‌دهی کد در Fly

اگر کد شما ظاهر نامرتب و درهم برهمی دارد، از ویژگی Apply source Formatting استفاده کنید و فرمت کد را تغییر دهید. می‌توانید روی گزینه Format Source Code که در پایین نوارابزار coding قابل مشاهده است، کلیک کنید و سپس گزینه code format settings را انتخاب کنید و تغییرات دلخواهتان را اعمال کنید.

دانلود رایگان آموزش صفر تا صد نرم افزار دریم ویور (فیلم فارسی+ جزوه pdf)

۷- ایجاد حالت ویجتی

روی گزینه extend dreamweaver کلیک کنید و سپس گزینه browser for web widgets را انتخاب کنید. در این صفحات می‌توانید ویجت‌های زیادی را پیداکنید.

۸- subversion و dreamweaver

دریم ویور از subversion(SVN) پشتیبانی می‌کند. برای افرادی که از SVN در کنترل و مدیریت پروژه خود استفاده می‌کنند، این خبر بسیار امیدوار کننده است.

۹- حذف CSS های اضافی

اگر بخواهید از دریم ویور بعنوان ابزاری برای به روزرسانی محتویات استفاده کنید(بصورت دستی) ممکن است قوانین اضافی CSS مثل Class1 و Class2 ایجادشود. برای جلوگیری از این کار کافی است حالت property inspector را به HTML تغییردهید، با این کار تمام cssهای اضافی حذف خواهندشد.

طرز ایجاد یک جدول با کمک نرم افزار Dreamweaver به زبان ساده

۱۰- معتبر سازی فرم(form)

برای این کار کافی است یکی از فرم‌های موجود را انتخاب کنید و سپس یک ویجت spry validation را از مسیر Insert> spry menu به کار گیرید. سپس با استفاده از property inspector نیازمندی‌های معتبربودن فرم خود مثل ماکزیمم و مینیمم کاراکترها را مشخص کنید.