HomeASP.NET Building a Static ASP.NET Website in a Bas...
Building a Static ASP.NET Website in a Basic Hosting Environment
If you understand the basics of ASP.NET and want to take things further, this two-part article series may be exactly what you're looking for. As you probably guessed from the title, it will show you how to build a multi-page static website using this platform.
Contributed by Codex-M Rating: / 6 November 10, 2009
This introductory article on ASP.NET discusses the details pertaining the importance and advantages of using ASP.NET as your website platform. It also highlights the basic requirements and installation steps of Visual Web Developer Express, the software application that you will be using to make ASP.NET powered websites.
Briefly discussed in that introductory article is how to create your first ASP.NET web page. In this two-part tutorial series, we will go deeper; you will actually use ASP.NET to build static websites, not just one web page. If you haven’t read the introductory article linked to above, please do that now; it contains information that is essential to your understanding of this tutorial series.
What are Static Websites?
This tutorial is about building static websites. In case you are not sure what static websites are, I've explained them in detail below.
Websites found on the Internet are typically separated into two types, static and dynamic. Static websites operate without relying on a website database and do not require server-side scripting to output HTML to the browser (for example: ASP, Visual Basic, etc). Databases (MS Access/SQL Server in Microsoft) are used to store website information or content. So if you are developing a website with text content that is not found in a database, but in the website source code itself, and does not require executing of server side scripts, then you are developing a static website.
Below is a purely static coded example:
<html>
<head>
<title> This is your title tag </title>
</head>
<body>
<h2> This is your website header tag </h2>
<br />
<p> Hi this is your content! The quick brown fox jumps over the lazy dog</p>
</body>
</html>
Dynamic websites rely heavily on databases to output information or execute server side scripting to output HTML content. Below is a dynamically coded example in VBscript (server side scripting in ASP/ASP.NET websites) outputting the same information to the browser as the statically coded example:
Using Visual Web Developer 2008 Express Edition, any web developer can quickly execute website design from scratch. However, before you open that software application, it is essential to make a rough plan as to how the website will look; a simple sketch or a screen shot will be helpful.
Assume I want my static website to look like this:
And it will consist of three pages: “Home,” “About me” and "Contact me” pages. The header consists of text; the background of the website is an image. The sidebar navigation is shown on the left. And finally, the text content is shown in the middle of every web page.
Since this is static, it is important to finalize the design before replicating the static pages (using the design template to create other pages) to avoid making the changes in all affected web pages. This is one of the down sides of working with static websites. A minor or major change in a template calls for work to be done in all affected web pages. And this is also one of the main reasons why dynamic websites are popular -- because you only need to edit one template file, which will automatically be reflected on the entire web site, which saves time.
Now that you have a clear idea of what you are going to accomplish in your website coding, it is time to open Visual Web Developer Express to create your ASP.NET static website.
After you launch the application, you will see “Recent projects” near the upper portion of the Visual Web Developer Start Page. Under “Create,” click “Website.”
After doing this, a “New Web Site” appears that asks for the following important information:
Visual Studio template (website class).
Location.
Server side scripting language to be used.
Where you would like to save your website files in your Windows-based computer
Select “ASP.NET website” in the templates. Then in the location, select “File System” since files are stored locally in your computer, and you are not using IIS or FTP server at this time.
For simplicity and for the purpose of this discussion, use “Visual Basic” for the language, since it is easy and common. Bear in mind that since we are using ASP.NET, the resulting source code and file are not purely static HTML files but will rely partially on Visual Basic. In the path, type the Windows path for where you would like to store your website files. Below is a screen shot showing the information to be entered:
After clicking OK, Visual Web Developer Express automatically creates the “Default.aspx” file. This is where you will do the coding and implement the template design you have created earlier.
To guide you properly through the website building process using ASP.NET, let’s illustrate how we are going to implement the previous template design (shown in the screen shot under “Website Layout Design” section). First, Visual Web Developer Express offers three ways you can work with your websites:
Design mode -- This is the browser view of your written code.
Split mode -- This mode splits your view of the page into two windows. One will show the source code and the other is the browser interpretation (view) of the source code.
Source code -- This is the pure source code view.
When you click the “Design,” you will see an empty page. This is because you have not yet added your code and content to it. The first thing you will do is add a background image to your website. In actual applications, you may or may not use a background image.
To add a customized background image to your main template file default.aspx, follow the steps:
Step 1. Go to “Design.”
Step 2. Right click on a blank area that is not assigned to any HTML (div, etc).
Step 3. Click “Properties.”
Step 4. Under “Body” you should see “Background”; this is where you will declare your background image.
Step 5. Now go to the location/path where your website is saved (example E:websitedemo)
Step 6. Create a new folder called “images” in such a way that it will be located at E:websitedemoimages.
Step 7. Place your image inside the “images” folder. Now that you have placed your images, you need to go back to Visual Web Developer Express and then, under “Solutions Explorer,” click the “Refresh” icon. You will then see the “images” folder under it.
Step 8. Right click again on the blank area under the “Design” view and click Properties.
Step 9. Click “Background,” and click the three dots. You can then see the “Select Project Item.”
Step 10. Finally, select “images” and then select the image file. Click OK. The image will now be shown in the design view.
To implement these changes, save the work by going to “File -> Save Default.aspx.” By viewing the “Source,” you can see the equivalent code.
Alternatively you can even view it in an actual browser by going to “File -> View in browser.” You can now see the background image being embedded in your “Default.aspx” template.
Read the second part for the continuation of building static websites using ASP.NET.
ASP.NET 
Implement Gzip and Deflate Compression in ASP.Net
