Cambridge TECHNICALS LEVEL 3

Transcription

1 Cambridge TECHNICALS LEVEL 3 IT MAPPING GUIDE Unit 21 Web Design Prototyping Version 1 ocr.org.uk/it

2 INTRODUCTION Prodigy are delighted to work with OCR, a progressive Awarding Organisation, who share the ambition of providing high-quality qualifications, learning solutions that are industry-led reliable valid assessment. The Cambridge Technicals in IT qualifications provide future-ready skills for a learner to further their ambitions, whether that is in terms of further academic study, enter an apprenticeship or as a springboard to gaining employment. Prodigy Learning (Prodigy) is an award-winning EdTech business providing digital skills certifications learning solutions for a range of technologies including Adobe, Autodesk Microsoft. Established in 2000, Prodigy now have offices in Dublin, London Sydney. Having worked closely with Microsoft since 2000, Prodigy is a Microsoft Authorised Education Gold Partner a MS Global Training Partner supporting academic institutions utilise Microsoft Imagine Academy, Microsoft certifications other Microsoft Education solutions. Historically, the UK has thrived on a rich research technology base has been at the forefront of global technology innovation. Enthusing young learners about following exciting careers in science, technology, engineering mathematics (STEM) subjects is fundamental to maintaining this success. However, currently the UK has a widely acknowledged skills gap in the pipeline of talent studying computing-related disciplines. Therefore, providing high quality, engaging relevant qualifications that equip learners with current technical knowledge skills is essential to encourage more young people into the computing discipline, moreover to ensure they progress to jobs in the sector. 2

3 MAPPED TO MTA HTML APPLICATION Build the Usurer Interface by Using HTML Analyse needs - user interactivity required (e.g. submission of data, maps) Analyse needs - responsive design requirements Produce a plan - Interactive elements to meet the client s needs Creating a prototype - setting structure Creating a prototype - adding Creating a prototype - inserting hyperlinks Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) 2. Build the User Interface by Using HTML5 (25-30%) 2.1. Choose configure HTML5 tags to display text Choose configure HTML5 tags to display graphics. This objective may include but is not limited to: when, why, how to use Canvas; when, why, how to use scalable vector graphics (SVG) 2.3. Choose configure HTML5 tags to play media. This objective may include but is not limited to: video audio tags 2.4. Choose configure HTML5 tags to organize forms. This objective may include but is not limited to: tables, lists, sections semantic HTML 2.5. Choose configure HTML5 tags for input validation. 3

4 MAPPED TO MTA HTML APPLICATION Testing to include: checking is appropriate, correct complete Testing to include: functionality: embedded components 2. Build the User Interface by Using HTML5 (25-30%) 2.1. Choose configure HTML5 tags to display text Choose configure HTML5 tags to display graphics. This objective may include but is not limited to: 3. Format the User Interface by Using CSS Components of web design - page design (e.g. navigation bar, title, page, a plan for management) separating presentation from create with HTML style with CSS when, why, how to use Canvas; when, why, how to use scalable vector graphics (SVG) 2.3. Choose configure HTML5 tags to play media. This objective may include but is not limited to: video audio tags 2.4. Choose configure HTML5 tags to organize forms. This objective may include but is not limited to: tables, lists, sections semantic HTML 2.5. Choose configure HTML5 tags for input validation managing flow - inline vs. block flows managing positioning of individual elements float vs. absolute positioning managing overflow scrolling, visible, hidden basic CSS styling using flexible box grid layouts to establish alignment, direction, orientation proportional scaling use of free scale for elements within a flexible box or grid ordering arranging concepts for using flex box for simple layouts grid for complex layouts grid properties for rows columns; using application templates 4

