Go directly to this week's information:
10 x two hour sessions on Tuesdays from 18:30 - 20:30 in G219, Totton College, Calmore Road. SO40 3ZX
Starting 22nd September 2015 and running to 1st December 2015
For further information, contact Jed Gibbs MA by email: jgibbs@totton.ac.uk
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. There are monthly 
Creative Cloud subscription options and 30 day free trials available. There are also free open source alternatives such as 
BlueGriffon and 
WordPress which we will look at later in the term.
Tuesday 22nd September 2015
- Introduction to the course, passwords, fire exits, refectory and parking information.
- Set up your site in Dreamweaver CS5 (or 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).
- 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 and becomes essential if you want to embed YouTube videos, advertising banners or jQuery enhancements. - 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 left of the title box:
- You can add additional browsers by choosing File > Preview in Browser > Edit Browser List...
Tuesday 29th September 2015
Add images to your site from USB stick, disc, digital photography, or from the Web. - Simple editing with Adobe Photoshop and optimising for the Web using graphic file formats jpeg, gif ('jif') & png ('ping!').
Tuesday 6th October 2015
- Going live with your site to a sub-directory called 't' on www.totton.org
Your Web address will be www.totton.org/t/yoursitename as entered in the Root Directory box in this walkthrough: Set up your site using Dreamweaver 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. A computer programmer turned singer-songwriter, Jonathan Coulton aka 'JoCo' made his songs available to anyone who wanted to use them as a soundtrack for their videos, and as a result a huge number can be found on YouTube providing him with free publicity.
- Nickelodeon's parent company Viacom sued Google/YouTube and provided evidence that the founders were happy to exploit copyrighted material to grow their popularity and user base. Nickelodeon themselves went against the trend of issuing cease and desist orders against people who put up YouTube clips, and instead ran ads under the clips along the lines of 'if you enjoyed this, watch more at Nickelodeon'. The mash-up Gotye has edited together from fan videos for his hit Somebody that I used to Know.
- Kevin McKleod at incompetech is becoming well known as a composer of atmospheric music for film-makers, and is a favourite of my son Jamie for his Lego animations. 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.
While you can use Photoshop to add a © text layer with reduced opacity to your images to deter online theft (handy for eBay) you can also add an invisible digimarc from the bottom of the Filters menu. On Windows you can get the © symbol by holding down Alt and typing 0169 on the numeric keypad, or Alt g on a Mac. no right click
- Roger Dean's copyright warning.
- royalty free photography - stay within copyright laws using stock photography, it can be surprisingly cheap (or indeed free if you find the right site). My current favourite is 123RF, you pay about £29 to buy enough credits for 25 Web sized images, or a fewer number at a higher resolution for magazines. If you are a photographer yourself then consider uploading some of your own to earn commission.
- Other good stock photo sites include: istockphoto.com; www.shutterstock.com; www.corbisimages.com and Adobe has relaunched its own offering, integrated with its CreativeCloud.
- Free options include Google advanced image search (hidden under the gear wheel)
with licensing options at the bottom of the list set to free to use.
- Flickr Commons
- Classic books are available from project gutenberg
Tuesday 13th October 2015
- A look at free hosting from freehostia.com - chocolate.
- Why you might want to upgrade to paid hosting. Buying a domain.
- NB Adobe special offer for Creative Cloud
- Individual review and assistance
with project development.
- Adding tiling background images to a Web page. Download tiling images from grsites.com. They are free to use
Tuesday 20th October 2015
- Individual assistance with your sites.
- Creating Web pages using Dreamweaver's CSS layouts - and experimenting with editing colours and sizes in the header, sidebar and container.
Tuesday 27th October 2015
- Half Term: there is no session this week
Tuesday 3rd November 2015
- Introduction to CSS
- 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 
Tuesday 10th November 2015
- WordPress is a useful alternative to Dreamweaver with many Web 2.0 features available without coding.
- 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.
Tuesday 17th November 2015
- Individual assistance with your sites.
- History of the internet and World Wide Web
- Using AP Div layers to structure your page layout (Absolute Position Division layers are a sub-set of Cascading Style Sheets).
- 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 layouts to speed production.
- Online video training for Dreamweaver, Photoshop, Flash and pretty much any design software you can think of is available from Adobe, Lynda.com, VTC and Total Training. Most have several free videos for each course as a taster and some have special offers at the moment. For example, 10 free days at Lynda.com
Tuesday 24th November 2015
- Individual assistance with your Websites and uploading.
- Here is the YouTube Dreamweaver tutorial you watched while awaiting working PCs....
Tuesday 1st December 2015
- 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 instantly make all the pictures on your page(s) scale down as needed for smaller screen sizes:
<style>
img {
max-width: 100%;
height: auto;
}
</style>
- Adding button rollovers to your site
- Creating buttons in Adobe Photoshop. Using Layer Styles, adjusting Bevel & Emboss
- A domain name 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). DMoz submission tips
- Spell checking.
- Accessibility and browser compatibility.
- Brief introduction to Flash, a natural partner (and occasional rival) to Dreamweaver. A look at Flash-enhanced sites and online tutorials.
- 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.
- 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 will be looked at in 2016
- A look at the content of the follow-on Web design course starting January 2016. Course info sheet.
- Enrol for January 2016's course at Totton College
Are there any resources or materials required?
CSS Fundamentals Gallery of CSS Web design ideas at csszengarden.com, cssfury.com & cssloggia.com and
<style>
img {
max-width: 100%;
height: auto;
}
</style>
Google html5 guide How HTML5 will change the Web Google promotes HTML5
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 may be 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 addresses are 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 CS6:
- 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 CS6
- Creative Suite 6 and Creative Cloud have monthly subscription systems
(check the Adobe collections if you are also interested in Photoshop and Flash). Education 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 CS7 is eventually released. Creative Cloud subscriptions will give updates as they are released, and some features 'previewed' before the next official release.
BlueGriffon is a free alternative to Dreamweaver released on May 10th 2012 that supports HTML5 and CSS3 - review, developer's YouTube examples, and Webfonts straight from a menu. Add-ons
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)
Adobe Muse : Web design for print designers, first look
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
