How to use Nokia Mobile Web Templates for mid range devices to create a simple website
Article Metadata
Article
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:
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
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> ></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)
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
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:
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:
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:
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.
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.
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:
