Creating Your First Raxan Web Page

Creating a web page with Raxan is very simple. You can use any HTML or Text Editor (even Notepad) to create and modify the web pages.

Let's start off by creating an empty web page called mywebpage.html inside the folder where you have unzipped the library files (e.g. c:\development\raxanfiles). Now open the file mywebpage.html inside your favorite text or html editor to begin editing.

Normally you would start adding your <html> tags to the page, but to make life a little simpler, we have added a web page template that you can use as a starting point when creating a new page. To copy the content of the page template, use your text or html editor to open the file raxan/templates/page.html, then copy it's content into mywebpage.html.

Here's the content of the page.html file:


<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Your Title Here...</title>
    <link href="raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
        <link rel="stylesheet" href="raxan/styles/master.ie.css" type="text/css">
    <![endif]-->
</head>

<body>
    Put your content here...
</body>

</html>

Note: Replace "Your Title Here..." with a title for your page and "Put your content here..." with the html content for the page.

In the above html code you will notice that there are two <link> tags present within the <head> of the page. This is to include the master.css style sheet (and master.ie.css for Internet Explorer). These files are optional and you can remove them to include your own style sheets but if you would like to take advantage of the CSS framework classes then you will be need to include the master style sheets.

Copy and paste the following code in your new web page replacing the "Put your content here..." text:


    <div>
            My First Raxan web page
    </div>

Save the file and view it inside your web browser. Note: You can view the file inside a browser by double clicking on the filename in the file folder.

Viewing the file inside the browser appears flat and normal (without any styling). To change this, modify the code to reflect the following:


    <div class="container c30 pad">
        <h1>My First Raxan web page</h1>
        <hr />
    </div>

Save the file and refresh your browser to see the changes. The page should appear centered with a nice looking title.

What we have done is to convert the <div> into a container with a width of 30 columns or cells (20*30 = 600 pixel) and a 10 pixel padding around the <div> content.

Our next step is to add a box with the words "Hello World" inside it. To do this, simply create a div and assign the alert class to it:


    <div class="container c30 pad">
        <h1>My First Raxan web page</h1>
        <hr />
        <div class="alert">
            Hello World!
        </div>
    </div>

Save the file and refresh your browser to see the changes.

To become a bit more creative try modifying your code to reflect the following:


    <div class="container c30 success pad">
        <h1 class="box-title">My First Raxan web page</h1>
        <hr />
        <div class="column alert c10">
            Hello World!
        </div>
        <div class="column  info c10">
            This is my first web page.
        </div>
        <br class="clear" /><!-- use to clear the column float -->
    </div>

We've only created a simple web page with a title and some basic CSS classes. There's no telling what you can do with a little creativity. To learn more about the full list of CSS classes available within the Raxan framework, visit the CSS Framework Quick Reference web page.

Up Next: Creating a Code-Behind JavaScript file >