12 ترفند کاربردی برای شروع کار با Dreamweaver (مبتدی تا حرفه ای)
شروع کار با نرمافزار Adobe Dreamweaver ممکن است در نگاه اول به خاطر پنلها و کدهای مختلف کمی پیچیده به نظر برسد، اما در واقع یکی از بهترین ابزارها برای مدیریت، طراحی و انتشار محتوای صفحات وب است. این نرمافزار مانند یک پل ارتباطی بین «کدنویسی» و «طراحی بصری» عمل میکند.
در ادامه ۶ ترفند کاربردی و ساده برای شروع کار با دریمویور آورده شده است:
ر ادامه ۶ ترفند کاربردی و ساده برای شروع کار با دریمویور آورده شده است:
۱. قدم صفر: سایت خود را اصولی تعریف کنید (Site Setup)
بزرگترین اشتباه مبتدیها این است که مستقیماً یک صفحه جدید باز میکنند و شروع به کار میکنند. اولین کاری که باید انجام دهید این است که از منوی Site در بالای صفحه، گزینه New Site را انتخاب کنید. یک پوشه اصلی (Root Folder) در کامپیوترتان بسازید و آن را به نرمافزار معرفی کنید. وقتی قرار است مقالات آموزشی متعددی (مثلاً در حوزه فناوریهای بانکی یا راهنماهای تخصصی) را روی وبسایت خود منتشر کنید، داشتن یک ساختار منظم از همان ابتدا، مدیریت فایلها و تصاویر را بسیار راحت میکند و جلوی خطای رایجِ «بارگذاری نشدن عکسها» را میگیرد.
۲. از نمای دوگانه (Split View) استفاده کنید
دریمویور به شما اجازه میدهد صفحه وب خود را به سه شکل ببینید: فقط کد (Code)، فقط گرافیک (Design/Live) و یا ترکیبی از هر دو (Split).
-
ترفند: همیشه محیط کاری خود را روی Split تنظیم کنید. با این کار، وقتی یک متن را در بخش گرافیکی تایپ میکنید یا عکسی را قرار میدهید، بلافاصله میبینید که دریمویور چه کدهایی را در پسزمینه برای شما نوشته است. این یکی از سریعترین راهها برای یادگیری ساختار HTML است.
۳. جادوی قالبها (Templates) برای تولید محتوا
وقتی مدیریت محتوای یک پلتفرم را بر عهده دارید، قرار نیست برای هر مقاله جدید، ساختار کلی صفحه (مثل منوی بالا، فوتر و ستونهای کناری) را از نو بسازید.
-
ترفند: یک صفحه استاندارد طراحی کنید و آن را از منوی
Fileبه عنوان قالب (Save as Template) ذخیره کنید. دریمویور پسوند.dwtبه آن میدهد. سپس میتوانید فقط بخش میانیِ صفحه (محل قرارگیری متن و تصاویر مقاله) را به عنوان «بخش قابل ویرایش» (Editable Region) مشخص کنید. با این روش، سرعت بارگذاری و انتشار محتوای روزانه شما چند برابر میشود.
بلد باشید: ۱۰ نکته و ترفند مفید در دریم ویور برای افراد مبتدی
۴. با پنل Insert مثل لگو خانهسازی کنید
نیازی نیست تمام کدهای مربوط به ساختار وب را حفظ باشید. در پنل Insert (که معمولاً در سمت راست نرمافزار قرار دارد)، مجموعهای از ابزارهای آماده وجود دارد.
-
آیا میخواهید یک تصویر، یک جدول برای مقایسه اطلاعات، یا یک لینک ویدیو اضافه کنید؟ کافیست المان مورد نظر را از این پنل بکشید و در صفحه رها کنید (Drag & Drop) یا روی آن کلیک کنید تا تنظیماتش باز شود. نرمافزار بقیه کارهای فنی را خودش انجام میدهد.
۵. کنترلگر اصلی: پنل Properties
این پنل که معمولاً در نوار پایینی صفحه قرار دارد، فرماندهِ المانهای شماست و بر اساس چیزی که انتخاب کردهاید، تغییر حالت میدهد.
-
ترفند: روی هر چیزی در صفحه کلیک کنید (مثلاً یک پاراگراف یا یک عکس)؛ پنل Properties فوراً تنظیمات مربوط به آن را نشان میدهد. از طریق همین پنل میتوانید به سادگی متون را توپر (Bold) کنید، لینکهای خارجی بسازید، ابعاد عکسها را تغییر دهید یا تگهای سرتیتر (مثل
H1وH2) را روی نوشتهها اعمال کنید.
۶. پیشنمایش در مرورگر واقعی (Real-time Preview)
نمای داخلی دریمویور عالی است، اما در نهایت وبسایت شما قرار است در مرورگرهایی مثل گوگل کروم یا فایرفاکس خوانده شود.
-
ترفند: در گوشه پایین سمت راست نرمافزار (یا با فشردن کلید
F12) روی آیکون Real-time Preview کلیک کنید. با این کار، صفحهای که ساختهاید مستقیماً در مرورگر باز میشود تا مطمئن شوید تمام فونتها، تصاویر و چیدمانها دقیقاً همانطور که میخواهید نمایش داده میشوند.
حتما دانلود کنید ۴ بهترین جزوه PDF آموزش دریم ویور
استفاده از کلیدهای میانبر (Shortcuts) در دریمویور (Dreamweaver) سرعت کار شما را به شدت بالا میبرد، مخصوصاً زمانی که به طور پیوسته در حال ویرایش متن، قالببندی مقالات و انتشار محتوا روی وبسایت هستید.
به جای اینکه دهها میانبر پیچیده را حفظ کنید، در اینجا مهمترین و کاربردیترین کلیدهای میانبر که برای مدیریت و انتشار روزانه محتوای وب به آنها نیاز دارید، دستهبندی شدهاند:
۱. قالببندی سریع متون و مقالات
وقتی یک متن طولانی را وارد نرمافزار کردهاید، این کلیدها به شما کمک میکنند در چند ثانیه به آن ساختار بدهید:
-
Ctrl + 1تاCtrl + 6: اعمال سریع سرتیترهای<h1>تا<h6>. (کافیست نشانگر موس را روی خط مورد نظر بگذارید و مثلاً کنترل و ۲ را بزنید تا فورا تبدیل به یک تیتر مهم شود). -
Ctrl + B: ضخیم یا توپر کردن متن (Bold). -
Ctrl + I: کج کردن یا ایتالیک کردن متن (Italic). -
Ctrl + Shift + Space: ایجاد یک فاصله خالیِ استاندارد (Non-breaking space) که در کدهای HTML به شکلnbsp&نوشته میشود و از به هم ریختگی کلمات جلوگیری میکند.
۲. افزودن عناصر بصری و لینکها
برای غنیتر کردن محتوای صفحه با تصاویر و لینکهای ارتباطی، این میانبرها کارتان را بسیار راحت میکنند:
-
Ctrl + Alt + I: پنجره درج تصویر (Insert Image) را باز میکند. برای آپلود سریع عکسها یا اینفوگرافیکها در لابهلای متن بسیار عالی است. -
Ctrl + L: ایجاد لینک (Hyperlink). کلمهای را انتخاب کنید و این کلیدها را بزنید تا بتوانید آن را به یک صفحه دیگر یا یک سایت خارجی متصل کنید.
۳. مدیریت فایل و نمای کاری
این موارد برای کنترل کلی محیط نرمافزار به کار میروند:
-
F12: پیشنمایش لحظهایِ صفحهای که ساختهاید در مرورگر اصلی سیستم شما. -
Ctrl + \: جابجایی سریع بین نماهای مختلف (کدنویسی، طراحی بصری، یا نمای دوگانه). -
Ctrl + F: جستجو و جایگزینی (Find and Replace). یکی از قدرتمندترین ابزارها برای زمانی که میخواهید یک کلمه یا کد خاص را در کل یک مقاله طولانی پیدا کرده و با کلمه دیگری جایگزین کنید. -
Ctrl + S: ذخیره کردن تغییرات (Save). عادت کنید هر چند دقیقه یکبار این میانبر را بزنید تا زحماتتان هدر نرود!
پیشنهاد: برای شروع، نیازی نیست همه اینها را حفظ کنید. فقط میانبرهای بخش اول (قالببندی تیترها) و Ctrl + Alt + I (برای درج عکس) را روی یک برگه کوچک بنویسید و کنار مانیتور خود بچسبانید. همین چند کلید ساده، سرعت بارگذاری محتوای شما را چندین برابر میکند.
کاربردی ترین کلیدهای میانبر نرم افزار دریم ویور که باید بدانید!
سلام
پاسخیک سوال داشتم . گاهی تکمیل خودکار کد ها کار نمی کند
چه طوری می تونم دوباره فعالشون کنم؟
سلام
دکمه کنترل + اسپیس رو بزنید بهتون ساجست ها رو نشون میده
سلام .نسخه ۲۰۲۰ قسمت بالایی که split.code.disinedisineروداره موقع نوشتن کدهایcssگزینه splitکارنمیکنه چیکار باید کرد؟
پاسخاولین چیزی که باید چک کنی اینه که فایلت واقعاً تو حالت درسته یا نه. مثلاً مطمئن شو فایلت با فرمت .aspx یا .html ذخیره شده باشه، چون Split View بیشتر برای این نوع فایلها طراحی شده و تو فایلهای .css خالص معمولاً فقط حالت کد (Source) فعاله. اگه داری تو یه پروژه ASP.NET کار میکنی، یه فایل .aspx باز کن و ببین اونجا Split کار میکنه یا نه. یه ترفند ساده: روی فایل راستکلیک کن، گزینه Open With رو بزن و Web Form Editor رو انتخاب کن تا مطمئن شی تو حالت درست باز میشه.
دوم، برو تو منوی Tools > Options > Web Forms Designer و ببین گزینه Enable Web Forms Designer تیک داره یا نه. اگه خاموشه، روشن کن و Visual Studio رو ریاستارت کن. این تنظیم گاهی بهصورت پیشفرض غیرفعاله و باعث میشه Split View کار نکنه. ضمناً چک کن که Auto Load Designer هم فعال باشه تا نمای طراحی خودکار لود بشه.
سوم، اگه مشکل هنوز پابرجاست، ممکنه یه باگ یا مشکل نصب باشه. یه Repair از Visual Studio 2020 انجام بده (از Control Panel > Programs > Uninstall or Change a Program). این کار معمولاً مشکلات عجیب رو درست میکنه بدون اینکه دادههات از بین بره. یه ترفند دیگه: Visual Studio رو به آخرین آپدیت برسون، چون گاهی باگهای اینجوری تو آپدیتها فیکس میشن.
آخرین نکته، اگه خیلی عجله داری و هیچ کدوم جواب نداد، میتونی بهجای Split View از یه روش جایگزین استفاده کنی. مثلاً فایل CSS و HTML رو کنار هم باز کن (با کشیدن تبها به حالت Split Editor) و دستی تغییرات رو چک کن. یا حتی یه افزونه مثل Live Server تو Visual Studio Code نصب کن که مرورگر کنار کدها باز بشه و تغییرات رو زنده ببینی.