Multimedia Authoring1 Understanding Web Templates Web Templates There are many collections of templates for web pages and web sites available for use free

Multimedia Authoring 1

Understanding Web TemplatesUnderstanding Web Templates

Web Templates

There are many collections of templates for web pages and web sites available for use free of charge under a Creative Commons licensing arrangement. You will learn more about Creative Commons in a later lecture on Legal and Ethical Issues.

One such collection of web templates can be found at:

http://www.opendesigns.org/view-designs/

Note that you can Search for a web template based on Style & Functionality, Color, and Structure.

http://www.opendesigns.org/view-designs/



Web Templates

These templates allow you to construct a multi-page web site that has a consistent look and feel across its web pages.

You are unlikely to be able to find something that exactly meets your needs so some adjustment to the template is necessary.

To make adjustments you will need some knowledge of HTML and CSS.

We will work on a specific template to you introduce you to the knowledge you will need.

Go to http://www.opendesigns.org/design/blue-earth/ and download the template.

http://www.opendesigns.org/design/blue-earth/



Web Template Contents

Notice that the contents of the Download are a zip file. Unzip the folder to an appropriate location.

Look at the contents of the unzipped folder.

Main logo

CSS

Home web page Background Images



Home Web Page

Notice that the web template only provides us with one web page (index.html).

To create a multi-page web site from the template we are going to have to copy index.html the required number of times.

Before copying we need to make sure that the structure of index.html is as we would like it to be.

Load index.html into Dreamweaver and display in Split View.



Home Web Page

Notice that the web template only provides us with one web page (index.html).

To create a multi-page web site from the template we are going to have to copy index.html the required number of times.

Before copying we need to make sure that the structure of index.html is as we would like it to be.

Load index.html into Dreamweaver and display in Split View (showing both the HTML code and the design).



Understanding the HTML of index.html

When you look at the Design View you will notice that web page index.html is broken up into sections – the main heading, the horizontal menu, the Menu Navigation and Useful Resources, and the Example Article sections.

Look at the HTML code to see how these section are described. You should be focusing on the <div> tags.

The horizontal menu section of the HTML code



Understanding the CSS of index.html

The styles used in index.html to format the text, the colors and the backgrounds, etc., are stored in the file style.css (known as a Cascading Style Sheet). This file is attached to index.html on line 6 of the HTML code in the href tag.

It is worth looking inside the style.css file to expand your knowledge of how web pages work. Double click on the file name in the Finder.

Attaching the style sheet



Understanding the CSS of index.html

The styles used within index.html can be viewed (and changed) within Dreamweaver.

To the right of the Dreamweaver window should be a CSS STYLES tab. Make sure this tab is selected.

As you click around inside the HTML code or Design View of index.html you should notice the details under the CSS STYLES tab change. A right mouse click will allow you to change the properties of a style but remember all parts of index.html that use the style will change.

At this point in time you need to make all the changes to index.html that should occur on all the web pages of you multi-page web site.



Creating the Multiple Pages of Your Web Site

Before you can convert the template you have downloaded into a multi-page web site you need to decide on:

•the pages that will comprise your web site

•the file name you will give to each web page

•the name of the menu option that will link to each web page.

You will get the idea from the HTML code that displays the horizontal menu.

Menu option

# is replaced by the web page name – for example links.html



Creating the Multiple Pages of Your Web Site

Once you have decided on the structure of your web site you can change the horizontal menu HTML code.

For example:

You would now use the Save As command to save index.html 4 times with the file names about.html, published.html, links.html and contact.html. And then you have your multipage web site.

Web page file names

Documents

Multimedia Authoring1 Understanding Web Templates Web Templates There are many collections of templates for web pages and web sites available for use free