Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Multimedia Authoring1 Understanding Web Templates Web Templates There are many collections of templates for web pages and web sites available for use free."— Presentation transcript:

1 Multimedia Authoring1 Understanding 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: Note that you can Search for a web template based on Style & Functionality, Color, and Structure.

2 Multimedia Authoring2 Understanding Web Templates 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 and download the template.http://www.opendesigns.org/design/blue-earth/

3 Multimedia Authoring3 Understanding Web Templates 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 pageBackground Images

4 Multimedia Authoring4 Understanding Web Templates 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.

5 Multimedia Authoring5 Understanding Web Templates 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).

6 Multimedia Authoring6 Understanding Web Templates 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 tags. The horizontal menu section of the HTML code

7 Multimedia Authoring7 Understanding Web Templates 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

8 Multimedia Authoring8 Understanding Web Templates 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.

9 Multimedia Authoring9 Understanding Web Templates 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

10 Multimedia Authoring10 Understanding Web Templates 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


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

Similar presentations


Ads by Google