WEEK 5

post your links to your final versions of your sites on the blog here and lets look at them together. Today will be all about trouble shooting and individual site reviews / help. We’ll go over anything that people were having trouble with. By the end of class, hopefully, everyone’s site will be working.

my site. I have failed at image replacement!

my hope is to tackle image replacement again in class manana. meanwhile, homepage (and only homepage, sub pages are not built yet) up! Enjoy the magic.

Also- vertical text?

Suppose I want vertical text (text flowing down the right side of a header image- is this something that would be better to create in photoshop or is there a way that Dreamweaver rotates/verticalizes text?

how do I use an invisible scrollbar?

I’ve got a p tag with overflow- and I’ve got the scroll option going, but I want to have the ability to scroll without a visible scroll bar. How does that work? Is there a way to do that in the program or do I have to import code into the css, and if so, what is it?

Thoughts? Whee!

Week 4

Review of CSS positioning
We’ll go over again how to use Dreamweaver to do the following:

Here is another resource that explains much of what we went over last week

File Structure and Site organization

Images when and how to use backgrounds and IMG tags

Interface Design Principles

Now we’ll talk a little about the design process.

The Basics

Function First. A Web site is like a chair. Aesthetics don’t make up for poor usability. That beautifully carved and varnished cherry wood contraption in the corner is no good if you can’t sit in it.

Your interface is a frame for the content of your site. Just like a piece of fine art, the frame shouldn’t overshadow the picture.

Don’t make me think. Your Web site isn’t a puzzle for your users to solve. When they hit the home page, it should be immediately apparent what they can do next. Think about it, when you go to a Web page, do you carefully read every word and weigh your options before clicking to the next page, or do you quickly scan and take a shot at the best guess for what link or button will get you what you want?

Don’t reinvent the wheel, unless what you really need is a jetpack. At this point, Web designers have figured out the best solutions to the basic Web problems. And, visitors to your site spend 99% percent on other peoples sites. So give them something familiar.

Where am I? Where can I go from here? Clear, persistent navigation is crucial to a successful site.


Page Size

Unlike a printed page, you can not predict or truly control the amount of pixels you users will see. Here’s a few quick stats to chew on:

October 2008 Monitor resolutions:

1024×768 – 45%
1280×1024 – 31%
800×600 – 7%

(These stats are from The Counter)

To further complicate things, now many users have the ability to view the Web through mobile devices. The iPhone, for example, has a screen size of 480×320 (but with that nifty zoom feature) and they go down from there.

So what’s a designer to do? You’ve got two main options:

  1. Use a fixed layout, and design for the lowest common denominator. Since 10% of users are still looking at the Web at 800×600, build for them and assure that the largest amount of users will be able to easily view your page.
  2. Use a flexible layout, one that resizes to optimally fit the current browser window.

Each of these approaches has its drawbacks, and in truth you will probably find yourself splitting the difference more often that not.

Regardless of how you decide to tackle the problem, building to optimal page size means keeping key elements “above the fold.” Key elements include navigation, branding, and enough page content for the main points to get across. And remember that users are willing to scroll horizontally or vertically but rarely want to do both. Nor do they want to scroll through more than a couple of screens of content. Pages longer than that should be broken up. Last, don’t forget that the maximum visible page area is actually smaller than the screen size due to browser interface elements (sometimes called browser chrome).

A few good links


Creating a Design Mockup

Creating a template

  1. Open the wireframes that you created for your site. You are going to use this as a guide for setting up your template. For every distinct interface that you have defined for your site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 800×600 or 1024×768, depending on what size you decide to build for
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.

IMAGE REPLACEMENT TECHNIQUE

this is how the pros use images for headers, navigation etc. we’ll spend most of the day on this- this is an essential technique for making it out of the amateur web designer cul-de-sac and onto the highway to professional quality web sites- you can use dreamweaver as your friend in applying this technique- we’ll talk about how

The Recipe:
these things must be set in the CSS for the element

if you have all those elements it should work. for more see my bookmarks on the subject.

EXAMPLE FILES

This is a link to a zip file containing all the examples we used in class.

workin’ from the code, yo. It’s very hard.

working directly from the code and having lots and lots of trouble. I can’t seem to make floating work for me, I think I’m missing a crucial step, also div tags and naming is/are giving me a serious run for my money.

I’m excited for class tomorrow, hopefully I can learn how to fix some of these issues. Whee!

My current page is here. it still is nothing to write home about.

week 2 site uploaded

Well, this is a little embarrassing, but the page, i’m posting is from tutorial in “Dreamweaver: The Missing Manual”. Tried to start a new website from scratch and was having trouble, so went to the manual and through I would do the tutorial that said it would take an hour…. welllllll I was much slower than that, but I did wind up using a lot of CSS. Curious to see what you think of the code that was generated by DW to produce the page: http://2humble.com/hans/chia_vet.html

week 3

layout

  1. A quick review of Visual Formatting Model— THINK INSIDE THE BOX!
    1. Box Model: The box model defines how elements are displayed. Every CSS element forms a “box” composed of these components:
      • Content – The actual content of the element such as text or an image. When using the width property, you are defining the width of the content.
      • Padding – Define the space around the content using the padding-top, padding-right, padding-bottom, padding-left properties.
      • Border – Define a stroke around the content and padding using the border-top, border-right, border-bottom, border-left properties.
      • Margin – Define the space around the combined content, padding and border using the margin-top, margin-right, margin-bottom, margin-left properties.
    2. IE/Win Box Model Quirks
      1. Diagram: Comparison between W3C and IE/Win box models.
    3. Margin Collapsing: When two or more vertical margins meet they will collapse to form a single margin with the height of the larger of the two margins. The vertical margins of nested elements will also collapse if they are not separated by padding or borders.
    4. Boxes: Block vs. Inline vs. Anonymous
      1. Block elements are elements such as <div>, <p>, or headers <h1>…<h6>. When their content is displayed the next element within the document structure will be positioned below it, not next to it. The vertical distance between boxes is calculated by the boxes vertical margins.
      2. more on the box: Inline elements are elements such as <a>. <strong>,
        <em> or <span>. Their content is displayed horizontally, within lines. Horizontal spacing between inline elements can be adjusted using padding, borders and margins. Vertical spacing has no affect on inline elements.
      3. Inline Elements and Padding
      4. Anonymous Boxes: A block or inline box that has not been explicitly defined as an element. You cannot style anonymous block or line boxes since there is nothing to connect to. (see link example)
  2. CSS Positioning
    1. Static or Normal Flow: Normal flow is the default scheme used for positioning. Block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right.
    2. Relative: Relatively positioned elements are positioned within the normal flow and then moved using x and y coordinates. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position – leaving a gap for it.
    3. Absolute: An absolute positioned box is moved out of the normal flow entirely using x and y coordinates. Absolutely positioned boxes can overlap other elements on the page. Control the stacking order with the Z-index. The higher the Z-index, the higher the box is in the stack. Elements that come before or after an absolutely positioned box ignore it completely. an example of absolutely positioned DIV
    4. Fixed:Fixed positioned elements are moved out of the normal flow entirely – relative to the viewport. This means that they don’t move if the page is scrolled. Win/IE5 and Win/IE6 do not support this positioning method at all. I think this looks cheesy as all heck. I don’t know anyone that likes this.
      1. Floating : A floated box is taken out of the flow and shifted to the left or right until it touches the outer edge of its containing box or another floating box. Block-boxes in the normal flow behave as if the floated box wasn’t there. Paragraphs of text (line boxes) next to a floated box can flow down the right side of a left-floated box and down the left side of a right-floated box. More good info on floats
        1. Clearing:Elements following a floated element will wrap around the floated element. To stop this from happening the “clear” property can be applied to “clear” a vertical space for all elements following the float.
    5. Layout
      1. Horizontally Centered
        1. Example Making something be horizontally Centered is a three step process
          1. the element containing the element that you want to be horizontally centered needs a text-align: center attribute
          2. The element that you want to be centered needs to be possition:relative
          3. the element that you want to be centered needs to have margin-right and margin-left set to “auto”
      2. Liquid: Dimensions are set using percentages, allowing layouts to scale to fit the browser window. On some monitors layouts can feel stretched and line heights can get too long or too short.
        1. Three-Column using floats
        2. Two-Column using absolute-P
      3. Elastic: Dimensions are determined by the width of elements using
        ems. This is relative to the font size, not the browser width.

        1. good article about the debate
        2. Elastic example
        3. The px to em Calculator
      4. Elastic-liquid hybrid: Widths are set in ems and maximum widths
        are set as percentages.

        1. Hybrid example
      5. Other Sample CSS Layouts

    Homework for Wk 2 from Tzip

    My homework for the week can be found here.

    Mind you, it’s AWFUL. But it’s done ;) , see u saturday…

    last week

    Hi Jay-

    Had to go out of town suddenly last week,I had a look at the homework assignment, but I’m hoping you could give me a quick overview of what I missed.

    Thanks

    Zoey