Introduction

History
Web Presentation

The formats

Screen sizes
Color spaces: RGB and hexadecimal
Different image file formats
Optimization

Interactivity

The specificities (non-linearity of the Web publication)
The hypertext links
The different forms of Web sites: static site and dynamic site

Photoshop: presentation

The interface and the workspace
Creation of new documents: configuration
Tools and selection methods
Organization of layers
Photomontage

Illustrator: presentation

The interface and the workspace
Creation of new documents: the settings
The vector
The layers and the sublayers
The clipping masks

Dreamweaver

The interface and workspace
Creating new documents: setting
HTML: structure dodument
Hyperlinks
Formatting

Bridge overview

Presentation of online tools

Design
Production
Analysis
Resourcesy

Preparing the project

Drafting of the project in the form of a note of intent
Drafting of the specifications
Definition

The different types of websites

Showcase sites
The Portfolio
E-commerce
sites Community sites
Blogs
Event sites

The different forms of websites

Static
sites Dynamic sites
CMS
Navigation levels (site navigation, access to sections and sub-sections, horizontal, vertical navigation, links, etc.)

The site tree

Organization of sections
Kinematics of pages
Ergonomics
Navigation principles (site navigation, access to sections and sub-sections, horizontal, vertical navigation, links, etc.)

The graphic charter: visual identity

What is authorized, what is forbidden
Dimension, « zoning »
Define the colors: titles, subtitles, reading text, hypertext links, menu buttons, boxes, etc.
Font styles

Organize your interface

Definition of the wallpaper and the page background
Define the spaces (content, menus, advertising banners, etc.)
Define the different levels of navigation (navigation in the site, access to sections and sub-sections, horizontal, vertical navigation, links, etc.)

Organize your work

Create style libraries
Create object libraries
Export swatches
Export styles

The presentation

Definition of the wallpaper and the page background
Define the spaces (content, menus, advertising banners, etc.)
Define the different levels of navigation (navigation in the site, access to sections and sub-sections, horizontal, vertical navigation, links, etc.)

Creating a home page

Define a positioning grid for the different elements
Define the locations and formatting of the content (text, images, videos, etc.)
Consideration of ergonomics

Workshop: creation of the interface of a home page

Creating topic pages

Variation of the graphic charter in the interior pages
Organization of text-image content
Positioning of menu bars and buttons

Workshop: creation of the interior pages interface

Graphics enrichment

The backgrounds
The gradients of the edges
Header, footers
The thumbnails

Workshop: creation of the interior page interface

Export in html

Photoshop and Illustrator slice tools
Active areas of an image
Exporting a document in html format

Export interface for html integration

Creation of zone markers
Interface splitting

Image optimization

Image formats: JPG, GIF, PNG
Animation: GIF, Flash, CSS 3

Workshop: creation of the interface of a Web page in an html document

The web editor

Insertion of elements in an html page
Management of hypertext links
Insertion and management of menus and menu bars (buttons, tabs, etc.)

Optimizing pages

Optimization of images
Transparencies
Gradients

Workshop: creation of a small website with several sections

From the initial idea to the final realization

Assessment of the achievement: constraints, potential and specificities
Promotion
Referencing
Bringing your site to life