Sign in Sign up
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
php: logins and passwords
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.
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.
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
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.
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