Transcription
Chapter 3How to use HTML5and CSS3 with ASP.NETapplicationsMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 1
IntelliSense as an HTML element is enteredin Source viewIntelliSense options including snippets are displayedas you start a tagPress the Tab key twice to enter the snippet for the tagMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 2
The smart indent featureIf you press the Enter key when the cursoris in the content area.the ending tag is dropped down two lineswith the cursor where you want itMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 3
Other Video Studio features for entering HTML If you change the starting tag for an element, the ending tag willbe automatically changed too. If you enter the opening tag followed by the letters that arecapitalized in the name of a control, like cb for theasp:CheckBox control, IntelliSense will list the control. When you start the entry of an attribute, IntelliSense lists theattributes that apply to the HTML element.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 4
Types of disabilities Visual Hearing Motor CognitiveMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 5
IntelliSense with a list of WAI-ARIA valuesIntelliSense with a list of ARIA attributesMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 6
An external style sheet in Visual StudioMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 7
How to create an external style sheet Right-click on the project in the Solution Explorer. Then, choose the Add Style Sheet command, type the name forthe new style sheet, and click OK.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 8
How to enter and edit the stylesfor an external style sheet Open the style sheet in the Editor, and enter the styles into thestyle sheet. If necessary, modify the aspx code so it provides the ids and classnames that you need for the selectors in the style sheet. After you enter a rule set or a series of rule sets, switch to Designview to see whether the styles are working the way you want themto. Or, test the form in a browser.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 9
How to comment out and uncomment CSS rules Press Ctrl K, Ctrl C to comment out selected rules, or Ctrl K ,Ctrl U to uncomment them. Or, click the Comment or Uncomment button in the Style Sheettoolbar.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 10
How to use the CSS Outline window Use the VIEW Other Windows Document Outline commandto open this window. Then, to navigate to a rule set in the style sheet, click on itsselector in this window.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 11
The New Style dialog boxMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 12
How to create a new style From Design view, open the New Style dialog box by choosingthe FORMAT New Style command or by selecting Apply NewStyle from the Target Rule drop-down list in the Formattingtoolbar. In the New Style dialog box, enter or select the Selector for thestyle, select Existing Style Sheet from the Define In list, and usethe Browse button for the URL entry to find the style sheet youwant the new style to be placed in. To specify the rules for the style, select a Category and set thevalues for the properties in that category. Continue with any of the other categories.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 13
How to modify a style In the Editor for a style sheet, right-click in a style and selectBuild Style or click on the Build Style button in the Style Sheettoolbar. In the Modify Style dialog box, select a category and set or resetthe values for the properties in that category. Continue with any of the other categories.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 14
The Apply Styles windowMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 15
How to display the Apply Styles window In any of the Designer views, use the VIEW Apply Stylescommand.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 16
How to use the Apply Styles window To view the properties for a style, just point to the style in theApply Styles window. To apply a class style to one or more elements, select the elementsand click on the style in the Apply Styles window. That adds theappropriate class attribute to the HTML for the elements. To apply one or more class styles to a single element, select theelement, hold down the Ctrl key, and click on the styles that youwant to apply in the Apply Styles window. Repeat this process toremove one or more classes from an element. To start a new style, click the New Style button in the ApplyStyles toolbar. Or, select any style and choose New Style from itsdrop-down list. To modify an existing style, select it and choose Modify Stylefrom its drop-down list.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 17
How to use the Apply Styles window (cont.) To delete a style, select it and choose Delete Style from its dropdown list. To remove all class and inline styles for selected elements, clickClear Styles. This removes the class and style attributes from theelements.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 18
The CSS Properties windowMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 19
How to display the CSS Properties window In any of the Designer views, use the VIEW CSS Propertiescommand.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 20
How to use the CSS Properties window To review the properties for an element, select it and click theSummary button. Then, the Applied Rules pane shows all of therule sets that have been applied to the element, and the CSSProperties pane shows all of the rules that have been applied. If arule has been overridden, it is crossed out in the CSS Propertiespane. To modify the styles for an element in the Designer, select it. Or,to modify the styles for an existing rule set, select it in the AppliedRules pane. Then, in the CSS Properties pane, click on a propertyand change the value in the column to the right of it. To sort the properties by category, alphabetically, or by theproperties that have been applied, use the buttons in the toolbarfor this window.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 21
The Manage Styles windowMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 22
How to display the Manage Styles window In any of the Designer views, use the VIEW Manage Stylescommand.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 23
How to use the Manage Styles window To move a style from one style sheet to another, drag and drop iton the style sheet name or “Current Page”. To change the order of the styles in the style sheet, selectCategorize by Order from the drop-down Options list in theManage Styles toolbar. Then, drag and drop a style in its newlocation. To display the properties of a style in the Manage Styles window,point to it. To show the preview for a style, select it in the Manage Styleswindow. If the preview isn’t displayed, select Display SelectedStyle Preview from the drop-down Options list.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 24
Extra 3-1Use CSS to format the Quotation app Start by using the CSS file for the Future Value application toformat this form. Use the rule sets for the entry, validator, and button classes toformat the text boxes, validators, and button. Add a rule set for a “result” class that formats the results in thetwo label controls.Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 25
Assignment 3-1Design the asp.net app as show belowMurach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc.Slide 26
Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 3 The smart
