I also have a better understanding now of how to wrap CSS rules around an element using the DIV and Span tags. At the beginning of the week I struggled a bit with this because I forgot about the DIV tag. I thought that in order to apply a class or id to something it had to be applied with something like a paragraph tag, or another tag which would somehow alter the content I was applying it to. I wanted to build my thumbnail galleries by wrapping padding around each thumbnail and the caption below it, and then floating the combined elements next to each other. I could not remember a way to do this at first so I tried making my galleries with tables. I looked at some other art sites online and tables seemed like a pretty common way to do that, so I decided to follow their example. Watching the Lynda.com tutorials showed that inserting a table was very easy to learn quickly. I did almost every portfolio page with a table, but received feedback that it would be better if I used CSS to build my galleries instead of tables (which did not surprise me) so I started over on the gallery building and tried harder to figure out how to apply a CSS rule to multiple elements. Looking more closely at one of our earlier homework assignments helped me remember how to do it. I was much happier when I got the galleries put together using floats and padding. The tables seemed like they would be a real hassle to update. When I add new art I will want to make the newest item come first in the gallery, and when styled with CSS it will be easy to add a new element anywhere I want. With a table I think it would only be easy if I wanted to add something to the last cell of the table. To move something in front of the other table elements looks like it would take a lot of tedious code shuffling (and seems impossible to do from the designer mode).

I did have one major stumbling block this week which I still have not figured out. There seems to be something in my code somewhere causing something in my sidebar to interfere with the floats I place in the main content area. I built my galleries by putting a ‘float left’ on all the wrapped elements so that they will all float next to each other. I had a clear float at the end of each row. The first clear float seemed to be interacting with the sidebar somehow, because my second row of thumbnails would get pushed down below where the sidebar ends.

At first I thought I had fixed the problem because I noticed that the links in the sidebar had unnecessary extra tags on them (caused because I inserted the rollover images while in design mode, and the software thought I was adding paragraphs). When I deleted these extra tags for some reason the main content area adjusted back to how I wanted it and everything looked fixed. But a short while later the gap between the first and second rows of thumbnails had reappeared. Then I thought that maybe the problem was that the div box making up the sidebar itself is floated left…but adding a clearfloat inside the sidebar or after the sidebar div only caused the entirety of the main content area to get pushed below the end of the sidebar.  Everything I could think of trying only made my format more messed up instead of better. I compared my code to a new unaltered default of the ‘CSS fixed width 2 column with header and footer layout’ and the code for the sidebar was exactly the same as what I had (minus the interior content). I am completely stumped. In the end I just resorted to removing the ‘clear float’ tags at the end of each row, as I intended for my floated thumbnails to fill the entirely of the box I had them in, and the size of the box wrapped around them forced them to line up exactly how I wanted without breaks. (I kept a clear float after the last of the thumbnails in each gallery.) This seems to me like it works fine for my current set up, but I am unhappy I didn’t figure out what was causing that one issue since it means I can’t change the appearance of the rows of thumbnails without changing the size of the container they are in.

Beyond that though I am very happy how everything came together. I really really like the ability to insert image rollovers with javascript. That is extremely cool. I loved how easy updating uniform sections of the site became when I made templates to build the pages. I made an additional graphic for my contact page (an envelope and pen) because that one part of the site looked too empty to me. I think it is awesome that CSS allows you to even adjust the kerning of the font you use…I wasn’t sure that would be possible when I was making my comp. Overall I am really happy how close to my original plan everything turned out. I feel like I learned quite a lot through working on this project. I also found that I was increasingly more comfortable making my changes in code view instead of design view. I had a lot fewer issues when I typed the selectors in myself instead of inserting things through panels. It also caused me to remember how things worked a lot better.

Here are some screenshots of he finished website:

The homepage:

The main portfolio page will feature an image of whatever my newest piece of artwork is, so the graphics will occasionally rotate:

The pen and ink gallery of my portfolio:

The contact page:

I registered a domain name tonight (gnarlycat.com) hopefully by the end of the week I’ll be able to post a link to a live version of my site.

