CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 -...

28
CiDA Certificate in Digital Applications

Transcript of CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 -...

Page 1: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

CiDACertificate in

Digital

Applications

Page 2: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...
Page 3: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...
Page 4: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...
Page 5: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

CiDA

EXAM

TOP TIPS

Page 6: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Make your home page

with background colour,

insert a table with 4 rows

3 columns and 0

padding.

Add your fireworks

banner, buttons, email

link, suitable images and

text.

Save home page, copy

and paste file, rename to

each page required.

Add hyperlinks to all

buttons, on all pages.

Read exam paper to add

required information on

each page.

Tick the paper when you

have completed

something.

Page 7: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...
Page 8: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Check your images are in the correct file format and size (NOT always PNG)

(Optimise Images in Fireworks - File- Export Wizard - png 8 OR File – Image Preview)

Create a Banner for your microsite in fireworks/photoshop - check size of saved .png

Create Buttons for navigation bar in fireworks e.g.HOME

(only if you have time and if it is a requirement otherwise use a TEXT link)

Before you use the images – ensure they are the right size/format (PNG, JPEG etc.)

Do not distort images, resize from the corners rather than sides

There is always an image you shouldn’t use in the assets (Distractor Images)

Thumbnails = miniature version of the original

Page 9: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Log on

Read the exam paper/client brief carefully (Use skim & scan technique)

Manage your site - Site – New Site- Site Name - Ensure your microsite has a sensible

name e.g. not site1. Local Site Folder - make sure you choose the ASSETS folder -

Save.

Remember:

Check you are in DESIGN VIEW – View – Split – Code Design

Check you have your PROPERTIES WINDOW visible –

Window – Properties (Ctrl + F3)

Page 10: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Creating your Index (home page)

File – New - </>HTML – title = index.html

(this is your home page template think of it as a master slide)

Save as index as a .html page

Check page size at bottom of dreamweaver screen –

Most, but not all sites will be 1024x768

Create a table to group your information on the webpage –

Insert table – think about how many rows/columns you will need.

What width should the page be?

Change the colour scheme (make sure it suits the business and people with visual

impairments) Choose colours that are accessible – so no red and green – use colours that

are in the logo

Change colour scheme – select Page Properties (Appearance CSS) – font, size, text

colour, background colour)

Page 11: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Add the banner to your index page

Add ALT text to the banner image –

Make sure you add accessibility features for all of your images (alternate text).

Add buttons to the navigation bar OR text.

Create links for the buttons in the navigation bar.

Add the edited images to the Index (home) page.

Add appropriate text from the INFO.rtf

Once happy with the template file and save as with the names of the other pages the brief

asks for e.g. Volunteers.html, Programmes.html, LunchHour.html etc. (or alternatively

copy the index in your user area and rename it as another page – repeat this process)

OR

In your user area copy index page and rename.

Repeat process of adding text / images / links to other pages

Page 12: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Ensure when you put the External Link (often asks you to link the logo) ensure you

leave http:// at the beginning even if it is not stated on the paper.

Remember – sometimes they will ask for hyperlinked icons rather than a standard navigation bar

Hotspot

X Graphical Link

• Email Link

When hyperlinking to an email address put the prefix mailto: OR INSERT – EMAIL LINK

Page 13: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Every paper says ‘consider accessibility features’ this means alternate text but also:

using contrasting colours (avoid red and green) and easy to read fonts – mention your

consideration of this in the evaluation.

Make sure you add accessibility features for all of your images (alternate text) this is

worth quite a few marks but takes 5 minutes.

Ensure ALT TEXT is meaningful e.g. not just ‘flyer’. But ‘flyer advertising the radio station’.

Page 14: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Make your home page

with background colour,

insert a table with 4 rows

3 columns and 0

padding.

Add your fireworks

banner, buttons, email

link, suitable images and

text.

Save home page, copy

and paste file, rename to

each page required.

Add hyperlinks to all

buttons, on all pages.

Read exam paper to add

required information on

each page.

Tick the paper when you

have completed

something.

Page 15: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click SITE – NEW

SITE

Enter a SITE NAME

e.g. Impromptoo.

Local Site Folder –

click on the folder and

find the exam assets

folder.

Page 16: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click File – New

</> HTML

Enter Title –

Home.html

File – Save As

Home.

Page 17: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Insert – Table

Add in number of

rows/ columns

required

Add in table width

required

Border Thickness

Page 18: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click Window –

Properties

Change Page Font,

Size, Text Colour &

Background Colour

Page 19: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Open Fireworks and click File –

New

Set the width to 1024 pixels and

height to 250 pixels.

Add the logo, suitable text &

colour.

Save it in the Assets folder and

make sure you change the file

format .png

Check the client requirements

Page 20: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click on Insert –

HTML-Image.

Your Banner should

now appear on the

page

Page 21: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Go in to your webpages

folder and copy the Home

Page, paste file and

rename file to each

page required from the

client brief.

Page 22: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

You can link up your

pages by typing in the

name of the

page.html

OR you can use the

point to file

OR you can use the

folder to browse for the

file

Point

to file

Browse

for file.

* Test Your Work In The Browser F12

Page 23: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Highlight the email address

on the page that you typed

in.

Click Insert – HTML –

Email Link

After you have typed in your

text click OK

OR you can type in the link

using mailto:

* Test Your Work In The Browser F12

Page 24: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click on the image that

requires a Hotspot and

draw the shape over

the area of the image

you want to be able to

click.

If you want to link to a

website type in http://

and then the URL * Test Your Work In The Browser F12

Page 25: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click INSERT –HTML

– ROLLOVER IMAGE

BROWSE to the

ASSETS folder for the

correct image e.g.

Original image =

Front Cover.png

BROWSE to the

ASSETS folder for the

correct image e.g.

Rollover image =

Brochure.png

* Test Your Work In The Browser F12

Page 26: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Right Click on the image

you inserted.

Select Align

Select Right

The text wraps around the

image

Page 27: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

Click Insert – HTML –

HTML5 video

Click on the Video

Icon -In Properties –

Source (point to file

e.g.Video.mp4)

Video

Icon

* Test Your Work In The Browser F12

Page 28: CiDA EXAM HELP - Amazon S3CIDA DA201 –The Recycle Drive –Exam Walkthrough. 2. CIDA DA201 - 4ToonzRadio –Exam Walkthrough. 3. CiDA: January 2016 Unit 1 Exam – ...

YouTube (video tutorials)

1. CIDA DA201 – The Recycle Drive – Exam

Walkthrough.

2. CIDA DA201 - 4ToonzRadio – Exam

Walkthrough.

3. CiDA: January 2016 Unit 1 Exam –

(Grubalicious)4Toonzradio How To.ppt