22 بهترین نکته/ترفند دریم ویور که باید بلد باشید (مبتدی-حرفه ای)
حدود 22 سال از معرفی برنامه دریم ویور میگذرد، برنامهای که در زمینه کدنویسی و طراحی بسیار پرکاربرد است. به همین دلیل در این نوشته میخواهیم 22 نکته مفید را در مورد این برنامه مرور کنیم. ابتدا طبق تجربه یک سری ترفند و نکته معرفی می کنم و بعد بصورت تصویری ترفندهایی که کاربران دنیا معتقد بوده اند بهترین نکات هستند از سایتهای مختلف گلچین کرده ایم و نمونه تصویر هم گذاشتیم:
ابتدا 11 ترفند و نکته طبق تجربه
۱. مدیریت پیشرفته سایتها (Site Management) و اتصالات FTP
یکی از بزرگترین نقاط قوت دریمویور، قابلیت مدیریت متمرکز پروژههاست. اگر روی دهها سایت مختلف کار میکنید، باز کردن فایلهای پراکنده به هیچ وجه منطقی نیست.
نحوه تعریف سایت
از منوی بالا به مسیر Site > New Site بروید. در این پنجره، نام پروژه و پوشه محلی (Local Site Folder) را مشخص کنید. این کار به دریمویور میفهماند که ریشه سایت شما کجاست تا بتواند مسیردهی عکسها، فایلهای CSS و لینکهای داخلی را به صورت خودکار مدیریت کند.
مدیریت سرورها (Servers)
در همان پنجره تنظیمات سایت، تب Servers را انتخاب کنید. در اینجا میتوانید اطلاعات FTP یا SFTP هاست خود را وارد کنید.
-
ترفند کاربردی: با فعال کردن گزینه Automatically upload files to server on save، به محض فشردن کلیدهای
Ctrl + S، فایل ویرایش شده به صورت خودکار روی هاست آپلود میشود. این ویژگی برای رفع باگهای سریع و اعمال تغییرات لحظهای روی سایتهای زنده فوقالعاده است.
۲. جستجو و جایگزینی با عبارات باقاعده (Regex) در کل پروژه
زمانی که قصد دارید یک تغییر ساختاری در سئو ایجاد کنید (مثلاً تغییر تگهای فوتر، اصلاح کدهای اسکیما، یا تغییر آدرس بکلینکها) در صدها صفحه HTML، ابزار Find and Replace دریمویور نقش یک ناجی را بازی میکند.
استفاده از پنل جستجوی پیشرفته
کلیدهای ترکیبی Ctrl + Shift + F را فشار دهید تا پنجره جستجو باز شود.
-
در بخش Find in، گزینه Entire Current Local Site یا یک پوشه خاص (Folder) را انتخاب کنید.
-
در بخش Search، میتوانید به جای متن ساده، ساختارهای کدی پیچیده را جستجو کنید.
-
استفاده از Regex (عبارات باقاعده): تیک گزینه Use Regular Expressions را بزنید. این قابلیت به شما اجازه میدهد الگوهای متنی را پیدا کنید. مثلاً پیدا کردن تمام تگهای
<a>که دارای ویژگیrel="nofollow"نیستند و جایگزینی آنها با نسخه صحیح. این کار برای پیادهسازی استراتژیهای سئو و حفظ ترافیک ارگانیک در برابر تغییرات الگوریتمهای موتورهای جستجو بسیار حیاتی است.
۳. استانداردسازی کار تیمی با پنل قطعهکدها (Snippets)
اگر یک تیم توسعه و تولید محتوای چند نفره (مثلاً یک تیم ۵ نفره از برنامهنویسان و محتوانویسان) دارید، هماهنگی در استفاده از کدهای استاندارد بسیار مهم است.
ساخت و مدیریت Snippets
به جای اینکه کدهای تکراری مانند ساختار جداول قیمتگذاری، دکمههای فراخوان (CTA) یا تگهای متای مخصوص سئو را هر بار تایپ کنید، آنها را به عنوان Snippet ذخیره کنید.
-
کدی که نوشتهاید را انتخاب کنید.
-
به پنل Snippets (از منوی Window) بروید.
-
روی آیکون New Snippet (علامت +) کلیک کنید.
-
برای آن یک نام و یک Trigger Key (کلید میانبر) تعریف کنید.
حالا تیم شما میتواند این مجموعه از Snippetها را در دریمویور خود وارد (Import) کند. با این کار، هر زمان که یکی از اعضای تیم نیاز به یک المان خاص داشت، با تایپ کلمه میانبر و فشردن دکمه Tab، کل ساختار کد به صورت استاندارد و بدون خطا درج میشود.
۴. جادوی Emmet برای کدنویسی با سرعت نور
دریمویور به صورت پیشفرض از افزونه قدرتمند Emmet پشتیبانی میکند. این ابزار به شما اجازه میدهد ساختارهای پیچیده HTML و CSS را با نوشتن عبارات کوتاه تولید کنید.
مثالهای کاربردی Emmet
فرض کنید میخواهید یک منوی ناوبری با ۵ آیتم ایجاد کنید. به جای نوشتن خط به خط کدها، کافیست در بخش کدنویسی دریمویور عبارت زیر را تایپ کنید: nav>ul>li.item$*5>a سپس کلید Tab را فشار دهید. دریمویور به صورت خودکار این کدهای کوتاه را به ساختار کامل HTML با کلاسهای مجزا و تگهای لینک تبدیل میکند. تسلط بر Emmet میتواند زمان کدنویسی شما را تا دهها برابر کاهش دهد.
۵. همگامسازی با Git برای هماهنگی تیمی
برای تیمهایی که به صورت همزمان روی قالبهای سایت کار میکنند، مدیریت نسخههای کد ضروری است. دریمویور پنل اختصاصی Git را در خود جای داده است.
راهاندازی Git
-
از منوی Window، پنل Git را باز کنید.
-
روی Initialize Git Repository کلیک کنید تا پروژه محلی شما به یک مخزن گیت تبدیل شود.
-
حالا میتوانید تغییرات فایلها را پیگیری کرده، آنها را Commit کنید و در نهایت به یک مخزن آنلاین (مانند GitHub یا GitLab) ارسال (Push) کنید. این قابلیت باعث میشود هیچکدام از کدهای اعضای تیم روی کدهای شخص دیگری بازنویسی (Overwrite) نشود و همیشه یک تاریخچه دقیق از تغییرات سایت در دسترس باشد.
۶. اعتبارسنجی کدها (Code Validation) برای سئوی بینقص
با توجه به حساسیت موتورهای جستجو و حضور پررنگ هوش مصنوعی در نتایج (AI Overviews)، سایتهایی شانس دیده شدن دارند که از نظر ساختار کدنویسی (Semantic HTML) بینقص باشند. کدهای پر از خطا باعث افت سرعت خزش (Crawl) رباتهای گوگل میشوند.
نحوه استفاده از Validator
دریمویور به ابزار W3C Validator متصل است.
-
پس از اتمام طراحی صفحه، از منوی File روی Validate کلیک کرده و Current Document (W3C) را انتخاب کنید.
-
پنل خروجی در پایین صفحه باز میشود و خطاهایی مانند باز ماندن تگها، استفاده اشتباه از ویژگیها (Attributes) یا مشکلات ساختاری را با ذکر شماره خط به شما نشان میدهد. برطرف کردن این خطاها تأثیر مستقیمی بر بهبود وضعیت سئوی تکنیکال سایت خواهد داشت.
۷. مخفیسازی فایلهای منبع با قابلیت Cloaking
در یک پوشه پروژه، معمولاً علاوه بر فایلهای HTML، CSS و PHP، فایلهای گرافیکی خام (مانند PSD فتوشاپ، ایلاستریتور یا ویدیوهای رندر نشده) نیز وجود دارند. شما قطعاً نمیخواهید این فایلهای حجیم روی هاست آپلود شوند.
نحوه فعالسازی Cloaking
-
در پنل Files، روی فایل یا پوشهای که میخواهید در زمان آپلود FTP نادیده گرفته شود، کلیک راست کنید.
-
به بخش Cloaking رفته و روی Cloak کلیک کنید.
-
فایل یا پوشه مورد نظر یک خط قرمز روی آیکون خود دریافت میکند. این یعنی در عملیات آپلود گروهی سایت (Put/Get)، دریمویور از انتقال این فایلها چشمپوشی میکند که باعث صرفهجویی شدید در زمان و پهنای باند میشود.
۸. ویرایش همزمان با چندین مکاننما (Multi-Cursor Editing)
یکی از ویژگیهای بسیار مدرن و لذتبخش در ویرایشگر کد دریمویور، قابلیت تایپ همزمان در چندین خط است. این قابلیت زمانی که میخواهید یک کلاس CSS را به چندین تگ مختلف اضافه کنید یا ویژگی خاصی را تغییر دهید، بسیار کاربردی است.
نحوه استفاده:
-
کلید Alt روی کیبورد را نگه دارید.
-
در خطوط مختلفی که قصد ویرایش آنها را دارید، با ماوس کلیک کنید (یا ماوس را به صورت عمودی بکشید).
-
حالا چندین مکاننما (Cursor) چشمکزن خواهید دید. متنی که تایپ میکنید به صورت همزمان در تمام آن خطوط نوشته میشود.
۹. کامپایل خودکار پیشپردازندههای CSS (LESS و SASS)
امروزه نوشتن کدهای طولانی CSS به صورت سنتی منسوخ شده است. طراحان حرفهای از SASS یا LESS استفاده میکنند که امکاناتی مثل متغیرها، توابع و ترکیببندی را به CSS اضافه میکنند.
تنظیم خودکار در دریمویور
دریمویور بدون نیاز به نصب نرمافزارهای جانبی (کامپایلرها)، میتواند فایلهای SASS و LESS را به CSS استاندارد تبدیل کند.
-
به تنظیمات سایت (Site Setup) بروید.
-
در تب CSS Preprocessors، گزینههای مربوطه را فعال کنید.
-
میتوانید مشخص کنید که با هر بار ذخیره فایل
.scss، فایل خروجی.cssدقیقاً در کدام پوشه ذخیره شود. این اتوماسیون سرعت طراحی ظاهری سایت را به طرز چشمگیری افزایش میدهد.
۱۰. پیشنمایش زنده و لحظهای (Real-Time Device Preview)
یکی از چالشهای طراحی سایت، اطمینان از نمایش صحیح صفحات روی موبایلها و تبلتهای مختلف است.
استفاده از Device Preview
در پایین سمت راست محیط نرمافزار، آیکونی به شکل یک تلفن همراه وجود دارد (Device Preview).
-
با کلیک روی آن، یک کد QR یا یک لینک اختصاصی برای شما تولید میشود.
-
این کد را با دوربین موبایل خود اسکن کنید.
-
صفحه سایت شما روی مرورگر موبایل باز میشود. حالا هر تغییری که در کدهای دریمویور بدهید، بدون نیاز به رفرش کردن مرورگر موبایل، در کسری از ثانیه روی گوشی شما بهروزرسانی میشود. این یک محیط تست فوقالعاده برای تنظیم دقیق Media Query ها و اطمینان از واکنشگرا (Responsive) بودن سایت است.
۱۱. فضای کاری دوتایی (Split View) و پنل DOM
شاید شما بخواهید هم کدها را ببینید و هم نتیجه نهایی را.
-
Split View: با کلیک روی دکمه Split در بالای پنجره کاری، صفحه به دو قسمت کد و پیشنمایش زنده (Live View) تقسیم میشود. کلیک روی هر المان در پیشنمایش، شما را مستقیماً به خط کد مربوط به آن هدایت میکند.
-
پنل DOM: اگر ساختار سایت شما بسیار پیچیده است و تگهای تودرتوی (Nested) فراوانی دارید، پنل DOM (Document Object Model) درک این ساختار را آسان میکند. با استفاده از این پنل میتوانید به راحتی المانها را با درگ و دراپ (Drag & Drop) جابجا کنید، کلاسهای آنها را تغییر دهید یا تگهای جدید را به صورت بصری اضافه کنید، بدون اینکه نگران خراب شدن ساختار کدها باشید.
۱۲. استخراج اطلاعات از فایل فتوشاپ (Extract)
با وجود ابزارهای جدیدتر، دریمویور هنوز یک پنل قدرتمند به نام Extract دارد که برای طراحانی که طرح اولیه (UI) را به صورت فایل PSD فتوشاپ دریافت میکنند، بینظیر است.
شما میتوانید فایل PSD را مستقیماً در دریمویور بارگذاری کنید. پنل Extract به شما اجازه میدهد:
-
رنگها را با یک کلیک به عنوان متغیرهای CSS استخراج کنید.
-
فونتها، اندازهها و سایهها (Shadows) را مستقیماً به کد CSS تبدیل کنید.
-
عکسها و لایههای گرافیکی را بدون نیاز به باز کردن نرمافزار فتوشاپ، برش داده و به عنوان فایلهای PNG یا JPG ذخیره کنید.
سایر ترفندها و نکات مفید
۱ – انتخاب بهترین فونت
اگر در قسمت card-carrying بخش creative cloud عضویت داشته باشید میتوانید بصورت رایگان به فونتهای وب دسترسی داشته باشید. این فونتها برای افرادی که در زمینه طراحی وب فعالیت دارند بسیار مفید است. برای دسترسی به فونتهای Adobe Edge Web باید در پنلهای طراحی css شروع به ایجاد خاصیت font-family کنید.
در نوار اول، تعدادی فونت را به صورت نمونه خواهید دید. این فونتها در ۸ دسته طبقهبندی میشوند. فونت دلخواهتان را انتخاب کنید و شروع به طراحی کنید.
۲- استخراج تصاویر
فرایند استخراج تصاویر، متون و حالات css در نرمافزار دریم ویور همواره کار وقتگیری بوده است. در نسخه جدید این برنامه شما میتوانید تصویر را از قسمت PSD بخش استخراج به قسمت Live View منتقل کنید و سپس آن را در قسمت دلخواهتان قراردهید.
۳- ماکزیمم کردن با Emmet
اگرکدنویسی میکنید، ابزار emmet بعنوان یک خلاصهکننده برای شما عمل میکند. کافی است P*5>Iorem را تایپ کنید و سپس Tab را فشاردهید تا ۵ پاراگراف مختلف برای شما نمایش دادهشود.
۴- کپی کردن با css designer
با راستکلیک کردن روی هر سلکتور میتوانید گزینههای مختلف کپیکردن را مشاهده کنید. با این گزینه میتوانید تمام حالات موجود در سلکتور را کپی و به یک سلکتور دیگر انتقال دهید. اگر میخواهید کل سلکتور را کپی کنید به شما توصیه میکنیم از دستور کپی استاندارد استفاده کنید.
۵- آزادسازی کد
میتوانید از فهرست view استفاده کنید و کد را به سمت چپ یا راست، یا بصورت عمودی و افقی جابجا کنید. برای بررسی موقعیت کد میتوانید از دستور window > code inspector استفاده کنید.
۶- مدهای اصلی در Live view
Live view دارای ویژگیهای بسیار زیادی است. در قسمت Live view میتوانید هر عنصری از صفحه را انتخاب کنید. با حرکت دادن ماوس روی نام عنصر انتخابی میتوانید کد مربوط به این عنصر را در بخش code view مشاهده کنید.
۷- استفاده پایدار از j Query UI Datepucker
تمام ویجتهای j Query UI را میتوانید در نرم افزار دریم ویور مورد بررسی قراردهید. در قسمت Datepicker گزینههای بسیار زیادی وجود دارد. نه تنها میتوانید فرمتهای تقویمی مختلفی ایجادکنید بلکه میتوانید روی فرمت سال و ماه کنترل خوبی داشته باشید و میتوانید یک بازه زمانی ماکزیمم و مینیمم تعریف کنید.
۸- مسیریابی و هدایت کردن با Bootstrap
در قسمت navigation هدف اصلی این است که محتویات یک سایت روی صفحات کوچکتر (مثل موبایل) نیز قابل مشاهده باشد و Bootstrap این ویژگی را برای شما فراهم میکند. از ویژگیهای این ابزار به موارد زیر میتوان اشاره کرد:
- لینکهای استاندارد و صحیح از نظر مفهومی
- داشتن موقعیتی خوب برای جایگذاری لوگو
- محیط جستجوی مناسب
- سلکشنهایی که بنابر نیاز میتوانید در قسمت چپ یا راست قراردهید
۹- بولدکردن کد
به قسمت preferences و بخش technology previous بروید. حال گزینه Enable code highlighting را انتخاب کنید. این گزینه به مشخص کردن کد در برنامه دریم ویور کمک میکند. با دابل کلیک کردن روی بخش دلخواه میتوانید آن قسمت را بولد کنید.
۱۰ – قراردهی اتوماتیک فایلها
اگر با وبسایتهای دینامیکی کار میکنید که دارای سرو PHP هستند احتمالا از قراردهی دستی فایلها در سرور خسته میشوید. هم اکنون در این برنامه میتوانید فایلهای بارگذاریشده را بصورت اتوماتیک جایگذاری کنید. برای این کار قسمت Site setup dialog را باز کنید و گزینه always auto save dependent files را چک کنید.
۱۱- تفتیشکننده
برای بررسی کردن صفحه نمایش روی گزینه inspect icon در بخش Device preview کلیک کنید. در این بخش میتوانید بازخورد هر نوع طراحی یا تغییر محتوی در هر دستگاهی مثل تلفن، لبتاب و غیره را مشاهده کنید.
۱۲- کد Lint-free
هرچه وبسایت بیشتری طراحی کنید، بیشتر به کارکردن با code-side نیاز خواهیدداشت. باعث میشود تا دست شما در طراحی وبسایت بازترشود، و وجود خطاها را بهتر متوجه شوید و میتوانید این خطاها را با linting support از بین ببرید. Linting را میتوانید برای فرمتهای جاوااسکریپت، css,HTML به کارگیرید. در نرم افزار دریم ویور یک صفحه کدنویسیشده را بازکنید، در سمت راست Status bar یک چک کننده را درون دایره سبز میبینید. اگر مشکل و خطایی وجود داشته باشد، رنگ دایره قرمز خواهدشد.
۱۳- نوار visual media Queries
این نوار به شما در مشخصشدن نقاط انفصال css کمک میکند و همچنین به شما کمک میکند تا بتوانید سریعتر آنها را پیداکنید. با کلیک کردن روی گزینه media query میتوانید پنجره اسنادی را بازکنید و یک عرض ماکزیمم و مینیمم برای رسانه خود تعریف کنید.
۱۴- snippier snippets
با استفاده از این ابزار در زمان کدنویسی میتوانید تاحد بسیار زیادی در زمان خود صرفهجویی کنید. Snippetها را با استفاده از creative clouds همگامسازی کنید و مطمئن شوید میتوانید از آنها در هر سیستمی استفاده کنید. میتوانید از طریق صفحه کلید برای هر snippet یک میانبر تعریف کنید. برای این کار قسمت keyboard shortcut را بازکنید. سپس وارد قسمت دستهبندی snippet شوید و میانبر دلخواه خود را ایجادکنید.
۱۵- نام گذاری با thumbnail
منتسب کردن یک نام مناسب به هرتصویر در صفحات وب کار دشواری است. همچنین به یا سپردن نامی مثل IMG-20151002-1407410jpg کار تقریبا ناممکنی است. نرم افزار دریم ویور ابزاری به نام thumbnail در اختیار شما میگذارد تا بتوانید به راحتی نام تصاویر را اصلاح کنید.
۱۶- لینک کردن دریم ویور با وردپرس
با استفاده از ابزار dynamic file toolset در نرمافزار دریم ویور میتوانید بین وردپرس و دریم ویور ارتباط ایجادکنید. نکته کلیدی این است که کار خود را با فایل index php که در وردپرس وجوددارد، شروع کنید. از دریم ویور استفاده کنید و روی یک لینک کلیک کنید، هنگامی که صفحه را مشاهده کردید، تمام ابزار دریم ویور در دسترس شما خواهدبود.
۱۷- واضح و شفاف کردن با viewport
برای اینکه مطمئن شوید وبسایتهایی که طراحی کردهاید در بهترین حالت خودهستند، در هرکدام از آنها باید علامتوجود داشته باشد تا وبسایت شما با مقیاس درستی روی دستگاه نمایش دادهشود.
این کد را بصورت دستی میتوانید واردکنید. البته این کد در فضای دریم ویور وجوددارد. کافی است به قسمت viewport object مراجعه کنید و این کد را انتخاب کنید.
۱۸- ویرایشگر Quick Tag در Live view
از ابزار quick tag میتوانید برای اصلاح علامتها (tag) استفاده کنید و یا اینکه یک HTML جدید واردکنید. کافیست روی گزینه موردنظر کلیک کنید وسپس ctrl+T را فشاردهید. این ابزار را میتوانید در قسمت Live view نیز مشاهده کنید.
