Skip to Navigation | Skip to Content

MAT 165 - Web Design 2: Tools and Techniques

Menu

VIDEO TUTORIALS

Index of Video Tutorials

Week 1

Setting Up your Blog and Blogging for the Class

  1. Blogging for the class (7:49)
  2. Setting up your blog and making your first post (15:19)

Week 2

Coding in Dreamweaver

  1. Coding in Dreamweaver CC2017 - Features, Emmet, Quick Keys (33:12)

Review of HTML, CSS, and Exercise 2

  1. Web basics, parts of a URL, and HyperText Markup Language (HMTL) (9:35)
  2. Basic HTML tags, the two-part structure, and the HTML skeleton (15:14)
  3. Coding in Notepad (or Text Edit) versus coding in Dreamweaver (14:39)
  4. Adding structure through headers, paragraphs, lists and more (19:32)
  5. HTML attributes and making links (8:45)
  6. Semantic markup, deprecated code, dirty code, and more (20:23)
  7. Adding CSS and understanding CSS selectors, properties, and values (12:03)
  8. Understanding and coding color on the Web (13:44)
  9. Types of CSS selectors (tags, classes, and ids) and CSS specificity (16:12)
  10. Styling links and more (18:56)

Publishing and FTP in Dreamweaver

  1. Site Management and FTP using Dreamweaver CS5.5 (14:21)
  2. Site Management and FTP with Dreamweaver CC (16:26)

Week 3

Introduction to the HyperPoem Exercise

  1. Introduction to the HyperPoem Exercise and Dreamweaver (4:12)

Introduction to Working with Dreamweaver (CS6)

Note: These are for version CS6 - See the updates for CC2017 below.

  1. Defining a site, creating pages, and adding content (14:00)
  2. The Dreamweaver interface and workspace (23:32)

Introduction to Working with Dreamweaver (Updated for CC 2017)

  1. The Dreamweaver interface and workspace (24:20)
  2. Defining a site, creating pages, and adding content (13:52)

Applying Structure (CS6)

Note: These are for version CS6 - See the updates for CC2017 below.

  1. Creating headers, paragraphs, line breaks, divs, and more (15:48)
  2. Using special characters (10:11)

Applying Structure (Updated for CC 2017)

  1. Adding structure and markup - headers, paragraphs, line breaks, HTML5 strcutural elements, divs, and more (14:49)
  2. Using special characters (12:58)

Formatting Your Page with CSS (CS6)

Note: These are for version CS6 - See the updates for CC2017 below.

  1. Page properties (18:50)
  2. Creating and editing CSS styles (14:28)
  3. CSS ctyles continued - classes, IDs and editing CSS using the properties inspector (19:19)

Formatting Your Page with CSS (Updated for CC 2017)

  1. Page properties (11:47)
  2. Creating and editing CSS styles - The CSS Designer Panel (34:42)
  3. CSS Styles in Practice on the HyperPoem Exercise - Including Working with Images, IDs, ViewPort Units, Drop Shadows, and more (37:39)

CSS and Typography

  1. CSS properties for controlling typography (13:00)

Creating Links and Understanding Targets (Hyperpoem Exercise)

  1. Creating links to external web pages and targeting browser windows (15:56)
  2. Relative links and understanding file paths (13:21)
  3. Styling links (12:15)
  4. Named anchors, IDs, and within-the-page links (11:31)

CSS Styles in Dreamweaver CS6 versus Dreamweaver CC

  1. The CSS Styles Panel in Dreamweaver CS6 (9:30)
  2. The CSS Designer Panel in Dreamweaver CC (15:00)

Week 4

Changes in Dreamweaver CC relating to Exercise #3

  1. Updates to Dreamweaver CC relating to Exercsie #3 (Inserting Content and Special Characters, Named Anchors, Live View, CSS Desinger Panel, etc) (32:37)

Web Fonts and Font Families in Dreamweaver CC

  1. Working with Web Fonts and Font Families (41:13)

