Construct2: How to customize the exported HTML5 index.html ?

Index

Stats

13,320 visits, 33,987 views

Translations

This tutorial hasn't been translated.

Tools

III. Analysing a custom index.html

I made an example customized index.html. You can right-click, "Save as..." to download the file on your computer and not just open it up in the browser.

This is the page that holds the demo of my pathfinder behavior.

As you can see, the page is very customized. I've tried using different technics and opportunities to show what HTML5 can allow you to do.

Now let's take a look on it to see exactly how things are done in there.

As you can already say by just looking at the browser, there is more stuff going on styling-wise and a lot more content to the page itself.

Check the <head></head> part of the code.

As I told you earlier, the styling part should stand there. Nevertheless you can't spot any <style></style> tags.

That's because as there were a lot of elements of styling to this page, and to keep the content "clear" from its styling, I wrote a CSS file.

The file is integrated (included like event sheets in Construct) to the page thanks to the line:

    <link href="pf.css" rel="stylesheet" type="text/css" />

I have a file named "pf.css" standing in the same folder as index.html which content is included in the displayed webpage.

Open pf.css in your editor, alongside with index.html.

The CSS file beholds the definition of the styling and index.html the "application" of the styling to the displayed content.

If you watch at the first lines of the css file, you can see :

    body, p {

Rings any bell ?

In index.html, the tag <body></body>.

The styling defined after "body" between the brackets "{}" in the CSS file gets applied to the tag <body></body> in the html file.

Same for the <p></p> tag. (check line 78 in index.html and look the effect in the display)

On this same line you can notice the <strong></strong> tags. This allows you to mark the text between the tags as to be displayed in bold.

Back to pf.css.

Inside the block of the CSS code you set properties to value.

Once again, this tutorial is not a complete reference/tutorial about the CSS script format. For references, remember to check the W3C CSS school.

Note that every line finishes with ";"

That's the way of telling in CSS script that you finished attributing your values. Remember to put it on, it is really important.

    background: #aaaaaa;

This property defines the background color of the element. As we are in "body", the color will be the background color of the whole page.

The notation "#aaaaaa" is HTML color code. With HTML5 you can use RGBa that allows for transparency control over the displayed text. There are more type of colors usable too

    
    font-family: Verdana, Arial, Helvetica, sans-serif;

This property allows you to define the font type used by the element. As we are in "body", Verdana will be the default font for the whole page.

The other font names proposed are here as "security". If the first named font doesn't exist on the system that displays the page, than it try to load the next one, etc...

    
    font-size: 11px;

This property allows you to set the size of the font for the element. I chose to use px (pixel) unit, but there are other units available.

    margin-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;

The margin clears an area around an element (outside the border). In our case, the top margin is the 5px dark gray bar you can see before the header. It also displays a line at the very bottom of the page, but harder to see as it is lost in the gradient.

    }

Closes the element.

    nav {
    background: rgba(45,233,255,0.45);
    background: -webkit-gradient(linear, left top, left bottom, from([h2]cdcdcd), to([/h2]dfdfdf));
    background: -webkit-linear-gradient(top, [h2]cdcdcd, [/h2]dfdfdf);
    background:    -moz-linear-gradient(top, [h2]cdcdcd, [/h2]dfdfdf);
    background:     -ms-linear-gradient(top, [h2]cdcdcd, [/h2]dfdfdf);
    background:      -o-linear-gradient(top, [h2]cdcdcd, [/h2]dfdfdf);
    background:         linear-gradient(top, [h2]cdcdcd, [/h2]dfdfdf); /[i] standard, but currently unimplemented [/i]/    
    }

The element is "nav" (called as <nav></nav> tags in index.html).

With the current code, the whole nav "element" gets a colored background.

The first background property taking a rgba() parameter is a general color. If the gradient code can't be executed on the user's system, then only this color is displayed.

As it is a rgba type of color, there's some taint to its opacity.

The remaining lines allow to draw some gradient in the background coloring of the element. As those functions are differently implemented in the major browsers, we use the prefixed functions : -moz-linear-gradient() (firefox), -webkit-gradient() (chrome), -ms-linear-gradient() (IE), -o-linear-gradient() (opera).

For most of the implementations, you add first the direction the gradient will come from. In our example "top" indicates that the gradient will go from up to down.

    nav a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:[h2]ffffff; /[i][/h2]e9fde5;[/i]/
    font-weight: bold;
    line-height: 12px;
    }