5 MAPPED TO MTA HTML APPLICATION Components of web design - designing for different browsers devices: responsive design for mobile/ tablet technology Components of web design - designing for different browsers devices: how browser rendering can affect the layout of a webpage Components of web design - designing for different browsers devices: an understing of browser rendering engines as a key to performance Components of web design - designing for different browsers devices: importance of design that takes this into account, what can happen when it is not considered separating presentation from create with HTML style with CSS managing flow - inline vs. block flows managing positioning of individual elements float vs. absolute positioning managing overflow scrolling, visible, hidden basic CSS styling using flexible box grid layouts to establish alignment, direction, orientation proportional scaling use of free scale for elements within a flexible box or grid ordering arranging concepts for using flex box for simple layouts grid for complex layouts grid properties for rows columns; using application templates 5

6 MAPPED TO MTA HTML APPLICATION Analyse needs Analyse needs - user interactivity required (e.g. submission of data, maps) Produce a plan - site map Produce a plan - navigation bar Produce a plan - page structure Produce a plan - design (e.g. font, colour) Produce a plan - Interactive elements to meet the client s needs Creating a prototype - setting structure Creating a prototype - adding Creating a prototype - inserting hyperlinks separating presentation from create with HTML style with CSS managing flow - inline vs. block flows managing positioning of individual elements float vs. absolute positioning managing overflow scrolling, visible, hidden basic CSS styling using flexible box grid layouts to establish alignment, direction, orientation proportional scaling use of free scale for elements within a flexible box or grid ordering arranging concepts for using flex box for simple layouts grid for complex layouts grid properties for rows columns; using application templates 6

7 MAPPED TO MTA HTML APPLICATION Interactive elements - CSS: responsive design Testing to include: checking is appropriate, correct complete Testing to include: functionality: embedded components Components of web design - page design (e.g. navigation bar, title, page, a plan for management) separating presentation from create with HTML style with CSS managing flow - inline vs. block flows managing positioning of individual elements float vs. absolute positioning managing overflow scrolling, visible, hidden basic CSS styling using flexible box grid layouts to establish alignment, direction, orientation proportional scaling use of free scale for elements within a flexible box or grid ordering arranging concepts for using flex box for simple layouts grid for complex layouts grid properties for rows columns; using application templates regions using regions to flow text between multiple <div> sections source, container, dynamic flow, flow-into, flow from, msregionupdate, msregionoverflow, msgetregioncontent() columns hyphenation using these CSS settings to optimize the readability of text; using positioned floats to create text flow around a floating object graphics effects -rounded corners, shadows, transparency, background gradients, typography, Web Open Font Format D 3D transformations translate, scale, rotate, skew, 3D perspective transitions animations SVG filter effects; Canvas 7

8 MAPPED TO MTA HTML APPLICATION Components of web design - designing for different browsers devices: responsive design for mobile/ tablet technology Components of web design - designing for different browsers devices: how browser rendering can affect the layout of a webpage Components of web design - designing for different browsers devices: an understing of browser rendering engines as a key to performance Components of web design - designing for different browsers devices: importance of design that takes this into account, what can happen when it is not considered regions using regions to flow text between multiple <div> sections source, container, dynamic flow, flow-into, flow from, msregionupdate, msregionoverflow, msgetregioncontent() columns hyphenation using these CSS settings to optimize the readability of text; using positioned floats to create text flow around a floating object graphics effects -rounded corners, shadows, transparency, background gradients, typography, Web Open Font Format D 3D transformations translate, scale, rotate, skew, 3D perspective transitions animations SVG filter effects; Canvas Analyse needs Analyse needs - user interactivity required (e.g. submission of data, maps) Produce a plan - site map Produce a plan - navigation bar 8

9 MAPPED TO MTA HTML APPLICATION Produce a plan - page structure Produce a plan - design (e.g. font, colour) Produce a plan - Interactive elements to meet the client s needs Creating a prototype - setting structure Creating a prototype - adding Creating a prototype - inserting hyperlinks Interactive elements - CSS: responsive design Testing to include: checking is appropriate, correct complete Testing to include: functionality: embedded components regions using regions to flow text between multiple <div> sections source, container, dynamic flow, flow-into, flow from, msregionupdate, msregionoverflow, msgetregioncontent() columns hyphenation using these CSS settings to optimize the readability of text; using positioned floats to create text flow around a floating object graphics effects -rounded corners, shadows, transparency, background gradients, typography, Web Open Font Format D 3D transformations translate, scale, rotate, skew, 3D perspective transitions animations SVG filter effects; Canvas 9

