![Moderately-priced
Software: $50—$100
Photoshop Elements (89.99)
TextMate (57.55 [39 Euros])
StyleMaster (59.95)
Coda (79.00)
iWeb (79.00, part of iLife ‘08;
may come installed on some Macs)
Sandvox Pro ($79)
Tuesday, February 9, 2010](https://image.slidesharecdn.com/websitebuilding1-100209182349-phpapp02/85/Building-Your-Own-Website-39-320.jpg)
Building Your Own Website
- 1. Building Your Own Website a survey of available tools by Allen Watson Tuesday, February 9, 2010
- 2. Website Maintenance Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 3. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 4. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 5. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 6. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 7. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 8. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
- 9. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, Web Host PHP, Computer images , etc. Tuesday, February 9, 2010
- 10. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, Web Host PHP, Computer images Your website , etc. Tuesday, February 9, 2010
- 11. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, Web Host PHP, Computer images Your website , etc. Tuesday, February 9, 2010
- 12. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website , etc. Tuesday, February 9, 2010
- 13. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website , etc. Tuesday, February 9, 2010
- 14. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website , etc. Tuesday, February 9, 2010
- 15. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 16. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 17. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 18. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 19. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 20. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 21. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 22. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 23. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 24. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 25. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 26. Programs like Website Maintenance Dreamweaver, BBEdit, Browsers iWeb, Photoshop Your like (Elements), Graphic Safari Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 27. Programs like Website Maintenance Dreamweaver, BBEdit, Browsers iWeb, Photoshop Your like (Elements), Graphic Safari Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
- 28. U S Programs like Website Maintenance E R Dreamweaver, BBEdit, Browsers S iWeb, Photoshop Your like (Elements), Graphic Safari Converter Mac O Your Hard Drive F HTML, FTP Web Host access Y PHP, Computer O images Your website U Programs like R , etc. Fetch, Transmit, Coda, CyberDuck S I T E Tuesday, February 9, 2010
- 29. Flow of creating a web page Create an HTML file Repeat first four locally steps until satisfied. Possibly test it locally Upload file to host Test in multiple browsers Tuesday, February 9, 2010
- 30. Simple HTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>PMUG Sample Page</title> <meta name="generator" content="BBEdit 9.0" /> </head> <body> <h1>This is a heading</h1> <p>Now is the time for all good men to come to the aid of their Mac User Group. Notice that I have a blank line in the source code. Browsers will ignore the blank line, and even multiple spaces, and treat them as a single space. To get a new paragraph, you must have a "p" tag.</p> <p><em>Now</em> is <strong>really</strong> the time for all good people to help.</p> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> <li>subitem 1</li> <li>subitem 2</li> </ul> </ol> </body> </html> Tuesday, February 9, 2010
- 31. Adding CSS (Cascading Style Sheets) HTML (HyperText Markup Language) is intended mostly for describing content: identifying headings, paragraphs, lists, etc. CSS (Cascading Style Sheets) is intended to describe the design or appearance of the content: font, color, background, placement. (demo) HTML originally did some of this: <b>, <i> are examples. CSS allows you to describe many aspects of an element like a paragraph or a particular class of paragraphs, to describe it one time, and then have it automatically applied to every instance. More than this is not the purpose of this talk, so I’ll stop here with a simple example. Tuesday, February 9, 2010
- 32. Varieties of Website Editing Software WYSIWYG do-it-all CSS-only editors: editors such as Adobe StyleMaster, CSSEdit Dreamweaver HTML-only editors: Partial display, Page HyperEdit Spinner Plain text like Color-coded text like TextEdit TextMate and Coda Tuesday, February 9, 2010
- 33. How We’ll Proceed Starting with most expensive, short demos Moderately expensive, longer demos of favorites Inexpensive software, quick demos, discussions of shortcomings Free software, quick demos Tuesday, February 9, 2010
- 34. Expensive Software: More than $100 Goodpage (99.00) BBEdit (125.00) Freeway Express & Freeway Pro ($79/$249) Adobe CS3/4 Suite (1,699.00 or 1,799.00) Dreamweaver (399.00) Fireworks (299.00) Photoshop (649.00) Flash (699.00) Contribute (169.00) Tuesday, February 9, 2010
- 35. Goodpage Unique, full-fledged editor. Handles HTML, CSS, does preview, shows structural view of a page. Major drawback: no documentation. Vendor claims it is so intuitive that documentation isn’t necessary. Worth a look-see; seems like great value for the price. Tuesday, February 9, 2010
- 36. BBEdit Plain text editor—high Previews web power find/replace pages HTML Editor with Scriptable prompts Processes groups CSS Editor with of files prompts $125 FTP Editor to access remote site Tuesday, February 9, 2010
- 37. Freeway Express and Freeway Pro Express not recommended; uses coding techniques considered outmoded in today’s market (tables for positioning, versus CSS) Freeway Pro: King of the “easy creation” tools; works like a page layout program. But expensive. Uses proprietary database, can’t read HTML. Tuesday, February 9, 2010
- 38. Adobe Dreamweaver and Creative Suite CS3 or CS4 has a Dreamweaver edits web design suite; HTML, CSS, main web editor is Javascript. WYSIWYG Dreamweaver. interface. Photoshop edits Sophisticated tools. photos; Fireworks does other images; Steep learning curve Flash does animation. but worth it if you Can be purchased are going to create separately. many web pages. Tuesday, February 9, 2010
- 39. Moderately-priced Software: $50—$100 Photoshop Elements (89.99) TextMate (57.55 [39 Euros]) StyleMaster (59.95) Coda (79.00) iWeb (79.00, part of iLife ‘08; may come installed on some Macs) Sandvox Pro ($79) Tuesday, February 9, 2010
- 40. Moderately Priced Photoshop Elements v6: Photo editing for advanced non-professional (above iPhoto level). We had a demo not long ago. TextMate: Superb editor for text and all kinds of code, HTML, CSS, PHP. Organize files into projects. Color coding; great code completion, shortcuts, foldable code blocks. Can be external editor for FTP programs. Tuesday, February 9, 2010
- 41. StyleMaster: a CSS editor. Great for doing lots of CSS styling, fine tuning, debugging. WestCiv, the vendor, has super CSS tutorial. Coda: Combines HTML, CSS editors, Preview, and FTP in one window. My favorite app! iWeb: WYSIWYG editor; great integration with Mobile Me (Dot Mac), one button publishing. Can also publish to local disk. Easy but limited. (Includes iPhoto, iDVD, iMovie, Garage Band.) Uses templates for fast development. Tuesday, February 9, 2010
- 42. Sandvox: Similar to iWeb, but with more than twice as many themes, and capable of fancier editing. Advise Pro version; allows insertion and editing of raw HTML. Able to publish directly to remote site. Include Google tools and analytics. My preferred “easy creation” tool. Tuesday, February 9, 2010
- 43. Limitations of iWeb, Sandvox, RapidWeaver, Freeway These programs save your site in a proprietary database format. They cannot read HTML or PHP files; they can only output them. So you cannot use them to edit existing websites; you can only use them to create new sites. Any changes made with external editors like TextMate, Coda, or BBEdit have to be made every time you export the site from the database to HTML. Tuesday, February 9, 2010
- 44. MY COMPUTER CRASHED! I had notes written up on the cheap and free software, but my computer crashed 20 minutes before I had to stop working on this presentation!! Oh, well! I’ve got the basics in my head, so bear with me. Tuesday, February 9, 2010
- 45. Cheap Software HyperEdit (25.00) Taco HTML (24.95) PageSpinner (29.95) CSSEdit (29.95) Transmit (29.95) RapidWeaver (49.95) Sandvox (basic, $49) Tuesday, February 9, 2010
- 46. Free Software Text Wrangler TextEdit CyberDuck SEEdit Maxi 2008 (promising; crashes) Special tools: XAMPP. meaning cross-platform, Apache, MySQL, PHP, Perl Tuesday, February 9, 2010
- 47. Questions? Tuesday, February 9, 2010