×
Namespaces

Variants
Actions

How to use Nokia Mobile Web Templates for mid range devices to create a simple website

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: deepikagohil (28 Oct 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (20 Aug 2013)

This article explains use Nokia web templates for mid-range devices. This article mainly aims Beginners.

I would recommend beginners to first refer " How to develop a simple website using Nokia Mobile Web Templates " article to get primary knowledge about developing a website and web templates.

Contents

Using Nokia Mobile Web Templates (for mid-range devices)

Nokia Mobile Web Templates are pre-designed web components which can be used to make your website more attractive on Nokia mobiles. We have used Nokia Mobile Web Templates for mid range devices in this example.

You need to add these components to your website to make it more compatible with mid range mobile devices.

The example mentioned here shows a simple website (or we can say web-template) of a construction company. We have used the same example as we used in the previous article (" How to develop a simple website using Nokia Mobile Web Templates ") to help beginners to understand it easily.

You can refer to the example web-site at http://constructionsmid.99k.org.

In this Project, we have made use of the mentioned Nokia mobile web components (for mid range devices) provided by Nokia Mobile Web Templates for mid range devices. You can download them at Mid-range Templates

  • Branding
  • Breadcrumbs
  • Boxes (containers)
  • Content
  • Lists
  • Tables
  • Images with border
  • Footer navigation
  • Footer

Branding:

Brandingmid.jpg

code:

As in this CSS file, branding was performed in "header div" (header division) as shown in the code,

/*
* HEADER
*/

body div#header {
......
......
}

we made branding in the header div only.

In HTML file :

<div id="header">
<img src="resources/images/build.jpg" align="left" height="38" alt="Logo" />
XYZ Constructions
</div>

Description:

Branding is used with div tag and header id to display the company logo and name with background. We have used branding in each file in the given example.


Breadcrumbs

Breadcrumbsmid.jpg

code:

In CSS file:

body ul.breadcrumbs {
.......
.......
}

In HTML:

  <!Navigation>
<div id="content">
<ul class="breadcrumbs">
<li class="first"><a href="index.html">Home</a> &gt;</li>
<li>About Us</li>
</ul>
</div>
<!Navigation ends>


Description:

It is one type of navigation. Breadcrumbs class is used here for top level navigation.

It is used here with
    (unordered list) tag(as we have used it with ul element in our CSS file). Note that it will use the properties as mentioned in the CSS surrounded by curly braces.

    Boxes(containers)

    Boxesmid.jpg

    code:

    <div class="box">
    <h3>Founder's Message:</h3>
    <p class="box-text">A journey of success always requires the qualities of foresight, strategy and preparedness. All these, along with the power of trust are at the core of all our operations. Our inspiration comes from your trust and willingness to believe in our capability to deliver</p>
    </div>

    Description:

    Box class creates box around the content.


    Content

    Contentmid.jpg


    code: in CSS file:

    body h4 {
    .......
    color: #CC0066;
    }

    In HTML file:

     <h4>XYZ Group : At a Glance</h4>

    Description:

    The headers will be displayed with the colors and size (or we can say properties) as per the CSS file. Here in CSS file we have used #CC0066 color for h4 header, so h4 will appear with the same color. You need to add properties according to your needs between curly braces in CSS file.


    lists:

    Listsmid.jpg

    code:

      <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about_us.html">About Us</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="at_a_glance.html">At a Glance</a></li>
    <li><a href="contact_us.html">Contact Us</a></li>
    </ul>

    Description:

    List component is used here to make a list of data. We can use ordered list or unordered list. Here we have used unordered list. List component is used in "index.html" file which can be used to display unordered list. You can customize it in your CSS file.


    tables:

    Tablesmid.jpg

    code:

    	  <table>
    <tr><th>Areas:</th>
    <td>Multi Fuel Gas Stations</td></tr>
    <tr><td></td><td>Real Estate Development and Constructions</td></tr>
    <tr><th>Founded:</th><td> in 2009</td></tr>
    <tr><th> Area Developed:</th><td> 1 million square ft.</td></tr>
    </table>

    Description:

    Table is used to arrange data in orderly and styled manner. Table is differently customized in CSS for mid range devices. You can customize it as per your needs.


    Images with border:

    Imagemid.jpg

    code:

    	  <a href="Build1.html"><img class="image-border" src="resources/images/Buildings1.jpg" height=100 alt="image" /></a>

    Description:

    This will place image with a border. You can give dimensions in CSS as per your requirements and customize it.


    Footer Navigation:

    Footernavmid.jpg

    code:

       <!footer navigation>
    <p class="top"><a href="#top">Back to top</a></p>
    <p class="home"><a href="index.html">Home</a></p>
    <!footer navigation ends>

    Description:

    This component will add a navigation footer. The first one will allow you to navigate to the top and later one will allow you to navigate to HOME. They are mainly used for bottom level navigation.


    Footer:

    Footermid.jpg

    code:

    <!footer>
     
    <div id="footer">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about_us.html">About Us</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="at_a_glance.html">At a Glance</a></li>
    <li><a href="contact_us.html">Contact Us</a></li>
    </ul>
    </div>
     
    <! footer ends>

    Description:

    This component will add footer to your page. Here the footer is used with unordered list.

    Testing

    These sites are tested on Nokia S60 emulator.

    You can test them in your own Nokia mid range devices and see what the web templates makes the difference.


    Links

    A simple mobile website without using Nokia Mobile Web Templates website: http://constructions.99k.org

    A simple mobile website using Nokia Mobile Web Templates for mid range devices website: http://constructionsmid.99k.org

    A mobile website with using Nokia Mobile Web Templates for High end devices website: http://constructionstemplates.99k.org

    References

    How to develop a simple website using Nokia Mobile Web Templates

    To learn HTML and CSS or to solve primary errors regarding to them, you can refer to many on-line tutorials. One of them is:

    http://www.w3schools.com

    Summary

    You can learn how to use Nokia Web Templates ( for mid range devices) with the help of this article.
This page was last modified on 20 August 2013, at 09:11.
76 page views in the last 30 days.