word press & dreamweaver
DESCRIPTION
Presentation on using WordPress with Dreamweaver CS5.x on a local systemTRANSCRIPT
![Page 1: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/1.jpg)
Designing on a Local System
![Page 2: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/2.jpg)
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
![Page 3: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/3.jpg)
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
![Page 4: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/4.jpg)
Download setup file Install as any other Mac application Will offer Pro version as option – free version
is all that is needed
![Page 5: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/5.jpg)
Download setup file Install WAMP
◦ Click on Wampserver 2 setup file◦ Follow prompts
Put online Set MySQL password (see Appendix)
![Page 6: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/6.jpg)
Lynda.com has step-by-step tutorials for installing MAMP/WAMP and WordPress locally.
![Page 7: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/7.jpg)
Create database Create folder for WordPress files
◦ Windows: C:\wamp\www\sitename◦ Mac: Applications\MAMP\htdocs\sitename
Copy WordPress files to folder Install as usual:
http://localhost/sitename/wp-admin
![Page 8: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/8.jpg)
![Page 9: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/9.jpg)
![Page 10: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/10.jpg)
![Page 11: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/11.jpg)
![Page 12: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/12.jpg)
After installing WordPress, install any themes you want to use.
![Page 13: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/13.jpg)
This Genesis theme (Church) allows for different color themes.
![Page 14: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/14.jpg)
![Page 15: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/15.jpg)
![Page 16: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/16.jpg)
Use Live View to see the page design in Dreamweaver.
![Page 17: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/17.jpg)
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.
![Page 18: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/18.jpg)
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.
![Page 19: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/19.jpg)
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.
![Page 20: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/20.jpg)
I’ve settled on the background color for the wrapper.
![Page 21: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/21.jpg)
To view my changes live, I simply go to the browser.
![Page 22: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/22.jpg)
I’m going to change the header in Dreamweaver. In this case I will edit by clicking the edit button (pencil).
![Page 23: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/23.jpg)
![Page 24: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/24.jpg)
Now I need to adjust the padding on the title area so the text and logo don’t overlap.
![Page 25: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/25.jpg)
![Page 26: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/26.jpg)
Letting Dreamweaver “Discover” dynamically related files, let’s you find linked php files such as footer.php easily.
![Page 27: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/27.jpg)
WordPress sites have LOT of dynamically related files. Filtering allows you to display only those of interest.
![Page 28: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/28.jpg)
![Page 29: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/29.jpg)
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.
![Page 30: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/30.jpg)
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.
![Page 31: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/31.jpg)
![Page 32: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/32.jpg)
Installing MAMP / WAMPScreenshots from Lynda.com
![Page 33: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/33.jpg)
![Page 34: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/34.jpg)
![Page 35: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/35.jpg)
![Page 36: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/36.jpg)
![Page 37: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/37.jpg)
![Page 38: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/38.jpg)
![Page 39: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/39.jpg)
![Page 40: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/40.jpg)
![Page 41: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/41.jpg)
![Page 42: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/42.jpg)
![Page 43: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/43.jpg)
![Page 44: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/44.jpg)
![Page 45: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/45.jpg)
![Page 46: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/46.jpg)
Setting MySQL password
![Page 47: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/47.jpg)
MySQL version will vary depending on when you downloaded.
![Page 48: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/48.jpg)
![Page 49: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/49.jpg)
![Page 50: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/50.jpg)
![Page 51: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/51.jpg)
![Page 52: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/52.jpg)
You will need a text editor to edit config.inc to include the password.
![Page 53: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/53.jpg)
![Page 54: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/54.jpg)
![Page 55: Word press & dreamweaver](https://reader036.vdocuments.us/reader036/viewer/2022070315/5554ebbfb4c90566278b4c86/html5/thumbnails/55.jpg)
After setting the MySQL password, restart all services.