making a website with html5 files

theory topics

 

Step by step instructions on how to make a website.

 

cuf30107 Certificate III in Media

 

In this guide you will learn how to make your very own original website completely from scratch. Follow the steps to learn all the content for VET IDM practical work on Authoring Interactive Sequences unit.

 

Index

 

Quick overview menu

  1. Design stage
  2. Gather content
  3. Prepare to make website
  4. Make and style your first page with CSS
  5. Expand your site
  6. Add and style text content with CSS
  7. Making it work with navigation
  8. Inserting/ embedding images and media
  9. Working with tables
  10. Upload and check website
  11. Extension work

Full menu

  1. Design stage
  2. Gather content
  3. Prepare to make website
  4. Make and style your first page with CSS
  5. Expand your site
    • Create remaining/ additional pages for your site
  6. Add and style text content with CSS
    • Insert and clean up text content
    • Create text styles
      • Create text rules in external CSS
      • Style text with a span tag
      • Create a class to style repeating elements
  7. Making it work with navigation
  8. Inserting/ embedding images and media
    • Inserting images
    • Positioning and styling images
    • Adding media (animation, video, audio) to your page
      • Acess video files by providing a link
      • Embedding media on your page

        • Embed quicktime (.mov) Video Using the <embed> tag [with dw]
        • Embed video with <video> tag
        • Embed Flash animations (swf files) with the <embed> tag
        • Embed Flash animations (swf files) with <object> tag and DW insert menu

      • Embed (Mp3) audio with <audio> tag
      • Video and audio controller
  9. Working with tables
  10. Upload and check website
  11. Extension work

Back to top

 

1. Design Stage

  1. Design stage

Research related webpages

 

Every new design needs new inspiration. The quality of research will underpin innovative new designs. Don't forget you should not always research products that are similar to the one you want to design. Take ideas from other sources to use in your original designs.

Back to top

 

Design your website on paper

 

Your client will want to see your ideas before you spend time and money on programming a website. Manual design is the most efficient way to plan both the framework and the distinctive style of an original site. A rough guide to sizes is shown below. Use a ruler when you set up your grey lead drafts.

Back to top

 

Design a dummy page on photoshop

 

The next step is to create both a realistic visual of how each page will look and to create image assets to be used on the actual site. We use Adobe Photoshop to do this. (Adobe Illustrator can also be used if you prefer to design vector). Creating banners in Photoshop allows us to use text in more creative ways than HTML text editing will permit. In web work, the amount of fonts is limited. In Photoshop, it is not.

 

Open Photoshop

Back to top

 

Header and/or other banners.

Back to top

 

Rollover buttons.

 

If your site is going to use roll over or image based buttons you will need to create them in Photoshop.

 

A tip here is:

 

Don't create your buttons next to each other (as they appear in your layout and will appear in the final page). Create them over each other (in groups in Photoshop). This method will enable you to define the slice area only once and slice them so they all have identical dimensions and fit together perfectly.

Back to top

 

Slice your images

 

Photoshop (and Illustrator) both have a special function that allows you to 'cut' images out of a main image without altering the main image. This function is called 'Slice'. Once you set your slice area with the Slice tool you then use File/Save for Web and ther Devices to save individual images. In this feature you will be able to choose between;

Follow this process:

Back to top

 

2. Gather content

  1. Gather content

Write content for your website

Back to top

 

Gather Assets

 

Gather pictures

Back to top

 

Gather other media assets

Back to top

 

Process assets

 

Process photos

 

Process your images in Photshop. Pay correct attention to using in the correct;

Back to top

 

Process media assets

 

Edit, compress and save audio or video files in the correct;

for web.

 

Back to top

 

3. Prepare to make website

  1. Prepare to make website

Prepare your website folders

 

A most important step, many students forget to do, is to set up folders that will carry your web files in a consistent way in the best location, on your computer. Take the time to think about where you will locate your web folder.

 

Create a root folder

Back to top

 

Create subfolders

 

Create these empty folders within the root folder;

Locate the root folder for use in the next step.


Back to top

 

Workflow to create website


After the Design Stage, this Step by Step guide for making a website in Dreamweaver follows this order. There are many ways to make a websites but this way is;

Define your site

 

Open Dreamweaver

 

Use Site>New Site> to define the location of your root folder for Dreamweaver.

Do not use Dreamweaver, or go any further without defining your site.

 

Back to top

 

4. Make and style your first page

  1. Make and style your first page with CSS

There are many ways to create a group of pages (files) for your website. However the problem comes when you think about how you will transfer all of the layout and/or text and styles, content that is common to each page, from one page to another.

 

So, to make a new 4 page website you could begin by creating 4 new HTML5 files then save them as 'index', 'about', 'contact', 'etc'. The next step would be to add layout, navigation and text items for the 'index' page. Then your would style them. The problem then would be, how will I transfer all the layout and navigation content to the other pages. Simple you can just copy the code. But I think I have a simpler and more accurate way.

 

Begin by making just the one 'index' page. Ignore the others at this stage. Add your layout and navigation content. Leave the text out yet. Now style the layout, and move your styles into an external CSS file. Then, 'save as' the 'index' file several times to create your other pages. Lastly insert your text and media content. Style them in the external CSS. This is the approach I will take in this 'how to' guide.

 

Making the Home (index) page

 

The 'Home' page of a website is a page that a web browser program can find without a user having to write a full address to locate it. All web browsers are set to default to find a file name within a web folder. This default file name is called 'index.html'. A home page is called 'index.html.

 

