Adding Content to a Static ASP.NET Website
(Page 1 of 4 )
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.
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.
Next: Lay out the Divs for Navigation and Content >>
More ASP.NET Articles
More By Codex-M
