63
ADOBE CERT IFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

Embed Size (px)

Citation preview

Page 1: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ADOBE CER

TIFIE

D ASSOCIA

TE

I N W

EB

AU

TH

OR

I NG

US

I NG

AD

OB

E D

RE

AM

WE

AV

ER

CS

6

Page 2: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

QUICK SYNOPSIS OF THIS PRESENTATION

THIS POWERPOINT PRESENTATION IS AIMED AT STUDENTS CURRENTLY PREPARING FOR THEIR CITY AND GUILDS WEB DESIGN EXAMS - LEVELS 1 AND 2 - AT ELATT WEB ACADEMY AND ELSEWHERE.

ITS PURPOSE IT TO HIGHLIGHT THE DIFFERENCES BETWEEN YOUR CURRENT CITY AND GUILDS EXAM SYLLABUS AND THAT OF THE HIGHER PROFESSIONAL ADOBE CERTIFIED ASSOCIATE [A.C.A.] QUALIFICATION.

IN SUMMARY, YOU WILL COVER MOST OF THE ACA COURSE AT ELATT AND THIS PRESENTATION WILL GIVE YOU SOME USEFUL INSIGHT INTO OTHER TOPICS YOU WILL NEED TO STUDY EITHER ON YOUR OWN OR WITH SOME ONE TO ONE HELP FROM YOUR TUTOR AT ELATT OFR ELSEWHERE.

GOOD LUCK – MIKE LOOMEY

Page 3: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

AGENDA FOR TODAY

• A FEW WORDS ABOUT MIKE

• WE ARE GOING TO HAVE A CLOSE LOOK AT ELATT’S WEB DESIGN SYLLABUS

• YOU ARE ON LEVEL 1 - WE WILL LOOK AHEAD TO LEVEL 2

• THIS IS WHERE YOU WILL FIND THE FIRST MENTION OF THE ADOBE CERTIFIED ASSOCIATE QUALIFICATION.

• EXPLAIN THE EXAM FORMAT - LOOK AT THE CERTIFICATE AND BADGE YOU GET

• LOOK OVER THE ACA DREAMWEAVER SYLLABUS

• HIGHLIGHT ACA TOPICS NOT COVERED IN THE CITY AND GUILDS SYLLABUS

• SHOW YOU HOW TO INCORPORATE EVERYTHING YOU LEARN IN YOUR ACA INTO A WELL-STRUCTURED STEP BY STEP PLAN THAT ENABLES YOU TO DESIGN EXTREMELY EFFECTIVE WEBSITES FOR YOU AND YOUR CLIENTS

• CASE STUDY - STUDIO CAFÉ AND LOOK AT SOME ACA TRAINING VIDEOS

Page 4: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

INTRODUCTION

MIKE THE PROFESSIONAL SEO GUY DJ AND AND ENTERTAINMENT AGENT WEB DEVELOPER

4

Page 5: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

INTRODUCTION CONTINUED

3 in 1 Web Design Digital Summer

5

Page 6: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

STUDYING WEB DEVELOPMENT AT ELATT

LEVEL 1 - WEB STARTER

What you will learn : According to the Elatt website …

Improving Productivity using IT (Mandatory Unit)

Website Software (HTML + CSS)

Presentation Software (MS PowerPoint)

Database Management Software

Database Software (MS Access)

Specialist Software (Joomla)

QUALIFICATIONS : City & Guilds Level 1 Award / Certificate for IT Users, 7574-01

Page 7: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

STUDYING WEB DEVELOPMENT AT ELATT

LEVEL 2 - WEB DESIGNER CERTIFICATE and DIPLOMA

What you will learn : According to the website …

Improving Productivity Using IT (Mandatory Unit)

Bespoke Software (Mobile App Design)

Specialist Software (Joomla)

Database Software (MS Access)

Website Software (Adobe Dreamweaver CS6 with PHP MySQL)

Developing Personal and Team Effectiveness