Optimizing Imagery Using Photoshop

  1. Introduction to image optimization (3:17)
  2. Understanding image size and resolution (7:03)
  3. Cropping and straightening images (4:40)
  4. Optimizing images through image simplification (8:58)
  5. Save For Web and Devices and understanding the JPEG file format (23:01)
  6. Understanding the GIF file format (17:15)
  7. Understanding the PNG file format (10:28)

Working with Images in Dreamweaver

  1. Inserting Images into web pages and understanding ALT tags (9:28)
  2. Editing image attributes and properties (10:04)
  3. Integrating images and text (6:42)
  4. Image attributes and properties - Update for CS6 (4:00)
  5. CSS for images (borders, margins, and floats) (13:01)
  6. Images as buttons/links and image maps (9:42)

Background Imagery and CSS

  1. Working with background imagery (5:58)
  2. Creating and using patterns for tiling backgrounds (6:07)
  3. Working with gradient backgrounds (10:15)
  4. Gradient backgrounds using CSS and Dreamweaver CC (5:11)
  5. Large background images (17:48)
  6. Adding and positioning backgrounds within HTML elements (8:59)

Week 5

Introduction to the Midterm Project

  1. Introduction to midterm project guidelines and processes (17:00)

Information Architecture and the Midterm Project

  1. Anatomy of a website (7:03)
  2. Understanding information architecture (20:10)

Creating and Inserting Graphics Using Photoshop and Dreamweaver

  1. Creating Rollover Buttons (16:31) *Later in the class, I will demonstrate how to create graphic rollovers with pure CSS instead of JavaScript (as required in the midterm project), including using CSS sprites.
  2. Copying and pasting graphic content into Dreamweaver (6:48)
  3. Photoshop smart objects (17:16)

Color Palettes and Resources

  1. Creating a color palette and using Photoshop swatches (23:43)
  2. Color resources and the Kuler Extension for Photoshop (9:30) * Note: Adobe has recently changed the name of Kuler to Adobe Color CC and the Kuler Extension in Photoshop is simply called "Adobe Color Themes"

Designing a Graphical User Interface (GUI) Using Photoshop: From Sketch to Finished Comp

  1. Graphic Development Using Photoshop - iPoint Logo (15:34)
  2. Graphic Development Using Photoshop - Menu Buttons (16:15)
  3. Graphic Development Using Photoshop - Interface, Part 1 (17:23)
  4. Graphic Development Using Photoshop - Interface, Part 2 (21:58)
  5. Graphic Development Using Photoshop - Interface, Part 3 (29:21)

Week 6

The CSS Box Model and CSS for Positioning and Layout

  1. CSS for Positioning - Introduction (7:25)
  2. Display Types - Block and Inline Boxes (12:14)
  3. The CSS Box Model (16:33)
  4. Understanding Document Flow - Static, Relative, Absolute, and Fixed Positioning Techniques (21:36)

Exploring Absolute Positioning for Layout

* Note: Working with AP Divs is different in Dreamweaver CC and these changes are detailed in the videos below on Working with AP Divs Dreamweaver CC.

  1. Introduction to working with AP Divs in Dreamweaver (10:15)*
  2. Layout with AP Divs (10:10)*
  3. Overflow and Visibility (12:24)
  4. Centering a Layout Horizontally (8:12)
  5. Centering a Layout Vertically (4:56)

Working with AP Divs in Dreamweaver CC

  1. Working with AP Divs in Dreamweaver CC - Part 1 (19:09)
  2. Layout with AP Divs in Dreamweaver CC - Part 2 (12:11)

Extensions (or 'Add Ons' ) in Dreamweaver*

* Note: This video is optional and only relevant to DW versions CS4 - CS6. Adobe has changed the way extensions work in DW CC. They now call them "Add Ons" and you can find them via the Window > Browse Add Ons menu option. Many of the older extensions for DW no longer work (such as the Lorem and More extension referenced in the video below).

  1. Managing Extensions and the Dreamweaver Exchange (8:59)

Week 7

