Advanced Web Design

Summer 2000

By Carman Neustaedter

Advanced Web Page Design:

Day 1 – Introduction

Discussion will be made about good design techniques to enhance the user’s ease-of-navigation. Review of basic web page design will take place.

Topics Covered:

Review of publishing web pages and basic HTML tags

Good design techniques of computer programming (some may not apply to web pages)

Simple and natural dialogue (be frugal with pages, keep things simple, less is more)

Speak the user’s language (use words that would be familiar to the person visiting the site)

Minimize user’s memory load (remind user of what they are doing, eg. what file they are saving)

Be consistent (buttons always in same place, same actions to do same thing)

Provide shortcuts (command keys, clickable buttons to go places)

Provide clearly marked exits (undo, cancel, quit, back buttons, links to all pages)

Provide feedback (if something is taking a while to process, tell the user how long it will take or what is happening)

Provide helpful and useful error messages (provide a solution and explain what exactly the problem is)

Provide help (use tool tips or navigation cues, provide full help for things the user might want to do)

Demonstrations:
Check out these web sites for learning about web pages:

www.cutehtml.com (Cute HTML Editor)

tucows.oanet.com/htmlbeginner95.html (Beginner HTML Editors)

tucows.oanet.com/htmledit95.html (Advanced HTML Editors)

http://msdn.microsoft.com/workshop/author/html/beghtml.asp? (MSDN HTML Tutorial)

http://www.ucalgary.ca/it/itf/general/web/web-01.html (U of C Information Technology)

Check out these web sites for background images:

http://www.grsites.com/textures/

http://www.pixelfoundry.com/bgs.html

Winsock FTP or another transfer program

Upload personal web page files to an ACS account and a create public_html directory with proper permissions for viewing.

Assignments:
Business Web Page

Begin the design of a corporate web page. Include information about the service you are offering and pricing for various services. Upload your work to a web server such as the U of C server. Some example businesses may be building computers, designing web pages, offering video game cheats and walkthroughs, online pizza or restaurant ordering.

Review Notes:

World Wide Web Organization

The Internet

The Internet is a computer network made up of thousands of networks world-wide. No one knows exactly how many computers are connected to the Internet. It is certain, however, that these numbers are in the millions and more are added every day.

No one is in charge of the Internet. There are organizations that work on technical aspects of the network, but no one group is in control. Internet traffic flows through routers that send data to different computers connected to the Internet.

TCP/IP is the protocol that is used for the Internet. A protocol is just a standard by which something is done. TCP/IP works by sending data in packets to computers connected to the Internet. If you are downloading a file or loading a web page, the files needed are split up into chunks and sent to you chunk by chunk.

Servers & Domains

domain name – specifies where a web page is located

URL – Uniform Resource Locator, tells you where you can find something on the Internet (basically a web page’s address)

a domain name points the browser to an IP address

an IP address is the number assigned to a computer that is connected to the Internet, each computer connected to the Internet has a different IP address or number

an IP address consists of four numbers, each separated by a period, each number can be between 0 and 255 (eg. 123.120.3.16)

web pages are located on a server computer that is connected to the Internet directly. Server computers are generally kept on (turned on) all the time so that the web pages on the server are always accessible.

when you specify a domain name you are actually specifying what server computer the web page you are looking for is located on

ie.www.ucalgary.ca is the URL where the University of Calgary’s web page is

ucalgary.ca is the domain name, and therefore we are looking for the web page on the server computer pointed to by ucalgary.ca

HTML Files

hypertext is a document containing words that connect to other documents, the connections are called links

web pages are just files like a Word document or Excel spreadsheet

web page filenames MUST end in .html or .htm

pictures displayed on a web page are usually either a jpeg (Joint Photographic Expert Group) image or a gif (Graphical Interchange Format) image

ie.

myWordFile.doc (doc means it is a Word document)

myExcelFile.xls (xls means it is an Excel spreadsheet)

myWebPage.html (html means it is a web page viewable in Netscape or Internet Explorer)

