1

HTML5/EW4 DVDs

KELLYS HTML5 & EXPRESSION WEB 4 TUTORIALS ON DVDS

D VD 1
FO L D ER 1: H TML5 L ES S ON 1 - G ETT IN G- STAR TE D
**Please open the PDF titled, Getting Started Steps for HTML5

Videos
Intro Intro to HTML5 & Getting Started Steps Step 1: Set up an Empty Web Site Step 2: Set the Doctype Step 3: Set up an HTML Web Page Step 4: Set up an External Style Sheet Step 5: Set the Style Application Mode to Manual Step 6: Part 1- Site Settings Step 6: Part 2- More Settings Step 7: Design the Web Page What is a Div?

Folder 2: Using HTML5 to Make the Layout Videos

Ingredients of a Layout HTML5 Specification and Our Main are of Focus HTML5 Content Models, Categories, Context, and the Outline

L AYOUT TUTORIAL SERIES

1. Open the PDF titled, Using the Snippets Panel (located in the PDF Portfolio)vd

2. Next, watch the Video Make HTML5 Snippets

Continued on the next page

1|Page
Copyright Protected 2011 Kelly M Lucas

HTML5/EW4 DVDs

LAYOUT VIDEOS
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. Style the Body (background) HTML5 CSS Reset Insert Header Create Images folder - Add the Logo Style the Logo Insert the <nav> Add Menu Items Insert a <div> for the slider and a <div> for the container Add <div> for search box Style H1 heading Insert 3 Boxes (3 divs) Modify Boxes - Insert Article Add Text - Make Hyperlinks Add Text-Shadow (CSS3) - Style Hyperlinks (a, a:link, a:visited) Style Hover & Active State of Hyperlink (a:hover, a:active) Add paragraphs and H1 Heading Insert Image and Wrap Text

D VD 2
18. 19. 20. 21. 22. 23. 24. 25. 26.

(Folder 1 on DVD 2 - HTML5 Layout Part 2)

Insert the <aside> Element, h3, unordered list Style the <aside> and h3 heading Style the unordered list and list items Insert image into the <article>, Add a <footer> to the <article> Style footer Text Insert the page Footer Create Hyperlinks Style a, a:link, a:visited Style the Hover Modify Hover Make a Dynamic Template from the Web Page (and make new web pages from the DWT)

Content/Image Slider Tutorials

1. Add Slider to page 2. Modify Content on Slider

2|Page
Copyright Protected 2011 Kelly M Lucas

HTML5/EW4 DVDs

The Elements
1. 2. 3. 4. 5. 6. <section> <article> <aside> <nav> <header> <footer>

Vertical Tabbed Menu Tutorial

1. 2. 3. 4. Overview of JQuery vertical tabbed menu Copy and Paste Jquery and CSS Copy and Paste HTML Modify page. Link to new pages.

Accordion Menu Tutorial (using snippets panel)

1. Accordion menu snippets- what to insert, and where. 2. Edit accordion text, etc.

DVD 3
Layout #2
1. Overview of Layout, CSS3, & jQuery. 2. Add Container & Header 3. Style Header & Nav 4. Insert Section 5. Style the Section 6. Review <header>, insert H1 7. Add Headings, Insert Box1 8. Finish Adding Boxes, Clear the Float 9. Modify Box Size, Add Images 10. Add H1 & Paragraphs 11. Style Paragraphs 12. Add Content Box 13. Insert Aside 14. Insert Article 15. Vertical Menu Part 1 16. Vertical Menu Part 2 17. Finish Vertical Menu 18. Add Heading and Columns 19. Style Paragraphs 20. Style Text 21. Tweak Article 3|Page
Copyright Protected 2011 Kelly M Lucas

HTML5/EW4 DVDs

Spruce up Layout #2 with CSS3

1. 2. 3. 4. 5. Add CSS3 to Spruce up Site CSS3 Box Shadow & Inset Shadow CSS3 Box Shadow Part 2 CSS3 Text Shadow Fix Headings, Make More Specific Selectors

More CSS3
1. 2. 3. 4. CSS Color & Opacity RGBA & HSLA Opacity Property Opacity & Hover Tutorial

DVD 3 FOLDER 2
HTML5 Video & Audio (Open PDF from Portfolio)
1. 2. 3. 4. 5. Intro to HTML5 Video Convert Video Add Video Attributes HTML Markup (the code) Add Warning Text

THE ONLINE VIDEO LIBRARY HAS MORE TUTORIALS.

1. I will be adding more CSS3 Tutorials 2. And I will gladly add any requested tutorials!! tutorial.com) (email me your requests: Kelly@expression-web-

4|Page
Copyright Protected 2011 Kelly M Lucas