Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Green Hectares Rural Tech Workshop – Website Design

868 views

Published on

A workshop covering the basics of website design. Green Hectares offers this content as part of an initiative to enable rural communities with technology.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Green Hectares Rural Tech Workshop – Website Design

  1. 1. Website Design
  2. 2. www.greenhectaresonline.com www.zephyrtraining.ca info@greenhectaresonline.com info@zephyrtraining.caTHESE MATERIA A COPY LS RE RIGHTED WITH A RIGHTS A RESERV THIS DOCUMENT MA NOT IN WHOLE OR IN PA BE COPIED, PHOTOCOPIED, REPRODUCED, OR REDUCED TO A ELECTRONIC LL RE ED. Y RT NYMEDIUM OR MA CHINE-REA BLE FORM WITHOUT PRIOR CONSENT, IN WRITING, FROM Z R SOFTWA TRA DA EPHY RE INING LTD. A GRE HECTA S CORP. ND EN REA SOFTWA COMPUTER, A PRODUCT NA MENTIONED A MA CTURER A PUBLISHER TRA NY RE, ND MES RE NUFA ND DEMA A A USED ONLY FOR THE PURPOSE OF IDENTIFICA RKS ND RE TION.Drupal is a registered trademark of Dries Buytaert.Google and Google sites are registered trademarks of Google InJoomla! Is a registered trademark of Open Source Matters Inc.Weebly is a registered trademark of Weebly Inc.WordPress is a registered trademark of Automattic, Inc.
  3. 3. Content ManagementS ystemsContent Management Systems (CMS) areprograms found on the internet which allowyou to build websites without requiringtechnical knowledge of HTML, CS S orthe uploading of files.
  4. 4. CMS Benefits• Y make changes inside any web browser. ou• Y don’t need any HTML knowledge. ou• Because content is stored separate from the site’s design, the content is always displayed with the same, consistent design.
  5. 5. Design Elements• Navigation bar • Fonts• Drop-Down Menus • Colours• The Fold • Images• Pages • Contact Form• Themes • Links • Blog
  6. 6. Navigation BarThe navigation bar is group ofbuttons common to all pages inyour site that provides links formoving between pages.
  7. 7. Drop-Down MenusDrop-down menus are lists ofoptions that appear below a linkwhen a user hovers over it withtheir cursor.
  8. 8. The Fold The fold is the section of a website that is visible before a user has to use the scrollbar.
  9. 9. Pages Y have options with CMS sites to hide ou certain pages from public view or even use passwords to enable select visitors to your site access to specific pages.
  10. 10. Themes CMS sites include various themes that you can often change or swap back and forth with the click of your mouse!
  11. 11. Fonts There are two types of fonts: serif and sans serif.
  12. 12. S erif FontsA serif is a short line at the end of themain strokes of a character or letter.
  13. 13. Browser Compatible S erifFonts• Georgia• Times New Roman• Times
  14. 14. S ans S erif FontsA sans serif font is a font in which lettershave no serifs.
  15. 15. Browser Compatible S ans S erifFonts • Arial • Verdana • Helvetica
  16. 16. More on Fonts • Never use more than two fonts on a website. • Keep font sizes consistent throughout pages on your website. (A paragraphs ll should be the same size, all titles should be the same size, etc.)
  17. 17. ColoursColor choice is an importantdecision in every website design.
  18. 18. Images Images can enhance your site or fill it with clutter.
  19. 19. Contact Form A contact form enables users to contact you from directly inside your website instead of having to fill out email fields.
  20. 20. LinksLinks allow the reader to : • Move from one section of a web page to another section of the page • Move to a new web page • Go to another website
  21. 21. Blog Blogs are terrific for quick updates and add a personal touch to your site. Having a blog appear directly in one of your web pages enables users to stay inside your website while gathering all the information they need.
  22. 22. Popular CMS S itesDrupal http:/drupal.org /Google S ites https:/sites.google.com /Joomla! http:/www.j / oomla.orgWeebly http:/www.weebly.com /Wordpress http:/wordpress.org /

×