MINNEAPOLIS

August 18, 2011

Seminar Schedule

• • REGISTRATION OPENS AT 8:30am

  • Collect your copy of Bring Your Web Design to Life.

  • Prototype Your Interactive Design  (9:00–9:30)

    Before we start building our website, we'll need client approval. We'll start by using Photoshop and Fireworks to create interactive prototypes, in both HTML and PDF, to send to our client. Learn techniques for mocking up interactivity, forms, and layouts that will help you sell your interactive design vision.

  • Intro to HTML and CSS  (9:30–10:30)

    First we'll set up a Dreamweaver site project, then begin with a new, blank web page. We'll walk step-by-step through creating an HTML page. Next, we'll style that page by creating a new, blank CSS files. We'll link the two, and begin to style the page like a pro.

  • BREAK (10:30-10:45)
    

    Slicing Graphics with Photoshop and Fireworks  (10:45-11:15)

    Next we'll explore the process for getting web-ready graphics out of Photoshop and Fireworks. The indispensable slice tool will allow us to work with our larger, more comprehensive design file, while managing the individual graphics needed for our HTML and CSS.

  • Principles of CSS-based Web Layout  (11:15-11:40)

    Combining our web graphics with HTML and CSS rounds-up the technologies we need to create layouts within our web page. We'll begin to explore the pixel-level precision that CSS gives us over our HTML and images.

  • Technology Presentation (11:40 - 12)

  • ---

    LUNCH ON YOUR OWN (12 - 1:15)

  • ---

    
    

• • Layout and Sprite-based CSS  (1:15–2:15)

    In addition to layout, we'll also explore a relatively new technique referred to a 'sprite-based' CSS techniques, where we reposition background images of elements with CSS to create more responsive, HTML-based interactions. This technique is used most commonly in navigation areas, but can be applied to any aspect of your design.

    Absolute Positioning Techniques  (2:15–3:00)

    Using CSS to control layout and positioning of elements can be a powerful combination. Discover how to position elements anywhere on the web page, or within specific areas of the page. Absolute positioning is also used extensively in more advanced web experiences, which we'll discuss when introducing Spry at 3:45pm.

    BREAK (3:00-3:15)

  • Adding Rich Media to your Website  (3:15–3:30)

    We'll explore how Dreamweaver lets us add Flash (.swf) and Flash video (.flv) directly to our web pages. In addition to rich media files, Dreamweaver will add additional elements to our site project to help manage those media elements, such as activation scripts, video player controls, etc. Learn what these files are for, and how your web browser uses them.

  • Introduction to Spry  (3:30–3:50)

    Have you heard the term 'Web 2.0'? It combines JavaScript with HTML and CSS. Adobe has created their own framework for these techniques called Spry, and what's even better, they have created visual tools inside of Dreamweaver to let designers start building more interactive experiences for the web... with no JavaScript coding at all! We'll also look at our Spry pages on the iPhone and Android simulators to show our interactive experiences running on mobile devices.
    

  • Dynamic vs. Static Web Pages  (3:50–4:00)

    Much of the web's content is generated 'on-the-fly,' meaning at the moment you hit the web page with your browser. Because of this, many web pages don't exist as a full HTML page. We'll take a few minutes to explain this process, and show you how a web developer may take your HTML and CSS work and implement it into a dynamic website. It is this very process of combining your web design with a developer's programming, that makes for a truly compelling web experience for your users.

  • What's New in Dreamweaver CS5  (4:00–4:20)

    Many of the new features in Dreamweaver build on the knowledge we'll gain after this day's previous topics. Learn how Dreamweaver can connect into systems like WordPress, explore the new HTML 5 and CSS3 features, and even test multiple screen size previews of our design right inside of Dreamweaver.

  • Ask your questions  (4:20-4:30)

    The web is a vast place.

  • ---

Location