10 x two hour sessions from 18:30 - 20:30hrs, starting Tuesday 12th January 2016 running to 22nd March 2016 in room 156 in the Media/Hair & Beauty building.
For further information, contact Jed Gibbs MA by email: jgibbs@totton.ac.uk
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 January 2016
- Introduction to the course, passwords, fire exits, refectory and parking.
- Setting up your site and site definition walk-through in Dreamweaver CS5 and 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. - 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...
- Download free fully-working 30 Day trial versions from Adobe (click the 'try' link)
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 Three 'layers' of a Web page:
- HTML (Hyper Text Mark-up Language) provides the structural layer - containing headings and text plus a way to insert images, videos and sounds.
- CSS (Cascading Style Sheets) provide a presentational layer - positioning, enhancing and keeping the consistency of the pages across your Web site.
- JavaScript provides a behavioural layer - adding interactivity with forms, animations, image swaps, mouse pointer effects, scrolling banners and much more.
Resources to learn coding skills
 Tutorials |
|||
| HTML | CSS | JavaScript | JQuery |
 codecademy.com - sign up for free |
|||
| Microsoft Virtual Academy | Khan Academy | ||
Tuesday 19th January 2016
- Add images to your site from USB stick, disc, by scanning, digital photography, or from the Web. Simple editing with Adobe Photoshop & optimising for the Web (password is 'awd').
- 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 in the Properties Palette, especially if you link from the image. - Introduction to using AP Div layers to structure your page layout (Absolute Position Division layers are a sub-set of Cascading Style Sheets).
- Using tables for layout was common but now discouraged in favour of CSS. Inserting a table. 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.
- Download free fully-working 30 Day trial versions from Adobe click the 'try' link to get Photoshop - and do have a look at Photoshop Elements too as it will be sufficient for most people. Photographers should try Photoshop Lightroom.
- 2 Adobe subscription options for products including Dreamweaver and Photoshop:
One-year plan
The one-year plan for someone with an ongoing need offers lower monthly payments and requires a one-year commitment (if you cancel early you may get a refund calculated on how much you would have paid on the month-to-month plan, deducted from the annual cost).
Month-to-month plan
The month-to-month plan allows you to stop your subscription and then restart it later without reinstalling, within six months. After six months, your account will be deactivated and you will have to purchase a new subscription. - Apple's free Photo is a good alternative for most purposes but Mac-only
- 5 alternatives to Photoshop (see the comments below the article for more)
- Free Photoshop 'Idiot's Guides' from MakeUseOf
- History of the internet and World Wide Web
- 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. Some take a more enlightened view on copyright - Nickelodeon targetted their ads under pirated content on YouTube suggesteing that for more of the same, in better quality, visit their site. Musician Gotye learned to edit video so he could create a mash-up of fans' versions of his hit Somebody That I Used to Know.
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. no right click
Tuesday 26th January 2016
- Working on your personal Web sites. You should be able to add text and images, create new pages and make links between them. Everything you do can be improved or copied and pasted into new layouts later, the main thing is to get some content on your page(s) that we can work with.
- royalty free photography - stay within copyright laws using stock photography:
- 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 (see next Tuesday for 30 day free trial).
- Mac users may like to try macPro Video.com:
Ad-free free hosting from freehostia.com - they also sell domain names and it is a lot easier dealing with one (good) company than 2!
- Creating buttons and rollovers in Adobe Photoshop.
- Using Photoshop's fx Styles, adjusting Bevel & Emboss
Tuesday 2nd February 2016
- Individual review and assistance with project development.
- 30 Day free trial at Lynda.com/netmag
- More on buttons and rollovers including adding animation.
- GRsites for creating buttons and tiled background textures. Other Dreamweaver links.
Tuesday 9th February 2016
- Image map hot spots to create links on specific areas of a picture. Using a Named Anchor to link within a long page to content lower down (or back to the top) is being replaced with ID tags.
- CSS Fundamentals Gallery of CSS Web design ideas at csszengarden.com & cssloggia.com
Tuesday 16th February 2016
- Half Term: there is no session this week
Tuesday 23rd February 2016
- Introduction to CSS
- Using 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
- Experimenting with editing layout colours and sizes in the header, sidebar and container.
- understanding-css-positioning-part-1
Tuesday 1st March 2016
- Individual assistance with your sites.
- using media queries to apply a customised stylesheet for specific screen sizes.
Use View>Toolbars>Style Rendering and link to copies of your CSS set up for each media type that you wish to offer. - creating buttons to allow users to switch stylesheets using JavaScript.
Tuesday 8th March 2016
- Individual assistance with your sites.
- Creating and using
Favicons 
, the 16x16 pixel images used in the address bar and bookmarked favourites list. 
is a useful free alternative to Dreamweaver with many 'Web 2.0' features available without coding.
Tuesday 15th March 2015 
- Assistance with choosing colours for your Web site designs: swatches you choose within Adobe's Color CC (formerly Kuler) are accessible from within many of the Creative Cloud apps. It's also worth exploring Coleure & Paletton - Color Scheme Designer.
- Expanding your font options with free Webfonts from Google, FontSquirrel and
Adobe Edge Webfonts with over 500 free typefaces. The CSS @font-face tag lets you use many more typefaces than the basics listed in Dreamweaver across pcs/Macs and mobile devices such as iPods and iPads.
Tuesday 22nd March 2016
- Individual assistance with tidying up your Websites and uploading
- 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
- Adding an interactive map to your site by customising Google Maps and then copying a pasting the code into your page using an iFrame.
- Embedding sound and Flash,
+ 
video clips or adding QuickTime movies & flvs
- BlueGriffon supports HTML5 and CSS3 - review, developer's YouTube examples, and Webfonts straight from a menu. Microsoft Expression Web 4 can be downloaded at no charge, and there are tutorials within the Microsoft site. This software has the look and feel of Dreamweaver, but is not available for Mac. There is also a set of simple tutorials on expression-web-tutorial.com.
- The Kompozer website offers information and downloads, but no tutorials. The best I have found is on thesitewizard.com. (Note that NVU is an older version of Kompozer. Despite that, a series of tutorials is still available.) BlueGriffon is a similar-looking editor, from the author of NVU. This appears to be the latest (2015) of this set of 3. Once again, we can thank thesitewizard.com for tutorials.
- thefreecountry.com includes other free WYSIWYG web editors and website builders in its listing.
- Adding
Flash content to Dreamweaver. Issues with iPhones/iPads and the rise of HTML5:
Google html5 guide Google promotes HTML5 Adobe Dreamweaver CS5.5 supporting HTML5
How HTML5 will change the Web 'Flash is dying but it's not Apple killing it' - A look at the content of the follow-on Web design course starting April 2016.
- Enrol for April - June 2016's Web Design course at Totton College
- DMoz - The Open Directory. Getting in helps with Google search ranking... tips for submission
- Until next time: online books and/or video tutorials from creativeedge.com, lynda.com, Total Training and VTC; Dreamweaver tutorials from Adobe; Archive collection of Google Doodles including the Les Paul interactive 'guitar'
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
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... )