myWebPage.htm (means the same thing as html)

Directories

if you see a / (slash) in a URL this just means that a file or web page is located inside a directory on the server computer

ie.

www.cpsc.ucalgary.ca/~carman/

this URL says that my web page is on the CPSC server in a directory called carman.

HTML

Hyper Text Markup Language - is a computer language used to design web pages

to view HTML code used to create a web page:

in Internet Explorer, go to the Edit menu and then to View Source or right click on a page and go to View Source in the menu that appears
in Netscape, go to the Edit menu and View Source (I think, I usually use Internet Explorer)

HTML uses TAGS to format text

a web page file (html file) is just text that you want displayed on the screen with formatting tags around the text

the formatting tags change the text you want to show up, making it bigger, smaller, bold, italic, centred, etc.

tags contain the format property you want inside pointy brackets < format type >

there are usually two tags for each format, the first one starts the format and the second one finishes it

the second tag to close a format has a slash inside the tag < / format type >

ie. <BOLD> This text will be bold. </BOLD>

Where Do I Create a Web Page?

You can type HTML code by opening up a web page file in Notepad. To do this though, you must make your entire web page using just HTML code.

You can create your web page in Microsoft Word and then in the File menu, use Save as HTML to convert your Word document to a web page file

You can create your web page in Netscape Composer. It has design tools that allow you to add features usually found on web pages. There is a web page toolbar at the top of Composer and special menus for adding things such as links and graphics to your web page.

Important Tags

<HTML> specifies the start of an html file

</HTML> specifies the end of an html file

<TITLE> The title you want displayed at the top bar of your window goes here. </TITLE>

<BODY> All the normal text you want displayed on a web page goes in here. </BODY>

<BOLD> This text will be bold </BOLD>

<I> This text will be italicized </I> (this is a capital letter i in case the font makes it unclear)

<U> This text will be underlined </U>

<CENTER> This text will be centred on the page. Note the tag needs US spelling of centre.</CENTER>

