In this assignment, you will create a frameset. The content for the site will include information about some basic color schemes.

A frame is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browser window. Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content

A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame. The frameset file itself doesn't’t contain HTML content that displays in a browser, except in the noframes section; the frameset file simply provides information to the browser about how a set of frames should look and what documents should appear in them.

California Visual Arts Standards

  • 2.3 Develop and refine skill in the manipulation of digital imagery (either still or video).
  • 2.5 Create an expressive composition, focusing on dominance and subordination.

National Educational Technology Standards

  1. Creativity and Innovation: Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology.

 

Frameset

There are two ways to create a frameset in Dreamweaver: You can select from several predefined framesets or you can design it yourself.

Choosing a predefined frameset sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s Design view.

Content

You will also need Photoshop to create the content for your frameset. For each of the four color schemes listed under the resources tab, you will need to create two collage compositions. These compositions may use found images but ultimately the focus should be the colors.

I recommend using a 4" by 4" canvas with a resolution of 200 ppi.

 

Accessibility Issues

WebAIM - article on how to make frames easier to access for visually impaired.

Composition

The principles listed below can give you ideas on how to arrange the elements in an interesting and effective way.

Emphasis: An area that is special, has lines, edges and shapes that seem to meet in an area, or looks like the angles of the shapes lead your eye to that area.
Rhythm: The rhythm is achieved by using a good flow of angles that lead nicely from one to another without having a shape seem to break the movement between shapes.
Balance: Look for a balance that is not symmetrical but more of a counter balance to the shapes you are using. Such as circles, make sure there are circles in all quadrants of the format but there can be more in one area over another.
Variety: Now when you start to select the shapes and lines you like leave out some and add others to create an interesting design that has large and small areas. Make sure there are big differences in their sizes.
Unity: A unity of elements is important for the whole composition is achieving a look of complete Harmony. Areas that do not seem to belong will tend to make it look choppy and not interesting.

Also, keep in mind that Good Composition:

  • Helps to quickly and easily communicate your message.
  • Maps out a visual path to follow, what element comes first, what comes second, etc…
  • Grabs attention, pulls the viewer in.

Color Schemes

Monochromatic - limited to variations of one hue, a hue with its tints and/or shades.

monochromatic

Triadic - uses three equally spaced colors on the color wheel.

triadic

Complement- any complementary pair. Two colors opposite each other on the color wheel. Add black and white for value changes.

complimentary

Analogous- Any three to five colors located next to each other on the color wheel, plus black and white for value changes and tones of gray.

analogous

Colorwheel example.

colorwheel