Back to top

 

Creating layout items with <div> Tags

 

The next step is to create the 'architecture' of you page. In this step you will create the areas or rectangles to hold content. This will make a page that looks like your page designs done in the design stages. First, depending on the kind of layout you designed, choose one of the options shown below.

 

Layout options

 

Below are shown 4 basic approaches to layout. They are not all used at once. Try to master them all. I have ordered them from easy to more difficult.

 
1. One column layout

 

The <div> layout will include;

2. Multi (2-4) column layout


The <div> layout will include;

Floats and clears

 

To make multi column layouts work you will have to understand how to make <div>s to float left or right, and to have the next <div> clear those instructions.

 

Liquid layout

 

Here you will learn how to make a flexible size layout that enlarges or reduces to fit different screens. A liquid layout is one that is not of a fixed width.

 

Click here to visit my liquid layout sub site.

 

There are two main things you will learn if you build a liquid layout:

 

  1. That coloums width can be styled not only with pixel dimensions but also by a percentage. This means a percentage of the <div> that holds them.
  2. That we don't have to create layout only with <div>s but we can use HTML5 semantic tags.

Making the liquid layout.

 

Screen shot, Liquid layout page. Note the names to the layout items.

 

The layout in the example given above uses the following layout elements:

 

<div id ="container">

<header> </header>

<nav> </nav>

<div id ="col1"> </div>

<div id ="col2"> </div>

<aside> </aside>

<div id="clearboth"> </div>

<footer> </footer>

<div>

 

Have you noticed something special? Even though there are 8 layout elements, only 4 of them are <div>s.The remaining 4 layout items are HTM5 semantic tags. The liquid layout page also uses 2 more HTML5 tags. These are for the control of the image shown on the right in the <aside> tag. They are the <figure> and <figcaption> tags.

 

Click here to see the section on styling liquid layout elements (below).

 
Layout using HTML5 semantic tags

 

Here you will create layout items with HTML5 layout tags instead of <divs>. They can be styled in the same way with CSS but are not identifed with 'id's but rather <tag> names.

 

To find out more about HTML5 semantic tags click here.

 

Back to top

 

Building your layout

 

Insert <div> Tags. Learn these three methods:

  1. Hand code your <div>s
    • Write <div id="name"> </div> in the <body> of your page.
  2. Use the ‘Common’ bar in DW to insert <div> tag
    • Press the <div> tag button to bring up options: insert; at insertion point, wrap around, before tag, after tag
      name div.
  3. Use the ‘Insert/Layout Object’ bar in DW to insert <div> tag
    • Press the 'Insert/Layout Object' to bring up options: insert; at insertion point, wrap around, before tag, after tag
      name div.

The code for an empty <div> looks like this:

 

<div id= "name">

</div>

 

Create all the <div> tags you require for the layout option you have selected above.


These will be empty, un-styled <div> tags and will have no set width, height, background colour or other attributes.

 

Back to top

 

Style <div>s with CSS (cascading style sheets)


Why does text display as it does in browser programs like Safari, Firefox and Internet Explorer? How does it know how to display stuff? Think about this for a moment, If we did not set styles for our work it would not display on browsers without styles. All the text on a page will have a font, a size and a colour. Why will it? The answer is that each web browser program has default styles for the way it displays text. Text will disply how Safari or IE wants it to. But each website looks different. How do web designers change the way a browser displays text and other content? Simple, they write special styles for their own site. The styles are grouped into style sheets (files that contain groups of styles). These are called 'Cascading Style Sheets' and are known as 'CSS'.

 

'Cascading Style Sheets' is the name given to a way of styling layout and text content so as to create orders of importance in your styles. The more general (applying to a large part of the website) a style, the least important it will be. The more specific (applying to a small part of the website) a style, the most important it will be. Think of this example;

 

I firstly style a whole paragraph font to be 12 px high and black. Then I want to draw attention to one word in that paragraph. I style that word 14 px high and red. The word then 'sticks out' of the paragraph. The new, and more specific style overrides the initial, more general style. Styles cascade in orders of importance.

 

There are 3 ways or positions CSS can be located within a webpage.

  1. Inline CSS = a <style> is written at the start and end of a small section of content. It styles only that part of content. It is inline with the rest of the page code. Inline CSS <style>s are written in the <body> of the webpage.
  2. Internal CSS = a <style> is written in the <head> of the webpage. It can be style any tag or element with the same name, anywhere on the page. However, it can only style elements on that one page.
  3. External CSS = <styles> can be written in a file away from the webpage being styled. This method has immense benifits in that <style>s can be applied to the same elements in multiple pages and that to change the way an element looks on every page of your site, one only has to edit the <style> once, in the one location. Powerful.

We will begin with Internal CSS on our one 'index' page, then move the <styles> to create an External CSS file before we make our other pages.

 

Back to top

 

Kinds of 'selectors' for css styles

 

Elements

 

Styles are semantic. This means that the styles we create always apply to certain things. It is written within the style, the thing or part of the file that will be styled. In this case, The thing or part of the file to be styled is called an 'element'. CSS styles, style HTML elements.

 

selectors

 

The part of the style that shows which kind of element will be styled is called the 'selector'. That is; the selector, selects the kind of element to be styled. There are 4 kinds of selectors. These are:

Examples of selectors in use in the CSS for this website are:

 

Class (always begins with a dot)

 

Classes can be used as many times as you want on one or more pages.

 

.outcome_name3 {
display:block;
margin-top: 160px;
}

 