<BR> this tag acts as an enter key, any text after it starts on a new line (HTML won't display tab key presses or enter key presses when you are coding a web page. It will only display spaces)

<HR> draws a horizontal ruler line across the page

<FONT FACE="MS Sans Serif" SIZE=5 COLOR=RED> This text will have a different font face, size, and colour. Note US Spelling of colour. </FONT>

<IMG SRC="mypicture.jpg"> this tag displays a picture on your web page

You can see that the above tags usually have a start tag and a finish tag. Everything between start and finish is formatted according to the tag. You can have tags nested inside of each other as well.

ie. <BOLD><CENTER>This text will be bold and centred</BOLD></CENTER>

a bulleted listed can be created using code like this:

<UL>

<LI>Item 1

<LI>Item 2

</UL>

the <UL> tag starts the bulleted list, each <LI> tag specifies where a bullet will appear. The </UL> tag tells where the bulleted list ends.

Linking Pages

<BODY BGCOLOR="red" vlink="white" link="white" alink="white"> All the normal text you want displayed on a web page goes in here. </BODY>

<BODY BACKGROUND="mypicture.jpg"> "> All the normal text you want displayed on a web page goes in here.</BODY>

<A HREF="http://www.hotmail.com"> this text will be underlined with blue and will be a link to another web page, clicking on it will take you to that web page </A>

<A HREF="mailto:carman@cpsc.ucalgary.ca"> this text if clicked on will open up a window to send me an email message</A>

<table cellpadding=10 cellspacing=5> <td> Starts a column in a table. <td> Starts another column in a table. </table>

Putting Your Page on the Internet

UNIX commands

when you login to your ACS university email account you are using a computer running an operating system called UNIX

different operating systems are Windows 95, Windows NT, DOS, Linux, and UNIX

they all control how the computer runs program and manages memory

UNIX acts a lot like DOS, you must type in commands at a prompt

UNIX Command	DOS Command
ls (displays files)	dir
ls -al (displays all files in a list)
rm <filename> (removes a file)	del <filename>
rm -r <directory name> (removes a directory and all its contents)	deltree <directory name>
cd <directory name> (changes directories)	cd <directory name>
cd .. (note there must be a space after cd before the two periods) (moves back one directory)	cd.. (don’t need space after cd)
mkdir <directory name> (make directory)	mkdir <directory name>
cp <filename> <location> (copies file)	copy <filename> <location>
mv <filename> <location> (moves a file or renames it)	move <filename> <location> rename <filename> <new name>
man <UNIX command> (displays list of how to use a UNIX command)
man -k <word> (searches manual pages for pages containing your word)
pine (open up email program)
chmod <permissions> <filename> (changes permissions on a file)	attrib <permissions> <filename>

Creating a Directory for Your Web Page

all your web page files must be in a directory called public_html in your ACS university directory

they must all have permissions set so that the outside world can view your web page

To log in to your ACS account, go to Start -> Run, then type in telnet acs5.acs.ucalgary.ca

This will log you into one of ACS's computers. You must enter in your USERNAME and PASSWORD. When asked for terminal type, choose 1 for VT100.

You will get a command prompt where you can enter the following command.

acs6:/u201/cgneusta--> mkdir public_html

Sending Your Files to Your Web Site

all files that you want to be on your web page must be in your public_html directory, this includes all html files, htm files, graphic files (jpg, gif)

use Winsock FTP to put all your files into the public_html directory.

open up Winsock FTP on one of the school machines (or you can download it at home from www.tucows.com)
type in your username and password, click OK or CONNECT to connect to an ACS computer (where your files need to end up)
the files on your computer appear in the left column, the files on the ACS computer appear in the right column
you must transfer your web site files from the left column, to the right column (into the public_html) directory

Changing Permissions (giving the world access)

the only thing left is to allow others to view your files, and in turn, view your web page, this means we have to use the chmod command to change the permissions on your files and directory

log on to an ACS machine, by using "telnet acs.ucalgary.ca" in Start -> Run …….or an AIX logon (program in the Scurf Labs)

once logged in, type these commands

acs6:/u201/cgneusta--> cd ..

acs6:/u201/--> chmod 755 cgneusta (where cgneusta is your username for your ACS account)

acs6:/u201/--> cd cgneusta

acs6:/u201/cgneusta--> chmod -R 755 public_html

Viewing Your Web Page on the Internet

your web page can now be viewed at:

www.ucalgary.ca/~cgneusta

where cgneusta is your login name for your ACS university account

Supplementary Notes:

CHMOD - Setting Permissions in UNIX

The command CHMOD is used to change the viewing permissions of files in your ACS account. For your web page you want the world to be able to view your web page files.

Each file has permissions, depending on the type of user.

There are three user types:

you - this would be you
group - a group of users you are a part of (not important)
others - the rest of the world

Each user has permissions for:

reading (r) - being able to view files
writing (w) - being able to change files
executing (x) - being able to run files (these files won't run unless they are an executable file however)

So, for you, group, and others there are rwx permissions ([r]ead, [w]rite, e[x]ecute).

They are grouped like this

you
rwx

group
rwx

others
rwx

If the user is to have a permission to either read, write, or execute, that letter is assigned a 1. If not, it is assigned a 0.

eg. this assignment gives you permission to read, write, and execute your file. Nobody else is allowed to read, write, or execute your file.

you
111

group
000

others
000

eg. this assignment gives you permission to read, write, and execute your file. It also allows the rest of the world to view your file or run it, but not write it (make changes to it).

you
111

group
101

others
101

the chmod command can use a number to set the permissions of a file:

eg.

chmod 755 public_html

The number just represents what permissions you are giving the file.

The number is a base 8 number (octal) representing the users: you, group, others

If you create a number for each of: you, group, others
you can put the numbers next to each other to form the number for the chmod command.

First you must create an octal number for each user.

Take the combination of 1's and 0's from above to form an octal number using this conversion table:

Binary Number	Octal Number
000	0
001	1
010	2
011	3
100	4
101	5
110	6
111	7

Then combine each user's octal number to create a 3 digit number. This is the number used for the chmod command.

eg.

If I want the world to be able to view a file then I want to give read and execute permissions to the users group and others. I want to keep my permissions at read, write, and execute still though.

I would use this series of 1's and 0's:

you
111

group
101

others
101

by using the conversion table above I would get:

you
7

group
5

others
5

this would give me the number: 755

and I would use the command: chmod 755 <filename>

All the HTML Tags You Could Want
http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/

Hit Counter

Guestbook HTML Source Code (by Adam King)

<HTML>

<HEAD>

<TITLE>My Guestbook</TITLE>

</HEAD>

<H1> Sign In, Please...</H1>

<FORM METHOD="POST" ACTION="mailto:carman@cpsc.ucalgary.ca"

ENCTYPE="text/plain">

<B>Please enter your name: </B><INPUT NAME="username" size="30">

<BR>

<B>and your email address: </B><INPUT Name="usermail" size="30">

<P>

<B>What do you think of my site?</B>

<P>

<INPUT TYPE="radio" NAME=I_think_that VALUE="It's_Great">It's Great!

<INPUT TYPE="radio" NAME=I_think_that VALUE="It's_Okay">It's Okay!

<INPUT TYPE="radio" NAME=I_think_that VALUE="It_Needs_Work">It Needs Work!

<BR>

<P>

</CENTER>

<H3>Make any comments you'd like below:</H3>

<P>

<B>Thanks for your input</B>

<BR>

</CENTER>

</FORM>

</BODY>

</HTML>

Midi Sound

Scrolling Text for IE (Java Script)

<!-- begin

function scrollit(seed)

{

var msg = "Add Your Scrolling Text Here"

var out = " ";

var c = 1;

if(seed > 0)

{

for(c=0 ; c < seed ; c++)

{

out += " ";

}

out += msg;

seed--;

var cmd = "scrollit(" + seed + ")";

window.status = out;

timerTwo = window.setTimeout(cmd,80);

}

else

{

if(-seed < msg.length)

{

out += msg.substring(-seed, msg.length);

seed--;

var cmd = "scrollit(" + seed + ")";

window.status = out;

timerTwo=window.setTimeout(cmd,80);

}

else

{

window.status = " ";

timerTwo = window.setTimeout("scrollit(120)",80);

}

scrollit(150);

// end -->

</SCRIPT>

Day 2 – Frames

The goal is to develop and introduce more advanced techniques used for designing web pages such as using frames for navigational ease.

Topics Covered:

Frames (horizontal, vertical)

Demonstrations:

Frame Code

`<frameset></frameset>`	tag in a frames document; can also be nested in other framesets
`<frameset rows="value,value">`	defines the rows within a frameset, using number in pixels, or percentage of width
`<frameset cols="value,value">`	defines the columns within a frameset, using number in pixels, or percentage of width
`<noframes></noframes>`	defines what will appear on browsers that don't support frames
`<frame name="name">`	specifies which HTML document should be displayed
`<frame marginwidth=#>`	defines the left and right margins for the frame; must be equal to or greater than 1
`<frame marginheight=#>`	defines the top and bottom margins for the frame; must be equal to or greater than 1
`<frame scrolling=VALUE>`	sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto. " The default, as in ordinary documents, is auto.
`<frame noresize>`	prevents the user from resizing a frame

Example of index page for frames: (each frame must be an html file)

<HTML>

<HEAD>

<TITLE>My Frame Page</TITLE>

</HEAD>

</frameset>

Sorry, your browser does not support frames. This website was designed specifically for frames. Download a newer version of Netscape Communicator or Internet Explorer.

</center></h1>

</noframes>

</HTML>

Example of Loading a Page in a Frame:

Assignments:

Frames

Add at least two frames to your corporate/business web page. One frame should be used as a menu for navigation through the web site. Use the second frame to display the requested page.

Day 3 – Online Forms

The goal is to develop and introduce advanced web design features such as special plug-ins and HTML code to enhance a page.

Topics Covered:

Online Forms

Demonstrations:

Frame Code

`<form></form>`	Creates all forms
`<select multiple name="NAME" size=?></select>`	Creates a scrolling menu. Size sets the number of menu items visible before yo u need to scroll.
`<option>`	Sets off each menu item
`<select name="NAME"></select>`	Creates a pulldown menu
`<textarea name="NAME" cols=40 rows=8></textarea>`	Creates a text box area. Columns set the width; rows set the height.
`<input type="checkbox" name="NAME">`	Creates a checkbox. Text follows tag
`<input type="radio" name="NAME" value="x">`	Creates a radio button. Text follows tag
`<input type=text name="foo" size=20>`	Creates a one-line text area. Size sets length, in characters
`<input type="submit" value="NAME">`	Creates a Submit button
`<input type="image" border=0 name="NAME" src="name.gif">`	Creates a Submit button using an image
`<input type="reset">`	Creates a Reset button

Example:

<html>

<title>The Computer Test</title>

<body>

<h1><center>Welcome to the Computer Test</center></h1>

<!-- Begin Form (these are just comments, they won't show up on the page) >

<hr>

Please type in your name: <input name="Name" size="30">

<br>

Please type in your email address: <input name="Email" size="30">

<br>

Do you own a home computer?

<input type="radio" name="Do you own a home computer?" value="Yes">Yes

<input type="radio" name="Do you own a home computer?" value="No">No

<br>

Do you have Internet access?

<input type="radio" name="Do you have Internet access?" value="Yes">Yes

<input type="radio" name="Do you have Internet access?" value="No">No

<br>

What do you use a computer normally for (select all that apply)?

<br>

<input type="checkbox" name="Use of computer?" value="Games">Playing Games

<br>

<input type="checkbox" name="Use of computer?" value="Internet Surfing">Internet Surfing

<br>

<input type="checkbox" name="Use of computer?" value="Homework">Homework

<br>

<input type="checkbox" name="Use of computer?" value="Listening to Music">Listening to Music

<br>

The computer I normally work on is a (select one):

<br>

<option>Pentium

<option>Pentium II

<option>Celeron

<option>Pentium III

<option>AMD K6

<option>AMD Athlon

<option>Cyrix

</select>

Describe your favourite computer pastime:

<br>

</center>

<!-- End Form >

</form>

</body>

</html>

Assignments:

Online Ordering

Add a page to your business web site that contains an online ordering feature or a survey/questionnaire of some sort. Use

Day 4 – Mouse Events, Adding Simple Java Scripts

The goal is to learn about advanced web design techniques to emphasize the user’s actions.

Topics Covered:

Handling Mouse Events

onMouseOver
onMouseOut

Adding Java Scripts

Calling Java Script functions
Java Script parameters

Demonstrations:

Java Script Code Samples

http://www.planetsourcecode.com/vb/default.asp?lngWId=2

Mouse Over Events (handling them)

<a href="#" onMouseOver="imageSwap('myImg', 'blue_hi.gif');"

onMouseOut="imageSwap('myImg', 'red_hi.gif');">

</a>

</center>

JavaScript to Change an Image

(can be called on mouse over)

<!--

function imageSwap(lastImage, newSrc){

var objStr,obj;

// based on code from Web Monkey www.webmonkey.com

if(document.images){

if (typeof(lastImage) == 'string') {

objStr = 'document.' + lastImage;

obj = eval(objStr);

obj.src = newSrc;

} else if ((typeof(lastImage) == 'object') && lastImage &&

lastImage.src) {

lastImage.src = newSrc;

}

// -->

</script>

Assignments:
Mouse Over Events and Java Scripts

Update your corporate web page to include mouse over events and other Java Scripts.

Day 5 – Project

The goal is to use all the tools from the previous classes to complete a business web page.

Topics Covered:

review of course material

Assignments:
Business/Corporate Web Page

Complete your personal web pages using all the tools you have learned during the course.