cambridge technicals n.
Skip this Video
Loading SlideShow in 5 Seconds..
Cambridge Technicals PowerPoint Presentation
Download Presentation
Cambridge Technicals

Loading in 2 Seconds...

play fullscreen
1 / 31

Cambridge Technicals - PowerPoint PPT Presentation

  • Uploaded on

Cambridge Technicals. Unit 12 LO4 Be able to create websites. P5 Create an interactive website. Your first task is to set up the website correctly and learn how to use CSS to control such things as fonts and background colours across the whole of the website.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Cambridge Technicals' - heath

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cambridge technicals

Cambridge Technicals

Unit 12

LO4 Be able to create websites

p5 create an interactive website
P5 Create an interactive website

Your first task is to set up the website correctly and learn how to use CSS to control such things as fonts and background colours across the whole of the website.

Using CSS means that, if you wish to change the font size and colour of your heading on every page, you just change the CSS sheet and the changes “cascade” down through the site.

setting up a website

Setting up a website

Today you will set up a website correctly and learn how to use CSS to control the colours and fonts in your site. The advantage of using CSS is that you only have to alter one page to make changes to the whole of your site.

creating the website folder
Creating the website folder

Note: ALL file names and folders should have NO spaces; use an underscore _ if you wish to separate words.

Create a suitable folder in the root of your area e.g. ict_website

Inside this folder, create these folders:






We will now set up the website.

creating the website
Creating the website

Open Dreamweaver

Click on Dreamweaver site in the middle column

Give your site a name – this CAN have spaces!

Click on the Browse button and navigate to the folder you have just created in the last stage.

Double click the folder and click Select.

Click Save.

You will see the site open in green at the bottom right of the Dreamweaver screen.

how do cascading style sheets css fit into unit 12
How do Cascading Style Sheets (CSS) fit into Unit 12?

To exceed the Pass level in LO4, you must make use of CSS, as shown here:

CSS does not have to be used to excess, but it should be implemented for at least two different aspects of the site. Evidence of using these aspects can be visible through the completed site and/ or appropriate screenshots. Learners may also record iterative testing carried out throughout the process.

creating a css page
Creating a CSS page

The CSS page “controls” the other pages in your site as long as they are connected to the CSS page.

It is possible to use the CSS page to control the layout of the other pages, but we are going to use it to control only fonts, paragraphs and colours.

In Dreamweaver, click:

File, New

Page from Sample

CSS Style sheet


how to read a css page
How to read a CSS page

You will see a sheet that looks like this:

how to change tag names
How to change tag names

The CSS page contains tags which can be applied to text in your website.

At the moment, these are body, td and th.

Change td to h1

Change th to h2

how to change font styles
How to change font styles

h1 is short for Heading 1 and h2 is short for Heading 2.

In Dreamweaver, click Window, CSS. The CSS panel will appear on the right like this:

Click All and your CSS tags will appear

changing the format
Changing the format

In the CSS box on the right, double click h1 and the following panel will open to let you define how any text formatted with Heading 1 will appear.

Make changes to the appearance of Heading 1 text.

There is an example on the next slide

changes to heading 1 text
Changes to heading 1 text

Click OK and you will see that the code on the CSS page has changed.

changed html code
Changed HTML code

Now you can make changes to the Heading 2 text.

applying the css sheet to a web page
Applying the CSS sheet to a web page

Save the CSS sheet into your CSS folder with a sensible name e.g.

attach a css sheet to a web page
Attach a CSS sheet to a web page

Click File, New, Blank Page, HTML, Create to make a new web page.

Save your new page as index into the root of your website.

With your new blank page on the screen, at the bottom of the screen, click on Class, Attach Style Sheet...

Find your style sheet and attach it to the page.

applying styles
Applying styles

Type some text on your page.

Highlight it and apply Heading 1 to it in the Format box at the bottom of the page. The text will change to take on the properties of the Heading 1 style.

altering the css style
Altering the CSS style

Now go back to the CSS page and make changes to the Heading 1 style.

When you go back to the index page, you will see that the changes have been applied.

Now add more text and apply Heading 2.


Create your own style and apply that to text

create your own style
Create your own style

On the CSS page:

Type the name of your own style preceded by a full stop e.g.


Follow this with two curly brackets like this:

In the CSS panel at the top right, click Refresh and your new style will appear.

You can double click it and set up the appearance as before.

applying your own style
Applying your own style

On the Index page, type some text and highlight it.

At the bottom of the page, click Class and you will see your style, which you can then apply to the text.


Experiment with style.

Create some of your pages and apply the style sheet to them.

site definition files
Site definition files

You will need to create a Site Definition file to enable you to reload your website next time you log on to the net work.

Click here for how to do this.

p5 m3 create an interactive website
P5/M3 Create an interactive website

When you have set up the website correctly, you need to add pages to the site. These should have been planned in LO3.

Open up your website in Dreamweaver.

In the Create New column, click on HTML.

A new page will open.

To attach it to the CSS file, click Format, CSS Styles, Attach Style Sheet and navigate your way to the CSS page you created earlier. Follow the prompts and the CSS page will be attached to your new HTML page.

p5 m3 create an interactive website1
P5/M3 Create an interactive website

You will need to set up a table on the page to hold information. To learn how to do this and how to add information, follow these links:

Setting up a table

Editing tables and adding colour

When you have created your first page, click File, Save As... and save it a number of times, each time giving it the name of one of your other pages. This way, all your pages will have the same layout.

p5 m3 create an interactive website2
P5/M3 Create an interactive website

Watch these video tutorials to learn how to add content to your pages:

Adding images

Adding a “hot spot”

Insert an animation

How to add a rollover image

How to add video

How to add sound

How to create a user form

d2 test your website
D2 Test your website

You will need to test your website to ensure that:

You have evaluated it under certain headings

It works correctly

It meets the client’s needs.

d2 test your website1
D2 Test your website

Write an evaluation of your website using these headings:

usability (e.g. Meta tags, clear navigation, viewable in different browsers, ease of use)

readability(e.g. proof read, spell checked, text readable with background colour)

accessibility (e.g. ALT tags included, additional features function)

d2 test your website2
D2 Test your website
  • The test table
  • The testing is done using a TEST TABLE. This must test EVERY section of your website; this means every clickable function on a page and everything that should “run” or appear on a page, such as animations and videos, or images.
  • This should have four columns.
    • In the first column, list what you are testing.
    • In the second column, say what SHOULD happen.
    • In the third column, say what does ACTUALLY happen.
    • In the fourth column, say what action you will take, if any is needed.
d2 test your website3
D2 Test your website

A test table might look like this:

Make sure you test everything on every page!

d2 test your website4
D2 Test your website
  • Client acceptance testing.
  • You do this by creating a questionnaire.
  • The aim of the questionnaire is to get the client’s opinion of the site.
  • For example, you could ask:
    • “Is there any content missing from the site which you would like to be added?”
  • You could ask questions about content, layout, appearance, images etc.
  • Come up with at least EIGHT questions and send the questionnaire to your teacher, who will act as the client.
  • The questionnaire will be completed and returned to you.