Using CSS Styling with Web Forms UI Controls – हालांकि Visual Studio के Design Mode का प्रयोग करते हुए हम हमारे Web Forms Page का Basic Structure Create कर सकते हैं और सभी जरूरी Required Web Controls को अपने Page पर Drag-and-Drop तकनीक का प्रयोग करते हुए Place कर सकते हैं, लेकिन Visual Studio का Design Mode भी हमें हमारे Web Forms के Controls को व्यवस्थित तरीके से Position करने की सुविधा Drag-and-Drop तकनीक का प्रयोग करते हुए Provide करने में सक्षम नहीं है।
इसीलिए Visual Studio हमें हमारे Web Forms की Styling करने के लिए यानी Web Page के Controls का Look and Feel तथा Layout Setup करने के लिए CSS Styling को Use करने की सुविधा देता है, जो कि किसी भी Web Page की Styling करने का Natural तरीका होता है।
लेकिन हमें हमारे Web Form की Styling करने के लिए CSS Rules को Manually Specify करने की जरूरत नहीं होती, बल्कि हम Visually अपने Web Forms के विभिन्न Controls की Styling करते हैं और Visual Studio उन Styling को Perform करने के लिए Backend में स्वयं ही Automatically CSS Rules Generate करता रहता है, ठीक उसी तरह से जिस तरह से हम Visual Studio के Design Mode में Web Controls को Form पर Drag-and-Drop तकनीक का प्रयोग करते हुए Draw करते हैं तथा उनकी Properties को Properties Sidebarद्वारा Setup करते हैं, जबकि Visual Studio उन Controls व उनकी Properties को Setup करने के लिए Automatically Markups Create करता रहता है।
हालांकि यदि हम चाहें तो Manual CSS Code भी लिख सकते हैं और उस Code का Effect अपने Web Page पर देख सकते हैं। लेकिन Manual Styling Rules से सम्बंधित Codes लिखने के लिए CSS का पर्याप्त ज्ञान होना जरूरी होता है। साथ ही यदि आपको CSS का उपयुक्त ज्ञान हो, तो Automatically Generate होने वाले CSS Codes की Fine Tuning करना भी काफी सुविधाजनक हो जाता है और क्योंकि हम ASP.NET का प्रयोग करते हुए Web Application Develop करने के बारे में सीख रहे हैं।
इसलिए Web Applications से सम्बंधितCore Technologies ( HTML, CSS, JavaScript, etc…) को सीखना निश्चित रूप से उपयोगी ही साबित होता है, जो कि उस समय और भी ज्यादा महत्वपूर्ण हो जाता है, जब हम ASP.NET MVC Use करते हुए अपना Web Application Develop करते हैं, क्योंकि MVC में हमें पूरी तरह से Manual Codes पर ही निर्भर रहना होता है।
यदि आपको CSS का उपयुक्त ज्ञान न हो, तो आप हमारी पुस्तक “ HTML5 with CSS3 in Hindi” भी पढ सकते हैं, जिसमें HTML5 Elements के साथ CSS3 के Rules को Use करते हुए किसी Web Page को Design करने से सम्बंधित बहुत ही उपयोगी जानकारी बिल्कुल सरल भाषा में व विभिन्न प्रकार के Example Codes के साथ दी गई है।
किसी Element की Styling करने के लिए Visual Studio हमें Adobe के DreamWeaver की तरह ही एक Dialog Box Provide करता है, जिसका प्रयोग करके हम Visual तरीके से किसी Selected Element की Styling कर सकते हैं। इस Dialog Box को प्राप्त करने के लिए सबसे पहले हमें VIEW => Manage Styles नाम के Option को Click करना होता है, जिसके परिणामस्वरूप एक नया Window Display होता है, जिसे Drag-and-Drop तकनीक का प्रयोग करते हुए हम हमारे Right Sidebar के साथ Dock कर सकते हैं। ये Sidebar कुछ निम्नानुसार दिखाई देता है:
इस Sidebar पर हमें उपरोक्त चित्रानुसार दो Buttons दिखाई देते हैं, जहां दूसरे Button पर Click करके हम किसी अलग से बनी हुई Stylesheet को अपने Webpage के साथ Graphical तरीके से Attach कर सकते हैं, जबकि “New Style” नाम के पहले Button पर Click करते ही हमारे सामने निम्न चित्रानुसार एक Dialog Box Display होता है:
इस Dialog Box का प्रयोग करके हम हमारे Web Page के Web Forms के Layout व Styling को Setup करने के लिए Visual तरीके से CSS Rules Generate कर सकते हैं और उसे Current Page के<head> Section में अथवा किसी नई Stylesheet File में या फिर किसी पहले से बनी Stylesheet File में Add करने के लिए इसी Dialog Box पर दिखाई देने वाले “Define in:” Combobox को Use कर सकते हैं।
हालांकि इस Dialog Box द्वारा विभिन्न CSS Rules Automatically Generate होते हैं, लेकिन इस तरीके की एक परेशानी ये है कि एक ही Element की Styling के लिए यदि हम इस Style Dialog Box को एक से ज्यादा बार Use करते हैं, तो हर बार Dialog Box को Close करके फिर से Open करने पर एक नया Selector Statement Create होता है।
यानी यदि हम Label Element की दो अलग Styling के लिए इस Dialog Box को दो बार Open करके Setup करें, तो हमारा CSS Rule निम्नानुसार Create होता है, जहां एक ही Selector के लिए दो अलग Styling Rules के लिए दो अलग CSS Codes Create हो रहे हैं:
[code]
<styletype="text/css">
Label {
text-align: right;
}
Label {
width: 200px;
}
</style>
[/code]इसलिए हालांकि इस Dialog Box का प्रयोग करते हुए हम अपने Web Page के लिए Visually तरीके से CSS Styling कर सकते हैं, लेकिन Create होने वाले CSS Rules को Fine Tune करने के लिए Manual Coding को Check करना बेहतर रहता है।
इसके अलावा VIEW =>CSS Properties Option को Click करके Display होने वाले Window को भी हम हमारे Visual Studio के Sidebar के साथ Dock कर सकते हैं। इस Sidebar की विशेषता ये है कि हम जिस किसी भी Web Form Control को Select करते हैं, इस Sidebar में उस Control के साथ Associated सभी CSS Rules उनकी Values के साथ दिखाई देने लगते हैं। साथ ही यदि हम चाहें, तो उन Controls के साथ एक Rules भी Add कर सकते हैं, जो कि Automatically Backend में CSS Stylesheet को Update करते रहते हैं।
CSS Properties Sidebar में हमें CSS Dialog Box की तुलना में ज्यादा CSS Rules दिखाई देते हैं, जिन्हें हम किसी Individual Element पर भी Apply कर सकते हैं और Group Element जैसे कि किसी CSS Class पर भी।
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook Core ASP.NET WebForms with C# in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
Core ASP.NET WebForms in Hindi | Page:647 | Format: PDF