Full list of available domain registars: ICANN-Accredited Registrars

Rotating Images with Dreamweaver and JavaScript

Adding a Flash/XML slideshow

CSS Zen Garden

Remember to always designate link, visited, hover and active states for you links, even if only one of those will change color (ie state the color for a visited link even if you want it to stay the same as an un-clicked link). Leaving states undesignated might cause a browser default to override your intended styling. You can group the selectors together in a rule if they are to have the same attributes ie: a:hover, a:active {

When underlining text or links you have an alternative to simply stating “text-decoration: underline”. You can create an underline with “border-bottom” which gives you more control (you can state the width of the line or make it dashed, etc.)

Don’t float things next to headings, they need to always have their own line to themselves.

To keep track of the colors on your webpage you can place a color guide inside of your CSS document. This will not affect the code if you put inside /*……*/

When floating objects if you do not clear between them they will float next to each other on the same line. If you want them on separate lines be sure to clear.

When listing attributes for a link if you include “display: block;” the link will extend for the entire box around the link and give you more click-able space, and not just the text itself.

Pseudoselectors must be used in the correct order.
The correct order for links is: link, visited, hover, active.

In Dreamweaver you can use the behaviors panel to add javascript to your code without writing it yourself. This allows for an easy addition of image rollovers, etc.

You can create an image rollover by either choosing “insert–>rollover image” and then selecting both images and the link to include in the dialog box which pops up, or you can use the behaviors panel and select ‘swap image’ from the drop-down. You can choose ‘on click’ or ‘on rollover’ to determine when the image will change. You can also designate if the change stays after removing your mouse or if it will swap back when you take the mouse away (‘restore images on mouse out’). It is best to select ‘preload images’ so that the images will appear smoothly unless the page has a really significant quantity of images on it, which may cause the page to take too long to load.

Whenever you use javascript with an image it is necessary for that image to have a unique ID or name attribute.

To cause the cursor to turn into a hand when it moves over something interactive, add this to the CSS:
cursor: pointer;

Making the Most of a Meta Description
Meta descriptions embed keywords and a short description in your html document. The text from the meta description displays as the description for your site when search engines display their search results. Google says that the meta content does not affect how a site ranks in a search, it only affects how it displays. The meta description is important however, because having a good concise description will affect the likeliness that people will click on your link when they see your site in the search listing. The search engine only displays the first 160 words of a meta description, so it 150 words is a good length to target when writing one. Quotations will cause the description to be abruptly cut off, so either avoid using quotes in a meta description, or change regal quotes to be only single quotes so your description does not lose content. If a site is so multifaceted, that it cannot be summed up in a 150 word summary, then it might be better to not write a meta description. The search engine will pull text from around a keyword to display if there is no meta description. This might be more affective for drawing a reader in than a description that is not relevant to the keyword they were searching for.

Save Time with Templates in Dreamweaver
-Step by step walk through of how to create custom templates in Dreamweaver.

Dreamweaver

When you create a new document in Dreamweaver, you can attach an existing CSS style sheet to your html document, or you can create a new CSS sheet at the same time, or embed the CSS into the head of the html document (you can also add CSS directly into the html on an inline level, but this is not recommended.) If you place the CSS in the head and later decide you wanted it as an external style sheet instead, you can easily move it by selecting it in the CSS rules panel and right clicking to select “move CSS rule” (likewise you can easily move rules from an external sheet into your document.)

CSS can be written to have either Absolute (an exact fixed size which will not changed based on variant conditions such as different browser window size, etc) or relative (measurements are related to other elements on a page and can change proportionally) measurements.

The most common relative measurement to use are ems. (This measurement comes from the size of a capital ‘M’ in any given font you are using.)

If you want to make a font stack which is different from the default ones which come preloaded with Dreamweaver, you can select ‘edit font stack’ from the last option from the drown-down menu next to ‘font’ in the properties inspector. Make sure to end a font stack with a generic font-type such as ‘serif’ or ‘sans serif’.

Build Better CSS Font Stacks (A helpful site for font stacks.)

From an html-only standpoint the tag for em will italicize (emphasize) text and the tag for strong bold (strongly emphasize)text. These are known as phrase element.

In CSS by default headlines will be bold. To make them not bold use the code ‘font-weight: normal’. You can also control the font weight by setting a numeric value between 100-800. 100 is the lightest possible value, and 800 is the boldest. 400 would equal normal weight.

When setting font style with CSS: Italic equals the italic version of the font. Oblique is the regular version of the font, but it has been skewed to a slant. In general it is better to use the italic option, but oblique is useful if a certain font does not have an italic version available.

Line-height In general font on a screen needs more white-space between lines in print, so do not make web line-height decisions based on print conventions. Generally 140% of your font size is a good online line-height value. You can set line height in all of the same values that you can use for font, but it also has an additional option of “multiple” (where the line height value is determined by multiplying a certain value times the font value.)

If you want a heading to be broken into two lines, use a span tag to move down the second half.

When setting margins you can use shorthand to set the value for each side in one rule. margin: Top value, Right value, Bottom value, Left value. “trouble” (TRBL) to remember.

Using padding for spacing
You can create an indent by adding padding to only one side.

Aligning Text
text-align: (left, center, right, justify)
Alignment is inherited from a parent element.
Most browsers default alignment to left, so if you do not set a text align value it is usually the same s setting ‘left’ for your value.

You can use vertical-align to create subscript and superscript text. setting vertical-align to a negative value will cause the element to get pushed below the text baseline/

Vertical align may only be used with inline elements.

Inserting links in Dreamweaver

Insert a link through the menu bar:
Insert–> hyperlink
or Common–> (hyperlink symbol)
This method is a good way to do it because the inserting dialog box prompts you to provide the most information, such as alternate text, etc. You must remember to add link names on your own if you add links with other methods.

<bAdding a link to pre-existing text
highlight txt you wish to convert into a link.
Add link (you can browse for it) in the ‘link’ field in the properties inspector (under HTML tab)

Use ‘Point to File’ icon:
The ‘point to file’ icon is next to the link drop-down field (between the box and the folder-shaped browse button, it looks like a target.) Click the icon and hold down your mouse. Drag the mouse over to the files panel. Find the file you want to link to in the files panel and select by holding your mouse over it and releasing. Dreamweaver will add it to the link box in the properties inspector.

Create a link to a file which has not been made yet
Highlight text you wish to turn into the link, in the link box in the properties inspector type in (the name off the folder you intend the linked file to be placed in when it is ready)/(name of the file to be created later). The link will be ready and will work once the future file is placed in its designated folder.

If you are linking to the same file more than once on a page, the link will be stored in the link drop-down in the properties inspector, so you have a shortcut to add it. (But you will have to re-title it each time, only the link itself is stored).

Absolute Links
When linking to an external site, it is important that you type out the entire address; you cannot leave off the ‘http’ part like you can when typing an address into a browser.
Adding target: _blank will open the link in a separate window.

Email Links
To make a link to an email address:
In the common objects menu bar there is an envelope shaped icon you can click to add an email link.
Or you can add “mailto:” in front of the email address in the link box in the properties inspector.

To force a subject line to the email when the link is clicked:
Same as above for adding email link, but after the address place a ‘?’ followed by the desired subject line.
Example: mailto:email@address.com?Subject Line Goes Here (you can have spaces in the subject line but not in the ‘mailto’ part).

Article on why it is preferred to use unordered lists when creating navigation: Unordered Lists: More than Just Bullets

CSS Cheat Sheets -Gives downloadable pdfs of basic CSS code in an easy to reference list.

Whats New in Dreamweaver CS5 CSS Layouts
An overview of changes made to the CSS layouts that come with Adobe Dreamweaver, and explanations for the best ways to code so that your layout will work in all browsers. For example, when making lists for navigation links, it is best to set the margins and padding to zero. You can add the spacing in the .content selector. Lot of code examples to illustrate various basic functions you’d want to include. How to add widgets for making drop-down navigation links. Explanations to why it’s important to include focus as well as hover state in your link code, etc.

Dreamweaver CSS Starter Pages

When you create a new document in Dreamweaver you have the option of choosing a starter CSS layout with the structure already in place for various types of pages (such as a one or two column fixed or liquid layout with options of a header and footer, etc.) You can attach the CSS code either from linking to an external style sheet, embedding the CSS in the head of the HTML document, or adding it as an inline style.

Edit–>Preferences–>CSS Styles here you can set whether or not Dreamweaver recognizes shorthand notation. (Checkboxes under ‘use shorthand for’.

The CSS panel: You can add properties to the CSS rules by highlighting them in the CSS panel and selecting ‘add property’. You can choose a property from the drop down or type one in.
In the bottom of the CSS panel is a button that looks like a sheet of paper with a corner folded down and a plus sign to one side. Click this button to add a new CSS rule.

Using the code navigator. If you click inside any element a symbol like a steering wheel will appear. clicking on this symbol will bring up a window that lists all the styles affecting the element. This is an easy way to edit the styles applied to the element.

Class selectors are an HTML attribute. Add a class by selecting it from the pull-down menu in the HTML tab of the properties inspector.

ID selectors are more specific than class selectors and will override a class selector when the two are in conflict.

In Dreamweaver, dotted lines will appear to differentiate a DIV. DIV tags divide your page into specific regions. Most pages have a wrapper containing all of the DIVs. The wrapper establishes the size of the page’s content.

It’s best to keep your CSS simple.

The Box Model all of the components of your webpage are contained in boxes. The boxes have 5 properties: width, height, padding, border, and margins. Adjusting these properties will keep the content from getting too close together and give you options in controlling the site’s appearance.

You provide 2 values to set a margin: The first value affects the top and bottom of an element and the second value determines the element’s right and left. Browsers automatically add default vertical margins, so setting the top and bottom margin value to 0 will prevent you from having extra margins.

Comp of homepage:

My homepage is primarily gong to be a single large graphic and a logo (the logo is my signature in Japanese katakana). I added brief text introducing my art. I originally had graphic based navigation for the top links but I changed it to text based navigation to improve my site’s search engine accessibility. The graphics that I made for the top navigation were not distinct enough from plain font to be worth handicapping the site’s accessibility. I upped the kerning of the font (Arial) in this mock-up though…I’m not sure yet if that is something I can do with either HTML or CSS? I might not be able to keep the text with the appearance I ideally want.

COMP of an interior gallery page:

This is the first of my gallery pages. I have more paper collage artwork than the other categories of my gallery sections so I thought it would be the best one to sample. Currently there are 20 thumbnails on the page, as I add any additional art I will make the gallery go on to a second page.

I kept my idea for graphic navigation for the side links of different gallery categories. I drew all of the links in hand lettering and used a different style for each category.

Comp of “About” page:

This s pretty straightforward, just a photo of me and my artist statement! No side navigation to this category as the ‘about’ is just a single page.

I hope the ideas I have laid out work as I translate them to a real site! I am a bit nervous about pulling it all together in Dreamweaver and adding the code, etc.

Search Engine Watch

20 completely free SEO tools – Tools to let you see ways your site can improve for search engine finding.

SEO Software, Simplified – Search Engine optimization.

Search Engine Roundtable

Search Engine Placement Tips by Danny Sullivan
This article gives advice on how to increase your chances of ranking high in a search engine listing. One good piece of advice is to make your search keywords more than a single word long (my intuition would have been to use single words, so this is helpful advice). Most people type phrases when they are searching for something specific, but more people have single keywords in their webpages, so there is more competition to end up in the results. Having a more specific keyword makes you more relevant to specific searches. The placement of your keywords also affects its search listing, Search engines give preference to sites where the keywords are listed high on the page. Including them in your title and headlines is the best way to go. Having HTML text instead of including text in graphics is always better because it gives more words for the search engine to scan (anything written in a graphic can’t be seen by the search engine), and the more times a keyword is repeated the more it will get the engine’s attention. Making sure that all of your internal pages are well linked together is also important, so that the search engine will follow the trails of links and process more of your site. Having your site linked to from other quality sites on comparable topics will also improve your ranking by search engines, as well as potentially get you visitors who are already visiting the other sites.

The Benefits of Slicing Images
This article explains the advantages of using Fireworks to slice images and export them as pieces instead of as single entities. Often your image will have different sections which will work best in different formats. Slicing an image allows you to target the different sections and save them in the format that will most optimize them (such as exporting a photo portion as a jpeg, and a text portion as a GIF, etc). Often slicing an image will reduce the overall file size. However, even if the file size is not reduced, the page will often load faster when it contains several small images instead of one large one.

Blasting the Myth of the Fold
“Above the Fold” of a webpage is everything that is visible on your page without having to scroll down. The name is taken from journalism, where above the “fold” of the newspaper, is a literal fold–everything that is visible when the newspaper is folded in half. Traditionally it is assumed that casual browsers will not bother to scroll down when they look at websites, so it is important to concentrate all the most essential information above the fold, in order to avoid missing the user’s attention. Over the years research has shown that it is becoming common for people to scroll down, and the risk of information below the fold getting missed is not as relevant as it once was. In spite of that many people cling to the idea that it is critical to keep as much content above the fold as possible. Some techniques for encouraging people to scroll down is to strategically place content (such as photos) overlapping he fold, so that they are clearly cut off at the bottom. This makes it more noticeable that there is more content further down the page. It can be difficult to predict where the fold will fall on various users’ computers though, due to the wide variety of monitor sizes these days, so you cannot entirely rely on content placement to compel people to scroll. The best way to get people to scroll below the fold is simply to have high quality content which people will naturally want to finish reading/looking at through its completion. Although people are more inclined to scroll these days, the fold does remain relevant. Content like navigation and any type of user controls should be above the fold, whereas interactive features which rely on reactions to the content do better at the bottom of the page.

ClickTale – A service that records your users’ activity on your site and gives you statistics on how your site is being used, what parts are receiving the most attention, etc.

The Dao of Web Design

Five Principles to Design By

Photoshop

You can open files in Photoshop with Mini Bridge.

It is preferable to take your photos in raw format and do the editing in raw. Raw files have more data than jpegs, and when you edit the file the original file is not permanently altered.
Clicking on a photo in Mini-Bridge will open it in Adobe Camera Raw (or in regular Bridge you can right click and select ‘open with Photoshop’ and it will open in Camera Raw.

When editing photos for the Web, convert the color profile to sRGB.

After editing in Camera Raw you can make further non-permanent adjustments in regular Photoshop by editing with adjustment layers and filters instead of editing the file directly.

Filter–>Convert to smart Filters :Converts your layer to a smart object which allows you to apply filters from the filter menu.

Always resize a photo first and only sharpen after it is the final size. The sharpening is dependant on size, and info will be lost if you change the size afterwards.

When resizing for the web change the drop-down to ‘Bicubic Sharper (best for reduction)’

Sharpening only effects one layer. If you need to sharpen a document with multiple layers you can make a composite layer which duplicates all the layers below it in a single top layer. To make a composite layer, select the topmost layer you want included in the composite. Hold down the ALT key while you select ‘merge visible’. Instead of merging the existing layers it merges a new layer with duplicates of the layers below it.

If you convert the layer to a smart object and use a smart layer you can come back later and re-edit the sharpening, instead of the sharpen being a permanent change.

To sharpen: Filter–>Sharpen–> select either ‘smart sharpen’ or ‘unsharp mask’. (The 2 options are similar but Smart Sharpen offers a larger preview and more settings to sharpen with.) Smart Sharpen also lets you have different settings for sharpening the highlights separately from the dark areas.

Fireworks

Resizing with the 9-slice scaling tool will change the size of the image but not the size of the document. Click the ‘fit to canvas’ button (or Modify–>canvas–>Fit Canvas) to resize the entire document to make the resized image.

When using the selection tools you can switch back and forth between the different tools (like the magic wand and lasso) without losing the selection. Use the magic wand to select large similar areas, and then use the lasso to add or subtract refinements. Hold down ALT while you select with the lasso tool to subtract from the selected area (don’t unclick while drawing with the lasso). Make sure you set all selection tools to the same type of edge (ie anti-alias, etc).

You can add a mask to a bitmap by selecting an area with the marquee tool and clicking the “add mask” button on the bottom of the layers panel (it looks like a circle inside of a square.)

You can add effects like drop shadows, etc, to a masked item. In the properties menu click the filters drop-down and select “Photoshop Live effects” to get the type of filters available in Photoshop. Selecting “stroke” from this part of the menu will add a border to an image. ‘Outside’ will give the stroke rounded corners. ‘Inside’ will give sharp corners.

To use a vector shape a s a mask:

A mask with a fade:
Select object.
Commands–>Creative–Auto Vector Mask.
Brings up box with 8 options to control the direction of the fade. After you apply the mask there will be a line running through the image. You can use this line to control the fade. You can tell a layer is a vector mask is there is a pen icon on the corner of the mask box that shows in the layers menu.

To make a regular mask with a vector object:

Place the vector shape over the bitmap image.
Cut the vector shape out of the document (control + X or edit–>cut)
Select photo
Edit–>paste as mask
The vector will mask the photo.

Here are comps of the portfolio website I am designing for my final project:

Homepage:

Interior gallery page:

project_profiler (Personal portfolio site.) Flowchart and storyboards are contained along with the rest of the profiler outlining.

Storyboards (homepage and gallery page): gnarlycat_storyboards

Wireframe for home page -This looks a bit sparse because I wanted the first page to be very simple.

Wireframe for a gallery page from site – This is more typical to how the rest of the site will be laid out.

NOTES/LINKS:

Five Essential Principles of Interaction Design

Interactive design is the relationship between the user and the product which it is being designed for.

Interactive design needs consistency. If your interface is not consistent, the user will be distracted by noticing the differences, and will distract their attention from the content.

You want to design with consistency in both aesthetics as well as functionality.

Good interactive design also needs visibility. There is no point to good design if features go unnoticed by the user. Mystery meat navigation is an example of bad interactive design. It should not require effort from the user to navigate your interface.

Interactive designs should be easy to learn and remember.

Perceived Affordance: Taking advantage of the user’s preexisting knowledge. Using images of real world objects with similar functions (like having a link on a website look like a button you can press) is an example of this.

The outcomes of a design’s interactions should be predictable. People will be afraid to interact if they cannot predict the consequences. Labels and previews will help set people’s expectation.

Feedback is helpful for improving your design, but the gathering of feedback should not interrupt the user’s interactions.

Prototyping your design is very important. The design you envision in your mind does not always function well when actualized. You can only tell if a design is good by actually using it.

When designing a site, remember to consider ways which the site may still grow.

Grid Based Design: Six Creative Column Techniques

Typography resources:

I Love Typography
Anatomy of a Web Font
Code Style’s Combined Font Survey Results
A List Apart: On Web Typography
Glossary of Font Terms

Lorem Ipsum Generator

The Elements of Typographic Style Applied to he Web
Typophile
Typograhica
The Font Feed

Stacking fonts with CSS:
Building Better Font Stacks
Code Style: Font Stack Builder

Resources for downloading fonts:
Font Squirrel (Free)
Fontspring (For purchase)

Web Font Services:
Typekit
Fontdeck
WebINK
Google Font Directory
Webfonts Info

To test your text in a browser window with differenet leading, kearning, alignment options:
Type Tester
Typechart

Make your own handwriting into a font: Your Fonts

ASCII art generators:
ASCII-O-Matic
Patrick Gillespie’s Text Ascii Art Generator

Automatic font identification system: What The Font

W3Schools HTHL entities page (Charts of code)

Getty Images
Jupiter Images
Foto Search
Corbis Images

Shutterstock (subscription baed)
istockphoto (Pay per image)

Web Design:

Vincent Flanders on bad web design

Web Pages That Suck

“Mystery Meat Navigation”: Navigation items that are not clearly labeled, and whose purpose is not apparent until your mouse rolls over them and you can read th epop-up label.

Flander’s Examples of Mystery Meat Navigation

The site for Mxyplyzyk was a particularly irritating example of mystery meat navigation and bad usability. The links on the home page are constantly flashing. Every few flashes the name of what the links represent appears, but the timing is so brief that you barely get a chance to read it. You can find the label again by hovering over the link, but I felt so bombarded by information by the flashing of the other links around it, my memory had zero ability to retain what I’d just read once I moved the mouse away from the rollover. Aside from the completely gratuitous use of Flash and unclear labeling via mystery meat navigation, the site’s usability was further compromised by the quality of the product thumbnails. The thumbnails were very tiny, and have been cropped to such close up views that it is extremely difficult to guess what the product is before clicking for the enlarged picture. I don’t like to waste a lot of time looking at things that don’t interest me, so not being able to get an immediate idea of what something is by the thumbnail usually discourages me from bothering to click and have a closer look. This site is probably losing a portion of their business from people not wanting to waste their time trying to figure things out. (On the other hand, this company is appropriately named, the character Mr. Mxyplyzyk is supposed to be extremely frustrating/irritating, so maybe an element of the site design was intentional….)

If I thought that the flashing mystery meat in Mxyplyzk’s site was frustrating, Pearl Brite managed to out do it. On the front page of this site, the links are not just hidden mystery meat style, but the mystery meant icons bounce around the page. By the time I’ve hovered to reveal what a link contains, it’s moved away from my cursor and I have to track it down again. This is one of the most terrible ideas I’ve ever seen for site navigation. Not to mention, the bouncing bubbles are initially a nice bright blue color. The text which appears with the mouse rollover is white, and would potentially have very nice readable contrast. But when you touch the bubbles to illuminate the text they wash out to a flashing cloudy pale blue, decreasing the contrast drastically when the text appears and making it unnecessarily difficult to read. If the opening page does not completely put you off and one ventures into the site, I found such features as the bouncing bullet points and menu tabs extremely distracting and frustrating to click on as well. This is definitely a site that tries my patience and would discourage me from spending any extra time browsing if I could avoid it.

Flander’s list of 10 worst Websites of 2010.

So far my favorite bad website was the one for the Association of International Glaucoma Societies

I couldn’t stare at the screen without cracking up.

Jakob Nielsen on web design

Top 10 Mistakes in Web Design

Guidelines for Visualizing Links

Photos as Web Content

The most common use for GIF animation is for advertising banners
(blue banners are the most effective at persuading viewers to click on them).
Loop 3-5 times.

Elements that can be animated in a GIF: Position, opacity, effects, layer visibility

Be very careful when using text in an animation to maintain readability. Sans-serif is better than serif.

Website design:

First step, make a morgue file to collect inspiration, examples of design elements you would like to include in your project.

Use a flowchart to begin planning out the structure of your site. Also use sticky notes to help you decide on the placement of the site’s components. Elaborate on these planning stages with a storyboard.

Keep the navigation straightforward and efficient. Keep all the different pages making up the site unified in appearance (they don’t have to be exactly the same, but they should look like they belong to a consistent site).

Fireworks:

You can convert an object into a symbol. The symbol can make working a lot more
efficient; it works somewhat like grouping as the graphic becomes a single entity, but it is still possible to edit the components making it up. It also becomes a master copy, so each time you use the symbol it is a copy of the original. If you edit it you are editing the instance and not the original. You can edit an instance and the original copy will be unaffected. However if you edit the original copy then all of the instances will take on the change as well. The allowance to make global changes by editing the original file is what makes them so valuably efficient.

If you click on an object and a cross hair appears over it, then you know that the object is a symbol.

Edit in Place Mode: allows you to double-click on something, and the rest of the document will fade out. You can edit only the thing you clicked on, separated out from the rest of the document (even if it is grouped to something, and does not exist as a separate entity).

3 main types of symbols in Fireworks: graphics, button, animation (also components symbol, an enhanced graphics symbol).

You can make a graphics symbol either from a single item or from a complex group of items.

To convert an object to a symbol:

Select object–>Modify–>Symbol–>Convert to symbol. A dialog box will come up and you can type in a name for the symbol, and select which type of symbol you would like it to be.

*To alter a symbol without the other instances also being effected, only click on it to select it once. Don’t double click. Add filters and change size in the properties panel.

You can enable 9-slice scaling guides when you convert something to a graphic. If you apply 9-slice scaling guides you will always go into isolation mode when you edit it. When you position the guides inside a symbol with 9-slice scaling enabled, the guides will always stay put. They are kept locked down as part of the symbol.

Creating animation symbols:

Select object–>Modify–>Symbol–>Convert to Symbol–>set type to “animation”

Brings up a dialog box where you can determine things like how many stages you wish to make up the animation, if it should roate or scale, etc.

A State = a frame of the animation (like a cel in traditional animation).

Inside the State panel you can control aspects like the timing of the states, if there is a delay between each one showing, etc. (The number for the state delay is to the right of the name in the states panel.) The number shown for the state delay equals hundreths of seconds (“7″ actually = 7/100th second). To slow down the speed on an animation change the timing delay number to a larger value.

Creating GIF animation in Fireworks:

Make sure that all layers you wish to remain visible are presnet in th estate when you animate. If a layer is not animated select “share to state” (highlight layer and select from drop-down menu in upper right of layers panel). You can highlight all layers at once to do this. Even if a layer is visible in the PNG file, if it has not been shared to stats it will not show up in the GIF animation.

The layer that will be animated, you do not “share to state” (This is because it ill be different in each state in order to achieve the animation). It will be distributed to the states as you animate it.

First method to animate:

1. Select object you wish to animate.

2. Edit–> Clone (this makes a copy of the object in the exact same position.)

3. Make as many clones as you want states.

4. Change the position of each clone layer to create movement. Once all of the different clones have been positioned where you want them, then select them all and select ‘distribute to states’ (select the layers in the layers menu, select ‘distribute to states’ from the main drop-down in the states menu).

If the layers do not distribute to states in the correct order, you can rearrange them by drag and dropping. test to make sure the animation runs smoothly.

To Export the file as an animation:

Optimize panel–>make sure that ‘animated GIF’ is selected (the default is regular GIF, which will not play the animation, so be careful to change it.)

Or: Save as an Adobe Flash file (File–>Save As–>Adobe Flash SWF)

Twist and Fade

Select object–>Commands–>Creative–>Twist and Fade

You can set a variety of effects, such s fading opacity, blur, moving in a circular motions, or random patterns.

Make sure to check the box in the twist and fade dialog box that says “Animate”. Click “Ok”.  Fireworks will generate all the states needed to accomplish the animation.

Tweened Animation

1. Convert the object to a symbol.

2. Make a copy of the symbol and move it to a different position on the screen.

3. Select both instances of the symbol.

4. Modify–>Symbol–>Tween instances.

In the dialog box that will pop up you can set how many states you wish to comprise the animation. You also can chose whether or not to distribute to states. Fireworks will then generate all the in between states needed to make the symbol move from postion 1 to position 2.

Export as an animated GIF.

Animating in Photoshop

Start with a layered file which hs different element son each layer.  Open the animation panel from the windows tab in the top navigation menu. There will be only one frame in the animation panel. The frame will only show those layers which are visible in the layers panel. Make a second frame by clicking the button that looks like a tiny square inside and in the corner of a larger square. The new frame will be a copy of frame 1. Select frame 2 and make changes (such as turning on the vibility of a layer which was hidden in frame 1). Continue adding new frames and making new layers visible until all layers have been added.

To add a layer and have it visible in all frames, select the layer. This brings up 3 unity icons at the top of the layers menu. Clck on the center button (“unify layer visibility”). This will bring up a dialog box. Clik “match”.

You can test play an animation by selecting the first frame and clicking the arrow button in the animation panel. o change the timing delay: Click the drop-down menu of any frame (the little black arrowunderneatht he frame icon).

To make the animation loop: Drop-down on bottom left og the animation menu. CHange from “once” to the # of times you wish the loop to play.

To save:

File–>Save for web and devices–>make sure format is set to GIF

*If you have a photo in your animation, and the GIF format makes it look bad, try increasing the # of colors).