10 MAPPED TO MTA HTML APPLICATION Code by Using JavaScript Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Testing to include: functionality: programming language (e.g. JavaScript, Flash) Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Testing to include: functionality: programming language (e.g. JavaScript, Flash) creating using functions using Windows Library for JavaScript, jquery, other third-party libraries locating/ accessing elements listening responding to events showing hiding elements updating the of elements; adding elements using animation; manipulating the canvas working with images, shapes, other graphics 10

11 MAPPED TO MTA HTML CSS Underst the Fundamentals of HTML Components of web design - the use of hyperlinks to join webpages Creating a prototype - setting structure Creating a prototype - adding Creating a prototype - inserting hyperlinks Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) script noscript style meta tags, including coding, keywords, viewport translate DOCTYPE declaration HTML head body proper syntax Including closing tags commonly used symbols comments 11

12 MAPPED TO MTA HTML CSS Underst CSS Fundamentals Components of web design - page design (e.g. navigation bar, title, page, a plan for management) When to use each Precedence when using a combination of inline styles style sheets Valid syntax for the CSS rule set selectors including class i.e. elements pseudo-class Reusing rules rule sets Commenting Testing on multiple browsers web safe fonts Analyse needs Analyse needs - user interactivity required (e.g. submission of data, maps) Analyse needs - responsive design requirements Produce a plan - page structure Produce a plan - design (e.g. font, colour) Creating a prototype - setting structure Creating a prototype - adding Interactive elements - CSS: responsive design 3.0 Structure Documents using HTML Components of web design - the use of hyperlinks to join webpages Table tags h1-h p br hr div span ul ol li Produce a plan - page structure Creating a prototype - adding Creating a prototype - inserting hyperlinks 12

13 MAPPED TO MTA HTML CSS Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) Components of web design - the use of hyperlinks to join webpages Produce a plan - page structure Creating a prototype - adding Creating a prototype - inserting hyperlinks Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Semantic tags header Table tags h1-h p br hr div span ul ol li section article aside footer details summary figure caption Image links target bookmark relative vs absolute links navigating simple folder hierarchies 13

14 MAPPED TO MTA HTML CSS Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) Semantic tags header section article aside footer details summary figure caption Image links target bookmark relative vs absolute links navigating simple folder hierarchies 4.0 Present Multimedia using HTML Components of web design - the use of hyperlinks to join webpages Produce a plan - page structure Creating a prototype - adding Creating a prototype - inserting hyperlinks img picture elements their attributes 4.2 Describe the appropriate use of the img, svg canvas elements 4.3 Construct analyse mark-up that plays video audio video audio track source simple iframe implementations 14

15 MAPPED TO MTA HTML CSS Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) img picture elements their attributes 4.2 Describe the appropriate use of the img, svg canvas elements 5.0 Style Web Pages Using CSS Components of web design - page design (e.g. navigation bar, title, page, a plan for management) 4.3 Construct analyse mark-up that plays video audio video audio track source simple iframe implementations Positioning including, float, relative, absolute, max-width overflow, height, width align inline vs block visibility box model including margins padding font family colour fontstyle fontweight link colours textformatting including text alignment, text decoration indentation 15

16 MAPPED TO MTA HTML CSS Creating a prototype - setting structure Creating a prototype - adding Interactive elements - CSS: responsive design Testing to include: checking is appropriate, correct complete Components of web design - page design (e.g. navigation bar, title, page, a plan for management) Creating a prototype - setting structure Positioning including, float, relative, absolute, max-width overflow, height, width align Bordercolour inline vs block visibility box model including margins padding font family colour fontstyle fontweight link colours textformatting including text alignment, text decoration indentation borderstyle borderwidth backgrounds divs colours units of measurement responsive effects with CSS including viewport media query percentage vs pixels frameworks templates maxwidth 16

