javascript

http://flowplayer.org/tools/

dynamically change the css property of any html element 25

Aug

http://moofx.mad4milk.net/

•
• Edit
•

Ajax/CSS image galleries 25 Aug

http://www.cssplay.co.uk/menu/
http://www.zenphoto.org/ – has comment system
http://www.huddletogether.com/projects/lightbox/ – lightbox effects
http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm lightbox effects
http://www.cssplay.co.uk/menu/gallery_click#nogo – super fast
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb
http://www.cssplay.co.uk/menu/gallery_click#nogo – multi tab rollovers
http://www.cssplay.co.uk/menu/lightbox2#Birds – multi tab rollovers with large image
http://www.cssplay.co.uk/menu/lightbox3 – multi tab rollovers with large image and into page
http://www.cssplay.co.uk/menu/complex_slides – slideshow
http://www.cssplay.co.uk/menu/slide_show#Birds – multi tab rollovers with large image and into
page and handles images with different aspects

•
• Edit
•

CSS
•
• Edit
•

Advantages of CSS

3 different types of web design:

a) pure web 1.0 – use tables to layout page and font tags, no css
b) web 1.5 – use tables to layout page, use css to control fonts
c) pure web 2.0 – use css to control all aspects of visual presentation of the page, the xhtml file
just contains content with links to the css file that control presentation i.e. backgrounds, colours,
fonts, layouts

How do you know if a site is pure web2.0 ??? Just use your browser to turn off the css (e.g. in
firefox – VIEW > PAGE STYLE > NO STYLE )
If you then see just a single column of unstyled text and images you have modern pure web 2.0
css based accessible design. If you go to the wmtn site you will see headred can’t do it. They need
tables to layout the content !!!

Pure web2.0 design was thought to be too plan and boring. Not any more:
http://designshack.co.uk/gallery/all/

Advantages of web2.0 design:

1) most modern way of doing things, all new sites should be done this way if you are a pro web
designer
2) its the way to show you are a pro, rather than amateur designer
3) because content and presentation are totally separate a massive site can be redesigned
(skinned) without touching any content files.
4) sites are automatically printer, browser, tv, console, mobile phone friendly and are accessible.
The user can either switch between alternative css files or just turn the css off to view unstyled
pure content.
5) sites are cms friendly and can be moved between cms’s easily
6) navigation design is much easier, designs can easily support any amount of nav links including
level nesting.
7) content is automatically compatible with any screen size, even if the css is designed for
800×600+ it can be turned off when viewing on mobile phones !
8) Improve your search engine ranking

•
• Edit
•

CSS page templates

multiflex37 – xhtml 1.0 strict – http://www.opendesigns.org /preview/?template=45

lots of examples for css positioning and multi column layouts – business site

Icon-blank three_quarters – xhtml 1.0 strict – http://www.nikhedonia.com/showcase/entry/three-

quarters/ good example of a 1 pixel tall Y repeated background – business layout

•
• Edit
•

CSS Typography 17 Dec

http://www.digital-web.com/articles/css_typography/
http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/
http://www.spoono.com/csst/tutorials/tutorial.php?id=4

Change Text Size For Accessibility:

http://www.alistapart.com/articles/relafont
(must set the preferred alternate style in styleswitcher.js – this is set automatically the first time
the site loads – do not have to use relative sizes with an @import can just have alternative sheets
overwriting absolute sizes set in the default)

Examples:
http://www.robweychert.com/
http://www.subtraction.com/

•
• Edit
•

CSS Examples Directories 17 Dec

http://www.dynamicdrive.com/style/

•
• Edit
•

General 22 Feb

http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/

•
• Edit
•

Styled Container Areas 25 Aug

http://www.dynamicdrive.com/style/csslibrary/category/C5/
http://www.cssplay.co.uk/boxes/
http://www.cssplay.co.uk/menu/bubbles
http://www.csstextwrap.com

•
• Edit
•
Forms – non table layout 25 Aug

http://www.formassembly.com/form-garden.php
http://www.dynamicdrive.com/style/csslibrary/category/C6/
http://www.sitepoint.com/article/fancy-form-design-css
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
http://www.cssplay.co.uk/menu/form

•
• Edit
•

Navigation 25 Aug

Set the active menu item with php and css:

http://www.sebastiansulinski.co.uk/web_design_tutorials/css/active_button.php
remember to use a.active NOT a:active !!!

Lots of examples:
http://www.cssplay.co.uk/menus/
http://www.13styles.com/
http://www.cssmenumaker.com/
http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

Basic Rollover tabs:

http://designshack.co.uk/tutorials/css-tabs-rollover-menu
http://www.dynamicdrive.com/style/

Basic popout menus

http://designshack.co.uk/tutorials/pop-out-css-menu

•
• Edit
•

Layouts 25 Aug

One Column Slider Layout:

http://designshack.co.uk/tutorials/one-column-slider-layout
http://moofx.mad4milk.net/
Standard Layouts:
http://www.dynamicdrive.com/style/layouts/
http://www.cssplay.co.uk/layouts/

•
• Edit
•
CSS Style Switcher 25 Aug

http://designshack.co.uk/tutorials/css-style-switcher

•
• Edit
•

fonts 25 Aug

http://designshack.co.uk/tutorials/category/fonts/

•
• Edit
•

Cross Browser Transparency 25 Aug

http://designshack.co.uk/tutorials/cross-browser-transparency
http://www.cssplay.co.uk/opacity/png.html

•
• Edit
•

Accessible Websites 25 Aug

http://designshack.co.uk/tutorials/what-is-web-accessibility
http://designshack.co.uk/tutorials/ten-tips-for-accessible-websites

Changing the text size:

http://www.alistapart.com/articles/relafont

•
• Edit
•

xHTML
•
• Edit
•
xHTML Header Basics 24 Aug

Above the head tags:

!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” OR

!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

XHTML 1.0 Strict – Use this when you want really clean structural mark-up, free of any markup
associated with layout. Use this together with W3C’s Cascading Style Sheet language (CSS) to get
the font, color, and layout effects you want.

XHTML 1.0 Transitional – Many people writing Web pages for the general public to access might
want to use this flavor of XHTML 1.0. The idea is to take advantage of XHTML features including
style sheets but nonetheless to make small adjustments to your markup for the benefit of those
viewing your pages with older browsers which can’t understand style sheets. These include using
the body element with bgcolor, text and link attributes.

HTML tag: html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”

In the head tags:

Set a fav icon:

link rel=”Shortcut Icon” type=”image/ico” href=”http://www.challies.com/favicon.ico”

Set up links to rss feeds:

link rel=”alternate” type=”application/atom+xml” title=”Atom”
href=”http://feeds.feedburner.com/challies/XhEt”

Set up link to default stylesheets (these are used unless user turns off all styles in the
browser) – if more than one default sheet is set their rules are combined:
link rel=”stylesheet” href=”http://www.challies.com/style.css” type=”text/css”

Printer friendly default style sheet:

http://webdesign.about.com/cs/css/a/aa042103a.htm
http://www.ilovejackdaniels.com/css/printer-friendly-pages/
(must set the media types to screen and print – use display: none; in classes and id’s to
hide them)

Set up link to alternative stylesheets (user must select these either via code on the page or
browser option – they do not replace the default styles, however they can override default style
rules, only one alternative sheet can be applied at a time) – often used to create bigger/smaller
type options:*
link rel=”alternate stylesheet” type=”text/css” href=”http://www.challies.com/larger.css”
title=”A++”