CSCI2608+Multimedia

**__CTEC2608 Multimedia - Ken Wake__** DMU Resources

DMU Module CTEC2608 - Website Design and Creation.
The web has grown at a totally unimagined rate and its technology has had to grow and adapt with it in order to meet the demands of a data-hungry business world and an even more data-hungry and social media loving public. Building a website is one thing, ensuring that it performs at its best and serves up its content in the best way possible is another. This unit examines internet infrastructure and how web pages get from web server to client (user's browser or mobile device) and how we can make the journey smoother. We also deal with planning and building efficient, standards compliant pages which give maximum accessibility to visually impaired users. Course Text - Building Websites the right way using XHTML and CSS - Download

Internet Technology - How does it all work?
How the Internet works - [|Download] The http Request - [|Download]

Keeping it lean - Webite Design Efficiency - The 5 step Process
The 5 Stage Process of Website DesignA Project Management view of web design -[|Download]

Step 1 - User Requirements - [|Download]
Who is the site for? - Business, Personal, Organisationwho are the target audience? - who might we want to view it, age range, gender, type of person?what is the purpose of the site? - is to sell, to inform or a portfolio?what else is already on the internet dong the same thing? research it.

Step 2 - Develop the site structure -[| Download]
How many pages? - are we talking a few, dozens or hundreds?How many sections? - Is the site flat format or divided into areas?How will the files be named? - contact us.html OR contact-us.html OR contact_us.html What naming conventions are we using?what technology are we using? - XHTML only or PHP or ASP.Net or Java or Coldfusion?Wireframing - How will we layout our pages? TemplatesWhat navigation structure will we use? Dropdown menus, text links, image links Sample Basic wireframe - [|Download]Sample low detail wireframe - [|Download]sample high detail wireframe - [|Download]

Step 3 - Visual Design - [|Download]
What tools will we use for visual design? - Photoshop, Fireworks, Illustrator, PowerpointCan we use our visual designs to produce our final graphics? Slicing, Optimising Sample site visuals created in Illustrator and saved as pdfSmple 1 - Download Sample 2 - Download sample 3 - DownloadBackground Images, where can they be used?CSS is our friend........................Honestly

Step 4 - Build, Integrate and Test - [|Download]
What software can we use on the build? - Dreamweaver or text editor (NOT Frontpage)Do we have to hand code it? - YES..................... and no.Building and testing the templates, essential before adding content.Validating the Code, why should we do it?

Step 5 - Launch and Post Launch Tasks - SEO, Maintenance - [|Download]
Publishing the site, uploading to a serverPost publish testing.Post publish Cross-browser testing.Search Engine Optimisation - A post publish task? Updating and Maintaining - Who does it?


 * Week 2 **

Building a Basic Web Template - Using XHTML and CSS
In this exercise we will hand-code a web template using XHTML1 Web Standard and a Cascading Style Sheet. There is a handout which will enable you to practice and a video tutorial which explains the process. XHTML/CSS Step by step - [|Download] Video Tutorials - There are several web deisgn tutorials which can act as revision and practice for this unit. They can be found [|here]

This session will deal with examining the differences between fixed-width layouts and liquid layouts.
 * Week 3 **

We will also look at adding navigation links to menus placed either on the left or across the top of our interface.

Video tutorials are available for liquid processes.

Liquid Layout Part One - [|Here] Liquid Layout Part Two - Here

This session will cover formatting HTML page content using Redefined HTML selectors and Custom Classes
 * Week 4 **

Content Formatting Video - [|Here]

Go through assignment requirements Workshop Session - Assignment 1 Website Build
 * Week 5 **

Workshop Session - Assignment 1 Website Build
 * Week 6 **

Workshop Session - Assignment 1 Website Build completion
 * Week 7 **

__**Week 8 - Module 2 Start :: Digital Imaging with Photoshop**__
 * Scheme for 6 weeks - [[file:sow-module2-digital-imaging.docx]] **

Introduction to Unit, Samples of previous work.

Tutorial - Introduction to Photoshop interface and selection tools. - - Image ducky.tif

Tutorial - City Lights - - Files -

Video Tutorial - Introduction to Interface - View Video Tutorial - Selection Techniques - View

Photoshop exercises - building images using multiple layers
 * Week 9 **

File Formats - Image Resolution - Screen Resolution

Transform tools / blending modes / filters

Photoshop exercises - Helicopter composition, UFO composition
 * Week 10 **

Eagle Owl challenge - repair the photo UK Map Challenge - replace the background

Photoshop exercises - Blending Modes using lighthouse composition multiply/overlay/linear light/
 * Week 11 **

Quick Mask mode to aid selections

Workshop Session - Comic Strip Recreation of sequence from film
 * Week 12 **

Workshop Session - Module 2 Assignment - Comic Strip Recreation of sequence from film
 * Week 13 **


 * Week 14 **
 * Assessment Session Only - Hand-in of Assignment 1 - Website Design AND Assignment 2 - Digital Imaging**