17 MAPPED TO MTA HTML CSS Creating a prototype - adding Interactive elements - CSS: responsive design Testing to include: checking is appropriate, correct complete Bordercolour borderstyle borderwidth backgrounds divs colours units of measurement responsive effects with CSS including viewport media query percentage vs pixels frameworks templates maxwidth 17

18 MAPPED TO MTA JAVA SCRIPT JavaScript Fundamentals (operators, variables) Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Testing to include: checking is appropriate, correct complete Testing to include: functionality: embedded components Assignment; increment; decrement; addition; subtraction; division; multiplication; modulus; compound assignment operators Comments; indentations; naming conventions; no script; constants; reserved keywords; debugger keyword; setting breakpoints; console. log 18

19 MAPPED TO MTA JAVA SCRIPT Testing to include: functionality: programming language (e.g. JavaScript, Flash) Assignment; increment; decrement; addition; subtraction; division; multiplication; modulus; compound assignment operators Comments; indentations; naming conventions; no script; constants; reserved keywords; debugger keyword; setting breakpoints; Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Testing to include: checking is appropriate, correct complete Testing to include: functionality: embedded components Testing to include: functionality: programming language (e.g. JavaScript, Flash) 1.3 Implement inline external scripts. When to use, how to use, what happens when both are used try; catch; finally Manage state; display dialogs; determine screen size console. log 19

20 MAPPED TO MTA JAVA SCRIPT Variables, Data Types, Functions Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Number; Boolean; String; Null; Undefined; Ntype of operator; type checking functions; use strict; converting between data types; formatting numbers; string operations; single quote vs double quote (nesting); initialization iteration; initialization; array definition; sorting searching; push pop; shift/ unshift; length; accessing an element; understing multidimensional arrays 20

21 MAPPED TO MTA JAVA SCRIPT Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Properties; methods; instantiation; Date object: time; retrieving date parts; localization (MM/DD vs DD/MM); adding subtracting dates Rom; round; abs; floor; ceiling; min/ max; pow; sqrt abs; floor; ceiling; min/max; pow; sqrt Reusable code; 3. Implement analyse decisions loops Interactive elements - language (e.g. JavaScript, Flash): writing code to perform 3.1 Evaluate expressions that use logical comparison operators local vs global scope, redefining variables, passing parameters, value vs. reference, return values if; else if; switch; nested if for; while; do; break; continue 21

22 MAPPED TO MTA JAVA SCRIPT Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) 3.1 Evaluate expressions that use logical comparison operators 4. Interact with the DOM Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) if; else if; switch; nested if for; while; do; break; continue window; document; body; other HTML elements on change; on mouseover; onload; on click; on mouseout; on keydown 22

23 MAPPED TO MTA JAVA SCRIPT Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) 5. Interact with HTML forms Interactive elements - language (e.g. JavaScript, Flash): writing code to perform Interactive elements - language (e.g. JavaScript, Flash): allowing for user interaction (e.g. changing an image based on a user selection, validating input) Retrieving form values; the DOM path to form field then to the value property; inner HTML; document write get Element Byld; get Elements By Tag Name; get Elements By Class Name; getting values from different types of elements; prepopulating values; masking values Case (upper lower); string comparisons; validation; NaN on submit; underst post vs get; underst potential targets for submission 23

24 MAPPED TO MTA ADOBE DREAMWEAVER 1. Setting Project Requirements Components of web design - the purpose or a site map Components of web design - the position, structure purpose of a navigation bar Components of web design - page design (e.g. navigation bar, title, page, a plan for management) Components of web design - designing for different browsers devices: responsive design for mobile/tablet technology Components of web design - designing for different browsers devices: how browser rendering can affect the layout of a webpage Components of web design - designing for different browsers devices: an understing of browser rendering engines as a key to performance Components of web design - designing for different browsers devices: importance of design that takes this into account, what can happen when it is not considered 1.1 Identify the purpose, audience, audience needs for a website. 1.2 Identify web page that is relevant to the website purpose appropriate for the target audience. 1.4 Demonstrate knowledge of website accessibility stards that address the needs of people with visual motor impairments. 1.5 Make website development decisions based on your analysis interpretation of design specifications. 1.6 Underst project management tasks responsibilities 24

