The last 2 remaining projects for the class are your:

1. final project
2. final exam

Here is the link to the final exam. Complete the final exam and upload to the “Dropbox” on smconline.org site by noon on Tuesday, June 16.  Again, please be sure to include your last name in the name of the file when you upload it to the Dropbox.

Final project: NO LATE PROJECT accepted (or incomplete grade given). The due date for the Final Project is noon on Tuesday, June 16. Please email me if you have any questions about the Final Project.

 While the final due date is June 16th, if you complete your final project early, you are welcome to upload your project to the class server before June 16th.

Below is the checklist for the Final project. Please be sure to cover all ten specifications in your final project. These are the objectives I will use to grade your projects.

Final Project checklist

Please let me know if you have any questions. 

Thanks so much and just wanted to say you have been a great class!

Best,
Jamie 

The class notes for this week are for your information only. You are not required to use any of the content below in your final project.   I do however feel it is important for you to have knowledge of both frames and forms. so I encourage you to read through the notes and read the pages I assigned from your textbook.

Frames

Displaying several html pages inside one browser window

Introduction

Frames offer a way to format a page so that there are several “window panes”, each with it’s own html content. Frames are similar to tables, except that the html content in each frame comes from a completely separate html file. You create a page with frames by making a FRAMESET html file that describes the layout of the page–i.e. the number of frames, their size, the name of the html file associated with each frame, etc. This frameset file points to the separate html files for the content of each frame. The frameset, which defines the page layout, stays constant. But the contents of each frame is changeable, within the format of the frameset, so that a frame can contain different html pages over time.

The primary advantage of a frames based web page is that one part of the web page can stay fixed, while other parts of the page change. For example, in a two frame page, a menu page can be fixed on the left hand side of the page in a frame. When the user clicks on a menu link, the menu remains, but the content, which is in a frame on the right, changes based on the menu selection.

Example

• In this example, frameset.htm tells the browser to display
  two frames: left_menu.htm and right_page1.htm. There is no content
  in the frameset.htm file. It only defines how the frames will be laid
  out in the browser window.
• left_menu.htm is a separate html file that contains the content
  for the left frame in the browser window. In the example, links
  in left_menu.htm target the frame on the right, causing a new HTML
  page to be loaded into the right frame when the link is clicked.
• right_page1.htm is a separate html file that contains the
  content for the right frame in the browser window.

These three separate HTML files, the Frameset
and the two content html files, are all needed to show the one “page”.
The Frameset is never visible, but is the URL used to display this
page. For instance, the URLS of various files for this page are:

The individual files:

• left_menu.htm
• right_page1.htm
• right_page2.htm
• right_page3.htm

The frameset that puts them all together:

• frameset.htm

Note that when you select different pages to be displayed on the right hand side, the displayed URL stays the frameset URL. This is one downside of frames, in that the user does not see the URL of the current page.

Targets

A major benefit of frames is the ability for a link in one frame to load a new HTML file in a different frame. For example, a link in the left menu frame can change the contents of the right frame. Targeting is
the special method for making a link affect a different frame. By default, a link changes the content of the page or frame that contains the link. But you can target another frame for any link. In this case, the targeted frame gets the new HTML file specified in the link. To make this possible, each frame in a frameset must be named. Links with targets use these names to specify the frame where the new page should be loaded.

The frame names you use should be all lowercase, with no spaces. Note that there are several special target names that start the the underscore “_”. You should not use the to name frames, but instead, use them in your target to do the following:

• _blank – opens a new browser window for the specified URL.
• _parent – this is appropriate to use if you have a frameset nested in another frameset. The specified URL will replace the parent frameset of the current frame.
• _self – This is the default if no target is listed. The specified URL will be placed in the current frame or, if there is no frameset, the specified URL will fill the current window.
• _top – clears the current browser window of all framesets, and fills the entire window with the new URL.

Managing the frame files

As you’ve seen, there are many files to keep track of when you use frames. This can be confusing, and means that you need to be very organized when saving, naming, and placing your files on the disk. A few suggestions:

• As soon as you have the frames formatted in Dreamweaver, save all the files: the frameset and each HTML file in a frame
• Save all the files in the same directory
• Name the files in a way that indicates where they go. For example, HTML files that go in the top frame should start with the word top. For example, top_titlepage.html.
• Keep in mind that if several different HTML files are displayed in one of the frames on a page, each file has a different name, and only one of them is displayed when the frameset page first opens. This default page is the one referenced by the frameset.
• When you use FILE>OPEN IN FRAME… the frameset is updated to to use newly opened file as the default file for that frame. For example, if right_page1.htm was in the right frame, and you use FILE>OPEN IN FRAME to open right_page2.htm, the frameset will now open with right_page2.htm
  first. So if you are editing several pages within a frame, always use FILE>OPEN IN FRAME for the default page last. As a better alternative, edit the other pages in a normal window outside the frameset.
• Once you’ve set the file names, don’t use FILE>SAVE AS to resave your files. Many people make the mistake of writing over the different pages that are displayed in a frame by using SAVE AS.

Make a framed page

In Dreamweaver, do the following:

1. Open the Frames window by selecting WINDOW>FRAMES
2. Create a new document
3. Create a new frameset by selecting MODIFY>FRAMESET>SPLIT FRAME LEFT
4. Add additional frames as needed
5. Save the frameset by selecting FILE>SAVE FRAMESET
6. Save the HTML file for each frame by clicking in each frame and selecting FILE>SAVE
7. To set the properties of the frameset, select the Frameset by clicking on the outermost border in the Frames palette:
     
   1. Set the title of the frameset by editing the Title box in the document window. The frameset title is the only one that displays for the user, and you must have the frameset selected to set this title rather than the title of one of the frames. Setting the page titles of the individual frame pages does nothing.
   2. Set the visibility of frameset borders in the property inspector
   3. Set the width of the frameset borders in the property inspector (note that if you want the borders to be completely invisible, you must also set the individual frames to have no borders and have margins of zero).
   4. In the right hand corner of the Property Inspector, click in each frame, and set the frame to percent or pixels. Usually, the left hand frame is set to a fixed size with pixels, and the right hand frame is set to a variable size with percent. This allows the user to change the size of the browser window, changing only the size of the right hand frame.
8. To set the properties of each frame, click in the middle of a frame in the frame palette. For each frame:
   1. Give the frame a target name by typing it into the Frame Name box in the property inspector.
   2. Set the frame to be resizable or not by checking or unchecking the No Resize box. If you want one frame to be resizable, you usually need to make all the frames resizable.
   3. Set the scrolling to be on, off, or auto for the frame with the Scroll pull-down.
   4. To completely eliminate borders in the frames, set the Borders to No, and set the margin height and width to zero.
9. Create a link in one frame that changes another frame:
   1. Make the link
   2. Set the target of the link in the Property Inspector to the name of the frame you want to change
10. To force a link to replace the entire browser window rather than an individual frame, set the target to “_top”

Dreamweaver

Frame notes

Adding a frame.

To add another frame to the current frameset, press the alt key, and drag a new frame border from an existing frame boarder. Drag to the left, right, up or down. Or, use the one of the four MODIFY>FRAMESET>SPLIT commands to create a new frameset inside the current frameset.

 Deleting a frame.  

Delete a frame by dragging the frame border to the next frame border or edge of the screen.

Frames sub-palette in the Insert palette.

This palette allows you to quickly create a frame layout, with many of the frame attributes set to commonly desired settings. The blue box indicates the frame that will resize when the browser window is made bigger or smaller. The other frames are set to stay one size, regardless of the browser window size.  

 Preventing strange previews.  

If you leave a frameset preview open in a browser window, go back to Dreamweaver, and do another preview, your page may show up inside one of the existing frames from the previous preview. This produces a kind of hall of mirrors effect. Don’t worry, just close the browser window, go back to Dreamweaver and do the preview again.

 Setting Frame Row Height and Column Width  

