Go straight to this week's information:
10 x two hour sessions from 18:30 - 20:30, starting Monday 26th September 2011 running to 5th December 2011
For further information, contact Jed Gibbs MA by email: jgibbs@totton.ac.uk
Also see course information sheet & enrol at Totton College
An introduction to Web Design using Adobe Dreamweaver
Intended for anyone who wants to create and maintain Web sites using Windows or Mac computers. Dreamweaver is the industry standard for anyone wanting to gain employment or design professional sites. We will also look at some free open source alternatives.
Monday 26th September 2011
- Introduction to the course, passwords, fire exits, refectory and parking information.
- Setting up your site in Dreamweaver. Site definition walk-through in Dreamweaver CS5 and Dreamweaver CS3
- Create first Web page using page properties (Ctrl-J), the toolbox and properties inspector. Your home page should be saved as index.htm and will likely be xhtml (extensible hypertext markup language).
Monday 3rd October 2011
Add images to your site from USB stick, disc, digital photography, or from the Web. - View source code in Dreamweaver using the 'Split' button at the top left of your window
or in a browser - tweaking the code you are creating with Dreamweaver can be helpful when resolving problems. - Creating more pages, saving them with simple names with no spaces. Adding links.
- Previewing
your Web site in a browser by pressing F12 or choosing File > Preview in Browser > Firefox or click and choose a browser from the little globe symbol to the right of the title box:
- You can add additional browsers by choosing File > Preview in Browser > Edit Browser List...
Fire Drill at 8pm
Monday 10th October 2011
- News:
Adobe Muse free beta announced: Web design for print designers, first look - Copyright issues. Simple editing with Adobe Photoshop and optimising for the Web using graphic file formats jpeg, gif ('jif') & png ('ping!').
Creating buttons in Adobe Photoshop. Using Styles, adjusting Bevel & Emboss (Bevel handout download, password is 'awd')
DOWNLOAD An Idiot’s Guide To Photoshop from 
Monday 17th October 2011
- Adding your button rollovers to your site
- Improving presentation and layout
Monday 24th October 2011
- Half Term: there is no session this week
Monday 31st October 2011 
- Going live with your site to a sub-directory called 'w' on www.totton.org
- Your Web address will be www.totton.org/w/yoursitename as entered in the Root Directory box in this walkthrough: Set up your site using Dreamweaver CS5
Monday 7th November 2011
- You can get free domain names ending in .tk
but there's a catch if visitor numbers fall below 25 in any 3 month quarter... your site will be redirected to a quiz site or similar until you pay $6.90 per year.
As with any domain name it needs to be pointed 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. 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
- Submitting to search engines such as Google & Bing and directories (DMoz).
- Spell checking.
Monday 14th November 2011
- Individual assistance with your sites.
- Using tables for layout was common but now discouraged in favour of CSS. Tables still have their uses and you may need to edit an existing site or use tables for an html-styled email. Dreamweaver can convert layers to tables or tables to layers (AP divs - Absolute Position divs). Download this transparent spacer.gif to help control table cell width and height.
- Introduction to using AP Div layers to structure your page layout (Absolute Position Division layers are a sub-set of Cascading Style Sheets).
Monday 21st November 2011
- Individual assistance with your sites. Free hosting from freehostia.com - chocolate
Using DHTML (Dynamic HTML) to move a layer and its contents - not supported since CS3!- introduction to Cascading Style Sheets (CSS) for default text, to set link styles and to control background images. Designing for your readers at a suitable size. CSS for positioning or using supplied templates to speed production.
- understanding-css-positioning-part-1; part 2; part 3
CSS Fundamentals Gallery of CSS Web design ideas at csszengarden.com, cssfury.com & cssloggia.com and 
Monday 28th November 2011
- Individual assistance with your sites.
- Accessibility and browser compatibility.
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.
- Brief introduction to Flash, a natural partner (and occasional rival) to Dreamweaver. A look at Flash-enhanced sites and online tutorials.
- Availability of parallel Flash training course starting January 2012.
Monday 5th December 2011
- Individual assistance with tidying up your Websites and uploading.
- Adding Flash content to Dreamweaver. Issues with iPhones/iPads and the rise of HTML5.
Google html5 guide How HTML5 will change the Web Google promotes HTML5
- The CSS Web fonts @font-face tag lets you use many more typefaces than the basic 7 fonts listed in Dreamweaver across pcs/Macs and mobile devices such as iPods and iPads. HTML text font sizes should not be used anymore, use CSS instead.
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. nicewebtype 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
Google provides free Web fonts: getting started, list of fonts. overview
fontslive how-to-use-css-font-face Adobe fonts through TypeKit W3c adopts WOFF
- Navigation bars in CS3 - like a button rollover, but with a 'down' state too. Graphics for this exercise 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.
- Spry navigation in CS5
- 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. DRM (Digital Rights Management) issues. Peer to peer filesharing rights, wrongs & risks of using the likes of Pirate Bay & BitTorrent. 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. Automating this through File>Automate>Web Gallery. 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
- A look at the content of the follow-on Web design course starting January 2012. Course info sheet.
- Enrol for January 2012's course at Totton College
Are there any resources or materials required?
but there's a catch if visitor numbers fall below 25 in any 3 month quarter... your site will be redirected to a quiz site or similar until you pay $6.90 per year.
As with any domain name it needs to be pointed 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. 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
CSS Fundamentals Gallery of CSS Web design ideas at csszengarden.com, cssfury.com & cssloggia.com and
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.
Google html5 guide How HTML5 will change the Web Google promotes HTML5
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. nicewebtype 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
Google provides free Web fonts: getting started, list of fonts. overview
fontslive how-to-use-css-font-face Adobe fonts through TypeKit W3c adopts WOFF
Digital Millenium Copyright Act. DRM (Digital Rights Management) issues. Peer to peer filesharing rights, wrongs & risks of using the likes of Pirate Bay & BitTorrent. 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. Automating this through File>Automate>Web Gallery. 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
The software is installed on the college computers. For students wishing to do additional work from home free 30 day trials are available from Adobe. Student rates for the software are available and will be discussed on the course.
Are there any other costs?
Free basic Web hosting will be provided for the duration of the course together with advice on purchasing a domain name (.tk addresses are free, .coms and .co.uk about £6 per year) and ongoing hosting (from free to expensive).
How will I be assessed?
No formal assessment. Help during the sessions & via email support. Totton College course completion certificate.
What are the entry requirements?
No previous experience required but some content may be challenging as the software is for professional-level use.
Contact us
For further information, contact Jed Gibbs MA by email: jgibbs@totton.ac.uk
Tel: (023) 80 874 874 • Fax: (023) 80 874 879
Web: www.totton.ac.uk • Email: info@totton.ac.uk
Download free fully-working 30 Day trial versions from Adobe (click the 'try' link)
Pugh.co.uk can supply a wide range of software including Dreamweaver CS5:
- an 80% reduced student edition for students on qualifying courses (2 year degree courses or full-time secondary school)
- or teachers and non-qualifying students (this course) can buy an educational edition of Dreamweaver CS5
(check the Adobe collections if you are also interested in Photoshop and Flash). The software is fully working but there are restrictions on 'personal use' rather than for profit and usually no reduced price upgrade path, for example when CS6 is eventually released.
Alternative free open source software for Windows, Mac and Linux: nvu for Web design | GIMP alternative to Adobe Photoshop
5 alternatives to Photoshop (see comments for more, including Aviary from worth1000.com)
Dozens of books for CS3, CS4 and CS5 versions of Dreamweaver and Photoshop are available. A free Safari Books Online account will let you compare before buying, or you may decide as I did to subscribe to Safari. Follow a Safari link next to any book in the ad widgit below to get a free 10 day account. (If the slightly temperamental widgit is empty please refresh the page... )
Online video training is available from Adobe, Lynda.com, VTC and Total Training
