You have selected  the  Adobe  for the  Adobe Certified Associate (ACA)  course in  Adobe Certified Associate in Web Authoring Using Adobe Dreamweaver CS 6/ CC  

Topics

Demonstrate knowledge of flowcharts, storyboards, wireframes, and design comps to create web pages and a site map (site index) that maintain the planned website hierarchy.

Flowcharts, storyboards and wireframes

Storyboarding generally refers to the process of drawing rough sketches and diagramming navigation between those pages. The combination of rough sketches of pages (often referred to as wireframes) and navigation flowcharts (often referred to as site maps) lays the basis for building a site that looks the way it’s supposed to look and works the way it’s supposed to work.

There are important stages in the design process you should complete before writing a single line of HTML or CSS. If you begin designing visuals or building pages before you are prepared, you may end up discarding your original work. By using flowcharts, storyboards, and wireframes you can explore different design options and functionality quickly (and therefore less costly). Whether or not you use all three models generally depends on the size of the project. Larger projects that incorporate complicated elements, such as connection to a database, or use multiple features, will benefit from using all three models.

Website architecture refers to planning how all the elements of a website — content, usability (presenting content in a way that works on the web), technical planning (figuring out how the site is going to be built), and aesthetics (such as page design, artwork, color schemes, fonts, and other design elements) — will fit together.

 If you think about website architecture as an analogy to what an architect does in designing a building, a wireframe of a web page is similar to a blueprint, and a set of wireframes is analogous to a set of blueprints that sketch how a whole building will look.

Wireframes are rough sketches of how a page will look, meaning they usually do not include developed artwork, typography, and colors. Sometimes wireframes are created using Photoshop, Illustrator, or Fireworks. Whereas wireframes usually demonstrate links to and from pages, flowcharts or site maps focus on a graphical depiction of a site’s navigation arteries.

Flowcharts

Flowcharts provide a visual overview of how your website is organized. A flowchart does not attempt to document every single page in a site, it is more concerned with illustrating the primary navigation within a site as well as the relationships of pages. The term primary navigation relates to the hierarchy of a site. Hierarchy can be defined as the level of importance you assign to specific pages. For example, if you define the home page as the most important page, what is the second most important page? Or are there multiple pages with equal importance? This process of defining the hierarchy of pages as well the navigation of a site is often referred to as information architecture.

Flowcharts quickly and easily communicate the structure of a site to clients or other members on your team. Visually, you create a flowchart by creating boxes that represent pages (or collections of pages) and visually linking them together with lines. Depending on the size of your project, a flowchart could be as simple as a sketch on a notepad, or created in a program such as Visio or even Adobe Illustrator or InDesign.

Storyboards

Flowcharts abstractly illustrate a site’s hierarchy and navigation, but say nothing about the content on the pages. Storyboards help you focus on the content on a page as well as provide a way to fine-tune your navigation and site structure. A storyboard consists of multiple pages based on those defined in the flowchart. Each storyboard is then filled out with navigation, a list of related links, a functional description of the page, images, text and some notes on content for that page. Although the storyboard is focusing on content it is not focused on design or page layout, this is traditionally the role of the wireframe discussed next.

A storyboard could be created by hand as a sketch or diagram, but is more often done digitally. Many people will choose to use Dreamweaver to create very basic HTML pages that function as storyboards although you could also use other applications such as Illustrator or InDesign.

Wireframes

The goal of a wireframe is to take you one step closer to your HTML and CSS designs but without committing to design decisions such as images, colors, and fonts. Wireframes are typically created in black and white or shades of gray, using placeholders. At this stage, organization of the content and the features of the site are still a priority, the goal is to allow time for feedback from clients or other members involved with the project. It is still easy to add or remove features to a site at this stage and much less expensive than when the site is in the process of being built!

Programs such as Adobe Fireworks allow you to quickly build interactive wireframes using a set of standard text and image placeholders as well as other common elements such as form controls, buttons, or video players.

Testing your website’s hierarchy

At the wireframe stage, it is possible that your original flowchart needs to be updated due to changes you discovered along the way. It is also possible that you may have strayed from your original hierarchy, perhaps by dropping or modifying elements in your navigation bar or other changes. You can always compare the flowchart to the wireframe and make sure pages are reflected but another way to determine if the planned hierarchy is being followed is by adding an element of interactivity. For example, by making working links in your navigation menus, you can confirm that your site navigation is logical and that a user can reach all pages from any other page or that no page becomes "orphaned." An orphaned page is a document that exists in your website but has no incoming links. At any point in the site-building process Dreamweaver can check for orphan pages by checking a site for broken links.

How websites work

Before embarking on the task of building web pages (and in turn, a website), it’s a good idea to know the basics of how websites work, how your users view them, and what you need to know to make sure your website functions and looks its best. A simple flow chart What happens when you type in a website address? Most people don’t even think about it— they just type in a URL (Uniform Resource Locator) and the website appears. They most likely don’t realize how many things are going on behind the scenes to make sure that pages gets delivered to their computer so that they can do their shopping, check their e-mail, or research a project. 

When you type a URL or IP address in the address bar of a web browser, you are connecting to a remote computer (called a server), and downloading the documents, images, and resources necessary to render the pages you will view while on the site. Web pages aren’t delivered as a finished product; your web browser is responsible for reconstructing and formatting the pages based on the HTML code included within the pages. HTML (Hypertext Markup Language) is a simple, tag-based language that instructs your browser how and where to insert and format pictures, text, and media files. Web pages are written in HTML, and Dreamweaver builds the HTML as you construct your page in the Design view.

An Internet Service Provider (ISP) enables you to connect to the Internet. Some wellknown ISPs include Verizon, Comcast, and EarthLink. You view web pages over an Internet connection using a browser, such as Internet Explorer, Firefox, or Safari. A browser can decipher and display web pages and their content, including images, text, and video.

Domain names and IP addresses

When you type in a website address, you usually enter the website’s domain name (such as Wiley.com). The website owner purchased this domain name and uses it to mask an IP address, which is a numerical address used to locate and dial up the pages and files associated with a specific website.

So how does the Web know what domains match up with what IP address, and in turn, with what websites? It uses a Domain Name Service (DNS) server, which makes connections between domain names and IP addresses.