Web Design (Intermediate/Advanced) T2022
Course by week 18th Jan to 5th July 2010

Monday 18:00-21:00 from 18th January to 5th July 2010 with Jed Gibbs in
Room 177 at Totton College, Calmore Road, Southampton SO40 3ZX

< back to Totton College Web Design course homepage

Activities below are subject to change depending on the needs of the group (and very much a work 'in progress'...)
There should be some time for you to work on your own sites in addition to the subjects discussed.

Go straight to this week >

• Introduction to the course. Setting up your site.
• Create first Web page using page properties, the toolbox and properties inspector. index.htm page.
• Adding a second page and links.
• Previewing your Web site in a browser by pressing F12 or choosing File > Preview in Browser > Firefox or clicking on the little globe symbol to the right of the title box.
• View source code in Dreamweaver using the Split button at the top left of your window or in a browser - a peek at the html code you are creating with Dreamweaver can be helpful when resolving problems.

25th Jan - Personalise your site with images

• Adding your own pictures from USB stick, disc, by scanning or digital photography
• Editing images with Adobe Photoshop. Optimising graphic file formats: jpeg, gif & png
• Designing for your readers using the Window Size pop-up to prepare your site at a suitable size
  

1st Feb - Rollovers, Creating Buttons in Photoshop

• Creating simple rollovers and buttons. Dreamweaver writes the JavaScript

8th Feb - Improving layout, introduction to CSS

• Modify > Page Properties (Ctrl J). Dreamweaver CS3 allows us to set basic Cascading Style Sheets for default text, to set link styles including removing underscores from links and to control background images.
• Basic document order is important. Best practice - layout should be applied separately from content.
• Introduction to using layers to structure your page layout. Layers are a sub-set of CSS.
• Using tables for layout has been common but now discouraged (but you may need to edit an existing site that uses tables).
• Download this transparent spacer.gif to help control table cell width and height.
• Dreamweaver can convert layers to tables or tables to layers
• Testing your site so far. Browser compatibility.
• Spell checking.
• Setting typefaces, font size, style and colour.
  (you can use html font sizes of 1-7 by changing preferences>general and unchecking the box for 'use CSS instead of html tags').
• Animating a gif using Adobe Photoshop.

15th Feb - Half Term holiday (more holidays on 5th Apr; 12th Apr; 3rd May & 31st May)

22nd Feb - Experiment with Flash animation

• Investigate Flash, a natural partner (and perhaps rival) to Dreamweaver.
• Flash enhanced sites and online tutorials for those who would like to know more.

1st March - Adding Flash to Dreamweaver. Uploading site to Totton.org

• Simple animation within Dreamweaver using DHTML to move layers around.

15th March - Adding other file formats, sound, videoclips, Acrobat pdfs

• Adding sound, QuickTime movies, Flash .swf and Shockwave .dcr animation elements. Many filetypes such as pdfs and mp3s can simply be linked to, and will either be shown by plug-ins in the browser window or downloaded for future reference. Adding and hosting video

22nd March - Search engines, META tags, The Q of Q&A

• Help search engines with META tags to boost the numbers who find your site...
• Making informed decisions about how many of your target audience can access a feature.
• Domain Names. Submit to Web directories. Google Website Optimizer for testing alternative designs

29th March - Library Items & Templates; Custom Typefaces

• Templates and Assets such as Library items improve consistency throughout your site and allow faster site-wide modifications.
• CreativePro guide part 1 and part 2 to using the css tag '@font-face' to greatly expand your range of expressive typefaces available through fontsquirrel, fontspring, Monotype at fonts.com, Typekit and typotheque. Fontspring guide to @font-face. Alternatives include javascript embedding via Cufón or Typeface.js (discussion of merits of each), to use sIFR Flash, create the site in Flash itself or simply turn occasional uses of a font into a graphic (jpg, gif or png). Interviews about @font-face. Extensis to launch Webfont service

5th April - Easter holiday

12th April - Easter holiday (more holidays on 3rd May & 31st May)

19th April - Favicons, Adobe CS5 launched
Favicons are the 16x16 pixel images used in the address bar and bookmarked favourites list. Design a logotype or photographic image that will work as a tiny square, then upload a jpeg version and receive a version in favicon.ico format, perhaps with an animated .gif variant for Firefox users (they will see the static .ico version otherwise).

favicon.co.uk has more information. Favicon ads at CSSPlay If you want to make bigger, scaleable icons for Mac or Windows desktops, consider the iconbuilder plug-in for Photoshop from iconfactory.com but it is overkill for just creating little favicons.

Adobe have launched CreativeSuite5, due to ship in May 2010. Adobe newsletter highlights Dreamweaver CS5 features  (article here about some features updated in DW CS4 in 2009)

26th April - WordPress for more than blogs. Free domain names

WordPress is a popular free open source system that provides a very different alternative to Dreamweaver.

You can get free domain names ending in .tk

As with any domain name it needs to be attached to a hosted site (or a folder on another site with its own index.html page). A step by step guide to setting up a domain is in progress but taking longer than I expected (delayed both by my still being rather unwell and also that it can take a while for your domain name to be attached to the hosted site as the information has to propagate among the 13 DNS root server clusters - allow up to 24 hours).

3rd May - Bank holiday

10th May - Introduction to Cascading Style Sheets

NB Monotype now supply thousands of Web fonts at fonts.com

understanding-css-positioning-part-1; part 2; part 3      