You adjust the frame rows and columns in the Properties inspector. You must first select the frameset by clicking on the frame border (either in the main document window, or in the Frames palette window). Once you do this, a representation of the frameset will appear in the right hand side of the Properties Inspector. Click on the left side of the the frameset box to adjust the row heights. Click on the top of the frameset box to adjust the column widths. You can also adjust the type of height or width setting to–pixels, percent, or relative.

 Frame Row Height and Column Width-Pixels Setting  

Pixels set an exact row height or column width for the frame. When the frameset is loaded in the browser, pixel measurements are followed exactly. Frames with the pixel settings have the highest priority for getting screen space from the browser.

 Frame Row Height and Column Width-Percent Setting  

Percent settings mean that the frame will be sized as a percentage of the window (or frameset) width or height. Frames with percent settings have a lower priority for space than frames with pixels.

 Frame Row Height and Column Width-Relative Setting  

Relative settings mean that the frame will be sized in relation to the sizes of other frames that have percent or pixel settings. To be honest, this doesn’t really make a lot of sense, but the net effect is that a frame with a relative setting has the lowest priority for screen space in relation to frames with percent or pixel settings.

 Keeping a frame a fixed size when the browser window is resized  

When the browser displays a page with frames, it assigns priorities to the frames based on the setting of pixels, percent or relative. If all the frames have the same setting, resizing the browser window will cause all of the frames to change size. So if you want to keep some frames fixed size, set those frames to “pixels”, while leaving at least one frame set to “relative” so that it can resize when the browser window changes. In this situation, the browser will make the frames that have relative settings smaller or larger, while the frame with pixel settings will stay the same size.

 Frame scroll setting  

If you never want scroll bars to show for a frame, even if it is made very small by the user, select “no” for the Scroll setting

 Frame noresize setting  

By default, the user can adjust the size of frames after the page is displayed. If you want to prevent this, set the noresize box to be checked.

Forms

Introduction

A form online is any area where you can input information into a web page, for example entering text or numbers into a text box, checking a tick box, causing a radio button to “fill in”, or selecting an option from a list. The form is then submitted to the web site when you push the submit button.

You’ll see forms used on the Web everywhere, for entering user names and passwords on login screens, commenting on blogs, filling your profile in on a social networking site, or specifying billing information on a shopping site.

So, let’s start with the most basic and simple form that one could possibly want to use and build our way up in complexity after that—in this article I’ll cover all the basics you need to know to create elegant, accessible form structures with HTML. The article structure is as follows:

• Step one: The basic code
• Step two: Adding structure and behaviour
• Step three: Adding semantics, style and a bit more structure
• Summary
• Further reading
• Exercise questions

Step one: The basic code

Let’s start off with a really basic comment form, the sort of form you would use on a web site to allow people to give you feedback on something such as an article you’ve written, or allow someone to contact you without knowing your e-mail address. The code looks like this:

<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>

If you enter this into an HTML document and then open that document in a browser, the code is rendered as shown in Figure 1.

Figure 1: The first, basic form example.

Try it for yourself—enter the above code into your own sample HTML document and load it in a browser, or click here to navigate to the form in a separate page. Try playing around with the different form controls to see what you can do with them.

As you read the code, you’ll see an opening <form> tag, a </form> closing tag, and some bits in between the two. The element contains two text inputs in which the page’s reader can enter their name and email address, and a textarea that can be filled with a comment to submit to the site owner.

What have we got here?

• <form></form>: These two tags are essential to start and end a form—without them you don’t have a web form. Every form must start and end with <form> and </form> tags.The <form> tag can have a few attributes, which will be explained in Step Two, but please do note that you can’t nest forms inside each other.
• <input> (should be <input /> if you’re using an XHTML doc type): This tag defines the area where you can insert information. In our case above, input tags define text boxes where site visitors can type in their name and email.Every input tag must have a type attribute to define what it will receive: the possible attribute values are text, button, checkbox, file, hidden, image, password, radio, reset or submit.Every <input> tag must also have a name (except in special cases where the value attribute is always set to the same value as the type attribute, eg type="submit" or "reset"), which you the coder can decide on. The name attribute informs the thing the data is sent to when the form is submitted (be it a database, or an email sent to the site’s administrator via a server-side script) what the name of the information in the input box is. When the form is submitted, most scripts use the name attribute to place the form data into a database or into an email that can be read by a person.Thus, if the <input> element is for the site visitor to enter their name into, then the name attribute would be name="name" or name = "first name", etc. If the <input> tag is for an email address, then the name attribute would be name="email". To make it easier on yourself, and the person who will use the form, it is recommended that you name the <input> element in a semantic fashion.By semantically, I mean naming it according to what its function is, as detailed above. If the input is to receive an email address, then name it name="email". If it is to be the street address of the site visitor, then name it name="street-address". The more accurate the word usage the easier it is not only for you to code the form and then perform maintenance tasks on later, but also for the person or database receiving the form to understand it. Think lean and mean with accurate meaning.
• Every <input> tag should also have a value attribute. The value can be set to blank—value=""—which will tell the processing script to just insert whatever the site visitor types into the box. In the case of a checkbox, radio button, hidden, submit, or other type attributes you can set the value to equal what you want the default to be. In other cases, such as submit or hidden, you set the value to equal the final input. Examples: value="yes" for yes, value="submit" for a submit button, value="reset" for a reset button, value="http://www.opera.com" for a hidden redirect, etc.Examples of how to use the value attribute:A blank value attribute, which the user input determines the value of:
  • The code says: <input type="text" name="first-name" id="first-name" value="" />
  • The user inputs: Jenifer
  • The value of first-name is sent as “Jenifer” when the form is submitted.

  A predetermined value:

  • The code says: <input type="checkbox" name="mailing-list" id="mailing-list" value="no" />
  • The user checks the box as they wish to join the website’s mailing list.
  • The value of mailing-list is sent as “yes” when the form is submitted.
• After the two <input> elements, you can see something a bit different—the textarea element.The folks at textarea bring you a nice, new, improved space to input text into. Not your ordinary, plain old one line text box that our friend <input> provides, the textarea element provides multiple lines of input, and you can even define how many lines are available to enter text into. Note the cols and rows attributes—these are required for every textarea element, and specify how many columns and rows big to make the text area. The values are measured in characters.
• Last but not least, you have a special <input> element with the attribute value="submit". Instead of rendering a one line text box for input, the submit input will render a submit button that, when clicked, submits the form to whichever target the form has specified to send its data to (currently this isn’t defined at all, so submitting the form will do nothing.)

Step two: Adding structure and behaviour

So, you clicked on the form #1 link above, filled it out and clicked Submit—why didn’t it do anything, and why does it look so bad and all in one line? The answer is that you haven’t structured it yet, or defined a place for the data the form is collecting to be submitted to.

Let’s go back to the drawing board, with a new form:

<form id="contact-form" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
        </li>
        <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </li>
    </ul>
</form>

This form looks like Figure 2 when rendered in a browser:

Figure 2: The second form example—looking better, but still not perfect.

You can play with the improved form on a separate page by clicking here.

Here I have made a few additions to the basic, simple form. Let’s break it down so you know what I did:

