An Approach To Making a Multi-Page Site
This set of tutorials will help beginners develop a basic workflow for building efficient, template-based sites using a code editor. Proprietary Dreamweaver template files are not covered here.
Building a Template-Based Website
The following video demonstrations are consecutive and chronological. To learn how to create a fluid, responsive 6-page layout with mobile navigation, watch all videos (total ~3 hours).
Note About the Videos Below
To reduce page load time, the videos below are minimized to a small scale, but you can watch them larger either by clicking the Full Screen player icon, or by clicking the YouTube player button to watch on the YouTube site. Once the video starts, you can also click the gear icon to increase the quality/resolution on faster connections.
Part 01 (14:56)
Creating screenshot images for your pages.
Part 02 (12:48)
Creating a scalable vector graphic (SVG) with Illustrator.
Part 03 (14:48)
Getting started: translating the layout to HTML structure.
Part 04 (9:05)
This finishes up the basic HTML markup for the template.
Part 05 (14:59)
Applying ‘reset’ and custom stylesheets to the template.
Part 06 (14:15)
Start styling the global “top” navigation bar.
Part 07 (14:57)
Finishing up the “nav#top” styling
Part 08 (14:58)
Styling the “section#content” area with floats, text definitions, and adding a figure/caption to the screenshot.
Part 09 (9:58)
Styling the footer elements
Part 10 (14:59)
Using media queries to keep the design responsive
Part 11 (14:09)
Part 12 (14:39)
getting the dropdown menu to work with a close button
Part 13 (10:13)
Finish styling the mobile nav overlay and closing button
Part 14 (7:16)
Propagating templates for site and adding content to complete the site.