CiDA Certificate in Digital Applications

Size: px

Start display at page:

Download "CiDA Certificate in Digital Applications"

Virgil Underwood
5 years ago
Views:

1 CiDA Certificate in Digital Applications

5 CiDA EXAM TOP TIPS

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.

6 Make your home page with background colour, insert a table with 4 rows 3 columns and 0 padding. Add your fireworks banner, buttons, 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.

8 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

Local Site Folder - make sure you choose the ASSETS folder - Save.

9 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)

10 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)

11 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

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

12 Ensure when you put the External Link (often asks you to link the logo) ensure you leave 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 Link When hyperlinking to an address put the prefix mailto: OR INSERT LINK

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

13 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.

14 Make your home page with background colour, insert a table with 4 rows 3 columns and 0 padding. Add your fireworks banner, buttons, 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.

15 Click SITE NEW SITE Enter a SITE NAME e.g. Impromptoo. Local Site Folder click on the folder and find the exam assets folder.

16 Click File New </> HTML Enter Title Home.html File Save As Home.

17 Insert Table Add in number of rows/ columns required Add in table width required Border Thickness

18 Click Window Properties Change Page Font, Size, Text Colour & Background Colour

19 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

20 Click on Insert HTML-Image. Your Banner should now appear on the page

21 Go in to your webpages folder and copy the Home Page, paste file and rename file to each page required from the client brief.

22 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

Highlight the email address on the page that you

Click Insert HTML Email Link After you have typed

23 Highlight the address on the page that you typed in. Click Insert HTML 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

24 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 and then the URL * Test Your Work In The Browser F12

png BROWSE to the ASSETS folder for the correct image e.g. Rollover image = Brochure.

25 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

26 Right Click on the image you inserted. Select Align Select Right The text wraps around the image

27 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

28 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

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating