Web Design - Finished Pages

Web Design - Creating Template

Web Design - Design Plans

Web Design - The Brief

Web Design Session 3

Using the html page from the last session to create a template for all the other pages of the website.

Click in a cell > Insert > Editable Region

Make the changes on the template document as this has the editable region and any changes can then be applied across all of the pages of the website.

Filling the cells with content & formatting it.

Useful Websites:

- Lightbox
- Yox View
- Premium Beat
- 123-reg
- one.com

Web Design Session 2

PHP File -
Communication between a website and a database eg. Amazon. Otherwise the site would have thousands of pages and be incredibly slow.

ASP -
Similar to PHP.

CSS-
Cascading Style Sheet, used for fonts, overall design etc.

JavaScript-
Used mainly for sound, Games.


Below is the code for the simplest website with no content.

The on line 1 tells us that from now on we are talking in html. The same code appears again on line 9 but with a forward slash which tells us that we have finished.

Anything you want to be visible must go between the body tags.

Above shows the site being linked to the root folder where all the files for the site are kept, within this is the images folder. This then shows up in the bottom left window where you will now only be able to access files in the root and images folders.

Creating the first webpage:

The homepage must be saved as 'index.html' as this is the web standard which is internationally recognised.

A 1 row, 1 column table inserted into the homepage.

Adding colour to the background.

Adding another column using the split cell button.

Adding colour to each row.

Adding another table to the page.

Designing a rollover button in Photoshop:

Web Document.

Buttons added to the index page.

Web Design Session 1

 Identify Workspace > You need a brief.
- Space to show work
- Contact details
- Promote yourself

*You have less than 5 seconds to impress.
Layout/Colour/Font are imperative in delivering the first impression.

+
Statement page
Large image background
Illustration overlaid
Clear navigation/use-ability
Intriguing
-
Too many boxes
Too much like a template
Poor navigation
Repeat patterns or gradients

Anything to do with a website goes into a root folder.
The internet is just the accessing of other peoples files on their computer.
Keep file names to 8 characters or less.

Web standards:
- Always design for the lowest common denominator.
- Size - 800 x 600 pixels, vertical scroll bars are okay, horizontal ones are not.
- Fonts - HTML fonts, selected font families, give people several choices for fonts.
Eg. Verdana, Geneva, - Sans-Serif.
- Images aren't immediately searchable.
- Quality is an issue and it increases the file size.
- Design in RGB colour mode.
- Check the box 'Only Web Colours'.
- Websites should be under 5MB when finished.
- When you buy webspace, you buy band width.
- In Photoshop, look for;
 File > Save for web devices, then select JPEG and choose image quality.
- Maximum of 8 pages on the website.
Eg. Home/Contact/About/News/Work/Client List.
- Some can be joined together ; Home & About?
                                                                        

Welcome to the world of Dreamweaver ... so this is what it looks like...

                                                                             

Website Mapping

Initial site mapping diagrams looking into functionality and use-ability... the first one seems to have a corner missing. Hmm...