Copyright 2011 Center for Innovation in Teaching and Research 1

Transcription

1 Mobile Websites with Dreamweaver CS5.5 Center for Innovation in Teaching and Research Presenter: Chad Dennis Instructional Technology Systems Manager Copyright 2011 Center for Innovation in Teaching and Research 1

2 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

3 Copyright 2011 Center for Innovation in Teaching and Research 3

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 Copyright 2011 Center for Innovation in Teaching and Research 11