Working with Floats and Float-Based Layouts

  1. Working with Floats - Introduction, Adding and Clearing (7:52)
  2. Working with Floats - Exploring Deeper, With Margins (14:17)
  3. Working with Floats - Two-Column Layout (24:10)
  4. Working with Floats - Three-Column Layout and Faux Columns (16:29)

CSS Box Layouts - Exercise #4 Overview and Example

  1. Overview of Exercise #4 - CSS Box Layouts (33:52)
  2. Approaching Exercise #4 - Updates for Dreamweaver CC (26:01)

Week 8

CSS Image Replacement

  1. CSS Image Replacement Technique (5:54)

CSS Rollover Menus

  1. CSS Rollover Menu - Styling Links to Look Like Buttons (21:18)
  2. CSS Rollover Menu Using Images (18:38)

CSS Sprites and the Sliding Door/Background Position Technique

  1. CSS Sprites - Creating a Sprite Sheet (9:04)
  2. CSS Sprites - Rollover Menu Using Sprites (18:13)

External vs. Internal CSS Styles, Moving Styles, Renaming Styles, Using Body IDs to Target Unique Styles in Individual Pages

  1. Managing Your CSS Styles, Internal vs. External CSS Stylesheets (22:19)

Implementing a CSS Layout - Start to Finish - Example 1

  1. Implementing A CSS Layout - Introduction - The pieces and the whole (7:52)
  2. Implementing A CSS Layout - Part 1 - Intro and HTML markup (11:06)
  3. Implementing A CSS Layout - Part 2 - Planning the layout and sketching a wireframe (4:44)
  4. Implementing A CSS Layout - Part 3 - Working with the header/logo and using Image Replacement techninques (5:25)
  5. Implementing A CSS Layout - Part 4 - Working with the container and centering your layout (5:57)
  6. Implementing A CSS Layout - Part 5 - Creating a CSS rollover menu (29:04)
  7. Implementing A CSS Layout - Part 6 - Implementing the layout using floats and margin (8:36)
  8. Implementing A CSS Layout - Part 7 - Styling the page id/section header and customizing CSS for individual pages by giving the body tag an id (17:54)
  9. Implementing A CSS Layout - Part 8 - Tiling a background image within a containing box to create the look of columns (8:05)
  10. Implementing A CSS Layout - Part 9 - Styling the footer (8:52)
  11. Implementing A CSS Layout - Part 10 - Styling the text (18:29)
  12. Implementing A CSS Layout - Part 11 - Creating a template with editable regions and attributes (17:22) * We will be cover Templates in greater detail in future videos

Week 9

Designing a Graphical User Interface (GUI) Using Photoshop: From Sketch to Finished Comp
Note: These graphic development videos were posted earlier, but I include them again here as they complement the videos below and demonstrate the full process of going from a sketch/wireframe, to a PSD comp, to a finished HTML/CSS site.

  1. Graphic Development Using Photoshop - iPoint Logo (15:34)
  2. Graphic Development Using Photoshop - Menu Buttons (16:15)
  3. Graphic Development Using Photoshop - Interface, Part 1 (17:23)
  4. Graphic Development Using Photoshop - Interface, Part 2 (21:58)
  5. Graphic Development Using Photoshop - Interface, Part 3 (29:21)

Implementing a CSS Layout - PSD to HTML/CSS - Example 2

  1. PSD to HTML/CSS - Part 1 - SetUp, Site Defintion, External Styles (4:19)
  2. PSD to HTML/CSS - Part 2 - HTML Markup, Structuring Content (17:34)
  3. PSD to HTML/CSS - Part 3 - Sizing and Centering Using Containers (4:45)
  4. PSD to HTML/CSS - Part 4 - Slicing and Background Graphics (11:29)
  5. PSD to HTML/CSS - Part 5 - Logo/Image Replacment (11:09)
  6. PSD to HTML/CSS - Part 6 - Menu Using Sprites (31:32)
  7. PSD to HTML/CSS - Part 7 - Content Layout with Floats, Margin (17:12)
  8. PSD to HTML/CSS - Part 8 - Page ID, Body ID (20:35)
  9. PSD to HTML/CSS - Part 9 - Branding Images (22:01)
  10. PSD to HTML/CSS - Part 10 - Branding Text (34:48)
  11. PSD to HTML/CSS - Part 11 - Shadows (14:14)
  12. PSD to HTML/CSS - Part 12 - Text Styling (23:09)
  13. PSD to HTML/CSS - Part 13 - Footer (12:26)