ID (always begins with a #)

 

An id can only be used once on one page.

 

#container {
width: 1010px;
min-height: 750px;
padding-right: 0px;
padding-left: 0px;
padding-top: 10px;
margin-left:auto;
margin-right:auto;
}

 

Tag or element

 

A tag style can be used as many times as you want on one or more pages.

 

h1 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 32pt;
letter-spacing: -1px;
line-height: 32pt;
text-transform: uppercase;
color: #FFF;
}

 

Compound selector (this one has an id, a tag, a class, and two tags all in a row).

 

This is a rule that adds specifity to one particular instance of an elelmet. In this case this style is for the text for the figcaption in the figure in the article in the container. This style will not style text outside this position.

 

#container article figure figcaption {
display: block;
clear: both;
font-family:"Courier New", Courier, monospace;
font-size: 11pt;
color: #FFF;
border-top: 1px dotted #FFF;
padding: 10px;
}

 

Back to top

 

Create CSS reset

 

As all HTML elements display with default 'margin' settings from browser programs we need to stop the defaults from controlling our layout. This is done by creating a 'CSS reset' to re-set the margins of every text element to zero.

 

Try;

 

p, h1, h2, h3, h4, h5, h6 {margin: 0px}

 

Back to top

 

Understanding the CSS box model

 

When you begin to style your <div>s or HTML5 layout <tag>s you may notice the total dimensions seem to play tricks on you. In maintain accurate dimensions when you set margins, padding and width you will need to understand the 'CSS Box Model'.

 

The CSS box model

 

Add margin, padding and width together for your total width in the 'CSS Box Model'.

 

 

There are three kinds of ways to control the sizes of <div>s and layout items.

  1. Margin
  2. Padding
  3. Width

A margin is a force field around the layout item. If you set a margin on a <div> or <img> for example, that item moves away (down and to the right) from its natural position of alignment.

 

Padding is like foam inside a box to protect the contents. If you set padding on a <div> for example, the contents of the <div> will move away from the edge of the <div>.

 

Width is the size of the layout item from left to right. When you set the width of a layout element like a <div> or HTML5 layout element like a <header> for example, the width will become the total sum of the margin + padding + width. You have to be careful with this because if you want your layout item to have a total width of 200 px but you set 20 px margins and 10 px padding then you need to re set the width to 140px! Add up margins (20 for left and right = 40) + padding (10 for left and right = 20) + width 140, you get 200.

 

Margins and padding can be controlled 'same for all' or separately for top, right, bottom and left. Code for margins and padding can look like:

 

Click here for a full explanation of margins.

 

creating CSS style rules for layout items

 

There are 3 ways to create internal CSS <style>s for your page. Practice all three.

  1. Write empty CSS rules for tags
    • Write empty <style>s by handing coding styles with empty { }.
    • Complete by adding 'properties' and 'values' to your styles. Press here to see 'W3Schools' examples.
  2. Create empty CSS rules for tags.
    • Write empty <style>s by handing coding styles with empty { }.
    • Complete styles editing through DW CSS panel.
  3. Use 'Add CSS rule function' in CSS panel
    • Press the '+' icon in the DW CSS panel
    • Complete styles editing through DW CSS panel.

Back to top

 

Apply style to <div>s

 

Use the following order to style your <div>s:

Style your <divs> using dummy background filler colours to make each area visible. Work on the dimensions of the <div>s in your layout until you are happy with the size and shape of each area.

 

An example of a CSS style to style a <div id="header"> div looks like this:

 

<style>

#header {

width: 800 px;

height: 100 px;

background-colour: yellow;

}

</style>

 

When you have the spaces working properley, edit your <style>s to call up background images and/or navigation rollover buttons.

 

Your index page should be complete - except for the text content. We are ready to move the styles into an external CSS file.

 

Back to top

 

styling liquid layout

 

In order to create the liquid layout shown above we won't be setting fixed heights and widths for the <div>s as we learnt above. We will be using two new tecniques:

 

  1. min-width, max-width
  2. width in percentages

 

Go back to the liquid layout page then click on the link to see the CSS. Look for the styles that control #container. It looks like this:

 

#container {
min-width: 600px;
max-width: 1000px;
height: auto;
margin:0px auto 0px auto;
/*auto left and right centres the div*/
background-color: #EEE;
}

 

Now grab the right hand bottom corner of your window. Push it in and out. See how the overall size changes.

 

But how would this work if the layout elements were styled with fixed widths? Right, it wouldn't. The coloums (nav, col1, col2, aside) are all styled with flexible widths. The CSS styles for thes look like this:

 

nav {
display:block;
width:20%;
height:500px;
background-color: #DDD;
float:left;
margin:10px 1% 20px 2%;
}

 

This is the style code for the left colum. Look its width is 20%. This means it will be 20% of the total width of the container at its maximum or minimum width.

 

Then look at the margins code. Why is there a mixture of pixel sizes and percentages? Easy, that's because the pixel refer to vertical margins and percentages refer to horizontal margins in keeping with the overall width controlled by percentage.

 

Try it.

 

Back to top

 

Create an external CSS file


Use one of these two methods;

 

A CSS file is a 'text only' file. It can be created in 'note pad' or any other text editor. The file consists of instructions for styling webpages. A CSS file does not have styles of it's own - like fonts, sizes or colours. It is only text data. There are several ways to create an external CSS. Try these:

 

(Not recommended)

 

Make a new file. Not an HTML file but a CSS file.