• There are some new attributes inside the <form> tag. I added an id attribute to not only semantically name what this form is called, but also to provide a unique ID to identify the form so it can be more easily styled using CSS or manipulated using JavaScript if required. You can only have one of each id per page; in this case I called it contact-form.
• Lights, camera, action! When you pressed the submit button in the first form and it did not do anything, this was because it had no action or method. The method attribute specifies how the data is sent to the script that will process it. The two most common methods are “GET” & “POST”. The “GET” method will send the data in the page’s URL (you will sometimes see URLs along the lines of http://www.example.com/page.php?data1=value1&data2=value2...; these are bits of data being transported using the “GET” method). Unless you have a specific reason to use “GET”, it is probably best to not use it if you are trying to send secure information as anyone can see the information as it is transmitted via the URL. “POST” sends the data via the script that powers the form, either to an email that is sent to the site’s administrator, or a database to be stored and accessed later, rather than in the “GET” URL. “POST” is the more secure and usually the better option.If you are very concerned about the security of the data in the form, for example if you are submitting a credit card number to a shopping site, then you should use the https protocol with a secure socket layer (SSL). Basically, this means that data will be sent over the https protocol, not the http protocol. Have a look at the URLs next time you are paying for something on a shopping site, or using online banking—you’ll probably see https:// in your address bar, not http://. The difference is that an https connection is a bit slower to transmit than http, but the data is encrypted, so anyone hacking into the data connection can’t make any sense out of it while it is in transit. Talk to your web host for information on how they can provide you with https and SSL.
• The action attribute specifies what script file the form data should be sent to for processing. Many web hosts will have a generic send mail script or other form scripts available for use (see your host’s documentation for information) that they have customized to their servers. On the other hand, you could use a server-side script that you or someone else has created to power your form. Most of the time, folks use languages such as PHP, Perl or Ruby to create a script that will process the form—you could for example send an email containing the form information, or input the form information into a database to be stored for later use.It is outside of the scope of this course to write up a server-side script for you, or teach you how to write server-side code yourself—please inquire with your host to find out what they offer, or find a nice programmer to befriend.Here are a few resources to get you started if you would like to investigate server-side scripting:
  • Perl: http://www.perl.com/
  • PHP: http://www.php.net
  • PHP documentation on Forms: http://uk3.php.net/manual/en/tutorial.forms.php
  • Python: http://python.org/
  • Ruby: http://www.ruby-lang.org
  • Sendmail: http://www.sendmail.org/
  • ASP.NET: http://www.asp.net/
• The second line that’s been added to our Step Two form is the “hidden” input field—this is a redirect. What?Under the goal of separating markup structure from presentation and behaviour, it is ideal to use the script that will power the form to also redirect the user once the form is submitted. You don’t want your users to be left sitting there looking at the form page, wondering what the heck to do next after they’ve submitted the form; I’m sure you’ll agree that it is a much better user experience to instead redirect your users to a thank you page featuring “what to do next” links, after a successful form submission. This line in particular specifies that after this form is submitted, the user will be redirected to the Opera homepage.
• To improve the look of the form, I have put all the form elements into an unordered list so that I can use the markup to line them up cleanly and then use CSS to polish the look.Some folk would argue that you should not use an unordered list to markup a form, but use a definition list instead. Others would argue that one should not use a list at all but use CSS to style the <label> and <input> tags. I will let you research this debate and make up your own mind on which is more semantically correct. For our simple exercise I will use the unordered list.
• Last but not least in step two, I’ve labeled the form elements. Both in terms of meaning and making the form accessible to a wide range of internet enabled devices, it is best to give all the form elements labels—check out the contents of the label elements – these labels are tied to their respective form elements by giving the input and textarea elements ids that have the same value as the labels’ for attributes. This is great because it not only gives a visual indicator of the purpose of each form field on the screen, but it also gives the form fields more meaning semantically. For example, a visually impaired person using the page with a screenreader can now see which label goes with which form element. The ids can also be used to style individual form fields using CSS.By now you are probably wondering why id attributes are included as identifiers in form elements as well as name attributes. The answer is that input elements without name attributes are not submitted to the server, so those are definitely needed. id attributes are needed to associate form elements with their corresponding label elements. You should therefore use both.

The 2nd form displays a bit better, but it has been beaten with the default ugly stick. Time to add a few more bits and bobs before applying some style.

Step three: Adding semantics, style and a bit more structure

Now I’ll finish off what I started at the beginning of the article, with the following final version of my example form:

<form id="contact-form" action="script.php" method="post">
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="comments">Comments:</label>
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
        <label for="mailing-list">Would you like to sign up for our mailing list?</label>
        <input type="checkbox" checked="checked" id="mailing-list" value="Yes, sign me up!" />
      </li>
      <li>
        <input type="submit" value="submit" />
        <input type="reset" value="reset" />
      </li>
    </ul>
  </fieldset>
</form>

When rendered in a browser, this form looks as shown in Figure 3.

Figure 3: The final form example in all its glory.

To see this form live in a browser and play with it, following this link to the form on a separate page.

The last two major elements I have added to this form are fieldset and legend. Both of these elements are not mandatory, but are very useful for more complex forms and for presentation.

The fieldset element allows you to organize the form into semantic modules. In a more complex form, you could for example use different fieldsets to contain address information, billing information, customer preference information, and so on. The legend element allows you to name each fieldset section.

I’ve also applied a little bit of CSS to this form, to style the structural markup. This is applied to the third form example using an external stylesheet—click on this link to see the styles. The two most important tasks I wanted the basic CSS to do is add margins to line up the labels and input boxes, and get rid of the unordered list’s bullet points. Here is the CSS that resides in the external stylesheet:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input  {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

What does it do? The first line styles the fieldset border to not take up the whole page; you could also set the border to none using {border: none;} if you didn’t want one. The second line puts a margin of 10 pixels on the li elements to help give a little visual room between each list item. The third and fourth lines set a left margin on the input and textarea elements so that they don’t crowd the labels and line up properly. If you would like more information on the styling of a form please consult this article on Styling Forms in this Web Standards Curriculum or Nick Rigby’s A List Apart article on “Prettier Accessible Forms”.

Summary

In this article, I have covered the most basic three steps to a web standards compliant form. There is much more in form world I did not cover here and that is left for you to explore for now. There are access keys, checkboxes and radio buttons, custom submit and reset buttons, and select boxes.

In the above Step three Form, I added a checkbox to show how you can use the additional attributes in the input element to collect information that is beyond the single line text input or the multiple line text area input. The checkbox and radio button attribute values could be used to add the ability to ask short questions and give the reader a list of options to choose from (checkboxes allow you to select multiple options, radio buttons only one). Radio buttons can be very useful in a survey form.

The select element, also not featured in this article, can be used for a drop down menu of choices (for example a list of countries, or states/provinces).

Further reading

• Cameron Adams, “Accessible, stylish form layout”: http://www.themaninblue.com/writing/perspective/2004/03/24/.
• Brian Crescimanno, “Sensible Forms: A Form Usability Checklist”: http://www.alistapart.com/articles/sensibleforms/.
• Simon Willison, “Easier form validation with PHP”, http://simonwillison.net/2003/Jun/17/theHolyGrail/.
• The Spec. Not any old specification, but THE W3C SPEC—http://www.w3.org/TR/html401/interact/forms.html. If you ever have a bout of insomnia in which a warm glass of milk, counting sheep, and Ambien are not putting you to sleep, go read the whole spec for HTML 4.01 or XHTML 1.0 at the w3.org. It is cheaper and more effective than any remedy out there. [Insert name of deity here] bless the engineers of the world.
• The nice folk over at the W3.org have defined the differences between “GET” & “POST” and when to use them: http://www.w3.org/2001/tag/doc/whenToUseGet.html.
• Many blessings upon Mr. Rigby: http://alistapart.com/articles/prettyaccessibleforms.

Assignment

Time to code your own contact form.

1. Create a simple contact form that asks the user for their name, email address, and a comment.
2. Add a checkbox asking if the reader would like to join your mailing list.
3. Use some CSS to style your form: set a width to the form, align the labels to the left, put a background colour on to your page, etc.

Extra Credit: The more you play with the form elements and different CSS the more you will see what you can do with a simple contact form.

Extra Extra Credit: If you want to proceed into deep unknown lands, find a script or use one that your web host provides to send the form to yourself. If the script part to make the form gets a bit ornery, bribe a nice programming sort with neon snacks.

This is not a graded assignment so you can complete 1-3 or take it to the next level by completing the extra credit or extra, extra credit. It’s up to you. Complete the assignment and upload to the “Dropbox” on smconline.org site by noon on Tuesday, June 2.  Again, please be sure to include your last name in the name of the file when you upload it to the Dropbox.

^{Above material from The Web Standards Curriculum. This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.}

Spry framework for Ajax

The Spry framework is a JavaScript library that provides web designers with the ability to build web pages that offer richer experiences to their site visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. The Spry framework is designed so that markup is simple and easy to use for those who have basic knowledge of HTML, CSS, and JavaScript.

Additional Resource: Chapter 10 from our textbook “Adding Effects and Interactivity with Spry” (pages 237-248)
Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos)

Widgets and Menus

Spry widgets include menu bars, tabbed panels, accordion effects, and collapsible panels.

The Spry widgets can be edited in the Property inspector. For example, if you create a Menu Bar, you can assign text and links to menu options in the Property inspector. But, in general, you cannot do much, if any, formatting for Spry widgets in the Property inspector. Instead, you format Spry widgets by editing style sheets that get generated by Dreamweaver whenever you create a Spry widget

There are a few things to be aware of when you create Spry widgets:

• Documents must be saved before you insert Spry widgets.

• Spry widgets generate lots of CSS styles and JavaScript files, and these files are saved every time you save a page with a Spry widget.

• You control basic features of the Spry widget, like text and links, in the Property inspector. But you format Spry widgets (elements like font, text color, background color, and so on) in the CSS Styles panel by editing the CSS style for the Spry widget.

Inserting a Tabbed Panel

Select Insert > Spry > Spry Tabbed Panels.

Add a panel to a Tabbed Panels widget

1. Select a Tabbed Panels widget in the Document window.
2. Click the Panels plus button in the Property inspector (Window > Properties).
3. (Optional) Change the tab name by selecting the tab’s text in Design view and altering it.

Delete a panel from a Tabbed Panels widget

1. Select a Tabbed Panels widget in the Document window.
2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to delete and click the minus button

Open a panel for editing

Do one of the following:

1. Move the mouse pointer over the tab of the panel you want to open in Design view and click the eye icon that appears at the right of the tab.
2. Select a Tabbed Panels widget in the Document window and click the name of the panel you want to edit in the Panels menu of the Property inspector (Window > Properties).

Change the order of panels

1. Select a Tabbed Panels widget in the Document window.
2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel you want to move.
3. Click the up or down arrows to move the panel up or down.

Set the default open panel

You can set which panel of the Tabbed Panels widget opens by default when the page opens in a browser.

1. Select a Tabbed Panels widget in the Document window.
2. In the Property inspector (Window > Properties), select the panel you want open by default from the Default panel pop-up menu.

Customize the Tabbed Panels widget

Although the Property inspector enables you to make simple edits to a Tabbed Panels widget, it does not support customized styling tasks. You can alter the CSS rules for the Tabbed Panels widget and create a widget that is styled to your liking. For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprytabbedpanels_custom.

All CSS rules in the topics below refer to the default rules located in the SpryTabbedPanels.css file. Dreamweaver saves the SpryTabbedPanels.css file in the SpryAssets folder of your site whenever you create a Spry Tabbed Panels widget. This file also contains useful commented information about various styles that apply to the widget.

Note: Although you can easily edit rules for the Tabbed Panels widget directly in the accompanying CSS file, you can also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Constrain the width of tabbed panels

By default, the Tabbed Panels widget expands to fill available space. To constrain the width of a Tabbed Panels widget, set a width property for the tabbed panel container.

Locate the TabbedPanels CSS rule in the SpryTabbedPanels.css file. This rule defines properties for the main container element of the Tabbed Panels widget.

Add a width property and value to the rule, for example width: 300px;.

Use the CSS Styles Panel to Format Tabbed Panels. You can change the background color of tabbed panel elements in the CSS Styles panel:

• To change the background color for a hovered-over tab, choose the .Tabbed PanelsTabHover style in the CSS Styles panel, and choose a background color from the background-color property.

• To change the background color for a selected tab, choose the .TabbedPanels TabSelected style in the CSS Styles panel, and choose a background color from the background-color property.

• To change the background color for a tabbed content area, select that tab in the Document window, choose the .Tabbed PanelsContentGroup style in the CSS Styles panel, and choose a background color from the background-color property. Format the content of tabbed panels the same way as formatting text or images.

For more information:
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WS33DFC4C4-FED7-4899-8034-C8F567178AC4.html

I encourage you to go through the spry tutorials on this Adobe page. The tutorials will give you a better understanding about how the various sprys work.
http://www.adobe.com/devnet/dreamweaver/articles/spry_simulations.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Spry Effects

Effects animate your page and make page elements react to visitor actions by changing location or size or appearance. Editing effects requires some ability to work in the Behaviors panel.

Demonstration of Spry effects
http://labs.adobe.com/technologies/spry/demos/effects/index.html

Applying a Slide Up/Slide Down effect

Note: You can only use this effect with these HTML objects: blockquote, dd, div, form, or center. The slide effect requires a single <div> tag around the content that slides.

1. (Optional) Select the content or layout object you want to apply the effect to.
2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Slide from the menu.
3. Select the object’s ID from the target element menu. If you have already selected an object, choose <Current Selection>.
4. In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.
5. Select the effect you want to apply: Slide Up or Slide Down.
6. In the Slide Up From/Slide Down From box, define the sliding starting point as a percentage or as a pixel number.
7. In the Slide Up To/Slide Down To box, define the sliding end point as a percentage or as a positive pixel amount.
8. Select Toggle Effect if you want the effect to be reversible, sliding up and down with successive clicks.

Additional Spry Resources:

Additional Spry Demos:
http://labs.adobe.com/technologies/spry/demos/index.html

Spry Widget videos:
Creating menus with Spry Widgets

Working with the Spry Accordian widget

Using the Spry framwork for Ajax

Adobe site: All things Spry:
http://www.adobe.com/devnet/spry/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Web Critiques

This is not a graded assignment but I would like you to evaluate the websites below using the criteria listed below. If you have already studied the sites below, pick 3-4 sites on your own and evaluate them based on the list below. One of the most important skills you can develop is your familiarity and understanding of what other web designers are doing online. Overall, I recommend you look at as many sites as you can, as often as possible!

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?

Web sites to critique:

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment

Spry Widget & Spry Effect: create a spry tabbed panel (or another spry widget of your choice) and and a spry effect of your choice.

This assignment won’t be graded but I would like you to upload it to the Dropbox. Complete the assignment and upload to the “Dropbox” on smconline.org site by noon on Wednesday, May 27. Again, please be sure to include your last name in the name of the file when you upload it to the Dropbox.

Your final project will be due by noon on Tuesday, June 16. I want to give you plenty of time to do the research and design necessary for this project so I’m giving you the specifications for the project below. Please let me know if you have any questions about the final project.

Final Project
No late projects accepted.

The focus of this project is to create a complete, portfolio quality web site following the site map provided below. You are to design the web site for a company that currently does not have a web site. Designing a personal web site is not allowed:

• Monday May Design. This fictitious company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering.
• Here is the link to the site map you will follow for this project.

Your new web site design should have a strong design aesthetic that reflects a specific attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original. You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from other websites. You may use your own original artwork and/or photography if you prefer. Below are some suggestions on where to find images, but you’re welcome to use your own sources.

Possible sources for images:

• Veer: Wonderful selection of stock photography
• iStock Photo
• Morgue File: Free!
• Stock Xchange
• Stock Vault
• iStock Pro
• Open Photo
• Getty Images
• Index Stock Imagery
• Absolute Vision

Your site should consist of:

• 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
• A sub navigation for “what we do” and “portfolio sections.”
• A strong visual design
• A theme and visual concept that carries through the site
• A clear navigation system
• An effective and clear system of displaying the company’s portfolio
• A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
• 6 pages that have complete content, including photos and text.
• You must use some html text in the site

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

• Sites take too long to download, often because of too many rollover images.
• Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course

Please note: You must make use of royalty free images for your project. Below are “A level” work from previous students.

Student 1
Student 2
Student 3

Final Project checklist

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creating Pop up Menu using a Spry widget

The following definition and description about the Spry widget is from the Adobe web site:

“A Spry widget is a page element that combines HTML, CSS and JavaScript code to enable user interaction.

A Spry widget is made up of the following parts:

1. Widget structure:

An HTML code block that defines the structural composition of the widget.

2. Widget behavior:

JavaScript code that controls how the widget responds to user-initiated events.

3. Widget styling:

CSS code that specifies the appearance of the widget.

The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget.

The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more. Each widget in the Spry framework is associated with unique CSS and JavaScript files, available on Adobe Labs.

The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js).”

