Week 03

Week 03 – Topics

Short Quiz http://www.surveymonkey.com/s/566TWRZ
Visual Design: Layout and the Grid, Navigation
Introduction to Dreamweaver
Best of the Web
Design assignment: Design a landing page and sub-navigation
Technical lab: 2 and 3 Column structures

Assignments

1) Lab assignment: Using Dreamweaver, create either a 2-column or 3-column structure web page based on the website re-design assignment due this week. Use the HTML code for the 2-column and 3-column structures that you’ve saved in your “web_kit” folder to start the structure. Use Dreamweaver to add the images, links, and to create the CSS file. Until we talk about the CSS box model and how to position inner divs, you will most likely have problems positioning some of your inner content. Don’t worry about making the design perfect at this point, we will continue to work with these files next week. You can modify your design and build a simplified version of your re-design. The purpose of this assignment is to practice building a 2-column or 3-column structure and to become familiar with the Dreamweaver interface. I also want you to understand how to create a CSS file in Dreamweaver and to attach it to your HTML file.

2) Continue working on your Website re-design: Based on my feedback, continue working on the  re-design of the home page and also begin designing a landing page for the site. A landing page is the main page for a particular section of the site. The landing page should include sub-navigation. Adding sub-navigation (and a navigational system in general), will add another level of challenge to designing the website. Remember that a constraint for this project is your design must be in the layout of either a 2-column or 3-column structure. Please post the process you went through, why you made the design choices you did for this project and post to your process blog. Please build your design comp in Photoshop following the specifications below:

  • Your file should be RGB and set at 72 dpi
  • The dimensions of your file should be 990 pixels wide (and remember “the fold” is 560 pixels high).
  • Be sure to put your elements on separate layers and to properly label your layers.

3) Project due before next week: Visiting the websites given in the “Blogs” section of the Resources page of this site, or any other web design sites you’ve found, find 3 articles that discuss designing or building navigation for a website. Post a link to these articles on your class blog and include a 5-6 sentence summary of the article. What does the article detail, how is it helpful to your understanding of navigation for the Web, and what did you learn by reading it? Also, find 3 websites with interesting navigation– be sure that the sites are built in HTML and not Flash. I want you to specifically find interesting navigational systems created in HTML. Be sure to also post these to your blog.

4) Reading for next week: Stylin’ with CSS: Chapter 4: “Positioning Elements” (pg 100-132)

Faux column

What is a faux column and when do you use it?

Take a look at this example of a 2-column structure.

Problem: Note that the left-hand column height matches the height of the content. In your design, what if the left-hand column background color needed to extend to the footer? (Which is often the case.) How do you create this layout?

Solution: Adding a graphic to the background of the layout that is the same color and width of the columns can create the illusion that the column extends down the page.

Note the following:

  • The image is added to the background of the wrapper.
  • You need to specify your navigation and content <divs> in pixels.
  • You can change the background color or your <divs> to match your image.

Here is the image I named faux_col.gif and used in the demonstration. (Notice in the CSS, I set my navigation <div> to 290px with background color #ffcc00, and the content div to 700px. with background color #ff6633.)

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background:url("images/faux_col.gif") repeat-y;
}
CSS example
body { font-size: 62.5%;
}

#wrapper {
 width:990px;
 margin-left:auto;
 margin-right:auto;
 background:url("images/faux_col.gif") repeat-y;
}

#header {
 height: 150px;
 background-color: #666;
}

#navigation {
 width:290px;
 float:left;
 background-color: #ffcc00;
}

#content  {
 width:700px;
 float:left;
 top:0px;
 background-color: #ff6633;
}

#footer {
 clear:both;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}

Exercise 1: Using the HTML code from the 2-column layout from last week, create a 2-column layout with a column that extends down to the bottom of the page using a graphic.

3-column Faux layout

We learned this last week, but let’s review: To create 3-column layouts, we need to add even more structure to our HTML file.

<html>
<head>
   <title></title>
</head>