Data Management Software (E-commerce CMS)

Multimedia Software (Adobe Flash CS6)

Design Software (Adobe Photoshop CS6)

2 QUALIFICATIONS : City & Guilds Certificate & a harder Diploma for IT Users Level 2, 7574-02

Page 8: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

BUT LET’S CLOSER LOOK AT ELATT’S WEBSITEAT THE TOP OF THE LIST OF THE LEVEL 2 QUALIFICATIONS IS ….

City & Guilds Diploma for IT Users Level 2, 7574-02 –

But have you noticed these ACA qualifications are also listed ?

ACA Dreamweaver (Adobe Certified Associate)

ACA Flash (Adobe Certified Associate)

ACA Photoshop (Adobe Certified Associate

NEXT IS A SCREENSHOT OF A COUPLE OF PAGES FROM ELATT’S WEBSITE

ACA QUALIFICATIONS APPEAR IN BOTH LEVEL 2 AND LEVEL 3

Page 9: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ELATT ADVANCED WEB QUALIFICATIONS – LEVEL 2

Page 10: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ELATT ADVANCED WEB QUALIFICATIONS – LEVEL 3

Page 11: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

STUDYING WEB DEVELOPMENT AT ELATT

• WHY DO ELATT OFFER THE DREAMWEAVER ACA QUALIFICATION WHEN YOU ARE ALREADY STUDYING DREAMWEAVER FOR YOUR CITY AND GUILDS.

• WHY ARE THESE QUALIFICATIONS LISTED UNDER BOTH LEVEL 2 & LEVEL 3 ?

• WHAT IS THE DIFFERENCE ?

Page 12: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

STUDYING WEB DEVELOPMENT AT ELATT

• ACA qualifications are level 3 – But they are self-study exams, which you can begin working towards whenever you like.

• You could start today but realistically you would be better off opting to self-study for the ACA exams while you are doing either your free level 2 web certificate, or your free level 2 diploma course at Elatt.

• You can opt to wait until you are doing level 3 web developer course at Elatt but you have to pay to take level 3, or apply for a grant.

• Elatt do not offer specific ACA tuition in class but will cover the considerable cost of you taking the exams and support you on an individual basis.

• The syllabus is set by Adobe and covers a much wider range of topics than that of the City and Guilds exam.

• However, much of the Adobe ACA syllabus is also covered at Elatt in the City and Guilds classes, especially in level 2 – Here is the broad syllabus

Page 13: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ACA SYLLABUS COVERS 6 PARTS OR DOMAINSDomain 1.0 Setting Project Requirements

Domain 2.0 Planning Site Design and Page Layout

Domain 3.0 Understanding the Adobe Dreamweaver Interface

Domain 4.0 Adding Content by Using Dreamweaver

Domain 5.0 Organizing Content by Using Dreamweaver

Domain 6.0 Evaluating and Maintaining a Site by Using Dreamweaver

Page 14: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

THE ACA EXAM FORMAT

ACA exams validate a test candidate’s knowledge and skill by using 2 types of questions:

• Linear-based questions using traditional true / false, multiple choice, or matching formats.

• Performance-based questions which simulate the Adobe Dreamweaver application, requiring the student to complete a task or perform a function. Where a task could be performed in 2 or 3 ways, often 1 or 2 of these will be disabled.

• Similarly various info panels and other parts of the Dreamweaver site will hidden and need to be re-enabled to perform the task.

The ACA Dreamweaver certification is available for Creative Cloud (CC), Creative Suite 6 (CS6) and CS5 versions of Adobe software.

Please note that the CC-based ACA certifications are only valid for three years after the date of issue. CS6 certifications do not expire.

Page 15: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ACA EXAM PASS MARKS – VARY FROM YEAR TO YEAR• To pass the exam, I had to score at least 50% in every domain

• I had to score more than 72% overall...

• I got 83% in the mock exam but just passed with 75% in the real exam.

• There were 47 questions which had to be completed in 55 minutes.

• There is an on-screen timer and you can both see and attempt every question.

• You can flip back and forth through the questions once you hit submit you cannot go back and change your mind. So read them all first.

VIDEO : Dreamweaver CS6 Certification Test Samples – Poor sound qualityhttps://www.youtube.com/watch?v=gt7aNunFJN8

Page 16: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

YOUR ACA CERTIFICATE AND BADGE

Page 17: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

WHY BOTHER WITH THIS QUALIFICATION ?ADOBE SAYS

Having ACA certification is a great validation of one’s Adobe creative skills.

MIKE SAYS

Firstly – You should do it because you can and it is free at Elatt - The City and Guilds course studied at Elatt gives you a solid foundation in how the Dreamweaver program works and enables you to create really nice websites.

In the real world though, most of my clients are completely clueless about what elements their site should contain. They have not considered who their target audience is or what sort of experience they want them to have on the website. They don’t know what pages they should have or how to organise their content logically.

The ACA syllabus takes a step back before the design stage begins and gets them to consider all these variables. By the time you start you have a solid blueprint and know exactly where you are going .

There are far fewer misunderstandings. You get a much happier client. They can see how professional you are from the very start and you can charge more money accordingly.

Page 18: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6
Page 19: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ELATT COVERS AT LEAST 4 OF THE 6 ACA DOMAINS• I am not criticising Elatt – Just comparing the 2 syllabuses

so you can see how little extra study it will take you to qualify as an ACA.

• By the time you have completed both your Level 2 Certificate and Level 2 diploma you will have pretty much covered three quarters of the required topics in the ACA syllabus.

• Here are what your City and Guilds Level 2 Certificates will look like – You can see the enormous range of topics covered

• You will be very busy and indeed may have to postpone your ACA exam until you have finished the City and Guilds …

Page 20: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

CITY AND GUILDS DIPLOMA & CERTIFICATESCOVERING NUMEROUS TOPICS

Page 21: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ELATT COVERS AT LEAST 4 OF THE 6 ACA DOMAINS• Of the 6 ACA Domains, only numbers 1 and 2 require a fair

bit of extra study. These are concerned with the pre-planning stage.

• Domain 3 – I never learned at Elatt how to customise the Dreamweaver Workspace

• Domain 4 was completely covered at Elatt

• Domain 5 Creating Dreamweaver templates was missed

• Domain 6, Elatt missed Usability Tests or Site Feedback.

• Let’s quickly have a look at ALL those 6 domains again …

• Then we will go back and look at numbers 1 and 2 in detail …

• And then skim through numbers 3 to 6.

Page 22: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

ELATT COVERS AT LEAST 4 OF THE 6 ACA DOMAINS

Domain 1.0 Setting Project Requirements

Domain 2.0 Pre-planning Site Design and Page Layout

Domain 3.0 Understanding the Adobe Dreamweaver Interface

Domain 4.0 Adding Content by Using Dreamweaver

Domain 5.0 Organizing Content by Using Dreamweaver

Domain 6.0 Evaluating and Maintaining a Site by Using Dreamweaver

Page 23: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

DOMAIN 1 – SETTING PROJECT REQUIREMENTS

1.1         Identify the purpose, audience and audience needs for a website.

1.2          Identify web page content that is relevant to the website purpose and appropriate for the target audience.

1.3          Demonstrate knowledge of standard copyright rules (related terms, obtaining permissions and citing copyrighted material).

1.4          Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments.

1.5          Make website development decisions based on your analysis and interpretation of design specifications.1.6          Understand project management tasks and responsibilities.

VIDEO - https://www.youtube.com/watch?v=aeTaahRrX08

Page 24: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

DOMAIN 2 – PLANNING SITE DESIGN AND PAGE LAYOUT2.1  Demonstrate general and Dreamweaver specific knowledge of best

practices for designing a website, such as maintaining consistency, separating content from design, using standard fonts, and using a visualhierarchy.

2.2          Produce website designs that work equally well on various operating systems, browser versions / configurations and devices.

2.3          Demonstrate knowledge of page layout design concepts and principles.

2.4          Identify basic principles of website usability, readability, and accessibility.

2.5          Demonstrate knowledge of flowcharts, storyboards, wireframes and designcomps to create web pages and a site map (site index) that maintain theplanned website hierarchy.

2.6          Communicate with others (such as peers and clients) about design plans

VIDEO : https://www.youtube.com/watch?v=p7UJi_FmjLY

VIDEO : https://www.youtube.com/watch?v=nhUJG-9Rg9c

Page 25: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

DOMAIN 3 – UNDERSTAND THE DREAMWEAVER INTERFACE3.1          Identify elements of the Dreamweaver interface.

3.2          Use the Insert panel.

3.3          Use the Property Inspector.

3.4          Use the Assets panel.

3.5          Use the Files panel.

3.6          Customize the workspace.

Page 26: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

DOMAIN 4 –  ADDING CONTENT WITH DREAMWEAVER4.1          Demonstrate knowledge of Hypertext Mark-up Language.

4.2          Define a Dreamweaver site.

4.3          Create, title, name, and save a web page.

4.4          Add text to a web page.

4.5          Insert images and apply alternative text on a web page.

4.6          Link web content using hyperlinks, email links, and named anchors.

4.7          Include video and sound in a web page.

4.8          Include animation and interactivity in a web page.

4.9          Insert navigation bars, rollover images, and buttons created in a drawing program on a web page.

4.10        Import tabular data to a web page.

4.11        Import and display a Microsoft Word or Excel document to a web page.

4.12        Create forms.

Page 27: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

DOMAIN 5 –  ORGANIZING CONTENT WITH DREAMWEAVER5.1          Set and modify document properties.

5.2          Organize web page layout with relative and absolutely-positioned div tags and CSS styles.

5.3          Modify text and text properties.

5.4          Modify images and 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, and build ordered and unordered lists.

5.7          Add head content to make a web page visible to search engines.

5.8          Use CSS to implement a re-usable design

Page 28: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

DOMAIN 6 –  EVALUATING AND MAINTAINING A SITE6.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, and files for a site.

6.5          Publish and update site files to a remote server.

Page 29: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 1

WHO ARE YOUR CLIENTS? WHAT IS YOUR IDENTITY?

 

Before you can create a website, you have to know who you are, what you do andwhat “image” or “brand” you want to present to the public via your website.

This is an essential first step to defining your online identity.

 

WHAT ARE YOUR BRAND ATTRIBUTES?

 

Brand attributes are the characteristics that highlight the “personality” and visualaspects of your brand. 

Page 30: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 1

DECIDING ON A BRAND NAME

 

A great brand name is one of the most powerful forces in making your voice heard.

 

When considering a domain name you need a succinct, memorable website address to make it easier for your users to find you. For small businesses, generally speaking, it is a good idea that the domain name should give some indication of what the business does.

Here are some tips …

Page 31: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 1

SOME TIPS RE YOUR DOMAIN NAME :

 

For UK based websites, try and stick with “.co.uk or .com.” The jury is out on whether any of the newly released batches of domain names work as well.

Find a domain name with only one possible spelling and commercial appeal. Your initials may be M&S but consider the confusion this is likely to cause. Generally avoid initials

Avoid hyphens and slang.

The name should be easy to type and understand – Use the radio test: i.e. if you gave our your URL it on the radio, would you have to S.P.E.L.L. it out.

It should be “brand-able”, copyrightable and unique and lend itself to a great logo. –

Consider the fact that on X-Factor ALL the groups had to get new names for this very reason.

Page 32: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 2

WHAT IS THE PURPOSE OF OUR WEBSITE?

WHAT SORT OF EXPERIENCE DO YOU WANT YOUR VISITORS TO HAVE?

Perhaps you want visitors to view your sketches in a digital gallery, or read about your travels in a blog. Maybe you want them to buy your homemade cupcakes from an online shop, or subscribe to your weekly musings on philosophy. You might want to create a space where other professionals in your niche can collaborate or you may simply want visitors to find you and your contact details easily. 

Websites are much more than a collection of text, images, video and other media. They are your online identity and shop window, conveying messages and delivering content, selling your ideas, products, and services and connecting you to people all over the globe. You need to deliver a phenomenal , unique experience as far as possible

It is far better to sit down and thoroughly work out what you want to achieve in advance, rather than try to bolt on additional functionality or SEO when the site is finished

Page 33: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 2

WHAT IS THE PURPOSE OF OUR WEBSITE?

WHAT SORT OF EXPERIENCE DO YOU WANT YOUR VISITORS TO HAVE?

Whenever possible these days you should have a responsive site. This is one where content morphs to fit the device on which it is being viewed.

A bespoke responsive Dreamweaver site will take at least twice as long to build and should cost twice as much. Therefore consider using a responsive Dreamweaver template or use WordPress or Joomla instead.

Adding many interactive elements to the site again lengthens the design process and affects the budget, accordingly. So consider this at the very start.

Page 34: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

HOW DO YOU WANT TO PRESENT YOURSELF?

The design of the website should be in keeping with the brand attributes.  

If you run a serious and established company, the design should reflect that. Likewise, a website aimed at children would be bold and colourful and designed accordingly.

There should be a definite brand consistency throughout your site and associated social media. It should also be reflected in all other traditional marketing channels such as your stationery, business cards, social media, portfolio etc

Here are some examples from my portfolio …. Serious first …

Page 35: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

HOW DO YOU WANT TO PRESENT YOURSELF? – CORPORATE / SERIOUS / PROFESSIONAL

Page 36: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

HOW DO YOU WANT TO PRESENT YOURSELF? – COLOURFUL CHILDREN’S WEBSITE

Page 37: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

HOW DO YOU WANT TO PRESENT YOURSELF? – A VERY EXPENSIVE BESPOKE CARPENTER

Page 38: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

HOW DO YOU WANT TO PRESENT YOURSELF? – A FRIENDLY WELCOMING CAFÉ WITH GREAT FOOD

Page 39: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

BRANDING – KEEPING ALL YOUR CHANNELS THE SAME - WEBSITE

Page 40: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

BRANDING – KEEPING ALL YOUR CHANNELS THE SAME - TWITTER

Page 41: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 3

BRANDING – KEEPING ALL YOUR CHANNELS THE SAME - FACEBOOK

Page 42: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 4

WHAT IS YOUR CONTENT?

What is the most important aspect of what you do?  When someone visits your site; it should be immediately clear what you are offering them. You have less than 8 seconds to make a favorable impression before visitors will give up and leave.

Get to the point fast and make sure you have a clear “Call to Action” indicating what route you wish the visitor to take next … “Click here for a quote”, “Join our mailing list now” etc

 

Are you selling products or services? Are you connecting people or presenting information? Your content should immediately reflect that and be written in Wii FM – What’s in it for me?

 

Content can be presented in an infinite number of ways: articles, blog posts, photos, slideshows, animations and videos- it’s up to you to decide how to present your content and what is most important !!!

Page 43: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5

HOW ARE YOU GOING TO ORGANIZE THE CONTENT?

Once you decide on your content, you must find a logical way of organizing it.

 

SITEMAPS AND WIREFRAMES

The main difference to grasp between sitemaps and wireframes is that the former covers the entire site and the latter, individual pages.

You could divide your content into categories for easy navigation and then create a sitemap. This is an overview of the hierarchy of pages within a website.

Whilst they can be organized in numerous ways, most use a family tree structure, arranging pages by topic. This gives you and your visitors a clear overall picture of how the site is organized and concisely defines all the resources the website has to offer.

Page 44: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - SITEMAP

HOW ARE YOU GOING TO ORGANIZE THE CONTENT ? - SITEMAP.

Page 45: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - SITEMAP

Page 46: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - SITEMAP

Page 47: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - SITEMAP

Page 48: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - SITEMAP

Page 49: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - WIREFRAMESWIREFRAMES

 Wireframes are basically just a visual guide that represents the skeletal framework of a website.

The main focus at this point lies in functionality, behavior and priority of content, rather than representing a final version of the page content and graphics.

In other words it focuses on what a screen does, not what it looks like.

Does it contain all the necessary interface elements like buttons, links and navigational systems like menus?

Functionality, behavior and priority of content are the keys here, not looks.

Page 50: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 5 - WIREFRAMES

WIREFRAMES

 

Page 52: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 6

PROTOTYPES AND MOCKUPS

 A prototype is a 'primitive' working version of a website. It is formed by linking the all the simple wireframe pages together in a structure determined by the sitemap.

It can be used to test the links, the navigation, search fields and other interface elements to make sure that they work perfectly together.

In practice however, most clients, by this stage will want to see a mockup of what the site (or at least the home page) might look like.

 

Using mockups is an iterative process, where clients are shown a selection of ideas drawn up by the graphic artist or web designer on which they then express their preferences.

Page 53: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 6

 USABILITY - OR - USER EXPERIENCE TESTING (UX)

Testing a prototype for usability will help identify any problems with the site’s design. It often highlights content that may cause a confusing or negative visitor experience. In a nutshell, it allows web designers and developers to evaluate the extent to which the visitor and website owner can meet his or her goals.

 

Usability is best evaluated by testing the website on as broad a range of users in the target group as possible.

 

Ask visitors to “try it out and observe how they interact with it” – Don’t suggest that they “click here” or “look at this”…

Give them a task, such as “Find the price of a certain product or service”

Page 54: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 6

USABILITY OR USER EXPERIENCE TESTING (UX)

Say nothing - Simply watch, observe, time them and take good notes.

Improving usability is an iterative process. That means you should address any issues that are clearly causing problems, and then re-test later using your next guinea pig.

Testing should not be confined to the prototype phase. The best website designs are developed by frequently testing at all stages until the final sign-off to ensure that the site works as well as possible.

 

Page 55: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 6

USABILITY OR USER EXPERIENCE TESTING (UX) - KAIZEN

Kaizen is the practice of continuous improvement. 

Kaizen was originally introduced to the West by Masaaki Imai in his book Kaizen: The Key to Japan's Competitive Success in 1986.

Today Kaizen is recognized worldwide as an important pillar of an organization's long-term competitive strategy.

iTunes and similar programs are clear Kaizen devotees with new versions brought out regularly.

However, sometimes what they consider to be an improvement is not regarded in the same light by users and they have to backtrack. 

Page 56: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 7

ADDING INTERACTIVITY – MAKING A SITE INTERACTIVE?What kind of website you would like to visit? - A static, dull website, or a dynamic, captivating one? Interactivity is about enabling visitors to better engage both with the content on our website and / or other visitors.

Interactivity makes websites unique and memorable and adds visual interest to pages. It encourages users to spend more time on a website (DWELL TIME) and both reduces the BOUNCE RATE and draws users to visit the site again and again

Interactive websites are a giant leap forward from the static web user interfaces seen in the early days of the internet. In order to meet user‘s expectations, websites today need a good degree of interactivity which perfectly compliments the content.

Page 57: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 7

INTERACTIVE ELEMENTS TO CONSIDER MAY INCLUDE …

Rollover Buttons and Images .

Dropdown Menus -

Image Sliders

Video and Audio

Clickable YouTube videos with “ANNOTATIONS” and “CARDS”

Facebook & Twitter Feeds – RSS Feeds

Forums / Chat Rooms / Chat Assistants

Surveys such as Survey Monkey 

Sites containing some or all of these elements will take a developer much longer to design, code and most importantly - test. Therefore they need to be considered quite early on in the overall process, ideally during the quotation stage!

Page 58: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 8

HOW DOES OUR SITE LOOK IN A RANGE OF BROWSERS AND DEVICES?

 

Once all the images, videos, logos and interactive elements are in place, the next stage is to ensure the site works properly and looks good across a range of browsers and devices. The most popular browsers are Firefox, Internet Explorer, Safari and Google Chrome etc.

Each browser has its own capabilities and limitations in terms of its functions and how it displays pages. This means that the same website will look different in each browser. Making sure your website works across the board on multiple browsers (and indeed versions of the same browser) can be challenging.

Compromises will certainly have to be made

Page 59: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 8

HOW DOES YOUR SITE LOOK IN A RANGE OF BROWSERS AND DEVICES?

You can use Dreamweaver’s range of built in testing features and emulators but there is no substitute for manually testing the site yourself on a variety of devices and screen sizes … iPhone, iPad and desktops with various screen sizes.

If the client has requested a bespoke “responsive site” with a “fluid grid” Dreamweaver design, the content automatically “morphs” to fit the device on which it is being viewed. This fluid grid technology in Dreamweaver is pretty complex and the design and testing phase is likely to take much longer.

For bespoke sites you should probably double your fee to the client. An alternative would be to use a responsive Dreamweaver template or recommend a responsive Wordpress or Joomla Content Management System site etc

These challenges need to be discussed at the very early stages of the process long before a final quote is agreed.

Page 60: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 8

HOW DOES YOUR SITE LOOK IN A RANGE OF BROWSERS AND DEVICES?

Here is a taster of the neat way Dreamweaver handles this issue ….

https://www.youtube.com/watch?v=oqrHa5FLKgE 

Page 61: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 9

UPLOADING THE SITE

Finally, you’ve created your site, tested and re-tested it.

You have chosen a domain name, bought and registered it.

You have secured a web host;

the next piece of the puzzle is to upload your website to a remote server using FTP or File Transfer Protocol.

Dreamweaver has a built in function for uploading

Page 62: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 10

SEO, GOOGLE SEARCH CONSOLE; GOOGLE ANALYTICS & AN XML SITEMAP 

To monitor how well or poorly your site is performing you should install the tracker code for both Google Analytics and Google Search Console on every single page. This monitors how many visitors come to the site, how long they stay on each page and where they came from. By inspecting these analytics, you will probably notice that some pages are visited a lot and others not at all.To ensure that Google has indexed each and every page of your site, you must submit a file to them in the form of the XML sitemap we saw earlierSubmission is via your Google Search Console.

This sitemap tells Google how many pages in total there are and how they all link to one another. It will make sure that every single page appears and every single image appears in the Google index. 

Page 63: ADOBE CERTIFIED ASSOCIATE IN WEB AUTHORING USING ADOBE DREAMWEAVER CS6

PLANNING A WEBSITE – STEP 10

SEO, GOOGLE SEARCH CONSOLE; GOOGLE ANALYTICS & AN XML SITEMAP 

Even though your web pages may all appear in Google index, there is no guarantee that they will appear in the Google search results for your chosen niche keywords. So make sure also that each page has a “meta title” and “meta description” which includes the words for which you wish to be found. Avoid keyword stuffing in your narrative. Mention each keyword once, or at the very most twice. Mention the keywords again in the headings, sub-headings and paragraph text. Unfortunately, even if you have followed this advice to the letter, unless you only want to be found for your own or your company name or something quite unusual, there is still no guarantee that you will be found in the search engines at all. Your site will need to be optimized. S.E.O. is a long laborious process which needs to be quoted for separately, on a page by page basis. Unfortunately, all but the most rudimentary elements of SEO i.e. those which have just been mentioned, cannot be incorporated into the site until the webpage in question is not only complete but also published and viewable on the web.

Your client needs to be aware of this from the outset.