Example Web-site: Using Nokia Web Templates for High end devices
This article provides an example of a website template using Nokia Web Templates for High end devices and is mainly intended for beginners. For more information see How to develop a simple website using Nokia Mobile Web Templates.
Article Metadata
Contents |
Introduction
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 High End devices in this example.
The developer should have basic knowledge of HTML and CSS to go through this article.
The example mentioned here shows a simple mobile website using Nokia Mobile web templates for high-end devices and you can refer this example web-site at http://electelectronics.99k.org.
The website template is for an Electronics company. In this Project we have made use of the mentioned Nokia mobile web components (for high end devices) offered by Nokia Mobile web Templates:
- Branding
- Breadcrumbs
- Content
- Containers
- Lists
- Tables
- Grid
- nav-footer
- External links
- Advertisement Container
- Form
You can get detailed information about the use of these components at " How to develop a simple website using Nokia Mobile Web Templates " article.
Some components which have not been explained in the previous article will be explained here. Moreover some customized components, which are also added to this website, will also be explained here.
Explanation
External Links:
code:
<tr><th>Phone:</th>
<td><a href="tel:1234567890">1234567890</a></td>
</tr>
<tr><th>Email:</th>
<td><a href="mailto:inquiry@xyz.com">inquiry@xyz.com</a></td>
</tr>
Description:
In this example, exterrnal links are added to telephone number and email. This component adds a special functionality to the user and it can be customized as per our needs. If the user wants to make a call to the specific number, he can easily do this by just clicking on it. or he may want to send a mail to that specific e-mail, he can do it with less efforts.
Graphical ListBox:
code:
<ul class="list-graphical-inline stack">
<li><a href="phone.html"><img src="resources/images/pictures/phone1.jpg" height=40 alt="image" />Mobile phones</a></li>
<li><a href="tv.html"><img src="resources/images/pictures/tv1.jpg" height=40 alt="image" />Telvision sets</a></li>
<li><a href="ac.html"><img src="resources/images/pictures/ac1.jpg" height=40 alt="image" />Air Conditioners</a></li>
<li><a href="monitor.html"><img src="resources/images/pictures/monitor1.jpg" height=40 alt="image" />Computer Products</a></li>
</ul>
Description:
Graphical list box component represents a list with an image. It is very useful when you need to explore the content of your list with images.
Advertisement Container:
code:
<ul class="advertisement">
<li><p>advertisement-1 : Go for a holiday</p><img src="resources/images/ad1.jpg" align="left" height=100 alt="image" /></li>
<li><p>advertisement-1 : 50 % off on every product</p><img src="resources/images/ad2.jpg" align="left" height=100 alt="image" /></li>
</ul>
Description:
Advertisement container is used to display advertisements on your website. We have used this component as per our needs in the given example.
Some Customized Components:
Registration Form:
code:
<! form starts>
<h5>If you want to register for our newsletters enter your dealis given below:</h5>
<form action="submit.html" method="post">
<table><tr>
<td>Name:</td>
<td><input type="text"></td></tr>
<tr><td>Email:</td>
<td><input type="text"></td></tr></table>
<button value="submit" class="button-submit"><span>Submit</span></button>
</form>
<! form ends>
Description:
This is the very important part of our web-site, which allows user to sumit his information to the company and company will provide daily newsletter to him. We are getting user's name and e-mail ID as primary data. We have customized the table component provided by Nokia Web Templates for high end devices to create a form as per our requirement.
Testing
These site is tested on Nokia S60 5th Edition emulator and Nokia N97 device.
You can test them in your own Nokia high end device and see what the web components makes the difference.
Links
http://electelectronics.99k.org
Summary
You can learn how to use and customize Nokia Web Templates (for high end devices) with the help of this article and create your own web-site.
