Signed in as:
Sign out
Links
Advanced Websites
Layout and design
Backgrounds
Page framing
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
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 "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'.
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.
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
back list forward
Email us if you would like additional information. We would love to see your comments and recommendations for our site.
Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.