Chapter 3 How to use HTML5 and CSS3 with ASP.NET applications

Transcription

1 Chapter 3 How to use HTML5 and CSS3 with ASP.NET applications Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 1

2 IntelliSense as an HTML element is entered in Source view IntelliSense options including snippets are displayed as you start a tag Press the Tab key twice to enter the snippet for the tag Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 2

3 The smart indent feature If you press the Enter key when the cursor is in the content area......the ending tag is dropped down two lines with the cursor where you want it Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 3

4 Other Video Studio features for entering HTML If you change the starting tag for an element, the ending tag will be automatically changed too. If you enter the opening tag followed by the letters that are capitalized in the name of a control, like <cb for the asp:checkbox control, IntelliSense will list the control. When you start the entry of an attribute, IntelliSense lists the attributes that apply to the HTML element. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 4

5 Types of disabilities Visual Hearing Motor Cognitive Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 5

6 IntelliSense with a list of WAI-ARIA values IntelliSense with a list of ARIA attributes Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 6

7 An external style sheet in Visual Studio Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 7

8 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 for the new style sheet, and click OK. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 8

9 How to enter and edit the styles for an external style sheet Open the style sheet in the Editor, and enter the styles into the style sheet. If necessary, modify the aspx code so it provides the ids and class names that you need for the selectors in the style sheet. After you enter a rule set or a series of rule sets, switch to Design view to see whether the styles are working the way you want them to. Or, test the form in a browser. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 9

10 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 Sheet toolbar. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 10

11 How to use the CSS Outline window Use the VIEW Other Windows Document Outline command to open this window. Then, to navigate to a rule set in the style sheet, click on its selector in this window. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 11

12 The New Style dialog box Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 12

13 How to create a new style From Design view, open the New Style dialog box by choosing the FORMAT New Style command or by selecting Apply New Style from the Target Rule drop-down list in the Formatting toolbar. In the New Style dialog box, enter or select the Selector for the style, select Existing Style Sheet from the Define In list, and use the Browse button for the URL entry to find the style sheet you want the new style to be placed in. To specify the rules for the style, select a Category and set the 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 13

14 How to modify a style In the Editor for a style sheet, right-click in a style and select Build Style or click on the Build Style button in the Style Sheet toolbar. In the Modify Style dialog box, select a category and set or reset the 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

15 The Apply Styles window Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 15

16 How to display the Apply Styles window In any of the Designer views, use the VIEW Apply Styles command. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 16

17 How to use the Apply Styles window To view the properties for a style, just point to the style in the Apply Styles window. To apply a class style to one or more elements, select the elements and click on the style in the Apply Styles window. That adds the appropriate class attribute to the HTML for the elements. To apply one or more class styles to a single element, select the element, hold down the Ctrl key, and click on the styles that you want to apply in the Apply Styles window. Repeat this process to remove one or more classes from an element. To start a new style, click the New Style button in the Apply Styles toolbar. Or, select any style and choose New Style from its drop-down list. To modify an existing style, select it and choose Modify Style from its drop-down list. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 17

18 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, click Clear Styles. This removes the class and style attributes from the elements. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 18

19 The CSS Properties window Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 19

20 How to display the CSS Properties window In any of the Designer views, use the VIEW CSS Properties command. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 20

21 How to use the CSS Properties window To review the properties for an element, select it and click the Summary button. Then, the Applied Rules pane shows all of the rule sets that have been applied to the element, and the CSS Properties pane shows all of the rules that have been applied. If a rule has been overridden, it is crossed out in the CSS Properties pane. 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 Applied Rules pane. Then, in the CSS Properties pane, click on a property and change the value in the column to the right of it. To sort the properties by category, alphabetically, or by the properties that have been applied, use the buttons in the toolbar for this window. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 21

22 The Manage Styles window Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 22

23 How to display the Manage Styles window In any of the Designer views, use the VIEW Manage Styles command. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 23

24 How to use the Manage Styles window To move a style from one style sheet to another, drag and drop it on the style sheet name or Current Page. To change the order of the styles in the style sheet, select Categorize by Order from the drop-down Options list in the Manage Styles toolbar. Then, drag and drop a style in its new location. 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 Styles window. If the preview isn t displayed, select Display Selected Style Preview from the drop-down Options list. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 24

25 Extra 3-1 Use CSS to format the Quotation app Start by using the CSS file for the Future Value application to format this form. Use the rule sets for the entry, validator, and button classes to format the text boxes, validators, and button. Add a rule set for a result class that formats the results in the two label controls. Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 25

26 Assignment 3-1 Design the asp.net app as show below Murach's ASP.NET 4.5/C#, C3 2013, Mike Murach & Associates, Inc. Slide 26