Class 2-1

Review

• Review Questions

Do these on your own for Homework:

• Review exercises from w3schools
• General HTML and CSS Resources
• Photoshop Instructions
• Using Dreamweaver

 

Code Validation | Access Site | SSI | Term Project

---

Get set up for the New Term

We will be using a commercial server locally housed here in Bellingham. The company is called OpenAccess and the server is their nas.com server. You each will have your own server space for developing the project for this term.

• Review - Set up correct html code header
  • For Dreamweaver set New Document Preferences
  • Non-Dreamweaver users: Recommended Code Skeleton for this course
• Review - Setup your Tools: see some Developer Toolbar choices here. A toolbar will help you with debugging and validation - good for Dreamweaver and non-Dreamweaver users alike.
• Review - set up your USB stick (or laptop if you use one in class) with the working area. I use c:/web/webclass/marie but you might have these variations:
  • Instead of C:/ you would use the letter of your flash drive - f:/ or d:/ usually
  • You might not have a web folder, but I find this useful to separate my web folders from other types of content
  • webclass indicates the site and reflects the www.nas.com/~webclass part of the production url
  • marie obviously should be changed to reflect your own first name as represented on the nas site. These are currently:
    • barbara, cari, cassie, celeste, gabrielle, kathleen, kelsey, olivia
• Learn to validate your HTML and CSS with online tools (also available in Toolbars).
  • HTML Validator
  • CSS Validator

Accessing our Web Site

Browse to new site

URL for browser: http://www.nas.com/~webclass/yourfirstname

• (ex: for me, marie, url is: http://www.nas.com/~webclass/marie )

Connecting to the new site with FTP

What it is

What is FTP? A way to move files from your computer to your server.

Terms you should know:

• FTP: File Transfer Protocol
• Upload: move files from your desktop computer "up" to the web server
• Download: move files from the server "down" to your desktop computer

How to do it - two choices (I use both!)

Dreamweaver is handy when you're editing your code - all you do is press the up arrow when you're done editing a file and it goes "live". FileZilla is useful for working on your remote site structure (making or deleting folders or files), moving large groups of files, etc. These functions CAN be done in Dreamweaver, but I find it easier to do these kinds of operations in a dedicated FTP program like FileZilla.

1. Set up Dreamweaver for this term: Dreamweaver Site Setup Instructions
   
2. Set up FileZilla for this term: FileZilla Site / Connection Setup Instructions
   • Download an FTP Tool: FileZilla - multiple platform, open source, free. Although Dreamweaver users will often use Dreamweaver to upload, if you're moving a lot of data or checking what's on the remote server, it's often easier to use an FTP tool.
   • Set up parameters for New Site or Connection in any FTP tool

 

 

---

Server Side Includes (SSI)

Server Side Includes are statements that are interpreted by the server before sending the page to the client browser to be viewed. These are statements, such as "display current time" that cannot be done generically in the html but must be generated dynamically as the page is sent to be displayed.

Prerequisites

A server must be set up to accept SSI statements. If the server administrator has set up the server to allow SSI statements, the web server will parse (read through each statement) looking for SSI statements for it to interpret before sending the file to the client machine. The tradition is for the server to only look for SSI statements in files of type .shtml . This means that if you put SSI statements in files named .htm or .html the SSI statements will be ignored.

All campus web servers and commercial web servers I have encountered allow SSI statements in files named .shtml

Syntax for SSI statements

• The file that has an SSI command in it MUST be called .shtml
• SSI statements start like a html comment immediately followed by a # sign and the SSI command with its parameters, then the --> to close the "comment". NOTE: Please be sure there is no space before the #command e.g.
  <!--#include ........ or <!--#echo .....

Common SSI statements

Include

Include files enable you to include snippets of code from another file - this is useful so that a piece of code can be written once and reused in more than one webpage on your site (navigation, headers, footers, etc). Note that the file you're referencing is NOT a complete web page but just a sequence of html commands. It's as if you wrote one webpage, then took a piece of the code and saved it somewhere else, and then replaced that removed code with the include statement pointing to the new file.

This command version is used for a file in the same directory:

<!--#include file="filename" -->

This is used for a file not in your directory:

<!--#include virtual="directory/filename" -->

Configure Date Format

The configure date format sets a date format for the use of other commands such as current date which follows below. This command only configures the date - it does NOT display anything.

<!--#config timefmt="%A %B %d %Y" -->

where the % before a letter indicates a prespecified parameter and any additional characters in the string will print out as is. For example the following:

<!--#config timefmt="%m.%d.%Y" -->

will configure the date as 11.13.2008 - %m displays the month number, then the "." then the day number, then a "." then the year number. Capitalization is important here - for example %M means the current minute whereas %m is the current month number.

For full date parameters options, see this SSI reference

Current Date

Once you've configured the date format using the above command, you can print it on your web page using the following command:

<!--#echo var="DATE_LOCAL" -->

Date Last Modifed

<!--this is the text that will appear on the page-->
<p>Page Updated
<!-- the next statement configures the time -->
<!--#config timefmt="%m.%d.%Y"-->
<!-- the next statement prints the configured time on the screen-->
<!--#echo var="LAST_MODIFIED"-->
</p>

See the bottom right of this page for this code in action.

Other SSI commands

For other SSI commands see this reference from W3C

Additional notes (from Adobe)

There are two types of server-side includes: Virtual and File. Dreamweaver inserts File type includes by default, but you can use the Property inspector to select the one that is appropriate for the type of web server you use:

• For Apache web server, select Virtual. In Apache, Virtual works in all cases, while File works only in some cases.
• For Microsoft Internet Information Server (IIS), select File. (Virtual works with IIS only in certain circumstances.)

Note: Unfortunately, IIS won’t let you include a file in a folder above the current folder in the folder hierarchy, unless special software has been installed on the server. If you must include a file from a folder higher in the folder hierarchy on an IIS server, ask your system administrator if the necessary software is installed.

---

Project for This Term

This term you will each be developing your own site on our commercial server. We'll develop more definition on this site as we go along, but start thinking about how you will define this site. The web is the first place we go to research subjects - so your goal should be to become a source of information for someone else. It should contain information that will interest someone else and be something you are passionate about! It can be about your family or a vacation you took; it could be sharing knowledge you have on say, model trains or 1960s rock-n-roll albums; it could be a site about your favorite music. Don't be more personal than you are comfortable with - this is a public site. Be as personal as you are comfortable with to make the site engaging to others.

• Please have your initial topic picked by next week
• To help define the topic, pick a (fake) url that you would use if you were buying a domain for this site. smithfamily.net or mymodeltrains.com etc. It does not have to be actually available, although you can check here if you want

 

demopage

Answers to Review Questions