Your SlideShare is downloading. ×
Word press dreamweaver
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Word press dreamweaver

864
views

Published on

PDF of presentation on using WordPress with Dreamweaver CS5 on a local system

PDF of presentation on using WordPress with Dreamweaver CS5 on a local system

Published in: Design

1 Comment
1 Like
Statistics
Notes
  • This is good. You might want to check out the DesktopServer Limited flavor of XAMPP at http://serverpress.com. It's cross platform for Mac & Windows and eliminates a lot of these cumbersome steps (and free).

    The premium version extends support for Dreamweaver by automatically creating a site definition file, and support direct viewing/editing of theme files, bypassing the root index.php -which is good for quickly creating dreamweaver 'page templates'.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
864
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 forinstallingMAMP/WAMP andWordPress 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
  • 8. AfterinstallingWordPress,install anythemes youwant to use.
  • 9. This Genesis theme(Church) allows fordifferent color themes.
  • 10. Use Live Viewto see thepage design inDreamweaver.
  • 11. Clicking onareas of thepage, changesthe display ofdiv and classsettings forthat section.By clicking ona “div”, thepropertiesdefined in thecss are shown.
  • 12. I want toeliminate thebackgroundimage in thebody andchange it’scolor. I can“commentout” theimage, andadd a newproperty.
  • 13. To add abackgroundcolor that isconsistent withthe rest of thepage, I canhover themouse over andarea(eyedropper notvisible inscreenshot) andDreamweaverwill fill in thehex code.
  • 14. I’ve settled onthe backgroundcolor for thewrapper.
  • 15. To view mychanges live, Isimply go tothe browser.
  • 16. I’m going tochange theheader inDreamweaver.In this case Iwill edit byclicking theedit button(pencil).
  • 17. Now I need toadjust thepadding onthe title areaso the textand logo don’toverlap.
  • 18. LettingDreamweaver“Discover”dynamicallyrelated files,let’s you findlinked php filessuch asfooter.phpeasily.
  • 19. WordPress siteshave LOT ofdynamicallyrelated files.Filtering allowsyou to displayonly those ofinterest.
  • 20. There are threefooter files. The lastis the Genesisframework andshould not be edited.This one defines thelayout of the footerand calls theshortcodes.
  • 21. This footer.php defines theshortcodes themselves.You now have the option to editand customize the footer.**This is being shown to illustrate the powerof Dreamweaver CS5. However, for Genesisthemes, using the Genisis Simple Editsplug-in is a simpler way.
  • 22. Installing MAMP / WAMPScreenshots from Lynda.com
  • 23. Setting MySQL password
  • 24. MySQL versionwill varydepending onwhen youdownloaded.
  • 25. You will need a text editor to edit config.inc to include the password.
  • 26. After setting the MySQL password, restart all services.