CSS Fundamentals  Gallery of CSS Web design ideas at cssfury.com, cssloggia.com, csszengarden.com and

Notes from this evening's session on CSS

dodgy link to css book on rapidshare

17th May - Cascading Style Sheets. History of the Internet & WWW

Practising CSS. Interesting use of Flash - http://producten.hema.nl

History of the Internet and Sir Tim Berners-Lee, inventor of the WWW - wikipedia entry.

24th May - IP© issues

Google provides free Web fonts: getting started, list of fonts. overview

Copyright is automatic unless waived. If you'd like people to be able to use your images or music in their own projects (or want to use other's work for your project) consider a Creative Commons License. Free or cheap licensed music from Jamendo.

Digital Millenium Copyright Act. Anti-DMCA DRM issues. Filesharing. BBC discussion of copyright. BBC article about Pirate Party UK

Copyright © facts. Roger Dean's copyright warning. Using Photoshop to add a text layer with reduced opacity to your images to deter online theft and adding a digimarc from the bottom of the filters menu. On Windows you can get the © symbol by holding down Alt and typing 0169 on the numeric keypad, or Alt g on a Mac. Individual review and assistance with project development.  no right click

31st May - Bank holiday

7th June - Cascading Style Sheets: positioning and layout. CSS Rollover buttons

Short introduction to relative and absolute positioning. Understanding-css-positioning-part-1; part 2; part 3      

Dreamweaver CSS layouts - chapter 7 pdf   placeholder_text.html   layout_final.html   final css

CSS rollover buttons (with images stacked vertically) and 'trifecta' buttons  
Planning your stylesheet   CSS troubleshooting 

14th June - Imagemaps, Nav Bars, Passwords, iFrames, reading up on CSS...

Image map hot spots to create links on specific areas of a picture. Navigation Bars: graphics for this exercise can be obtained here. Make your navigation bars as Library items (in assets) or as a server side include (ssi) to make it easy to add or subtract buttons on several pages at once. Example from Stone Arts Ltd. Google Toolbar for Firefox on Mac.

Password protect part of your site, for 'members only' or to develop your clients' sites: http://www.javascriptkit.com/script/cutindex6.shtml

Dreamweaver doesn't support iframes in the graphical interface, but you can cut and paste the relevent code to create these little scrolling windows, often used to contain news stories or real-time feeds (example iFrame on the right of this page, used for the Microsoft content, and here at animateclay.com for the 'shoutbox' messaging system on the left).

creativepro review of Dreamweaver CS5 which adds support for WordPress CMS (Content Management System) and improves PHP & CSS coding, plus an html5 add-on.

The password 'awd' is needed to download the following chapters. It will be deleted from here soon, so please email it to yourself or write it down:

• Sams Teach Yourself Dreamweaver CS3 in 24 Hours has this good chapter on CSS and some files to work with
• Three useful chapters on CSS from the Missing Manual: 4 Introducing CSS; 8 Advanced CSS; 9 Page layout with CSS

21st June - Accessibilty

No bad Flashturbation! Not just an accessibility problem for people with disabilities or who lack the Flash plug-in - this pointless intro page for nocode.co.uk prevents over 2 million iPad users and many millions of iPod touch and iPhone users from accessing the site, just for a picture of a sink and a moving logo, which could have been easily achieved with DHTML and JavaScript.

The semantic Web and CSS - separating content from style. This is a big step towards improving usability for people using alternative browsers and devices such as smart phones. Always use Alt text, which along with proper use of the <h1>Headline tag</h1> will also help with search engine ranking. Most sites improve for ALL users once the specific needs of some users are considered, and good accessibility is repaid with happier users and by the search engines.

How People with Disabilities use the Web.  BBC Accessibility info.

Testing your site with online tools such as:

• Cynthia Says or Wave; Wave Dreamweaver extension.
• Webmasterworld accessibility forum.
• (The free options of WebXACT and Bobby are now discontinued).
• Lynx text only browser. Lynx user guide.

MakeUseOf.com provide this free pdf guide to creating a WordPress website, (password 'awd' will be removed from here soon to protect their copyright) along with several other guides available just through free registration. Sign up!

28th June - Working on sites and portfolios. html e-mails

Sending an email with images, logos and html layout, useful for product announcements, newsletters and special offers.

5th July - Ajax, Spry, Forms and Web 2.0

Ajax is a combination of Asynchronous JavaScript and XML. To make this easier, Adobe has developed an Ajax framework called Spry. Dreamweaver CS3 integrates with 4 sets of Spry tools: Data, Form widgets, Layout widgets and Effects. JQuery tutorials    Tizag Forms Tutorial    Web 2.0   Web 2.0-style graphics tutorial from DigitalArts

12th July - Working on sites & submitting your portfolios. HTML5

Google html5 guide   How HTML5 will change the Web   Google pushes HTML5  15 HTML5 sites 

fontslive   how-to-use-css-font-face    Adobe fonts through TypeKit   W3c adopts WOFF

online shopping cart systems:
www.oscommerce.org .php and MySQL system which can be run on Macs, Linux and Windows
www.comersus.com .asp system for Windows IIS servers and can be administered from Macs, Linux and Windows

Add advertising revenue to your site through Tradedoubler and LinkShare affiliate schemes

affiliate marketing reviews

Advice about responsible advertising from usabilty expert and Google interface designer Jakob Nielsen

< back to Totton College Web Design course homepage