Download
1 / 21
210 likes | 227 Views
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.
E N D
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 folderthat contains still more folders and all the files that make up a single, completeWeb 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 programminglanguage. • 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 optedto create a site named MyVWDsite in the My Documents folder. • Click OK.
Creating and Using Folders • You can use folders to organize pages and other components in your Web sitein 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. Tocreate 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.
Editing Pages • To edit an existing page in VS, you first need to open the page so it’s visibleon the Design surface. To open a page, double-click its icon in SolutionExplorer. When you open an .aspx page (such as Default.aspx), you seethe Design and Source buttons at the bottom of the Design surface, so youcan 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 abrowser) or Source view (raw HTML and ASP.NET). Typing and editing text inDesign view is like typing and editing in Microsoft Word, FrontPage, or justabout any other text editor or word processor: You click the page to get thecursor into position, and then type your text. • The following Figure shows an examplewhere I typed the text Welcome to my site on the (otherwise empty)Default.aspx page.
Selecting and formatting text • Selecting and formatting text works the same in VS as it does in word processingprograms. To format a chunk of text, first select (highlight) the textyou want to format by dragging the mouse pointer through that text. • Thenchoose a format option from the Formatting toolbar. • In the following Figure, for example, I selected the text Welcome to my site so it’shighlighted. • Then I clicked the Block Format button at the left side of theFormatting toolbar; the figure shows how the screen looks just before Iclick the Heading1 <H1> option.
Adding pictures • To add a picture to a page, first make sure you move or copy the original pictureinto a folder in Solution Explorer. Make sure all the files that make upyour Web site — including pictures — are in folders within Solution Explorer. • Otherwise, when you upload your finished site to a Web server, the pictureswon’t be included in the upload, which means that anyone trying to view apage 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 Exploreronto the page.
Changing properties • Just about anything you add to a Web page is also an object. And (like objectsin the real world) objects on Web pages have properties. An object’s propertiesare settings that define its characteristics — such as size, shape, locationon the page, and so forth. • To see, and perhaps change, an object’s properties, just select (click) theobject of interest and look at the Properties pane. Or, right-click the objectand 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 <IMG> tag near the top of the Properties sheet is a reflection of the factthat, like all pictures in all Web sites, this particular picture is displayed byan HTML <IMG> tag. • To make the Properties sheet free-floating (as in Figure), choose Floatingfrom its Window Position button.
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 barwhen someone is viewing the page. That same title also shows up in links tothe page from most search engines, like Google. • In HTML, the title must beplaced between <title>...</title> tags, which in turn must be inside thepage’s <head>...</head> tags. • In Visual Studio, you can follow these steps to create a title for whateverpage you’re currently editing in the Design surface • 1. From the drop-down list at the top of the Properties sheet, choose<DOCUMENT>. • 2. Scroll to the bottom of the Properties sheet and type your page title asthe Title property.
Viewing Pages in a Web Browser • The Design view of a page gives you a good sense of how the page will look ina Web browser. But it doesn’t always provide an exact view. To put your pageto 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 orSource 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.