Week 10

Responsive Design and Mobile Optimization

  1. Introduction to Responsive Design (17:23)
  2. Media Queries - Part 1 - Introduction and Syntax (18:57)
  3. Media Queries - Part 2 - Layout, Box-Sizing, Within DW (17:50)
  4. Understanding Viewports, Screen Sizes, and Pixel Densities (20:39)
  5. Fluid Layouts - Part 1 - Overview, Moving from Fixed to Fluid Designs (11:08)
  6. Fluid Layouts - Part 2 - Coding Fluid Layouts (31:47)
  7. Flexible Images and Backgrounds (31:48)

Week 11

Responsive Navigation - Creating a Hamburger Menu

  1. Responsive Nav - Part 1: Introduction, HTML, and CSS (14:18)
  2. Responsive Nav - Part 2: Toggling the Menu with jQuery (20:21)
  3. Responsive Nav - Part 3: Adding Animation and the Hamburger Icon (18:19)

Implementing a Responsive Design: From Comp to Code - Example 3

  1. Responsive Design - Comp to Code - Part 1: Introduction, Using Photoshop and Artboards (14:35)
  2. Responsive Design - Comp to Code - Part 2: HTML5 Structure, Emmet (30:34)
  3. Responsive Design - Comp to Code - Part 3: Applying CSS, CSS Resets, Extracting Photoshop Image Assets (18:11)
  4. Responsive Design - Comp to Code - Part 4: More CSS, CSS Designer (24:29)
  5. Responsive Design - Comp to Code - Part 5: More CSS, the Code Navigator, and Media Queries (34:40)

CSS Box Layouts Challenge Solutions

  1. Exercise Overview and Layout 1 (33:52)
  2. Layout 2 (13:34)
  3. Layout 3 (13:44)
  4. Layout 4 (9:12)
  5. Layout 5 (6:02)

Week 12

Finalizing the Design Before Making a Template: Validating Pages, Checking Pages, Cross-Browser Compatibility, and Bug Fixes

  1. Page validation, checking pages, reports, browser compatibility (12:13)
  2. Fixing bugs - The menu step down bug and using the :after pseudo class (17:24)
    * Note that this video makes reference to Adobe Browser Lab for cross-browser testing and Adobe has recently decided not to support browser lab any more, but Sauce Labs has a service that does allow cross-browser testing.

Working with Templates

  1. Defining a template and creating editable regions (16:44)
  2. Creating editable template attributes and updating template properties (15:37)
  3. Updating the template and making site-wide changes (10:32)

Working with Tables

  1. Working with tables, inserting tables (10:18)
  2. Adding and deleting rows and columns, merging and splitting cells (12:34)
  3. Table and cell properties and sizing (24:17)
  4. Styling tables with CSS (15:22)
  5. Exploring table-based layouts (28:08)
  6. Importing tabular data (5:49)

Week 13

Graphic, Web, and Media Design Principles

  1. Graphic, Web, and Media Design Principles, Tips, and Good Habits
    Note: This is an HTML5 slideshow requiring a modern browser (not old IE). If you don't have that then view this alternative.
  2. Collected Design Principles (of people, organizations, software, hardware) from Jeremy Keith at Adactio

