Training materials and tutorials for web design / Nigel Buckner

City Lit Web Design course

Web Design Taster

Files for use in the taster class (Page for editing).

Basic Photoshop techniques

Basic image editing techniques: Adjustments and using Levels, using a selection to target an Adjustment, straightening an image, cropping an image

Introduction to Photoshop Shapes

Introduction to Photoshop Shapes, drawing and editing them

Creating a wireframe

An overview of what a wireframe is and setting one up in Photoshop and Illustrator.

Slicing with Photoshop

Slicing and optimising slices ready for insertion as images in a web page.

Basic menus

Examples, with CSS, of simple horizontal and vertical menus. First level and non-responsive. (759kb)

Social media icons

Using Phtoshop to to create a stylised social media icon set. Includes source files, instuction and example Photoshop doc. (823kb)

Photoshop animated GIF

Making an animated GIF with Photoshop. Includes a sample animated GIF, a Photoshop file for practice and set of intructions, (498kb)

Fixed position

Web page demonstrating fixed elements with outline of CSS. Page is reponsive so can also be used for testing how fixed elements behave in mobile devices.

CSS3

From layout to implementation. Showing how a graphic visual can be interpreted into HTML, with focus on aspects of CSS3

Responsive page layout

Example of a basic responsive web page. With resources. (921kb)

Responsive menus

Two examples of easy to implement responsive menus. One uses CSS only and the other CSS and JS. (15kb)

Responsive and adaptive images

Examples of ways to use images in fluid layouts

Responsive lightbox

Example of a resposive lightbox (Swipebox) with touchscreen swipe feature.

Thumbnail gallery (fixed width)

Two examples showing how a collection of thumbnail images can be arranged.

Thumbnail gallery (responsive)

This example shows how a responsive gallery of thumbnails can be arranged using a minimumm of CSS.

Responsive slideshow

Example of an easy to implement resposive slideshow (ResponsiveSlides.js).

HTML5 video

Using the HTML5 video tag, video file formats, making the video 'responsive' and options for non-HTML5 browsers.

Various media files

Various media files for use in various exercises. Included are: audio files, video files and Flash files - SWF and FLV. (23.2mb)

Web Design Stage 1

Files 1

Resource files for use in class. (314kb)

Files 2

Resource files for use in class (Web site 2). (7.12mb)

circle.psd

Photoshop file for use in class (Web site 2). (6kb)

Web Design Stage 2

Files 1

Resource files for use in class. (1.66mb)

Text for columned layouts

For use with fixed width columned page structures

Relative & absolute position

Exercise files, with example, for practice of combining CSS relative and absolute position attributes. (79kb)

Fluid and fixed width combined

Example of a layout combining fluid and fixed width layout elements, with documentation. (1.83mb)

Web Design Stage 3

Web 3 part 1

Course resources. One column responsive. (1.28mb)

Web 3 part 2

Course resources. Multi-column responsive. (140kb)

Responsive page examples

1 column and multi-columned page examples as used in class

Web 3 part 3

Course resources. Responsive menus. (171kb)

Modal window

A responsive modal window (Remodal) that contains inline content. (147kb)

Responsive lightbox

Basic responsive gallery and lightbox (Swipebox). (1.92mb)

Image sprites

Exercise for using image sprites as rollover images in a menu

Image sprites

Image sprites for use in the image sprite menu exercise. (8kb)

Web design - general materials

Dreamweaver CC 2015+ interface

Summary explanation of the Dreamweaver interface. Useful for getting started.

Basic text formatting with Dreamweaver CC

A starter guide to hand code HTML, internal CSS and using the Properties panel for text formatting.

Formatting text

Formatting text with Page Properties and Properties panel in Dreamweaver.

Links in web design

This illustrates the HTML code for making links and how to create them with Dreamweaver.

Using images

Inserting images and aligning images with text using CSS. With a focus on Dreamweaver.

Optimising graphics

Outline of the main aspects involved when optimising graphics.

Photoshop: Save for web

Using the Save For Web dialogue in Photoshop.

Managing sites & FTP with Dreamweaver

Set-up for managing your site and FTP with Dreamweaver.

Search engine optimisation

Things you can do to improve SEO when making your site.

Using AP Divs

Introduction to using absolute positioned div tags.

Outline of CSS: Cascading Style Sheets

An introduction to CSS, styles, selector types and style sheets.

Formatting a list with CSS

Introduction to styling an unordered <ul> list as a menu.

Intro to CSS Designer panel in Dreamweaver CC

Creating a style sheet, making selectors and editing selectors.

Using an external style sheet with Dreamweaver (CS6)

Set up an external CSS and create styles.

The CSS float property

An illustrated guide showing how the CSS float property works and its affect on page elements.

Intro to page layout with CSS

Illustrates how a typical layout can be achieved using a 'wrapper' and how certain attributes affect alignment and positioning.

Thumbnail gallery (fixed width)

Two examples showing how a collection of thumbnail images can be arranged.

Static, Relative, Absolute, Fixed: CSS Positioning Explained

Ever wondered what effect the CSS positioning attributes have?

Combining relative & absolute position

Explains how to align one element in relation to another with the use of relative and absolute position.

Combining relative & absolute position

Examples of combining relative and absolute positioning.

Responsive and adaptive images

Examples of ways to use images in fluid layouts

Responsive lightbox

Example of a resposive lightbox (Swipebox) with touchscreen swipe feature.

Thumbnail gallery (responsive)

This example shows how a responsive gallery of thumbnails can be arranged using a minimumm of CSS.

Responsive slideshow

Example of an easy to implement resposive slideshow (ResponsiveSlides.js).

HTML5 video

Using the HTML5 video tag, video file formats, making the video 'responsive' and options for non-HTML5 browsers.

Inserting HTML5 video

Inserting HTML5 video with Dreamweaver.

Inserting HTML5 audio

Inserting HTML5 audio with Dreamweaver.

Inserting Flash files

Inserting SWF and FLV Flash files with Dreamweaver.

Various media files

Various media files for use in various projects. Included are: audio files, video files and Flash files - SWF and FLV.

Responsive part 1

Resources for the responsive web design class.