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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Word press dreamweaver

875

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
875
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.

×