Class 13

The Week’s Topics

Final Exam ReviewSearch Engine Optimization
Behaviors: Show-Hide elements
Spry menu and Spry elements
Pop-up windows
Due next week: Home page and Landing page design comp
Assignment: Work on final project


Assignment: Due Monday, June 4

 Continue working on your final project. Bring all of your files to our next class. I want to meet with all of you to give you feedback and to help you with your technical production.

Final Exam Review (Final Exam on June 4)

The questions below are taken from our Quizzes 1-4. Please be prepared to answer any of the below questions.

  •     HTML code to insert an image into the body of an HTML page
  •     HTML code to add a link to text
  •     HTML code at add an email link to text
  •     Tags for inserting a paragraph, line breaks, unordered lists, ordered lists, bold text, italic text, headings.
  •     Name the web file naming rules that follow basic web file naming conventions.
  •     When designing for the Web, why is it important to know your target audience?
  •     What is an information architect?
  •     What is a communication brief?
  •     What is a sitemap?
  •     What is a persona?
  •     What is a competitive analysis?
  •     What is a wireframe?
  •     Give two reasons why a lack of HTML semantics is bad.
  •     Why are external style sheets best?
  •     What is an em? (as it relates to a CSS measurement unit) And why are ems used as a unit of measurement for text in a website?
  •     What are the three major CSS selector types we discussed in class?
  •     Name the six text properties outlined in the class notes.
  •     To calculate the overall width of a box, including all padding, borders and margins, what formula would you use?
  •     What is a breadcrumb? (From reading Breadcrumbs in Web Design)
  •     Name 4 of the 5 link states when styling links.
  •     What are the three basic questions a well-designed navigational system must answer?
  •     A well-designed navigational system must also serve the goals of the site, name 2 examples of possible goals for a site.
  •     What is the golden rule of navigation?
  •     What does “hub and spokes” refer to?
  •     What is Creative Commons?

Search Engine Optimization

Basic Strategies

Five Basic Steps:

1) Add Meta Tags
2) Add Home page title
3) Have “good” Home page content
4) Initiate link agreements with other websites
5) Submit site to search engines and directory services

Step 1:
Keywords Meta Tag
Example from Starbucks Web site

<meta name=”keywords” content=”Starbucks, Starbucks.com, Starbucks Corporation, Starbuck, Starbucks Card, Gift Card, Coffee, coffe, coffie, Coffee beans, Coffee sampler, Coffee at home, Coffee gifts, Coffee brewer, Coffee brewers, Coffee maker, Coffee makers, Business Gifts, Corporate gifts, Espresso machine, Espresso machines, Espresso, expresso, espreso, Encore, Foodservice, Frappuccino, Gifts, Home delivery, Latte, Mocha, Music, HearMusic, Hear Music, Mugs, Office Coffee, Tazo, Pods, coffee filter, Brewing Equipment, Steep, Tea, Ice Cream, Double Shot, Brewing Equipment, Seattle, Pike Place, 1971, Siren, doubleshot, jazz”>

  • Include keywords or phrases of all subjects related to your site
  • Place a comma after every keyword or phrase (except for the last one)
  • You should use many applicable keywords for your web site. You can use up to 1000 characters (80-90 words) for the keywords in the tag.
  • Don’t repeat keywords more that 4-6 times. Your site may be disqualified by search engines if you do (it is considered keyword spamming)
  • Only use keywords related directly to your web site. Search engines check the keywords against the content of your site and will disqualify sites that put fake keywords in their list.
  • Put your most important keyword or phrase first in the list, and place the rest of the keywords in order if importance.
  • Include the misspellings of commonly misspelled keywords in the list
  • Use upper case letters only for proper names

Description Meta Tag
Example from Starbucks Web site

<meta name=”description” content=”Starbucks Coffee Company is the leading retailer, roaster and brand of specialty coffee in the world. The Company’s other brands enhance the Starbucks Experience through best-of-class products, including Tazo Tea Company and Hear Music.”>

