۱-Dynamic View و Live View
همه مي دانند كه Dreamweaver نماي ثابت يا پرونده هاي باز را ارائه مي كند. با اين حال، اين سوال در مورد Dynamic Viewبرنامه اي مانند WordPress بي پاسخ مانده است. براي تنظيم Dynamic View ، بايد تنظيمات آن را براي نرم افزارمشخص كنيم. براي اين كا، با كليك بر روي view> live view > options menu به تنظيمات HTTP Request رفته و سپس وارد GET يا POST شويد كه براي مشاهده صحيح برنامه لازم است.
پس از آن، Live View را در Dreamweaver تغيير دهيد تا جايگزين پنل Design View شود. سپس آن را با live Javascript، DOM manipulations، server side code، و CSS رندر شده، به جاي آيكون placeholder از رابط Design View، تكميل كنيد.
۲- بوت استرپت براي ارتقاي نويگيشن
نويگيشن يك مؤلفه يك صفحه اي در وب سايت است كه بايد بتواند پاسخگوي نيازهاي صفحه هاي كوچكتر باشد بنابراين Bootstrap مي تواند به آن كمك كند. Bootstrap به شما اجازه مي دهد تا نوار نويگيشن خود را به راحتي تنظيم كرده و از نوار افقي به صفحه عمودي سوئيچ كنيد. دليل اين امر اين است كه Dreamweaver از حداكثر انعطاف پذيري نويگيشن بوت استرپت پشتيباني مي كند و استفاده از اين ويژگي در هنگام توسعه يك وب سايت، بسيار ساده است.
مثال زير نحوه استفاده از Bootstrap را به شما نمايش مي دهد.
ارتقاي نويگيشن با Bootstrap با استفاده از پنجره سند جديد Dreamweaver انجام مي شود. در پنجره سند جديد روي دكمه Bootstrap Framework كليك كنيد، و براي استفاده از امكانات زير گزينه pre-build layout را تيك بزنيد.
- ليست پيوندهاي استاندارد، بدون هماهنگي و از نظر معنايي صحيح.
- محلي براي قرار دادن آرم تجاري.
- امكان فعال كردن دكمه activate و search field.
- منوهاي كشويي از پيش تنظيم شده براي آيتم هاي sub navigation و تكميل آن با ديوايدرها.
- بخش هاي چپ و راست كه در صورت نياز مي توانند با يكديگر تراز شوند.
- پاسخگويي bulid-in.
نگران نباشيد در صورتي كه موفق نشديد، گزينه ديگري نيز وجود دارد. Dreamweaver به شما اجازه مي دهد نوار نويگيشن خود را سفارشي كنيد. اگر پالت تيره را ترجيح مي دهيد، كافي است navbar-inverse class را به برچسب
۳- مسدود كردن جاوا اسكريپت
آژاكس ماهيتي ديناميك دارد. به همين دليل است كه گاهي با صفحه اي كه حاوي آيتم هاي غيرقابل دسترسي يا ارائه نشده است، روبرو مي شويم. اين آيتم ها با گذشت زمان بارگذاري خواهند شد. به عنوان مثال، اگر بخواهيد استايل tool tip جاوا اسكريپت را، تغيير دهيد، بايد اسكريپت ها را جستجو كنيد، اما مي توانيد به جاي اين كار روش زير را امتحان كنيد.
Dreamweaver خود را در حالت Live View قرار داده و صفحه خود را ارائه كنيد. سپس F6 را فشار دهيد تا جاوا اسكريپت مسدود شود (درست زماني كه به شما اجازه مي دهد كد مربوط به هر آيتم ديناميك در صفحه را جدا كرده و هدف قرار دهيد). اين كار نه تنها به شما در هدف قرار دادن كد دقيق آيتم ديناميك كمك مي كند بلكه با كاهش زمان جستجوي هر كد در وب سايت ديناميك، توسعه شما را سريعتر مي كند.
۴- هايلايت كردن كد
اگر شما به برنامه نويسي پيچيده عادت نداشته باشيد، اسكريپت كدگذاري مي تواند برايتان بسيار گيج كننده باشد. اينجاست كه هايلايت كردن كدها به شما كمك مي كند تا كل اسكريپت را جداسازي كنيد. امكان هايلايت كردن كدها در Dreamweaver، خواندن آنها را ساده تر مي كند. براي اين كار، تنظيمات Dreamweaver را باز كرده و بخش technology preview را فعال كنيد. سپس روي گزينه فعال كردن code highlighting كليك كنيد و اجازه دهيد Dreamweaver كار خود را انجام دهد. البته، ممكن است لازم باشد نسخه Dreamweaver خود را بروز رساني كنيد زيرا اين ويژگي تنها در آخرين نسخه آن موجود است.
با فعال كردن گزينه highlighting، كافي است روي يك برچسب دوبار كليك كنيد، تمام موارد اين برچسب در صفحه فعلي هايلايت خواهند شد. اگرچه پارامترها بايد تعريف شوند. اين ابزار براي شناسايي سريع عناصر مشابه فوق العاده است. براي حركت از يك عنصر به عنصر بعدي پس از هايلايت كردن هر عنصر، مي توانيد از ميانبر صفحه كليد f3 در رايانه شخصي، و CMD-G در Mac استفاده كنيد. همچنين با استفاده از shift modifier مي توانيد به قسمت قبلي برگرديد. هايلايت كردن كد همچنين با ويژگي هاي برچسب هاي HTML نيز سازگار است، بنابراين مي توانيد به راحتي كلاس هاي خاص را پيدا كنيد.
۵- تكميل خودكار JavaScript
Dreamweaver يك بستر عالي است كه در آن كدهاي HTML و CSS هوشمند و كاملي وجود دارند. اگرچه، برخي معتقدند كه جاوا اسكريپت كامل نيست. در مورد jQuery يا Prototype، در Dreamweaver، بايد بدانيد كه پسوندهاي API وجود دارند كه كدهاي تكميل JavaScript را ارائه مي دهند. اين كدها روند توسعه را سرعت مي بخشند زيرا با استفاده از اين كدها ديگر نيازي به تايپ كل اسكريپت نيست. اين ويژگي براي برنامه نويسان بسيار كاربردي است.
Dreamweaver تنها نرم افزار توسعه وب است كه به شما اجازه مي دهد با استفاده از كدهاي تكميل jQuery و Prototype به روند كار خود سرعت ببخشيد و بهترين نتيجه را با كمترين تلاش بدست آوريد.
۶- دسترسي آسان به پرونده هاي مرتبط
CSS و JavaScript نام پرونده هاي مستقلي هستند كه هنگام باز كردن فايل هاي HTML و PHP با آنها روبرو مي شويد. هنگام باز كردن فايل PHP، مي توانيد آن را در بالاي پنجره مشاهده كنيد. از آنجا كه اين گزينه ها در قسمت جلويي قرار گرفته اند، مي توانيد به راحتي به آنها برويد و بدون نياز به باز كردن، تغييراتي در آنها ايجاد كنيد. با كليك روي يكي از پرونده ها در نوار پرونده هاي مرتبط، منبع آن در Code View و صفحه اصلي در Design View نمايش داده خواهد شد.
علاوه بر اين، شما همچنين مي توانيد براي دسترسي سريع به منبع كد CSS از يك ابزارcode navigator استفاده كنيد. امكان دسترسي سريع به منبع كد CSS در زمان كدگذاري صرفه جويي كرده و به توسعه دهنده وب اجازه مي دهد تا روي جنبه هاي مختلف توسعه خود تمركز كند.
۷- كدهاي موجود را زيباتر كنيد
خطوط غير سازمان يافته و نامرتب كد نشان مي دهد كه توسعه دهنده ي آن آنقدر كه بايد حرفه اي و ماهر نبوده است كه بتواند كدهاي مرتب بنويسد. اين مسئله همچنين در بهينه سازي موتور جستجوگر وب سايت حائز اهميت است. البته، سازماندهي كدها و زيباسازي آنها به اندازه اي كه كاربران تصور مي كنند دشوار نيست. با آشنايي با گزينه هاي Dreamweaver مي توانيد برنامه هاي خود را در مدت كوتاهي مرتب كنيد. از گزينه “Apply source formatting” استفاده كرده و تنظيمات لازم را اعمال كنيد. براي مرتب كردن كدگذاري، روي “Format source code” در انتهاي نوار ابزار برنامه نويسي كليك كنيد و سپس به edit> toolbars > coding برويد اكنون براي اعمال تنظيمات دلخواه خود “code format settings” را انتخاب كنيد.
يك راه ديگر براي سازماندهي اسكريپت دسترسي به گزينه formatting از طريق Commands> Apply Source Formatting يا اعمال آن روي يك بلاك كدنويسي با انتخاب گزينه Apply Source Formatting to Selection، است.
۸- برنامه نويسيLint-Free
اين كهAdobe تا چه اندازه Dreamweaver را به ابزارها و ويژگي هاي قدرتمند مجهز كند اهميتي ندارد، در نهايت برنامه نويسي مستلزم تمرين است. تمرين مي تواند مهارت هاي شما را ارتقا دهد، اما همچنين مي تواند احتمال خطا را بالا ببرد زيرا برنامه نويسي كار ساده اي نيست. Dreamweaver به اين مسئله اشراف دارد، و به همين دليل در آخرين نسخه خود كهCreative Cloud (CC) نام دارد، ويژگي support Linting را اضافه كرده است. Linting يك ابزار اصلي براي چك كردن نحوه برنامه نويسي است كه براي CSS ، HTML و JavaScript در دسترس است. در صورتي كه Dreamweaver مشكل يا خطايي را شناسايي كند، علامت هاي خاصي را ارسال خواهد كرد.
براي آزمايش اين ويژگي، يك صفحه پر از كد را در Dreamweaver باز كنيد. يك علامت سبز كوچك در يك دايره در سمت راست نوار وضعيت مشاهده خواهيد كرد. اگر فقط يك علامت سبز كوچك درون يك دايره مشاهده كنيد، مشكلي وجود ندارد. اما اگر يك علامت ضربدر قرمز در دايره قرمز مشاهده كنيد، اين يعني برنامه نويسي شما مشكلي دارد كه نيازمند بررسي است. با كليك كردن روي علامت خطا، به ستون و رديفي كه دچار خطا شده ايد، هدايت خواهيد شد. هيچ محدوديتي براي استفاده از اين ويژگي وجود ندارد بنابراين مي توانيد تا زماني كه نشانه سبز ظاهر نشده، از آن استفاده كنيد.
۹- بررسي سازگاري مرورگرها
قابليت مرور يكي از اساسي ترين موارد در فرآيند توسعه وب است. به همين دليل Dreamweaver اين كار را براي شما آسانتر كرده است. سندي را كه مي خواهيد سازگاري آن را بررسي كنيد باز كنيد. در نوار منو كه در آن نمادهاي كد، تقسيم و گزينه هاي نمايش طراحي قرار گرفته اند، گزينه ديگري وجود دارد كه “Check Page” نام دارد.
با كليك بر روي آن، يك منوي كشويي باز خواهد شد، heck browser compatibility را در آن انتخاب كنيد سپس نتيجه را در يك پنجره جداگانه مشاهده كنيد.
- شنبه ۲۸ دی ۹۸ | ۱۳:۰۰ ۹ بازديد
- ۰ نظر