How to Create a Mobile Website with Dreamweaver

Open Dreamweaver and go to file > New. You will then see a "New Document" Window. On the left hand side, you want to pick the option "page from sample" then in the next column, choose "mobile Starters", then "jQuery Mobile (CDN)"

Create the Pages. Once you open the jQuery Mobile (CDN) file, you will see a page that looks similar to this:

• Although this technically is a one page document, each header represents a different "page". For example, "Page One" is the home page for the mobile website, "Page Two" could be the about us page, "Page Three" could be your services page and so on.

Look at the Code. These steps can be pretty tricky if you are unfamiliar with basic HTML. To create the content, try working in "split view" on Dreamweaver. How to get to that mode is if you look at the left hand corner of Dreamweaver, below the file menu, you will see four options "code, split, design, and live" like this:

• Choose the highlighted option "split", and you will see a view of code and the actual site side-by-side. Take a look at the code.

Edit the Headers for Each Page. There is (div data-role="page" id="page"), which means that it is the beginning of a new page. Note that each page is associated with a number 'div data-role="page" id="page2"' is the second page, 'div data-role="page" id="page3"' is the third page and so on

'div data-role="header"' is the header area, and you put your header information between the two "h1"and "/h1" tags.

Edit the Content and Menu Items. 'div data-role="Content"' is the beginning of the content section. This is where you put the actual content of each page. Note that in the first page there is:

• and if you look at the actual web page, you see that the first page has a list of links. 'ul data-role="listview"' means that you want a list of links in the content area.When adding any menu items or 'data-role="listview"', make sure you link the correct text with the correct pages. For example if page two is "About Us", page three is "Our Service", and Page four is "Contact Us" then you want to put:
  

  {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/47\/Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet1.jpg\/v4-460px-Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet1.jpg","bigUrl":"\/images\/thumb\/4\/47\/Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet1.jpg\/aid2383580-v4-728px-Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}
• Now to edit content, simple put your text in between the 'div data-role="content"' and '/div' tags. For example:
  

  {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet2.jpg\/v4-460px-Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet2.jpg","bigUrl":"\/images\/thumb\/c\/cf\/Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet2.jpg\/aid2383580-v4-728px-Create-a-Mobile-Website-with-Dreamweaver-Step-5Bullet2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a><br>\n<\/p><p><br \/>\n<\/p><\/div>"}

Edit the Footer. To edit the footer, simply put your text in place of the "Page Footer" text.