Voice call facility in mobile websites has become very common and it is an easy task to implement with jquery mobile. Jquery mobile framework takes the ‘write less, do more’ mantra to the next level by helping web designers to develop mobile websites and apps very easily and quickly.

In this tutorial, we will discuss that how to add a call button in your mobile site using Adobe Dreamweaver 6.0.

Step 1

Select File > New > Page from sample >  jquery mobile (Local) > create.    This template helps you to keep every file in your local folder.

1                2

 

Save the document and name it as index.html .Copy the all the dependent files to your root folder including CSS styles and .js files and click on Live button to preview your webpage inside Dreamweaver.

temp

Make necessary changes in the template according to your need using CSS style.

 

Step 2

Next step is to insert a call button inside this document. For that, we will use <li> element in HTML. Click on code view and delete the entire list from the <ul data-role=”listview”> tag.  And insert below given code in that place.

<li><a  href=”tel:+1800229933″>Call Us</a></li>

Done. Your completed version of mobile site with a call button will look like this.

completed-image

 

Here, I have completed only the call button part. Complete version of my website will looks like this.

3

.