×
Namespaces

Variants
Actions
Revision as of 10:54, 7 May 2012 by hamishwillee (Talk | contribs)

Creating an informatica website using mobile web templates

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: visit.nbpatel (31 Oct 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (07 May 2012)

Contents

Introduction

Web Templates are resources which we can use to design our websites easily and quickly. Nokia Mobile web templates are a series of web templates provided by Nokia Developer using which we can make good websites for Nokia devices.

The article shows how Nokia Mobile Web Templates can be easily customized to create high quality mobile website. The Nokia Mobile Web Templates provide a wide range of mobile web components which can be fully customized to create a mobile website or a WRT widget application.

Detailed information about the templates is available at...

Benefits of Web Template

A Web Template is a ready-made website that will allow you to create high-quality websites in a fraction of the time. Why web templates make sense in web design:

Speed - Web Templates Speed Up The Web Design Process

The most time consuming part of the process (of web design) is during the initial design phase where the client and web designer go back and forth trying to come up with the look the client wants. This increases cost more than you would like to think …

A web template turns a complex process into something simple:

  1. The client selects the style they want from a collection of web templates.
  2. Once the client makes their choice, any half competent web designer can easily customize the template to the client’s needs.

Cost - Web Templates Drastically Reduce Cost

It's not the easiest thing to find quality web designers – many suck. Using templates allows you to purchase a world-class website without having to pay the high dollar cost that is usually associate with that level of design.

Since anyone reasonably comfortable with web design can edit and modify a web template, there is no reason to have to pay thousands of dollars on a world-class designer.

Brief Web Design Tips

  • Avoid Under Construction signs
  • Don't use a hundred different fonts on the same page
  • Don't write your HTML to a particular browser - Browsers change very quickly
  • Use style sheets - Style sheets (known as CSS)
  • Include Meta Tags - Meta tags are used to tell the outside world, especially search engines, all about your pages.
  • Include a descriptive title - Be sure and write a short
  • Avoid lots of moving things

Customizing Nokia Mobile Web Templates

The Nokia Mobile Web Templates offers a range of Web Components to create various types of web pages.

In this application, we have made use of the mentioned Nokia mobile web components (Mid-range devices) :

  • Marquee
  • Advertisement
  • Breadcrumbs
  • Blockquote
  • Boxes
  • Content
  • List
  • Link
  • Tables with/without border
  • Images with/without border
  • Header [Branding]
  • Footer navigation
  • Home & Top navigation
  • Horizontal navigation bar

Layout of the mobile web site

Home Page

Indeximage1.jpg

MARQUEE

<h6><marquee>Temples to the world</marquee></h6>

ADVERTISEMENT

<div class="advertisement">
 
<span><h6><div align="center"><font>ADVERTISEMENT [Click on it]</font></div>
<marquee><h2><a href="../library/ipod_f.html">For the up coming Tour Place Suggestion</a></h2>
</marquee>
</h6></span>
</div>

Photo Gallery

This page is come from HOME Page as....For the up coming tour place

Galleryimage1.jpg

IMAGE WITH BORDER

<div class="box-flat" align="center">	
<table>
 
<tr>
<th scope="row"><div class="stack" align="center">
<img class="image-border" src="../resources/images/akshar1.jpg" width="130" height="100" alt="Image" />
</div></th>
<th scope="row"><div class="stack" align="center">
<img class="image-border" src="../resources/images/akshar2.jpg" width="130" height="100" alt="Image" />
</div></th>
</tr>
<tr>
<th scope="row"><div class="stack" align="center">
<img class="image-border" src="../resources/images/golden1.jpg" width="130" height="100" alt="Image" />
</div></th>
<th scope="row"><div class="stack" align="center">
<img class="image-border" src="../resources/images/golden2.jpg" width="130" height="100" alt="Image" />
</div></th>
</tr>
</table>
</div>

Different Temple Pages

Templeimage01.jpg

HEADER

<div id="header">
<div class="branding">
<a href="../resources/images/logo.png">
<img src="../resources/images/logo.png" alt="Logo" width="120" height="30"/>
</a>
 
</div>
</div>

FOOTER

<div id="footer" align="middle">
<p>Copyright &copy; 2009 mobile</p>
<div class="stack" />
 
 
</div>


Templeimage11.jpg


LINK

<div align="right">	
<h4><em><a href="http://nokia.mobi">more info >> </a></em> </h4></div>
</div>


BLOCKQUOTE

<blockquote>
<p>Ancient era was the witness when religious practices flourished the most and temples became the world's storehouse of knowledge and culture.. The ancient temples are more than mere places of worship. These are sacred buildings of ultimate grace and eternal happiness.</p>
</blockquote>


Templeimage22.jpg


HORIZONTAL NAVIGATION BAR

<h2><h5><ul class="breadcrumbs">
<li class="first"><a href="../library/index.html">Home</a> |</li>
<li><a href="../library/aboutus.html">About Us</a> |</li>
<li><a href="../library/temple.html">Temple</a> |</li>
<li><a href="../library/contactus.html">Contact Us</a></li>
</ul>
</h5></h2>

CONTENT

<h2>
World Heritage Temple
</h2>

LIST

<ul class="list">
<li class="first"><a href="../library/Temple1.html">Ancient Temple</a></li>
<li><a href="../library/Temple2.html">Medieval Temple</a></li>
<li><a href="../library/Temple3.html"> Modern Temples</a></li>
<li class="last"><a href="../library/Temple4.html"> Pilgrimage Temple</a></li>
</ul>

Location Information Page

Locationimage1.jpg

SIMPLE TABLE WITHOUT

 <table>
 
<tr>
<th scope="col">Address</th>
<td>Bank of Bhima River, Siddhivinayak</td>
</tr>
<tr>
<th scope="row">City</th>
<td>Mumbai</td>
</tr>
</table>

Contact Page

Contactimage11.jpg


TABLE WITH HEADER

<table>
<tr>
<th scope="row"></th>
<td>
 
<p><h3><strong>International Headquarters - India</strong></h3></p>
<p>Shri Akshar Tour Pvt. Ltd.</p>
<p>Shahibaug,</p>
<p>Amdavad - 380 004, Gujarat, India</p>
<p>Tel: <a href="tel:123456789">(91-79) 2562 5151, 2562 5152,</a></p>
 
<p>e-mail:<a href="email:123456789">info@shriakshartour.net</a></p>
</table>

Contactimage22.jpg

HOME & TOP NAVIGATION

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

Download Links


Reference Links

Summary

You can learn how to use Nokia Web Templates ( for mid range devices) with the help of this article.

86 page views in the last 30 days.
×