Click here for an Example of Spry Menu Bar

Follow the steps below to add the menu like the one above:

Step 1: Make sure you have your site defined using the Site Definition box we’ve used when uploading our files. You need to go to SITE > NEW SITE and fill in the local information for your site. In this case for the field “Local root folder” you will choose your folder named final_lastname. You only need to fill in 2 fields: “Site name” and “Local root folder.”

Step 2: Make sure in the SITE > MANAGE SITE palette that you’ve selected the site you defined called final project. This will ensure that the Spry assets are copied to the correct folder.

Step 3: Now you are ready to insert the popup menu widget into your page. I recommend that you insert the pop up menu widget into a layer. Click inside the layer and go up to the Insert Window labeled “Spry” as shown below and click on the icon labeled “Spry Menu Bar.” This will insert the Spry Menu Bar into your page:

Step 4: Save your page and double check to make sure that the folder named “Spry Assets” is correctly linked in the head of your page and the folder is copied into your final_lastname folder. The folder named “Spry Assets” contains the Javascript and CSS files you will need to display the bar.

Step 5: You will be able to edit the Menu Bar using the WINDOWS > PROPERTIES Inspector. It looks like this:

Here you will be able to change the text for the navigation and add and delete second and third level navigation using the +/- signs. Here you can also create links for the navigation. If you would like to customize the widget (I have customized the rollover and hover states), you can click on “Customize this widget” and follow the directions given here.)