(Recommended)

 

Select <styles> in DW CSS panel:

Back to top

 

5. Expand your site

  1. Expand your site
    • Create remaining/ additional pages for your site

Create remaining/additional pages for your site

 

Now that you have your 'index.html' page completed it's time to use it to create the other pages in your site.


‘Save as’ your ‘index’.html page as 'about', 'contact', etc,

Now you have each page for your website, complete with a consistent layout .

 

Back to top

 

6. Add and style text content

  1. Add and style text content with CSS
    • Insert and clean up text content
    • Create text styles
      • Create text rules in external CSS
      • Style text with a span tag
      • Create a class to style repeating elements

Insert and clean up text content

 

Each page of your website may be designed to the same layout but include different text or image content. You will have written text content in the design stage. Go back to the Word file to insert the text content for each page.

 

Insert text content:

Back to top

 

Create text syles

 

As you read above in the section on CSS, we can set styles for our text for our own websites. In this section you will set your own styles for the normal text, called 'paragraph' <p> and the headings and sub headings, called <h1> - <h6>.

 

We will also learn how to style small areas of text and how to create unique styles that can be used over and over, called a 'class'.

 

Create text rules in your external CSS

 

Follow the same procedure you used above to create CSS rules for your text: Create a separate rule for p, h1, h2, h3, h4, h5, h6.

  1. Write empty CSS rules for tags
    • Write empty <style>s by handing coding styles with empty { }.
    • Complete by adding 'properties' and 'values' to your styles. Press here to see 'W3Schools' examples.
  2. Create empty CSS rules for tags.
    • Write empty <style>s by handing coding styles with empty { }.
    • Complete styles editing through DW CSS panel.
Apply style changes to text

Back to top

 

Style text with a span tag (inline CSS)

Try something like this in your 'code view':

 

<p>My car has <span style="color:red">red</span>wheels.</p>

 

This code is in my web code and it created this:

 

My car has red wheels.

 

Back to top

 

Create a .class to style repeating elements

 

See 'Selectors' above for an example of a 'class'.

This effect is created by a class, I use to indicate students working in their 'Word' file. The code for the class appears as:

 

.boldWord {
background-color: #ADF;
display: inline;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #CCC;
border-bottom-color: #CCC;
font-weight: bold;
}

 

Back to top

 

7. Making it work with Navigation

  1. Making it work with navigation

Hyperlinks

 

Moving between pages, to locations within a page or to different websites is done by creating 'Hyperlinks'. A Hyperlink is like writing in an 'address' into the website. This address points to a new location.

 

Back to top

 

<a> tag.

 

The <a> tag creates a hyperlink. The code for the link must include 'href=".......". This href attribute indicates the link's destination. Here is a link to the W#Schools page on <a> tags. Try it.

 

Visit W3Schools.com!" class="code"><a href="http://www.w3schools.com">Visit W3Schools.com!</a>

 

You can link text, images or <div>s with the <a> tag. Simply wrap the opening and closing tags around your text, image or <div>. (Or use the Link field in the Properties panel in DW). See if you can identify the opening and closing tags in the example above?

 

Back to top

 

empty links

 

Sometimes when we know we want to use a link to something but we don't know where it will be headed, we use an empty link. The code for an empty link is shown below. Make one.

 

<a href="#"></a>

 

Back to top

 

absolute paths

 

If you need to create a link to a page outside your website, use an absolute path.

 

relative paths
 

If you need to create a link to something in your website, use a relative path.

 

Back to top

 

Lists

 

Really lists should be in a section on their own. A list is a set of points like 'dot points'. There are 2 main types of lists. Unordered and ordered lists. The reason why lists is included here in navigation, is because the correct way to make text based navigation links is to use a list.

 

Unordered list

 

Make a set of products. Each one on a new line. Select the text and press the 'Bullets' button in the Properties panel in DW. It looks like this:

 

  • Beer
  • Wine
  • Whiskey

The code looks like:

 

<ul>
<li>Beer</li>
<li>Wine</li>
<li>Whiskey</li>
</ul>

 

Examine the code. You will see two kinds of tags. <ul> and <li>. Can you guess what they refer to? We will come back to it later.

 

Back to top

 

ordered list

 

Make a set of products. Each one on a new line. Select the text and press the 'Numbers' button in the Properties panel in DW. It looks like this:

 

  1. Beer
  2. Wine
  3. Whiskey

The code looks like:

 

<ol>
<li>Beer</li>
<li>Wine</li>
<li>Whiskey</li>
</ol>

 

Examine the code. You will see two kinds of tags. <ol> and <li>. Do you know what they refer to? What's the difference between the code in the two lists? What is the same in both?

 

Back to top

 

Styling lists

 

That's all there is to it. Now we need to think about styling our lists. To really see what the <ul>, <ol> and <li> tags do give them some background colour. Try something like these in the <head> tag of your page. Change the #numbers to change the colours.

 

<style>

ul {
background-color: #333;

}

 

ol {
background-color: #AAA;

}

 

li {
background-color: #0AA;

}

 

</style>

 

Now we need to see how to move them in and out. Add a 'margin' and/or 'padding' property to your styles. Try them. Fiddle with the number settings to see them change:

 

<style>

ul {
background-color: #333;

margin-left: 10px;

padding-top: 10 px;

}

 

</style>

 

Back to top

 

Controlling bullets

 

As you are familiar, browser programs have defaults for how they display things. Bullets are no exception. What is we really are going to turn our list into navigation links? We don't want bullets on this list. How can we do it?

 