<body>

  <div id="wrapper">

    <div id="header"></div>

          <div id="threecolwrap"><!--encloses the three columns-->

               <div id="twocolwrap"><!-- encloses the left and center columns-->

               <div id="navigation"></div>

               <div id="content"></div>

               </div><!--end of twocolwrap-->

         <div id="right_side"></div>

         </div><!--end of threecolwrap div-->

    <div id="footer"></div>

  </div>
</body>

</html>
3-column layout details

Note: I’ve added 3 new divs to the structure:

<div id=”threecolwrap”></div>
Again, It doesn’t matter which name you choose but notice that all the column related divs (in this case, “twocolwrap,” “navigation,” “content” and “right_side” live inside this <div>. This is very important to understand, make sure your closing <div> tag for this div is at the end of the three columns but before the <div> tag for the footer.

<div id=”twocolwrap”></div>
This <div> creates a wrapper for the two columns. Notice that the “navigation” and “content” divs live inside of this div.

<div id=”right_side”></div>
This <div> creates a rught-side area (this is the 3rd column) running down the right-side of the page. Notice this div lives outside the “twocolwrap” div but within the “threecolwrap.”

HTML code for 3-column layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>3-column web page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

 <div id="header">
 <h1>This is the header</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

<div id="threecolwrap">
<!--encloses the three columns-->

<div id="twocolwrap">
 <!-- encloses the left and center columns-->

 <div id="navigation">
 <h1>This is the navigation </h1>
 </div>

 <div id="content">
 <h1>This is the content</h1>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>

 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod
 tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam,
 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.</p>
 </div>

</div>
 <!--end of twocolwrap-->

 <div id="right_side">
 <h1>This is the right side content</h1>
</div>

</div>
<!--end of threecolwrap div-->

<div id="footer">

<h1>This is the footer</h1>
</div>

</div>
</body>
</html>
CSS for 3-column layout

body { font-size: 62.5%; /* 1em = 16px therefore 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <div> tags of a 3-column web page.

body {
 font-size: 62.5%;
 margin-top:25px;
}

* {margin:0; padding:0;} /* this tag is added globally*/

#wrapper {
 min-width:760px; max-width:990px;
 margin-left:auto;
 margin-right:auto;
}

#header {
 width:auto;
 height: 150px;
 background-color: #666;
}

#threecolwrap {
 float:left;
 width:100%;
 background-color: #ffffcc;
 }

#twocolwrap {
 float:left;
 width:100%;
 display:inline; /* stops IE doubling  margin on float*/
 margin-right:-170px; /* CWS - neg margin move */
 }

#navigation {
 width:150px;
 float:left;
 background-color: #999;
 display:inline; /* stops IE doubling margin on float*/
}

#content  {
 width:auto;
 top:0px;
 margin-left:150px;
 margin-right:170px;
 height:1%;
 background-color: #CCC;
}

#right_side{
 float:left;
 width:170px;
 display:inline; /* stops IE doubling  margin on float*/
 background-color: #999;
 }

#footer {
 clear:both;
 width:100%;
 background-color: #666;
}

h1 {
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.6em;
 font-weight:bold;
 letter-spacing:1px;
 padding-left: 20px;
}

p {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1.2em;
 line-height:1.7em;
 padding-left: 20px;
}

Exercise 2: Create a HTML file and CSS file for a 3-column layout with columns that extends down to the bottom of the page. Remember, this is called a “faux column” and is done using a graphic.

Navigation

Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

So how do you start when thinking about designing a navigational system?

There are three basic questions a well-designed navigational system must answer.
Navigation should answer these questions:

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the  Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?
How do I go forward?
How do I get back?

In addition to answering the basic questions outlined above, a well-designed navigational system must also serve the goals of the site. Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?
How do I search the site?
How do I contact customer service?
How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

As a designer you must ask yourself:  What does the user who visits the site want?

Examples of what a user may want:
To find information
To publish something
To purchase something
To interact with someone
To read what someone else thinks about something

