Creating a Web Site Creating a new Web site Defining and using folders Creating and editing Web pages Viewing pages in a Web browser

Creating a Web Site From the standpoint of Visual Studio, a Web site is basically a folder that contains still more folders and all the files that make up a single, complete Web site. From Visual Studio’s menu bar, choose File ➪ New Web Site. Click ASP.NET Web Site. From the Location drop-down list, choose File System. From the Language drop-down list, choose a preferred programming language. As mentioned, we wil use Visual C# throughout this course. Optionally, change the location and name of the Web site. The site name is at the end of the lengthy path to the right of the Location drop-down list. In the example shown in Figure, I’ve opted to create a site named MyVWDsite in the My Documents folder. Click OK.

Creating a Web Site

Creating and Using Folders You can use folders to organize pages and other components in your Web site in much the same way you use folders in Windows to organize files. For example, you might want to create a folder for storing all the site’s pictures. To create a folder, follow these steps: 1. Make sure your site is open and go to the Solution Explorer pane. 2. Right-click the site name at the top of the Solution Explorer tree and choose New Folder, as shown in Figure next. 3. Type in a new name for the folder, and then press Enter.

Creating and Using Folders

Editing Pages To edit an existing page in VS, you first need to open the page so it’s visible on the Design surface. To open a page, double-click its icon in Solution Explorer. When you open an.aspx page (such as Default.aspx), you see the Design and Source buttons at the bottom of the Design surface, so you can switch between the two views.

Adding text to a page VS allows you to edit an.aspx page in either Design view (which shows what the page looks like in a browser) or Source view (raw HTML and ASP.NET). Typing and editing text in Design view is like typing and editing in Microsoft Word, FrontPage, or just about any other text editor or word processor: You click the page to get the cursor into position, and then type your text. The following Figure shows an example where I typed the text Welcome to my site on the (otherwise empty) Default.aspx page.

Adding text to a page

Selecting and formatting text Selecting and formatting text works the same in VS as it does in word processing programs. To format a chunk of text, first select (highlight) the text you want to format by dragging the mouse pointer through that text. Then choose a format option from the Formatting toolbar. In the following Figure, for example, I selected the text Welcome to my site so it’s highlighted. Then I clicked the Block Format button at the left side of the Formatting toolbar; the figure shows how the screen looks just before I click the Heading1 option.

Selecting and formatting text

Adding pictures To add a picture to a page, first make sure you move or copy the original picture into a folder in Solution Explorer. Make sure all the files that make up your Web site — including pictures — are in folders within Solution Explorer. Otherwise, when you upload your finished site to a Web server, the pictures won’t be included in the upload, which means that anyone trying to view a page that contains a picture will just see a red X where the picture should be. To add a picture to a page, just drag its icon from its folder in Solution Explorer onto the page.

Draging pictures into the Page

Changing properties Just about anything you add to a Web page is also an object. And (like objects in the real world) objects on Web pages have properties. An object’s properties are settings that define its characteristics — such as size, shape, location on the page, and so forth. To see, and perhaps change, an object’s properties, just select (click) the object of interest and look at the Properties pane. Or, right-click the object and choose Properties. The item’s properties appear in its properties sheet, which always shows in Visual Studio Properties pane. The following Figure shows an example where I’m viewing the properties for a picture. The tag near the top of the Properties sheet is a reflection of the fact that, like all pictures in all Web sites, this particular picture is displayed by an HTML tag. To make the Properties sheet free-floating (as in Figure), choose Floating from its Window Position button.

Changing properties

Editing in Source view

Dealing with code-behind files using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { }

Titling Pages Every Web page has a page title that appears in the Web browser’s title bar when someone is viewing the page. That same title also shows up in links to the page from most search engines, like Google. In HTML, the title must be placed between... tags, which in turn must be inside the page’s... tags. In Visual Studio, you can follow these steps to create a title for whatever page you’re currently editing in the Design surface 1. From the drop-down list at the top of the Properties sheet, choose. 2. Scroll to the bottom of the Properties sheet and type your page title as the Title property.

Titling Pages

Viewing Pages in a Web Browser The Design view of a page gives you a good sense of how the page will look in a Web browser. But it doesn’t always provide an exact view. To put your page to a real test, view the page in a Web browser. To view, in a Web browser, the page you’re currently working on in Design or Source view in VS, use whichever method below is most convenient for you: Right-click some empty space on the page and choose View In Browser. Click the View in Browser button in the toolbar (left side of next Figure)  Press Ctrl+F5.

Viewing Pages in a Web Browser