Mobile Websites with Dreamweaver CS5.5
Center for Innovation in Teaching and Research
Presenter: Chad Dennis
Instructional Technology Systems Manager
ce-dennis@wiu.edu
© Copyright 2011 Center for Innovation in Teaching and Research
1
Dreamweaver CS 5.5 has incorporated a new feature called Phone Gap.
Using phone gap you can easily create websites optimized for mobile
devices such as iPads, iPhones, and Android phones. The great thing
about using this feature is that it will automatically create a version for
multiple devices. There is nothing extra you need to do.
Setting Up
There are two things we need to do before we actually create our site.
First we need to set up a local folder to put our site files in. Second we
need to set up our remote server.
To set your local folder do the following:
• Decide where on your computer you want to put your site files.
• Create a new folder there.
• Name your folder.
• Inside of that folder you can create a folder called images to house
any image files you may use.
To set your remote folder do the following:
• Click Site in the main menu and choose New Site.
• In the Site Setup for... window, type in a name into the Site Name
text field.
• Click Servers located on the left side of the Site Setup for... window.
• Next click the plus (+) symbol to add a new server.
• In the Basic tab put in your server info. This will depend on where
you are having your site hosted. If you are using your web space at
WIU use the following info.
• Server Name: Can be whatever you want.
• Connect Using: SFTP.
• SFTP Address: sftp.wiu.edu.
• Username: Use your ECOM username.
• Password: Use your ECAM password.
• Click the Save checkbox if you want dreamweaver to
remember your login info.
• Click Test to see if dreamweaver can connect successfully using
the info you provided.
• If the test was successful click Save.
© Copyright 2011 Center for Innovation in Teaching and Research
2
© Copyright 2011 Center for Innovation in Teaching and Research
3
Create a New Site
To create a new mobile site do the following:
• First, click File > New.
• In the window that pops up choose Page from Sample > Mobile
Starters > jQuery Mobile (PhoneGap).
• For the Doc Type drop down menu choose HTML 5.
• Click Create.
• Your new file will open.
© Copyright 2011 Center for Innovation in Teaching and Research
4
Now you will need to save the file and all dependent files:
• Click File > Save and save the file to your local folder you created
earlier.
• Name your file index.html.
• Click Save.
• Next you will see the Copy Dependent Files window.
• Click Copy.
© Copyright 2011 Center for Innovation in Teaching and Research
5
Now in your directory of site files you will see your index.html page along
with a folder called jquery-mobile. This folder contains all the javascript
(.js) and style sheet (.css) pages needed to make the site work.
© Copyright 2011 Center for Innovation in Teaching and Research
6
Editing Your Site
You can edit your site as you would any other site by using the Code view,
Design view, or the Split view. If you are HTML savvy you can edit the HTML
directly in the Code view. Otherwise you can use the design view. You
can switch between views by using the buttons on the upper left of the
window.
The following image is an example of the Split view. The Code view is on
the left while the Design view is on the right.
© Copyright 2011 Center for Innovation in Teaching and Research
7
Live View
By clicking Live View you will see exactly what your mobile site will look
like. Live view appears in the Design window. You can also click on any of
the links and they will work as well.
© Copyright 2011 Center for Innovation in Teaching and Research
8
Multiscreen Preview
By clicking the Multiscreen view button you will get a window that shows
you three different versions of your site.
• Phone (320 X 300)
• Tablet (768 X 300)
• Desktop (1126 X 280)
© Copyright 2011 Center for Innovation in Teaching and Research
9
If you click the drop arrow next to the Multiscreen button it gives you a list
a different resolutions that you can view one at a time.
Upload to Server
When you are ready to view your page you will need to upload your
page to your server. Do the following:
• Click the File Management button at the top of the screen.
• Choose Put. This “puts” your file up on the server based on the server
info you entered in earlier. Now you can view your page on your
mobile device.
© Copyright 2011 Center for Innovation in Teaching and Research
10
© Copyright 2011 Center for Innovation in Teaching and Research
11