Video Demonstration

I demonstrate how to insert a spry menu into a web page. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (29MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

2) Or, you can view the 3 videos from the YouTube site. I have posted the two videos below.

Spry Menu | Part 1

Spry Menu | Part 2

Read pages 240-241 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:

View Adobe video:
Creating Menus with Spry Widgets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment 05

Spry Menu: Create a spry menu bar following the instructions above. Please be sure to view the Video Demonstration, read through the class notes, the textbook reading, and the Adobe video. Upload the zipped file with your complete folder to the “DropBox” on the smconline.org site by noon, Tuesday, May 19.

(If you don’t have Dreamweaver CS3 and therefore don’t have the Spry Menu feature, create a pop up window and upload the zipped files to the “Dropbox.”)

Your final project will be due by noon on Tuesday, June 16. I want to give you plenty of time to do the research and design necessary for this project so I’m giving you the specifications for the project below. Please let me know if you have any questions about the final project.

Final Project
No late projects accepted.

The focus of this project is to create a complete, portfolio quality web site following the site map provided below. You are to design the web site for a company that currently does not have a web site. Designing a personal web site is not allowed:

• Monday May Design. This fictitious company designs and engineers products as a service for their clients. The company is an industrial design company with projects such as — phones, consumer electronics, cable boxes, medical equipment, computers, etc. The company expertise in both design and engineering.
• Here is the link to the site map you will follow for this project.

Your new web site design should have a strong design aesthetic that reflects a specific attitude and look and feel for the site that you create. The site design should also reflect a strong technical sophistication.

Your design should be original. You must make use of royalty free images for your project. (Note that the examples of student work below do not reflect this new requirement.) You can NOT use images from other websites. You may use your own original artwork and/or photography if you prefer. Below are some suggestions on where to find images, but you’re welcome to use your own sources.

Possible sources for images:

• Veer: Wonderful selection of stock photography
• iStock Photo
• Morgue File: Free!
• Stock Xchange
• Stock Vault
• iStock Pro
• Open Photo
• Getty Images
• Index Stock Imagery
• Absolute Vision

Your site should consist of:

• 6 complete pages and placeholder pages for the rest of the pages. (Must use site map provided and create one page for each of the 6 section a,b,c,d,e,& g)
• A sub navigation for “what we do” and “portfolio sections.”
• A strong visual design
• A theme and visual concept that carries through the site
• A clear navigation system
• An effective and clear system of displaying the company’s portfolio
• A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560)
• 6 pages that have complete content, including photos and text.
• You must use some html text in the site

Previous student work

This student work is presented as examples of good work done in previous sections of this course. Of course, as beginning designers working with limited experience and time, the students did not make “perfect” sites from either a design or technology perspective. In particular, many sites suffer from the following problems that future students should try to avoid:

• Sites take too long to download, often because of too many rollover images.
• Heavy reliance on graphic text, when HTML text would be faster downloading and easier to maintain. More HTML text should be used, but this can require a more sophisticated approach to page layout than is covered in this course

Please note: You must make use of royalty free images for your project. Below are “A level” work from previous students.

Student 1
Student 2
Student 3

Final Project checklist

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we’re going to cover several items that aren’t things you’re required to include in your final project — but you may want to. We’ll cover two items using the Behaviors windows: show-hide elements, and open browser window.

.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

// Modified function, with additions in BOLD

function MM_openBrWindow(theURL,winName,features) { //v2.0   var newWindow = window.open(theURL,winName,features);

   newWindow.focus();

}

// Modified function with additions in BOLD

function MM_openBrWindow(theURL,winName,features) { //v2.0   var win_position = ‘,left=300,top=200,screenX=300,screenY=200′;

   var newWindow = window.open(theURL,winName,features+win_position);

   newWindow.focus();

}

GIF animations
Animated GIFs are graphic files composed of a series of frames in the GIF89a format. They have the following characteristics:

• They can have a transparent background. This is accomplished by designating one color to be the transparent color.
• They can play once, play a specified number of times, or play forever
• They have a frame rate specified when they are made. Some applications allow a different frame rate to be set for each individual frame.
• They can be optimized so that only the moving objects are changed from frame to frame, rather than repeating the entire scene.

Using Photoshop
Download this file and use it to follow along with the demonstration: animated_gif_example.zip

To make animations in Photoshop, you create the different frames of the animation in separate layers, overlaid in the same location of the Photoshop file. Once you’ve done this, follow these instructions to create the animation:

• Select the slice where there will be an animation (or the whole image if that’s what you are animating)
• Click on the Animation tab in the slice palette
• Initially, there will only be one frame
• To create additional frames, click on the “new” icon at the bottom of the palette (use the trash can to delete frames)
• Select each frame and turn on and off the appropriate layers for that frame
• Select the timing for each frame by pulling down the timing menu directly under the thumbnail
• Select the loop setting by pulling down the menu in the lower left of the palette (Forever, Once, Other)
• To copy and paste frames, DO NOT use command/control-c or command/control-v (they don’t function for animation frames). Select the desired frame(s), and select copy or paste frames from the options pullout in the upper right-hand corner of the palette.
• To optimize the size of the GIF animation, select Optimize Animation from the options pullout.
• Preview your animation by using the play controls at the bottom of the palette.
• To automatically create in between frames in an animation, use the Tween feature in ImageReady. The tweening only works with changes in the position of a layer between two frames. For example, you might have the “GIF” text on the left in one frame, and use the move tool to change the position of the “GIF” in the other frame.
  • To Tween, select the two adjacent frames you want tweened. Then click on the options pullout menu in the upper right hand corner of the palette. Select “Tween…”, and then set the number of frames to be added. That number of intermediate frames will be created, tweening between any graphics that are in different locations in a layer.