There is a property called 'list-style'. If we assign 'none' as the value we will remove the bullets. Try styling the <li> tag like;

 

<style>

li {

list-style: none;

}

 

</style>

 

Back to top

 

Vertical and horizontal lists

 

Finally we need to know how to control how the list displays. Lists of ingredients or stock lists are fine in a column (vertical) but you probably want navigation lists to display across the page (horizontal). The key is in the property 'display'. There are several values for this property. Two you need to know are 'block' and 'inline'.

 

Block

 

The default value for a list display is 'block'. Block display means that each line of text will fill up the whole line in the webpage. That means that the next piece of text will appear underneath it. To ensure list items appear underneath each other use:

 

<style>

li {

list-style: none;

display: block;

}

 

</style>

 

Inline

 

Another value for a list display is 'inline'. Inline display means that each line of text will appear after the first in a line. (The words on this page display inline). To ensure list items appear next to each other use:

 

<style>

li {

list-style: none;

display: inline;

}

 

</style>

 

And now you have your very own horizontal navigation bar! Let's turn the list items into 'hyperlinks'.

 

Back to top

 

Links

 

Pseudo-classes

 

A pseudo-class is used to add effects to some CSS selectors. The most common use of a pseudo class is to redefine the appearance of the <a> tag in text hyperlinks.

 

Web browser programs have default appearances for <a> tags. Did you notice in Google, site addresses you have not visitited appear in blue. Sites you have visited are in purple. This is a browser default for two link states. We sometimes want to set our own. Links have several states. These are:

 

To style <a> tag links use the followiing pseudo-class selectors:

 

Unvisited link

 

a:link {
color: #FF0000;
}

 

Visited link


a:visited {
color: #00FF00;
}

 

Mouse over link


a:hover {
color: #FF00FF;
}

 

Selected link


a:active {
color: #0000FF;
}

 

Special notes in regarding the order of pseudo-classes to style <a> tag:

