Adobe Dreamweaver at Eastleigh College

Two hour sessions from 13:30 - 15:30hrs, starting Friday 20th March 2015 in A208.
For further information, contact Jed Gibbs MA by email: jgibbs@eastleigh.ac.uk

Dreamweaver is the industry standard on Mac and Windows, ideal for anyone wanting to gain employment or design professional sites.

Go straight to this week's information:

Friday 20th March 2015

Introduction to the course.
Setting up your site and site definition walk-through 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...
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

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.
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.
Apple's free iPhoto or Photos are also good alternatives for most purposes but Mac-only
5 alternatives to Photoshop see the comments below the article for more, including Aviary from worth1000.com
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

Friday 27th March 2015

Working on your personal Web sites. You should be able to add text and images, create new pages and make links between them (we covered this all last week). Everything you do for now can be improved or copied and pasted into new layouts later, the main thing is to get some content on your pages that we can work with.
Creating buttons and rollovers in Adobe Photoshop.
Using Photoshop's fx Styles, adjusting Bevel & Emboss, Drop Shadows, Colour Overlays etc.
Creating animated gif graphics and buttons in Adobe Photoshop.

Friday 24th April 2015

Working on your personal Web sites.
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).
GRsites for creating buttons and tiled background textures. Other Dreamweaver links.
Setting up ftp and putting your sites to www.totton.org/e1/yourfoldername

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). You can also create a larger icon that iPad and iPhone users can add to their home screen as a shortcut to your Web site that looks like an App.

favicon.co.uk for more information. 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).

Once you have your favicon.ico and perhaps an animated_favicon.gif and an apple-touch-icon.png for Apple iOS devices, you need to place them in your site root folder next to your index.html homepage. You also have to remember to upload the icons to your hosting server and to paste the following code on your index page, just under the title metatag in the head:

Your live sites on totton.org:

Ben	Brad	Brandon	Dan	Dave	Elliot	Gabby
George	Luke	Matt	Michael	Rob	Rod	Ranvir

Friday 1st May 2015

Working on your personal Web sites.
Using Webfonts to enhance your Websites
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).
iFrames are now established as the standard way to include a movie clip from YouTube or a map from Google.

Friday 7th May 2015

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. Introduction to CSS
Experimenting with editing layout colours and sizes in the header, sidebar and container.
understanding-css-positioning-part-1
CSS Fundamentals Gallery of CSS Web design ideas at csszengarden.com, cssfury.com & cssloggia.com and

Friday 15th May 2015

- cancelled due to community event set-up

Friday 22nd May 2015

Using more than one CSS for your page(s).
See the buttons at the bottom of this example page (and steal the code).

Friday 29th May 2015 - Half Term

Friday 5th June 2015

Dreamweaver uses javascript for buttons and rollovers
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.
Introduction to WordPress CMS.
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). A good general source of advertisers is tradedoubler.com but you may find it better to find advertisers directly through their affiliate schemes eg Daz3D.com who use CJ Affiliate by Conversant (formerly Commission Junction). Amazon are also worth considering.
When it comes to advertising your own site, try Google AdWords and Facebook advertising...

Assessment criteria

Is the site working live? With more than one page?

Do the page titles make sense?

Is there a favicon?

Images of reasonable quality, file type and size.

Example of a rollover/button.

Example of an imagemap.

Example of embedded video(s).

Example of embedded page (yours or external site).

Is there an alternative CSS theme, and does it work with a javascript button?

Is the site coherent in its overall look? Does it look professional or personal without being a mess.

Go to top of page