16
Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Embed Size (px)

Citation preview

Page 1: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Setting up Dreamweaver to use your local WAMP testing Server

Using Dreamweaver and WAMP Server

Page 2: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Why WAMP?• WampServer is a Windows web development

environment. It allows you to create and test web pages and applications using a local server: Apache2. It also handles server-side scripting: PHP and MySQL databases (alongside a database admin panel: PhpMyAdmin).

Page 3: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Why Dreameaver?• You can test web pages (especially with PHP) safely

before they go live, and it saves you a lot of time in the long run.

• You can configure the Dreamweaver Site with WAMP as the local testing server.

Page 4: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

www.wampserver.com/en/• You need to have downloaded and installed WAMP server on your computer,

normally as c:\wamp

Page 5: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Completing installation

Page 6: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

• Look for the green WAMP logo/icon in the bottom right of the task bar area: • If it is red or orange it is not working fully.• Type localhost (or http://localhost) in the browser window, you should get the WAMP

server home page

Check Server is running

Page 7: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Add a project folder in the WAMP server• Navigate to the www folder in the WAMP folder on

the C: drive, or where you installed it, e.g.

C:\wamp\www

• To add a project, create a new folder (the name of the folder becomes the project, e.g.

C:\wamp\www\advancedwebdesign

Page 8: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Going to a project• You can locate a website by adding the folder name after localhost/ in the address

bar of the browser, e.g. localhost/advancedwebdesign or clicking the folder icon on the homepage of the server:

Page 9: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Specifying a local testing server1. Start Dreamweaver2. Set up a Site (project): click Site > New Site (or Site > Manage Sites if already

existing)3. Locate the folder where you will keep your website locally (on your computer,

memory stick, etc. but does not have to be in the WAMP folder)

Page 10: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Specifying the testing server• Select “Servers”• Click the “+” add servers icon. Add information (use Local/Network)• Locate the WAMP Server/Project Folder (normally in c:\wamp\www folder). Save

Page 11: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Specifying the testing server• Make sure the server is checked as a Testing Server• Save, then Done

Page 12: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Prepare to copy files to testing server• In order to synchronise and test/view pages, you will need to copy

across the files to the testing server. • If you do not, you may be prompted later on to copy across a file

being tested.• Whenever you test preview a page, the software has to copy it to the

testing server to view it • Expand the window so you can start to copy files:

Page 13: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Upload files• Click the Site folder (right window) then the upload arrow.

Make sure you are connected:

Page 14: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Return to local window• Collapse the window so you can return to your local

site view

Page 15: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Open up a php page• Open echo.php• Click the Live View button

• You may have to OK this:

You should get an output:

Page 16: Setting up Dreamweaver to use your local WAMP testing Server Using Dreamweaver and WAMP Server

Working on php pages• You should be able to click the Live button on and

off to toggle between preview and edit modes and be able to see the results of your php.

• This is very useful, as any errors in the php can be found and corrected locally without having to upload and test files on a remote ftp server.

• Sometimes the WAMP server may not be running. Click Start>Programs>WAMPServer>Start to restart.

• When it is running normally, it displays a green icon