The description text is used by about half of the search engines to describe your site in the results section of a completed search.

  • The description should be a 1-2 sentence description of your web site with maximum of 250 characters (25-30 words)
  • Use as many of your important keywords in the description as possible, especially your primary keyword

Step 2:
Home page title tag
The title tag serves to identify your site to the user, as well as to the search engines

  • • The title can be up to 100 characters
  • It should include as many important keywords/key phrases as possible

Step 3:
Home page content

The home page content is important because many search engines use this text to analyze the site and create appropriate match-ups with search requests.

  • • Put your most important keyword phrases in larger text and make it bold.
  • Include your important keywords in your content, and place these keywords in the upper part of the web page. The search engines check your keywords against your page content.
  • Limit the amount of content on the home page, and focus on your most important search words. Put the most important searchable content at the top of the page.
  • If your content is embedded in images, be sure you use ALT text for all images.

Step 4:
Initiate link agreements with other websites

Many search engines (especially Google) determine the placement of a site based on how many other sites link to the site.

  • To increase the numbers of sites linking to your site, initiate link exchanges with other sites. These work by a mutual agreement where each site links to the other site.
  • Make sure any of your affiliated sites have links to the your new site. Often companies will create multiple sites related to a topic, and link between them to enhance their position.
  • If your site already exists, you can search for other sites that link to your site and see how well you are doing. In Google, use the “link:” prefix before your web address. For example: link:www.company.com

Internal links
It’s important to have links within your site to your different pages.  The text used in the links is also very important and should directly correspond to the key phrases you would like people to use to find these pages when  searching.

Step 5:
Submit site to search engines and directory services
Search engines may not find your site automatically or very quickly. To improve your listing among the search engines, you must submit your site to the search engines. There are several approaches to submitting sites:

  • Submit the site manually to each search engine using their free submission forms
  • Submit the site to a web directory
  • Pay the search engine to submit your site. The policies vary depending on the search engine, but this will at a minimum ensure that your site will show up sooner than the free submission. Some sites will list your site better if you pay them.
  • Pay a submission service to submit your site to many search engines.  This saves you time, but opens you up to spam mail.
  • Hire a professional organization to manage your site search engine status
  • Buy SEO (Search Engine Optimization) software to automatically analyze and submit your site to many search engines.
Suggested reading

How does a webmaster increase the number of visitors to a website?

Behaviors

How to add interactivity to a web page

Introduction

Dreamweaver calls its way of adding interactive JavaScript to a web page behaviors. Behaviors are actions associated a specific event (e.g. onMouseOver) that are attached to an object on the page (e.g. an image). When a defined event occurs (e.g. a mouse click) for that object, the action is executed (e.g. play an animation timeline). Usually, a behavior causes something to happen to a named object in the page.

Note that to add a behavior to an object on the page, the object must be a link. In other words, it must have an <A> tag. The easiest way to do this is to select the object, and put the “#” character in the Link box in the Property Inspector.

Behaviors and AP elements

Show or hide a AP element

  • Name the a AP element you want to show/hide
  • Select the object in the page that show/hide the a AP element
  • In the property inspector for the selected object, put the “#”character in the link box (or a named anchor – see discussion below)
  • Open the Behaviors window
  • Using the “+” pull-down menu, select SHOW-HIDE ELEMENTS
  • Select each AP element you want affect
  • Select SHOW or HIDE for that AP element
  • You can affect multiple AP element by selecting each AP element and setting show or hide for that AP element
  • Select OK when finished
  • In the behaviors palette, click on the just-entered behavior
  • In the Events column, click on the default event to set your preferred event for this action
Pop-up windows (Open Browser Window)

Creating custom browser windows with JavaScript

Pop-up windows are used to display additional content in a new browser window rather than replacing the current page. The simplest way to make a pop-up window is to use the “_blank” target for a normal link in a page. But these windows are standard browser windows.

