and CSS3 with ASP.NET How to use HTML5 applications · 2017. 2. 12. · Murach's ASP.NET 4.5/C#, C3...

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


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


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


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.


Types of disabilities

Visual

Hearing

Motor

Cognitive


IntelliSense with a list of WAI-ARIA values

IntelliSense with a list of ARIA attributes


An external style sheet in Visual Studio


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.


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.


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.


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.


The New Style dialog box


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.


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.


The Apply Styles window


How to display the Apply Styles window

In any of the Designer views, use the VIEWApply Styles

command.


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.


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.


The CSS Properties window


How to display the CSS Properties window

In any of the Designer views, use the VIEWCSS Properties

command.


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.


The Manage Styles window


How to display the Manage Styles window

In any of the Designer views, use the VIEWManage Styles

command.


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.


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


Design the asp.net app as show below

and CSS3 with ASP.NET How to use HTML5 applications · 2017. 2. 12. · Murach's ASP.NET 4.5/C#, C3...

Documents

Transcript of and CSS3 with ASP.NET How to use HTML5 applications · 2017. 2. 12. · Murach's ASP.NET 4.5/C#, C3...