Monitor

Website Design and Layout

 Sign in     Sign up    

 

Links

Your home page

Home page

Practical Windows

Websites

Advanced Websites
   Layout and design
   Backgrounds I
   Backgrounds II
   u>Navigation I
   Navigation II
   Server Side Includes
   Processing images
   CGI Coding I

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: Layour and Design, part 1

Click here for the video transcript, alayout.pdf

 

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.

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.