Advanced Web Site Design

Last updated 23rd March 2006

Dreamweaver MX supported by Flash MX, Imageready and Photoshop

Dreamweaver links to online resources. Recommended booklist

Buy Studio 8 at education price of just £88 (teachers and some full-time students only, sorry)
or download free fully-working 30 Day trial versions from Macromedia (click the 'try' link)

Free open source Web design software for Windows, Mac and Linux is available at http://www.nvu.com

Activities are subject to change depending on the needs of the group.

Introductions and first Web page
Introduction to the course. Setting up your site. Create first Web page using page properties, the toolbox and properties inspector. index.htm page. Setting typefaces, font size, style and colour. (If using MX 2004 you can make it use html font sizes of 1-7 by changing preferences>general and unchecking the box for 'use CSS instead of html tags'). Adding a second page and links. Previewing your Web site in a browser by pressing F12. View source code in Dreamweaver or the browser - a peek at the html code you are creating with Dreamweaver.

Personalise your site with images
Adding your own pictures from disc, by scanning or digital photography. Editing images with Adobe Photoshop or Imageready. Optimising graphic file formats: jpeg, gif and .png.

Rollovers in Dreamweaver
More on graphics, creating simple Rollovers and buttons. Dreamweaver writes the JavaScript.

Improving layout control
Introduction to using layers to structure your page layout using the power of CSS. Using tables to improve layout. Table spacing and padding. Download this transparent spacer.gif to help control table cell width and height.

Spell checking. Designing for your readers using the Window Size pop-up to prepare your site at a suitable size (800 x 600 or 640 x 480 pixels recommended). Rulers and tracing images.

Dynamic HTML, animated gifs.
Simple animation within Dreamweaver using DHTML to move layers around. Animating a gif using Adobe Imageready. Multiple rollovers.

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.

Adding interest and enhancements
Adding sound, QuickTime movies, Flash .swf and Shockwave .dcr animation elements. Web video formats.

Search engines, META tags
Help search engines with META tags to boost the numbers who find your site... Add links to your own site at wikipedia.org or when leaving comments at an online forum. Making informed decisions about how many of your target audience can access a feature. Domain Names. Submit to Web directories.

Navigation Bars, Library Items and Frames, Templates
Graphics for this exercise can be obtained here. Example from Stone Arts Ltd. Make your nav bars as Library items (in 'Assets') to make it easy to add or subtract buttons on several pages at once. Templates and Assets such as Library items help ensure consistency throughout your site and allow faster site-wide modifications. Frames may seem to make it easier to set up navigation but we look at some consequential problems and some alternatives to framesets.

CSS - Cascading Style Sheets
Using external Cascading Style Sheets in 8 to master text, control background images and remove underscores from links. Dreamweaver links for CSS including Zen Garden. Free CSS for Dreamweaver MX chapter from the Quickstart guide as an Acrobat pdf file.

Accessibility Issues
Common sense is key. 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 phones and Palm PDA's. 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 needs of some users are considered. Testing your site with online tools such as WebXACT (previously Bobby). Lynx text only browser. Lynx user guide. Access keys.

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

Photoshop Web Gallery.
Creating a Web gallery from a folder of images quickly using Photoshop. Example from Stone Arts Ltd.

Uploading your sites, browser issues
Uploading and testing your site so far to your own site or a group site. Browser compatibility.

Favicons, working on your project site
Favicons - the 16x16 pixel images in the address bar and bookmarked favourites list. MicroSoft guide: html-kit which also creates animated gifs, plus favicon.co.uk and Photoshop plug-in from iconfactory.com

© Copyright
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. Individual review and assistance with project development.

Image maps, ads
Image map hot spots to create links on specific areas of a picture. Adding advertising to cover costs or make profits. For pointers about responsible advertising, try this from Jakob Nielsen. Individual project assistance will be available.

html
A little on html - hypertext mark-up language - coding. Viewing and printing the source files from a browser, annotating the code.

Adobe Events in April 2006 inc Macromedia Web products

Totton College dates for your diary:

Thursday 29th June - Taster Day
Tuesday 4th July - HE Fair

free 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. Advanced features require purchase of a range of options.

Totton College Services to Business at Ower run many relevant follow on courses, call Sue Lambert or Julia Bateman on 023 8081 4578 or 023 80874874 or email: info@servicestobusiness.com

Totton College main site runs these qualification courses (links are to 2005-6 courses for example content)
ABC Level 3 Digital Production - Web Production Skills Dreamweaver class at Totton College with Jed Gibbs from September 2006, probably on Thursday or Monday evenings 6.30pm - 9pm.
ABC Level 3 Digital Production - Pixel Manipulation Photoshop class at Totton College with Sonia Willcocks from September 2006, probably on Tuesday evenings 6.30pm - 9pm.

We are also considering an ABC Digital Production - Multimedia course from September 2006 at Totton College.

To add advertising revenue to your site, click on this ad for tradedoubler. It's easy, free and you might make back the cost of your course... (oh, and I'll make 2 pounds to put towards the cost of running this site - thanks!)

External links are of course subject to change.
Jednet cannot be held responsible for other people's sites.
If any of these links are broken or lead to unsuitable content please contact jednet@mac.com