Basic Web Design

Course Starts : May 30, 2012

Day & Time:Wednesday 9:30 a.m.- 12:30 p.m.

Length: 18 weeks

Academic Hours: 72

Instructor: Baruch Mackler

Cost: 4500 ₪ + 200 ₪ Non refundable Registration Fee.

Payment by Cash, Check or Credit Card. All fees must be paid up to one week before the course starts. If paying by Credit Card, tuition may be paid in installments of no less than 250 ₪ /mo for a maximum of 10 months.  If paying by check, checks must be paid in advance and can be post dated until the course completion date. Cash – tuition must be paid in full before the course begins. (For exceptions please call our office)

COURSE DESCRIPTION

Prerequisite: English Mother Tongue Level.

Overview: As the World Wide Web is evolving, with new out bounded technologies, there is a high demand for web designers. This course will give the students professionally the essential tools and overview to conceptualize design from start to finished product of implementing your own website. The course will be comprised from basic overview of Photoshop – (Graphic tool for websites) and using an editor (Dreamweaver) to implement your graphics live on the web.

Photoshop

Learn the fundamentals of Photoshop allowing you to perform basic/intermediate functions focusing on the construction of a website.

Eight lessons – 28 hours

Lesson 1: Intro and Interface Essentials / Navigation.

1. Website requirements gathering – differences between website types (business site, educational site, blog site, etc.), defining navigation style and need –  one vs. two navigation bars on a site, single tier vs. two tier navigation.
2. Opening a document, saving formats such as (PSD), and optimizing for the web (JPG, GIF, PNG), Resolution.
3. Differences between Raster vs. Vector
4. Introduction to file formats. Modifying Resolution, Color Mode, and
   Bit Depth. What resolution does your image need to be? Image sizes, resizing. Accurate print size preview
5. Different sizes for different needs – web screen resolutions and how to design for them
6. Basic tools such as the marquee selection tool (square), rectangle, Ellipse (oval), circle. Using the navigator palette, zooming. Learning DPI (Dots Per Inch).

Lesson 2:  More Advanced Tools and techniques.

1. Adding a border, by extending the canvas. Undo VS. History, Image Interpolation and manipulations: rotating, scaling, flipping, distorting and skewing.
2. Learning how to crop images and presetting default sizing for cropping.
3. Correcting brightness,  contrast, tones, basics of curves
4. Stamping/Cloning

Lesson 3: Painting, Picking Colors, Filters.

1. Brush tool essentials. Using the color picker. Color palette, saving swatches, color sampling with the Eyedropper tool.
2. Brush and Color Picker – formats, sizes, color picker, swatches, eyedropper tools
3. Tonal corrections: Brightness / Contrast. Using the Histogram palette. Improving tonality with levels. Using the auto contrast command.
4. Using Photoshop filters to alter your image

Lesson 4: Fonts and Typography

1. Font usage, what fonts to use
2. Regular and High end Text effects
3. Using fonts as graphic tools and not just information – enhancing layout
4. Typography and built in Photoshop settings
5. When to use fonts and when to use system text

Lesson 5:  Layers Essentials.

1. Working with layers. Changing the opacity of the layer.
2. Applying layer effects. Modifying, layer modes.
3. Layer visibility / non-visibility. Making new layers, deleting layers, merging layers.
4. Layer masks and channels

Lesson 6: Navigation and design layout

1. Core Essentials of web design
2. Web Standards – where they were, where they are going
3. Common website mistakes
4. Setting up your website file structure
5. What needs to be a graphic, what doesn’t need to be and what cant be.
6. Interface Design – Buttons, content, pictures, page continuity – How they all fit together to create the perfect website.

Lesson 7: Start of final design

1. The elusive transparent spacer graphic
2. Using all your new tools to start a simple website design with 5 buttons
3. Setting up proper guides

Lesson 8: Completion of Design

1. Prepping design for web
2. Slicing up the images properly
3. Saving for web – final format, file size and how to balance image quality for size.

Dreamweaver

Overview: Dreamweaver CS4 is easy to use software that allows you to create professional web Pages. Dreamweaver CS4 allows one to quickly add design and functionality to the Pages, without the necessity to program HTML code manually. It’s possible to create tables, edit frames, work with layers, insert JavaScript behaviors, etc., in a very simple and visual form.  Seven lessons – 24.5 hours

Lesson 1: Interface Essentials and Basic Layout

1. Introduction to Dreamweaver CS4 workspace, Document window, Toolbars, Insert panel and tool sets.
2. Opening a document type and properties saving formats for the web: such as .html or .htm, previewing the document in an actual web browser.
3. Introduction to the Code, Design, and Split view modes.
4. Defining the site, file viewer and attributes
5. Save as Template

Lesson 2: Tables and Inserting Content

1. Learning how to insert and modify a table.
2. Setting borders, cell spacing, cell padding
3. Table Properties.
4. Inserting images with the assets panel. Adding text, aligning page elements. Modifying page properties.

Lesson 3 : Learn about Templates and Build your website

1. Create the HTML pages
2. Learn essential difference between Dreamweaver Template and html
3. create a master template page
4. prepare to fill in content

Lesson 4 : Typography

1. Introduction to HTML text editing. Font lists, text alignment.
2. Appropriate font sizes.
3. CSS – What is CSS? What is the importance of using it?
4. Learning to code a CSS rule property. CSS Panel.
5. Applying the CSS, rule to the web page document.  Linking to external CSS vs local CSS rules

Lesson 5: Basic Interactivity using Dreamweaver

1. Simple Rollovers – Inserting Rollovers.
2. Animated Rollovers, Flash Buttons built into Dreamweaver.

Lesson 6: Forms and Behaviors

1. Creating a basic HTML form.
2. Form properties and modifying fields.
3. Inserting a Submit and Clear Button.
4. Making the form work
5. What are Behaviors? What purpose do they serve?  Common used behaviors to create interactivity and higher levels of usability.
6. Open a new browser window with pre-set dimensions (Width, Height).

Lesson 7: (Final)

1. Make your website live.
2. Putting your files via the web server
3. FTP Basics – Decipher your web server info and uploading your site via FTP (File Transfer Protocol)

HTML5 Three lessons – 10.5 hours