10 x two hour sessions from 18:30 - 20:30, starting Monday 24th January 2011 running to 4th April 2011
For further information, contact Jed Gibbs MA by email: jgibbs@totton.ac.uk
Also see course information sheet & enrol at Totton College
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, ideal for anyone wanting to gain employment or design professional sites.
Go straight to this week's information:
Monday 24th January 2011
- Introduction to the course, passwords, fire exits, refectory and parking.
- Setting up your site in Dreamweaver.
- 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).
- 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...
Monday 31st January 2011
- Add images to your site from USB stick, disc, by scanning, digital photography, or from the Web. Copyright issues. Simple editing with Adobe Photoshop & optimising for the Web. Graphic file formats jpeg, gif ('jif') & png ('ping!').
In Dreamweaver insert your image using the tree icon on the 'Common' Insert panel.
You may want to set the Border value to zero, especially if you link from the image.
Monday 7th February 2011
- Setting up your ftp (file transfer protocol) settings to upload your Websites to www.totton.org
- Creating and using
Favicons 
, 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 (example jpeg file) and receive a zipped 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 for 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).
Monday 14th February 2011 
- Image map hot spots to create links on specific areas of a picture
Creating buttons and rollovers in Adobe Photoshop. - Using Styles, adjusting Bevel & Emboss (Bevel handout download, password is 'awd')
Monday 21st February 2011
- Half Term: there is no session this week
Monday 28th February 2011
- Navigation bars - like a button rollover, but with a 'down' state too.
- Site definition walk-through in Dreamweaver CS3 and CS5
- GRsites for creating buttons and tiled background textures. Other Dreamweaver links.
Monday 7th March 2011 - no baby yet... class as usual!
- Improving presentation and layout: introduction to using AP Div layers to structure your page layout (Absolute Position Division layers are a sub-set of Cascading Style Sheets). Using DHTML (Dynamic HTML) to move a layer and its contents.
- 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 14th March 2011
Jed on paternity leave, baby Corben born Wednesday 9th March and doing well.
Class now confirmed postponed, as cover unavailable... sorry.
Adobe Flash animation
- Flash
- 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
Monday 21st March 2011
- Class now postponed, as cover unavailable... sorry. Jed on paternity leave but back next week, 28th March)
Monday 28th March 2011
- WordPress is a useful alternative to Dreamweaver with many Web 2.0 features available without coding.
- Individual assistance with your sites.
- 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
Monday 4th April 2011
- Individual assistance with tidying up your Websites and uploading.
- Inserting and editing tables
BlueGriffon supports HTML5 and CSS3 - review, developer's YouTube examples, and webfonts straight from a menu.
Tuesday 26th April
- Adobe Dreamweaver CS5.5 supporting HTML5 - reviews to follow here soon...
- Individual assistance with tidying up your Websites and uploading.
- Inserting and editing tables. Padding and Cell Spacing
- DMoz - The Open Directory. Getting in helps with Google search ranking... tips for submission
Webfonts: the CSS @font-face tag lets you use many more typefaces than the basic 7 listed in Dreamweaver across pcs/Macs and mobile devices such as iPods and iPads.
I have used free fonts from fontsquirrel for imps.tv which work even in version 3.5 of Firefox. With these you need to download a 'kit' of the several different versions of a typeface needed to work in Firefox/Chrome/Safari; Internet Explorer; and an SVG variation for iOS devices such as iPods, iPads and iPhones. You then cut and paste some code into your web page, and upload the fonts to your site.
Google provides free Web fonts which require at least version 3.6 of Firefox to work: getting started, list of fonts. overview. With the Google system the fonts stay on their server and you simply cut and paste code they supply to link to their server.
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
fontslive how-to-use-css-font-face Adobe fonts through TypeKit W3c adopts WOFF
Tuesday 3rd May
and 
video clips, sound and Flash, or adding QuickTime movies and flvschinese-language-to-dominate-the-internet
Are there any resources or materials required?
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:
BlueGriffon supports HTML5 and CSS3 or 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
