From Forum Nokia Wiki

This article represents one more example of a website template using Nokia Web Templates for High end devices and mainly aims Beginners.

Beginners who want to find primary information about web templates, they can get it at :

How to Develop a Simple website using Nokia Mobile Web Templates.

Contents 1 Introduction 2 Explanation 2.1 External Links: 2.2 Graphical ListBox: 2.3 Advertisement Container: 3 Some Customized Components: 3.1 Registration Form: 3.2 JavaScript for Prompt Dialog Box: 3.3 Color Change: 4 Testing 5 Links 6 Summary

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.

"Apart from these components, we have made use of Java Script Prompt in our index.html page and used a special color change to make the page look good."

JavaScript for Prompt Dialog Box:

code:

<script type="text/javascript">
	var user;
	user=prompt("Enter Your Name:");
	document.write("Hello "+user+", Welcome to Elect Electronics.");
</script>

Description:

It feels good, when somebody interacts with you by your name. We have used the same thing over here. While entering to the site, first the user name is asked. And then the user is responded by his name only. This may be used as a registration form and may be used to keep the data about the users who visits the site.

Color Change:

code:

<a href="home.html" onMouseOver="document.bgColor='#D87093'" onMouseOut="document.bgColor='#E6E6FA'">Please Click Here.</a>

Description:

The color of the background gets changed when cursor comes over the specific content/ link as shown in the figures.

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

High-end Templates

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.