the basic anatomy of a web site

38
Molecularcode Web Design and Development Alex R http://molecularcodewebdesign alex@molecularcodewebdesign Beginners WordPress.com Course | West Island Women’s Centre |Winter The Basic Anatomy of a Web Site

Upload: molecularcode-web-design

Post on 01-Sep-2014

160 views

Category:

Technology


3 download

DESCRIPTION

Week 2 of the West Island Women's Centre wordpress.com beginners course.

TRANSCRIPT

Page 1: The Basic Anatomy of a Web Site

MolecularcodeWeb Design and Development

Alex Ruauxhttp://[email protected]

Beginners WordPress.com Course | West Island Women’s Centre |Winter 2014

The Basic Anatomy of

a Web Site

Page 2: The Basic Anatomy of a Web Site

Fundamental Features Of A Websitet

itle and tagline

header

menu

contents

idebar and widgets

footer

Page 3: The Basic Anatomy of a Web Site

Title and Tagline

Could be just text

May include an image or logo

Usually in top left corner, sometimes centre

May have a tagline (additional explanatory text)

Page 4: The Basic Anatomy of a Web Site

Title and Tagline

Page 5: The Basic Anatomy of a Web Site

Title and Tagline

Page 6: The Basic Anatomy of a Web Site

Title and Tagline

Page 7: The Basic Anatomy of a Web Site

Header

The title and/or tagline may be integrated into the header

Usually an image or logo

May include text

Usually spans the whole width of the website

Page 8: The Basic Anatomy of a Web Site

Header

Page 9: The Basic Anatomy of a Web Site

Header

Page 10: The Basic Anatomy of a Web Site

Header

Page 11: The Basic Anatomy of a Web Site

Menu

This links to all pages on the site

Usually at the top of the page, may be to the side

May have dropdown options

May appear more than once on the page

Page 12: The Basic Anatomy of a Web Site

Menu

Page 13: The Basic Anatomy of a Web Site

Menu

Page 14: The Basic Anatomy of a Web Site

Menu

Page 15: The Basic Anatomy of a Web Site

Menu

Page 16: The Basic Anatomy of a Web Site

Content

On the homepage, this may be blog posts or static content

The homepage needs to explain what the site is about / for

Will likely include pictures

May include a call to action

Page 17: The Basic Anatomy of a Web Site

Content

Page 18: The Basic Anatomy of a Web Site

Content

Page 19: The Basic Anatomy of a Web Site

Content

Page 20: The Basic Anatomy of a Web Site

Content

Page 21: The Basic Anatomy of a Web Site

Content

Page 22: The Basic Anatomy of a Web Site

Content

Page 23: The Basic Anatomy of a Web Site

Content

Page 24: The Basic Anatomy of a Web Site

Content

Page 25: The Basic Anatomy of a Web Site

Sidebar and WidgetsThere may be a sidebar on either the left or the right-hand side

There may be more than one sidebar

The sidebar may or may not appear on the homepage

The content of the sidebar is determined by which widgets you use

Widgets include things like a calendar, image, blog titles, categories, social media icons, search box...

Page 26: The Basic Anatomy of a Web Site

Sidebar and Widgets

Page 27: The Basic Anatomy of a Web Site

Sidebar and Widgets

Page 28: The Basic Anatomy of a Web Site

Sidebar and Widgets

Page 29: The Basic Anatomy of a Web Site

Sidebar and Widgets

Page 30: The Basic Anatomy of a Web Site

Footer

The footer is the text at the bottom of every page

Should include copyright notice and menu / sitemap

Often includes designer/theme and platform names

May include social media links

May include feeds e.g. twitter

Page 31: The Basic Anatomy of a Web Site

Footer

Page 32: The Basic Anatomy of a Web Site

Footer

Page 33: The Basic Anatomy of a Web Site

Footer

Page 34: The Basic Anatomy of a Web Site

Footer

Page 35: The Basic Anatomy of a Web Site

Posts vs Pages

Page 36: The Basic Anatomy of a Web Site

WordPress

There are 2 main ways of publishing content in WordPress:

PagesPosts

Page 37: The Basic Anatomy of a Web Site

Pages

Pages are for static content that is not likely to change or be updated e.g. contact form.

Page 38: The Basic Anatomy of a Web Site

Posts

Posts are like magazine articles. They are used to publish new content on a semi-regular basis.