This two-video lesson begins with introducing the concept of wire-framing as a design tool, then demonstrates implementing the first part of a particular design.
In this first video session, we look at having some starter files for your HTML pages and stylesheets. We observe your home page is likely to be names 'index.html' and demonstrate the process for implementing our sample design - at least the beginning.
Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.
Lesson 1: Layout and Design, part 1
The video below finishes up our implmentation of the chosen design, adding some content to flesh out the details.
Hands on exercise
For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your PC. The exercise for this lesson is primarily concerned with accessing the files you will use throughout the course and validating your browser set up.
Click here to download "WebFilesAdv.zip", the zipped version of the course files.
Note: you should see a dialog box that asks you to 'open the file' or 'save the file' - choose 'save' in order to be able to direct where the file goes.
Select any handy
directory (you can even use the Windows-provided 'Downloads' or 'Documents' locations).
Then bring up File Explorer and find WebFilesAdv.zip in the directory you saved it in
Double-click on the file name to expand the .zip file and you will see it contains "AdvancedWebFiles". Right-click on AdvancedWebFiles and select 'copy'.
In File Explorer, get to your primary drive ("C:"), right click on the drive entry and select 'paste'. That should create the directory and files we'll be using for our labs: 'AdvancedWebFiles'.
Among the files in your AdvancedWebFiles directory is "index.html": open this in Notepad, and
replace the line of underscores ( ______ ) in the program
with your name.
Save and exit the file.
Then double click the filename in File Explorer and verify the file is opened in your browser. Just like the one-minute web page in the first video.