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.
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:
- External links
- Advertisement Container
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.
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.
<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>
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.
<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>
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:
<! form starts>
<h5>If you want to register for our newsletters enter your dealis given below:</h5>
<form action="submit.html" method="post">
<button value="submit" class="button-submit"><span>Submit</span></button>
<! form ends>
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.
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.
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.