(Sourced from: http://www.w3schools.com/css/tryit.asp?filename=trycss_link 15 June 2014).

 

Back to top

 

Rollover buttons


If you chose to create your navigation by users clicking 'rollover buttons' you will have needed to have made and sliced them in Photoshop in the design stage of your website. Once the rollover buttons are made, they will be moved to your site images folder for insertion into the navigation section of your page.

 

To insert rollover buttons follow this order:

Back to top

 

Anchor links

 

An anchor link marks a place on a webpage. This page use lots of anchor links. You can find this mini section because it is marked by an anchor. All the 'Back to the top' hyperlinks link back to one anchor at the top of the page.

 

To create an Anchor link:

The HTML code for an anchor called 'find' will look like:

 

<p><a name="find"></a>The HTML code for an anchor called 'find' will look like:</p>

 

To link back to an anchor:

 

On the same page:

The text to find an anchor on the same page will look like:

 

Click here to see the anchor.

 

The code to find an anchor on the same page will look like:

 

<p>Click <a href="#find">here</a> to see the anchor.</p>

 

From a different page:

The text to find an anchor from a different page will look like:

 

(On a different page)

 

Click here to see the anchor on Page.HTML.

 

The code to find an anchor on the same page will look like:

 

<p>Click <a href="page.html#find">here</a> to see the anchor on Page.HTML.</p>

 

Back to top

 

'mailto' email link

 

To create a link that when pressed create some text that you want the user to press to send an email. This is the link that will activate the mail to function of HTML. When the user presses this text the 'mailto' function will activate an email client on the user's computer. An email will appear and be ready to complete and send. There are ways to add a subject line shown on this site. Press hear to visit W3Schools mailto page.

 

The text for a mailto link will look like:

 

Click here to mail the author.

 

The code for the text above is:

 

<p>Click <a href="mailto:teacher@loyola.vic.edu.au">here</a> to mail the author.</p>

 

Back to top

 

external link

 

An external link is a hyperlink that will bring a reader to a page on another website. When creating an external link make sure you use an absolute path because the site is not relative to the page you are on.

 

We can also decide if the page will go to the site in the same window or open a new tab in our browser. I like to open a new tab. This is called 'target-blank'.

 

The text for an absolute link that will open in a new tab will look like:

 

Click here to visit the Loyola website.

 

The code for the text above is:

 

<p>Click <a href="http://www.loyola.vic.edu.au" target="_blank">here</a> to visit the Loyola website.</p>

 

Back to top

 

Blockquote Tags

 

The <blockquote> tag is used to create an indent in text. It can be done by coding it or pressing the 'indent' button in the DW Properties Panel. Blockquote text will appear as:

 

The <blockquote> tag is used to create an indent in text. When you use it you will have to style p and other text elements separately. If your text is not styled it will appear as the text in this indented paragraph.

 

This is coded as:

<blockquote>This line will be indented.</blockquote>

HTML5 Blockquote is used to include a cite reference. For example;

<blockquote cite="http://www.w3schools.com/tags/tag_blockquote.asp">

The <blockquote> tag specifies a section that is quoted from another source.

</blockquote>

Back to top

 

8. inserting/ embedding images and media

  1. Inserting/ embedding images and media
    • Inserting images
    • Positioning and styling images
    • Adding media (animation, video, audio) to your page
      • Acess video files by providing a link
      • Embedding media on your page

        • Embed quicktime (.mov) Video Using the <embed> tag [with dw]
        • Embed video with <video> tag
        • Embed Flash animations (swf files) with the <embed> tag
        • Embed Flash animations (swf files) with <object> tag and DW insert menu

      • Embed (Mp3) audio with <audio> tag
      • Video and audio controller

inserting images

 

Images on your system

 

Always use one of three image formats for web. See Processing Photos above for details.Images are inserted into the code of your page.

 

Direct coding

 

Images are defined with the <img> tag. This tag is 'empty' meaning there is no end tag. To display an image on the page you need to use the attribute 'src'. This means 'source'. The value for the source is the URL of the image. You can code it directly using the 'img scr=" "' tag like:

 

<img src="images/portfolio/indie.jpg" width="280" height="280">

 

 

The code above shows the relative path of the folder that this image is located in. Sometimes it is easy to just change the file name of an image to insert another one in existing code.

 

This image is just sitting in the page. Professional web designers put images inside other objects specially designed for images. We will come to this later.

 

Using DW to insert image

 

The other way to insert an image is in DW menus. Press Insert/ Image. Then choose your image. It will then insert correctly.

 

When you insert an image in your page, take care not to insert it into the <p> tag. If you do it will behave as you have defined <p> on your page.

 

Alt attribute

 

All websites must conform to world accessibility standards. When you insert an image the DW instructs you to insert an 'Alt text' for the image. There are two reasons for this;

 

  1. That when an image takes too long to download the name of the image will be displayed,
  2. That if a blind person is using the webpage via text reading software, the name of the image will be read.

The code looks like;

 

alt="indie_portrait"

 

Specifying the size of an image

 

It is best to specify the size of an image when inserting it. This is so the browser will reserve a place for it on loading. When you use DW to insert the image it will code the width and height in the tag.

 

Although you can change the size of an image with the width and height attributes you should stick to these two rules when using images in your website (or print file):

  1. Create your image at the size (and resolution) you want it to display it at. Don't just make it big in case. You will be wasting server space and download time as the image loads.
  2. Don't enlarge an already processed image using the width and height attributes more than 10%. it will become blurry and lack clarity. Go back and re-process it for a different size.
Controlling proportions

 

When you do resize an image to have it fit a certain page layout we can do it by changing the width and height attributes. However, we run the risk of distorting it if we don't keep the proportions the same. The best way to do this i:

  1. Delete the height attribute
  2. Change only the width. With the hight gone, it will retain the same proportions.

Back to top

 

Inserting an image from another website

 

As you know, when we insert an image it is not really placed into our website but its source location (in our computer) is referenced in the source attribute of the <img> tag. You can imagine then, that we could insert an image in our website by placing the URL of an image from another site in our <img> tag.

 

Take a look at this code:

 

<img src= "http://ptv.vic.gov.au/assets/Images/Promo-tiles/Homepage-block-ads/Flinders-Street-Station.jpg">

 

This makes this image appear! It is not on my website, but with the help of Safari's Developer I was able to locate its URL, paste that into my code an it appears on my site!

 

 

Positioning and styling images

 

Positioning images

 

in HTML

 

Back to top

 

Stying the <img> tag

 

To position your image on the page or around text create a style for it. If you style <img> this will affect all images on your page. Write code like this within the styles of your page to experiment. Change the values and float from right to left and see what happens.

 

<style>

img {background-color: #F00;
margin:10px;
padding:20px;
border: 2px #000;
float:right;

</style>

 

Back to top

 

Styling images with a class

 

If you want to style different images in different ways. Create a class (.name) in your CSS. You can create different ones with different attributes and values for different images. An example of an image class is:

 

.leftbigpic {background-color: #333;
margin:10px;
padding:20px;
border: 2px #000;
float:left;

 

Try it in your test page. Apply the class in the Properties Panel of DW.

 
Making a compound image and caption component

 

There are two main ways to make a compound image and caption component for your page.

 

  1. Use nested <div>s.
  2. Use the <figure>, <figcaption> tags.
1. Using nested <div>s

 

Often in news sites you will see an image that sits neatly inside a background and has a caption. It might look something like this:

 

 

This technique for presenting an image uses two <div> tags. One <div> is the whole background that holds the image and another <div> that holds the caption. This is called a nested <div>. Click here to see a great explanation of nested <div>s and floats.

 

The correct way to style these <div>s is not to give them ids (because only one id can be used on each page) but to style them with classes. These can be repeated as many times as needed, for each image on the page.

 

The code for this image looks like:

 

<div class="imageholder">
<img src="liquidlayout/images/flight.jpg" width="200" height="200">


<div class="imgcaption">This is the caption for the image.</div>
</div>

 

Next we have to specify CSS styles for each of the two classes used. These are:

 

.imageholder {
display: block;
background-color: #CCC;
text-align: centre;
margin: 20px;
padding: 20px;
height: 250px;
width: 250px;
border: thin solid #F00;
}


.imgcaption {
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
color: #333;
background-color: #EEE;
text-align: left;
display: block;
width: 100%;
margin-top: 10px;
padding: 5px;
border-top:dotted #FF0000 2px;
}

 

Take a look at the screen shot of the page in development below.

 

 

Back to top

 

Using <figure> and <figcaption> elements

 

HTML5 now has a semantic element for locating images, diagrams, photos, etc. This element is called <figure>. The benifit of the <figure> element is that it can be styled just like a <div>. This website uses images within the <figure> element because they are used with the <figcaption> element and styled with CSS.

 

Here is another way of doing almost the same thing as in the previous example:

 

 

This looks similar to the previous example, except that it is not set up with <div> tags. The field the image and caption is sitting in is a <figure> tag. Inside the figure tag is another tag. This is the <figcaption> tag. This holds the caption.

 

The code for this looks like:

 

<figure><img src="liquidlayout/images/flight.jpg" width="200" height="200">
<figcaption>This is a caption in the &lt;figcaption&gt; tag. </figcaption>
</figure>

 

Next we have to specify CSS styles for each of the two tags used. These are:

 

figure {
display:block;
float: left;
width: 250px;
background-color: #DDD;
padding: 20px;
margin-left: 20px;
margin-top: 20px;
border: 2px solid #F00;
}
figcaption {
display: block;
font-family:"Lucida Console", Monaco, monospace;
font-size: 12px;
color: #333;
background-color: #EEE;
padding-top: 5px;
margin-top: 10px;
text-align: left;
border-top:dotted #FF0000 2px;
}

 

Note that tag styles do not have a '#' or '.' before them.

 

Take a look at the screen shot of the page in development below.

 

 

Conclusion

 

You have seen that we can make complex displays for images by carefully styling the;

Back to top

 

Adding media (animation, video, audio) to your page

 

 

Acess video files by providing a link

 

The easiset way to have a video on your page is to create a link directly to a movie. This way you don't have to get the video, which may breach copyright restrictions or waste your own server space storing it. A link to media can look like;

 

Click here to see this mock trailer for the film 'Gattaca'.

 

The code for this looks like:

 

<p>Click <a href="media/html5/catch_me.mp4" target="_blank">here</a> to see this mock trailer for the film 'Gattaca'.</p>

 

The 'target="_blank" ensures that the file opens in a new tab of your browser. it autoplays, but you can stop it by using the media player's controller.

 

Back to top

 

Embedding media on your page

 

Although your readers will be able to see the video you linked perfectly, it is not quite as professional to simply link. You want to embed the content as an integral part or your visual layout.

 

There are many ways to incorporate media into a webpage. While HTML5 has simplified things, browser developers have not yet agreed on standards covering kinds of media files or methods to embed them (like they do for image formats) for video files. At present media can be inserted several tags including;

These tags call up plug ins (small applications like Flash Player) that play media. You can see this explained at this site.

 

Back to top

 

Embed quicktime (.mov) Video Using the <embed> tag [with wd menw]

 

At present embedding .MOV files in HTML5 pages seems to cause cross browser compatibility issues. However, follow these instructions for inserting Quicktime video using Dreamweaver menu items. An explanation of Quicktime and video tags shown above is found here. I hope these issues are resolved soon.

 

Currently playing in Firefox.

 

 

To embed video in DW menu:
  1. Press Insert/ Media/ Plugin
  2. The video will come in at the default size. This is 32px x 32px. Set the size at the actual size of your video. You have to remember or look at the meta data to access the size.
  3. The video will start automatically. See Paramaters below for controlling your video.

The code for the video above looks like;

 

<embed src="media/html5/catch_me.mov" width="500" height="320"</embed>

 

Back to top

 

Embed Video with <video> tag

 

 

To get around Apple's Quicktime Plugin problems we can insert videos by coding using the <video> tag. The <video> tag is designed specially for video so allows more video formats to be played. The trick here is, because different browsers are playing some video formats but not others, we actually provide 3 different formats in the same <video> tag! Let the browser choose! You have to convert your video three times, load 3 videos to your media folder, then code for all three.

 

 

 

 
To embed video in your page:
  1. Ensure you export your movie as an .mp4, .webm and .ogg files.
  2. Code the video with the code shown below. Remember to set your own file name and path. Set the Width and Height according to your video.
  3. The video may start automatically. See Paramaters below for controlling your video.

The code for the video above looks like;

 

<video width="640" height="360" controls>
<source src="media/html5/catch_me.mp4" type="video/mp4">
<source src="atch_me.webmsd.webm" type="video/webm">
<source src="catch_me.oggtheora.ogv" type="video/ogg">
Your browser does not support the video tag. Either <a href="video.mp4">download it</a>, or update your web browser to the latest version.
</video>

 

Back to top

 

Embed Flash animations (swf files) with <embed> tag

 

The simplest way to insert a .swf file into your website is to use the <embed> tag. This is a good method but can cause problems if your browser doesn't find the Flash player required to run the file.

 

 

To embed the Flash file in your page:
  1. Ensure you publish your animation as an .swf file.
  2. Code the code shown below. Remember to set your own file name and path. Set the Width and Height according to your animation.

The code for the animation above looks like;

 

<embed src="media/html5/outbacknoaudio.swf" type="application/x-shockwave-flash"
width="900" height="200">

 

Back to top

 

Embed Flash animations (swf files) with <object> tag and DW insert menu

 

To embed a Flash animation (.swf file) using DW menu:

Unlike siimply embedding video as shown above (where you can simply copy code and replace the video source file name with your video) Dreamweaver has another method. Using Dreamweaver's menu functions not only writes HTML code to embed the .swf file on your page, but also creates a 'Scripts' folder in your root folder that contains scripts to allow you browser to find the right plugins to play the file!

 

Look carefully at the code shown below and find the references to the 'expressinstall' file in the 'Scripts' folder.

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

To embed the Flash file in your page (Using DW menu:
  1. Ensure you publish your animation as an .swf file.
  2. Press Insert/ Media/ SWF
  3. Locate your animation and click OK

The code for the animation above looks like;

 

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="200">
<param name="movie" value="media/html5/outbacknoaudio.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="media/html5/outbacknoaudio.swf" width="900" height="200">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

 

Back to top

 

Embed (Mp3) audio with <audio> tag

 
To embed an .mp3 audio file

 

 

The code for the audio above looks like;

 

<audio controls>
<source src="media/html5/barber_scene_1.mp3">
<p>Can't play the audio in this browser. Either <a href"audio.mp4">download it</a>, or update your web browser to the latest version.
</p>

</audio>

 

Back to top

 

Video and audio controller

 

Details coming soon!!

 

Back to top

 

9. working with tables

Tables

 

HTML files can contain tables. Tables can be created with Dreamweaver is a similar manner to how they can be created in Word. To create (insert) a table in a webpage do the following:

 

Tags for tables

 

Tables are made up from a set of HTML <tag>s. Examine the following empty table:

 

     
     
     

 

Here is the code for this table: (bye they way, the &nbsp;means 'non breaking space'. This is just holding the table cell 'open' so you can see it. The table creator in DW inserts them automatically).

 

<table width="200" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

 

There are 3 different <tag>s making up this table.

  1. Look for <table> </table>
  2. Look for <tr> </tr>
  3. Look for <td> </td>

The <table> tag is the container for the table. If you style the <table> tag the styles will apply to everything in the table.

 

The <tr> tag is each Row in the table. You can style rows by styling the <tr>.

 

The <td> tag is kind of like a Column. But the difference is there are no complete 'colums' just cells in each row. Thus, it is possible to have different numbers of columns in each row. Look back at the code. Do you see that there are three <tr> (rows), each containing 3 <td>s (columns). Experiment with a table of your own by adding more <td>s in a <tr>.

 

Back to top

 

Editing tables

 

Adding rows or columns

 

To modify the rows of columns in your table either;

 

  1. Work directly with the code,
  2. Select your table then Press Modify/Table....
Merging and splitting cells

 

To merge or split cells in your table either;

  1. Work directly with the code,
  2. Select your table then Press Modify/Table....

Back to top

 

Aligning text in table cells

 

When we add text to our table cells we will want to align the text. We usually want the text to begin at the top left of the table cell. The easiset way to do this is to;

  1. Select the table or area you want to set alignment for,
  2. Note alignment fields 'HORZ', 'VERT' will appear at the bottom of your Properties panel,
  3. Click to activate the drop downs, choose Left, Top, etc.

This will apply an inline style to the table, row or cell you have selected. If you selected a table row the style result would be;

 

<tr align="left" valign="top">

Back to top

 

Advanced tables

 

There are more HTML5 table tags. These are to enable specific parts of your table to be styled.

 

The best reference for learning about tables can be found at CSS Tricks. Click to visit the site. The best thing about this site is it allows you to edit HTML and CSS to see how things look.

 

You will notice some more <tag>s:

<thead>, <tbody>, <tfoot>.

 

Look through the examples on the CSS Tricks site. It is a very comprhensive guide on how to work with tables.

 

Back to top

 

Styling tables with CSS

 

We can change the visual appearance of any part of our table. This is called 'styling' your table. Use CSS rules to style elements. To refresh your memory about CSS click here.

 
Styling <tag>s

 

All of the <table> tags can be styled easily with CSS rules. To style the background colour of a whole table created a Tag style for <table>. Your style could look like this:

 

table { background-color: #DDD;

}

 

Note that there is nothing in front of 'table' as it is a Tag style. Try it. You can style any of the table <tag>s in this way.

 

Back to top

 
styling Using a class

 

However, you might not want to style all instances of a <tag>. You might only want to style a bit of your table. In this case you should create a Class. After we create the class we can apply it to the area of the table we want to style.

 

First, create a CSS class (in your page or in an external CSS file):

 

.red { background-color: #F00;

width: 200px;

padding: 10 px;

}

 

Next, apply the class to the part you want to have a red background, width and padding. There are two ways to apply it:

  1. Use DW to help: Select the cell then assign a class in the Properties panel at the bottom of your screen,
  2. Code it: If I was styling a row <tr> it should look like this:

<tr class="red">

<tr>

 

Back to top

 
styling Using an ID

 

You can also style an area of the table by using an ID. This is done in the same way we style <div> tags. In this case you should create a ID. After we create the ID we can apply it to the area of the table we want to style.

 

First, create a CSS ID (in your page or in an external CSS file):

 

#navstyle { background-color: #F00;

width: 200px;

padding: 5 px;

font-family:"Courier New", Courier, monospace;
font-size: 11pt;

}

 

Next, apply the ID to the part you want to style. Here's how:

  1. Code it: If I was styling a row <tr> it should look like this:

<tr id="navstyle">

<tr>

 

Back to top

 

Using tables for web layout

 

Before CSS styling of <div> tags, web designers used tables to create layout. You can imagaine that a table with split or merged cells could create quite an effective grid layout. There are still many websites that use tables to control their structure.

 

However, using tables for web layout is no longer 'best practice'. It isn't even 'OK' practice. So, don't be tempted, even if others you know are saying to use a table for layout. It's 'old hat'. Tables for layout are out big time!!

 

Back to top

 

 

10. Upload and check website

 

Upload and check website

 

Instructions coming real soon!!

 

Back to top


11. Extension work


JS scripting

Extension work unfinished
Making buttons and controlling them with JS
http://msdn.microsoft.com/en-us/library/ie/hh924823%28v=vs.85%29.aspx#customPlayback
http://jqueryui.com/

Back to top

 

 

 

Back to top