Create a Mobile Website with Dreamweaver

Over 100 million consumers use their smartphones to browse the internet according to com.score Inc. Learn how to create a mobile website specifically for the mobile audience. For this tutorial, you will need dreamweaver CS5 and up. We will be learning how to create a jquery mobile website.

Steps

  1. 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)"
  2. 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.
  3. Look at the Code. These steps can be pretty tricky if you are unfamiliar with basic HTML. To create the content, I like to work 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. Let's take a look at the code for a second.
  4. 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.
  5. 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:
    • Now to edit content, simple put your text in between the 'div data-role="content"' and '/div' tags. For example:
  6. Edit the Footer. To edit the footer, simply put your text in place of the "Page Footer" text.
  7. Take a look at your website in "live Mode". Remember where you switched into "split mode?" right in that area, there is a button that says "live". Click on that, and you will see what your website will look like on a phone!

Related Articles

Sources and Citations

You may like

Retrieved from "https://kipkis.com/index.php?title=Create_a_Mobile_Website_with_Dreamweaver&oldid=309922"