Web Design from Scratch - all you need to know

A good co-ordinated background can make an ordinary website look stunning

http://www.digitalmice.com/webdesignhighersite/index.html


http://www.digitalmice.com/DAD/dreamweaver.pdf

Files for Coastal Path on the network drive
M:\Public\FCPImagesCreativeCommonsApplies

Gallery from Photoshop at
M:\Public\FCPImagesCreativeCommonsApplies\fcp2

Tesco Home Pages for Fife Coastal Path at
http://homepages.tesco.net/~fcp/

YouTube Video at

Struggling? Need a helping hand.

http://www.entheosweb.com/photoshop/website.asp

Above site gives you full instructions how to create - also gives example file.

Download and diagnose how it is working

Email me if you have any difficulties

gmcarthur{at} carnegiecollege.ac.uk

FTP Reminder

Slideshow from Photopeach.com

Fife Coastal Path on PhotoPeach

Link on Network Drive to FCP Photos

V:\Public\FCP\FCPhotos
Videos are in root of FCP

FCT Video for Website

Assessment 1: Evaluate 3 websites

David Lemm
http://www.davidlemm.co.uk/index.php?/animation/dressed-in-night/

Control Driving Skills
http://www.drivingskills.on.ca/

Designer
http://www.checklandkindleysides.com/

Unit Specification for Web Creation

http://www.sqa.org.uk/files/nu/F1KJ11.pdf

Link on SQA Website

Visual Design Basics

CARP (Contrast, Alignment, Repetition, Proximity)

http://iggyssyllabus.pbworks.com/f/carp.pdf

Above link takes you to the basics of design

Do you agree?

Assessment Preparation for Fife Coastal Path

Style Sheet
Colour Scheme - Background, Text Area background,
Heading 1, Heading 2 Heading 3 and Body Text
Prepare gallery of images
Prepare Video of stills or an animation
Must include 6 pages/screens eg 1 Main (Intro to Walk with external link to official Fife Coastal Path site or Scottish Tourist Board Web Site), 2 North Queensferry, 3 Inverkeithing, 4 Dalgety Bay, 5 Aberdour, 6 Burntisland, 7 Video (Could be Youtube), 8 Gallery, 9 Map of area (could be animated map)
Design layout of website by hand and/or use www.bubbl.us eg Top banner, centred page or Side banner or metaphor type site, Multi-direction navigation or always returning to main page




Text spiel which you may use can be found at ancient site of

http://homepages.tesco.net/~fcp/

Search Flickr for photos of the towns you intend creating the site around and acknowledge using under creative commons license in the footer of each page.  Choose images that are all much the same size and do not small thumbnails

www.flickr.com

Think carefully about a colour scheme as this can make much more professional looking

Ensure you have alternative text on all pages

Titles on all pages

Email link in the footer to yourself

Other things you might consider: game, quiz, animations

Knowledge to date

WEB SKILLS TO DATE

1. Create folder
2. Manage Site within Dreamweaver - This may have to be done each time you login to Dreamweaver to carry on with the previous session
3. Creation of CSS FILE
4. Attaching CSS file to .html page
   
5. Creating a container file where margins are elastic but centre column fixed
6. Inserting table - centring
   
7. Linking pages
8. Index.html page as home page
   
9. Linking to external pages
10. Flash buttons
11. text buttons
12. Inserting YouTube Video
13. Creation of a banner in Photoshop
    
14. Creation of a web gallery in Photoshop
    
15. Inserting Flash Gallery
16. Inserting pics
17. Inserting html eg widgetbox
18. Using a Spry object
19. Changing Spry object
20. Changing CSS attributes
21. Alternative Text, Meta Tags, Titles of pages
    
22. FTP Software
23. Registering with Google

Create a Website with the following info. Stick to the above Guidelines

Portfolio Website for yourself

About Me

Multimedia

Gallery
                                    Tabbed Spry Panel for Gallery and Video

Video

Contact

Adobe Training Videos for CS3 - Teach you all about Dreamweaver
http://www.adobe.com/designcenter/video_workshop/