Upload
bevis
View
199
Download
7
Embed Size (px)
DESCRIPTION
Introduction to Visual Studio .NET. Introduction to ASP.NET By Kathleen Kalata. Objectives. In this chapter, you will: Familiarize yourself with the Visual Studio .NET user interface Create Web pages using the Visual Studio .NET HTML editor - PowerPoint PPT Presentation
Citation preview
Chapter 2 2
Objectives
• In this chapter, you will:
• Familiarize yourself with the Visual Studio .NET user interface
• Create Web pages using the Visual Studio .NET HTML editor
• Use Visual Studio .NET to create reusable User Controls
• Create Cascading Style Sheets with the Style Builder
• Customize the Toolbox
• Locate help resources within Visual Studio .NET
Chapter 2 3
Visual Studio .NET User Interface
• Start Page – used to locate help resources and configure the user preferences
• Solution Explorer – used to manage the files and resources within the Web project
• Main Window – working window where you enter code and design the Web pages
• Document Tab – allows you to easily switch between files
Chapter 2 4
Visual Studio .NET User Interface
• Server Explorer – identifies public components on the servers and data connections
• Task Window – manages a to do list
• Macros Explorer – manages macros which can be shared with other developers
Chapter 2 7
The Solution Explorer Window
• Use the Solution Explorer window to create a folder and import files into your project
• All of the data folders are named after the chapter (i.e. Chapter02Data, Chapter03Data etc.)
• Add new items using the menu selections or shortcut menu
Chapter 2 8
The Toolbox
• The toolbox can be compared to a toolbox in a workroom
• The tabs represent the drawers that contain the actual tools
• There are several preconfigured tabs that are grouped by the type of tools that they contain
– The HTML tab contains the HTML controls
– The WebForms tab contains ASP.NET Server controls
Chapter 2 9
The Properties Window
• You can set some HTML properties in dialogue boxes
• Most controls use the Properties window to change the property settings
Chapter 2 10
HTML Controls
• HTML controls are client-side controls
– The runat property must be changed to server to make the control a server-side control
– When you create Web applications using Visual Studio .NET, the HTML controls create HTML that is XHTML compliant
• XHTML is the latest version of HTML.
– W3C maintains the standards
• XML requires that all tags contain a beginning and closing tag
– Tags that do not use a closing tag can be closed using a forward slash at the end of the beginning tag
– Minimized attributes must be written using a name and a value
Chapter 2 11
HTML Controls
• For example, instead of <hr noshade> the HTML editor writes <hr noshade="noshade"/>
• The HTML editor is also known as the HTML designer
– The two views are the Design View and the Code View
– In Design View, controls can be dragged and dropped onto the page
– The MS_POSITIONING property allows you to absolutely position elements in the Main Window
– In the HTML view, you can use IntelliSense which detects what you have typed, and tries to predict what you will type next
Chapter 2 12
Creating an HTML Page with Visual Studio .NET
• Create a basic HTML page named feedback.htm
• Modify properties using the Design view and HTML view
• Use the IntelliSense feature, and modify properties using the dialogue windows and the Properties Window
• In most browsers, the user can change the font size property
• Therefore, your final Web page may appear different
Chapter 2 14
User Controls
• User Controls are a form of compiled ASP.NET pages that can contain HTML, client-side scripts, and ASP.NET server code which allow you to separate content that can later be reused in other pages
• Suggested uses for User Controls
– heading images and banners
– lists of records returned from a database
– footers
– menus
– commonly used forms
Chapter 2 15
How to Create the User Control
• You cannot include the <html>, <head>, or <body> elements in the User Control
• The User Control file extension must have the file extension .ascx
• The first line of the User Control must identify the file as a User Control with the keyword Control
• Because the User Control can contain code, it also will contain a reference to its own code behind the page
– In Visual Studio .NET you can double click on the user control to open its code behind the page
Chapter 2 16
Sample Code for months.ascx
<%@ Control %>
<select id=months><option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
Chapter 2 17
Insert a User Control within an ASP.NET page
• You can insert the User Control into an ASP.NET page
• First, you must register the control
• Then, you can insert, and reuse the control within the same page
• In this exercise you will insert the date into the Web page
– In ASP.NET the date is an object, not a function as in VBScript
– The format of the date is selected based on the ToShortDateString preset format
Chapter 2 18
Register the User Control
• To register the control, the first line of the page must contain the @Register directive
• The TagPrefix property is used to identify the User Control’s namespace, like the ASP prefix with ASP controls
<%@ Register TagPrefix="Months" TagName="ListMonths" src="months.ascx" %>
Chapter 2 19
Insert the Control
• Once the TagPrefix has been registered, you can add an ASP.NET tag with the TagPrefix
– You can use the new tag anywhere in the Web page
– You can reuse any user control many times within the same page
– However, you must provide a unique ID name for each user control
<UC:Months id = "Month1" runat = "server"/>
Chapter 2 20
Create a User Control in a Web Page
• The User Control contains an image, and some basic ASP.NET code
• In the Web page, you will register the User Control and add the new tag to the Web page
• The prefix for the user control is named Chapter 2
– It’s useful to name the prefix using a standard name such as the name of the company or a generic name such as UC (user control)
Chapter 2 21
Creating Cascading Style Sheets
• The World Wide Web Consortium (www.w3c.org) is responsible for developing and maintaining the CSS standards
• You can create your cascading style sheet manually, or use a Style Builder graphical user interface to create your style sheet
• When you create an ASP.NET application, a default style sheet named styles.css is created
• A style rule is the information that is applied to a single HTML tag
Chapter 2 22
Inline Style Rules
• Inline style rules add the style information within the HTML tag
• The inline style rule would only be applied to the single tag
• The style property is used to identify the style rule<tagname "style:property1=value;property2=value2">
Content goes here
</tagname>
• Example
<H1 "style:color=green;size=12">Welcome to Tara Store!</H1>
Chapter 2 23
Embedded Style Rules
• Embedded style sheet rules are located in the heading section of the Web page
– A single pair of style tags <style></style> is used to identify the embedded style rules
– Because embedded style sheet rules are placed in the heading section, they can be applied to more than one tag within the HTML page
• For example, a paragraph tag that is formatted in the embedded style sheet would be reflected in all the paragraph tags within the Web page
ElementName {
PropertyName: value;
PropertyName: value;
}
Chapter 2 24
Sample Embedded Style Rules
<HTML><HEAD><TITLE>Sample Embedded Style Sheet</TITLE>
<STYLE>
H1{
color=green;
size=12"
}
</STYLE>
</HEAD>
<BODY>
<H1>Welcome to Tara Store!</H1>
</BODY></HTML>
Chapter 2 25
External Style Sheet Rules
• External style sheets are used to apply style rules across multiple Web pages
• Each Web page must include a reference to the external style sheet using a <LINK> tag
• When a paragraph tag is formatted in an external style sheet rule, all of the paragraphs within the Web pages will apply the new style rule
• The name of the file of the external style sheet ends with .css such as MyStyle.css
Chapter 2 26
Sample External StyleSheet named MyStyles.css
H1{
color=green;
size=12"
}
• Note:
– These three types of cascading style sheets can contain conflicting styles rules
– These conflicts are resolved through a series of cascading rules
– In most cases, inline style sheet rules take precedence over embedded style rules, and embedded style rules take precedence over external style rules
Chapter 2 27
Linking the Style Sheet to the Web Page
• The <LINK> tag is an HTML tag that is used to identify the location of the external style sheet
– The rel property indicates that the linked document contains a style sheet. In an external style sheet, the style tags are omitted because there the rel property indicates that the linked file is a style sheet
– The type property is used to indicate the MIME which identifies that the file is a style sheet
– The href property is used to indicate the location of the external style sheet
Link rel=stylesheet type=”text/css” href=”URL”
Chapter 2 28
Sample Web Page
<HTML><HEAD><TITLE>Sample Embedded Style Sheet</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="MyStyle.css">
</HEAD>
<BODY>
<H1>Welcome to Tara Store!</H1>
</BODY></HTML>
Chapter 2 29
Comments
• /* */ for multi-line comments
• // for inline comments * Styles.CSS
Created By: Katie Kalata
Date Created: 9/5/2002
This style sheet is used to format the main menu
*/
H1 {color:green} // Green is the color of the corporate logo
H2 {color:red} // Red is the color of the heading
H3 {color:blue} // Blue is the color of the menu
Chapter 2 30
Classes
• A class can be used to format a group of
different tags or a subgroup of a specific
tag. Then, in the Web page, you could
format any element with the class
• In the following code, the selected item
would appear red, and the headings would
both be blue
Chapter 2 31
Example
<HTML><HEAD><TITLE>Sample Embedded Style Sheet</TITLE>
<STYLE>
H1 {color:green}
.SelCat {color:red}
.BlueHead {color:blue}
</STYLE>
</HEAD>
<BODY>
…
</BODY></HTML>
Chapter 2 32
Example
<h1>Welcome to Tara Store!</h1>
<h2 class="BlueHead">Product Listing:</h2>
<ul>
<li>Gifts</li>
<li class="SelCat">Jewelry</li>
<li>China & Crystal</li>
…
<li>Books, Music, & Videos</li>
</ul>
<h3 class="BlueHead">About Tara Store</h3>
<ul>
<li>What’s New</li>
…
<li>Members Only</li>
</ul>
</BODY></HTML>
Chapter 2 33
Using the CSS Editor
• Visual Studio .NET comes with a complete CSS editor called the Style Builder
• Visual Studio .NET includes the IntelliSense feature within the CSS editor which is useful when you choose to enter your style rules manually
• You can navigate across these style properties using the menu located on the left side of the Style Builder window
Chapter 2 34
Using the CSS Editor
• There are four tabs in the Color Picker which identify how the colors are commonly used:
– The Web Colors tab provides 216 colors that are supported by the majority of computers and browsers
– The Named Colors tab provides the 16 Windows colors and the 122 other named colors
– The System Colors tab allows you to select a color that matches the colors used to create system graphical user interfaces such as windows, menus, scrollbars, and buttons
– The Custom Color tab allows you to use three slider controls to select the red, green, and blue (RGB) values
Chapter 2 38
Customize the Toolbox
• The Clipboard Ring is a toolbox tool that stores the list of items that have previously been copied to the Clipboard
• The Clipboard is the area in memory that Windows uses to copy information that can be used in another part of a document or program
• You can add additional tabs within the toolbox to help organize your frequently used code
• Add a code fragment to the toolbox and rename the tab
Chapter 2 39
Using Visual Studio .NET Help Resources
• You can view the actual URL of the help files in the URL drop-down list box on the Web toolbar
• All help methods provide results in a ranked list
• You can double-click on the items in the list to view the documentation from within the user interface
– Dynamic help provides help for the currently selected item
– Search help provides a textbox to enter a search phrase
– Index help provides a dictionary index that you can search for a term alphabetically
– Contents help allows you navigate the help documentation using a table of contents