1 / 40

Website Design For Your Layout or Club

Website Design For Your Layout or Club. Dave Grenier Rails Across the Bay 2009 PCR Convention - Fremont April 17, 2009. Introduction . Picture two scoops of vanilla ice cream Q. What is this clinic about? A. How to create a website for your model railroad or club Q. What is it not about?

deion
Download Presentation

Website Design For Your Layout or Club

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Design For Your Layout or Club Dave Grenier Rails Across the Bay 2009 PCR Convention - Fremont April 17, 2009

  2. Introduction • Picture two scoops of vanilla ice cream • Q. What is this clinic about? • A. How to create a website for your model railroad or club • Q. What is it not about? • A. Alphabet soup – no HTML, CSS, PHP Rails Across the Bay 2009 Fremont, CA

  3. Why A Website? • Show something • Brag about something • Teach something • Sell something • Why not? • OK, let’s build a website! Rails Across the Bay 2009 Fremont, CA

  4. Getting Started • You need a web host • What’s a web host? • Stores your files on their computers • Connection to Internet • Two types • Free and Paid Rails Across the Bay 2009 Fremont, CA

  5. Free Web Hosting • Yahoo! GeoCities • Trainorders.com (Premium members only) • T35 Hosting (t35.com) • Angelfire • Bravenet.com • Your ISP • Google “free web hosting” Rails Across the Bay 2009 Fremont, CA

  6. Free Web Hosting - Pros • Free • Website templates • Easy to use • No HTML or CSS Rails Across the Bay 2009 Fremont, CA

  7. Free Web Hosting - Cons • Advertisements • No domain name • Long website address • Difficult to upload files • Limited storage & bandwidth • Limited technical support Rails Across the Bay 2009 Fremont, CA

  8. Paid Web Hosting • BlueHost.com • GoDaddy.com • 1and1.com • Earthlink.net • 1,000’s of others • Google “paid website hosting” Rails Across the Bay 2009 Fremont, CA

  9. Paid Web Hosting - Pros • Free domain name - usually • Most have 24/7 support • Better uptime service • More disk space and bandwidth • No advertisements • Better search engine results • Programming languages (PHP, ASP, SQL) Rails Across the Bay 2009 Fremont, CA

  10. Paid Web Hosting - Cons • It’s not free! Rails Across the Bay 2009 Fremont, CA

  11. OK, Now What? • You need a domain name • Your website’s address (eg. www.mylayout.com) • Check availability of domain name • Register domain name with host • Sign up for a hosting account • Now on to the fun part! Rails Across the Bay 2009 Fremont, CA

  12. Website Creation Tools • Four Main Categories • Templates • Web Editors • Graphics Applications • File transfer utilities (FTP) Rails Across the Bay 2009 Fremont, CA

  13. Templates • Available on many web hosting sites • Preformatted pages • Font styles • Page backgrounds • Color combinations • Easy to use, no HTML! • Focus on content Rails Across the Bay 2009 Fremont, CA

  14. Web Editors • MS Notepad • Notepad++ • MS Word • WeBuilder • MS Expression Web • Adobe Dreamweaver • Apple iWeb Rails Across the Bay 2009 Fremont, CA

  15. Graphics Applications • MS Photo Editor • GIMP • Corel Paint Shop Pro • Adobe Photoshop Elements • CorelDRAW • Adobe Photoshop CS4 Rails Across the Bay 2009 Fremont, CA

  16. FTP Utilities • Copies files to your web host • CoffeeCup Direct FTP • Ipswitch WS_FTP • CuteFTP Rails Across the Bay 2009 Fremont, CA

  17. Web Design Tips Rails Across the Bay 2009 Fremont, CA

  18. Don’t Drive ‘em Away • Don’t use “Click to enter my website” • Don’t use uncontrollable sounds • Don’t use busy, crowded pages • Don’tusemanydifferentfonts • Don’t use large photos • Don’t use long paragraphs Rails Across the Bay 2009 Fremont, CA

  19. NO Long Paragraphs When writing body text for a web page or anything to be read online, make sure you use fairly short sentences and paragraphs otherwise you are making it really hard for the rest of us to read and understand what you are saying because the eye and brain need a brief rest now and then as they read so that it’s easier to scan, take in, and process what you have just read otherwise you are making it very hard on us poor readers by making us read long run on paragraphs of text that never seem to end, they just go on and on so don’t you wish this paragraph would end; yeah, I do too, but I thought I would show you how hard it is to read long run on paragraphs of text, and it’s actually kind of surprising how many people don’t seem to pay any attention to this and they just force the rest of us to read all this run on text, which is a good way to make sure your website will never be revisited or recommended by anyone because the site is so hard to read with all the long and eye-tiring paragraphs like this long paragraph you see here; so are you tired yet or do I need to keep going? Rails Across the Bay 2009 Fremont, CA

  20. Break It Up! • Shorter paragraphs • Two or three sentences • Short sentences • Easier to read • More inviting to visitors Rails Across the Bay 2009 Fremont, CA

  21. Short Paragraphs When writing body text for a web page or anything to be read online, make sure you use fairly short sentences and paragraphs.  Otherwise, you are making it really hard for the rest of use to read and understand what you are saying! The eye and brain need a brief rest now and then as they read so that it’s easier to scan, take in, and process what you have just read.  You make it very hard on us poor readers by forcing us to read long run on paragraphs of text that never seem to end, they just go on and on!  Aren’t you glad this page uses shorter paragraphs and sentences? See what a difference short paragraphs and short sentences make to readability? Rails Across the Bay 2009 Fremont, CA

  22. Design Tips - Fonts • Sans-serif fonts preferred for screens • Don’t use serif fonts, OK for printed media • Use different sizes for Emphasis • Big enough to see • Size adjustable • Not everyone has young eyes! Rails Across the Bay 2009 Fremont, CA

  23. Design Tips - Fonts Rails Across the Bay 2009 Fremont, CA

  24. Design Tips - Photos • Avoid large images • 72 dpi max • Adobe Photoshop Elements • Use thumbnails linked to larger photos • Make thumbnails large enough to see! Rails Across the Bay 2009 Fremont, CA

  25. Design Tips - Color • n • n • n • U Avoid UGLY color combinations Avoid dark text on dark backgrounds Avoid light text on light backgrounds Use dark text on light backgrounds Rails Across the Bay 2009 Fremont, CA

  26. Design Tips - Menus • Provide webpage navigation • Use on every page • Same place on every page • Left nav bar easiest to use • Link all pages • Drop-downs use CSS or JavaScript Rails Across the Bay 2009 Fremont, CA

  27. Putting It All Together - Finally! • Plan website on paper 1st • Draw it out • Headings • Text blocks • Photos • Navigation (menu) Rails Across the Bay 2009 Fremont, CA

  28. Home Layout Website • Introduce your layout (Home page) • Track plan • Layout photos • Construction photos • Prototype history & photos • Cool techniques • Publications Rails Across the Bay 2009 Fremont, CA

  29. Home Layout Website (cont) • Operating scheme • Electrical control system • Follow a train around the layout • Equipment roster • Photos, photos, photos • About you • Invitation to visit Rails Across the Bay 2009 Fremont, CA

  30. Club Website • Introduce your club (Home page) • About the club • Address, with map • Hours of operation • Telephone number • Layout photos and trackplan Rails Across the Bay 2009 Fremont, CA

  31. Club Website (cont) • Prototype history & photos • Membership information • Invitation to join or visit • Meeting schedule • Calendar of events • Activities Rails Across the Bay 2009 Fremont, CA

  32. Club Website (cont) • Newsletter • Officers • By-laws • Club history • Community service • Non-profit status (if applicable) • Links Rails Across the Bay 2009 Fremont, CA

  33. Putting it all together Ideas Fonts | Photos | Colors | Menu Templates | Editor | Graphics | FTP Web Host | Domain Name Rails Across the Bay 2009 Fremont, CA

  34. You’re Almost Done! • Time to publish • Upload to host • FTP • How does it look on the Internet? • Use different browsers – IE, Safari, FireFox • Verify ALL links work • Revise as needed • Does it look OK now? Rails Across the Bay 2009 Fremont, CA

  35. CONGRATULATIONS! • You have a website! • Who knows about it? • Nobody? Tell a friend, or a bunch! • Submit it to Google and Yahoo! • www.google.com/submit_content.html • search.yahoo.com/info/submit.html • Keep content fresh and updated • Use “Date last changed” Rails Across the Bay 2009 Fremont, CA

  36. Whetted Your Appetite? • Now what? • Learn more website development • HTML, XHTML, CSS • PHP, ASP • JavaScript • MySQL database • Adult education classes Rails Across the Bay 2009 Fremont, CA

  37. Where to Get More Information - Tutorials • www.w3schools.com/ • www.webstyleguide.com/ • www.thesitewizard.com/ • www.alvit.de/handbook/ • www.learningwebdesign.com/ • www.hooverwebdesign.com/ • www.resources.bravenet.com/ Rails Across the Bay 2009 Fremont, CA

  38. Where to Get More Information - Tools • notepad-plus.sourceforge.net/uk/site.htm • www.blumentals.net/webuilder/ • www.microsoft.com/Expression/ • www.adobe.com/products/dreamweaver/ • www.gimp.org/ • www.coffeecup.com/ • www.ipswitch.com/products/ws_ftp_home/ • www.cuteftp.com/ • www.cutepdf.com/ Rails Across the Bay 2009 Fremont, CA

  39. Where to Get More Information – Misc. • www.sitepoint.com/recentarticles/ • www.sitepoint.com/article/overcoming-front-page-hurdle • www.google.com/submit_content.html • search.yahoo.com/info/submit.html • www.webmonkey.com/ • www.webdesignerwall.com/ • www.hypergurl.com/colormatch.php Rails Across the Bay 2009 Fremont, CA

  40. Questions? Next year: Silver Rails 2010 April 28 to May 2 Sparks, Nevada www.pcrnmra.org/conv2010 Rails Across the Bay 2009 Fremont, CA

More Related