If you want to specify the dimensions of the window and control features such as scroll bar visibility, menu availability, toolbar visibility, and so on, then JavaScript is required to create the window. Dreamweaver includes a behavior called “Open Browser Window” to generate this JavaScript.

To have a link open a pop-up window:
  1. Create and save the HTML page to be opened
  2. Select the text or image in the page that will open the pop-up window
  3. In the property inspector for the selected element, put the “#” character in the link box (or, insert a named anchor so the page doesn’t scroll to the top – see the named anchor note below)
  4. Open the Behaviors window
  5. Using the “+” pull-down menu, select OPEN BROWSER WINDOW
  6. In the resulting dialog, browse to the HTML file you want to display in the new window
  7. Enter the width and height for the window
  8. Select the desired browser window attributes. You should experiment with these checkboxes to see how they affect the display size, appearance, and features

Pop-Up Notes
  • onClick event: I’ve had the best luck with using the onClick event to make pop-ups. Other events seem to have trouble with placing the window in front of the current window, or showing a cursor change.
  • Window name: If your site has multiple links that open pop-ups, and you want them all to be in the same window, you must put the same name in the “Window Name:” field in each open browser window dialog.
  • Named Anchor: The “#” in the <A> tag will cause the launching window to scroll to the top of the page ifyou are positioned lower on the page. To avoid this, place a named anchor at the position of the pop-up link (INSERT>INVISIBLE TAGS>NAMED ANCHOR), and then make the link URL to that named anchor (e.g. “#popup” rather than a simple “#”).
  • Consistent pop-up window size: If you are putting graphics that must fit exactly in a pop-up window, you may find that there are either 10 extra or 10 less pixels in the window than you expect. The fix is this:Set the resize and scrollbars attribute settings to “no”. The window scrollbars and resize handle are what browsers treat differently. If you don’t specify what should happen, some browsers leave space for them even if they aren’t showing, others don’t. So rather than using the default setting, you can avoid any ambiguity and fix the problem with code like this, which explicitly says do not display the scrollbars and resize handle.onClick=”MM_openBrWindow(’pop_up_example.html’,’popup’, ‘scrollbars=no,resizable=no,width=200,height=300′)”You can edit the HTML and insert in the “scrollbars=no,resizable=no,” text, or, when you use the Dreamweaver Open Browser Window behavior, check the boxes for “Scrollbars as Needed” and “Resize Handles” in the Open Browser Window dialog. Then open up code view and change “yes” to “no” in the code: scrollbars=yes,resizable=yes –> scrollbars=no,resizable=no

 Spry Elements

This week we’re going to cover several items that aren’t required for your final project.  You’ll need Dreamweaver CS3 in order to create the spry menu bar. Earlier versions of Dreamweaver do not have this feature.

The spry menu bar may be something you want to use in your final project. You assignment this week is to create a spry menu bar so you might decide you’d like to use one in your final project.

We will also cover using Spry widgets to create a tabbed panel and Spry effects.

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 2 videos from the YouTube site.  I have posted the two videos below.

Spry Menu | Part 1

Spry Menu | Part 2

Additional Resources

Adobe video: Creating Menus with Spry Widgets

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.

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.

Note: You can also insert a Tabbed Panels widget by using the Spry category in the Insert bar.

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.
Additional Resources

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://labs.adobe.com/technologies/spry/samples/
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WS33DFC4C4-FED7-4899-8034-C8F567178AC4.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

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



Comments

  1. Jeanette SImatauw May 22nd

    Comment Arrow

    Dear Professor,
    Could you look at my Assignment7 please. I’ve dropped it couple weeks ago and still got 0/100 on the grade :-)
    Thank you …

    Jeanette SImatauw


  2. Drew Polk May 23rd

    Comment Arrow

    Hi Jamie,

    I uploaded my Assignment 7 to my folder on the server. Just wanted to let you know, thanks!

    Drew


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66