ASP.NET 2.0 UI

Creating a new Web site

In this demonstration, you will create a new Web site with Visual Web Developer Express. You will then add two pages and some static HTML to each page. The goal is to familiarize students with the environment and the features available for laying out pages.

Steps
1. Launch Microsoft Visual Web Developer 2005 or 2008 Express Edition. 2. Select File \| New Web Site... . 3. In the New Web Site window, select ASP.NET Web Site. 4. For Location, enter “C:\demos\MyWebSite” or a location where you can find your website. 5. For Language select Visual Basic or C#. 6. Click OK. 7. Notice Default.aspx as it is displayed in Source or Design mode (see the tabs at the bottom of the page.) 8. Switch to Design mode by selecting the Design tab at the bottom of the window. 9. Type in some text, like This is my home page. 10. Select the text, and using the Formatting toolbar, select a Block Format of H1. 11. Hit Enter after your title text, and type in Home Page1 Page2 for navigation links. a. Select the word Home and select the Convert to Hyperlink button from the Formatting toolbar . b. Use the Browse button in the Hyperlink dialog to choose your Default.aspx page. 12. Add two new pages (Add New Item) to your site, Page1.aspx and Page2.aspx. a. In the Solution Explorer window, right-click on the Web site and select Add New Item… . b. Select Web Form, and name the file Page1.aspx, make sure the Place code in separate file option is not selected. c. Repeat last two sub steps for Page2.aspx. 13. Open your Default.aspx page again in design mode, and turn Page1 and Page2 into hyperlinks. a. Select the word Page1 and select the Convert to Hyperlink button from the Formatting toolbar. b. Use the Browse button in the Hyperlink dialog to choose your Page1.aspx page. c. Repeat the last two sub steps for Page2 and Page2.aspx 14. Open the HTML tab in the toolbox and drag a Horizontal Rule under the hyperlinks. 15. Type some text under the Horizontal Rule as content on your page. 16. Your completed page should resemble: 17. Select the header text, hyperlinks, and horizontal rule in your Default.aspx page and copy it (Ctrl-C). 18. Open Page1.aspx in Design mode, and paste (Ctrl-V) the contents of the clipboard at the top of the page. Fix any formatting as needed, and change the title text to This is Page1. a. Repeat this step for Page2.aspx. 19. Try running your sample site by using Debug \| Start Without Debugging (Ctrl-F5). a. You should have a fully functioning site with the ability to navigate from the home page to Page1 and Page 2 and back again. b. Feel free to add more content or change styles to enhance the site.

Steps

1. Launch Microsoft Visual Web Developer 2005 or 2008 Express Edition.

2. Select File | New Web Site... .

3. In the New Web Site window, select ASP.NET Web Site.

4. For Location, enter “C:\demos\MyWebSite” or a location where you can find your website.

5. For Language select Visual Basic or C#.

6. Click OK.

7. Notice Default.aspx as it is displayed in Source or Design mode (see the tabs at the bottom of the page.)

8. Switch to Design mode by selecting the Design tab at the bottom of the window.

9. Type in some text, like This is my home page.

10. Select the text, and using the Formatting toolbar, select a Block Format of H1.

11. Hit Enter after your title text, and type in Home Page1 Page2 for navigation links.

a. Select the word Home and select the Convert to Hyperlink button from the Formatting toolbar .

b. Use the Browse button in the Hyperlink dialog to choose your Default.aspx page.

12. Add two new pages (Add New Item) to your site, Page1.aspx and Page2.aspx.

a. In the Solution Explorer window, right-click on the Web site and select Add New Item… .

b. Select Web Form, and name the file Page1.aspx, make sure the Place code in separate file option is not selected.

c. Repeat last two sub steps for Page2.aspx.

13. Open your Default.aspx page again in design mode, and turn Page1 and Page2 into hyperlinks.

a. Select the word Page1 and select the Convert to Hyperlink button from the Formatting toolbar.

b. Use the Browse button in the Hyperlink dialog to choose your Page1.aspx page.

c. Repeat the last two sub steps for Page2 and Page2.aspx

14. Open the HTML tab in the toolbox and drag a Horizontal Rule under the hyperlinks.

15. Type some text under the Horizontal Rule as content on your page.

16. Your completed page should resemble:

17. Select the header text, hyperlinks, and horizontal rule in your Default.aspx page and copy it (Ctrl-C).

18. Open Page1.aspx in Design mode, and paste (Ctrl-V) the contents of the clipboard at the top of the page. Fix any formatting as needed, and change the title text to This is Page1.

a. Repeat this step for Page2.aspx.

19. Try running your sample site by using Debug | Start Without Debugging (Ctrl-F5).

a. You should have a fully functioning site with the ability to navigate from the home page to Page1 and Page 2 and back again.

b. Feel free to add more content or change styles to enhance the site.