HomeASP.NET Adding Content to a Static ASP.NET Website
Adding Content to a Static ASP.NET Website
In the first part of this two-part article on building a static ASP.NET web site, you learned how to use Visual Web Developer Express to create your website, add a background image to your template and finally view it in the browser. In this part, we will flesh out the site with the text it needs.
Contributed by Codex-M Rating: / 10 November 11, 2009
So far at this point, we have added the background image, but there is still no content:
We will start to add other elements in the template which will be used to create other pages in your website.
Adding the Header Text
To add the header text "Welcome to my test ASP.NET website," follow the steps below:
Step 1. Launch Visual Web Developer.
Step 2. Under Recent Projects at the start page, click the folder name of your current website folder (example: "websitedemo").
Step 3. Visual Web Developer will then show the files (default.aspx).
Step 4. Go to the "Design" view.
Step 5. Enter the header text according to where you would like to place it on the upper portion of your static website template based on your design. For this example, see below:
You can insert text and images in the "Design View" just as you would in an MS Word document. This is an advantage of developing ASP.NET websites. You can directly create objects in the design view without directly working on source code, which can be time consuming. After typing in the text, you can easily customize the font type (the above example uses Courier), font size, colors, etc.
When you look at the "Source code" view, Visual Web Developer automatically creates the equivalent/associated HTML source code based on what you have created/adjusted on the "Design" view. In short, you will not need to worry about the HTML coding when developing ASP.NET websites.
Before we can insert our navigation menu and text content, we need to create them in <Div>. We will need one <Div> for the navigation menu and one for the body text content; these form a container that will separate them in the browser view. In the Design view, position the cursor at the location of the first <Div>; see related screen shots below (the cursor is placed inside the red dotted circle):
To create the <DIV> container using Visual Web Developer Express, follow the steps below:
Step 1: When the cursor is positioned in the correct location, go to View -> Toolbox.
Step 2: Under "HTML" look for "Div."
Step 3: Double click "Div."
Step 4: Adjust the Div container in the Design view according to the length and width in your layout design. You can use your mouse, left click and HOLD to adjust the container.
Step 5: To make the second Div container for the content, right click on the first Div container and copy and paste it in the empty area on the Design view. By default, it will be pasted below the first div container; this is not the correct location as planned.
Step 6: To move the container to the correct location, click on the second container, on the properties (to your right). Click the dotted lines to modify the style of the second div container. (See screen shot below).
Step 7: Go to "Position," and then select "Relative." Leave other options as they are. The purpose of changing the position to relative is for you to easily drag the second container to the correct location as planned.
Step 8: Left click the second container and drag to the correct location. Use your mouse to adjust the final length and width of the second div container.
Now that you have completed the div containers which house your content, you will need to add that content. The same technique and method applies; you can directly add content in the Design view, and then format the text with your desired font, color and sizes using Visual Web Developer Express tool bars, just as you would in MS Word.
Since default.aspx is the first template you have edited, this is also the first file in which you need to add your content. When your static website is completed, default.aspx will be the home page. Make sure the template design for default.aspx is final and complete before it is used to create other pages.
Below is a close up view/sample screen shot of the completed default.aspx with content (it shows both body text content and the navigation menu):
Creating and linking to other pages in the static website
To create other pages based on the final and completed default.aspx template, goo to the location in your Windows directory (e.g. E:websitedemo) where your files are saved. Find default.aspx, copy and paste it into the same folder. Then rename "Copy of Default.aspx" to the specific/correct filename of your other website file. For example, "Contact.aspx" for contact me pages, "About.aspx" for about me pages, etc.
You do not need to do all of your work over again (as discussed above), EXCEPT you will ONLY edit the website content to reflect the what you want to show on that specific page. Once this is done, you are ready to link to other pages in your little static website. This is easy; you just need to edit the HTML hyperlink code for those pages using "Source View." Below is a sample edited source code in the navigation menu:
Once all of your website pages are working very well in the local host environment using Visual Web Developer Express, you are ready to upload files to FTP that host ASP.NET websites.
Below are the important files you need to upload:
1. Default.aspx (this is your home page).
2. Default.aspx.vb (this is the Visual Basic script).
3. About.aspx
4. Contact.aspx
5. web.config
6. "images" folder
Upload these files directly into the web root directory (root) of your website. So if your domain is: http://www.myaspnetsamplewebsite.com, when you type the URL in the browser, the content of default.aspx will be displayed. The same result will be shown for http://www.myaspnetsamplewebsite.com/Default.aspx.
To prevent duplicate content you can put link rel canonical tag in the default.aspx file declaring your canonical URL:
ASP.NET 
Implement Gzip and Deflate Compression in ASP.Net
