10 x two hour sessions from 18:30 - 20:30hrs, starting Tuesday April 12th 2016 and running to 21st June 5th July 2016 in room 156 in the Media/Hair & Beauty building at Totton College, Water Lane, Totton, Southampton. SO40 3ZX
For further information, contact Jed Gibbs MA by email: jednet@mac.com
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:
Tuesday 12th April 2016
- Introduction to the course, passwords, fire exits, refectory and parking.
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 CS5
- Inserting a Spry navigation bar vertically or horizontally. How to centre and edit them. Also see adobe.github
- Dw CS5 see Chapter 14 for Spry.
- More options from Adobe's Ajax framework 'Spry' (Ajax = a combination of Asynchronous JavaScript and XML) - adding Tooltips, Collapsible Panels, Accordions, Tabbed Panels
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
Tuesday 19th April 2016
POSTPONED due to serious family illness
Tuesday 26th April 2016
- Individual assistance with your Websites
- Adobe rebrands Flash as 'Animate CC'
- Creating Photogalleries using Adobe Bridge CS5 and incorporating them into your site. (Contact sheets are created in Bridge too).
- Dreamweaver CS5 and CS6 tutorials from Adobe
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, jQuery tutorials. jQueryui and jQueryMobile
Create an image hover-preview effect using jQuery - Digital Imaging Show 27th April 2016 - Grand Harbour Hotel, West Quay Southampton
Tuesday 3rd May 2016
POSTPONED due to misunderstanding after earlier issue!
Tuesday 10th May 2016
- Individual assistance with your Websites
- iFrames are now established as the standard way to include a movie clip from YouTube/Vimeo or a map from Google.
For anything else, such as a window onto one of your own or a separate site such as the BBC, use iFrame Generator:
freeway Mac-only Web design alternative to Dreamweaver 30 day free trial, or download the free freeway Express
Tuesday 17th May 2016
- Individual assistance with your Websites
- Adding a slider via jquery mobile: guide to what to do next... (see also fade in)
- An impressive but expensive ($50) example is power-slider2
'Lightbox' styled image galleries include
- Lightbox 2 which is free (even for commercial use)
- or Fancybox is free for non-profit sites (£12 for commercial use)
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
Tuesday 24th May 2016
- Individual assistance with your Websites
- site of the day - interactive resume (scroll down)
- Expanding your font options with free Webfonts from Google, FontSquirrel and
Adobe Edge Webfonts - Tag Clouds - see Tagxedo (requires silverlight so does not work in Chrome or on mobile devices) and others
- Transferring CSS rules to an external stylesheet and then linking them to provide quick site-wide updates.
- Framesets seem to help navigation - why and how they are best avoided.
Tuesday 31st May 2016
- Half Term: there is no session this week
Tuesday 7th June 2016
- June 2016 server migration: all ftp info and passwords unchanged except log in username now set as
totton@totton.org (not simply totton).
- using Form options for navigation. Introduction to forms - download chapter here
- Example questionnaire using cgi. Same on totton.org using php.
- 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 for bulk mailshots - both of which are free for occasional use. Wufoo has been bought by surveymonkey and you might also consider Google Forms)
- Lightbox galleries, image sliders and rotators
- Integrating 3D content - https://blog.sketchfab.com/discover-new-viewer
- Mac users might be interested in this deal for $30 which includes Freeway Pro 7 and Hype.
Liopleurodon Ferox Swim Cycle by Kyan0s on Sketchfab
Another great use of online 3D can be found at heroforge.com for creating 3D printed model figures for D&D etc.
Tuesday 14th June 2016
- Search engine optimisation to boost the numbers who find your site, including META tags, alt text and title tags.
- Online books and/or video tutorials from safaribooksonline, lynda.com, Total Training and VTC
Tuesday 21st June 2016
- Meeting the 'success criteria' for W3C Web Content Accessibility Guidelines 2.0
- 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.
- Usability 101 from Jakob Nielsen (creator of Google's clean interface at a time when cluttered was in)
Tuesday 28th June 2016
- Switch CSS themes using buttons or media queries - guide from thesitewizard.com
- Responsive images can resize to different screen sizes. Here is an example page. Simply paste this code into the <head> of your html document, or add it to your linked external CSS file to make all the pictures on your page(s) scale down as needed for smaller screen sizes:
<style>
img {
max-width: 100%;
height: auto;
}
</style> - Perch - the little CMS (content management system)
- Sending an email with images, logos and html layout, useful for product announcements, newsletters and special offers.
- 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, CJ (formerly Commision Junction) and Rakuten (formerly 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.
Tuesday 5th July 2016
- online shopping cart systems:
woocommerce plug-in for WordPress (as used by Jed on adrianboswell.com)
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 
- Individual assistance with tidying up your Websites and uploading
- A look at Dreamweaver CC 2015, 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
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 (.coms and .co.uk about £7 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
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