Here we set the "a" element inside of the "nav" element. The "a" element defines hyperlinks.

I'll let you check the properties and see in the reference what they are and what value they can get.

I'll just explains those :

    a:link

Is an unvisited link. The user hasn't yet clicked this one.

    a:visited

This is a visited link. The user has clicked this one.

    a:hover

The mouse is currently over the link.

    a:active

The link is currently selected.

As you can check line 18 in index.html, <nav></nav> tags is used, and inside of it we have <a></a> tags.

Also, those <a> links to "#name". This is a link inpage to an anchor.

In the case of the first link "#surround", the link will lead the user to the first tag in the page that uses the id="surround" (see a little bit down about surround). It works the same for all anchor links.

Back to pf.css at line 49:

    h1 {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 30px;
          text-shadow: 2px 2px 2px #ffffff;
          font-style:italic;
          color:#c60000;
          padding:0px;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 5px;
          }

This is a <h1></h1> tag element. If you watch lines 39, 75 and 160 in index.html you can see it contains the styling for the "Instructions", "PathFinder behavior" and "License and thanks" sub-titles.

We can notice some interresting properties:

    text-shadow: 2px 2px 2px #ffffff;

This creates a white shadow with an offset of 2 pixels on the x and y axis. The shadow is 2 pixels sized. (this time the color uses HEX color value)

The first 2 "2px" stand for x and y, the last one for the size of the shadow.

    font-style:italic;

This makes the font italic. More styles

    color:#c60000;

Defines the color of the text.

    padding:0px;

The padding clears an area around the content (inside the border) of an element. In our case, this area equals 0 px.

Like margins, you could set padding-left, padding-bottom, etc...

In our case, I set the padding to 0 for every bound of the area in a single command.

"h2" and "h3" are the definitions of other "title-like" lines used in the page. Property-wise, they don't present anything new to what we've already seen. I'll just let them by and let you see how they are defined, and how they are displayed back in the browser.

Then, we arrive to the "a" element, defining the hyperlinks.

As you can see, you can add styling to some events of the element.

The styling is applied to any hyperlink in the page. (<a></a> tags)

To any link ? Almost, remember how we already setted "a" for the "nav" element.

This current "a" applies on the rest of the page.

Now comes the part for the "header", line 118.

You can see the width property:

    width: 100%;

This means the element will all the space (100%) available in its container. If you check index.html you can see that <header>'s container is <body>.

So <header> takes the whole width of your browser. If you resize the window of your browser, the <header> will still take 100% of its width.

    /[i]height: 80px;[/i]/

I commented this line as at first I fixed the height of the element, and realizing after that it was better to have it "free-heighted" as depending on the size of the contained element, and adding a 10px margin-bottom that allowed me to obtain a gray bar (of body color) like the bar ahead of the header.

    text-align: center;

This property means that text displayed/contained in the element will be centered. You can also set its value to "right", "left", "justify". This only deals with the horizontal alignment.

Next element is a bit special and a rebirth.

    @font-face {}

This element was discarded in CSS 2 and is now used again in CSS 3. It allows you to create your own "font-family" by providing a .ttf (.eot for IE) font file. The user downloads the font, and it is used in the browser to display text with the custom font.

Here, the font files sit in a folder fonts.

I used the Font Face Generator by fontsquirrel.com to make the code and convert the chosen font to eot format. The provided html example in the "webkit" proposed to you for download when you convert a font is helpful and insightful.

With the use of this element you can now use another name in the font-family property of elements.

I use it in #title.

This element is an id selector. The id selector is used to specify a style for a single, unique element.

You define it thanks to the "#" character.

To display it in the html file, you add an id="title" parameter to any element. Line 15 in index.html you can see it is used in a <div> tag (<div> is dimmed a neutral tag).

The text in between the tags get the "title" style applied to it.

In our case: the title that appears in a stylish sci-fi font.

    font-family: HeavyDataRegular, sans-serif;

I used the HeavyDataRegular font family I just created in @font-face.

In index.html you can see that this is all <header> contains and does. In a few lines, a pretty nice effect is setted. And all relying on what browsers can do by default.

Back to pf.css.

