Website Design and Layout.

 Sign in     Sign up    



Your home page

Home page

Practical Windows


Advanced Websites
   Layout and design
   Server Side Includes
   Introduction to CGI
   Introduction to php
   php: 'if', emails
   php: string handling and date / time
   php: file handling
   Responsive Web Design
   Processing images
   php: databases
   php: logins and passwords
   Tracking hits
   Navigation I
   Navigation II

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 named '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.

Click here if you have problems with the sound on the video.


Lesson 1: Layout and Design:
Part 1: Basic Choices

Click here for the video transcript


Hands on exercise

For those who want to practice using what we cover in this class, each lesson has an opportunity for you to work on your server and the browser on your PC in order to really master the content.

The exercise for this session is primarily concerned with accessing the files you will use throughout the course and validating your lab set up.

Click here to download "", 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 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'.

Upload 'AdvancedWebFiles' to your server.


In the directory 'AdvancedWebFiles', create 'index.html' based on html_starter.txt by simply editing html_starter.txt, replacing the title value to be 'Table N Fable', and doing a "Save as" index.html and also upload this file to your server.

Test you can access your new index.html file and that the browser title or tab title has "Table N Fable"; the page itself will be blank.

Table N Fable, sometimes abbreviated 'TNF', is drawn from the fact that this reading group typically shares a meal and discusses a book.


Session 2

The video below finishes up our implementation of the chosen design, adding some content to flesh out the details.



Lesson 1: Layout and Design, Part 2
Begin implementation

Click here for the video transcript

Hands on exercise

Start turning your 'index.html' page into a real website home page, along the lines of the lecture:

Open "workStyles.css" and add style rules as needed as you solve the lab.

We have provided a logo that we created using WordPad, a free image from the internet, and Paint. The logo is named 'TNFLogo.jpg' and it is in the 'images' subdirectory. Add the logo and a title to your 'index.html' page

In your AdvancedWebFiles directory is a file 'TNFActivies.txt' that contains some suggested content for your new web page. Feel free to use this material or to be creative and make up your own events, etc. You may want to update the dates in this file, or maybe not: it's all up to you.

Add a few events for the club, such as those suggested under "Our activities" in 'TNFActivities.txt'.

Add links to some documents / papers about the club, such as those suggested under "Our documents" in 'TNFActivities.txt'. (Note: the documents don't need to actually exist, but if you feel creative have some fun making these up.)

Add some links to events of related groups, such as those suggested under "Related groups' activities" in 'TNFActivities.txt'.

Finally, add some end-of-page kind of information as demonstrated in the video.

Save "index.html" and "workStyles.css", upload them to your server, and test that the page looks like you want and expect.


Supplemental materials

    A cumulative summary of the contents of this course so far: Click here
    For a combined cumulative summary of both Web courses so far, Click here



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