As a designer you must ask yourself:  What does stakeholder (client)  of the site want? (And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (stakeholder) may want:
To share information
To make money
To get feedback
To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Another way to think about navigation is the discussion from our readings for this week

Wayfinding has four core components:

  1. Orientation: Where am I am right now?
  2. Route decisions: Can I find the way to where I want to go?
  3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
  4. Closure: Can I recognize that I have arrived in the right place?

Consistency is the golden rule of interface design and wayfinding, but there is a paradox at the heart of consistency: if everything looks the same, there are no edges. How can you tell where you are or when you have moved from one space to another? A well-designed site navigation system is built on a consistent page grid, terminology, and navigation links, but it also incorporates the visual flexibility to create identifiable regions and edges within the larger space.

Navigation design “rules”

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

Consistency

People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.

You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

  • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
  • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

Note: Some people incorrectly create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

7 +/- 2 rule
  • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of  navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:
Group Navigation

If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

  • Proximity. Place similar navigational elements together on the page, separated from other groups.
  • Style. Give each group of navigational elements its own visual design.
Keep it simple

Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

  • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
  • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.
Where are we?

Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the hierarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

Next versus numbered pages. When the user can navigate to additional pages you generally  want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

Multiple Navigation

There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

  • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
  • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
  • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accommodate both techniques, and again, sometimes more than one navigation system is needed.
  • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.

Hide versus show sub-nav

  • Use sub-headings as part of the primary navigation
  • Rollovers or dropdown menus to reveal sub-navigation

Depending on the amount of content and number of subpages underneath the main sections of the web site, the navigation design should reveal the subnavigation in some way.

Different types of navigational graphics and indicators
Here are some of the graphics and indicators a designer can use to create navigation. Some of the options are:

HTML
CSS Rollover
Dropdown Menu
Breadcrumbing
Image maps

Other Issues that impact the way you design navigation
  • Site goals: The goals of the site will greatly affect design of the site and the navigational system. An e-commerce site will have a different type of navigation than a site for a non-profit institution.
  • Information Architecture: You wouldn’t build a house without plans, you cannot build a website without them either. And until you have the plan (commonly referred to as the “sitemap”) you cannot begin designing your site. The sitemap functions as the “blueprint” for the structure of your site.
  • Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
  • Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
  • Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”

Suggested Reading:
Where am I?
http://www.alistapart.com/articles/whereami
Designing Web Graphics 4 by Lynda Weinman: Navigation

Interface Design Conventions

Figure 4.17 from our readings — A canonical page layout. Not every page includes every element shown here.


Web Critiques


One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing other’s work you begin to understand more fully what makes a web site effective and well-designed. Different types of web sites have different goals. What make a good web site?

What makes a good site?

  • Information design – Goals, audience, requirements, and organization of content
  • Interaction design – Functionality, navigation, style of interaction
  • Media design – Visual layout, integration of text, audio, graphics, animation, video
  • Game design – Narrative, perspectives, paths, game play, goals, themes, characters
  • Business design – Economic and organizational benefits and operations
  • Technical design – Capabilities, integration, technologies, performance, security

General Sites to study:


Seven Criteria for discussion.
These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

  • Look & feel / Attitude of site
    Does the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of color
    Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layout
    Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • Typography
    Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • Content
    Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experience
    Is the site easy to navigate? Is it east to find content on the site?
  • Navigation
    Is the navigation well-organized. Is the navigation consistent from page to page?

Other Web sites to critique:

http://www.interbrand.com/
http://www.kleinfelder.com/
http://www.o2communications.com/index.html
http://www.design-works.com/

Design-related Web sites to critique:

Dreamweaver introduction

Dreamweaver is an HTML editor and an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application.

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop, Flash, or other applications to create images, animations, sounds, etc. Dreamweaver does not create the page for you — you need to understand the basics of page structure and layout in order to understand how to best use Dreamweaver. When it comes to building a web page, Dreamweaver is not smarter than you. Similar to the application InDesign which does not design a brochure for you, Dreamweaver does not automatically build a website for you. Both of these applications are only tools. You have to understand how to build a website in order to best use Dreamweaver.

Creating a new web page in Dreamweaver
  • Select FILE>NEW
  • Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
  • Give the file a name. This name should be all lower case, and have no spaces between words.
  • SAVE the file
  • There are two windows to use when creating web pages:
    Document
    . This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
    Code Inspector
    . This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).
Create a page with a CSS layout in Dreamweaver