The next element is "#content", line 145.

    #content {
        display:block;
        text-align: center;
        background: #bbbbbb;
        padding-bottom: 5px;
        background-image: url("images/0back.png");
        background-position: top left;
        background-repeat: horizontal vertical;
    }

This element acts as the container/parent for all the rest of the content of the webpage. It's used as a <div id="content"></div> in index.html.

    display:block;

The display property is a bit tricky to understand.

In this page, this helps to say that the contained elements (the following elements in between the <div id="content"></div> tags) will use this element as reference for their positioning.

It helps to put a hierarchy in the elements of the page and set the layout out of it.

The fact that the value is "block" makes that the element automaticly takes the whole width of the available space.

This helps for the next attended effect: background image pattern:

    background-image: url("images/0back.png");
    background-position: top left;
    background-repeat: horizontal vertical;

Those three lines allow you to set a picture as background image (url), set it's starting position (top left) and sets its tiling (horizontal vertical).

For more infos about the values of those properties check this W3C page.

The image will automaticly replicate itself as its repeat is set to go horizontal and vertical.

The next element is "#surround", line 156.

This is the "window type" that surrounds the canvas.

    display:inline-block;

Allows for the element to be centered.

    box-shadow: 15px 15px 20px #000000;
    -webkit-box-shadow: 15px 15px 20px #000000; /[i] Safari [/i]/

This box-shadow property is the one allowing for the nice shadow effect around the border of the "surround" element.

Like for the text shadow property, you set x,y, size and color.

The "-webkit-box-shadow" line stands for compatibility in Safari browser. The property "box-shadow" isn't implemented yet officialy in it, they implemented their own version of the specs. The property should be implemented and standardized in a coming release of the browser. (like we already saw for the gradient functions earlier)

    -webkit-border-radius: 18px;
    -moz-border-radius:18px; /[i] Firefox 3.6 and earlier [/i]/
    border-radius: 18px;

The border-radius property makes the roundy corners out of the "surround" element. You can set either pixels or percentage (%).

No surprise in index.html we use surround as a <div id="#surround"></div> line 20.

The next element is "canvas", line 177 in pf.css.

    border: 1px solid black; 

Displays a 1 pixel border around the very canvas.

    background-image: url("images/0canvback.png"),url("images/0canvback.png"),url("images/0canvback.png");
    background-position: center center, top right, bottom left;
    background-repeat: no-repeat;

This loads the three Construct2 logo image displayed in the background of the application (which layers are transparent to achieve this effect).

the separating with "," allows to load different elements for different sources if you want to. You're not limited in the number you can load.

The background-position property allow us to position the three images. And we don't repeat them.

Take a look line 35 in index.html.

    <a href="#top" style="float:right;"><img src="images/back_to_top.png" title="Back to top"/></a>

This element's style is set "on the fly", directly in the tag. This is acceptable, as this is a "Back to top" button.

Clicking the link brings the user to the id="top" in the opening <body id="top"> on top of the page.

The CSS property "float" allows for the element to be placed freely on the left or on the right of the parent element (here "surround").

Let's jump to "section" element, line 198 in pf.css at the "section" element.

Nothing really new here in the properties, and notice how lines 38, 74 and 159 in index.html you use <section></section> tags to create the element, not a div.

This is one of the new tags that will be taken in account by SEO and ease up the ranking and "understanding" of the content of your pages by search engines. Here as I provide informations about the PathFinder and its documentation, I chose to use the <section>.

Reminder: the id="something" parameter in <section> is used as anchor. In the <nav></nav> on top of page, one <a> links to "#something", and if it is clicked it will scroll down the page to the anchor.

Line 41 in index.html

    <li><img src="images/source-default-000.png" /> is the <strong>source</strong> and <img src="images/dest-default-000.png" /> is the <strong>destination</strong> of the path to generate.</li>

You encounter the <li></li> tags. This tag makes up a list with a dot element.

Then you encounter the <img /> tag. This allows to display the picture reffered to in 'src=""'.

For the "Instructions", I used the graphics from the demo application directly (as they are to be downloaded anyway).

Note: as we are closing the tag <img /> we don't need to put another closing </img> tag.

You may also have noticed the tag <hr> line 40. This peculiar tag draws a horizontal line taking all the width available. No need to close this one either and it doesn't even require a "/".

Now check line 52 of index.html.

    <div id="heuristic">Manhattan</div>

