9 x two-and-a-quarter-hour sessions from 18:30 - 20:45hrs, starting Monday April 28th 2014 and running to July 2014
In G219 in the new Media building at Totton College, Calmore Road, Totton, Southampton. SO40 3ZX
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 28th April 2014
- Introduction to the course, passwords, fire exits, refectory and parking.
Creative Suite 6 and Creative Cloud Download free fully-working 30 Day trial versions from Adobe (click the 'try' link) - Setting up your ftp (file transfer protocol) settings to upload your Websites to www.totton.org in Dreamweaver CS3 and CS5
- Creating Web pages using Dreamweaver's CSS layouts - and experimenting with editing colours and sizes in the header, sidebar and container.
- Inserting a Spry navigation bar vertically or horizontally.
BlueGriffon is a free open source alternative to Dreamweaver that supports HTML5 and CSS3 - review, developer's YouTube examples, and webfonts straight from a menu. Add-ons
Monday 5th May 2014
- Bank Holiday: there is no session this week
Monday 12th May 2014
- More options from Adobe's Ajax framework 'Spry' (Ajax = a combination of Asynchronous JavaScript and XML)
- Adding Tooltips, Collapsible Panels, Accordions, Tabbed Panels
- Dw CS5 see Chapter 14 for Spry.
- More Dreamweaver CS5 and CS6 tutorials from Adobe
Monday 17th May 2014
- Creating Photogalleries using Adobe Bridge, or Flash and incorporating them into your site. Contact sheets
is a free opensource javascript library that can enhance your sites. It can be downloaded and then included with your site (so you need to remember to upload it to your server!) or you can link to the library on Google or Microsoft servers. Linking has the advantage of always using the most recent version. - interface demo and others, truncatable jQuery tutorials. jQueryui and jQueryMobile
Create an image hover-preview effect using jQuery
- To make photo-galleries (free for non-commercial sites) jAlbum is available for Mac, Windows and Linux
Monday 2014
- iFrames are now established as the standard way to include a movie clip from YouTube or a map from Google.
- Framesets seem to help navigation - why and how they are best avoided
- Sending an email with images, logos and html layout, useful for product announcements, newsletters and special offers.
Monday 2014
- Spry Menu bars (slight return). How to centre and edit them. Also see adobe.github
- using Form options for navigation. Introduction to forms - download chapter here
- Example questionnaire. Example email response.
- Forms usually require a dynamic server-hosted database using MySQL & php/asp/jsp/coldfusion or at least a script to send the details to an email address, which usually needs to be set up by your hosting company. An interesting alternative is wufoo.com which integrates well with Mailchimp - both of which are free for occasional use.
Monday May 2014
- Bank Holiday & Half Term: there is no session this week
Monday June 2014
- Individual assistance with your Websites
- Expanding your font options with free Webfonts from Google, FontSquirrel and in May 2013
Adobe Edge Webfonts launched with over 500 free typefaces already. - Tag Clouds - see Tagxedo and others
- Transferring CSS rules to an external stylesheet and then linking them to provide quick site-wide updates.
Monday June 2014
Slicing images in Photoshop to improve image quality/file size
optimisation or to create areas with animation
or rollover links. example Also good for cinemagraphs- Animating a gif banner or button using Photoshop's Animation tools
Monday July 2014
- Online books and/or video tutorials from creativeedge.com, lynda.com, Total Training and VTC
- The Semantic Web and CSS - separating the content from the layout and styling makes it easier for screen readers to help the visually impaired and also helps you when you want to make changes.
- Creating whole Web pages in Photoshop/Fireworks and then slicing to optimise image quality/file size. Editing in Dreamweaver to create areas with animation or rollover links.
- Usability 101 from Jakob Nielsen (creator of Google's sparse interface)
Monday July 2014
- Meeting the 'success criteria' for W3C Web Content Accessibility Guidelines 2.0
- Search engine optimisation to boost the numbers who find your site, including META tags, alt text and title tags.
- Monetizing your Site: Adding advertising to your site helps pay for hosting and your time and effort in creating your site. An hour or so setting up some ads can repay you many times over for years to come... As a bonus most advertisers give you access to lots of analytic tools and having a well-known brand advertise on your site can lend some extra credibility to your content (since most advertisers will inspect your site before granting their approval). Add advertising revenue to your site through Tradedoubler and LinkShare affiliate schemes or through independents large and small, such as Amazon.co.uk (Note that ads supplied from external sites may be blocked by some security software and especially by Janet - the academic internet provider used by most colleges including Totton. To get the most from this section you will need to browse from home afterwards).
You can choose from a range of sizes and style of banner ad, either just one or a collection or 'pool' which will be rotated. Some advertisers offer an ad which they update to show their latest offers - I had one from Game but dropped it when they advertised Grand Theft Auto on an otherwise small-child-friendly site.
Google provides a system called AdSense which will add text links automatically and pay you commission. They also offer AdWords, where you are the advertiser and pay for example £50 a month to have certain 'keywords' that people search for result in your ad appearing to the right (or above) the natural search terms. You then pay Google say 17p from your £50psm whenever someone clicks through to your site. A good way to get more business for new sites that might not feature well in the search engines until you get more established.
- Advice about responsible advertising from usabilty expert and Google interface designer Jakob
Nielsen also his "Making Web Advertisements Work" It's obviously a good idea to try to match your ads to your visitors - hence this ad for 123-reg is perfect for my Dreamweaver courses, the more so since I have been recommending them for years without commission:
- online shopping cart systems:
www.oscommerce.com .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 
Which leads us to ethics. Would you advertise a product to make money, if you preferred a competitor that you don't have a deal with? How much would that damage your site's credibility and/or make you lose pride in your site? Do you disclose to your readers that you will receive commission from ads (isn't it obvious? Well no, especially from simple text links, such as which are often a surprisingly good option as people tend to filter out obvious graphical ad banners).
Monday 1st July 2014
- Individual assistance with tidying up your Websites and uploading
- A look at Dreamweaver CC, including jQuery support, often replacing Spry, CSS designer and the reorganised insert panel and menu.
- WordPress is a useful free alternative to Dreamweaver with many Web 2.0 interactive features available without coding, and usually for free or a small fee. MakeUseOf.com provide a free pdf guide to creating a WordPress website along with several other guides available just through free registration. Sign up!
- Using Dreamweaver to edit WordPress plus chapter to download
aptana Web and rails development
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
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
