ImagesMultipage Sites

Images

Images in HTML

Remember that HTML is just text Need to point to pictures Use the img tag

<img src=“where” alt=“what”> alt:

› screen reader › REQUIRED for this class and to validate

Where are images used

Pictures Backgrounds Link displays List markers

Picture Sources

Your own Publicly available

› Flickr and the Creative Commons› Google and labeled for reuse

IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT

Adding a caption

<figure><img …><figcaption>caption</figcaption>

</figure>

Images as Background

Overall page design

Default: window size› Advantage: grows and shrinks easily› Disadvantage: harder to design

Making body fixed width› Advantage: easier to control› Disadvantage: scroll bars and unused space

Using fixed width section in default body› Combines advantage of fixed width without scroll

bar› Allows complex backgrounds

Background Image

Body background› Need to assure readability› Simple images (see resources)› For busier images: use overlay

Use div or section or … Opacity (0 to 1) to let it show through

› Background-image Background-size Background-repeat

Multipage Navigation

Structuring Site Navigation

Three possible models› NEXT and PREV (when fixed order)› Navigation bar to the parts› Single page with links (hub & spokes)

When use? Mix and match? Multiple ways?

Guidelines

Link to the exact spot › Heading, not paragraph› Top of the page

Make it easy to get to the navigation (top)

TOO MUCH NAVIGATION IS AS BAD AS NONE!

NEVER DEPEND ON BROWSER BACK BUTTON

Next - Previous

Consistent placement Top, bottom, both Often at the left and right edges

Next class Structurally keep them together Text Images

Navigation Bar

IDENTICAL CONTENT ON ALL PAGES› May want to distinguish current page

Horizontal or Vertical Horizontal best practice

› separate section: nav› inline list› top (below title) or top and bottom

Vertical two styles› Table of contents› Side bar (next week)

Better for long lists Takes width

Page / Site Links

Should you distinguish? Two different bars

› Horizontal (site) and vertical (page)› Color, size, font differentiation

Formatting a Horizontal Nav Bar

Remove bullets from listli { list-style-type: none;}

Make the list horizontalli { display: inline;}

Position <nav> where you want it (left, right, center, top, bottom)

Horizontal navigation formatting: list (1 of 2)

Format the individual link boxesli { border: 1px solid black;

padding: 10px; margin: 0px 1px 0px 1 px;

} Padding will space within box, margin between

boxes› May want to make it negative

Size of box› Vertical: line-height› Horizontal: based on text or define width

Horizontal navigation formatting: list (2 of 2)

Page Layout Reminders

Basic simple design

Focus on layout Simple is best Basic parts

› Header › Nav(igation) – may be in header› Section or div for main body› Footer

Recommendation› Keep nav bar code the same on all pages› Simple copy and paste

This page:› Can use href=“#” or disable link› But then have to remember to change it

Exception:› If you want to format this page differently

Navigation Bar

How to Tailor Layout

Margins Positions Heights

Useful Layout Model: Grid

How wide should your elements be?› Consistency› Enough white space

People have spent time working on it› 978 model

Example