and css3 with asp.net how to use html5 applications · 2017. 2. 12. · murach's asp.net...
TRANSCRIPT
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 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 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 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 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 5
Types of disabilities
Visual
Hearing
Motor
Cognitive
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 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 7
An external style sheet in Visual Studio
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 8
How to create an external style sheet
Right-click on the project in the Solution Explorer.
Then, choose the AddStyle 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 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 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 11
How to use the CSS Outline window
Use the VIEWOther WindowsDocument 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 12
The New Style dialog box
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 13
How to create a new style
From Design view, open the New Style dialog box by choosing
the FORMATNew 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 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 15
The Apply Styles window
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 16
How to display the Apply Styles window
In any of the Designer views, use the VIEWApply Styles
command.
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 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 18
How to use the Apply Styles window (cont.)
To delete a style, select it and choose Delete Style from its drop-
down 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 19
The CSS Properties window
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 20
How to display the CSS Properties window
In any of the Designer views, use the VIEWCSS Properties
command.
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 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 22
The Manage Styles window
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 23
How to display the Manage Styles window
In any of the Designer views, use the VIEWManage Styles
command.
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 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 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.
Assignment 3-1
Murach's ASP.NET 4.5/C#, C3 © 2013, Mike Murach & Associates, Inc. Slide 26
Design the asp.net app as show below