Transcript Week6 - Computer Science

Warm up Question:

Question: Match the following images to the correct file
format:
1. GIF
2. PNG
3. JPG




Question: What are the chunks of data that are sent over the internet
called?
Question: True or false, the Internet and the World Wide Web are the
same thing?
Question: Give an example of a valid IP address.
Question: True or false, www.csd.uwo.ca/courses is a domain name?
Slide 1 of 54
Computer Science 1033 – Week 6
WEB SITE DESIGN
“The Internet: where men are men, women are men, and children
are FBI agents.” Anonymous
Overview of Today’s Topics
Announcements
 Preparing to build a website
 Good Website Design
 What is a webpage  Introduction to html
 How to organize you files within your website,
file extensions, types of web pages
 Dreamweaver:

◦
◦
◦
◦

Page Title
Formatting
Images
Links
Review
Slide 3 of 54
Announcements



Assignment 2 should be marked by Monday,
Nov 5…DO NOT EMAIL ME BEFORE THAT
DATE TO SEE WHY YOURS IS NOT
MARKEDnd a breakdown of your mark.
Assignment 3 should be posted within 2 or 3
days. I will give you hints/help on this next
week during class.
Final Exam TENTATIVELY is Sunday,
December 9th at 7pm (2 hours, multiple choice
and true/false, 150 questions)
◦ BRING A PENCIL and YOUR STUDENT CARD
◦ No calculators or electronic devices, do not bring
ipods or hats!
Slide 4 of 54
Okay, I have the Domain Name, what is
next? Stage 1: Planning and Design

Define the Business Requirements
◦ Meet with the client:




Be prepared
Ask questions  LISTEN TO THE ANSWERS
Learn as much as you can about their business
Ask for all the reports they generate, the forms they
fill in, their printed brochures, etc…
Slide 5 of 54
What questions should you ask your
clients?
Who will their primary audience be?
 What is the company’s image?
 Do they have a company logo (this will help
you with colours and a theme)? How about
some other graphics/images?
 Will the company’s focus change over the
next year or so?
 What content will be on the page? This might
help you figure out how to organize the
material!

Slide 6 of 54
What is the best thing you can do
when designing a new website?

Look at other websites!
◦ Look at the competitors websites
 What are some of the great ideas they have?
◦ Look at websites that you think are:







Beautiful
Easy to Use
Effective in getting the message across
Using a great colour scheme
Hideous
Hard to Use
Annoying
Slide 7 of 54
Questions:
Think of some of your favourite websites,
what is it about those websites that you like?
 Think of some websites you avoid, why do
you avoid them?

Slide 8 of 54
What do you think of these sites?
http://www.avanttravel.com
 http://www.cusli.org/index.html
 http://www.gizishotel-santorini.com
 http://www.brescia.uwo.ca
 http://www.mandywebster.com
 http://www.justwine.ca
 http://www.derekmclarty.com/index.asp
 http://www.margarethe-vanderpas.com/

Slide 9 of 54
How about these sites?
http://www.lingscars.com
 http://csszengarden.com/?cssfile=http://www.
brucelawson.co.uk/zen/sample.css
 http://www.alovelyworld.com/
 http://hosanna1.com/


