A209 Dreamweaver

OneNote     jgibbs@eastleigh.ac.uk     domain   totton.org/e   css cheatsheet

Client Side Customisation of Web Pages

Unit 24 OCR as PDF


June 2016 server migration: all ftp info and passwords unchanged except log in username now set as




HTML CSS JavaScript JQuery
  codecademy.com -
  sign up for free
Microsoft Virtual Academy Khan Academy | character lynda.com/netmag 30-days free

Gallery of CSS Web design ideas at csszengarden.com



cssloggia.com  and cssPlay

WordPress plug-in for CSS animation

Jed's introduction to WordPress Logo




Tues 16th Dec 2015

Creating and using vent art favicon skull16x16 Favicons jednet favicon, 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 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 short cut to your Web site (it looks like an App).

   using FavIcon from Pics

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).


Range of Development Tools and resources

 notepad   Notepad++ | cheatsheet Microsoft's Visual Studio Code
BlueGriffon open source Adobe Dreamweaver    *Set up your site on totton.org
  jsfiddle.net | jsfiddle docs | tutorial Phaser HTML5 + CSS + JavaScript game development
Intro to JavaScript programming svg JSbin | Getting started
javascriptkit.com stackoverflow coders resource
Learn from 12 JavaScript Experts
washington.edu lessons washington ID and Class intro


useful snippets of CSS:

  1. 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:
    img {
    max-width: 100%;
    height: auto;

  2. To centre a box you need to set margin to auto first: http://www.w3schools.com/css/css_align.asp

  3. add a CSS background colour to your page:
    background-color:<style type="text/css">
    body {
    background-color: #33eeff;

(Each colour channel is described using 1 byte of information. Byte can contain 256 different values. So for 3 channels, it's: 256^3 = 16,777,216 = 16M
However, modern browsers support transparency - #AARRGGBB, by similar logic you get: 256^4 = 4,294,967,296 = 4G)




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)

Set the licensing options at the bottom of the list set to free to use.

Flickr Commons


Swift online - hourofcode