In the examples above, we didn’t use Dreamweaver to create the 2-column and 3-column layouts. Dreamweaver CS4 does have predesigned CSS layouts for you to use. Below are instructions on how to use the predesigned CSS layouts in Dreamweaver CS4.

1. Select File > New.
2. In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3. For Page Type, select the kind of page you want to create.

Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, PHP, and so on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS page layouts.

4. For Layout, select the CSS layout you want to use. You can choose from over 30 different layouts. The Preview window shows the layout and gives a brief description of the selected layout.

The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.
Elastic Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
Hybrid Columns are a combination of any of the previous three options. For example, the two-column hybrid, right sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.

5. Select a document type from the DocType pop‑up menu.
6. Select a location for the layout’s CSS from the Layout CSS in pop‑up menu.
Add To Head: Adds CSS for the layout to the head of the page you’re creating.
Create New File: Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page you’re creating.
Link To Existing File: Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.

7. Do one of the following:

  • If you selected Add to Head from the Layout CSS in pop‑up menu (the default option), click Create.
  • If you selected Create New File from the Layout CSS pop‑up menu, click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box.
  • If you selected Link to Existing File from the Layout CSS in pop‑up menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. When you’re finished, click Create in the New Document dialog box.

Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.
When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML page you’re creating.
Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS.
(Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.

Previewing in the browser

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox).

Dreamweaver Windows

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

  • Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
  • Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
  • Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
  • Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).
The document toolbar

The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

document toolbar

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

  • Design View – where you see how the page will appear in a browser
  • Code and Design View – a split page view where you see the code at the top, and the design at the bottom
  • Code View – where you see only the code that describes the page

Web page weight

Recommended page weight: total size (html/images/flash) for a web page should be around 60-100K although we often visit web site like Amazon and Ebay where page size is often much larger.

Some typical download times under ideal conditions, which rarely happen:

Size of File 56Kbps Modem 256Kbps DSL 1500 Kbps Cable
20Kbyte 3.2 secs 0.6 secs < 1 sec
50Kbyte 8.0 secs 1.6 secs < 1 sec
100Kbyte 16.0 secs 3.1 secs 1 sec
1meg 160.0 secs 31.3 secs 6 sec

Note: Pew Internet Project 2009: Home broadband adoption stood at 63% of adult Americans as of April 2009, up from 55% in May, 2008.

CNET Bandwidth test

Checking page weight

You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.

Screen size design

Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!

The situation is more complicated than simply screen resolution:

  • Explorer and Safari have different amounts of space available for pages
  • Macs and PCs have different amounts of space available for pages
  • The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
  • If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:

  • In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
  • In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can designto 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

  • Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
  • Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
  • Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)
Previewing page sizes in Dreamweaver

You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.

If the dimensions you want to view aren’t available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size.

Non web-safe colors

The colors in the Dreamweaver color palette are all web safe colors. But you can get to other color palettes by clicking on the side arrow.

To use non web-safe colors, you can use the eye-dropper to select any color from anywhere on the screen. And you can select the color selector (the color wheel located to the left of the side arrow) and choose one of the millions and millions of non web-safe colors.

Text inspector

Text formatting in Dreamweaver is similar to the formatting available in a word processor. You select the text you wish to modify, and then apply a style to it. For example, to make a word bold, select the word, then click on the “B” button in the Property Inspector. Alternatively, you can select the text, and use the Text pull-down menu (e.g. Text>Style>Bold).

Text characteristics can be set by Dreamweaver, including bold, italic, color, size, font, and justification. In addition, Dreamweaver has a utility to check the spelling of the selected text or the entire document (TEXT>CHECK

SPELLING).

The text inspector behaves much like the toolbars in a word processor. Note that you can do the following:

  • Creating a heading with the Format pull-down
  • Set the font face
  • Set the font size
  • Set the font color
  • Make some text bold and italic
  • Change the justification to left, center, and right
  • Make a link to another web page
  • Create a list
  • Indent some text

That said, we will NOT style our text in this class using the text inspector but rather we will use Cascading Style Sheets (CSS). We will discuss the advantages of using CSS later in the semester.