(all of the above from: http://www.manolith.com/2009/08/25/worst-website-designs/ )
Slide 10 of 54
Good Website Design Tips
Have something valuable to offer  provide
something useful or interesting
 Don’t distract with blinking, animated GIFs,
autoloading sound, too much scrolling
 No popups!
 Don’t use images on the background unless you
know what your doing
 Put a lot of thought into the organization of your
page
 Minimize clicking (no more than 3 clicks to get
to a page)

Slide 11 of 54
More Tips
Have a way to get to the home page on every
page
 Include a menu on every page (in the same
location on every page)
 Compress your images
 Don’t let multimedia files bog down your
website
 No line of text should be more than 600 pixels
wide
 Don’t make your page too wide (around 800
pixels), user should NEVER have to do
horizontal scrolling. Vertical scrolling should be
kept to a minimum

Slide 12 of 54
More Tips
Use contrasting colors or simple
backgrounds to make text easy to read
 Make text large enough to read
 Use ALL CAPITAL LETTERS sparingly,
 Never use more than one exclamation point
 Spell Check
 Never underline words that are not links
 Put contact info or a link to it on every page

Slide 13 of 54
More Tips
Test your links
 Remove dead links
 Include a “Last Modified” date

◦ Keep up to date, update your “What’s New”
section frequently

Don’t steal content (I stole this content is
from: http://websitehelpers.com/design  )
Slide 14 of 54
More Tips


Think about how the user will navigate through
your website and remember the 3-click rule.
Have a consistency throughout your pages
◦
◦
◦
◦
◦

Colours
Menu placement
Layout
Fonts
Buttons
Think about the layout, have white space, clean
alignment and balance on your pages
Slide 15 of 54
Some things you will see on “Bad” Web
Pages:











Navigation confusing, menus in different spots
Ugly design: no color continuity or white space
Scrolling horizontally to see whole page width
Slow when loading
Broken links
Text hard to read
Spelling mistakes
Stale content
Useless information
Too many popups, ads
Blinking, animation
Slide 16 of 54
How to start your design:

Decide on where you want the menu, in general it
should go along the left side or at the top, WHY?
◦ What will the navigation structure look like?
◦ What will the pages be besides the home page?
◦ Will there be submenus under the menus? (this will affect
your folder layout)
Pick a colour scheme you like
 Think about your banner:

◦
◦
◦
◦

What should it focus on
Will the menu be part of the banner?
Think about the colours
Make it about 800 pixels wide, don’t make it too tall.
Sketch it out on paper
Slide 17 of 54
https://www.microsoft.com/mspress/books/sampchap/6403/0-7356-1860704.gif
http://usability.coi.gov.uk/themes/page-layout/assets/images/1a-1.jpg
Things to Remember, especially for
Assignment 3 and Assignment 4!
Keep the menu in the same place on every
page. (either the top or the left, it is up to
you)
 Should not have to scroll horizontally
 Keep the colours consistent on every page
 Keep the layout fairly consistent on every
page
 Should always have a way to get home
 Long pages should have a “Back to Top”
button

Slide 19 of 54
Decide on what web pages you will
need.

Each web page is normally an html file, a file that
has the extension .html or .htm
◦ .html .htm
 Very basic page, just has clickable links, images, sometimes
forms
 The .html file is just a file with html codes that is displayed in a
browser to make it look pretty for the client (IE, Safari,
Firefox)
 CS1033 just covers .html & .htm pages
◦ Other extensions for web pages include:
 .shtml  Server Side Includes: add some extra stuff from the
server before displaying the page to the client”
 .php, .asp, .cgi  extra stuff that is brought in also from the
server, allows for use of data in a database on the server, more
complex form manipulation. asp is a Microsoft technology
Slide 20 of 54
Web Pages and Web Sites
A Web Site is a collection of related web
pages stored in a folder. The folder may or
may not contain sub folder.
 The web site folder should contain a sub
folder called images which holds the image
files (.jpg, .gif, etc) that will be displayed on
the page.
 The home page for the website, the “starting
page” should have the file name index.html

Slide 21 of 54
Web Pages and Web Sites

Question: On panther.uwo.ca, what is the
main folder for your:
http://publish.uwo.ca/~userid

Question: Does that folder contain a file
called index.html?

CHECK IT OUT USING SECURE FTP
(WINSCP, FUGU, FILEZILLA)
Slide 22 of 54
Folder Structure for a Simple Site
Decide on the pages you will need
 Create a top level folder. Use lowercase
letters
 Give the home page the name index.html

◦ Must be all lowercase!
◦ Index.html is invalid
Give the other pages appropriate lowercase
names with the .html extension
 Create a subfolder called images (lowercase)
and put all your images in that folder

Slide 23 of 54
Example of a simple website

Assume we are making a website about Polar
Bears. The folder structure (folder is called
H:\polarbears) might look like this:
Slide 24 of 54
Links for the simple structure


Assume the domain name for this site is:
ArcticAnimals.org
Thus the website would be:
◦ http://www.ArcticAnimals.org

To get to the polar bear web site, you could type:
◦ http://www.ArcticAnimals.org/polarbears OR
◦ http://www.ArcticAnimals.org/polarbears/index.html

To get to the habitat page you would type:
◦ http://www.ArcticAnimals.org/polarbears/habitat.html
Slide 25 of 54
Something to try

Go to your panther page and type each of the
following:
◦ http://publish.uwo.ca/~lreid2
◦ http://publish.uwo.ca/~lreid2/index.html
◦ http://publish.uwo.ca/~lreid2/assign1
Question: Why don’t we see a webpage when we type the
last choice?

Now UWO Computer Science page and type each of
the following:
◦ http://www.csd.uwo.ca
◦ http://www.csd.uwo.ca/index.html
◦ http://www.csd.uwo.ca/index.shtml
Slide 26 of 54
More complicated site
Sometimes websites have many submenus
and have lots of web pages.
 In this case we need a more complicated
folder structure

◦ BUT it is not really that much more complicated,
just one main folder with subfolders that contain
“sub websites”
◦ Each sub website is a sub folder that contains it’s
own index.html and images subfolder
Slide 27 of 54
Example of a more
complicated site:

Westerns Computer
Science Site might
be set up like this 
Slide 28 of 54
Web Server
You will likely build your site on your own
machine. When the web site is completed you will
need to move it to a Web Server
 Web Server  the computer that runs software
which holds the web pages and serves up
(delivers) web page to the client. This computer
must be connected to the Internet. The software
delivering the web pages is also called a web
server
 Question: What is the software we use to move
the web pages we have built on to the web
server?
 Question: What is the name of the web server
machine at Western?

Slide 30 of 54
Web Browser






Once you have moved your web site onto the web
server you MUST test your web site by opening it in a
Web Browser
Web Browser  software/program that displays
formatted web pages to the client.
Question: What is the input we give a web browser?
Question: What is the output from the web browser
program?
Question: Can you name 3 web browser programs?
Question: Does anyone know how you look at the
html that was used to create the page currently
displayed in the browser?
Slide 31 of 54
HTML and Web Browsers
<html>
<title>Sample Web Page</title>
<body>
Here is some <b>text</b> and a picture: <img src="sunset.gif">
and a link to <a href="http://www.uwo.ca">Western</a>
</body>
</html>
Input to
Web Browser
Output from
Web Browser
Slide 32 of 54
Break

Slideshows of your
work for assignment 1:
◦ http://www.csd.uwo.ca/~l
reid/cs1033/assignment1

Laura loved this one 

Slide 33 of 54
What is HTML?

History:
◦ In the late 1980s, Tim Berners Lee proposed a way of
sharing research papers using the Internet and
hypertext (immediate links to other documents)
◦ In 1990 Berners Lee set the specifications for the
HTML language and wrote a browser to read HTML
files and output linkable papers
◦ He proposed html tags
 Example of some tags  <html>, </html>, <b>, </b>,<ol>,
</ol>
 Tag always start with “<“ and end with “>”
 Most tags come in twos: opening tag and a closing tag, for
example <title>This is the title of the web page</title>
◦ Originally we made html files (web pages) with simple
text editors like Notepad
Slide 34 of 54
History of HTML

Question: Can you guess at some of the
tags do you think we would need in a web
page?
Slide 35 of 54
Types of HTML tags

Section tags
◦ <html>, <body>, <head>, …

Formatting tags
◦ <b>, <ul>, <i>,<p>,<h2>,</b>,</h2>, …

Link tags
◦ <a href=“http://www.msn.com”>, <a>, …

Placeholder tags (standalone or unpaired
tags)
◦ <img src=“ “>, <hr>
Slide 36 of 54
Lets make a web page the Old
Fashioned Way!
Open Notepad
 Save your file as myfirstpage.html
 Type in some tags
 Save the file again
 Close the file
 Double click on it, it should now open in IE
 In IE, from the menu select View>Source
 Edit the tags some more and save the file
 Go back to IE and hit the refresh button

Slide 37 of 54
It is way to hard to remember all the
tags, so…
Dreamweaver to the rescue!
 Dreamweaver creates the tags for us so
that we don’t have to remember the syntax
for each tag!
 Similar programs include:

◦ Microsoft FrontPage
◦ HTML Kit (free)

Question: Can you still see the tags in
Dreamweaver? If so, how?
Slide 38 of 54
Dreamweaver Tips






Web pages will NOT format as precisely as something
like a MS Word document to be printed because
everyone’s resolution is different and screen size is
different.
Design a template and then save it and make copies for
each page in your site and add the content to the
copies
Don’t forget to make an images folder! Put your
images in the folder BEFORE you start adding them to
your page.
Try previewing your page in more than one browser
It is easier to create the top level folder and subfolders
first and then point Dreamweaver to that folder
Always use lower case names with no spaces for all
folder and all file names
Slide 39 of 54
Page Title
Page title is very important, when you print a
web page, the title appears at the top of
printed paper
 Search engines look at page title
 Always set the page title on all your pages
 Start with the site name, then hyphen and the
page description

◦ Examples:
The Department of Computer Science – Undergraduate Information
Laura K. Reid Online Resume – Work Experience
Slide 40 of 54
Google Does It Right!
Slide 41 of 54
Formatting Text

Headers  H1, H2, H3, H4, H5, H6
◦ H1 is the largest
◦ All are bolded

Should use pixels rather than points for text
size, Use ems or % when the audience might
need to enlarge the text
Headers
Font type
Text Size
Text Color
Special Effects
Slide 42 of 54
Changing Background and Link Colours

If you decide to use a background image,
make sure it is not too busy and the image
file size is small.

Don’t forget about your links colours either!
Try to pick colours that work with your site
palette
Slide 43 of 54
Graphics
Use common universal formats such as jpg, gif and
png files that will work in any browser
 Resize and compress the image as much as possible in
Photoshop (or other graphics package) BEFORE
putting it in with Dreamweaver.
 Any resizing you do within Dreamweaver will not
affect the download speed
 ALWAYS set the alternative tag and title tag:

◦
◦
◦
◦
Meet Barriers Free Access Requirements
Shows when page is loading
Shows when mouse hovers over
Shows up when using a text browser
Slide 44 of 54
Graphics continued
Consider dial up users
 The site must not take more than 25-30
seconds for a 56K modem user!
 Dreamweaver allows you to check this:

◦ Edit>Preferences>Status Bar
 Set the connection speed to 56 Kilobits
 Look at the bottom status bar on the Document
Window to see download speed
Slide 45 of 54
Links – Type 1


5 Basic Types of Links you can create:
TYPE 1: Links to other pages within your
site:
◦ For Example:
 Link from index.html to contactinfo.html
 Link from contactinfo.html back to index.html
Slide 46 of 54
Links – Type 2

TYPE 2: Link to a different website
◦ For example
 Link from index.html to http://www.utoronto.ca
Slide 47 of 54
Links – Type 3

TYPE 3: Link to an email address
◦ For example:
 Link to [email protected]
 Clicking on the link brings up default emailer like
Outlook
Slide 48 of 54
Links – Type 4a

TYPE 4a: Link on a image
◦ On the whole image:
 Link to http://www.canada.gc.ca
Slide 49 of 54
Links – Type 4b

TYPE 4b: Link to the parts of an image
◦ On the parts of an image, for example the
provinces:
Slide 50 of 54
Links – Type 5

TYPE 5: Link to particular spot within a
page
◦ The spot is called the bookmark or the named anchor
◦ Find the spot you want to jump to and then select
Insert>Named Anchor
◦ Give the spot a name you make up, for example:
middleofpage
◦ Go to where you want the link and add a link with #
in front of it and the name of the anchor:
Slide 51 of 54
Links – Type 5

Named anchors can link to any spot within
the current page OR you can link to the
middle of another page, for example:
◦ http://en.wikipedia.org/wiki/Jpg#Sample_photogra
phs

Use named anchors to make Back to Top
buttons or jump from a list to another area
of the page
Slide 52 of 54
Named
Anchors
used on
this page
Next Week
Tables to layout out your pages
 How to upload your web site
 How to attract search engines
 How Google works
 A little bit more Internet History

Slide 54 of 54
Review





Question: What is the file name of the home
page (first page that is displayed) for every web
site?
Question: Who come up with the html tags?
Question: (b) and (/b) are valid html tags,
TRUE or FALSE
Question: Resizing your image inside
Dreamweaver to make it smaller will make
your page download faster, TRUE or FALSE?
Question: Name the 5 types of links
Slide 55 of 54