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
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
November 11, 2009
Rate this Article:
MEH MEH++


SEARCH ASP FREE
TOOLS YOU CAN USE

advertisement

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.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.style1

{

font-family: "Courier New", Courier, monospace;

font-size: xx-large;

font-weight: bold;

color: #0000FF;

}

</style>

</head>

<body background="images/Codexm.JPG">

<form id="form1" runat="server">

<div>

<span class="style1">Welcome to my test ASP.NET Website</span></div>

</form>

</body>

</html>

Note: do not forget to save your work any time you have completed making some adjustments to your website.

Lay out the Divs for Navigation and Content

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.

Add text content on navigation and body

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:

<div dir="ltr"

style="border-style: none; width: 183px; height: 210px; margin-left: 65px; line-height: normal; margin-top: 5px;">

<span class="style9"><a href="Default.aspx">Home</a></span><br class="style9" />

<span class="style9"><a href="About.aspx">About me</a></span><br

class="style9" />

<span class="style9"><a href="Contact.aspx">Contact me</a></span><br

class="style9" />

</div>

Uploading Files to the ASP.NET FTP Host Server

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:

<link rel="canonical" href="http://www.myaspnetsamplewebsite.com" />

- Structures of ASP.NET files in hosting server.

blog comments powered by Disqus
ASP.NET ARTICLES

- Implementing ASP.NET 4.0 Page.MetaDescriptio...
- ASP.Net Development Tips
- Intro to Sessions in ASP.Net
- Google Maps API Introduction in ASP.NET usin...
- Creating an ASP.NET 3.5 Gridview Image Galle...
- Encrypt QueryString in ASP.NET 3.5 using VB....
- ASP.NET 3.5 Drop Down List Controls
- Connect to Access Database with ASP.Net
- Secure Audio Streaming with ASP.Net and Flash
- Dynamic Sitemap and Navigation in ASP.Net
- Implement Gzip and Deflate Compression in AS...
- Run ASP.Net in Ubuntu with Apache
- ASP.Net Mono Website Contact Forms
- ASP.Net URL Rewriting Methods
- Murach`s ASP.NET 4 Web Programming with C# 2...

ASP Web Hosting ASP.Net Web Hosting Windows Web Hosting
ASP Free Forums 
 RSS  Tutorials RSS
 RSS  Forums RSS
 RSS  All Feeds
Site Map 
Request Media Kit
Write For Us Get Paid 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Privacy Policy 
Support 


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Most Popular Topics
All ASP.Net Tutorials