This document provides instructions for designing websites locally using MAMP/WAMP on Mac/Windows systems. It discusses installing Apache, MySQL, PHP and WordPress locally, downloading themes and plugins, and using Dreamweaver CS5 to edit files and view live changes in the browser without an internet connection. Specific steps covered include creating databases, installing WordPress, editing themes and files in Dreamweaver, and customizing footers. Screenshots demonstrate properties, filters and discovering related files.

1. Designing on a Local System

2.  Test and experiment with new features or
plugins without impacting online site
 Work offline with no internet connection
 Present prototypes and live demos to clients
without needing a connection
 Design using Dreamweaver CS5.x

3.  Apache, MySQL and PHP installed
◦ Mac: MAMP – http://www.mamp.info/en/index.html
◦ Windows: WAMP – http://www.wampserver.com/en
 WordPress
 Themes & plugins stored locally to “upload”
(when working offline)
 Browser of choice

4.  Download setup file
 Install as any other Mac application
 Will offer Pro version as option – free version
is all that is needed

5.  Download setup file
 Install WAMP
◦ Click on Wampserver 2 setup file
◦ Follow prompts
 Put online
 Set MySQL password (see Appendix)

6. Lynda.com has step-
by-step tutorials for
installing
MAMP/WAMP and
WordPress locally.

7.  Create database
 Create folder for WordPress files
◦ Windows: C:wampwwwsitename
◦ Mac: ApplicationsMAMPhtdocssitename
 Copy WordPress files to folder
 Install as usual:
http://localhost/sitename/wp-admin

12. After
installing
WordPress,
install any
themes you
want to use.

13. This Genesis theme
(Church) allows for
different color themes.

16. Use Live View
to see the
page design in
Dreamweaver.

17. Clicking on
areas of the
page, changes
the display of
div and class
settings for
that section.
By clicking on
a “div”, the
properties
defined in the
css are shown.

18. I want to
eliminate the
background
image in the
body and
change it’s
color. I can
“comment
out” the
image, and
add a new
property.

19. To add a
background
color that is
consistent with
the rest of the
page, I can
hover the
mouse over and
area
(eyedropper not
visible in
screenshot) and
Dreamweaver
will fill in the
hex code.

20. I’ve settled on
the background
color for the
wrapper.

21. To view my
changes live, I
simply go to
the browser.

22. I’m going to
change the
header in
Dreamweaver.
In this case I
will edit by
clicking the
edit button
(pencil).

24. Now I need to
adjust the
padding on
the title area
so the text
and logo don’t
overlap.

26. Letting
Dreamweaver
“Discover”
dynamically
related files,
let’s you find
linked php files
such as
footer.php
easily.

27. WordPress sites
have LOT of
dynamically
related files.
Filtering allows
you to display
only those of
interest.

29. There are three
footer files. The last
is the Genesis
framework and
should not be edited.
This one defines the
layout of the footer
and calls the
shortcodes.

30. This footer.php defines the
shortcodes themselves.
You now have the option to edit
and customize the footer.*
*This is being shown to illustrate the power
of Dreamweaver CS5. However, for Genesis
themes, using the Genisis Simple Edits
plug-in is a simpler way.

32. Installing MAMP / WAMP
Screenshots from Lynda.com

46. Setting MySQL password

47. MySQL version
will vary
depending on
when you
downloaded.

52. You will need a text editor to edit config.inc to include the password.

55. After setting the MySQL password, restart all services.