Line Breaks: Note that when entering text, if you hit ENTER on the keyboard, a blank line will be inserted between paragraphs. This happens because Dreamweaver inserts a <p> tag at the beginning of the previous paragraph, and a </p> at the end. If you don’t want a blank line between paragraphs, the hold the SHIFT KEY down while you hit ENTER. This will insert a <br> at the end of the paragraph.

Inserting images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To copy an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

flowerflower.jpg flower.gif

Image: FreeDigitalPhotos.net

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
  • Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
  • Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the

lower right hand corner of the palette. Experiment with the following:

  • Change the height and width of the image
  • Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
  • Change the alignment so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the VSpace and Hspace to change the margin around an image when text if flowing around it
Insert Rollover

Now we’ll go over how to insert a rollover image into a page. This is important because many times your navigation will be built using rollover images. And finally, I show you a way to insert a “swap inage” into your web page. You may want to design your web site using this behavior. If so, the instructions below will be helpful.

Make the graphics for Insert Rollover example below.

Download: rollover.zip (18K)

The download contains two Photoshop files needed for creating the images used in the rollover and swap image exercises below.

Open these files in Photoshop, and save out the following files: rollover1.gif, rollover1_over.gif, rollover2.gif, and rollover2_over.gif. The files with the “_over” suffix are the highlight files that show when the cursor is over the graphic.

For the rollover1.psd file, you’ll need to copy the text layer and change it’s color for the highlight version. For both files, turn layers on and off as appropriate for the normal and highlight versions of each image. Use Photoshop’s FILE > SAVE FOR WEB function to create the images.

Create a rollover the easy way

  • Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
  • Click on the “Insert Rollover Image” icon in the objects palette
  • Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
  • Browse to the “Original Image” file. This is the image that is shown when the cursor is not over the graphic.
  • Browse to the “Rollover Image” file. This is the image that is shown when the cursor is over the graphic.
  • Normally, you check the “Preload Rollover Image” box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
  • Type in the alternate text associated with this graphic
  • Browse or type in the link you want associated with this graphic. If you don’t want to link anywhere, just put a “#” in this space.
Suggested Resources

Adobe Video: Inserting images
Adobe Video: Creating rollovers in Dreamweaver

Image maps

Image maps are links created inside of images.

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

  1. Click on the image
  2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
  3. Select a shape (rectangle, circle, or polygon) from the lower left
  4. Draw a shape with the drawing tool
  5. Dreamweaver will create a translucent shape for your hotspot
  6. Enter a URL or local web page file name in the Link section
  7. If you want a link to open in a new browser window, set the “Target” selection to “_blank”
  8. Set the “ALT” section to the desired alternate text
  9. Create additional hotspots by repeating steps 3-8
  10. When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.
Exercise

Download the imagemap.zip file.

Using the enclosed Photoshop file, complete the following:

  1. In Photoshop, crop the top header including the logo and navigation and optimize the image.
  2. In Photoshop, crop and optimize to save the center photos.
  3. In Dreamweaver, build the page using tables, use the “Image Map” properties in the Property Inspector for the logo, main navigation, and sub navigation.
  4. In Dreamweaver, add a nested table in the main body and add HTML text.
Tables
A cell an image with some text in the cell
cell cel

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

  • Number of rows
  • Number of columns
  • Width in Percent or Pixels
  • The width of the border (the beveled edge on the outer part of the table)
  • The cell padding (the text margin, left, right, top, bottom)
  • The cell spacing (the width of the cell walls)

Table properties

Table properties are accessible by selecting the whole table.

Table Cell properties

Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixelsIf the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.

Flowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.
Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.
Border size
The setting of the table border in pixels affects the width of the border around the edge of the table.
Cellspacing size
The setting of the table cellspacing affects the width of the border around each cell
Cellpadding size
The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom
Selecting a table
There are three ways to select the whole table.
  • click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
  • click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
  • click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.
Row and Column Span
Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.
This cell has a rowspan of two. This cell has a column span oftwo.
Changing the style of text in multiple cells
You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a <font> tag around the whole table–this will not change the style of the text inside the table.
Cell alignment — horizontal and vertical
The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.
The contents of a cell affects its size
Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.
Clear row heights or column widths
When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.
Convert table widths to pixels or percent
If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.
Nesting tables
You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.
This table is inside anothertable


Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Interactive Design 01