The Basic Anatomy of a Web Site

MolecularcodeWeb Design and Development

Alex Ruauxhttp://molecularcodewebdesign.comalex@molecularcodewebdesign.com

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

The Basic Anatomy of

a Web Site

Fundamental Features Of A Websitet

itle and tagline

header

menu

contents

idebar and widgets

footer

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)

Title and Tagline

Title and Tagline

Title and Tagline

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

Header

Header

Header

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

Menu

Menu

Menu

Menu

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

Content

Content

Content

Content

Content

Content

Content

Content

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

Sidebar and Widgets

Sidebar and Widgets

Sidebar and Widgets

Sidebar and Widgets

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

Footer

Footer

Footer

Footer

Posts vs Pages

WordPress

There are 2 main ways of publishing content in WordPress:

PagesPosts

Pages

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

Posts

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