WebMatrix is Microsoft’s freeware solution to web development using the ASP.NET programming platform. It provides a simple platform for Web development through a graphical user interface (GUI) that enables fast website creation from an open-source application gallery, a website template, or an existing site in a folder or on a disk. WebMatrix provides a unified development environment that lets users code, test, debug, and publish ASP.NET and PHP-based applications. The GUI supports code editing, database configuration, and server management. WebMatrix also automates website publishing to the hosting server. If you don't have a server to host your site, WebMatrix can help locate a suitable server. Built-in FTP, FTPS, and WebDeploy publishing utilities assist in automating the publishing process.

To get started using WebMatrix, it must first be installed from Microsoft’s website. WebMatrix is a 15Mb download and installs quickly. If you don’t have the .NET framework installed, the install will be a 50Mb download, which includes WebMatrix with the .NET framework. A full WebMatrix installation includes IIS Express, SQL Compact Edition, and ASP.NET extensions that are used to develop ASP.NET web pages.

Go to this site and follow the “Install Now” link. The installation is managed by Microsoft’s Web Platform installer, which automates the download and installation process. During installation, a list of required components is displayed. If your system lacks these components, the installation offers to install them. Click the “Accept” button to begin installing these components. Follow the prompts until the installation process is complete.

Develop a New Website Using a WebMatrix Template

Following installation of WebMatrix, you’re ready to begin creating your first website. Start the WebMatrix application. The Quick Start screen displays. This screen provides four ways in which a Website can be created: from an existing website, from a web gallery, from a template, or from a folder. To create a new website from a template, perform the following steps:

1.        Select “Site from Template” from the Quick Start menu. The “Site from Template” screen displays.

2.       Single click the “Empty Site” icon to highlight it. This icon creates a new Website.

3.       Enter a name for your website in the “Site Name” field at the bottom of the window.

4.       Click the “OK” button. WebMatrix creates the new website and opens the WebMatrix main screen.

At this point, your website is ready to be designed, but because the new website is completely stripped of content, it would be helpful to explain a few parts of the GUI.

The lower-left portion of the WebMatrix main menu lists four workspace views: Site, Files, Databases, and Reports. Each of these icons activates a specific view associated with certain tasks. By default, your first view is the Site view. The Site view lets you define site settings. The Files view is used to add, delete, or update website files. The Database view is used to add, delete, or configure database content to the website. The Reports view is used to generate and analyze information about the website, such as data that shows how the website may rank with search engines. Each of these website views is essential towards creating and managing your website.

With a basic understanding of the GUI layout, we can now describe how to add an ASP.NET web page.

1.       Click the “Files” workspace icon and then select “Choose a File Type”. A window displays a group of file types.

2.       Click to highlight “CSHTML” from the list of file types. CSHTML is a WebMatrix file that supports HTML, JavaScript, and other web-related programming platforms.

3.       Enter a name, such as “default.cshtml”, from the “Name” field to the left of the “OK” button. The web page is created and opened within an editor. At this point, the file only contains basic HTML, as shown below.

< !DOCTYPE html >
< html lang=”en” >
< head >
< title > < /title >
< /head >
< /body >
< /html >

4.       Add text to the < title> , < h1 >, and < p > tags, as shown below.

< !DOCTYPE html >
< html lang=”en” >
< head >
< title >This is a test< /title >
< /head >
< h1 >Test 1 Example< /h1 >
< p >Test 1< /p >
< /body >
< /html >

5.       Save the file by clicking the “Save” icon at the top-left of the GUI. The Save icon looks like a computer disk.

6.       Confirm that the current file is selected in the Files workspace. This is accomplished by clicking on the “Files” workspace and viewing the Navigation pane to ensure the current file is selected.

7.       Click the “Run” icon on the WebMatrix ribbon bar. The Run icon is on the upper left of the GUI. The web page is processed and IIS Express web server displays the page.

At this point you've created and run your first web page in the WebMatrix development environment. You're now ready to explore the WebMatrix GUI and all the features it supports. One of the primary features supported by WebMatrix is programming with Razor Syntax. This is briefly discussed in the following section.

For further online information on WebMatrix, consult the Microsoft ASP.NET website.

A detailed tutorial on WebMatrix web development is located here.

Dynamic content can be added to your website with the assistance of helpers within the code. Helpers are part of the ASP.NET Helpers Library that must be installed prior to use. Helpers are often a single line of code. For example, to add a Twitter feed to a website, the helper code is as simple as:

< h1 >Twitter Feed< /h1 >
@Twitter.Profile(“Microsoft”)
< /body >

Another helper to WebMatrix content is Razor Syntax. Razor Syntax is an easy-to-use, server-based programming syntax that is embedded in a web page. This ASP.NET-based syntax relies on the Microsoft .NET programming framework and can be used in the development of a wide range of web content.

Razor Syntax code can be imbedded in the following three ways:

1.       As an inline expression using “@”.

@[expression]

2.       As a single statement block.

@{var VariableOne = "Hello World!";}

3.       As a multi-statement block.

@{
string VariableTwo = VariableOne + " Today is: " + @DateTime.Now;
}

Those familiar with C, C++, C#, JavaScript, or Visual Basic should do well with RazorSyntax. Microsoft provides extensive online and published resources and support towards the use of this language. The ASP.NET website is a good place to start. For those starting with Razor Syntax, an excellent online resource can again be found at the Microsoft ASP.NET website.

With WebMatrix installed and a rudimentary knowledge of the GUI and its features, you’re now ready to begin developing your website. Consult the resources in this article and the numerous online tutorials. Each of these resources will help you publish your site to the masses and be confident with future updates.

About the Author

This article is done by Vanessa, working with Web Hosting search, a dedicated server hosting guide. Her interest in writing and web concepts lead her to become a content writer.  She is working with WHS since last 4 years and has written in-depth web hosting reviews of leading hosting providers and articles related to web development/design.