25 MAPPED TO MTA ADOBE DREAMWEAVER Components of web design - methods of user interaction: difference methods of interaction components of web design - methods of user interaction: use of existing tools components of web design - methods of user interaction: use of languages to ad interactivity (e.g. JavaScript, Flash) 1.1 Identify the purpose, audience, audience needs for a website Analyse needs - purpose of site 1.2 Identify web page that is relevant to the website purpose appropriate for the target audience Analyse needs Produce a plan - site map Produce a plan - navigation bar Produce a plan - page structure Produce a plan - design (e.g. font, colour) Produce a plan - Interactive elements to meet the client s needs Produce a plan - responsive design: for different devices e.g. tablet, phone, PC Produce a plan - responsive design: for different browsers e.g. IE, Chrome, Safari 1.4 Demonstrate knowledge of website accessibility stards that address the needs of people with visual motor impairments. 1.5 Make website development decisions based on your analysis interpretation of design specifications. 1.6 Underst project management tasks responsibilities 25

26 MAPPED TO MTA ADOBE DREAMWEAVER Evaluate against client needs including - choose a suitable method of a presentation (e.g. live demonstration, use of presentation software, report) Evaluate against client needs including - how the prototype meets the site purpose (e.g. if e-commerce, how this has been incorporated) Evaluate against client needs including - comparison of prototype against required Evaluate against client needs including - comparison of interactivity built in, against the user s interactive requirements Evaluate against client needs including - comparison of responsive design to user s responsive design requirements Evaluate against client needs including - justify choices made in the development of the prototype against the original needs Evaluate against client needs including - improvements - suggest improvements to the design, structure or function of the prototype 1.1 Identify the purpose, audience, audience needs for a website. 1.2 Identify web page that is relevant to the website purpose appropriate for the target audience. 1.4 Demonstrate knowledge of website accessibility stards that address the needs of people with visual motor impairments. 1.5 Make website development decisions based on your analysis interpretation of design specifications. 1.6 Underst project management tasks responsibilities 26

27 MAPPED TO MTA ADOBE DREAMWEAVER 4. Be able to present the interactive website concept to an identified client Present the solution - choose a suitable method of presentation (e.g. live demonstration, use of presentation software, report) Present the solution - plan a presentation to incorporate: comparison of the website against requirements Present the solution - plan a presentation to incorporate: demonstration of functionality Present the solution - plan a presentation to incorporate: demonstration of interactivity 1.1 Identify the purpose, audience, audience needs for a website. 1.2 Identify web page that is relevant to the website purpose appropriate for the target audience. 1.4 Demonstrate knowledge of website accessibility stards that address the needs of people with visual motor impairments. 1.5 Make website development decisions based on your analysis interpretation of design specifications. 1.6 Underst project management tasks responsibilities 27

28 MAPPED TO MTA ADOBE DREAMWEAVER 2.0 Planning Site Design Page Layout Components of web design - the purpose or a site map Components of web design - the position, structure purpose of a navigation bar Components of web design - page design (e.g. navigation bar, title, page, a plan for management) Components of web design - designing for different browsers devices: responsive design for mobile/tablet technology Components of web design - designing for different browsers devices: how browser rendering can affect the layout of a webpage Components of web design - designing for different browsers devices: an understing of browser rendering engines as a key to performance Components of web design - designing for different browsers devices: importance of design that takes this into account, what can happen when it is not considered Components of web design - World Wide Web consortium: open closed stards in web development 2.1 Demonstrate general Dreamweaver-specific knowledge of best practices for designing a website, such as maintaining consistency, separating from design, using stard fonts, utilizing a visual hierarchy. 2.2 Produce website designs that work equally well on various operating systems, browser versions/ configurations devices. 2.3 Demonstrate knowledge of page layout design concepts principles. 2.4 Identify basic principles of website usability, readability, accessibility. 2.5 Demonstrate knowledge of flowcharts, storyboards, wireframes, design comps to create web pages a site map (site index) that maintain the planned website hierarchy. 28