Creating Web Pages with Photoshop (Exercise #5 Demos)

(Please note that the tutorials below incorrectly refer to the exercise as Exercise #3 and state that there is only 4 exercises in the class. I'm sorry if this causes confusion. The tutorials remain relevant, but the course content has been reorganized somewhat since these were recorded with the blogging exercise now listed as Exercise #1, etc. Thus, please keep in mind that this class has 6 exercises and this is Exercise #5.)

  1. Photoshop Interface/Exercise - Introduction (3:51)

Building the Interface in Photoshop (Exercise #5 Demos)
These videos are optional, but useful if you are newer to PhotoShop.

  1. Photoshop Interface - Designing in Photoshop - Part 1 - Compositing, Working with Blend Modes, and Masks (17:13)
  2. Photoshop Interface - Designing in Photoshop - Part 2 - Adjustment Layers, Masks, Text, and Layer Styles (23:45)

Photoshop Slicing, Save for Web Options and Using Dreamweaver for RollOver Images and Centering (Exercise #5 Demos)

  1. Photoshop Interface - Slicing and Slice Options (14:35)
  2. Photoshop Interface - Saving for the Web and Editing in Dreamweaver (27:59)

New Web Design Features in PhotoShop CC

  1. Generating Image Assets (14:13)
  2. Copy CSS (10:00)
  3. Extract Assets (6:35)

Photoshop Comp to Code with Extract (in the Cloud and in Dreamweaver)

  1. Extract in the Creative Cloud (6:09)
  2. Working with the Extract Panel in Dreamweaver CC (11:14)

JavaScript and Dreamweaver Behaviors

  1. Introduction to JavaScript and Dreamweaver Behaviors (13:11)
  2. JavaScript Behaviors - Swap Image Slideshow (17:41)
  3. JavaScript Behaviors - Show and Hide Divs (13:13)
  4. JavaScript Behaviors - Open Browser Window (7:10)
  5. JavaScript Behaviors - Effects, Change Property, and More (12:38)

The Spry Framework and Widgets (CS6 only)
Note: The Spry Framework has been removed from Dreamweaver CC in favor of jQuery UI widgets.

  1. Introduction to Spry and the Drop Down Menu Widget (14:05)
  2. Overview of Spry Widgets - Accordian, Tabbed Panels, Collapsible Panels, and Tooltips) (11:13)

jQuery UI Tools and Widgets (CC only)
Note: jQuery UI widgets are a new feature of Dreamweaver CC.

  1. Introduction to jQuery UI (9:50)
  2. Customizing jQuery UI Widgets (19:56)

Creating a CSS Drop Menu (enhanced with jQuery)
This is an example of a pure CSS drop menu that doesn't require JavaScript to function. It is generally preferred over and somewhat easier to customize than the Spry menu method detailed in the video above.

  1. CSS Drop Menu - Introduction (3:28)
  2. CSS Drop Menu - The HTML (8:32)
  3. CSS Drop Menu - The CSS (32:04)
  4. CSS Drop Menu - jQuery Enhancements (14:22)

Introduction to Animation on the Web (CSS, jQuery, and Flash) and Exercise #6

  1. Introduction to Exercise #6 (5:29)

CSS3 Animations using the Transition Property

  1. Animation with the CSS3 Transition Property (9:40)

An Overview of jQuery for Animation and Interactivity

  1. What is jQuery (4:54)
  2. A look at jQuery plugins (7:22)
  3. Getting and setting CSS attributes with jQuery (8:58)
  4. jQuery and interactive events (6:53)
  5. jQuery and animation (13:09)
  1. Scripting ajQuery Slideshow - Exercise #6 demo - Part 1 - Animation (27:11)
  2. Scripting a jQuery Slideshow - Exercise #6 demo - Part 2 - Interactivity (18:32)

An Overview of CSS3 Keyframe Animation

  1. CSS3 keyframe animation basics (37:07)
  2. Creating a pure CSS3 slideshow - Exercise #6 demo (23:52)

An Overview of Flash for Animation and Interactivity
Using CS6/AS2 mostly with some updates to CC/AS3 for the Exercise Demo in Video #5

  1. Step Animation in Flash (14:50)
  2. Tweened Animation in Flash (17:17)
  3. Buttons, Actions, and Interactivity in Flash (8:54)
  4. Creating a Flash Slideshow - Exercise #6 demo (29:50)
  5. Creating a Flash Slideshow - Scripting updates for AS3 and Flash CC (6:36)
  6. Publishing Flash and Integrating Flash Media into Dreamweaver (13:46)

Search Engine Optimization