Description

This course will teach you how to create a website from delivering a Photoshop PSD file to building its structure and template pages on the client side. You will design the site using HTML/CSS standards and enhance it with features from the jQuery JavaScript library.

Who is this training for ?

For whom ?

Graphic designers and integrators.

Prerequisites

Training objectives

Use Photoshop for Image Cutting and Optimization Implement an integration methodology Carry out an HTML integration while respecting the semantics Restore the design of a site with CSS styles while respecting W3C recommendations Discuss the implementation of the jQuery JavaScript library

Training program

• Project organisation
  • - Analysis of the Photoshop PSD file.
  • - Zoning.
  • - Choice of development tools.
  • - The development environment.
  • - Methodology.
  • - Taking constraints into account.
  • - Exercise: Editing the PSD file provided.
  • - Exploring layers.
  • - Carrying out zoning.
  • - Determining the number of page templates.
• Cutting in Photoshop
  • - Think carefully about cutting.
  • - Layers.
  • - The slice tool.
  • - Image optimization.
  • - The choice of image format.
  • - Merging slices.
  • - Exporting slices.
  • - The dangers of HTML export in Photoshop.
  • - Exercise: Organizing the cutout.
  • - Creating the cutout in Photoshop.
  • - Optimizing the images.
• XHTML integration
  • - Reminder of HTML syntax.
  • - Choice of Doctype.
  • - The main HTML tags.
  • - Use the right tags.
  • - Validate your code.
  • - Exercise: Construction of the HTML structure of the site based on the zoning carried out previously.
  • - Discovery of the WC3 validator.
• Design with CSS
  • - Targeted browsers.
  • - CSS localization.
  • - The main CSS selectors.
  • - The main properties.
  • - The CSS flow.
  • - The concept of boxes.
  • - Merging margins.
  • - The concept of container.
  • - Priority of selectors.
  • - The block and inline tags.
  • - The conditional comment.
  • - Exercise: Constructing the site's external style sheet.
  • - Discovery or reminder of CSS syntax: selectors and properties.
  • - Inspection of CSS code with Firebug or Chrome.
  • - CSS and the site menu.
• Good practices
  • - Compliance with CSS development standards.
  • - Target HTML elements correctly.
  • - Shortened syntax.
  • - Grouping selectors .
  • - Validate your CSS code.
  • - Comment your code.
  • - Convention for writing CSS code.
  • - Exercise: Preview the page in different browsers.
  • - Correcting the code.
  • - Putting CSS writing conventions into practice.
  • - Discovering the CSS validator.
  • - Building a style sheet for IE.
• Carousel jQuery
  • - Installing jQuery.
  • - Installing jquery.
  • - jcarousel.
  • - pack.
  • - Integrating a slider to the site.
  • - Exercise: Installation of jQuery and jquery.
  • - jcaroussel.
  • - pack.
  • - Discovery of the syntax.
  • - Integration of a slider.
  • - Modification of CSS and JavaScript script.