• Don’t forget to set the image compression in the optimize palette. You must use the GIF format, since JPEGs cannot be animated. Since Photoshop uses the same palette for all frames, be sure to check every frame for quality.
• To save out the GIF animation, select FILE>SAVE OPTIMIZED and set the location to save your animation.

Note: The animated_gif_example.psd file is organized in layers so that the GIF1, 2, 3… layers match the bars1, 2, 3… layers. So for frame 1, turn on the following layers:

• Animated (a text layer)
• GIF1
• bars1

Exercise: Using the file for the animated gif, animated_gif_example.zip, you should complete the animated gif exercise. You don’t need to hand it in but make sure you understand how to create an animated gif.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Change a different image
Using the swap image behavior

If you want a different image to change when you rollover, it’s a little more complicated. See example page here.

• Insert the image that will be changed
• Select this image and define a name (e.g. “rollover2″) in the property inspector (in the upper left hand corner)
• Insert the other image that will cause the rollover graphic change
• Select this image and put a link or “#” character in the link box in the properties inspector
• Then, while the image that causes rollover is still selected, open the WINDOW>BEHAVIORS window.
• Using the “+” pull-down menu on the left, select the behavior/action Swap Image



• In Swap Image, select the name of the image you want to change (the first image inserted above, rollover2)

• Then browse for the replacement image (the highlight image)
• Note that you can select rollover images for as many named images as desired.
• Check the Preload Images and Restore Images onMouseOut checkboxes
• Select OK
• If you want a different event than a mouseOver to cause the image swap, you can change the event. Click on the “swap image” event, and then click on the downward pointing arrow at the right of the “Events” column. Select the event you want to cause the rollover change.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Another way to postion content on the pages is through the use of what Adobe calls AP divs. “AP” stands for “Absolute Position” and AP divs were once referred to as Layers. (So if you are working in a Macromedia version of Dreamweaver instead of Adobe, you will see they are referred to as layers not AP divs.)

AP divs/Layers: a way to position content on a page

AP divs/Layers are boxes that can be positioned anywhere on the page, and contain anything that can be put in a normal web page. AP divs/Layers can

• Be positioned with pixel accuracy, in relation to the upper left hand corner of the web page, or in relation to another
  layer.
• Contain anything, including text, links, gifs, animated gifs, and jpgs.
• Have a stacking order, so that elements in a layer can be in front of, or behind elements in another layer.
• Can be shown or hidden.
• Can have their position changed over time.

Creating layers

1. Insert a layer by selecting INSERT > LAYOUT OBJECT > AP DIV.
   Alternatively, select the layer icon in the insert menu
   then click and drag a box to create a layer on the screen.
2. With the div selected, note the following div features in the properties inspector:
   • Left, Top – defines the top left corner of the layer rectangle relative to the upper left corner of the browser window
   • Width, Height – defines the size of the layer in pixels (note that the layer may expand to accomodate its content)
   • The layer name
   • Background image – tiles an image in the background
   • Background color – defines a background color for the layer.
   • Visibility – whether the contents of the layer will show when the page loads
   • Overflow – what to do with any content that exceeds the stated dimensions of the layer (only works in the most recent versions of browsers)
   • Z index – the layer order – higher is in front
   • Clip – the upper left corner and dimensions of a clipping area that will show reveal a part of the layer contents
3. The AP elements window displays information about all the divs on the screen.
   • The order of the divs, based on the Z index. The order determines the visibility of layers when one overlaps another. Divs with higher numbers are in front. You can change the order by simply dragging one div to a new location.
   • The currently selected div. You can select a div by clicking the layer name in this window
   • The nesting level of a div
   • The visibility of the div. The eye indicates if the div’s visibility when the page is loaded is set by default (no eye), visible (the open eye), invisible (closed eye)

CSS box model

To help you understand positioning you need to understand the box model.

Here’s a helpful tutorial you will want to review:

http://www.brainjar.com/css/positioning/default.asp

Video Demonstration

I demonstrate how to re-create the tables_example.htm sample page using AP divs. In this demonstration, I have used the files found here web1_tables_example.zip to reproduce the file tables_example.htm in Dreamweaver. Note, that this page is actually built using a table structure. I will demonstrate how to build the page using a combination of AP divs and tables. You can view the video demonstration in one of two ways.