Let me take you to back to pf.css, to the "#heuristic" element, line 215 where the styling of this div is defined.

    display:inline-block;
    font-family: arial;
    font-size: 15px;
    height:30px;
    width:120px;
    padding-top:8px;
    padding-left:28px;
    margin-right:-28px;
    margin-top:-4px;
    background-image: url("images/btnheuristic-default-000.png");
    background-repeat: no-repeat;

The "heuristic" element is set as inline-block (so will appear in the current container "section" and I maybe able to set its dimensions and position.). Its font is set to arial (like in the app), its size to 15px.

The dimensions height and width are those of the background image "images/btnheuristic-default-000.png".

The padding and margins are finaly used to allow the element to set nicely in the text.

This CSS definition only displays a button.

The text of the button is indicated as the text between the tags <div id="heuristic"></div> in index.html.

In pf.css at line 229 check the ".cutcorner" element.

The novelty about this element is the "." in front of it, defining it as a class selector.

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

In index.html the element cutcorner is used in tags <div class="cutcorner"></div> as you can see lines 55 and 70.

We jump to line 175 in index.html.

    <div id="author">BY<br /><a href="http://www.scirra.com/users/kyatric" target="_new" ><img src="http://www.gravatar.com/avatar/a65e480502234e6601b8983f69b64833?s=128&r=pg" title="Kyatric" /></a></div>

Cross-check with line 249 in pf.css to see the element "#author".

I wanted to have a little fun there and add my gravatar in the page.

So I use the gravatar request with the MD5 hash of my email adress. I give also the 's' parameter for the wanted size and the 'r' (rated) paramater to see it can show my gravatar from the PG rating.

The parameter "title" stands for the text that the tiptool will display when letting the cursor over the image for a moment.

In the pf.css file, interesting things are happening.

Indeed line 260 you can see a "#author a" element.

This "overwrites" the default styling for the "a" hyperlink element as seen in "nav a", applied only to elements in a <div id="author"><a></a></div>.

You can see it only consists of 3 lines and a comment:

    opacity:.50;
    /[i]For IE[/i]/
    filter: “alpha(opacity=50)”;
    filter:alpha(opacity=50);

This sets the opacity of the element.

Check line 175 in index.html, you see that the <div id="author"> contains an <img /> tag. So this image is, by default, 50% transparent.

This time, line 268, we're even exploiting the "hover" event of the "a" element.

For all <a></a> in a <div id="author"></div>, when the cursor of the mouse goes over, we apply the defined style here.

    opacity:1;
    /[i]For IE[/i]/
    filter: “alpha(opacity=100)”;
    filter:alpha(opacity=100);

And this is done by making the image totaly opaque.

Also, we encounter another novelty of HTML5 and CSS3: the transform property and the rotate() value.

    /[i] Rotates the author picture [/i]/
    -webkit-transform: rotate(45deg); /[i] Safari and Chrome [/i]/
    -moz-transform: rotate(45deg); /[i] Firefox [/i]/
    -ms-transform: rotate(45deg); /[i] IE 9 [/i]/
    -o-transform: rotate(45deg); /[i] Opera [/i]/
    transform: rotate(45deg);

Once again, we have to use prefixed functions so that the result is correctly displayed in each major browser.

In pf.css line 283 you have the "footer" element, sitting on bottom of the page.

It contains a few elements and in particular "#footadv" and its property "float" set to right. (line 308)

As seen with the "Back to top" button, the "float" property allows you to place the element on the left or the right of the available space.

As you can see in the way elements are hierarchized in index.html line 178 to 195, the "footadv" is placed after "tutolink" and so appears on the right of the page on the same line.

To finish you can also see in index.html line 197, in the "scripts":

    <!--[if IE]><script>document.createElement("header");
        document.createElement("footer");
        document.createElement("section");
        document.createElement("aside");
        document.createElement("nav");
        document.createElement("article");
        document.createElement("figure");
        document.createElement("figcaption");
        document.createElement("hgroup");
        document.createElement("time");
    </script><![endif]-->

This piece of code is for IE 8 and beyond. This peculiar browsers need this bit of javascript code to take advantage of the named tags.

There are more than used in the current file, but this way, you can just copy/paste it and reuse in your future pages.

I haven't used more javascript for this index page, but it is possible to. You could add scripts to the page and have them sitting with the C2 application.

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!