Monitor

Lesson 1: Website Design and Layout

 Signed in as:    
      Sign out

 

Links

Your home page

Advanced Websites
   Layout and design
   Backgrounds
   Page framing
   Server Side Includes
   Navigation I
   Navigation II
   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 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, most lessons have an opportunity for you to work on your PC, or, in some cases, your server and the browser on your PC. 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 "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'.

 

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

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. Remember the group to use for the labs is the Table and Fable book club. Note: you probably want to do these steps one at a time, checking how things display at each point along the way.

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

 

Supplemental materials

    A cumulative summary of the contents of the course so far: Click here

 

 

 Lesson navigation 

 

 

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