1) You can download the entire demonstration in one QuickTime movie file (54MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 3 videos from the YouTube site. I have posted all three videos below.

AP divs | Part 1

AP divs| Part 2

AP divs | Part 3

Thank you for your midterm projects!

This week you are responsible for participating in Critiques for your fellow student midterm projects. I’m extending the deadline for the critiques to Tuesday, April 28th.

Web critiques
Using the Seven Criteria for discussion outlined in the notes from Class 06, comment on all of your fellow student midterm projects. Please post your comments to the Discussion section of the smconline.org site.

http://www.everythingaboutweb.com/grdes66online

Please post your comments to the Discussion section by noon, Tuesday, April 28.

Reminders

• Spring Break: April 13- April 17. I will not post anything to the class site during the Spring Break.

• Your Midterm Projects are due by noon, Tuesday, April 21st. You must upload the Midterm Project to the class server in order to receive your grade.

Please be sure you know how to upload your Midterm Project to the class server using FTP. Please review the notes below:

Setting up your file structure
When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as project1.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named proj1_yourlastname, midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

Uploading your site using FTP

Using the site window in Dreamweaver
Define a site in Dreamweaver

1. With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
2. Select NEW > SITE
3. Be sure you have the “Advanced” tab selected and not the “Basic.” With LOCAL INFO selected
   • Set SITE NAME to “jamiecavanaugh” or “mysite”(or whatever you want)
   • Set LOCAL ROOT FOLDER to where you the main folder where your files are located. Do Not set this folder to the folder where your web files are. If you do, you will be unable to move the entire folder. Always set the Local Root Folder to a folder ABOVE your project folder at least.(For example, select the projec1 folder not your project1_yourlastname. Your “project1″ folder should contain your project1_yourlastname folder.
   • Leave HTTP ADDRESS blank
   • Set the CACHE to be checked



4. With REMOTE INFO selected. (It is located in the left hand side navigation)
   • Set SERVER ACCESS to FTP
   • Set FTP HOST to: ftp.everythingaboutweb.com
   • Set HOST DIRECTORY to: (leave blank)
     
   • Set LOGIN to : grdes66online
   • Set PASSWORD to: (I will email this to you)
     Please note the login and password information in the above image is incorrect. Please use the information I have given you in the text above.
     Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: “Use Passive FTP” located under thepassword field.
5. Select OK to complete the creation of a new site.

6. CONNECT to the server using the “plug” icon

Uploading Files
To upload files to the server, click on the folder or file you want to upload, and drag it from the right side to the left side. Or you can select “put” by right clicking to upload the files. For example, you should see your entire projec1_yourlastname folder. Drag this complete folder to the top blue folder.

In most cases, you will upload the complete web site as a directory. Drag this folder to the left hand side, and drop it when you’ve placed it over the top folder .

Dropping the folder on the ” / “folder ensures that you place the folder in the correct place. If you drop a file or folder onto another folder, the file will be placed inside of that folder rather than replacing it.

If you want to move a single file up to the server, then drag this file and drop it onto the correct directory on the server (or you can drop it on top of an old version of the same file).

When you move HTML files in the Site Files window, Dreamweaver will ask if you want to Include Dependent Files? If you say yes, Dreamweaver will look in your HTML files, and copy any images in referenced in those files, even if you don’t select them for the copy. In general, if you are copying a folder of a complete site, there is no reason to copy dependent files, since you are already copying all the files needed for the site (because they are all in the folder). But if you are copying an individual HTML file, then in general it’s good to answer yes to including dependent files, to make sure that any images in that page are properly uploaded.

Once you have uploaded your folder, please view your site at the following web address: http://www.everythingaboutweb.com/grdes66online

Uploading existing files on the server:
If you need to make changes and re-upload you may do so. Please note the following:
When you upload and replace files that are already on the server, there are several issues you should note:

• Be sure you save the new file before you upload it, so your changes get to the server.
• Dreamweaver (and other FTP programs) will not ask you if you want to replace them. It will just write over the old files. Be sure you want to replace the files on the server before you upload the new files.
• After you upload the new versions of the files, you should check to make sure they are on the server. View the web pages on the Internet at their real web address, and don’t rely on the Dreamweaver preview of the local file. If the web page is already open on the browser, use the Reload/Refresh button to view the page.
• Sometimes when you replace a file and view it, you don’t see the changes. This is because the browser has cached the file, and you are looking at an old copy stored on the local computer, not the new one on the server. To fix this, try using the Reload/Refresh button. If this doesn’t work, hold the shift key and press Reload/Refresh to force a newer version. If that doesn’t work, you will have to clear the cache. This is usually in Edit>Preferences>Advanced>Cache. If this doesn’t work, you probably didn’t upload the file correctly, or to the right location.

Rules for the Shared server
Please be courteous to your fellow students by following the guidelines below:

• Be careful not to overwrite a fellow student’s files or the index file for the shared site.
• All student files are considered private and you cannot download other student’s files from the server without permission.

See the FTP info page for the Video Demonstrations

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Composition

We’ll cover composition this week by reading the following article: Principles of Beautiful Web Design

Please review the following principles from the article above:

Grid Theory & The Rule of Thirds

Balance

• Symmetrical Balance
• Asymmetrical

Unity

• Proximity
• Repetition

Emphasis

• Placement
• Continuance
• Isolation
• Contrast
• Proportion

Bread & Butter Layouts

• Left column navigation
• Right column navigation
• Three column navigation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment:

Web critiques
Using the Seven Criteria for discussion outlined in the notes from Class 06, comment on all of your fellow student midterm projects. Please post your comments to the Discussion section of the smclone.org site. I’ll have it set up for your comments by Tuesday, April 21.

http://www.everythingaboutweb.com/grdes66online

Please post your comments to the Discussion section by noon, Thursday, April 23.

copyright © 2006-2009, jamie cavanaugh

Web typography

Traditional print designers have a huge amount of options available to them when it comes to typography, including the sheer numbers of fonts available, and options for positioning text. Typography on the web is a lot more limited, because we must design using fonts and positioning, etc that we know will be available on the computers of the users that will look at their web sites—it is no use just designing for yourself on the web!

Limitations of web typography include:

• A reduced selection of fonts
• No hyphenation, making full justification look ugly when a column of text gets narrow
• Poor control over kerning (ie, the spacing between the letters)
• A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environments

Let’s look at these points in a bit more depth.

Reduced selection of fonts

The reduced selection of fonts is often the first thing you will run up against when styling your text. Although you can specify any font you like in your CSS, visitors to your sites will only see your text displayed in that font if they happen to have it installed on their own computer—if they don’t, their browser will either use an alternative font that you’ve specified in your CSS, or resort to the browser default (usually Times New Roman). So, you may like to see all your body text displayed with special fonts like Trump Medieval or Avant Garde, but unless your target audience is heavily biased towards designers your viewers likely aren’t going to get the benefit. For this reason, most web designers limit themselves to the most commonly-available fonts across all systems, which are usually limited to the following:

Andale Mono

Times New Roman

Georgia

Verdana

Arial/Arial Black

Courier/Courier New

Trebuchet MS

Comic Sans (this is an unprofessional, many would say ugly font—don’t use this, except perhaps sparingly on sites aimed at children)

Impact

These look like Figure 1:

Figure 1: The most commonly available fonts across all systems are limited to the above.

Specifying any of the above fonts means you’re reasonably likely to be picking a font that most of your visitors will also have. Microsoft also introduced six new fonts designed for screen use in Windows Vista and XP, and, oddly, chose to begin all their names with the letter C. If you want to use them, they are Cambria, Calibri, Candara, Consolas, Constantia and Corbel. I’d advise against using these, however, because they are not likely to be available on the Mac or Linux platforms.

So, compared to the thousands of typefaces available to print designers, web designers can reliably choose from just over a dozen. But is this a serious limitation? Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well—remember that typographers pre-dating electronic fonts would have faced similar limitations.

Hyphenation

When it comes to aligning your text within its container, there are four options: left-aligned, right-aligned, centre-aligned and fully-justified. Fully-justified text, where both the left and right edges of the block are aligned to the vertical sides of their container, can look more attractive than text with a “ragged” edge, and you’ll see it a lot in magazines and books. On the web, however, it’s problematic due to the lack of automatic hyphenation, which breaks words at appropriate points to better fit them in the line. To fully justify the block of text, all the browser can do is adjust the spacing between the words, which can lead to “rivers of white space” running vertically through the block—this usually happens when the line length within the block is too short and there aren’t enough spaces to adjust subtly, as shown in Figure 2.

Figure 2: Rivers of whitespace can spoil justified text blocks.

As you can see in this screenshot, the lack of hyphenation to break words at natural points has caused the spacing between certain words to grow to unacceptable sizes. To avoid this, you should use left-aligned text for the most part on the Web.

Kerning

Kerning is the process of adjusting the spacing between particular pairs of letters when the font in use is a proportional one (such as Times New Roman, where the space between each character varies from character to character) rather than a monospaced one (such as Courier, where the space between each character is the same each time). It’s used in print to tighten up the space between letters that align naturally, such as a W followed by an A, and can give a more professional look and feel to the text. Most professional fonts come with kerning instructions built in, to provide spacing information to the type renderer. See Figure 3 for an illustration of the difference kerning makes.

Figure 3: Kerning can certainly improve the look of text.

In the above screenshot, the first word has not been kerned. The second word, though, has had the spacing between the W and the A reduced, whilst the space between the A and the S has been increased a touch.

On the web, kerning with this level of precision is effectively unavailable. The only thing we have that comes close to it is the ability to use tracking, which in the print world means adjusting the space between characters throughout the copy, no matter what those characters are—so, you could decrease the space between your W and your A, but you’ll also be affecting the space between every other letter. On the web, tracking is better known as letter spacing, and is controlled with CSS—this is illustrated in Figure 4.

Figure 4: Proper kerning is not available on the Web; the closest we have available is more general letter spacing.

In the above screenshot, the spacing between each character has been increased by the same amount. Whilst this has helped separate the A and the S, the space between the W and A is now too much. Letter spacing with CSS is a difficult property to use effectively due to this all-or-nothing nature, and for this reason it is best used sparingly.

A lack of control

With all this talk of the print world, there’s something very important worth bearing in mind, and that is that the web is not print. So where the print designer doesn’t have to worry about the end viewer resizing the text, or not having the desired set of fonts, or not having aliasing enabled, we do, and there’s often a temptation to try and force a particular design upon the viewer—fixing a rigid text size for instance, or placing text in fixed-width and fixed-height containers, or even replacing whole chunks of text with images.

This lack of control needn’t be a problem however—you just have to get used to the idea that people will want to read your content on a variety of devices in a variety of environments in a variety of ways. You shouldn’t try to stop them, or make it difficult for them—if they want to read your content then it should be as easy to do so as possible. They may wish to read it on their mobile device during their commute home; they may prefer to print everything out and read it on paper instead of a screen; they may be visually impaired and need to increase the font size somewhat. This is why, when you style your text on the web, what you’re really doing is providing a guide to all the different browsing devices as to how you’d prefer that text be seen. Devices are free to ignore everything you say, of course, but that’s ok—what matters is that you’re not trying to force your design decisions on your entire audience.

How is typography done on the web?

Typography on the web is controlled entirely with CSS, and by using CSS you gain a lot of control: not just over the size, colour and typeface selection but also over the line height, the letter spacing, the level of capitalisation (all caps, initial caps, small-caps or no capitalisation at all) and even control over how the first letter or first line of your text is styled.

By styling the text’s containing block, you also have control over the level of justification of the text and the line length. Not only that, you also only have to create your style rules in one location—your stylesheet—to have those rules apply to all of your text, across your whole website (or you can be specific and target particular paragraphs, or areas on the page). Furthermore, if you ever find yourself needing to increase your website text size, or change the body font, you only have to change the value in your stylesheet.

Quick tips

Here are some quick tips to help you out with typography on the Web.

Select a range of fonts

It’s good practice to include back-up selections when specifying your preferred display font. So, rather than simply specifying “Georgia”, you could specify “Georgia, Cambria, “Times New Roman”, Times, serif”. So, first the browser will attempt to use a font named Georgia, but if this font isn’t installed it will try for Cambria, then Times New Roman, followed by Times, followed by whatever the operating system has assigned to the “serif” keyword.

Line length

To aid readability, the average length of a line of text within your containing block should be around 40–60 characters per line, though this should vary depending on your audience (children prefer shorter line lengths, adults prefer longer). An ideal line length is shown in Figure 5:

Figure 5: 60 characters per line—the ideal line length.

The text in the screenshot is about 60 characters per line. Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.

Line height

Line height refers to the vertical space between your lines, and you can make your type more readable by increasing it a little above the browser default (which also allows more space for subscript and superscript characters)—see the difference between the two paragraphs in Figure 6:

Figure 6: Line height can make a big difference to the look and feel of text.

The first paragraph in the above screenshot has a default line height, and can feel a little cramped. The second paragraph has had its line height increased, and the text has a bit more room to breathe, making it a bit more readable. Too much line height, though, and you make the text harder to read again, so be careful.

Drop caps

By targeting the first-letter pseudo-element with something like p:first-letter { }, you can style the first letter of a line differently from the rest—such styling is usually known as a drop cap, where the first letter takes up about 3–4 lines of text—see Figure 7.

Figure 7: A typical drop cap.

Small caps

Often, fonts come with a small-caps variation—a set of capitalised letters that are uppercased but approximately the size of the lowercase variant. This is useful for when you want to capitalise something but don’t want to draw too much attention to it, so it can be used for abbreviations, for example. Even if the system doesn’t have a small-cap variant of the specified font, that’s ok—the browser will generate its own version by using full capitalisation and then shrinking the characters to around 70% of their normal size. Figure 8 shows small caps in action.

Figure 8: Small caps in action.

Hanging punctuation

A good typographical effect can be used if your sentence starts with quote marks. Using the text-indent CSS property combined with a negative value—either a value in ems (-10em), points (-10pt), pixels (-10px) or percent (-10%)—allows you to shunt the quote mark out into the left, maintaining the left vertical line of your block of text, as shown in Figure 9:

Figure 9: Hanging punctuation.

Typographically-correct punctuation and other entities

You can make your text look more professional and elegant by using the wide variety of typographic HTML entities that are available such as “smart” or “curly” quotes and en– and em—dashes. A lot of blogging and word processing software will automatically do this for you as you type, turning your regular straight quotes into the typographically-correct curly variety, and turning strings of dashes into en and em dashes. See Figure 10 for examples of typographically-correct punctuation.

Figure 10: Typographically-correct punctuation

Once you start peppering your copy with smart punctuation, your text can look far more elegant and professional—more like something from a magazine or a book than from online. Bear in mind though that this sort of punctuation can look a little pixellated for people with older screens or with aliasing disabled, so use with caution.

Then there’s entities—bits of special HTML that you can insert into your copy to generate special characters not easily available from your keyboard. Figure 11 contains a number of entities:

Figure 11: HTML entities

These can be typed in by hand, but a lot of content management software can convert or insert these for you with ease.

Pull-quotes

A pull-quote is a short extract from your text that appears elsewhere on your page with a larger text size, and sometimes a different font, to draw attention to it. You’ll have seen them in almost every magazine you’ve ever read, and they’re an effective way of breaking up your text and highlighting key quotes or phrases—and they’re also easy to do on the web with some simple markup and styling. Just make the text larger, perhaps set it in a different font, position it so that the regular text wraps around it and you’re done. There are also some more advanced solutions that involve JavaScript picking out selected text and automatically populating a pull quote from it, which can save you having to write the same text twice in your markup.

Summary

So that’s typography, and typography on the web; hopefully you can see that text online needn’t be limited to Verdana, small, #333333—there is a wide range of typographic tricks and tips that can help make your text stand out from the rest of the crowd. For most websites, the reason people will be visiting is to read what you or your authors have written; it makes sense, then, to make that reading as pleasurable as possible.

Exercise Questions

• What’s the difference between kerning and tracking, and which one is available to the web designer?
• How can you avoid “rivers of white space” running through your text?
• Name the four different types of capitalisation available through CSS.
• What’s a good line length for body content, and what factors can affect it?
• What’s the difference between a serif font and a sans-serif font? Give an example of each.
• How does hanging punctuation differ from regular punctuation?
• If you want to insert a copyright symbol into your copy, you use an HTML entity. Have a look on the internet and see if you can find all the other HTML entities. There’s about 250 of them!

This information about Typography on the web, is licensed under a Creative Commons Attribution, Non Commercial – Share Alike 2.5 license.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we’re going to cover CSS (Cascading Style Sheets). CSS will allow us to style text in a web page (and will also help us place and style AP divs.) I have detailed notes below but have also outlined required reading and videos. I would like you to cover these materials. I have also given you a few additional resources you may want to read if you want more information on the subject.

CSS
CSS – style definitions applied across a document or entire site

Cascading Style Sheets (CSS) are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

Introduction
Cascading Style Sheets (CSS) enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called “coolstyle” which has the following characteristics defined: font, size, bold, text color, background color, and underline.

CSS Features
Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

• Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height.
• Style Sheets can define new styles which can be applied to any text selection.
• The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).

CSS HTML
The definition in the css file for coolstyle is:

.coolstyle {
font-family: “Courier New”, Courier, mono;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FF3300;
border: 1px dotted #000000;
background-color: #FFFF99;
}

One method for applying the style to text is:

<span class=”coolstyle”>text to be be styled</span>

Creating Styles in Dreamweaver
Select TEXT > CSS STYLES > NEW. You will see the dialog box below:

Note: CSS styles may not apply as expected. You should always check your code to see if the CSS tag has been applied properly. You should also preview in both Safari, Firefox, and Explorer to verify that the styleis formatting consistently on both platforms and multiple browsers.

Creating a hover state
Many websites now use links that display no underline, but when the user rolls over the link, the underline shows. This is achieved using the “hover” feature of CSS.

1. Select TEXT>CSS STYLES
2. Select NEW
3. Select USE CSS SELECTOR: Advanced
4. Select name from pull down menu > a:hover
5. Select OK and then select text decoration>underline or whatever changes you want in the hover state.

An interesting alternative to the underline is to set the hover state to have a dotted underline. To do this, don’t use text decoration>underline, instead:

1. Go to the BORDER section
2. Uncheck all the SAME FOR ALL
3. Set the bottom border style to dotted, width 1 pixel, and color to your choice.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (53MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 4 videos from the YouTube site. I have posted the videos below.

Styling Text using CSS | Part 1

Styling Text using CSS | Part 2

Styling Text using CSS | Part 3

Styling Text using CSS | Part 4

Suggested Resources – Please read and view the following:
Read pages 171-189 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

Additional Resources:
Adobe videos:
“Using CSS”
“Styling Text using CSS”

Readings from lynda.com
Cascading Style Sheets
Getting Started
Understanding CSS

Recommended Readings from lynda.com
Selectors and the Cascade
Using CSS to Affect Page Layout

Assignment:

Answer the questions in the attached Quiz 3 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, April 7. Again, please be sure to include your last name in the name of the file when you upload it to the Dropbox.

copyright © 2006-2009, jamie cavanaugh