29 MAPPED TO MTA ADOBE DREAMWEAVER Components of web design - methods of user interaction: difference methods of interaction components of web design - methods of user interaction: use of existing tools components of web design - methods of user interaction: use of languages to ad interactivity (e.g. JavaScript, Flash) 2.1 Demonstrate general Dreamweaver-specific knowledge of best practices for designing a website, such as maintaining consistency, separating from design, using stard fonts, utilizing a visual hierarchy. 2.2 Produce website designs that work equally well on various operating systems, browser versions/ configurations devices. 2.3 Demonstrate knowledge of page layout design concepts principles. 2.4 Identify basic principles of website usability, readability, accessibility. 2.5 Demonstrate knowledge of flowcharts, storyboards, wireframes, design comps to create web pages a site map (site index) that maintain the planned website hierarchy Analyse needs Analyse needs - user interactivity required (e.g. submission of data, maps) Analyse needs - responsive design requirements Produce a plan - site map Produce a plan - navigation bar Produce a plan - page structure Produce a plan - design (e.g. font, colour) Produce a plan - Interactive elements to meet the client s needs Produce a plan - responsive design: for different devices e.g. tablet, phone, PC Produce a plan - responsive design: for different browsers e.g. IE, Chrome, Safari 29

30 MAPPED TO MTA ADOBE DREAMWEAVER 4.0 Adding Content by Using Dreamweaver Components of web design - the use of hyperlinks to join webpages Components of web design - the position, structure purpose of a navigation bar Components of web design - page design (e.g. navigation bar, title, page, a plan for management) Creating a prototype - setting structure Creating a prototype - adding Creating a prototype - inserting hyperlinks 4.1 Demonstrate knowledge of Hypertext Mark-up Language. 4.2 Define a Dreamweaver site 4.3 Create, title, name, save a web page. 4.4 Add text to a web page 4.5 Insert images apply alternative text on a web page 4.6 Link web, using hyperlinks, links, named anchors 4.7 Include video sound in a web page. 4.8 Insert animation interactivity to. 4.9 Insert navigation bars, rollover images, buttons created in a drawing program on a web page Import tabular data to a web page 4.11 Import display a Microsoft Word or Microsoft Excel document to a web page Create forms. 30

31 MAPPED TO MTA ADOBE DREAMWEAVER Interactive elements - existing: copy HTML code from pre-existing components (e.g. social media feeds, videos, maps) Interactive elements - existing: editing to make these appropriate for a webpage (e.g. making a map local) 4.1 Demonstrate knowledge of Hypertext Mark-up Language. 4.2 Define a Dreamweaver site 4.3 Create, title, name, save a web page. 4.4 Add text to a web page 4.5 Insert images apply alternative text on a web page 4.6 Link web, using hyperlinks, links, named anchors 4.7 Include video sound in a web page. 4.8 Insert animation interactivity to. 4.9 Insert navigation bars, rollover images, buttons created in a drawing program on a web page Import tabular data to a web page 4.11 Import display a Microsoft Word or Microsoft Excel document to a web page. 5.0 Organizing Content by Using Dreamweaver Produce a plan - page structure 5.1 Set modify document properties. 5.2 Organize web page layout with relative absolutelypositioned div tags CSS styles. 5.3 Modify text text properties 5.4 Modify images image properties. 5.5 Create web page templates 5.6 Use basic HTML tags to set up an HTML document, format text, add links, create tables, build ordered unordered lists 5.7 Add head to make a web page visible to search engines Create forms. 5.8 Use CSS to implement a reusable design. 31

