سلام کاربران رجیرانی و دوستان عزیز ، حال شما امیدوارم که خوب وخوش باشید و سلامت باشید و از مطلب اموزشی امروز بهره لازم را ببرید.
سبک Inspection و پنجره ی HTML:
پس از آن نگاه کوتاهی به پنجره ی HTML داشته باشید و اینکه چگونه عناصر را برای شما طراحی می کند.
روی Inspect کلیک کنید تا صفحه ی Inspector را در حالت Inspection قرار دهید.
بالای صفحه را که عبارت “Your logo here” را می بینید، کلیک کنید. شما در حال بررسی یک عنصر خاص با جزئیات بیشتر هستید، بنابراین نمایش ارائه شده در پنجره ی مرورگر با حرکت نشانگر ماوس، دیگر تغییر نمی کند.
اکنون نشانگر ماوس را در پنجره ی HTML حرکت دهید. وقتی که ماوس را حرکت می دهید، Page Inspector طرح کلی عنصر داخل پنجره ی HTML را ارائه می دهد و عنصر مرتبط در پنجره ی مرورگر را مشخص می کند.
مانند قبل صفحه ی Inspector فایل _Layout.cshtml را در یک تب موقت برای شما باز می کند. روی تب موقت _Layout.cshtml کلیک کنید و مارک آپ مرتبط در بخش <header> برای شما مشخص خواهد شد.
تغییرات نمای CSS در روش های ویندوز:
سپس از صفحه ی Inspector پنجره ی Styles برای مشاهده ی تغییرات در CSS استفاده خواهید کرد.
روی Inspect کلیک کنید تا صفحه ی Inspector را در حالت Inspection قرار دهید.
در پنجره ی مرورگر Page Inspector نشانگر ماوس را روی قسمت “Home Page” حرکت دهید تا اینکه برچسب div.content-wrapper ظاهر شود.
یک بار در داخل قسمت div.content-wrapper کلیک کنید و سپس نشانگر ماوس را به سمت پنجره ی Styles حرکت دهید. پنجره ی Styles تمام قوانین مربوط به CSS را برای این عنصر نشان می دهد. به سمت پایین صفحه بروید تا گروه کنترل کننده ی .featured .content-wrapper را پیدا کنید. اکنون چک باکس پراپرتی background-color را پاک کنید.
دقت داشته باشید که تغییرات در مرورگر پنجره ی Page Inspector چگونه نمایش داده می شوند.
چک باکس را مجددا انتخاب کنید و روی مقدار پراپرتی دابل کلیک کنید آن را به red تغییر دهید. تغییرات فورا نمایش داده می شوند.
پنجره ی Styles تست و تغییرات نمای CSS را، قبل از اینکه تغییرات را به خود صفحه اعمال کنید، ساده می کند.
CSS Auto Sync
این ویژگی به ورژن ۱٫۳ از Page Inspector نیاز دارد.
ویژگی CSS Auto-Sync به شما اجازه می دهد تا یک فایل CSS را مستقیما ویرایش کنید و تغییرات را فورا در مرورگر Page Inspector مشاهده کنید.
روی Inspect کلیک کنید تا Page Inspector را در حالت inspection قرار دهید. در مرورگر Page Inspector اشاره گر ماوس را روی بخش “Home Page” حرکت دهید تا اینکه برچسب div.content-wrapper ظاهر شود. یک بار کلیک کنید تا این عنصر انتخاب شود.
پنجره ی Syles همه ی قوانین CSS را برای این عنصر نشان می دهد. اسکرول را به سمت پایین صفحه ببرید تا انتخابگر .featured .content-wrapper را پیدا کنید. روی .featured .content-wrapper کلیک کنید. Page Inspector فایل CSS را باز می کند که این سبک را تعریف می کند و روش CSS متناظر را مشخص می کند.
اکنون مقدار را برای background-color به red تغییر دهید. تغییر فورا در مرورگر Page Inspector ظاهر می شود.
استفاده از انتخابگر رنگ CSS
ویرایشگر CSS در Visual Studio 2012 یک انتخابگر رنگ دارد که انتخاب و وارد کردن رنگ را آسان می کند. انتخابگر رنگ دارای یک پالت استاندارد از رنگ هاست که نام های رنگ های استاندارد، کدهای رمزدار، رنگ های RGB, RGBA, HSL, و HSLA را پشتیبانی می کند و لیستی از رنگ هایی که اخیرا بیشتر استفاده کرده اید را ارائه می دهد.
در بخش قبل مقدار پراپرتی background-color را تغییر دادید. برای تحریک انتخابگر رنگ نقطه ی اتصال را پس از نام پراپرتی یا نوع # قرار دهید.
روی رنگ کلیک کنید تا آن را انتخاب کنید یا روی پیکان رو به پایین کلیک کنید و سپس از پیکان های چپ و راست استفاده کنید تا رنگ ها را رد کنید. وقتی رنگی را مشاهده می کنید، مقدار شش ضلعی متناظر نمایش داده می شود.
اگر نوار رنگ، رنگ دقیقی را که شما می خواهید ندارد، می توانید از انتخابگر رنگ pop-down استفاده کنید. برای باز کردن آن نشان ^ دوتایی را در انتهای سمت راست نوار رنگ کلیک کنید و یا پیکان رو به پایین روی صفحه کلید را یک یا دوبار فشار دهید.
از نوار عمودی در سمت راست یک رنگ انتخاب کنید. این مسئله یک گرادیان برای رنگ در پنجره ی اصلی نشان می هد. با فشار دادن دکمه ی Enter یا کلیک کردن در هر نقطه ای در پنجره ی اصلی برای انتخاب با وضوح بیشتر، به طور مستقیم رنگی را از نوار عمودی انتخاب کنید.
اگر رنگی در صفحه ی کامپیوتر شما هست که می خواهید از آن استفاده کنید، می توانید مقدار آن را با استفاده از ابزار قطره چکان (eyedropper)، در قسمت پایین، سمت راست به دست آورید.
همچنین می توانید میزان تیرگی رنگ را با حرکت دادن اسلایدر در پایین انتخابگر رنگ تغییر دهید. این کار مقادیر رنگ را به مقادیر RGBA تغییر می دهد، زیرا فرمت RGBA می تواند تیرگی را نمایش دهد.
پس از اینکه رنگی را انتخاب کردید، Enter را فشار داده و سپس علامت نقطه ویرگول (؛) تایپ کنید تا ورودی رنگ زمینه را در فایل Site.css کامل کنید.
نوار آپدیت Page Inspector:
Page Inspector فورا تغییر مربوط به فایل Site.css را کشف می کند و یک هشدار در نوار آپدیت نمایش می دهد.
برای اینکه تمام فایل های خود را ذخیره کرده و مرورگر Page Inspector را رفرش کنید، Ctrl+Alt+Enter را فشار دهید و یا روی آپدیت بار کلیک کنید. تغییر با یک رنگ مشخص شده در مرورگر مشخص می شود.
طراحی عناصر صفحه ی پویا برای جاوااسکریپت:
در برنامه های مدرن وب، عناصر در صفحه معمولا به طور پویا با JavaScript تولید می شوند. که این بدین معناست که هیچ مارک آپ استاتیکی وجود ندارد که با این عناصر متناظر باشد.
اکنون با ورژن ۱٫۳, Page Inspector می توانید آیتم هایی را طراحی کنید که پس از کد متناظر JavaScript به طور پویا به صفحه اضافه شدند. برای توضیح این ویژگی از Single Page Application (SPA) template استفاده خواهیم کرد.
الگوی SPA به آپدیت ASP.NET and Web Tools 2012.2 نیاز دارد.
در Visual Studio عبارت File > New Project را انتخاب کنید. در سمت چپ Visual C# را باز کرده و Web و سپس ASP.NET MVC4 Web Application را انتخاب کرده و روی Ok کلیک کنید.
در دیالوگ باکس New ASP.NET MVC 4 Project ، عبارت Single Page Application را انتخاب کنید.
در Solution Explorer پوشه ی Views و سپس پوشه ی Home را باز کنید. روی فایل Index.cshtml راست کلیک کرده و View in Page Inspector را انتخاب کنید.
اولین موردی که در مرورگر Page Inspector نمایش داده می شود، صفحه ی login می باشد. روی Sign Up کلیک کرده و یک یوزرنیم و پسوورد ایجاد کنید. زمانیکه ثبت نام می کنید، برنامه شما را وارد سیستم کرده و یک لیست کار با چند نمونه آیتم ارائه می دهد.
روی Inspect کلیک کنید تا Page Inspector را در حالت Inspection قرار دهید. در مرورگر Page Inspector روی یکی از آیتم های انجام کلیک کنید. دقت داشته باشید که به جای های لایت شدن به رنگ آبی، عنصر به رنگ نارنجی با یک JS در کنار نام آن های لایت می شود. این امر نشان می دهد که آن عنصر به طور پویا و از طریق اسکریپت ایجاد شده است.
علاوه بر این یک خط نارنجی در تب Call Stack ظاهر می شود. این امر نشان می دهد که پین Call Stack اطلاعات بیشتری در مورد عنصر دارد.
روی تب Call Stack کلیک کنید. پین Call Stack عبارت call stack را برای JavaScript نشان می دهد که عنصر ایجاد شده را فرا می خواند. فراخوانی های کتابخانه های خارجی مانند jQuery از بین می رود، به طوریکه شما می توانید فراخوانی ها را به اسکریپت برنامه ی خود مشاهده کنید.
برای اینکه مجموعه ی کامل را ببینید، می توانید گره هایی با برچسب External Libraries را باز کنید.
اگر آیتمی را در call stack کلیک کنید، Visual Studio فایل کد را باز کرده و اسکریپت متناظر را مشخص می کند.
