green hectares rural tech workshop – website design

22
Website Design

Upload: green-hectares

Post on 28-Jan-2015

108 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Green Hectares Rural Tech Workshop – Website Design

Website Design

Page 2: Green Hectares Rural Tech Workshop – Website Design

[email protected]

[email protected]

THESE MATERIALS ARE COPYRIGHTED WITH ALL RIGHTS ARE RESERVED. THIS DOCUMENT MAY NOT IN WHOLE OR IN PART BE COPIED, PHOTOCOPIED, REPRODUCED, OR REDUCED TO ANY ELECTRONIC MEDIUM OR MACHINE-READABLE FORM WITHOUT PRIOR CONSENT, IN WRITING, FROM ZEPHYR SOFTWARE TRAINING LTD. AND GREEN HECTARES CORP.ANY SOFTWARE, COMPUTER, AND PRODUCT NAMES MENTIONED ARE MANUFACTURER AND PUBLISHER TRADEMARKS AND ARE USED ONLY FOR THE PURPOSE OF IDENTIFICATION.

Drupal is a registered trademark of Dries Buytaert.

Google and Google sites are registered trademarks of Google In

Joomla! 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.

Page 3: Green Hectares Rural Tech Workshop – Website Design

Content Management SystemsContent Management Systems (CMS) are programs found on the internet which allow you to build websites without requiring technical knowledge of HTML, CSS or the uploading of files.

Page 4: Green Hectares Rural Tech Workshop – Website Design

CMS Benefits• You make changes inside any

web browser.• You don’t need any HTML

knowledge. • Because content is stored

separate from the site’s design, the content is always displayed with the same, consistent design.

Page 5: Green Hectares Rural Tech Workshop – Website Design

Design Elements• Fonts• Colours• Images• Contact Form• Links• Blog

• Navigation bar

• Drop-Down Menus

• The Fold• Pages• Themes

Page 6: Green Hectares Rural Tech Workshop – Website Design

Navigation Bar

The navigation bar is group of buttons common to all pages in your site that provides links for moving between pages.

Page 7: Green Hectares Rural Tech Workshop – Website Design

Drop-Down Menus

Drop-down menus are lists of options that appear below a link when a user hovers over it with their cursor.

Page 8: Green Hectares Rural Tech Workshop – Website Design

The Fold

The fold is the section of a website that is visible before a user has to use the scrollbar.

Page 9: Green Hectares Rural Tech Workshop – Website Design

Pages You have options with CMS sites to hide certain pages from public view or even use passwords to enable select visitors to your site access to specific pages.

Page 10: Green Hectares Rural Tech Workshop – Website Design

ThemesCMS sites include various themes that you can often change or swap back and forth with the click of your mouse!

Page 11: Green Hectares Rural Tech Workshop – Website Design

FontsThere are two types of fonts: serif and sans serif.

Page 12: Green Hectares Rural Tech Workshop – Website Design

Serif FontsA serif is a short line at the end of the main strokes of a character or letter.

Page 13: Green Hectares Rural Tech Workshop – Website Design

Browser Compatible Serif Fonts

• Georgia• Times New Roman

• Times

Page 14: Green Hectares Rural Tech Workshop – Website Design

Sans Serif FontsA sans serif font is a font in which letters have no serifs.

Page 15: Green Hectares Rural Tech Workshop – Website Design

Browser Compatible Sans Serif Fonts

• Arial

• Verdana• Helvetica

Page 16: Green Hectares Rural Tech Workshop – Website Design

More on Fonts• Never use more than two fonts

on a website.• Keep font sizes consistent

throughout pages on your website. (All paragraphs should be the same size, all titles should be the same size, etc.)

Page 17: Green Hectares Rural Tech Workshop – Website Design

Colours

Color choice is an important decision in every website design.

Page 18: Green Hectares Rural Tech Workshop – Website Design

Images

Images can enhance your site or fill it with clutter.

Page 19: Green Hectares Rural Tech Workshop – Website Design

Contact FormA contact form enables users to contact you from directly inside your website instead of having to fill out email fields.

Page 20: Green Hectares Rural Tech Workshop – Website Design

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

Page 21: Green Hectares Rural Tech Workshop – Website Design

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

Page 22: Green Hectares Rural Tech Workshop – Website Design

Popular CMS Sites

Drupal http://drupal.orgGoogle Sites https://sites.google.comJoomla! http://www.joomla.orgWeebly http://www.weebly.comWordpress http://wordpress.org