32 MAPPED TO MTA ADOBE DREAMWEAVER Produce a plan - design (e.g. font, colour) Creating a prototype - setting structure Creating a prototype - adding Creating a prototype - inserting hyperlinks Interactive elements - CSS: responsive design 5.1 Set modify document properties. 5.2 Organize web page layout with relative absolutelypositioned div tags CSS styles. 5.3 Modify text text properties 5.4 Modify images image properties. 5.5 Create web page templates 5.6 Use basic HTML tags to set up an HTML document, format text, add links, create tables, build ordered unordered lists 5.7 Add head to make a web page visible to search engines. 5.8 Use CSS to implement a reusable design. 6.0 Evaluating Maintaining a Site by Using Dreamweaver CS Testing to include: checking is appropriate, correct complete Testing to include: functionality: embedded components 6.1 Conduct technical tests. 6.2 Identify techniques for basic usability tests. 6.3 Identify methods for collecting site feedback. 6.4 Manage assets, links, files for a site. 6.5 Publish update site files to a remote server. 32

33 MAPPED TO MTA ADOBE DREAMWEAVER Testing to include: comparison to requirements Testing to include: responsive design: multiple devices Testing to include: responsive design: multiple browsers Evaluate against client needs including - choose a suitable method of a presentation (e.g. live demonstration, use of presentation software, report) Evaluate against client needs including - how the prototype meets the site purpose (e.g. if e-commerce, how this has been incorporated) Evaluate against client needs including - comparison of prototype against required Evaluate against client needs including - comparison of interactivity built in, against the user s interactive requirements Evaluate against client needs including - comparison of responsive design to user s responsive design requirements Evaluate against client needs including - justify choices made in the development of the prototype against the original needs Evaluate against client needs including - improvements - suggest improvements to the design, structure or function of the prototype Future security maintenance considerations - updating of 6.1 Conduct technical tests. 6.2 Identify techniques for basic usability tests. 6.3 Identify methods for collecting site feedback. 6.4 Manage assets, links, files for a site. 6.5 Publish update site files to a remote server. 33

34 The small print We d like to know your view on the resources we produce. By clicking on the Like or Dislike button you can help us to ensure that our resources work for you. When the template pops up please add additional comments if you wish then just click Send. Thank you. Whether you already offer OCR qualifications, are new to OCR, or are considering switching from your current provider/awarding organisation, you can request more information by completing the Expression of Interest form which can be found here: OCR Resources: the small print OCR s resources are provided to support the delivery of OCR qualifications, but in no way constitute an endorsed teaching method that is required by OCR. Whilst every effort is made to ensure the accuracy of the, OCR cannot be held responsible for any errors or omissions within these resources. We update our resources on a regular basis, so please check the OCR website to ensure you have the most up to date version. This resource may be freely copied distributed, as long as the OCR logo this small print remain intact OCR is acknowledged as the originator of this work. Our documents are updated over time. Whilst every effort is made to check all documents, there may be contradictions between published support the specification, therefore please use the information on the latest specification at all times. Where changes are made to specifications these will be indicated within the document, there will be a new version number indicated, a summary of the changes. If you do notice a discrepancy between the specification a resource please contact us at: resources.feedback@ocr.org.uk. OCR acknowledges the use of the following : Front cover: Repairing hard drive, Goodluz/Shutterstock.com; Square down Square up: alexwhite/shutterstock.com Please get in touch if you want to discuss the accessibility of resources we offer to support delivery of our qualifications: resources.feedback@ocr.org.uk OCR Customer Contact Centre Vocational qualifications Telephone Facsimile vocational.qualifications@ocr.org.uk OCR is part of Cambridge Assessment, a department of the University of Cambridge. For staff training purposes as part of our quality assurance programme your call may be recorded or monitored. OCR 2018 Oxford Cambridge RSA Examinations is a Company Limited by Guarantee. Registered in Engl. Registered office The Triangle Building, Shaftesbury Road, Cambridge, CB2 8EA. Registered company number OCR is an exempt charity. Looking for a resource? There is now a quick easy search tool to help find free resources for your qualification: